攻城狮-web

发表于 | 分类于 |

渐进增强与优雅降级

1
2
3
渐进增强(progressive enhancement):针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级(grance degradation):一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应环境的需要。降级意味着效果减弱，增强意味着效果不断变强，保证其处于安全地带

渐进增强的点评

1
> 渐进增强关注的是内容的本身，内容是我们建立网站的诱因，有的展示它，有的收集它，有的寻求，有的操作等等，唯一的相同点它们全都涉及到内容，因此使得“渐进增强”成为一种更为合理的设计规范。

优雅降级的点评

1
2
优雅降级应该针对那些高级，完善的浏览器来设计网站，而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象先定位主流浏览器（IE，Mozlila...）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
攻城狮-web

发表于 | 分类于 |

json数据加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
案例分析
var box = document.querySelector('div')
var btn = document.querySelector('button')
btn.onclick = function(){
    var xhr = new XMLHttpRequest();
    //输入网址，参数一是请求方式
    xhr.open('get','true')
    //发起请求
    xhr.send();
    xhr.onreadyStateChange = function(){
        if(xhr.readyState===4){
            if(xhr.status===200){
                console.log(xhr.responseText)
                function json_callback(data){
                    console.log(data)
                    }
            //利用javaScript的src不存在跨域问题，相当于函数参数调用，参数是我们需要的数据
                json_callback({
                    name:'jsonData'
                    })
                }
            }
        }
    }

跨域:不同域相互请求资源

攻城狮-web

发表于 | 分类于 |

变量提升

在js中，理解变量作用域以及变量提升是非常重要的，以下的几点需要我们认真掌握

  • 变量作用域——一个变量的作用域表示它在这个变量存在的上下文，它指定了你可以访问哪些变量以及是否有权限去访问某些变量。
  • 变量作用域分为全局作用域和局部作用域。
  • 局部变量(处于函数级别的作用域,只是在函数内部使用)
  • 一个函数内部定义的变量只能在函数的内部使用或者函数内部嵌套的函数调用(闭包除外)

    案例

demo 1

1
2
3
4
5
var a
console.log(a) //undefine
var a = 1;
console.log(a) //1

demo 2

1
2
3
4
5
6
7
8
9
函数表达式
fun()
var fun = function(){
    console.log("今天放假")
    }
以上函数实际执行的过程
var fun,
fun() //fun is undefined(这是一个error)

demo 3

1
2
3
4
5
6
函数声明
fun()
var fun = function(){
    console.log("今天放假")
    }
console.log(fun)  //function fun() [打印出完整函数]

demo 4

1
2
3
4
5
6
函数声明与变量声明
var fun = 1;
alert(fun) //1
function fun(){}
alert(fun) //function(){}

函数声明的优先级高于变量声明,如果这两者同时声明,函数声明会覆盖变量声明


1
2
3
4
5
6
7
var a = 2;
function show(){
    console.log(a)
    var a = 21;
    console.log(a) //21
    }
show() //a is not defined

以上代码实际执行的流程
var a = 1;
function show(){
var a;
console.log(a) //undefined
a = 2;
console.log(a) //2
}
show() //a is not defined
demo 5

1
2
3
4
5
6
7
8
内部取消var 
var a = 10;
function fn(){
    console.log(a) //10 内部没有变量var,所以只能获取到外部的vae
    a = 2;
    console.log(a) //2 这里的a是全局变量
    }
    fn()

demo 6

命名函数表达式

声明函数表达式的名字不会进入名字空间，外部的都取不到

1
2
var obj = function fn(){}
alert(a) //a is not defined

在函数的内部

1
var obj = function fn(){alert(a)}

demo 7

1
2
3
4
5
6
7
8
函数参数
function fn(a,b){
    console.log(a)
    //没有参数的情况下---undefined
    //有参数的情况下---3
    var a = 3;
    }
    fn(3)

demo 8

1
2
3
4
5
6
混合函数
function fn(a,b){
    console.log(fn) //function(){}
    function fun(){}
    }
fn(4)

函数声明的优先级>参数>var变量

攻城狮-web

发表于 | 分类于 |

闭包


闭包就是能够读取其他函数内部变量的函数，闭包就是将函数内部函数外部连接起来的一座桥梁
它的最大用处两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中


1
2
3
4
5
6
7
8
9
10
11
12
function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
result(); // 1000

代码中的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中两个对象互相引用，而不被第三者引用，那么这两个对象就会被回收
    内存泄露
  • 是指一块呗分配的内存既不能被调用也不能被使用，又不能被回收，直到浏览器进程结束
    内存泄露的条件
  • 外部引用内部，内部引用外部
    1
    2
    3
    btn.onclick = function(){
                    alert(btn.id)
           }

/btn引用了一个匿名函数，btn释放之前这个匿名函数是不会被释放的，匿名函数释放的时间
在匿名函数内部，又引用btn,形成了一个环式引用，谁都释放不了，会造成内存泄露 /

以上问题解决方案


1
2
3
4
btn.onclick = function(){
    alert(btn.id)
    }
btn = null; //手动释放内存

闭包案例

1
2
var son = father()
son();

father()函数被赋值给了全局变量son,而全局变量的生命周期是在浏览器关闭的时候结束
son引用father,所以father函数一直在内存中不会被回收

案例继续

1
2
3
4
5
6
function sum(){
    var i = 0;
    i++;
    console.log(i);
    }
    sum();
1
2
3
4
5
6
7
8
9
10
11
12
13
function sum(){
    var i = 0;
    function sumList(){
        i++;
        console.log(i)
        }
        return sumList
    }
    var add = sum();
    add() //1
    add() //2
    add() //3

等待for循环结束后才继续setTimeout的执行，并不是在一开始就在1000ms执行

1
2
3
4
5
for(var i = 0;i<10;i++){
    setTimeout(function(){
        console.log(i)
        },1000)
    }

使用闭包的形式将for循环的i留在内存中

1
2
3
4
5
6
7
8
for(var i = 0;i<10;i++){
    var a = function(e){
        return function(){
            console.log(e)
            }
        }
        setTimeout(a[i],0)
    }

js中有函数作用域,但是没有块级作用域(ES5以前),所以通过()()模拟块级作用域

1
2
3
4
5
6
7
8
for(var i = 0;i<10;i++){
    function(){
        setTimeout(function(e)
        {
            console.log(e)
            },0)
        }(i)
    }

攻城狮-web

发表于 | 分类于 |

说明

在学习js的过程中，最难搞清楚的就是this的指向谁？this本质上可以看做是函数调用时的运行环境对象-content.为执行中的函数判定this绑定需要找到这个函数的直接调用点。
谁调用指向谁，找不到调用的就指向window
new,call apply改变this的指向
a.call(b)将函数的内部指向b,同时调用了a函数
argument是一个传参数的集合，类数组，用在所传递的参数不确定的情况下

案例说明

1
2
3
4
1、new绑定，使用新构建对象作为运行环境
    function fn(a){
        this.name = a; //this
    }

使用new发生的几件事

  1. 新建一个对象
  2. 将这个对象加入原型链
  3. this绑定
  4. 一般返回这个新对象
  • 函数结合new当做构造函数使用,本质也是函数调用，表达式的值等于return的结果
1
2
3
4
5
6
function fun(){
        var name = "Beter"
        console.log(this.name) //undefine
        console.log(this)   //window
    }
    fun()
  • this最终指向的是调用它对象,这里的函数fun实际是被window对象所指出的。
1
2
3
4
5
6
7
var o = {
user:'beter',
fn:function(){
    console.log(this.user) //beter
    }
}
o.fn();

在这里this为什么不是指向window.解释一下，window是js中 的全局变量，我们创建的变量实际上就是给window添加属性，所以这里的window指向o

1
2
3
4
5
6
7
8
9
10
11
var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
            console.log(this.b); //undefined
        }
    }
}
o.b.fn();

  • 情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window
  • 如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象
  • 如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

特殊情况

1
2
3
4
5
6
7
8
9
10
11
12
var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this) //window
        }
    }
}
var j = o.b.fn
j()

这里this指向的是window，是不是有些蒙了？其实是因为你没有理解一句话，这句话同样至关重要。this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的，例子4中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window
构造函数中的this

1
2
3
4
5
function fun(){
    this.user = "beter"
}
var a = new fun();
console.log(a.user) //beter

这里的对象a可以点进函数fn里面的user是因为new关键字可以改变this的指向，将这个this指向a，为什么说a是对象，因为new关键字就是创建一个实例对象，这里用变量a创建一个fun的实例(相当于复制了一份fun到对象a里面)，调用这个函数fun的是对象a，this就自然指向对象a。
/除了new外，自行改变this指向的还有call,apply,bind/
升级代码

1
2
3
4
5
6
var x = 2;
　　function test(){
　　　　this.x = 1;
　　}
　　var o = new test();
　　alert(x);  //2

当this遇上return

1
2
3
4
5
6
7
function fn()  
{  
    this.user = '追梦子';  
    return {};  
}
var a = new fn;  
console.log(a.user); //undefined

继续看

1
2
3
4
5
6
7
function fn()  
{  
    this.user = '追梦子';  
    return function(){}; //这里的function是一个对象，只是未执行
}
var a = new fn;  
console.log(a.user); //undefined

demo不能停

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function fn()  
{  
    this.user = '追梦子';  
    return 1;
}
var a = new fn;  
console.log(a.user); //追梦子
function fn()  
{  
    this.user = '追梦子';  
    return undefined;
}
var a = new fn;  
console.log(a.user); //追梦子

如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回不是一个对象那么this指向函数的实例

1
2
3
4
5
6
7
function fn()  
{  
    this.user = '追梦子';  
    return null;
}
var a = new fn;  
console.log(a.user); //追梦子

虽然null也是对象，但是this依旧指向函数的实例。

函数还可以作为某个对象的方法调用，这时this就指这个上级对象

1
2
3
4
5
6
7
function test(){
　　　　alert(this.x);
　　}
　　var o = {};
　　o.x = 1;
　　o.m = test;
o.m(); // 1

对象中的this指向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
demo1---
var obj={name:'jjc'}
        var obj1 = {
            name:"monkey",
            fn:function(){
            console.log(this.name)
            }
        }
        obj1.fn(); //monkey
        obj1.fn.call(obj); //jjc
demo2---
var obj={
            name:'jiajiac',
            fn:function(){
                console.log(this.name) //jiajiac
                }
            }
            obj.fn()
demo3---
        var name = 'guiyanhuaichao';
            var obj={
            name:'lige-xin',
            fn:function(){
                var name = this.name;
                console.log(name.name) //fengjun
                alert(name) //guiyanhuaichao
                }
            }
        obj.fn()

对应事件的调用

1
2
3
4
var btn = document.querySelector('button');
        btn.onclick = function(){
            console.log(this) //this指向btn/对应的元素 
        }

全局调用函数内部的this

1
2
3
4
function Fun(){
            console.log(this) //指向window
        }
        Fun()  //window.Fun()

定时器会将this->window

1
2
3
4
5
6
7
8
var btn = document.querySelector('button');
            btn.onclick = function(){
                
                console.log(this) //this指向btn/对应的元素
                setTimeout(function(){
                console.log(this) //window 全局变量，对于任何时间的设置都会指向window
                },1000) 
            }

对象下面设置的定时器依旧指向window

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var name = 'houzi',sex='男',other='basket'
            var obj={
            name:'贾己超',
            sex:'男',
            other:'篮球',
            fn:function(){
                var _this = this;
                console.log(this.name) //jjc
                setTimeout(function(){
                    alert(_this.sex) //男 这里指向全局变量
                    alert(_this.other)  //basket 这里指向全局变量
                },500)
            }
        }
        obj.fn()
攻城狮-web

发表于 | 分类于 |

走过的路，有太多的风景于眼底匆匆而过，”触目横斜千万朵，赏心只有三两枝”。能够入心的，那是沾染了清露的光泽，能够让你感动和念念不忘的，那是真心相携走过来的。或许人生不可能永如初见，但时光深处，我更愿在平淡的岁月里，守着一份细水长流的爱，这何尝不是一种幸福呢！

攻城狮-web

发表于 | 分类于 |

说明:

  • Bower与npm一样，都是包管理工具，Bower是一个客户端技术的包管理器，可以用于搜索、安装、卸载javascript,HTML,CSS之类的资源
  • 使用Bower安装bootstrap,jquery都不用去官网直接下载，只需要一个命令($bower install jquery –save), jquery就会安装在本地计算机上，你也可以通过Bower的info命令去查看任意库信息
  • 可以很容易的扩展客户端的依赖关系
  • 可以让升级变得简单

Bower安装(前提要安装nodejs)

1
$npm install bower -g

Bower初始化

1
$npm init

会有提示信息，一直按enter即可，然后就会有bower.json文件在该目录文件下，如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "name": "bower-teest",
  "description": "bower test",
  "main": "",
  "authors": [
    "jun-feng <18603454788@163.com>"
  ],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Bower安装包

1
2
$ bower install <package> --save
$ bower install jquery --save

然后bower就会从远程下载jquery最新版本到你的bower_components\jquery\dist目录下

其中–save参数是保存配置到你的bower.json，你会发现bower.json文件已经多了一行：

Bower查看包信息

1
$ bower info jquery

Bower更新包

1
$ bower update

攻城狮-web

发表于 | 分类于 |


文字，是飘逸遐想的心之语，超越风尘的爱之味，破晓心语情之意，是来自心灵，绽放自我，叹感人生的唤醒。一段深情之作，会让我们探寻心情，一段惊人之语，会让我们沉醉不已，无须道破的模切，雨露甘霖让人愉悦，欣赏一段美丽的文字，生活总似诗意般美好。词情深邃的文字婉约清雅，恬静清逸的墨香淡泊飘逸。

攻城狮-web

发表于 |

bootstrap发展历程

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/]

bootstrap 下载

bower安装

1
$ bower install bootstrap
1
2
选择版本号
$ bower bootstrap@3.3.7

Npm 安装

1
$ npm install bootstrap

Github安装

1
git clone
1
2
3
4
5
##基本模板
<meta content="IE=edge"> 强制用IE最新模式渲染
<meta name="description" content="描述"> 强制用IE最新模式渲染
<meta name="keywords" content="IE=edge"> 强制用IE最新模式渲染
可以使用HBuilder的自定义模板引入文件

容器

.container 响应式宽度
.container-fluid 100%宽度

示例代码：

1
2
3
4
5
6
<div class="container">
  ...
</div>
<div class="container-fluid">
  ...
</div>

栅格系统

说明:

栅格系统用于一系列的行(row)与列(column)的组合来创建整个页面的布局，注意row与column都是在container中使用的，然后将自己需要添加的内容放到行列中就行。示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

栅格参数

image
每个col-…都必须放在row(行-12)里面,每一个col-屏幕类型-份数都会将row分成这样的份数，依次来响应不同浏览器屏幕的宽度
如何多分配的份数超出12，则会显示到下一行。

媒体查询

1
2
3
4
5
6
7
8
9
10
11
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

对齐方式

1
2
3
4
5
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>


以上的介绍都是BT的css布局，当然还有组件，js插件，网站案列都没有介绍，对于常规网站来说，其前台的页面开发与动效应用，交互体验我们都可以通过官方文档查阅基本可以实现，再加上我们自己的的一些效果我相信写一个可以发布的网页demo是木有问题的，BT上面也有自己的字体图标，我本人觉得这些图标不是太生动，富有创造力，因此我建议使用iconfont的图标http://www.iconfont.cn/,使用方法看文档就行。
bootstrap官方网站:http://v3.bootcss.com/