总结篇-Javascript部分（未完待续...）

常用的四种设计模式

1.工厂模式：解决多个相似的问题；
2.单例模式：只能被实例化一次；
3.沙箱模式：自执行函数，使用闭包把内部方法暴露出来，例：
    var fn=(function(){
        function aFn(){};
        return {
            aFn:aFn
        }
    })
4.发布者订阅模式：有新消息主动推送的功能模式；

编程方式及其优缺点

1.命令式编程（流水式从上至下执行）
2.面向编程（函数式编程：闭包（函数组合嵌套的方式），一类函数，箭头函数）
3.面向对象式编程（OOP：原型（链式的链接对象的对象）继承（存在父子间属性函数的使用））
    优缺点： 对象函数属性排列易于理解；命令式编码风格计算机能直接快速编译；
            多实例时乱象丛生，容易修改原始值导致解析不理想化（缺点）
4.函数式编程：
    优缺点： 避免面向对象编程的缺点，自我执行理想化程度高；
            复用性良好，存在参数无参数状态，且可以高效完成算法；
            执行逻辑清晰，方便修改和优化更新；
            避免多线程冲突，逻辑混乱
            简洁度很好，易读性稍差（缺点）

JS语法的基本规范

不要在同一行声明多个变量。
请使用 ===/!==来比较true/false或者数值
使用对象字面量替代new Array这种形式
不要使用全局函数。
Switch语句必须带有default分支
函数不应该有时候有返回值，有时候没有返回值。
for循环必须使用大括号
if语句必须使用大括号
for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。

书写高性能JS的方法

遵循严格模式："use strict";
将js脚本放在页面底部，加快渲染页面
将js脚本将脚本成组打包，减少请求
使用非阻塞方式下载js脚本
尽量使用局部变量来保存全局变量
尽量减少使用闭包
使用 window 对象属性方法时，省略 window
尽量减少对象成员嵌套
缓存 DOM 节点的访问
通过避免使用 eval() 和 Function() 构造器
给 setTimeout() 和 setInterval() 传递函数而不是字符串作为参数
尽量使用直接量创建对象和数组
最小化重绘(repaint)和回流(reflow)

JS的组成

三部分组成：
    ECMAScript（核心）：JavaScript 语言基础
    DOM（文档对象模型）：规定了访问HTML和XML的接口
    BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法

JS有的内置对象（ES6新增对象请查看详情）

数据封装类对象：Object、Array、Boolean、Number、String
其他对象：Function、Arguments、Math、Date、RegExp、Error
ES6新增对象：Symbol、Map、Set、Promises、Proxy、Reflect

获取本地时间的时间戳

var timestamp=Date.parse(new Date());	//特殊存在：毫秒显示为000(不取秒以下的数值)
var timestamp=(new Date()).valueOf();
var timestamp=new Date().getTime();

‘类继承’和‘原型继承’的区别

类继承：
    实例由类继承而来（建筑图纸和实际建筑的关系），同时还会创建父类—子类这样一种关系，也叫做类的分层
分类。通常是用 new 关键字调用类的构造函数来创建实例的。不过在 ES6 中，要继承 一个类，不用 class 关
键字也可以。尽量不用类继承，除非是单一级的使用。

原型继承：
    实例/对象直接从其它对象继承而来，创建实例的话，往往用工厂函数或者 Object.create() 方法。实例可
以从多个不同的对象组合而来，这样就能选择性地继承了。主要实现手段有：委托（原型链）；组合；函数式（这
个函数式原型继承不是函数式编程。这里的函数是用来创建一个闭包，以实现私有状态或者封装）

双向数据绑定，单向数据流的含义和区别

双向数据绑定：
    UI 层所呈现的内容和 Model 层的数据动态地绑定在一起，其中一个发生了变化，就会立刻反映在另一个
上。比如用户在前端页面的表单控件中输入了一个值，Model 层对应该控件的变量就会立刻更新为用户所输入的
值；反之亦然，如果 Modal 层的数据有变化，变化后的数据也会立刻反映至 UI 层。Angular 则是双向数据绑
定的典型。

单向数据流：
    意味着只有 Model 层才是单一数据源。UI 层的变化会触发对应的消息机制，告知 Model 层用户的目的。
只有 Model 层才有更改应用状态的权限，这样一来，数据永远都是单向流动的，其状态的变化是很容易跟踪的。
React 是单向数据流的典型。

基本类型与引用类型的区别

基本数据类型: Undefined、Null、Boolean、Number、String
引用数据类型: Object, Array, Date, RegExp(正则), Function

区别：
    存储：
        基本类型值在内存中占据固定大小的空间,因此被保存在栈内存中
        引用类型的值是对象, 保存在堆内存中. 引用类型的变量实际上是一个指向该对象的指针
    复制：
        从一个变量向另一个变量复制基本类型的值, 会创建这个值的一个副本
        从一个变量向另一个变量复制引用类型的值, 复制的其实是指针,　因此两个变量最终都指向同一个对象
    检测：
        确定一个值是哪种基本类型可以用typeof操作符
        确定一个值是哪种引用类型可以使用instanceof操作符

null，undefined 的区别

undefined 表示不存在这个值    typeof undefined //"undefined"
null 一个对象被定义了，值为“空值”    typeof null //"object"

undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。例如变量
被声明了，但没有赋值时，就等于undefined
null :是一个空对象, 没有任何属性和方法。例如作为函数的参数，表示该函数的参数不是对象

注意：在验证null时，一定要使用　=== ，因为 == 无法分别 null 和　undefined

闭包（closure）的基本了解

闭包：是指有权访问另一个函数作用域中变量的函数。
特点：
    1.创建闭包的最常见的方式就是在一个函数内创建另一个函数；
    2.利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部；
    3.使用闭包主要是为了设计私有的方法和变量；
    4.闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量；
    5.在js中，函数即闭包，只有函数才会产生作用域的概念；
特征：
    1.函数内再嵌套函数；
    2.内部函数可以引用外层的参数和变量；
    3.参数和变量不会被垃圾回收机制回收；
例子：
    var add = (function () {
        var counter = 0;
        return function () {return counter += 1;}
    })();
    add();
    //1
    add();
    //2

闭包的使用场景

1.代替全局变量
2.函数外或在其他函数中访问某一函数内部的参数
3.在函数执行之前为要执行的函数提供具体参数
4.在函数执行之前为函数提供只有在函数执行或引用时才能知道的具体参数
5.为节点循环绑定click事件，在事件函数中使用当次循环的值或节点，而不是最后一次循环的值或节点
6.暂停执行
7.包装相关功能

伪数组的概念

伪数组概念：是能通过Array.prototype.slice 转换为真正的数组的带有length属性的对象;
伪数组示例：
    1.arguments对象
    2.调用getElementsByTagName,document.childNodes之类的node集合
伪数组变更：
    Array.prototype.slice.call(fakeArray)转变为真正的Array对象，返回新数组而不会修改原数组

辨别数组的方式

1.obj instanceof Array 如果返回 true；
2.Object.prototype.toString.call(obj) === "[object Array]"；
3.obj.constructor == Array为 true；
4.ES6的Array.isArray(obj)返回 true；

javascript创建对象的方式

1.对象字面量（最后一个key-value不添加逗号）
    var obj={
        name:"yjs",
        age:25,
    };
    优缺点：复用性较差（缺）

2.构造函数（函数名首字母使用大写，区分函数和自定义对象，可以传参的呦）
    function NewObj(){}
    var person=new NewObj();
    person.name="yjs";
    person.age="25";
    person.city="sjz";
    person.getName=function(){
        console.log("对象的名称是："+person.name)
    }
    person.getName();
    优缺点：复用性较差（缺）

3.构造函数-含参（用this关键字定义构造的上下文属性，一般不会出现return的语句）
    function One(name,age,city){
        this.name=name;
        this.age=age;
        this.city=city;
        this.getName=function(){
            console.log("对象的名称是："+person.name)
        }
    }
    var one=new One("yjs",25,"sjz");//实例化对象
    one.getName();
    优缺点：实例化的对象可以识别指定的类型（优）；每次实例都会重新创建函数，全局变量多（缺）

4.工厂函数（内置对象，这种事最不推荐使用的）
    var per=new Object();
    per.name="yjs";
    per.age=25;
    per.city="sjz";
    per.getName=function(){
        console.log("对象的名称是："+person.name)
    }
    per.getName();
    优缺点：所有的实例都指向一个原型，对象无法识别（缺）

5.原型
    function One(){}
    One.prototype.name="yjs";
    One.prototype.getName=function(){
        console.log("对象的名称是："+person.name)
    }
    var one=new One();
    one.getName();
    优缺点：创建函数放在原型避免全局变量多的问题（优）；不能初始化参数（缺）

6.混合（举例为：构造函数方式和原型方式的混合，以上几种可任意组合）
    function One(name){
        this.name=name;
    }
    One.prototype.getName=function(){
        console.log("对象的名称是："+person.name)
    }
    var one=new One("yjs");
    one.getName(); 

This对象的理解

1.this总是指向函数的直接调用者（而非间接调用者）；
2.如果有new关键字，this指向new出来的那个对象；
3.事件中，this指向触发这个事件的对象（特殊：IE中的attachEvent中的this总是指向全局对象Window）；

call()和apply()方法实现继承的区别

作用：都能继承另一个对象的方法和属性
区别：参数列表不一样
书写：Function.call(obj, arg1, arg2,...)    Function.apply(obj, args) 
参数：obj-要被继承的对象；第二个参数-传递的实参值
举例：
    function A(a){console.log(a)}
    function B(b,c){console.log(b+c)}
    A.call(B,10);    //10
    B.applay(A,[10,20])    //30

new操作符的原理

1.创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
    var obj  = {};
2.属性和方法被加入到 this 引用的对象中。
    obj.__proto__ = Base.prototype;
3.新创建的对象由 this 所引用，并且最后隐式的返回 this 。
    Base.call(obj);

IE与火狐的事件机制有什么区别？ 如何阻止冒泡

事件：网页中的某个操作，点击，悬停，双击，键盘事件等
机制：IE是事件冒泡、其他的浏览器同时支持两种事件模型（捕获型事件和冒泡型事件）
阻止：ev.stopPropagation();（旧ie的方法 ev.cancelBubble = true;）

事件委托(事件代理)

原理：事件冒泡, 委托到已知的父级元素。
范围：1.js脚本动态添加的；2.不好定位的元素事件；3.相同元素过多；
例子:
    html部分:
    <ul id="list">
        <li id="li-1">Li 2</li>
        <li id="li-2">Li 3</li>
    </ul>

    js部分：
    document.getElementById("list").addHandler("click", function(e){
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if(target.nodeName.toUpperCase == "LI"){
            console.log("li的ID是："+e,target.id);
        }
    });

XML和JSON的区别

1.JSON相对于XML来讲，数据的体积小，传递的速度更快；
2.JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互；
3.JSON对数据的描述性比XML较差；
4.JSON的速度要远远快于XML；

哪些操作会造成内存泄漏

1.setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏;
2.闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）;
3.当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。

面向对象中继承实现

1.prototype原型链方式：
    function One(name){
        this.name = name;
        this.getName=function(){
            console.log(this.name);
        }
    }
    function Two(name){
        this.name = name;
    }
    Two.prototype = new One();
    var a = new One("gc");
    var b = new Two("yjs");
    a.getName();    //gc
    b.getName();    //yjs


2、call()/apply()方法
    function One(name){
        this.name = name;
        this.getName=function(){
            console.log(this.name);
        }
    }
    function Two(){
        var args = arguments;
        One.call(this,args[0]);    // One.apply(this,arguments);
    }
    var a = new One("gc");
    var b = new Two("yjs");
    a.getName();    //gc
    b.getName();    //yjs


3.混合方法（prototype,call/apply）
    function One(name){
        this.name = name;
        this.getName=function(){
            console.log(this.name);
        }
    }
    function Two(){
        var args = arguments;
        One.call(this,args[0]); 
    }
    Two.prototype = new One();
    var b = new Two("yjs");
    b.getName();    //yjs


4.对象冒充
    function One(name){
        this.name = name;
        this.getName=function(){
            console.log(this.name);
        }
    }
    function Two(name){
        this.tt = One; //将One类的构造函数赋值给this.tt
        this.tt(name); //js中实际上是通过对象冒充来实现继承的
        delete this.tt; //移除对One的引用
    }
    var a = new One("gc");
    var b = new Two("yjs");
    a.getName();    //gc
    b.getName();    //yjs

sessionStorage 、localStorage 和 cookie 的区别

共同点：用于浏览器端存储的缓存数据

不同点：
    1.存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；
      web storage会将数据保存到本地，不会造成宽带浪费；
    2.数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;
    3.数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；
      sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；
    4.作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器
      窗口中共享，即使是同一个页面；

Ajax的优缺点及工作原理

定义：AJAX（异步的 JavaScript 和 XML）。Ajax 是一种用于创建快速动态网页的技术。
作用：Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
优点：
    1.减轻服务器的负担；
    2.减少用户等待时间；
    3.页面和数据的分离；
缺点：
    1.考虑浏览器兼容性；
    2.页面后退按钮没用；
    3.支持的设备不广泛；
原理：
    1.创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
    2.判断数据传输方式(GET/POST)
    3.打开链接 open()
    4.发送 send()
    5.onreadystatechange 数据接收完成，判断响应状态 status 执行回调函数
代码：
    function loadXMLDoc(){
	    var xmlhttp;
	    if (window.XMLHttpRequest){
		    xmlhttp=new XMLHttpRequest();
	    }else{
		    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	    }

	    xmlhttp.onreadystatechange=function(){
		    if (xmlhttp.readyState==4 && xmlhttp.status==200){
			    //回调语句
		    }
	    }
	    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	    xmlhttp.send();
    }

浏览器的渲染过程，DOM树和渲染树的区别

浏览器的渲染过程：
    解析HTML构建 DOM(DOM树)，并行请求 css/image/js
    CSS 文件下载完成，开始构建 CSSOM(CSS树)
    CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)
    布局(Layout)：计算出每个节点在屏幕中的位置
    显示(Painting)：通过显卡把页面画到屏幕上

DOM树 和 渲染树 的区别：
    DOM树与HTML标签一一对应，包括head和隐藏元素
    渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的css属性

原型，原型链的基本概念

原型：
    JavaScript的所有对象中都包含了一个 [__proto__] 内部属性，这个属性所对应的就是该对象的原型
    JavaScript的函数对象，除了原型 [__proto__] 之外，还预置了 prototype 属性
    当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [__proto__]。

原型链：
    当一个对象调用的属性/方法自身不存在时，就会去自己 [__proto__] 关联的前辈 prototype 对象上去找
    如果没找到，就会去该 prototype 原型 [__proto__] 关联的前辈 prototype 去找。依次类推，直到找 
    到属性/方法或 undefined 为止。从而形成了所谓的“原型链”

原型特点：
    JavaScript对象是通过引用来传递的，当修改原型时，与之相关的对象也会继承这一改变

Window 对象，Document 对象

Window：
    Window 对象表示当前浏览器的窗口，是JavaScript的顶级对象。
Document：
    Document 对象是 HTML 文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。

Window 对象的成员包括我们创建的所有对象、函数、变量，Window 对象的方法和属性是在全局范围内有效的。
Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问，是 Window 对象的一部分。

IE的事件处理和W3C的事件处理的区别

绑定事件：
    W3C: targetEl.addEventListener('click', handler, false);
    IE: targetEl.attachEvent('onclick', handler);
删除事件：
    W3C: targetEl.removeEventListener('click', handler, false);
    IE: targetEl.detachEvent(event, handler);
事件对象：
    W3C: var e = arguments.callee.caller.arguments[0]
    IE: window.event
事件目标：
    W3C: e.target
    IE: window.event.srcElement
阻止事件默认行为：
    W3C: e.preventDefault()
    IE: window.event.returnValue = false
阻止冒泡：
    W3C: e.stopPropagation()
    IE: window.event.cancelBubble = true

js延迟加载的方式

defer和async：defer同步加载js文件，async异步加载js文件。
动态创建DOM方式（用得最多）：document.createElement('script')。
按需异步载入js

DOM操作——添加、移除、移动、复制、创建，查找节点

1、获取节点
    document.getElementById(idName)              //返回一个元素对象
    document.getElementsByName(name)             //返回元素对象伪数组
    document.getElementsByClassName(className)   //返回元素对象伪数组
    document.getElementsByTagName(tagName)       //返回元素对象伪数组

2、获取/设置属性
    element.getAttribute(attributeName)                   //返回对应属性的属性值
    element.setAttribute(attributeName,attributeValue)    //传入属性名及设置的值

3、创建节点
    document.createElement("h3")                 //创建一个html元素
    document.createTextNode(String);             //创建一个文本节点
    document.createAttribute("class");           //创建一个属性节点

4、增添节点
    element.appendChild(Node);                   //往element内部最后面添加一个节点
    elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入

5、删除节点
    element.removeChild(Node)                    //删除当前节点下

JavaScript 中，调用函数的方式

方法调用模式 Foo.foo(arg1, arg2);
函数调用模式 foo(arg1, arg2);
构造器调用模式 (new Foo())(arg1, arg2);
call/applay调用模式 Foo.foo.call(that, arg1, arg2);
bind调用模式 Foo.foo.bind(that)(arg1, arg2)();