勿忘初心

实用型JavaScript方法总结--持续更新中

2018-04-22T09:11:25.000Z

收集一些比较有趣且实（装）用（X）的JavaScript方法实现，学习并提供总结，欢迎大家提提意见一起探讨。

去抖动函数

//在一段连续时间内，传入的fn只执行一次
//去抖动函数
function debouce(fn,time,immediate){
    var firstCall = false,//没有执行过
        timer = null;
    return function(){
        var delayFn,
            ctx = this,
            args = arguments;
        var callNow = immediate && !firstCall;
        if(callNow){
            firstCall = true;//执行过
            return fn.apply(ctx, args);
        }
        delayFn = function(){
            timer = null;
            fn.apply(cxt,args);
        }
        clearTimeout(timer);
        timer = setTimeout(delayFn, time);
    }
}

节流函数

//节流函数
//在一段连续时间内，减少这段时间内fn的执行频率
function throttle(fn, delay){
    var last = 0,
        timer;
    return function(){
        var ctx = this,
            res = null,
            now = Date.now(),
            args = arguments,
            remainTime = delay - (now - last);//距离上一次执行的剩余时间
        //last为0：代表第一次执行。remainTime<=0：剩余时间为0立刻执行fn。
        //remainTime>delay：代表 remainTime - delay = -(now-last) = last-now >0,表示客户端时间调为了过去时间
        if(last == 0 || remainTime <=0 || remainTime > delay){
            //立刻执行
            if(timer){
                clearTimeout(timer);
                timer = null;
            }
            now = Date.now();
            return fn.apply(ctx, args);
        }else{
            clearTimeout(timer);
            timer = setTimeout(function(){
                now = Date.now();
                res = fn.apply(ctx, args);
                ctx = null;
                args = null;
                timer = null;
            }, remainTime);
            return res;
        }
    }
}

类型判断

//类型判断
function isType(type) {
    return function(obj) {
        return Object.prototype.toString.call(obj) === '[object ' + type + ']';
    }
}

分批执行

//集合内元素单位时间内按fn分批执行
function timeChunk (ary, fn, count) {
    var obj,t,len = ary.length,trunks = 0,out = false;
    var start = function() {
        for (var i = trunks * (count || 1); i < len; i++) {
            var min = (trunks + 1) * count;
            if(i == len -1){
                out = true;
            }
            if (i - min >= 0) {
                trunks += 1;
                break;
            }
            fn(ary[i]);
        }
    }
    return function() {
        t = setInterval(function() {
            if (out) { // 如果全部节点都已经被创建好
                return clearInterval(t);
            }
            start();
        }, 2000); // 分批执行的时间间隔，也可以用参数的形式传入
    };
};
var a = [1,2,3,4,5,6,7,8,9];
var xfn = function(i){
    console.log(i);
}
var count = 5;
var test = timeChunk(a, xfn,count);

装饰器 aop面向切面编程

//aop面向切面编程
Function.prototype.before = function(fn){
    var selfFn = this;
    return function(){
        fn.apply(this,arguments);// 执行新函数，修正this
        return selfFn.apply(this,arguments);// 执行原函数
    }
}
Function.prototype.after = function(fn){
    var selfFn = this;//保存当前函数的引用
    return function(){
        var res = selfFn.apply(this, arguments)
        fn.apply(this, arguments);
        return res;
    }
}

Object.create的实现原理、new对象的步骤

//Object.create的实现原理
//object.create一般用来创建obj,其实质就是将源对象的引用指向到实例的__proto__上，var a = {a:1}; var b = Object.create(a); b的结构：{__proto__:{a:1,__proto__{...}}},{a:1,__proto__{...}}就是a
function ObjectCreate(o){
    function F(){};
    F.prototype = o;
    return new F();
}
//new对象的步骤
var objectFactory = function() {
    var obj = new Object(); // 从Object.prototype 上克隆一个空的对象
    var Constructor = [].shift.call(arguments); // 取得外部传入的构造器，此例是Person
    obj.__proto__ = Constructor.prototype; // 指向正确的原型
    var ret = Constructor.apply(obj, arguments); // 借用外部传入的构造器给obj 设置属性
    return typeof ret === 'object' ? ret : obj; // 确保构造器总是会返回一个对象
};

instanceof的实现原理

function instaceof_(A, B){
    var ao = A.__proto__;
    var bo = B.prototype;
    while(true){
        if(ao === null) return false;// 因为Object.prototype.__proto__ 为null
        if(ao === bo) return true;
        A = A.__proto__;
    }
}

判断对象是否为空

function isEmptyObj(obj){
    for(var i in obj){
        if(obj.hasOwnproperty(i)){//只针对对象自身属性，而非继承属性
            return false;
        }
    }
    return true;
}

蹦床函数

//递归方法优化，防止函数调用栈溢出最大值
//当在函数作用域下 调用另外一个函数 循环往复 会超出函数调用最大值
//这种情况可以采用递归调用来优化,可以用到蹦床函数：接收一个参数，当参数类型为函数时，执行并返回。
//场景：一个方法需要在方法内循环调用，体量很大，则需要使用蹦床函数递归优化。
function trampoline(fn){
    while(true){
        if(fn && fn instanceof Function){
            fn = fn();
        }
        return fn;
    }
}

事件监听的装饰模式

//事件监听的装饰模式
function addEvent(dom, handle, type){
    try{
        if("addEventListener" in document){
            dom.addEventListener(type,handle);
        }else{
            dom.attachEvent("on"+type,handle);
        }
    }catch(e){
        dom["on"+type] = handle;
    }
}

需求实现 add(1)(2)(3) - 6

//需求实现 add(1)(2)(3) - 6
function add(n){
    var arr = [];
    function fn(){
        [].push.apply(arr, [].slice.apply(arguments));
        return fn;
    }
    fn.toString = function(){
        var res = 0;
        arr.map(function(item, i) {
            res+=item;
        })
        return res;
    }
    return fn(n)
}

require和define的原理

//require和define的模拟
(function(w){
    var require,
        define;
    // factory只调用一次，初始化后下次require的时候不再调用factory方法，
    //而是直接返回modules[id].exports这里调用factory是隐式赋值，
    //利用对象在函数中作为参数传递时，只是传递的对象的引用，
    //那么只要在define方法的factory中module.exports进行属性赋值，
    //就相当于直接在modules中修改属性
    (function(){
        var module = {};
        //id只是命名空间，factory在require时执行，export是命名空间的输出
        //factory的执行目的就是将这个空间内需要存储的对象放入export中
        //在require该命名空间时返回export
        define = function(id, factory){
            if(!module[id]){
                module[id] = {
                    id: id,
                    factory: factory,
                    export: {}
                }
            }else{
                console.log(id+" the module has been define")
            }
        }
        //接收一个id 并返回在define中factory生成的对象
        require = function(id){
            if(!module[id]){
                console.log(id+" the module is not defined");
            }else{
                if(module[id].factory){
                    var factory = module[id].factory;
                    factory(require, module[id].export, module[id]);
                    delete module[id].factory;
                }
                return module[id].export;
            }
        }
        define.remove = function(id){
            delete module[id];
        }
    })();
})(window)

继承实现方法

function extend(){
    return function(child, parent){
        function F(){};
        F.prototype = parent.prototype;
        child.prototype = new F;
        child.prototype.constructor = child;
        child.subperproto = parent.prototype;
        return child;
    }
}
var inherit = (function(){
  function F() {}
  return function (child, parent) {
    F.prototype = parent.prototype;
    child.prototype = new F;
    child.prototype.constructor = child;
    child.superproto = parent.prototype;
    return child;
  };
})();

欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。

本文链接：http://lucylc.com/JavaScript/2018/04/22/实用型JavaScript方法总结.html

JavaScript常用设计模式总结

2018-04-16T09:11:25.000Z

一万个人心中，有一万哈姆雷特。JavaScript虽然是弱类型语言，但正因于此造就了JavaScript的灵活性和创造型。不同的人写实现同一个需求，可能实现方式都不相同，可以写的很简单，也可以很复杂，甚至可以使用设计模式来构建你的代码。

写在前面，关于这篇文档的目的在于总结梳理，易于后期温故知新。

JavaScript中使用设计模式的原因

关于在JavaScript中使用设计模式的原因有三点：

可维护性、复用性：适当的使用设计模式有助于降低代码的耦合度，使代码的复用和项目后期代码的重构变得更加容易，以及对”喜闻乐见”的需求变更更好的实现。
团队协作：设计模式可以更好的组织项目代码结构，使得团队成员之间的工作任务依赖性降低。
性能：合理使用设计模式，可以大幅度减少代码量，提高程序的运行速度。
备注：实现设计模式容易，但是对于应该在什么时候使用什么模式却比较困难，盲目的套用设计模式，反而会使得项目复杂度提高，性能较低，造成过度设计。

单体模式/单例模式

描述：单例模式属于创建型模式，用来限制对象的初始化，并且产生一个唯一实例，可以确保所有代码使用的是都是同一份资源。

优点：可以用来划分命名空间，减少全局变量数目。

场景：全局遮罩层。loading等全局组件。全局配置信息或者应用中比较唯一的信息。

案例代码：创建div

实现方式一：

var createDiv = (function(){
  var div;
  return function(){
    if(!div){
      div = document.createElement("div");
      div.innerHTML = "弹出框内容";
      div.style.display = "none";
      document.body.appendChild(div);
    }
    return div;
  }
});
document.body.onclick = function(){
  var div = createDiv();
  div.style.display = 'block';
}

实现方式二：

var createDiv = (function(){
  var div = document.createElement("div");
  div.innerHTML = "弹出框内容";
  div.style.display = "none";
  document.body.appendChild(div);
  return div;
}
//通用单例模式
var getInstance = function(fn){
  var ret;
  return function(){
    return ret || (ret = fn.call(this,arguments));
  }
}
var divInstance = getInstance(createDiv);
document.body.onclick = function(){
  var div = divInstance();
  div.style.display = 'block';
}

代理模式

描述：代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。代理模式的关键是，当客户不方便直接访问一个对象或者不满足需要的时候，提供一个替身对象来控制对这个对象的访问，客户实际上访问的是替身对象。替身对象对请求做出一些处理之后，再把请求转交给本体对象。可以提前过滤一些请求，对情况预先处理。

优点：安全代理：用于控制不同权限的对象对目标对象的访问。但是js无法判断谁访问了某个对象，实现困难。

场景：1.虚拟代理实现图片预加载：常见的做法是先用一张loading 图片占位，然后用异步的方式加载图片，等图片加载好了再把它填充到img节点里。 2.虚拟代理合并HTTP请求：我们可以通过一个代理函数proxySynchronousFile 来收集一段时间之内的请求，最后一次性发送给服务器。比如我们等待2 秒之后才把这2 秒之内需要同步的文件ID 打包发给服务器，如果不是对实时性要求非常高的系统，2 秒的延迟不会带来太大副作用，却能大大减轻服务器的压力。 3.虚拟代理在惰性加载中的应用：首先创建一个虚拟代理对象，接口和本体对象一致，缓存所有用户的操作，当用户需要使用的时候，加载本地对象，遍历缓存队列实现操作。 4.缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前一致，则可以直接返回前面存储的运算结缓存代理的例子——计算乘积 5.缓存代理用于ajax异步请求数据：分页缓存已经请求过的数据

案例代码：图片的预加载一个默认图片

(function(w){
  //傻瓜实现模式
  function imgLoad(src){
    var imgDom = document.createElement('img');
    imgDom.src = 'chrome-search://local-ntp/images/google_logo.png@2x';
    document.body.appendChild(imgDom);
    var img = new Image();
    img.src = src;
    img.onload = function(){
      setTimeout(function(){
        imgDom.src = src;
      },2000)
    }
  }
  imgLoad('chrome-search://local-ntp/images/close_3_mask.png');
  //单例实现模式
  var imgLoad1 = (function (){
    var imgDom = document.createElement('img');
    document.body.appendChild(imgDom);
    var img = new Image();
    img.onload = function(){
      setTimeout(function(){
        imgDom.src = img.src;
      },2000)
    }
    return {
      setSrc : function(src){
        imgDom.src = 'chrome-search://local-ntp/images/google_logo.png@2x';
        img.src = src;
      }
    }
  })();
  imgLoad1.setSrc("chrome-search://local-ntp/images/close_3_mask.png");
  //代理实现模式
  var imgLoad2 = (function (){
    var imgDom = document.createElement('img');
    document.body.appendChild(imgDom);
    var img = new Image();
    img.onload = function(){
      setTimeout(function(){
        imgDom.src = img.src;
      },2000)
    }
    return {
      setSrc : function(src){
        imgDom.src = 'chrome-search://local-ntp/images/google_logo.png@2x';
        img.src = src;
      }
    }
  })();
  var proxySetSrc = (function(){
    return {
      setSrc : function(src){
        imgLoad2.setSrc(src);
      }
    }
  })()
  proxySetSrc.setSrc('chrome-search://local-ntp/images/close_3_mask.png');
  //上面代理模式原理是这样，但是责任分离的不够单一，为了单一职责，如下：
  var imgLoad3 = (function (){//这里只创建一张图片，并对外开发一个设置src的接口
    var imgDom = document.createElement('img');
    document.body.appendChild(imgDom);
    return {
      setSrc : function(src){
        imgDom.src = src;
      }
    }
  })();
  //在代理器中添加额外逻辑，这样创建图片和设置图片就单一职责了
  var proxySetSrc1 = (function(){
    var img = new Image();
    img.onload = function(){
      setTimeout(function(){
        imgLoad3.setSrc(img.src);
      },2000)
    }
    return {
      setSrc : function(src){
        imgLoad3.setSrc('chrome-search://local-ntp/images/google_logo.png@2x');
        img.src = src;
      }
    }
  })();
  proxySetSrc1.setSrc('chrome-search://local-ntp/images/close_3_mask.png');
})(window)

组合模式

描述：组合模式（Composite）将对象组合成树形结构以表示“部分-整体”的层次结构，组合模式使得用户对单个对象和组合对象的使用具有一致性。也可以理解位用多个小对象组成一个大对象，成树形结构，树的叶对象和整个组合对象具有一致接口。

优点：组合模式解耦了客户程序与复杂元素内部结构，从而使客户程序可以像处理简单元素一样来处理复杂元素。

场景：你想表示对象的部分整体层次结构，希望用户忽略组合对象与单个对象的不同，用户将统一地使用组合结构中的所有对象。

案例代码：遥控器的宏

(function(){
  //先用面向对象的方式实现
  function command(){}
  command.prototype.execute = function(){
    throw new Error('不能实例化，在子类中重载');
  }
  function openCommand(){}
  openCommand.prototype = new command();
  openCommand.prototype.execute = function(){
    console.log('开机');
  }
  function closeCommand(){}
  closeCommand.prototype = new command();
  closeCommand.prototype.execute = function(){
    console.log('关机');
  }
  function stopCommand(){}
  stopCommand.prototype = new command();
  stopCommand.prototype.execute = function(){
    console.log('暂停');
  }
  function nextCommand(){}
  nextCommand.prototype = new command();
  nextCommand.prototype.execute = function(){
    console.log('下一个');
  }
  function unionCommand(){
    this.commands = [];
  }
  unionCommand.prototype = new command();
  unionCommand.prototype.add = function(command){
    if(this.commands.indexOf(command) == -1){
      this.commands.push(command);
    }
  }
  unionCommand.prototype.execute = function(){
    this.commands.map(function(command,i){
      command.execute();
    });
  }
  var open = new openCommand();
  var close = new closeCommand()
  var stop = new stopCommand();
  var next = new nextCommand();
  var union = new unionCommand();
  union.add(open);
  union.add(close);
  union.add(stop);
  union.add(next);
  union.execute();
  //下面用js函数式方式实现
  var unionCommand1 = {
    commands : [],
    add : function(obj){
      for (var i in obj) {
        this.commands.push(obj[i]);
      }
    },
    execute : function(){
      this.commands.map(function(command,i){
        command.execute();
      });
    }
  }
  var commands1 = {
    openCommand : {
      execute : function(){
        console.log('开机');
      }
    },
    closeCommand : {
      execute : function(){
        console.log('关机');
      }
    },
    stopCommand : {
      execute : function(){
        console.log('暂停');
      }
    },
    nextCommand : {
      execute : function(){
        console.log('下一个');
      }
    },
  }
  unionCommand1.add(commands1);
  unionCommand1.execute();
})()

建造者模式

描述：将一个复杂对象的构造和形态分离，使用同样的创建过程，不同的表示方法，即建造者模式。建造者作为director必须拥有创建技能所有方法，而具体的建造技能由builder去完成，建造者指挥不同的builder去完成建造，最终得出结果。

优点：拆分复杂的流程，易于扩展，指导者类可以随时变为一个新的业务指挥者。

场景：产品和建造类比较稳定，业务逻辑主要封装在指挥者类中。

案例代码：

(function(){
  function step1(msg){
    this.builder = msg;
  }
  step1.prototype.do = function(){
    console.log(this.builder);
  }
  function step2(msg){
    this.builder = msg;
  }
  step2.prototype.some = function(){
    console.log(this.builder);
  }
  function step3(msg){
    this.builder = msg;
  }
  step3.prototype.sth = function(){
    console.log(this.builder);
  }
  function dosomesth(){
    this.s1 = new step1("先打地基");
    this.s2 = new step2("再建骨架");
    this.s3 = new step3("最后封顶");
  }
  dosomesth.prototype.do =function(){
    this.s1.do();
  }
  dosomesth.prototype.some =function(){
    this.s2.some();
  }
  dosomesth.prototype.sth =function(){
    this.s3.sth();
  }
  dosomesth.prototype.start = function(){
    this.do();
    this.some();
    this.sth();
  }
  var director = new dosomesth();
  director.start();
})()

先这样，待续

欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。

本文链接：http://lucylc.com/设计模式/2018/04/16/JavaScript常用设计模式总结.html

JavaScript中Object原生方法总结

2018-04-16T04:11:25.000Z

关于ES5和ES6 Object中经常看到的方法的总结和梳理。虽然在日常开发中不经常使用，但是理解这些方法的含义对理解js有很大帮助。仅代表个人意见，有更好看法欢迎交流探讨。有些总结并不详细，只是把文章结构写出来，后续逐步更新，实在是有时候写着写着不知道怎么写，就先把想写列出来，以后慢慢写了。

prototype

js的原型对象：js中每个数据类型都是对象（除了null和undefined），而每个对象都继承自另外一个对象，后者称为“原型”（prototype）对象，只有null除外，它没有自己的原型对象。原型对象上的所有属性和方法，都会被对象实例所共享。通过构造函数生成对象实例时，会将对象实例的原型指向构造函数的prototype属性。每一个构造函数都有一个prototype属性，这个属性就是对象实例的原型对象。

isPrototypeOf

isPrototypeOf()函数用于指示对象是否存在于另一个对象的原型链中。如果存在，返回true，否则返回false。该方法属于Object对象，由于所有的对象都”继承”了Object的对象实例，因此几乎所有的实例对象都可以使用该方法。

defineProperty和defineProperties

Object的defineProperty和defineProperties这两个方法在js中的重要性十分重要，主要功能就是用来定义或修改这些内部属性,与之相对应的getOwnPropertyDescriptor和getOwnPropertyDescriptors就是获取这行内部属性的描述。

数据(数据描述符)属性数据属性有4个描述内部属性的特性 [[Configurable]] 表示能否通过delete删除此属性，能否修改属性的特性，或能否修改把属性修改为访问器属性，如果直接使用字面量定义对象，默认值为true [[Enumerable]] 表示该属性是否可枚举，即是否通过for-in循环或Object.keys()返回属性，如果直接使用字面量定义对象，默认值为true [[Writable]] 能否修改属性的值，如果直接使用字面量定义对象，默认值为true [[Value]] 该属性对应的值，默认为undefined
访问器(存取描述符)属性访问器属性也有4个描述内部属性的特性 [[Configurable]] 和数据属性的[[Configurable]]一样，表示能否通过delete删除此属性，能否修改属性的特性，或能否修改把属性修改为访问器属性，如果直接使用字面量定义对象，默认值为true [[Enumerable]] 和数据属性的[[Configurable]]一样，表示该属性是否可枚举，即是否通过for-in循环或Object.keys()返回属性，如果直接使用字面量定义对象，默认值为true [[Get]] 一个给属性提供 getter 的方法(访问对象属性时调用的函数,返回值就是当前属性的值)，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined [[Set]] 一个给属性提供 setter 的方法(给对象属性设置值时调用的函数)，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined
Object.defineProperty() 功能: 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。如果不指定configurable, writable, enumerable ，则这些属性默认值为false，如果不指定value, get, set，则这些属性默认值为undefined。语法: Object.defineProperty(obj, prop, descriptor) obj: 需要被操作的目标对象 prop: 目标对象需要定义或修改的属性的名称 descriptor: 将被定义或修改的属性的描述符
1
2
3
4
5
6
7
8
var obj = new Object();
Object.defineProperty(obj, 'name', {
configurable: false,
writable: true,
enumerable: true,
value: '张三'
})
console.log(obj.name) //张三
Object.defineProperties() 功能: 方法直接在一个对象上定义一个或多个新的属性或修改现有属性，并返回该对象。

语法: Object.defineProperties(obj, props) obj: 将要被添加属性或修改属性的对象 props: 该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

var obj = new Object();
Object.defineProperties(obj, {
    name: {
        value: '张三',
        configurable: false,
        writable: true,
        enumerable: true
    },
    age: {
        value: 18,
        configurable: true
    }
})
console.log(obj.name, obj.age) // 张三, 18

简单的双向数据绑定

html代码:

<body>
    <p>
        input1=><input type="text" id="input1">
    p>
    <p>
        input2=>
        <input type="text" id="input2">
    p>
    <div>
        我每次比input1的值加1=>
        <span id="span">span>
    div>
body>

js代码:

var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oSpan = document.getElementById('span');
var obj = {};
Object.defineProperties(obj, {
    val1: {
        configurable: true,
        get: function() {
            oInput1.value = 0;
            oInput2.value = 0;
            oSpan.innerHTML = 0;
            return 0
        },
        set: function(newValue) {
            oInput2.value = newValue;
            oSpan.innerHTML = Number(newValue) ? Number(newValue) : 0
        }
    },
    val2: {
        configurable: true,
        get: function() {
            oInput1.value = 0;
            oInput2.value = 0;
            oSpan.innerHTML = 0;
            return 0
        },
        set: function(newValue) {
            oInput1.value = newValue;
            oSpan.innerHTML = Number(newValue)+1;
        }
    }
})
oInput1.value = obj.val1;
oInput1.addEventListener('keyup', function() {
    obj.val1 = oInput1.value;
}, false)
oInput2.addEventListener('keyup', function() {
    obj.val2 = oInput2.value;
}, false)

hasOwnProperty

判断一个属性是定义在对象本身而不是继承自原型链，我们需要使用从 Object.prototype 继承而来的 hasOwnProperty 方法。 hasOwnProperty 方法是 Javascript 中唯一一个处理对象属性而不会往上遍历原型链的。

// Poisoning Object.prototype
Object.prototype.bar = 1;
var foo = {goo: undefined};
foo.bar; // 1
'bar' in foo; // true
foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true：类型不等，true

getOwnPropertyNames

Object.getOwnPropertyNames()方法返回对象的所有自身属性的属性名（包括不可枚举的属性）组成的数组，但不会获取原型链上的属性。

function A(a,aa) {
  this.a = a;
  this.aa = aa;
  this.getA = function() {
    return this.a;
  }
}
// 原型方法
A.prototype.aaa = function () {};
var B = new A('b', 'bb');
B.myMethodA = function() {};
// 不可枚举方法
Object.defineProperty(B, 'myMethodB', {
  enumerable: false,
  value: function() {}
});
Object.getOwnPropertyNames(B); // ["a", "aa", "getA", "myMethodA", "myMethodB"]

关于ES6中Objec.keys和ES5中Object.getOwnPropertyNames

Object.keys()用于获取对象自身所有的可枚举的属性值，但不包括原型中的属性，然后返回一个由属性名组成的数组。注意它同for..in一样不能保证属性按对象原来的顺序输出。

// 遍历数组
var colors = ['red', 'green', 'blue'];
colors.length = 10;
colors.push('yellow');
Array.prototype.demo = function () {};
Object.keys(colors); // 0 1 2 10
// 遍历对象
function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.demo = function() {};
var jenemy = new Person('jenemy', 25);
Object.keys(jenemy); // name age

getOwnPropertyDescriptor

功能: 该方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

语法: Object.getOwnPropertyDescriptor(obj, prop) obj: 需要查找的目标对象 prop: 目标对象内属性名称

var person = {
    name: '张三',
    age: 18
}
var desc = Object.getOwnPropertyDescriptor(person, 'name');
console.log(desc)  结果如下
// {
//     configurable: true,
//     enumerable: true,
//     writable: true,
//     value: "张三"
// }

getOwnPropertySymbols

描述：ES6中新增语法，返回对象的自有符号属性。对象的自有符号属性是指直接在此对象上定义、而非从对象的原型继承的属性。

语法：Object.getOwnPropertySymbols(object);

例子：

var obj = {};
var key = Symbol('description');
obj[key] = 'data';
var symbols = Object.getOwnPropertySymbols(obj);
// Symbol(description)

getPrototypeOf

关于ES5中getPrototypeOf方法的理解可以与__proto__、prototype一起探讨。

prototype: 一般用来为一个类型建立它的原型继承对象。用于继承、实例的方法或者属性共享。
getPrototypeOf: Object.getPrototypeOf(obj)是ES5中用来得到obj对象的原型对象的标准方法。
__proto__: obj.__proto__是一个非标准的用来得到obj对象的原型对象的方法。下文提到的__proto__都是在chrom浏览器环境下的测试结果。

说到getPrototypeOf，就必须提及原型、原型链、prototype、__proto__了。下面用一张图来说明它们之间千丝万缕的关系：

在JS中，万物皆对象。除了null以外所有对象都含有__proto__属性。而子类实例的__proto__指向父类构造函数的原型对象：child.__proto__ == parents.prototype。这也保证了子类实例对象能够访问父类的原型中方法和属性。
任何Function类型对象都拥有prototype、__proto__这两个重要属性，也包含了其他的属性：arguments、caller、length、name、自定义的静态属性和方法以及方法的执行上下文。假如有一个方法test，在test方法的原型对象prototype中包含了3大块：
1. constructor：这是一个指针，指向构造函数本身,test.prototype.constructor=test。
2. __proto__：继承test父类的prototype属性，test.prototype.__proto__ = Object.prototype。
3. 自定义的原型方法或者属性：这些属性都可以被test的实例继承，例如：

function test(){}
test.prototype.a = 1;
var b = new test();
//那么 b.\_\_proto\_\_ == test.prototype
//那么b.a => 1;这个a就是从test的prototyp上继承过来的。

备注：顺带提一下静态属性和方法：就是不能被子类继承只能通过自身来访问的属性和方法,例如：

function test(){};
test.x = 1;
test.y = function(){};
//这里x、y就只能通过test来访问，不会被子类实例继承。

关于Function和Object的联系：上面提到 child.__proto__ == parents.prototype。

对象Object的构造函数也是方法类型，Object.__proto__的打印结果是一个空方法：function Empty(){};那么代表了Object.__proto__ == Function.prototype。
而Function.__proto__的打印结果也是一个空方法：function Empty(){};(这里是是一个特例)，这说明：Function.__proto__ == Function.prototype。
所以Object和Function之间关系可以这样认为：Function.__proto__ == Object.__proto__ == Function.prototype ==>function Empty(){}。
然而还没完，在js里万物皆对象，这里的Empty方法也是对象类型，说明Empty.__proto__ == Object.prototype。(这里Empty代表Function.__proto__)。貌似还没完：Empty.__proto__.__proto__ ==>null，我们发现这一切都归于了虚无(null)，而在js中null也是一个特殊的对象，在初始化变量都会初始化为null，仿佛这不是结束而是新的开始。研究到这里，不禁感叹啊，真是生于此，终于此，As the end, so the start。

create

关于Object.create和new Object两者的区别和实现猜想： Object.create()方法是ECMAScript5中新增的，用来规范化原型式继承的。object.create一般用来创建obj,其实质就是将源对象的原型引用指向到实例的proto上，var a = {a:1}; var b = Object.create(a); b的结构：{proto:{a:1,proto{…}}},{a:1,proto{…}}就是a。

//Object.create的实现原理
function ObjectCreate(o){
    function F(){};
    F.prototype = o;
    return new F();
}
//new Object的实现原理
function newObject(){
    var obj = new Object(); // 从Object.prototype 上克隆一个空的对象
    var Constructor = [].shift.call(arguments); // 取得外部传入的构造器，此例是Person
    obj.__proto__ = Constructor.prototype; // 指向正确的原型
    var ret = Constructor.apply(obj, arguments); // 借用外部传入的构造器给obj 设置属性
    return typeof ret === 'object' ? ret : obj; // 确保构造器总是会返回一个对象
};

is

==：等同，比较运算符，两边值类型不同的时候，先进行类型转换，再比较；
===：恒等，严格比较运算符，不做类型转换，类型不同就是不等；
Object.is()是ES6新增的用来比较两个值是否严格相等的方法，与===的行为基本一致。

===

这个比较简单，只需要利用下面的规则来判断两个值是否恒等就行了：如果类型不同，就不相等如果两个都是数值，并且是同一个值，那么相等；值得注意的是，如果两个值中至少一个是NaN，那么不相等（判断一个值是否是NaN，可以用isNaN()或Object.is()来判断）。如果两个都是字符串，每个位置的字符都一样，那么相等；否则不相等。如果两个值都是同样的Boolean值，那么相等。如果两个值都引用同一个对象或函数，那么相等，即两个对象的物理地址也必须保持一致；否则不相等。如果两个值都是null，或者都是undefined，那么相等。

Object.is()，

其行为与===基本一致，不过有两处不同：+0不等于-0。NaN等于自身。举个栗子☺：

+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

==

如果两个值类型相同，进行===比较。如果两个值类型不同，那么他们可能相等。根据下面规则进行类型转换，然后再比较：如果一个是null、一个是undefined，那么相等。如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。如果任一值是true，把它转换成 1 再比较；如果任一值是false，把它转换成 0 再比较。如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 JS的核心内置类，会尝试valueOf先于toString；但有一个是例外——Date，Date利用的是toString转换。非JS核心的对象，令说（比较麻烦，我也不大懂）。任何其他组合，都不相等。举个栗子☺： “1” == true：类型不等，true 会先转换成数值 1 ，现在变成 “1” == 1 ，再把 “1” 转换成 1 ，比较 1 == 1 ，相等。

举个全局的栗子☺：

=：赋值运算符。 ==：等于。 ===：严格等于。 Object.is()：加强版严格等于。例：

var a = 3;
var b = "3";
a==b;    // true
a===b;   // false，因为*a*，*b*的类型不一样
Object.is( a, b );  //false，因为*a*，*b*的类型不一样

欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。

本文链接：http://lucylc.com/JavaScript/2018/04/16/JavaScript中Object原生方法总结.html

JavaScript中位运算符的基本常识

2018-04-10T09:11:25.000Z

在JavaScript中虽然使用位运算不多，但是也有必要对位运算有所了解，这里就是收集了一些位运算符的基本知识以作学习。

基础常识

8位二进制数：最高位sf=1，则数位负；最高位sf=0，则数位正。
在计算机中可以将一个数看做是有符号数，亦或者看成无符号数，例如： 00000001:可以看做无符号数1，也可以看成有符号数 +1（正1） 10000001：可以看做无符号数129，也可以看成有符号数-127.
左移运算符 << 左移运算符：将一个数的各二进制位全部左移若干位。因为位运算符比乘法运算快，所以可用位运算符进行优化代码。左移右侧补0，高位溢出舍弃。高位溢出且溢出的部分不包含1的话，左移一位相当于2。 15<<2 ==""> 154=60 例如：15<<2; 00001111="">(1+2+4+8=15) >> 00111100=>(4+8+16+32=60)
右移运算符 >> 按二进制把所有的数字右移对应的位数，规则：低位舍弃，高位的空位补符号位，即正数补0，负数补1. 右移的数学意义：右移一位相当于除以2，但是是取商，余数舍弃。位运算的巧用：因为位运算比普通运算快，所以可以进行代码优化，例如： a = b*2; ==> a = b<<1 还可以利用左移运算符计算a的第b个二进制位是什么：a&(1<

重温整数

ECMAScript 整数有两种类型，即有符号整数（允许用正数和负数）和无符号整数（只允许用正数）。在 ECMAScript 中，所有整数字面量默认都是有符号整数，这意味着什么呢？

有符号整数使用 31 位表示整数的数值，用第 32 位表示整数的符号，0 表示正数，1 表示负数。数值范围从 -2147483648 到 2147483647。

可以以两种不同的方式存储二进制形式的有符号整数，一种用于存储正数，一种用于存储负数。正数是以真二进制形式存储的，前 31 位中的每一位都表示 2 的幂，从第 1 位（位 0）开始，表示 2⁰，第 2 位（位 1）表示 2¹。没用到的位用 0 填充，即忽略不计。例如，下图展示的是数 18 的表示法。

18 的二进制版本只用了前 5 位，它们是这个数字的有效位。把数字转换成二进制字符串，就能看到有效位：

1 2	var iNum = 18; alert(iNum.toString(2)); //输出 "10010"

这段代码只输出 "10010"，而不是 18 的 32 位表示。其他的数位并不重要，因为仅使用前 5 位即可确定这个十进制数值。如下图所示：

负数也存储为二进制代码，不过采用的形式是二进制补码。计算数字二进制补码的步骤有三步：

确定该数字的非负版本的二进制表示（例如，要计算 -18的二进制补码，首先要确定 18 的二进制表示）
求得二进制反码，即要把 0 替换为 1，把 1 替换为 0
在二进制反码上加 1

要确定 -18 的二进制表示，首先必须得到 18 的二进制表示，如下所示：

0000 0000 0000 0000 0000 0000 0001 0010

接下来，计算二进制反码，如下所示：

1111 1111 1111 1111 1111 1111 1110 1101

最后，在二进制反码上加 1，如下所示：

1111 1111 1111 1111 1111 1111 1110 1101
                                      1
---------------------------------------
1111 1111 1111 1111 1111 1111 1110 1110

因此，-18 的二进制表示即 1111 1111 1111 1111 1111 1111 1110 1110。记住，在处理有符号整数时，开发者不能访问 31 位。

有趣的是，把负整数转换成二进制字符串后，ECMAScript 并不以二进制补码的形式显示，而是用数字绝对值的标准二进制代码前面加负号的形式输出。例如：

1 2	var iNum = -18; alert(iNum.toString(2)); <span>//输出 "-10010"span>

这段代码输出的是 "-10010"，而非二进制补码，这是为避免访问位 31。为了简便，ECMAScript 用一种简单的方式处理整数，使得开发者不必关心它们的用法。

另一方面，无符号整数把最后一位作为另一个数位处理。在这种模式中，第 32 位不表示数字的符号，而是值 2³¹。由于这个额外的位，无符号整数的数值范围为 0 到 4294967295。对于小于 2147483647 的整数来说，无符号整数看来与有符号整数一样，而大于 2147483647 的整数则要使用位 31（在有符号整数中，这一位总是 0）。

把无符号整数转换成字符串后，只返回它们的有效位。

注意：所有整数字面量都默认存储为有符号整数。只有 ECMAScript 的位运算符才能创建无符号整数。

位运算 NOT

位运算 NOT 由否定号（~）表示，它是 ECMAScript 中为数不多的与二进制算术有关的运算符之一。位运算 NOT 是三步的处理过程：

把运算数转换成 32 位数字
把二进制数转换成它的二进制反码
把二进制数转换成浮点数

例如：

1
2
3

var iNum1 = 25;   <span>//25 等于 00000000000000000000000000011001span>
var iNum2 = ~iNum1;` //转换为 11111111111111111111111111100110
alert(iNum2);   //输出 "-26"

位运算 NOT 实质上是对数字求负，然后减 1，因此 25 变 -26。用下面的方法也可以得到同样的方法：

1
2
3

var iNum1 = 25;
var iNum2 = -iNum1 -1;
alert(iNum2); <span>//输出 -26span>

位运算 AND

位运算 AND 由和号（&）表示，直接对数字的二进制形式进行运算。它把每个数字中的数位对齐，然后用下面的规则对同一位置上的两个数位进行 AND 运算：

第一个数字中的数位	第二个数字中的数位	结果
1	1	1
1	0	0
0	1	0
0	0	0

例如，要对数字 25 和 3 进行 AND 运算，代码如下所示：

1 2	var iResult = 25 & 3; alert(iResult); <span>//输出 "1"span>

25 和 3 进行 AND 运算的结果是 1。为什么？分析如下：

 25 = 0000 0000 0000 0000 0000 0000 0001 1001
  3 = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
AND = 0000 0000 0000 0000 0000 0000 0000 0001

可以看出，在 25 和 3 中，只有一个数位（位 0）存放的都是 1，因此，其他数位生成的都是 0，所以结果为 1。

位运算 OR

位运算 OR 由符号（|）表示，也是直接对数字的二进制形式进行运算。在计算每位时，OR 运算符采用下列规则：

第一个数字中的数位	第二个数字中的数位	结果
1	1	1
1	0	1
0	1	1
0	0	0

仍然使用 AND 运算符所用的例子，对 25 和 3 进行 OR 运算，代码如下：

1 2	var iResult = 25 \| 3; alert(iResult); <span>//输出 "27"span>

25 和 3 进行 OR 运算的结果是 27：

25 = 0000 0000 0000 0000 0000 0000 0001 1001
 3 = 0000 0000 0000 0000 0000 0000 0000 0011
--------------------------------------------
OR = 0000 0000 0000 0000 0000 0000 0001 1011

可以看出，在两个数字中，共有 4 个数位存放的是 1，这些数位被传递给结果。二进制代码 11011 等于 27。

位运算 XOR

位运算 XOR 由符号（^）表示，当然，也是直接对二进制形式进行运算。XOR 不同于 OR，当只有一个数位存放的是 1 时，它才返回 1。真值表如下：

第一个数字中的数位	第二个数字中的数位	结果
1	1	0
1	0	1
0	1	1
0	0	0

对 25 和 3 进行 XOR 运算，代码如下：

1 2	var iResult = 25 ^ 3; alert(iResult); <span>//输出 "26"span>

25 和 3 进行 XOR 运算的结果是 26：

 25 = 0000 0000 0000 0000 0000 0000 0001 1001
  3 = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
XOR = 0000 0000 0000 0000 0000 0000 0001 1010

可以看出，在两个数字中，共有 4 个数位存放的是 1，这些数位被传递给结果。二进制代码 11010 等于 26。

左移运算

左移运算由两个小于号表示（<<）。它把数字中的所有数位向左移动指定的数量。例如，把数字 2（等于二进制中的 10）左移 5 位，结果为 64（等于二进制中的 1000000）：

1 2	var iOld = 2; <span>//等于二进制 10span> var iNew = iOld << 5; <span>//等于二进制 1000000 十进制 64span>

注意：在左移数位时，数字右边多出 5 个空位。左移运算用 0 填充这些空位，使结果成为完整的 32 位数字。

注意：左移运算保留数字的符号位。例如，如果把 -2 左移 5 位，得到的是 -64，而不是 64。“符号仍然存储在第 32 位中吗？”是的，不过这在 ECMAScript 后台进行，开发者不能直接访问第 32 个数位。即使输出二进制字符串形式的负数，显示的也是负号形式（例如，-2 将显示 -10。）

有符号右移运算

有符号右移运算符由两个大于号表示（>>）。它把 32 位数字中的所有数位整体右移，同时保留该数的符号（正号或负号）。有符号右移运算符恰好与左移运算相反。例如，把 64 右移 5 位，将变为 2：

1 2	var iOld = 64; <span>//等于二进制 1000000span> var iNew = iOld >> 5; <span>//等于二进制 10 十进制 2span>

同样，移动数位后会造成空位。这次，空位位于数字的左侧，但位于符号位之后。ECMAScript 用符号位的值填充这些空位，创建完整的数字，如下图所示：

无符号右移运算

无符号右移运算符由三个大于号（>>>）表示，它将无符号 32 位数的所有数位整体右移。对于正数，无符号右移运算的结果与有符号右移运算一样。

用有符号右移运算中的例子，把 64 右移 5 位，将变为 2：

1 2	var iOld = 64; <span>//等于二进制 1000000span> var iNew = iOld >>> 5; <span>//等于二进制 10 十进制 2span>

对于负数，情况就不同了。

无符号右移运算用 0 填充所有空位。对于正数，这与有符号右移运算的操作一样，而负数则被作为正数来处理。

由于无符号右移运算的结果是一个 32 位的正数，所以负数的无符号右移运算得到的总是一个非常大的数字。例如，如果把 -64 右移 5 位，将得到 134217726。如何得到这种结果的呢？

要实现这一点，需要把这个数字转换成无符号的等价形式（尽管该数字本身还是有符号的），可以通过以下代码获得这种形式：

var iUnsigned64 = -64 >>> 0;

然后，用 Number 类型的 toString() 获取它的真正的位表示，采用的基为 2：

alert(iUnsigned64.toString(2));

这将生成 11111111111111111111111111000000，即有符号整数 -64 的二进制补码表示，不过它等于无符号整数 4294967232。

出于这种原因，使用无符号右移运算符要小心。

欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。

本文链接：http://lucylc.com/JavaScript/2018/04/10/JavaScript中位运算符的基本常识.html

前端性能优化--updating

2017-03-02T09:18:59.000Z

优化方向	优化手段
请求数量	合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
请求带宽	开启GZip，精简JavaScript，移除重复脚本，图像优化
缓存利用	使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
页面结构	将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
代码校验	避免CSS表达式，避免重定向

欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。

本文链接：http://lucylc.com/前端工程/2017/03/02/前端性能优化-updating.html

前端工程需要用到的技术元素

2017-03-02T08:40:05.000Z

对于好的文章收录是我长期以来的爱好，这里感谢云龙大牛的分享

前端行业经历了这么长时间的发展，技术元素非常丰富，这里列举出一般web团队需要用到的技术元素：

开发规范：包括开发、部署的目录规范，编码规范等。不要小瞧规范的威力，可以极大的提升开发效率，真正优秀的规范不会让使用者感到约束，而是能帮助他们快速定位问题，提升效率。

2.模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。是提升前端开发效率的重要基础。现在流行的模块化框架有requirejs、seajs等。

3.组件化开发：在模块化基础上，以页面小部件(component)为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护，组件单元是资源独立的，组件在系统内可复用。比如头部(header)、尾部(footer)、搜索框(searchbar)、导航(menu)、对话框(dialog)等，甚至一些复杂的组件比如编辑器(editor)等。通常业务会针对组件化的js部分进行必要的封装，解决一些常见的组件渲染、交互问题。

4.组件仓库：有了组件化，我们希望将一些非常通用的组件放到一个公共的地方供团队共享，方便新项目复用，这个时候我们就需要引入一个组件仓库的东西，现在流行的组件库有bower、component等。团队发展到一定规模后，组件库的需求会变得非常强烈。

5.性能优化：这里的性能优化是指能够通过工程手段保证的性能优化点。由于其内容比较丰富，就不在这里展开了，感兴趣的同学可以阅读我的这两篇文章 [1] [2]。性能优化是前端项目发展到一定阶段必须经历的过程。这部分我想强调的一点是性能优化一定是一个工程问题和统计问题，不能用工程手段保证的性能优化是不靠谱的，优化时只考虑一个页面的首次加载，不考虑全局在宏观统计上的优化提升也是片面的。

6.项目部署：部署按照现行业界的分工标准，虽然不是前端的工作范畴，但它对性能优化有直接的影响，包括静态资源缓存、cdn、非覆盖式发布等问题。合理的静态资源资源部署可以为前端性能带来较大的优化空间。

7.开发流程：完整的开发流程包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。对开发流程的改善可以大幅降低开发的时间成本，工作这些年见过很多独立的系统（cms系统、静态资源推送系统）将开发流程割裂开，对前端开发的效率有严重的阻碍。

8.开发工具：这里说的工具不是指IDE，而是工程工具，包括构建与优化工具、开发-调试-部署等流程工具，以及组件库获取、提交等相关工具，甚至运营、文档、配置发布等平台工具。前端开发需要工具支持，这个问题的根本原因来自前端领域语言特性（未来我会单独写一篇文章介绍前端领域语言缺陷问题）。前端开发所使用的语言（js、css、html）以及前端工程资源的加载与定位策略决定了前端工程必须要工具支持。由于这些工具通常都是独立的系统，要想把它们串联起来，才有了yeoman这样的封装。前面提到的7项技术元素都直接或间接的对前端开发工具设计产生一定的影响，因此能否串联其他技术要素，使得前端开发形成一个连贯可持续优化的开发体系，工具的设计至关重要。

以上8项，1-3是技术和业务相关的开发需求，4是技术沉淀与共享需求，5-8是工程优化需求。

欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。

本文链接：http://lucylc.com/前端工程/2017/03/02/前端工程需要用到的技术元素.html

理解 SeaJS 与 RequireJS 的差异

2017-03-02T08:38:27.000Z

requirejs和seajs二者在加载上都有缺陷，就是模块的依赖要等到模块加载完成后，通过静态分析（seajs）或者deps参数（requirejs）来获取，这就为合并请求和按需加载带来了实现上的矛盾：

要么放弃按需加载，把所有js合成一个文件，从而满足请求合并（两个框架的官方demo都有这样的例子）；要么放弃请求合并，请求独立的模块文件，从而满足按需加载。 AMD规范在执行callback的时候，要初始化所有依赖的模块，而CMD只有执行到require的时候才初始化模块.

CMD 模块依赖声明方式

define(function (require) {
    var a = require('./a');
    var b = require('./b');
    // more code ..
})

CMD 依赖是就近声明，通过内部require方法进行声明。但是因为是异步模块，加载器需要提前加载这些模块，所以模块真正使用前需要提取模块里面所有的依赖。无论是加载器即时提取，还是通过自动化工具预先提取，CMD 的这种依赖声明格式只能通过静态分析方式实现，这也正是 CMD 的弊端所在。

CMD 规范的弊端

1.不能直接压缩：require是局部变量，意味着不能直接的通过压缩工具进行压缩，若require这个变量被替换，加载器与自动化工具将无法获取模块的依赖。 2.模块书写有额外约定：路径参数不能进行字符串运算，不能使用变量代替，否则加载器与自动化工具无法正确提取路径。

注：SeaJS 静态分析实现是把模块包toString()后使用正则提取require部分得到依赖的模块路径。

AMD 模块依赖声明方式

1
2
3

define(['./a', './b'], function (a, b) {
    // more code ..
})

AMD 的依赖是提前声明。这种优势的好处就是依赖无需通过静态分析，无论是加载器还是自动化工具都可以很直接的获取到依赖，规范的定义可以更简单，意味着可能产生更强大的实现，这对加载器与自动化分析工具都是有利的。

AMD 规范的弊端

1.依赖提前声明在代码书写上不是那么友好 2.模块内部与 NodeJS 的 Modules 有一定的差异

关于第二点的问题需要特别说明下。其实无论是 CMD 还是 AMD 的异步模块，都无法与同步模块规范保持一致（NodeJS 的 Modules），只有谁比谁更像同步模块而已。AMD 要转换为同步模块，除了去掉define函数的包裹外，需要在头部使用require把依赖声明好，而 CMD 只需要去掉define函数的包裹即可。

欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。

本文链接：http://lucylc.com/前端模块化/2017/03/02/理解seaSs和requireJs的差异.html

何为web前端？前端工程分哪些阶段？

2017-03-02T08:20:19.000Z

对于好的文章收录是我长期以来的爱好，这里感谢云龙大牛的分享

不知道你的团队如何定义前端开发，据我所知，时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位，虽然身份之争多少有些无谓，但我对这种偏见还是心存芥蒂，酝酿了许久，决定写一个系列的文章，试着从工程的角度系统的介绍一下我对前端，尤其是Web前端的理解。

只要我们还把自己的工作看作为一项软件开发活动，那么我相信读过下面的内容你也一定会有所共鸣。

前端，是一种GUI软件

现如今前端可谓包罗万象，产品形态五花八门，涉猎极广，什么高大上的基础库/框架，拽炫酷的宣传页面，还有屌炸天的小游戏……不过这些一两个文件的小项目并非是前端技术的主要应用场景，更具商业价值的则是复杂的Web应用，它们功能完善，界面繁多，为用户提供了完整的产品体验，可能是新闻聚合网站，可能是在线购物平台，可能是社交网络，可能是金融信贷应用，可能是音乐互动社区，也可能是视频上传与分享平台……

从本质上讲，所有Web应用都是一种运行在网页浏览器中的软件，这些软件的图形用户界面（Graphical User Interface，简称GUI）即为前端。

如此复杂的Web应用，动辄几十上百人共同开发维护，其前端界面通常也颇具规模，工程量不亚于一般的传统GUI软件：

尽管Web应用的复杂程度与日俱增，用户对其前端界面也提出了更高的要求，但时至今日仍然没有多少前端开发者会从软件工程的角度去思考前端开发，来助力团队的开发效率，更有甚者还对前端保留着”如玩具般简单“的刻板印象，日复一日，刀耕火种。

历史悠久的前端开发，始终像是放养的野孩子，原始如斯，不免让人慨叹！

前端工程的三个阶段

现在的前端开发倒也并非一无所有，回顾一下曾经经历过或听闻过的项目，为了提升其前端开发效率和运行性能，前端团队的工程建设大致会经历三个阶段：

第一阶段：库/框架选型

前端工程建设的第一项任务就是根据项目特征进行技术选型。

基本上现在没有人完全从0开始做网站，哪怕是政府项目用个jquery都很正常吧，React/Angularjs等框架横空出世，解放了不少生产力，合理的技术选型可以为项目节省许多工程量这点毋庸置疑。

第二阶段：简单构建优化

选型之后基本上就可以开始敲码了，不过光解决开发效率还不够，必须要兼顾运行性能。前端工程进行到第二阶段会选型一种构建工具，对代码进行压缩，校验，之后再以页面为单位进行简单的资源合并。

前端开发工程化程度之低，常常出乎我的意料，我之前在百度工作时是没有多少概念的，直到离开大公司的温室，去到业界与更多的团队交流才发现，能做到这个阶段在业界来说已然超出平均水平，属于“具备较高工程化程度”的团队了，查看网上形形色色的网页源代码，能做到最基本的JS/CSS压缩的Web应用都已跨入标准互联网公司行列，不难理解为什么很多前端团队对于前端工程构建的认知还仅停留在“压缩、校验、合并”这种程度。

第三阶段：JS/CSS模块化开发

分而治之是软件工程中的重要思想，是复杂系统开发和维护的基石，这点放在前端开发中同样适用。在解决了基本开发效率运行效率问题之后，前端团队开始思考维护效率，模块化是目前前端最流行的分治手段。

很多人觉得模块化开发的工程意义是复用，我不太认可这种看法，在我看来，模块化开发的最大价值应该是分治，是分治，分治！（重说三）。

不管你将来是否要复用某段代码，你都有充分的理由将其分治为一个模块。

JS模块化方案很多，AMD/CommonJS/UMD/ES6 Module等，对应的框架和工具也一大堆，说起来很烦，大家自行百度吧；CSS模块化开发基本都是在less、sass、stylus等预处理器的import/mixin特性支持下实现的。

虽然这些技术由来已久，在如今这个“言必及React”的时代略显落伍，但想想业界的绝大多数团队的工程化落后程度，放眼望去，毫不夸张的说，能达到第三阶段的前端团队已属于高端行列，基本具备了开发维护一般规模Web应用的能力。

然而，做到这些就够了么？Naive！

第四阶段

前端是一种技术问题较少、工程问题较多的软件开发领域。

当我们要开发一款完整的Web应用时，前端将面临更多的工程问题，比如：

大体量：多功能、多页面、多状态、多系统；
大规模：多人甚至多团队合作开发；
高性能：CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载、移动端首屏CSS内嵌、HTTP 2.0服务端资源推送。

扩展阅读：大公司里怎样开发和部署前端代码？

这些无疑是一系列严肃的系统工程问题。

前面讲的三个阶段虽然相比曾经“茹毛饮血”的时代进步不少，但用于支撑第四阶段的多人合作开发以及精细的性能优化似乎还欠缺点什么。

到底，缺什么呢？

没有银弹

读过《人月神话》的人应该都听说过，软件工程没有银弹。没错，前端开发同样没有银弹，可是现在是连™铅弹都没有的年月！（刚有了BB弹，摔）

前端历来以“简单”著称，在前端开发者群体中，小而美的价值观占据着主要的话语权，甚至成为了某种信仰，想与其他人交流一下工程方面的心得，得到的回应往往都是两个字：太重。

重你妹！你的脑容量只有4K吗？

工程方案其实也可以小而美！只不过它的小而美不是指代码量，而是指“规则”。找到问题的根源，用最少最简单明了的规则制定出最容易遵守最容易理解的开发规范或工具，以提升开发效率和工程质量，这同样是小而美的典范！

2011年我有幸参与到 FIS 项目中，与百度众多大中型项目的前端研发团队共同合作，不断探索实践前端开发的工程化解决方案，13年离开百度去往UC，面对完全不同的产品形态，不同的业务场景，不同的适配终端，甚至不同的网络环境，过往的方法论仍然能够快速落地，为多个团队的不同业务场景量身定制出合理的前端解决方案。

这些经历让我明悟了一个道理：

进入第四阶段，我们只需做好两件事就能大幅提升前端开发效率，并且兼顾运行性能，那就是——组件化开发与资源管理。

第一件事：组件化开发

分治的确是非常重要的工程优化手段。在我看来，前端作为一种GUI软件，光有JS/CSS的模块化还不够，对于UI组件的分治也有着同样迫切的需求：

如上图，这是我所信仰的前端组件化开发理念，简单解读一下：

页面上的每个 独立的 可视/可交互区域视为一个组件；
每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；
由于组件具有独立性，因此组件与组件之间可以 自由组合；
页面只不过是组件的容器，负责组合组件形成功能完整的界面；
当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换。

其中第二项描述的就近维护原则，是我觉得最具工程价值的地方，它为前端开发提供了很好的分治策略，每个开发者都将清楚的知道，自己所开发维护的功能单元，其代码必然存在于对应的组件目录中，在那个目录下能找到有关这个功能单元的所有内部逻辑，样式也好，JS也好，页面结构也好，都在那里。

组件化开发具有较高的通用性，无论是前端渲染的单页面应用，还是后端模板渲染的多页面应用，组件化开发的概念都能适用。组件HTML部分根据业务选型的不同，可以是静态的HTML文件，可以是前端模板，也可以是后端模板：

不同的技术选型决定了不同的组件封装和调用策略。

基于这样的工程理念，我们很容易将系统以独立的组件为单元进行分工划分：

由于系统功能被分治到独立的模块或组件中，粒度比较精细，组织形式松散，开发者之间不会产生开发时序的依赖，大幅提升并行的开发效率，理论上允许随时加入新成员认领组件开发或维护工作，也更容易支持多个团队共同维护一个大型站点的开发。

结合前面提到的模块化开发，整个前端项目可以划分为这么几种开发概念：

名称	说明	举例
JS模块	独立的算法和数据单元	浏览器环境检测(detect)，网络请求(ajax)，应用配置(config)，DOM操作(dom)，工具函数(utils)，以及组件里的JS单元
CSS模块	独立的功能性样式单元	栅格系统(grid)，字体图标(icon-fonts)，动画样式(animate)，以及组件里的CSS单元
UI组件	独立的可视/可交互功能单元	页头(header)，页尾(footer)，导航栏(nav)，搜索框(search)
页面	前端这种GUI软件的界面状态，是UI组件的容器	首页(index)，列表页(list)，用户管理(user)
应用	整个项目或整个站点被称之为应用，由多个页面组成

以上5种开发概念以相对较少的规则组成了前端开发的基本工程结构，基于这些理念，我眼中的前端开发就成了这个样子：

示意图	描述
	整个Web应用由页面组成
	页面由组件组成
	一个组件一个目录，资源就近维护
	组件可组合，

组件的JS可依赖其他JS模块， CSS可依赖其他CSS单元 |

综合上面的描述，对于一般中小规模的项目，大致可以规划出这样的源码目录结构：

如果项目规模较大，涉及多个团队协作，还可以将具有相关业务功能的页面组织在一起，形成一个子系统，进一步将整个站点拆分出多个子系统来分配给不同团队维护，针对这种情况后面我会单开文章详细介绍。

以上架构设计历经许多不同公司不同业务场景的前端团队验证，收获了不错的口碑，是行之有效的前端工程分治方案。

吐槽：我本人非常反对某些前端团队将前端开发划分为“JS开发”和“页面重构”两种岗位，更倾向于组件粒度的开发理念，对GUI软件开发的分工规划应该以功能为单位，而不是开发语言；对开发者的技术要求也应该是掌握完整的端内技术。

第二件事：“智能”静态资源管理

上面提到的模块化/组件化开发，仅仅描述了一种开发理念，也可以认为是一种开发规范，倘若你认可这规范，对它的分治策略产生了共鸣，那我们就可以继续聊聊它的具体实现了。

很明显，模块化/组件化开发之后，我们最终要解决的，就是模块/组件加载的技术问题。然而前端与客户端GUI软件有一个很大的不同：

前端是一种远程部署，运行时增量下载的GUI软件

前端应用没有安装过程，其所需程序资源都部署在远程服务器，用户使用浏览器访问不同的页面来加载不同的资源，随着页面访问的增加，渐进式的将整个程序下载到本地运行，“增量下载”是前端在工程上有别于客户端GUI软件的根本原因。

上图展示了一款界面繁多功能丰富的应用，如果采用Web实现，相信也是不小的体量，如果用户第一次访问页面就强制其加载全站静态资源再展示，相信会有很多用户因为失去耐心而流失。根据“增量”的原则，我们应该精心规划每个页面的资源加载策略，使得用户无论访问哪个页面都能按需加载页面所需资源，没访问过的无需加载，访问过的可以缓存复用，最终带来流畅的应用体验。

这正是Web应用“免安装”的魅力所在。

由“增量”原则引申出的前端优化技巧几乎成为了性能优化的核心，有加载相关的按需加载、延迟加载、预加载、请求合并等策略；有缓存相关的浏览器缓存利用，缓存更新、缓存共享、非覆盖式发布等方案；还有复杂的BigRender、BigPipe、Quickling、PageCache等技术。这些优化方案无不围绕着如何将增量原则做到极致而展开。

所以我觉得：

第四阶段前端开发最迫切需要做好的就是在基础架构中贯彻增量原则。

相信这种贯彻不会随着时间的推移而改变，在可预见的未来，无论在HTTP1.x还是HTTP2.0时代，无论在ES5亦或者ES6/7时代，无论是AMD/CommonJS/UMD亦或者ES6 module时代，无论端内技术如何变迁，我们都有足够充分的理由要做好前端程序资源的增量加载。

正如前面说到的，第三阶段前端工程缺少点什么呢？我觉得是在其基础架构中缺少这样一种“智能”的资源加载方案。没有这样的方案，很难将前端应用的规模发展到第四阶段，很难实现落地前面介绍的那种组件化开发方案，也很难让多方合作高效率的完成一项大型应用的开发，并保证其最终运行性能良好。在第四阶段，我们需要强大的工程化手段来管理”玩具般简单“的前端开发。

在我的印象中，Facebook是这方面探索的伟大先驱之一，早在2010年的Velocity China大会上，来自Facebook的David Wei博士就为业界展示了他们令人惊艳的静态网页资源管理和优化技术。

David Wei博士在当年的交流会上提到过一些关于Facebook的一些产品数据：

Facebook整站有10000+个静态资源；

每个静态资源都有可能被翻译成超过100种语言版本；

每种资源又会针对浏览器生成3种不同的版本；

要针对不同带宽的用户做5种不同的打包方法；

有3、4个不同的用户组，用于小批次体验新的产品功能；

还要考虑不同的送达方法，可以直接送达，或者通过iframe的方式提升资源并行加载的速度；

静态资源的压缩和非压缩状态可切换，用于调试和定位线上问题

这是一个状态爆炸的问题，将所有状态乘起来，整个网站的资源组合方式会达到几百万种之多（去重之后统计大概有300万种组合方式）。支撑这么大规模前端项目运行的底层架构正是魏博士在那次演讲中分享的Static Resource Management System(静态资源管理系统)，用以解决Facebook项目中有关前端工程的3D问题（Development，Deployment，Debugging）。

那段时间 FIS 项目正好遇到瓶颈，当时的FIS还是一个用php写的task-based构建工具，那时候对于前端工程的认知度很低，觉得前端构建不就是几个压缩优化校验打包任务的组合吗，写好流程调度，就针对不同需求写插件呗，看似非常简单。但当我们支撑越来越多的业务团队，接触到各种不同的业务场景时，我们深刻的感受到task-based工具的粗糙，团队每天疲于根据各种业务场景编写各种打包插件，构建逻辑异常复杂，隐隐看到不可控的迹象。

我们很快意识到把基础架构放到构建工具中实现是一件很愚蠢的事，试图依靠构建工具实现各种优化策略使得构建变成了一个巨大的黑盒，一旦发生问题，定位起来非常困难，而且每种业务场景都有不同的优化需求，构建工具只能通过静态分析来优化加载，具有很大的局限性，单页面/多页面/PC端/移动端/前端渲染/后端渲染/多语言/多皮肤/高级优化等等资源加载问题，总不能给每个都写一套工具吧，更何况这些问题彼此之间还可以有多种组合应用，工具根本写不过来。

Facebook的做法无疑为我们亮起了一盏明灯，不过可惜它并不开源（不是技术封锁，而是这个系统依赖FB体系中的其他方面，通用性不强，开源意义不大），我们只能尝试挖掘相关信息，网上对它的完整介绍还是非常非常少，分析facebook的前端代码也没有太多收获，后来无意中发现了facebook使用的项目管理工具phabricator中的一个静态管理方案Celerity，以及相关的说明，看它的描述很像是Facebook静态资源管理系统的一个mini版！

简单看过整个系统之后发现原理并不复杂（小而美的典范），它是通过一个小工具扫描所有静态资源，生成一张资源表，然后有一个PHP实现的资源管理框架（Celerity）提供了资源加载接口，替代了传统的script/link等静态的资源加载标签，最终通过查表来加载资源。

虽然没有真正看过FB的那套系统，但眼前的这个小小的框架给了当时的我们足够多的启示：

静态资源管理系统 = 资源表 + 资源加载框架

多么优雅的实现啊！

资源表是一份数据文件（比如JSON），是项目中所有静态资源（主要是JS和CSS）的构建信息记录，通过构建工具扫描项目源码生成，是一种k-v结构的数据，以每个资源的id为key，记录了资源的类别、部署路径、依赖关系、打包合并等内容，比如：

{
    "a.js": {
        "url": "/static/js/a.5f100fa.js",
        "dep": [ "b.js", "a.css" ]
    },
    "a.css": {
        "url": "/static/css/a.63cf374.css",
        "dep": [ "button.css" ]
    },
    "b.js": {
        "url": "/static/js/b.97193bf.js"
    },
    "button.css": {
        "url": "/static/css/button.de33108.css"
    }
}

而资源加载框架则提供一些资源引用的API，让开发者根据id来引用资源，替代静态的script/link标签来收集、去重、按需加载资源。调用这些接口时，框架通过查表来查找资源的各项信息，并递归查找其依赖的资源的信息，然后我们可以在这个过程中实现各种性能优化算法来“智能”加载资源。

根据业务场景的不同，加载框架可以在浏览器中用JS实现，也可以是后端模板引擎中用服务端语言实现，甚至二者的组合，不一而足。

有关加载框架的具体实现我曾写过很多文章介绍，可以扩展阅读：

前端工程与性能优化

前端工程与模块化框架

这种设计很快被验证具有足够的灵活性，能够完美支撑不同团队不同技术规范下的性能优化需求，前面提到的按需加载、延迟加载、预加载、请求合并、文件指纹、CDN部署、Bigpipe、Quickling、BigRender、首屏CSS内嵌、HTTP 2.0服务端推送等等性能优化手段都可以很容易的在这种架构上实现，甚至可以根据性能日志自动进行优化（Facebook已实现）。

因为有了资源表，我们可以很方便的控制资源加载，通过各种手段在运行时计算页面的资源使用情况，从而获得最佳加载性能。无论是前端渲染的单页面应用，还是后端渲染的多页面应用，这种方法都同样适用。

此外，它还很巧妙的约束了构建工具的职责——只生成资源表。资源表是非常通用的数据结构，无论什么业务场景，其业务代码最终都可以被扫描为相同结构的表数据，并标记资源间的依赖关系，有了表之后我们只需根据不同的业务场景定制不同的资源加载框架就行了，从此彻底告别一个团队维护一套工具的时代！！！

恩，如你所见，虽然彻底告别了一个团队一套工具的时代，但似乎又进入了一个团队一套框架的时代。其实还是有差别的，因为框架具有很大的灵活性，而且不那么黑盒，采用框架实现资源管理相比构建更容易调试、定位和升级变更。

深耕静态资源加载框架可以带来许多收益，而且有足够的灵活性和健壮性面向未来的技术变革，这个我们留作后话。

总结

回顾一下前面提到过的前端工程三个阶段：

第一阶段：库/框架选型
第二阶段：简单构建优化
第三阶段：JS/CSS模块化开发

现在补充上第四阶段：

第四阶段：组件化开发与资源管理

由于先天缺陷，前端相比其他软件开发，在基础架构上更加迫切的需要组件化开发和资源管理，而解决资源管理的方法其实一点也不复杂：

一个通用的资源表生成工具 + 基于表的资源加载框架

近几年来各种你听到过的各种资源加载优化策略大部分都可以在这样一套基础上实现，而这种优化对于业务来说是完全透明的，不需要重构的性能优化——这不正是我们一直所期盼的吗？正如魏小亮博士所说：我们可以把优秀的人集中起来去优化加载。

如何选型技术、如何定制规范、如何分治系统、如何优化性能、如何加载资源，当你从切图开始转变为思考这些问题的时候，我想说：

你好，工程师！

前端工程其实是一个很大的话题，开发仅是其中的一部分。

欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。

本文链接：http://lucylc.com/前端工程/2017/03/02/何为web前端？前端工程分哪些阶段？.html

Js函数作用域与this的指向问题

2017-03-02T02:08:03.000Z

以前对函数作用域以及this指向都没有一个系统的认识，偶然一次代码编写运行结果与自己预想结果不一样，这让我决定对Js的作用域和this深层次学习。下面是我当初的一个小错误：

var obj = {
    a: 20,
    getA: function() {
        setTimeout(function() {
            console.log(this.a)
        }, 1000)
    }
}
obj.getA();

这里输出的undefined，因为这里的this指向window。只需要修改this指向就可以，方法很多。

var obj = {
    a: 20,
    getA: function() {
        setTimeout(function() {
            console.log(this.a)
        }.bind(this), 1000)
    }
}

首先需要了解这些重要概念：

基础数据类型与引用数据类型
内存空间
垃圾回收机制
执行上下文
变量对象与活动对象

作用域

JavaScript中只有全局作用域与函数作用域(因为eval我们平时开发中几乎不会用到它，这里不讨论)。
作用域与执行上下文是完全不同的两个概念。我知道很多人会混淆他们，但是一定要仔细区分

JavaScript代码的整个执行过程，分为两个阶段，代码编译阶段与代码执行阶段。编译阶段由编译器完成，将代码翻译成可执行代码，这个阶段作用域规则会确定。执行阶段由引擎完成，主要任务是执行可执行代码，执行上下文在这个阶段创建。下面请允许我盗一张图：来自波同学。

我理解作用域是：函数名以及变量或者anguments所能访问或查找的规则，或者叫所能访问到内存区块。优先级是anguments->function表达式->var。变量在声明它们的函数体内(或嵌套函数内)任意地方都是有定义的。下面看一份代码：

var scope="global";
function t(){
    console.log(scope);
    var scope="local"
    console.log(scope);
}
t();

第一句输出的是： “undefined”，而不是 “global” 第二讲输出的是：”local” 你可能会认为第一句会输出：”global”,因为代码还没执行var scope=”local”,所以肯定会输出“global”。上面已经讲过，变量在函数体内任意地方都是有定义的。在函数作用域创建阶段，首先会先生成变量对象VO：VO包括anguments、function、var变量的创建。到了函数执行阶段包括变量开始赋值、执行上下文this确定、代码执行。在第一句console.log打印时，函数作用域内只有var scope，scope并没有赋值。可以理解为下面代码：

var scope="global";
function t(){
    var scope;
    console.log(scope);
    scope="local"
    console.log(scope);
}
t();

在此看来，由于函数作用域的特性，局部变量在整个函数体始终是由定义的，我们可以将变量声明”提前“到函数体顶部，同时变量初始化还在原来位置。

作用域链

这里来看一下执行上下文的生命周期：从创建–>执行代码–>执行完毕，出栈等待被回收。

这里可以将作用域和作用域链结合起来理解：作用域是一块能够查询到的内存区域或者查询规则；作用域链，是对查询规则的实现或者内存寻址的过程，它保证了当前执行环境对符合访问权限的变量和函数的有序访问。

var a = 20;
function test() {
    var b = a + 10;
    function innerTest() {
        var c = 10;
        return b + c;
    }
    return innerTest();
}
test();
//innerTest的执行上下文创建阶段如下：
innerTestEC = {
    VO: {...},  // 变量对象
    scopeChain: [VO(innerTest), VO(test), VO(global)], // 作用域链
    this: {}
}

因为变量对象在执行上下文进入执行阶段时，就变成了活动对象，这一点在上一篇文章中已经讲过，因此图中使用了AO来表示。Active Object

顺便理解一下闭包，简单来说，假设函数A在函数B的内部进行定义了，并且当函数A在执行时，访问了函数B内部的变量对象，那么B就是一个闭包。概述为：当函数可以记住并访问所在的作用域(全局作用域除外)时，就产生了闭包，即使函数是在当前作用域之外执行。有一下特点：

闭包与作用域链息息相关。
闭包是在函数执行过程中被确认。
通过闭包，我们可以在其他的执行上下文中，访问到其函数的内部变量

闭包案例：利用闭包，修改下面的代码，让循环输出的结果依次为1， 2， 3， 4， 5

for (var i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log(i);
    }, i*1000 );
}

简单修改为：（相信你可以更多其他方法）

for (var i=1; i<=5; i++) {
    setTimeout( (function() {
        console.log(i);
    })(i), i*1000 );
}

最后输出的7是setTimeout计时器的ID，计时器一般会生成一个唯一id，用于清除时用。

this的指向理解

this的指向，是在函数被调用的时候确定的

全局对象中的this

关于全局对象的this，我之前在总结变量对象的时候提到过，它是一个比较特殊的存在。全局环境中的this，指向它本身。因此，这也相对简单，没有那么多复杂的情况需要考虑。

// 通过this绑定到全局对象
this.a2 = 20;
// 通过声明绑定到变量对象，但在全局环境中，变量对象就是它自身
var a1 = 10;
// 仅仅只有赋值操作，标识符会隐式绑定到全局对象
a3 = 30;
// 输出结果会全部符合预期
console.log(a1);
console.log(a2);
console.log(a3);

函数中的this

// demo01
var a = 20;
function fn() {
    console.log(this.a);
}
fn();
// demo02
var a = 20;
function fn() {
    function foo() {
        console.log(this.a);
    }
    foo();
}
fn();
// demo03
var a = 20;
var obj = {
    a: 10,
    c: this.a + 20,
    fn: function () {
        return this.a;
    }
}
console.log(obj.c);
console.log(obj.fn());

在一个函数上下文中，this由调用者提供，由调用函数的方式来决定。如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。如果函数独立调用，那么该函数内部的this，则指向undefined。但是在非严格模式中，当this指向undefined时，它会被自动指向全局对象。

当obj在全局声明时，无论obj.c在什么地方调用，这里的this都指向全局对象，而当obj在函数环境中声明时，这个this指向undefined，在非严格模式下，会自动转向全局对象

使用call，apply显示指定this

call与applay后面的参数，都是向将要执行的函数传递参数。其中call以一个一个的形式传递，apply以数组的形式传递。这是他们唯一的不同

function fn(num1, num2) {
    console.log(this.a + num1 + num2);
}
var obj = {
    a: 20
}
fn.call(obj, 100, 10); // 130
fn.apply(obj, [20, 10]); // 50

实现继承

// 定义父级的构造函数
var Person = function(name, age) {
    this.name = name;
    this.age  = age;
    this.gender = ['man', 'woman'];
}
// 定义子类的构造函数
var Student = function(name, age, high) {
    // use call
    Person.call(this, name, age);
    this.high = high;
}
Student.prototype.message = function() {
    console.log('name:'+this.name+', age:'+this.age+', high:'+this.high+', gender:'+this.gender[0]+';');
}
new Student('xiaom', 12, '150cm').message();
// result
// ----------
// name:xiaom, age:12, high:150cm, gender:man;

在Student的构造函数中，借助call方法，将父级的构造函数执行了一次，相当于将Person中的代码，在Sudent中复制了一份，其中的this指向为从Student中new出来的实例对象。call方法保证了this的指向正确，因此就相当于实现了基层。

 var Student = function(name, age, high) {
    this.name = name;
    this.age  = age;
    this.gender = ['man', 'woman'];
    // Person.call(this, name, age); 这一句话，相当于上面三句话，因此实现了继承
    this.high = high;
}

构造函数与原型方法上的this

这是面向对象编程的核心要点，直接上代码

function Person(name, age) {
    // 这里的this指向了谁?
    this.name = name;
    this.age = age;
}
Person.prototype.getName = function() {
    // 这里的this又指向了谁？
    return this.name;
}
// 上面的2个this，是同一个吗，他们是否指向了原型对象？
var p1 = new Person('Nick', 20);
p1.getName();

通过new操作符调用构造函数，会经历以下4个阶段。

创建一个新的对象；
将构造函数的this指向这个新对象；
指向构造函数的代码，为这个对象添加属性，方法等；
返回新对象

基本上prototype对象指向new操作符生成的实例，这里指向p1。

查阅资料：感谢波同学的分享 csdn的一篇博客

欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。

本文链接：http://lucylc.com/JavaScript/2017/03/02/Js函数作用域与this的指向问题.html

移动端兼容性解决方案汇总

2017-02-28T08:24:54.000Z

关于移动端的兼容性问题的解决方案，希望码友们踊跃分享，让移动端的坑无所遁形

1. IOS移动端click事件300ms的延迟响应

移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接a标签，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

解决方案：

fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序为 touchstart –> touchmove –> touchend –> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题

2.一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发，css增加cursor:pointer就搞定了。

3. 三星手机遮罩层下的input、select、a等元素可以被点击和focus(点击穿透)

问题发现于三星手机，这个在特定需求下才会有，因此如果没有类似问题的可以不看。首先需求是浮层操作，在三星上被遮罩的元素依然可以获取focus、click、change)，有两种解决方案，

1.是通过层显示以后加入对应的class名控制，截断显示层下方可获取焦点元素的事件获取

2.是通过将可获取焦点元素加入的disabled属性，也可以利用属性加dom锁定的方式（disabled的一种变换方式）

4. h5底部输入框被键盘遮挡问题

h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决

var oHeight = $(document).height(); //浏览器当前的高度
   $(window).resize(function(){
        if($(document).height() < oHeight){
        $("#footer").css("position","static");
    }else{
        $("#footer").css("position","absolute");
    }
   });

关于Web移动端Fixed布局的解决方案，这篇文章也不错

5.不让 Android 手机识别邮箱

6.禁止 iOS 识别长串数字为电话

7.禁止 iOS 弹出各种操作窗口

1	-webkit-touch-callout:none

8.消除 transition 闪屏

1
2

-webkit-transform-style: preserve-3d;     /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden;      /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/

9.iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格

可以通过正则去掉 this.value = this.value.replace(/\u2006/g, '');

10.禁止ios和android用户选中文字

-webkit-user-select:none

11.在ios和andriod中,audio元素和video元素在无法自动播放

应对方案：触屏即播

1
2
3

$('html').one('touchstart',function(){
    audio.play()
})

12.ios下取消input在输入的时候英文首字母的默认大写

13.android下取消输入语音按钮

1	input::-webkit-input-speech-button {display: none}

14 CSS动画页面闪白,动画卡顿

解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

15.fixed定位缺陷

ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
ios4下不支持position:fixed
解决方案：可用iScroll插件解决这个问题

16.阻止旋转屏幕时自动调整字体大小

1	html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

17. Input 的placeholder会出现文本位置偏上的情况

input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal

18. 往返缓存问题

点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache)有关系。

1	解决方法：window.onunload = function(){};

19. calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：

div {
    width: 95%;
    width: -webkit-calc(100% - 50px);
    width: calc(100% - 50px);
}

20. iOS6下伪类:hover

除了之外的元素无效；在Android下则有效。类似

1	div#topFloatBar_l:hover #topFloatBar_menu { display:block; }

这样的导航显示在iOS6点击没有点击效果，只能通过增加点击侦听器给元素增减class来控制子元素。

21. 在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：

1	* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

不过这个方法在现在的安卓浏览器下，只能去掉那个橙色的背景色，点击产生的高亮边框还是没有去掉，有待解决！

一个CSS3的属性，加上后，所关联的元素的事件监听都会失效，等于让元素变得“看得见，点不着”。IE到11才开始支持，其他浏览器的当前版本基本都支持。详细介绍见这里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

1	pointer-events: none;

22. Zepto点透的解决方案

zepto的tap是通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,在点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发，而在冒泡到document之前，用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计)，所以在执行完tap事件之后，弹出来的选择组件马上就隐藏了，此时click事件还在延迟的300ms之中，当300ms到来的时候，click到的其实不是完成而是隐藏之后的下方的元素，如果正下方的元素绑定的有click事件此时便会触发，如果没有绑定click事件的话就当没click，但是正下方的是input输入框(或者select选择框或者单选复选框)，点击默认聚焦而弹出输入键盘，也就出现了上面的点透现象。

引入fastclick.js，在页面中加入如下js代码

1
2
3

window.addEventListener( "load", function() {
    FastClick.attach( document.body );
}, false );

或者有zepto或者jQuery的js里面加上

1
2
3

$(function() {
    FastClick.attach(document.body);
});

当然require的话就这样：

1 2	var FastClick = require('fastclick'); FastClick.attach(document.body, options);

方案二：用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

$("#cbFinish").on("touchend", function (event) {
   //很多处理比如隐藏什么的
   event.preventDefault();
);

方案三：延迟一定的时间(300ms+)来处理事件

$("#cbFinish").on("tap", function (event) {
    setTimeout(function(){
    //很多处理比如隐藏什么的
    },320);
});

23.外观

A.页面高度渲染错误

在各移动端浏览器中经常会出现这种页面高度100%的渲染错误，页面低端和系统自带的导航条重合了，高度的不正确我们需要重置修正它，通过javascript代码重置掉：

document.documentElement.style.height = window.innerHeight + ‘px’;

B.叠加区高亮

在部分android机型中点击页面某一块区域可能会出现如图所示的黄色框秒闪，这是部分机型系统自身的默认定制样式，给该元素一个CSS样式重置掉：

-webkit-tap-highlight-color:rgba(0,0,0,0);

24.行为

A、事件无法被触发

在部分android机型的微信环境中会出现事件无法触发、表单无法输入的情况，我们针对需要输入或者触发事件的元素设置样式：-webkit-transform: translate3d(0,0,0) ，不过新版本的微信已经直接修复了该问题。

B、:active 效果不兼容

在android 4.0版本以下CSS :active伪状态效果无法兼容，我们给该元素的touch系列的事件（touchstart/touchend/touchmove）绑定一个空匿名方法:

var element=document.getElementsById(”btnShare”); element.addEventListener(‘touchstart’,function(){},false);

25.应用

A、浏览器崩溃


var act = function(){
    window.removeEventListener('devicemotion',act);
};
window.addEventListener('devicemotion',act,false);

解绑函数写在了事件处理中导致小米手机中的微信崩溃，那么我们不要将解绑时间写在事件处理中即可。

B、预加载、自动播放无效

如上表所示，经过简单的测试发现预加载、自动播放的有效性受操作系统、浏览器（webview）、版本等的影响，苹果官方规定必须由用户手动触发才会载入音频，那么我们捕捉一次用户输入后，让音频加载实现预加载:

//play and pause it once
document.addEventListener('touchstart', function () {
 document.getElementsByTagName('audio')[0].play();
 document.getElementsByTagName('audio')[0].pause();
});

C、无法同时播放多音频

在android设备中,播放后一音频会打断前一音频，而不会同步播放,这个是目前系统资深决定的，我们只有采取优雅降权的方法让android选择不一样风格的音频前后切换播放而不是同时播放，达到与预期接近的音频效果。

D、不支持局部滚动

在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 样式设置滚动条无效，这里有两种解决方案:

1、巧用布局直接设置样式滚动条在body(html)上，其他元素“错觉滚动”。

2、利用iscroll、自写js控制translate、scrollTop模拟

26.系统/硬件

A、怪异悬浮的表单

在部分android 机型中的输入框可能会出现如图怪异的多余的浮出表单，经过观察与测试发现只有input:password类型的输入框存在，那么我们只要使用input:text类型的输入框并通过样式-webkit-text-security: disc; 隐藏输入密码从而解决。

B、错误出现滚动条

在游戏内嵌页中出现了不应该出现的滚动条，而且内容并没有超出内容区宽度，经过测试overflow:hidden 无效，通过一系列尝试使用古老的写法解决，多尝试一下不同的写法和属性会有不一样的惊喜哦！

C、链接打开系统浏览器

在游戏内webview的部分android机型中可能会出现点击链接调用系统浏览器的情况，这是一个非常不好的体验。那么我们尝试给这个元素添加 target=”_blank”‘ 属性有可能解决，如果还不能解决那么需要修改IOS或android原生系统函数了。

D、Flex box 不兼容

在游戏内嵌webview中碰到Flex box布局不兼容的情况，图中所示下面部分的导航错位了，虽然之前有仔细查看过Flex box的兼容性，但是在游戏内嵌页中无法确定其调用的系统浏览器版本及兼容，所以导致错误，所以我们写完整历史版本呢的3种Flex box 解决。那么我们思考在写页面过程中还是本着保守稳定的方式书写样式可以减少不不要的麻烦。

欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。

本文链接：http://lucylc.com/Mobile/2017/02/28/移动端兼容性问题收集.html

前端Swig模版快速入门

2017-02-27T00:35:59.000Z

Swig官网文档经常404打不开，网上Swig模版在前端的中文资料非常少，这里也是

摘录网上的一部分资料，乐于分享的朋友可以留言哦。不过对于想要修改

Hexo-Next博客的朋友，相信看了这篇文章的朋友能够大概知道使用技巧。

后续我也会整理一下Swig模版的基本资料。

如何使用

Swig优点：

支持大多数主流浏览器。
表达式兼容性好。
面向对象的模板继承。
将过滤器和转换应用到模板中的输出。
可根据路劲渲染页面。
支持页面复用。
支持动态页面。
可扩展、可定制。

API

swig.init({
  allowErrors: false,
  autoescape: true,
  cache: true,
  encoding: 'utf8',
  filters: {},
  root: '/',
  tags: {},
  extensions: {},
  tzOffset: 0
});

options:

allowErrors: 默认值为 false。将所有模板解析和编译错误直接输出到模板。如果为 true，则将引发错误，抛出到 Node.js 进程中，可能会使您的应用程序崩溃。

autoescape: 默认true，强烈建议保持。字符转换表请参阅转义过滤器。

true: HTML安全转义 false: 不转义，除非使用转义过滤器或者转义标签 ‘js’: js安全转义

cache: 更改为 false 将重新编译每个请求的模板的文件。正式环境建议保持true。

encoding 模板文件编码

root 需要搜索模板的目录。如果模板传递给 swig.compileFile 绝对路径(以/开头)，Swig不会在模板root中搜索。如果传递一个数组，使用第一个匹配成功的数组项。

tzOffset 设置默认时区偏移量。此设置会使转换日期过滤器会自动的修正相应时区偏移量。

filters 自定义过滤器或者重写默认过滤器，参见自定义过滤器指南。

tags 自定义标签或者重写默认标签，参见自定义标签指南。

extensions 添加第三方库，可以在编译模板时使用，参见参见自定义标签指南。

nodejs

1 2	var tpl = swig.compileFile("path/to/template/file.html"); var renderedHtml = tpl.render({ vars: 'to be inserted in template' });

1 2	var tpl = swig.compile("Template string here"); var renderedHtml = tpl({ vars: 'to be inserted in template' });

结合Express

1 2	npm install express npm install consolidate

然后

1 2	app.engine('.html', cons.swig); app.set('view engine', 'html');

浏览器

Swig浏览器版本的api基本与nodejs版相同，不同点如下：

不能使用swig.compileFile，浏览器没有文件系统
你必须提前使用swig.compile编译好模板

按顺序使用extends, import, and include，同时在swig.compile里使用参数templateKey来查找模板

1
2

var template = swig.compile('{% block content %}{% endblock %}
', { filename: 'main' });
var mypage = swig.compile('{% extends "main" %}{% block content %}Oh hey there!{% endblock %}', { filename: 'mypage' });

基础

变量

1 2	{{ foo.bar }} {{ foo['bar'] }}

如果变量未定义，输出空字符。

变量可以通过过滤器来修改：

1 2	{{ name\|title }} was born on {{ birthday\|date('F jS, Y') }} // Jane was born on July 6th, 1985

逻辑标签

参见标签部分。

注释

空白

模板里的空白在最终输出时默认保留，如果需要去掉空白，可以在逻辑标签前后加上空白控制服-：

1
2
3

{% for item in seq -%}
    {{ item }}
{%- endfor %}

模板继承

Swig 使用 extends 和 block 来实现模板继承

layout.html


    
    {% block title %}My Site{% endblock %}
    {% block head %}
        
    {% endblock %}
    {% block content %}{% endblock %}

index.html

{% extends 'layout.html' %}
{% block title %}My Page{% endblock %}
{% block head %}
{% parent %}
    
{% endblock %}
{% block content %}
    This is just an awesome page.
{% endblock %}

变量过滤器

用于修改变量。变量名称后用 | 字符分隔添加过滤器。您可以添加多个过滤器。

例子

1 2	{{ name\|title }} was born on {{ birthday\|date('F jS, Y') }} and has {{ bikes\|length\|default("zero") }} bikes.

也可以使用 filter 标签来为块内容添加过滤器

1	{% filter upper %}oh hi, paul{% endfilter %}

内置过滤器

add(value) 使变量与value相加，可以转换为数值字符串会自动转换为数值。

addslashes 用 \ 转义字符串

capitalize 大写首字母

date(format[, tzOffset]) 转换日期为指定格式

format：格式 tzOffset：时区

default(value) 默认值（如果变量为undefined，null，false）

e 同escape

escape([type]) 转义字符

默认： &, <, >, “, ‘ js: &, <, >, “, ‘, =, -, ;

first 返回数组第一个值

join(glue) 同[].join

json_encode([indent]) 类似JSON.stringify, indent为缩进空格数

last 返回数组最后一个值

length 返回变量的length，如果是object，返回key的数量

lower 同’’.toLowerCase()

raw 指定输入不会被转义

replace(search, replace[, flags]) 同’’.replace

reverse 翻转数组

striptags 去除html/xml标签

title 大写首字母

uniq 数组去重

upper 同’’.toUpperCase

url_encode 同encodeURIComponent

url_decode 同decodeURIComponemt

自定义过滤器

创建一个 myfilter.js 然后引入到 Swig 的初始化函数中

1	swig.init({ filters: require('myfilters') });

在 myfilter.js 里，每一个 filter 方法都是一个简单的 js 方法，下例是一个翻转字符串的 filter：

1
2
3

exports.myfilter = function (input) {
    return input.toString().split('').reverse().join('');
};

你的 filter 一旦被引入，你就可以向下面一样使用：

1
2
3

{{ name|myfilter }}
{% filter myfilter %}I shall be filtered{% endfilter %}

你也可以像下面一样给 filter 传参数：

exports.prefix = function(input, prefix) {
    return prefix.toString() + input.toString();
};
{{ name|prefix('my prefix') }}
{% filter prefix 'my prefix' %}I will be prefixed with "my prefix".{% endfilter %}
{% filter prefix foo %}I will be prefixed with the value stored to `foo`.{% endfilter %}

extends 使当前模板继承父模板，必须在文件最前

参数： file: 父模板相对模板 root 的相对路径

block 定义一个块，使之可以被继承的模板重写，或者重写父模板的同名块

参数： name: 块的名字，必须以字母数字下划线开头

parent 将父模板中同名块注入当前块中

include 包含一个模板到当前位置，这个模板将使用当前上下文

参数： file: 包含模板相对模板 root 的相对路径 ignore missing: 包含模板不存在也不会报错 with x: 设置 x 至根上下文对象以传递给模板生成。必须是一个键值对 only: 限制模板上下文中用 with x 定义的参数
1
2
3
4
> {% include template_path %}
> {% include "path/to/template.js" %}
>
>

你可以标记 ignore missing，这样如果模板不存在，也不会抛出错误
1
2
3
> {% include "foobar.html" ignore missing %}
>
>

本地声明的上下文变量，默认情况不会传递给包含的模板。例如以下情况，inc.html 无法得到 foo 和 bar
1
2
3
4
5
6
7
8
> {% set foo = "bar" %}
> {% include "inc.html" %}
>
> {% for bar in thing %}
>     {% include "inc.html" %}
> {% endfor %}
>
>

如果想把本地声明的变量引入到包含的模板种，可以使用 with 参数来把后面的对象创建到包含模板的上下文中
1
2
3
4
5
6
7
8
> {% set foo = { bar: "baz" } %}
> {% include "inc.html" with foo %}
>
> {% for bar in thing %}
>     {% include "inc.html" with bar %}
> {% endfor %}
>
>

如果当前上下文中 foo 和 bar 可用，下面的情况中，只有 foo 会被 inc.html 定义
1
2
3
> {% include "inc.html" with foo only %}
>
>

only 必须作为最后一个参数，放在其他位置会被忽略

raw 停止解析标记中任何内容，所有内容都将输出

参数： file: 父模板相对模板 root 的相对路径

for 遍历对象和数组

参数： x: 当前循环迭代名 in: 语法标记 y: 可迭代对象。可以使用过滤器修改
1
2
3
4
5
6
7
> {% for x in y %}
>     {% if loop.first %}{% endif %}
>     {{ loop.index }} - {{ loop.key }}: {{ x }}
>     {% if loop.last %}{% endif %}
> {% endfor %}
>
>

特殊循环变量 loop.index：当前循环的索引（1开始） loop.index0：当前循环的索引（0开始） loop.revindex：当前循环从结尾开始的索引（1开始） loop.revindex0：当前循环从结尾开始的索引（0开始） loop.key：如果迭代是对象，是当前循环的键，否则同 loop.index loop.first：如果是第一个值返回 true loop.last：如果是最后一个值返回 true loop.cycle：一个帮助函数，以指定的参数作为周期
1
2
3
4
5
> {% for item in items %}
>     {{ item }}
> {% endfor %}
>
>

在 for 标签里使用 else

> {% for person in people %}
>     {{ person }}
> {% else %}
>     There are no people yet!
> {% endfor %}
>
>

if 条件语句

参数： …: 接受任何有效的 JavaScript 条件语句，以及一些其他人类可读语法

> {% if x %}{% endif %}
> {% if !x %}{% endif %}
> {% if not x %}{% endif %}
>
> {% if x and y %}{% endif %}
> {% if x && y %}{% endif %}
> {% if x or y %}{% endif %}
> {% if x || y %}{% endif %}
> {% if x || (y && z) %}{% endif %}
>
> {% if x [operator] y %}
>     Operators: ==, !=, <, <=, >, >=, ===, !==
> {% endif %}
>
> {% if x == 'five' %}
>     The operands can be also be string or number literals
> {% endif %}
>
> {% if x|length === 3 %}
>     You can use filters on any operand in the statement.
> {% endif %}
>
> {% if x in y %}
>     If x is a value that is present in y, this will return true.
> {% endif %}
>
>

else 和 else if

> {% if foo %}
>     Some content.
> {% else if "foo" in bar %}
>     Content if the array `bar` has "foo" in it.
> {% else %}
>     Fallback content.
> {% endif %}
>
>

autoescape 改变当前变量的自动转义行为

参数： on: 当前内容是否转义 type: 转义类型，js 或者 html，默认 html

假设
1
2
3
> some_html_output = 'Hello "you" & \'them\'
';
>
>

然后

> {% autoescape false %}
>     {{ some_html_output }}
> {% endautoescape %}
>
> {% autoescape true %}
>     {{ some_html_output }}
> {% endautoescape %}
>
> {% autoescape true "js" %}
>     {{ some_html_output }}
> {% endautoescape %}
>
>

将会输出

> Hello "you" & 'them'
>
> <p>Hello "you" & 'them' </p>
>
> \u003Cp\u003EHello \u0022you\u0022 & \u0027them\u0027\u003C\u005Cp\u003E
>
>

set 设置一个变量，在当前上下文中复用

参数： name: 变量名 =: 语法标记 value: 变量值
1
2
3
4
5
6
> {% set foo = [0, 1, 2, 3, 4, 5] %}
> {% for num in foo %}
>     {{ num }}
> {% endfor %}
>
>

macro 创建自定义可服用的代码段

参数： …: 用户定义
1
2
3
4
5
6
> {% macro input type name id label value error %}
> {{ label }}
> 
> {% endmacro %}
>
>

然后像下面使用

> {{ input("text", "fname", "fname", "First Name", fname.value, fname.errors) }}
> {{ input("text", "lname", "lname", "Last Name", lname.value, lname.errors) }}
>
>

输出如下

> 
>     First Name
>     
> 
> 
>     Last Name
>     
> 
>
>

import 允许引入另一个模板的宏进入当前上下文

参数： file: 引入模板相对模板 root 的相对路径 as: 语法标记 var: 分配给宏的可访问上下文对象
1
2
3
4
5
6
7
8
9
> {% import 'formmacros.html' as form %}
>
> {# this will run the input macro #}
> {{ form.input("text", "name") }}
>
> {# this, however, will NOT output anything because the macro is scoped to the "form" object: #}
> {{ input("text", "name") }}
>
>

filter 对整个块应用过滤器

参数： filter_name: 过滤器名字 … : 若干传给过滤器的参数父模板相对模板 root 的相对路径
1
2
3
4
> {% filter uppercase %}oh hi, {{ name }}{% endfilter %}
> {% filter replace "." "!" "g" %}Hi. My name is Paul.{% endfilter %}
>
>

输出

> OH HI, PAUL
> Hi! My name is Paul!
>
>

spaceless 尝试移除html标签间的空格

> {% spaceless %}
> {% for num in foo %}
>     {{ loop.index }}
> {% endfor %}
> {% endspaceless %}
>
>

输出
1
2
3
> 1
2
3
>
>

** 不满足于此吗？想知道详细资料的请您移步Github。

欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。

本文链接：http://lucylc.com/技术分享/2017/02/27/swig模版快速入门.html

勿忘初心

2017-02-24T08:31:31.000Z

　　闲了就会思索，思索就会感慨，有很多人感到失落，感慨没有好好珍惜自己的生命。一辈子很长，随着时间的流逝，过往的历练让我们变得成熟和精明，成熟的你会感到以前很是幼稚，看透了世俗，想穿了一切，于是，我们就此变成了自己年少时所最憎恶的那种人。一辈子仿若又很短，所有的委屈、愤懑都是浮云，要保持那份初心确实着实不易。

　　万事万物都有它存在的方式，我们能做的就是勿忘初心，只有寄浮于天地，坚持本真的善良和最初的梦想，学会尊重他人和自己的初心，处理好和社会的关系，才会不枉此生。

　　有人说：“只有在轻狂少年时才敢妄谈梦想，不计一切的去实现它，只因我们输得起，无所牵挂，一旦年华老去，变得心有挂碍后，便再无法前进一步。”还有人说：“人生就是在自己走的路上，慢慢地让自己开始变老。”我不赞成这样的消极观点，这样对自己不负责，活着也将若枯木，我们实现不了梦想，只因我们忘却了初心；选择去忘记这最初的梦想，是惧怕于现实太过残酷，将之付诸实现的代价太大。哪怕此时此刻我们还是无法踏上征途，那么至少在红尘中，我们的初心还好好地在心中珍藏，不让它因岁月的冲刷而斑驳失色；静静的等到时机到来的那一刻，带上我们的梦想出发，一如当初的少年。勿忘初心，方得终始，不忘记自己最初的想法，才能有始有终地去完成自己的梦想。

　　每个人或大或小总有梦想，追梦的路上怎能不磕磕绊绊，追梦的路上又岂会一帆风顺？那些想去的地方，未完成的事，即使天寒地冻，山高路远，也请勿忘初心，你要遵守的是你的心，你心中那份不朽的热爱，那份坚定不移的自我本真之美，始终如一，不抛弃，不放弃，总有一天你会看到心中的那份光亮！只要努力，我们就能一步步确实的接近我们的梦。不管我们的梦要在何时结束，只要我们还能去心无挂碍地寻梦，就要一往无前的进发。哪怕等到年华老去，被世俗枷锁而无力寻梦，我们也依旧未能成功；至少我们还留下了一份值得在人生的秋季里回味与自豪的记忆。

　　勿忘初心，方得终始，发自内心的感觉，是判断事物的可靠的证据，而真正的善良就是尊重自己的那份原始的感受。要知道心若改变，性格就会随着改变;性格改变，人生亦跟着改变。更多的时候我们能做的就是时刻提醒自己勿忘初心，想想当时是怎样的心境想要坚持，在没有走到最后的最后时说丢掉了最初的那颗心时，请扪心自问是否真的有去坚持过，有去尽力争取过……

　　行百里者，应以九十为半，此即末路艰难之谓。改掉初心，而堕入庸俗道者，十有八九，勉励你我，勿忘初心。那颗最初的心，不应该迫于时间和环境来改变，正视自我的真实感受，时刻警醒自己勿忘初心。

源于散文网

欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。

本文链接：http://lucylc.com/Mood-Diary/2017/02/24/勿忘初心.html

前端面试题汇总3

2017-02-24T02:10:24.000Z

HTML面试题

1.XHTML和HTML有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

2.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js;

3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐（Gecko）谷歌（webkit,Blink） opera(Presto),Safari(wbkit)

4.什么是语义化的HTML?

直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

5.HTML5 为什么只需要写 !DOCTYPE HTML？

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

6.Doctype作用？标准模式与兼容模式各有什么区别?

!DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

7.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

绘画 canvas

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search

新的技术webworker, websockt, Geolocation 移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

8.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会

sessionStorage和localStorage的存储空间更大；

sessionStorage和localStorage有更多丰富易用的接口；

sessionStorage和localStorage各自独立的存储空间；

9.如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

CSS面试题

1.简要说一下CSS的元素分类

块级元素：div,p,h1,form,ul,li;

行内元素 : span>,a,label,input,img,strong,em;

2.CSS隐藏元素的几种方法（至少说出三种）

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;

Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

Position:不会影响布局，能让元素保持可以操作;

Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

3.CSS清楚浮动的几种方法（至少两种）

使用带clear属性的空元素

使用CSS的overflow属性；

使用CSS的:after伪元素；

使用邻接元素处理；

4.CSS居中（包括水平居中和垂直居中）

内联元素居中方案
水平居中设置： 1.行内元素

设置 text-align:center；

2.Flex布局

设置display:flex;justify-content:center;(灵活运用,支持Chroime，Firefox，IE9+)

垂直居中设置： 1.父元素高度确定的单行文本（内联元素）

设置 height = line-height；

2.父元素高度确定的多行文本（内联元素）

a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle；

b:先设置 display:table-cell 再设置 vertical-align:middle；

块级元素居中方案
水平居中设置： 1.定宽块状元素

设置左右 margin 值为 auto；

2.不定宽块状元素

a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto；

b:给该元素设置 displa:inine 方法；

c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；

垂直居中设置：

使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;

利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;

利用display:table-cell属性使内容垂直居中;

使用css3的新属性transform:translate(x,y)属性;

使用:before元素;

5.写出几种IE6 BUG的解决方法

双边距BUG float引起的使用display

3像素问题使用float引起的使用dislpay:inline -3px

超链接hover 点击后失效使用正确的书写顺序 link visited hover active

Ie z-index问题给父级添加position:relative

Png 透明使用js代码改

Min-height 最小高度！Important 解决’

select 在ie6下遮盖使用iframe嵌套

为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

6.对于SASS或是Less的了解程度？喜欢那个？

语法介绍

7.Bootstrap了解程度

特点，排版，插件的使用;

8.页面导入样式时，使用link和@import有什么区别？

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

9.介绍一下CSS的盒子模型？

有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).

10.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

id选择器（ # myid）

类选择器（.myclassname）

标签选择器（div, h1, p）

相邻选择器（h1 + p）

子选择器（ul > li）

后代选择器（li a）

通配符选择器（ * ）

属性选择器（a[rel = “external”]）

伪类选择器（a: hover, li: nth - child）

可继承的样式： font-size font-family color, UL LI DL DD DT;

不可继承的样式：border padding margin width height ;

优先级就近原则，同权重情况下样式定义最近者为准;

优先级为: !important > id > class > tag important 比内联优先级高

11.CSS3有哪些新特性？

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜增加了更多的CSS选择器多背景 rgba

JavaScript面试题

1.javascript的typeof返回哪些数据类型

Ｏbject number function boolean underfind;

2.例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number）隐式（== – ===）；

3.数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

4.ajax请求的时候get 和post方式的区别?

一个在url后面一个放在虚拟载体里面有大小限制

安全问题应用不同一个是论坛等只需要请求的，一个是类似修改密码的;

5.call和apply的区别

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

6.ajax请求时，如何解释json数据

使用eval parse,鉴于安全性考虑使用parse更靠谱;

7.事件委托是什么

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

8.闭包是什么，有什么特性，对页面有什么影响?简要介绍你理解的闭包

闭包就是能够读取其他函数内部变量的函数。

9.添加删除替换插入到某个接点的方法

obj.appendChidl() obj.innersetBefore obj.replaceChild obj.removeChild

10.说一下什么是javascript的同源策略？

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

11.编写一个b继承a的方法;

function A(name){
    this.name = name;
    this.sayHello = function(){alert(this.name+” say Hello!”);};
}
function B(name,id){
    this.temp = A;
    this.temp(name);        //相当于new A();
    delete this.temp;
     this.id = id;
    this.checkId = function(ID){alert(this.id==ID)};
}

12.如何阻止事件冒泡和默认事件

function stopBubble(e)
{
   if (e && e.stopPropagation)
       e.stopPropagation()
   else
       window.event.cancelBubble=true
}
return false

13.下面程序执行后弹出什么样的结果?

function fn() {
    this.a = 0;
    this.b = function() {
        alert(this.a)
    }
}
fn.prototype = {
    b: function() {
        this.a = 20;
        alert(this.a);
    },
    c: function() {
        this.a = 30;
        alert(this.a);
    }
}
var myfn = new fn();
myfn.b();
myfn.c();

14.谈谈This对象的理解。

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是有一个总原则，那就是this指的是调用函数的那个对象。 this一般情况下：是全局对象Global。作为方法调用，那么this就是指这个对象

15.下面程序的结果

function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);

//答案： //a: undefined,0,0,0 //b: undefined,0,1,2 //c: undefined,0,1,1

16.下面程序的输出结果

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

17.了解Node么？Node的使用场景都有哪些？

高并发、聊天、实时消息推送

18.介绍下你最常用的一款框架

jquery,rn,angular等;

19.对于前端自动化构建工具有了解吗？简单介绍一下

Gulp,Grunt等；

20.介绍一下你了解的后端语言以及掌握程度

其它

1.对Node的优点和缺点提出了自己的看法？

(优点）

>  因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
>  因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
> 此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
> 因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
>

（缺点）

1
2
3

>  Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
> 而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
>

2.你有哪些性能优化的方法？

（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。（4）当需要设置的样式很多时设置className而不是直接操作style。（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。（8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示div+css布局慢。对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

3.http状态码有那些？分别代表是什么意思？

100-199 用于指定客户端应相应的某些动作。 200-299 用于表示请求成功。 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。 500-599 用于支持服务器错误。 503 – 服务不可用

4.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

查找浏览器缓存

DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求

进行HTTP协议会话

客户端发送报头(请求报头)

文档开始下载

文档树建立，根据标记请求所需指定MIME类型的文件

文件显示

浏览器这边做的工作大致分为以下几步：

加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。

解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）

5.你常用的开发工具是什么，为什么？

Sublime,Atom,Nodepad++;

6.说说最近最流行的一些东西吧？常去哪些网站？

Node.js、MVVM、React-native,Angular,Weex等

CSDN,Segmentfault,博客园,掘金,Stackoverflow等

7.介绍下你的项目（如果有的话）？并说一下在做这个项目中运用的技术以及遇到的难题是如何解决的

欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。

本文链接：http://lucylc.com/InterView/2017/02/24/前端面试题汇总3.html

前端面试题汇总2

2017-02-24T02:08:53.000Z

『HTML&CSS基础』

【HTML】

行内元素 关注行内置换元素类似inline-block方式展现 input textarea img select
浏览器内核 基于Webkit： Chrome - blink、腾讯X5、UC U3、华为T9 基于Gecko：Firefox 基于Trident：IE 基于Presto：Opera 兼备Webkit&Trident：猎豹、360
W3C标准 包括结构(xhtml,xml)、表现(css)、行为(ecmascript、dom)的标准。更好地规范浏览器对页面渲染，使得同一套网页方案尽可能在多套浏览器中表现一致。提高开发者开发效率和用户体验
Doctype 用来告诉浏览器以什么文档类型解析html，没有的话，会按照向下兼容的怪异模式对文档进行解析 h4及以下需要引用dtd声明，dtd有标准型和过渡型两种。两者区别可忽略 h5不急于SGML标准，因此不需要引用dtd
标签语义化的重要性 1.便于浏览器、搜索引擎解析 2.在没css情况也以一种文档形式展现，便于阅读 3.有利于SEO 4.有利于代码的阅读和维护
strong与em的异同 同：都是对文本起强调作用异：em以斜体显示文本，strong更利于SEO识别语义
SEO 详细可分为白帽SEO和黑帽SEO SEO的主要方面： 1.网站标题、关键字、描述 (meta) 2.网站结构布局优化：目录层级不要太多，尽量让Spider跳转3次就可以到达网站的任意一个内页 3.网站代码优化： SEO会过滤掉display none的元素、利用和、html语义化


图片格式
png-8 256色、png-24、gif、apng(Chrome不支持)、svg、webp(ios不支持)

link vs @import
区别：
1.link无兼容性缺点，@import仅兼容IE5+
2.link权重高于import
3.link外链的css与html是并行加载的，而import需等html加载完才加载


【CSS】

CSS盒模型
包括 margin padding border content
IE盒模型 (lt IE8)：content包含padding和border
如何改变：box-sizing

CSS可继承属性
与font有关的属性 如font-size、font-family、font-weight等
line-height、color、text-align、text-indent等

BFC
不同的display会参与不同的环境(formatting context)去渲染，而block参与BFC
BFC特点
1.同个BFC内盒子产生margin塌陷
2.计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算
3.BFC就是页面上的一个隔离的独立容器，里外互相不影响
产生新BFC
1.float属性不为none
2.position为absolute或fixed
3.display为inline-block | table-cell | table-caption | flex | inline-flex
4.overflow不为visible

清除浮动
1.形成新的BFC
2.新增div 设置clear:both
3.在父元素添加:after伪类，设置content:"";display:block;clear:both;zoom:1

position
absolute | relative | static | sticky | fixed



『HTML5』
【新标签】

新增的标签
1.布局，内容 
      
2.表单   
3.媒体   
4.状态  
5.冷门   

表单新类型
email url number tel search color DatePicker

表单新属性
autocomplete autofocus require pattern placeholder multiple


【新API】

交互
重力感应 DeviceOrientation
手机加速传感器 DeviceMotion

history 详细
以Pjax方式实现SPA history.pushState history.replaceState 解决ajax不能后退前进问题

储存
客户端储存：localStorage sessionStorage>只存在一个会话周期内

跨域
postMessage


【Web app】

常见dpr
ip6 2、ip6+ 3、nexus5 3

移动端适配
1.自适应方式
2.viewport方式
3.rem方式
4.scale()方式缩放

常用meta
IE相关
避免IE使用兼容模式 
为不支持viewport的IE Mobile设定宽度 
是否对手持设备友好 
UC浏览器
强制竖屏 
强制全屏 
应用模式 
X5浏览器
强制竖屏 
强制全屏 
应用模式 
360
开启极速模式 

iphone相关
启动webapp功能 删除工具栏和菜单栏 
控制状态栏颜色 
开启号码或邮箱检测 
添加主屏幕icon 



『CSS3』
【新属性】
flex、column、文本换行、媒体查询、待补充……
开启GPU加速
注意启用-webkit-backface-visibility:hidden; -webkit-perspective:1000;解决启用transform3d页面闪烁和抖动问题
【动画】

CSS3动画性能


『Javascript』
【原生】

js数据类型
5基本 string number boolean undefined null 储存在栈内存中
1复杂 object 储存在堆内存中

this指向
this总是指向函数的直接调用者（而非间接调用者）

null和undefined区别
null表示一个无的对象
undefined表示一个无的初始值。表示此处应该有值，但还没有定义，即缺少值

new的具体作用
如var p = new P();
var p = {}; //创建新对象
p.__proto__ = P.prototype; //继承构造函数的原型
P.call(p); //修改this指向

创建对象方式
对象字面量、工厂模式、构造函数、原型模式、构造函数+原型

原型 原型链
每个对象都有一个属性 prototype 当需要从对象中寻找属性时，如果在当前对象上没有找到就会从原型对象开始找 一直追溯到原型链的最顶端

实现继承
1.构造函数继承 详细

利用call、apply修改this指向

让子元素原型指向父元素实例，注意要修改子元素prototype.constructor指向

将需继承的属性写在父元素的prototype上，让子元素prototype指向父元素prototype，但在修改子元素prototype.constructor指向时会同时修改父元素prototype.constructor

同上方法 利用中介函数


2.非构造函数继承 详细
把父对象的属性，全部拷贝给子对象

浅拷贝vs深拷贝
浅拷贝
深拷贝 递归调用浅拷贝

闭包 详细
用途：读取函数内部变量。变量得不到销毁，一直储存在内存中，可能造成内存泄漏

内存泄漏
指分配的内存既不能使用又得不到回收

如为某元素绑定了一个事件，而该元素又从dom中移除

滥用闭包

两变量互相引用



原生Ajax实现过程
1.获取XMLHttpRequest对象
2.xhr.open(type,url,ifAsyn)
3.监听xhr状态改变，xhr.onreadystatechange = function(){} xhr.readyState==4&&xhr.status==200说明请求成功
【readyState：0=未初始化 1=启动 2=发送 3=接收 4=完成】
4.xhr.send()

GET和POST区别
GET 安全性低 可传内容少 通过url传值
POST 安全性高 可传内容多 通过表单传值

事件处理 详细

事件委托
利用事件冒泡机制 将事件绑定在父元素上，节省性能

事件处理程序
DOM0 -> DOM1 -> DOM2 (对比与0，可同时绑定多个事件)

mouseover和mouseenter区别
mouseenter不冒泡



数组去重
hash方式和index方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 Array.prototype.unique = function(){
var n = [];
for(var i=0,len=this.length;i    if(n.indexOf(this[i])==-1) {
        n.push(this[i])
    }
}
return n;
}
Array.prototype.unique2 = function(){
    var n = {},a =[];
    for(var i=0,len=this.length;i        if(!n[this[i]]) {
            a.push(this[i]);
            n[this[i]] = true;
        }
    }
    return a;
}

ES5数组新方法

斐波纳挈数列高效递归 详细
附斐波纳挈数列
1
2
3
4
5
6
7
8
9 function getNthFibonacci(count) {
    var fibonacci = [1,1];
    for(var i=2;i<=count;i++){
        fibonacci[i] = fibonacci[i-1]+ fibonacci[i-2];
    }
    return fibonacci[count];
};
var a = getNthFibonacci(5);
console.log(a)

getComputedStyle和style区别
getC 只读 可获取未被style定义的样式
style 读写 只可获取含style的样式

DOM
插入新节点
document:createElement()、createDocumentFragment()、createTextNode()
insertBefore(new,old)
获取节点
childNodes、parentNode、previousSibling、nextSibling、firstChild、lastChild、children
节点操作
appendChild、removeChild、replaceChild、cloneNode、normalize
获取位置

浏览器宽高 window.innerWidth document.documentElement.clientWidth

文档宽高 document.documentElement.offsetHeight、 document.documentElement.scrollHeight

到文档的最端处距离 offsetTop、offsetLeft



BOM
浏览器内核 navigator.appVersion

异步编程方法
1.回调函数，这是异步编程最基本的方法。
2.事件监听，另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。
3.发布/订阅，上一节的”事件”，完全可以理解成”信号”。
4.Promises对象，Promises 对象是CommonJS 工作组提出的一种规范，目的是为异步编程提供统一接口。


【jQuery】

操作DOM

ajax


【模块化】
【MV*】详细
【虚拟DOM】详细
以对象树的方式储存在内存中

『性能优化』

雅虎14条 详细

移动端优化

16毫秒的优化 详细

google提出1s完成终端首屏渲染：网络消耗+js执行与页面渲染

浏览器渲染频率1s 60帧，确保每一帧能在16ms内执行与渲染，尽可能避免重排与重绘

使用RAF控制渲染频率，减少重复渲染，避免事件重复执行

让js操作读写分离



渲染路径优化

最小化关键资源数量

最小化关键资源字节

最小化关键路径长度



页面直出 详细

server上获取数据并将数据与页面模板结合，在服务端渲染成最终的 HTML

返回最终的 HTML 展示





『跨域与前端安全』

跨域的方式

JSONP：强行执行不同域下的JS文件，需要外部JS配合。只能用GET方式

CORS：服务器端设置Access-Control-Allow-Origin，使其能被其他域使用AJAX访问到

domain+iframe：只适用主域相同子域不同的两个站。需要将两个站的document.domain设成同一个主域

window.postMessage(msg,targetOrgin)



跨域攻击 详细

跨域脚本

跨域请求伪造





『HTTP 』

HTTP报文

HTTP/1 HTTP/2 HTTPS 详细
建立在TCP基础上

状态码

缓存
设置缓存 服务器返回Cache-Control:max-age=xxx；expires:Thu, 03 Jan 2019 04:24:16 GMT、设置etag、last-modified



实际上浏览器输入 url 之后敲下回车就是先看本地 cache-control、expires 的情况，刷新(F5)就是忽略先看本地
cache-control、expires 的情况，带上条件
If-None-Match、If-Modified-Since，强制刷新(Ctrl + F5)就是不带条件的访问。


描述从输入url到一个页面展示在你面前的全部过程


DNS Lookup

建立TCP连接

发送http请求

服务器发送响应

浏览器加载解析DOM&CSS

生成DOM Tree&CSS RuleTree

DOMTree和CSS RuleTree结合生成RenderTree

对RenderTree上的每一个元素计算其坐标>称为布局

对RenderTree的元素进行绘制和展示>称为『painting』



引申-当页面渲染时，浏览器发生了什么


『工具』
【前端自动化工具】

grunt

glup


【CSS预处理】
优势：

用嵌套方式写CSS，结构更加的清晰

可使用变量、函数，更类似编程的方式

可将一整套CSS拆分成若干个组件，粒子性、可组合的特点更加明显



sass

less

compass



『数据结构』

排序 详细
不稳定的排序 快速排序、选择排序、希尔排序、堆排序

二叉树原理与实现



欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。
本文链接：http://lucylc.com/InterView/2017/02/24/前端面试题汇总2.html



前端面试题汇总1
2017-02-24T01:59:59.000Z

本文旨在加深对前端知识点的理解，资料来源于网络
一些开放性题目
1
2
3
4
5
6
7
8
9 1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。
2.项目介绍
3.如何看待前端开发？
4.平时是如何学习前端开发的？
5.未来三到五年的规划是怎样的？
position的值， relative和absolute分别是相对于谁进行定位的？

absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

static 默认值。没有定位，元素出现在正常的流中

sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出


如何解决跨域问题

JSONP：

原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。
JSONP：json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 

CORS

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

通过修改document.domain来跨子域

将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域
主域相同的使用document.domain

使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5中新引进的window.postMessage方法来跨域传送数据

还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name的方法既不复杂，也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。
XML和JSON的区别？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 (1).数据体积方面。
JSON相对于XML来讲，数据的体积小，传递的速度更快些。
(2).数据交互方面。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(3).数据描述方面。
JSON对数据的描述性比XML较差。
(4).传输速度方面。
JSON的速度要远远快于XML。
谈谈你对webpack的看法
WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。
webpack的两大特色：
1
2
3 1.code splitting（可以自动完成）
2.loader 可以处理各种类型的静态文件，并且支持串联操作
webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 1. 对 CommonJS 、 AMD 、ES6的语法做了兼容
2. 对js、css、图片等资源文件都支持打包
3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
4. 有独立的配置文件webpack.config.js
5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
6. 支持 SourceUrls 和 SourceMaps，易于调试
7. 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快
说说TCP传输的三次握手四次挥手策略
为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送 后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK。
发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。
最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。
若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。

断开一个TCP连接则需要“四次握手”：


第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。

第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。

第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。

第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。


TCP和UDP的区别
TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来
UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！
UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。
说说你对作用域链的理解
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。
创建ajax过程
1
2
3
4
5
6
7
8
9
10
11 (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
渐进增强和优雅降级
渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
常见web安全及防护原理

sql注入原理

就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。
总的来说有以下几点：
1
2
3
4
5
6
7
8 
1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。
2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
4.不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。

XSS原理及防范

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。比如：攻击者在论坛中放一个
看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，
当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。

XSS防范方法

首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。
首先，避免直接在cookie 中泄露用户隐私，例如email、密码等等。
其次，通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值，不可能拿来重放。
如果网站不需要再浏览器端对cookie 进行操作，可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。
尽量采用POST 而非GET 提交表单

XSS与CSRF有什么区别吗？

XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。
要完成一次CSRF攻击，受害者必须依次完成两个步骤：
1
2
3 登录受信任网站A，并在本地生成Cookie。
在不登出A的情况下，访问危险网站B。

CSRF的防御


服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。

通过验证码的方法


Web Worker 和webSocket

worker主线程:

1
2
3
4
5
6
7 1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。
2.通过worker.postMessage( data ) 方法来向worker发送数据。
3.绑定worker.onmessage方法来接收worker发送过来的数据。
4.可以使用 worker.terminate() 来终止一个worker的执行。
WebSocket是Web应用程序的传输协议，它提供了双向的，按序到达的数据流。他是一个HTML5协议，WebSocket的连接是持久的，他通过在客户端和服务器之间保持双工连接，服务器的更新可以被及时推送给客户端，而不需要客户端以一定时间间隔去轮询。
HTTP和HTTPS
HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
默认HTTP的端口号为80，HTTPS的端口号为443。
为什么HTTPS安全
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性
对前端模块化的认识

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

AMD 是提前执行，CMD 是延迟执行。
AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

CMD模块方式

1
2
3
4
5 define(function(require, exports, module) {
  // 模块代码
});
Javascript垃圾回收方法

标记清除（mark and sweep）

这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。
垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了

引用计数(reference counting)

在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。
在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，
也就是说只要涉及BOM及DOM就会出现循环引用问题。
你觉得前端工程的价值体现在哪
1
2
3
4
5
6
7
8
9 为简化用户使用提供技术支持（交互部分）
为多个浏览器兼容性提供支持
为提高用户浏览速度（浏览器性能）提供支持
为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持
为展示数据提供支持（数据接口）
谈谈性能优化问题
代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
请求带宽：压缩文件，开启GZIP，

代码层面的优化


用hash-table来优化查找

少用全局变量

用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

用setTimeout来避免页面失去响应

缓存DOM节点查找的结果

避免使用CSS Expression

避免全局查询

避免使用with(with会创建自己的作用域，会增加作用域链长度)

多个变量声明合并

避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率

尽量避免写在HTML标签中写Style属性


移动端性能优化

尽量使用css3动画，开启硬件加速。

适当使用touch事件代替click事件。

避免使用css3渐变阴影效果。

可以用transform: translateZ(0)来开启硬件加速。

不滥用Float。Float在渲染时计算量比较大，尽量减少使用

不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。

合理使用requestAnimationFrame动画代替setTimeout

CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加

PC端的在移动端同样适用



相关阅读：如何做到一秒渲染一个移动页面

什么是Etag？
当发送一个服务器请求时，浏览器首先会进行缓存过期判断。浏览器根据缓存过期时间判断缓存文件是否过期。
情景一：若没有过期，则不向服务器发送请求，直接使用缓存中的结果，此时我们在浏览器控制台中可以看到 200 OK(from cache) ，此时的情况就是完全使用缓存，浏览器和服务器没有任何交互的。
情景二：若已过期，则向服务器发送请求，此时请求中会带上①中设置的文件修改时间，和Etag
然后，进行资源更新判断。服务器根据浏览器传过来的文件修改时间，判断自浏览器上一次请求之后，文件是不是没有被修改过；根据Etag，判断文件内容自上一次请求之后，有没有发生变化
情形一：若两种判断的结论都是文件没有被修改过，则服务器就不给浏览器发index.html的内容了，直接告诉它，文件没有被修改过，你用你那边的缓存吧—— 304 Not Modified，此时浏览器就会从本地缓存中获取index.html的内容。此时的情况叫协议缓存，浏览器和服务器之间有一次请求交互。
情形二：若修改时间和文件内容判断有任意一个没有通过，则服务器会受理此次请求，之后的操作同①
① 只有get请求会被缓存，post请求不会
Expires和Cache-Control
Expires要求客户端和服务端的时钟严格同步。HTTP1.1引入Cache-Control来克服Expires头的限制。如果max-age和Expires同时出现，则max-age有更高的优先级。
1
2
3
4
5
6
7
8
9 Cache-Control: no-cache, private, max-age=0
ETag: abcde
Expires: Thu, 15 Apr 2014 20:00:00 GMT
Pragma: private
Last-Modified: $now // RFC1123 format
ETag应用:
Etag由服务器端生成，客户端通过If-Match或者说If-None-Match这个条件判断请求来验证资源是否修改。常见的是使用If-None-Match。请求一个文件的流程可能如下：
====第一次请求===
1
2
3 1.客户端发起 HTTP GET 请求一个文件；
2.服务器处理请求，返回文件内容和一堆Header，当然包括Etag(例如"2e681a-6-5d044840")(假设服务器支持Etag生成和已经开启了Etag).状态码200
====第二次请求===
1 客户端发起 HTTP GET 请求一个文件，注意这个时候客户端同时发送一个If-None-Match头，这个头的内容就是第一次请求时服务器返回的Etag：2e681a-6-5d0448402.服务器判断发送过来的Etag和计算出来的Etag匹配，因此If-None-Match为False，不返回200，返回304，客户端继续使用本地缓存；流程很简单，问题是，如果服务器又设置了Cache-Control:max-age和Expires呢，怎么办
答案是同时使用，也就是说在完全匹配If-Modified-Since和If-None-Match即检查完修改时间和Etag之后，
服务器才能返回304.(不要陷入到底使用谁的问题怪圈)
为什么使用Etag请求头?
Etag 主要为了解决 Last-Modified 无法解决的一些问题。
栈和队列的区别?
1
2
3
4
5 栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。
队列先进先出，栈先进后出。
栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除
栈和堆的区别？
1
2
3
4
5
6
7 栈区（stack）—   由编译器自动分配释放   ，存放函数的参数值，局部变量的值等。
堆区（heap）   —   一般由程序员分配释放，   若程序员不释放，程序结束时可能由OS回收。
堆（数据结构）：堆可以被看成是一棵树，如：堆排序；
栈（数据结构）：一种先进后出的数据结构。
快速 排序的思想并实现一个快排？
“快速排序”的思想很简单，整个排序过程只需要三步：
　　（1）在数据集之中，找一个基准点
　　（2）建立两个数组，分别存储左边和右边的数组
　　（3）利用递归进行下次比较
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 
你觉得jQuery或zepto源码有哪些写的好的地方
(答案仅供参考)
jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jquery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链。
1
2
3
4
5
6
7
8
9
10
11
12
13 (function( window, undefined ) {
     //用一个函数域包起来，就是所谓的沙箱
     //在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局
     //把当前沙箱需要的外部变量通过函数参数引入进来
     //只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数
    window.jQuery = window.$ = jQuery;
})( window );
jquery将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法。
有一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度。
jquery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率。
ES6的了解
新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。ES6将promise对象纳入规范，提供了原生的Promise对象。增加了let和const命令，用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。。还有就是引入module模块的概念
js继承方式及其优缺点

原型链继承的缺点

1 一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。

借用构造函数（类式继承）

1 借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。所以我们需要原型链+借用构造函数的模式，这种模式称为组合继承

组合式继承

1 组合式继承是比较常用的一种继承方法，其背后的思路是 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。
具体请看：JavaScript继承方式详解
关于Http 2.0 你知道多少？
HTTP/2引入了“服务端推（server push）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。
HTTP/2提供更多的加密支持
HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。
它增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽。
defer和async

defer并行加载js文件，会按照页面上script标签的顺序执行
async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行

谈谈浮动和清除浮动
浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。
如何评价AngularJS和BackboneJS
backbone具有依赖性，依赖underscore.js。Backbone + Underscore + jQuery(or Zepto) 就比一个AngularJS 多出了2 次HTTP请求.
Backbone的Model没有与UI视图数据绑定，而是需要在View中自行操作DOM来更新或读取UI数据。AngularJS与此相反，Model直接与UI视图绑定，Model与UI视图的关系，通过directive封装，AngularJS内置的通用directive，就能实现大部分操作了，也就是说，基本不必关心Model与UI视图的关系，直接操作Model就行了，UI视图自动更新。
AngularJS的directive，你输入特定数据，他就能输出相应UI视图。是一个比较完善的前端MVW框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能，模板功能强大丰富，并且是声明式的，自带了丰富的 Angular 指令。
用过哪些设计模式？

工厂模式：

1
2
3 主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。
    工厂模式解决了重复实例化的问题 ，但还有一个问题,那就是识别问题，因为根本无法 搞清楚他们到底是哪个对象的实例。
1
2
3
4
5
6
7
8
9
10 function createObject(name,age,profession){//集中实例化的函数var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.profession = profession;
    obj.move = function () {
        return this.name + ' at ' + this.age + ' engaged in ' + this.profession;
    };
    return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一个实例var test2 = createObject('mike',25,'engineer');//第二个实例

构造函数模式

使用构造函数的方法 ，即解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：
1
2
3
4
5 1.构造函数方法没有显示的创建对象 (new Object());
2.直接将属性和方法赋值给 this 对象;
3.没有 renturn 语句。
说说你对闭包的理解
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念
闭包有三个特性：

1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收

具体请看：详解js闭包
请你谈谈Cookie的弊端
cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。
第一：每个特定的域名下最多生成20个cookie
1
2
3
4
5
6
7 1.IE6或更低版本最多20个cookie
2.IE7和之后的版本最后可以有50个cookie。
3.Firefox最多50个cookie
4.chrome和Safari没有做硬性限制
IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。
cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。
IE 提供了一种存储可以持久化用户数据，叫做userdata，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。

优点：极高的扩展性和可用性

1
2
3
4
5
6
7 1.通过良好的编程，控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点：

1 1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉.
1
2
3 2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
浏览器本地存储
在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
cookie 和session 的区别：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
   考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
    考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
   将登陆信息等重要信息存放为SESSION
   其他信息如果需要保留，可以放在COOKIE中

display:none和visibility:hidden的区别？

1
2
3 display:none  隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间。

CSS中 link 和@import 的区别是？

1
2
3
4
5
6
7 (1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重 高于@import的权重.

position:absolute和float属性的异同


共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。



介绍一下box-sizing属性？

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content


标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li:nth-child）
优先级为:
!important > id > class > tag
important 比 内联优先级高,但内联比 id 要高

CSS3新增伪类举例：

1
2
3
4
5
6
7
8
9
10
11
12
13 p:first-of-type 选择属于其父元素的首个  元素的每个 
 元素。
p:last-of-type  选择属于其父元素的最后  元素的每个 
 元素。
p:only-of-type  选择属于其父元素唯一的  元素的每个 
 元素。
p:only-child    选择属于其父元素的唯一子元素的每个  元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个  元素。
:enabled  :disabled 控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

CSS3有哪些新特性？

1
2
3
4
5
6
7
8
9
10
11
12
13 CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器  多背景 rgba
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局
border-image
CSS3中新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：
content-box（默认）
布局所占宽度Width：
1 Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
1 Height = height + padding-top + padding-bottom + border-top + border-bottom
padding-box
布局所占宽度Width：
1 Width = width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度Height:
1 Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
border-box
布局所占宽度Width：
1 Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
1 Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

对BFC规范的理解？

1
2
3   BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。
（W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。
说说你对语义化的理解？
1
2
3
4
5
6
7 1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
1）、 声明位于文档中的最前面，处于  标签之前。告知浏览器以何种模式来渲染文档。
2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
你知道多少种Doctype文档类型？
1
2
3
4
5
6
7
8
9  该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
 HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
 XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
 （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
HTML与XHTML——二者有什么区别
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 区别：
1.所有的标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须使用小写
3.所有的XML标记都必须合理嵌套
4.所有的属性必须用引号""括起来
5.把所有<和&特殊符号用编码表示
6.给所有属性赋一个值
7.不要在注释内容中使“--”
8.图片必须有说明文字
常见兼容性问题？
1
2
3
4
5
6
7
8
9
10
11
12
13
14 png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
#box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入
_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
    .bb{
     background-color:#f1ee18;/*所有识别*/
    .background-color:#00deff\9; /*IE6、7、8识别*/
    +background-color:#a200ff;/*IE6、7识别*/
    _background-color:#1e0bd1;/*IE6识别*/
    }
1
2
3 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发
怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在
可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：``

上下margin重合问题

1
2
3 ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
解释下浮动和它的工作原理？清除浮动的技巧
1 浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1
2
3
4
5
6
7
8
9
10
11 1.使用空标签清除浮动。
   这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
   给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
   该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
浮动元素引起的问题和解决办法？
1
2
3
4
5
6
7 浮动元素引起的问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：

使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：
1
2
3 .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮动的几种方法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 1，额外标签法，
（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）
2，使用after伪类
#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
    }
3,浮动外部元素
4,设置overflow为hidden或者auto
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

1）创建新节点

1
2
3
4
5 createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点

2）添加、移除、替换、插入

1
2
3
4
5
6
7 appendChild()
removeChild()
replaceChild()
insertBefore() //并没有insertAfter()

3）查找

1
2
3
4
5
6 getElementsByTagName()    //通过标签名称
getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，
会得到一个数组，其中包括id等于name值的)
getElementById()    //通过元素Id，唯一性
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
1
2
3 表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

移除的元素

1
2
3 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

1
2
3
4
5
6
7
8
9
10
11
12
13
14 
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   
如何区分： DOCTYPE声明\新增的结构元素\功能元素
如何实现浏览器内多个标签页之间的通信?
1 调用localstorge、cookies等本地存储方式
什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
1
2
3
4
5
6
7  FOUC - Flash Of Unstyled Content 文档样式闪烁
 
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
 解决方法简单的出奇，只要在之间加入一个或者