渐进增强与优雅降级
|
|
渐进增强的点评
|
|
优雅降级的点评
|
|
Mrbai
|
|
|
|
|
|
|
|
跨域:不同域相互请求资源
在js中,理解变量作用域以及变量提升是非常重要的,以下的几点需要我们认真掌握
demo 1
demo 2
demo 3
demo 4
函数声明的优先级高于变量声明,如果这两者同时声明,函数声明会覆盖变量声明
|
|
以上代码实际执行的流程
var a = 1;
function show(){
var a;
console.log(a) //undefined
a = 2;
console.log(a) //2
}
show() //a is not defined
demo 5
demo 6
声明函数表达式的名字不会进入名字空间,外部的都取不到
12 var obj = function fn(){}alert(a) //a is not defined在函数的内部
1 var obj = function fn(){alert(a)}
demo 7
demo 8
函数声明的优先级>参数>var变量
闭包就是能够读取其他函数内部变量的函数,闭包就是将函数内部函数外部连接起来的一座桥梁
它的最大用处两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中
|
|
代码中的result就是闭包f2函数,它一共运行了2次,第一次是999,第二次是1000,说明了函数f1中的局部变量一直保存在内存中,并没有在f1调用的时候清除,原因在于f1是f2的父函数,而f2被赋给了一个全局变量,导致f2始终在内存中,f2依赖于f1,因此f1也始终在内存中,不会在调用结束后被垃圾回收机制回收(garbage collection)
使用闭包的注意点
- 由于闭包会使得函数中变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除
- 闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
闭包的其他解释
闭包—有权访问另一个函数作用域中的变量的函数
方式:一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量
三个特性:- 函数嵌套函数
- 函数内部可以引用外部的参数和变量
- 参数和变量不会被垃圾回收机制处理
垃圾回收机制- JS中的一个对象不再被引用,那么这个对象就会被垃圾回收(garbage collection)
- JS中两个对象互相引用,而不被第三者引用,那么这两个对象就会被回收
内存泄露- 是指一块呗分配的内存既不能被调用也不能被使用,又不能被回收,直到浏览器进程结束
内存泄露的条件- 外部引用内部,内部引用外部
123 btn.onclick = function(){alert(btn.id)}
/btn引用了一个匿名函数,btn释放之前这个匿名函数是不会被释放的,匿名函数释放的时间
在匿名函数内部,又引用btn,形成了一个环式引用,谁都释放不了,会造成内存泄露
/
以上问题解决方案
|
|
|
|
father()函数被赋值给了全局变量son,而全局变量的生命周期是在浏览器关闭的时候结束
son引用father,所以father函数一直在内存中不会被回收
|
|
|
|
等待for循环结束后才继续setTimeout的执行,并不是在一开始就在1000ms执行
|
|
使用闭包的形式将for循环的i留在内存中
|
|
js中有函数作用域,但是没有块级作用域(ES5以前),所以通过()()模拟块级作用域
在学习js的过程中,最难搞清楚的就是this的指向谁?this本质上可以看做是函数调用时的运行环境对象-content.为执行中的函数判定this绑定需要找到这个函数的直接调用点。
谁调用指向谁,找不到调用的就指向window
new,call apply改变this的指向
a.call(b)将函数的内部指向b,同时调用了a函数
argument是一个传参数的集合,类数组,用在所传递的参数不确定的情况下案例说明
|
|
使用new发生的几件事
- 新建一个对象
- 将这个对象加入原型链
- this绑定
- 一般返回这个新对象
- 函数结合new当做构造函数使用,本质也是函数调用,表达式的值等于return的结果
|
|
|
|
在这里this为什么不是指向window.解释一下,window是js中 的全局变量,我们创建的变量实际上就是给window添加属性,所以这里的window指向o
特殊情况
|
|
这里this指向的是window,是不是有些蒙了?其实是因为你没有理解一句话,这句话同样至关重要。this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的,例子4中虽然函数fn是被对象b所引用,但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window
构造函数中的this
|
|
这里的对象a可以点进函数fn里面的user是因为new关键字可以改变this的指向,将这个this指向a,为什么说a是对象,因为new关键字就是创建一个实例对象,这里用变量a创建一个fun的实例(相当于复制了一份fun到对象a里面),调用这个函数fun的是对象a,this就自然指向对象a。
/除了new外,自行改变this指向的还有call,apply,bind/
升级代码
当this遇上return
|
|
继续看
demo不能停
如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回不是一个对象那么this指向函数的实例
|
|
虽然null也是对象,但是this依旧指向函数的实例。
函数还可以作为某个对象的方法调用,这时this就指这个上级对象
|
|
对象中的this指向
|
|
对应事件的调用
|
|
全局调用函数内部的this
|
|
定时器会将this->window
|
|
对象下面设置的定时器依旧指向window
|
|
走过的路,有太多的风景于眼底匆匆而过,”触目横斜千万朵,赏心只有三两枝”。能够入心的,那是沾染了清露的光泽,能够让你感动和念念不忘的,那是真心相携走过来的。或许人生不可能永如初见,但时光深处,我更愿在平淡的岁月里,守着一份细水长流的爱,这何尝不是一种幸福呢!
说明:
Bower安装(前提要安装nodejs)
1 $npm install bower -gBower初始化
1 $npm init
会有提示信息,一直按enter即可,然后就会有bower.json文件在该目录文件下,如下:
Bower安装包
12 $ bower install <package> --save$ bower install jquery --save
然后bower就会从远程下载jquery最新版本到你的bower_components\jquery\dist目录下
其中–save参数是保存配置到你的bower.json,你会发现bower.json文件已经多了一行:
Bower查看包信息
1 $ bower info jqueryBower更新包
1 $ bower update
文字,是飘逸遐想的心之语,超越风尘的爱之味,破晓心语情之意,是来自心灵,绽放自我,叹感人生的唤醒。一段深情之作,会让我们探寻心情,一段惊人之语,会让我们沉醉不已,无须道破的模切,雨露甘霖让人愉悦,欣赏一段美丽的文字,生活总似诗意般美好。词情深邃的文字婉约清雅,恬静清逸的墨香淡泊飘逸。
1、是基于HTML,CSS,JAVASCRIPT.简洁灵活,使web开发更加快捷
2、Twitter公司主导研发的开源框架,主要包括栅格系统,CSS模块以及JS插件等。
3、V2(兼容IE-8),V3(不兼容IE6-8,用less编译),V4(预览版,加入了flex布局,sass编译)
4、依赖jquery
5、jquery3兼容性较差
6、中文官网 [http://www.bootcss.com/]
|
|
|
|
|
|
|
|
|
|
.container 响应式宽度
.container-fluid 100%宽度
示例代码:
说明:
栅格系统用于一系列的行(row)与列(column)的组合来创建整个页面的布局,注意row与column都是在container中使用的,然后将自己需要添加的内容放到行列中就行。示例代码如下:
1234567891011121314 <div class="container"><!-- Stack the columns on mobile by making one full-width and the other half-width --><div class="row"> //行设置<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> //超小屏幕(<768px)占用6格,中等屏幕(>=992px)占用4格<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><!-- Columns are always 50% wide, on mobile and desktop --><div class="row"><div class="col-xs-6">.col-xs-6</div><div class="col-xs-6">.col-xs-6</div></div></div>
栅格参数
每个col-…都必须放在row(行-12)里面,每一个col-屏幕类型-份数都会将row分成这样的份数,依次来响应不同浏览器屏幕的宽度
如何多分配的份数超出12,则会显示到下一行。
媒体查询
对齐方式