js基础

1. 设计模式
   1. 工厂模式： 实质是定义一个创建对象的接口，但是让实现这个接口的类来决定实例化哪个类。工厂方法让类的实例化推迟到子类中进行。
      1. 让对象的调用者和对象创建过程分离，当对象调用者需要对象时，直接向工厂请求即可
   2. 单例模式：如果一个类始终只能创建一个实例，则这个类被称为单例类，这种模式就被称为单例模式。
   3. 观察者模式：目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。具体观察者和具体目标继承各自的基类，然后具体观察者把自己注册到具体目标里，在具体目标发生变化时候，调度观察者的更新方法。
      1. 　
   4. 发布/订阅模式：订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布该事件到调度中心（顺带上下文），由调度中心统一调度订阅者注册到调度中心的处理代码
      1. 　　
2. 操作节点
   1. 子节点：
      1. 　childNodes    获取到包括文本节点和元素节点   文本节点：nodeType == 3 元素节点：nodeType == 1
      2. 　children（只能一层）
   2. 父节点：
      1. 　parentNode
      2. 　offsetParent: 获取元素用来定位的父级，如position:absolute 相对父级是谁
   3. 首尾子节点：
      1. 　firstChild  IE6-8     firstElementChild  其他浏览器
      2. 　lastChild  lastElementChild
   4. 兄弟节点
      1. 　nextSibling、nextElementSibling
      2. 　previousSibling、previousElementSibling
3. 操作元素
   1. 操作元素属性
      1. 　obj.style.display
      2.    getAttribute(名称)、 setAttribute(名称,值)、removeAttribute(名称)
   2. DOM元素灵活查找
      1. 　obj.className =='aa'
   3. 创建DOM元素
      1. 　cDom = createElement（标签名）  创建一个dom节点
      2.    pDom.appendChild(cDom)   插到父元素里面
   4. 插入元素
      1. 　insertBefore(子节点，在谁之前)
   5. 删除dom元素
      1.    pDom.removeChild(元素)
4. 文档碎片（相当于一次性把零散的东西拿来）
   1. 　document.createDocumentFragment()
   2. 　可以提高DOM操作性能（理论上）
5. 表格
   1. 　table.tBodies[0].rows[1].cells[1]    table的tbody的所有行的所有单元格
   2. 　thead tFoot 只有一个
6. 字符串
   1. 　搜索：str.search（'a'）  //找到并且返回字符串出现的位置，没找到返回‘-1’
7. 　事件
   1. 　鼠标：贪吃蛇   onmousemove(ev)   let oEvent = ev||event        oEvent.clientX   oEvent.clientY+scrollTop   offsetTop  offsetLeft
   2. 　键盘：onkeydown onkeyup    有一个键没有keyCode ??    ctrlKey、shiftKey、altKey   keyCode
8. 　默认行为
   1. 　拖拽
      1. 　document.oncontextmenu=function(){return false; //阻止默认事件} 右键菜单
9. 　绑定事件
   
   1. 　obj.onclick = 的方式   obj定义两个function前者会被覆盖  可用attachEvent（addEventListener）同时加好几个函数
   2.    attachEvent(‘onclick’,function(){})   detachEvent(事件名称，函数)   IE   addEventListener('click',function(){},false)   removeEventListener chrome 
   3. 处理兼容  

      1. if(obj.attachEvent){
             可用attachEvent
         }else{
             用addEventListener
         }

      2. ie9以下执行会与绑定的顺序相反，IE9及一上 及其他无此问题
   4. 磁性吸附：当距离小于50时，left = 0
   5. 事件捕获  obj.setCapture()   obj.releaseCapture()   IE
   6. 自定义滚动条
10. ajax
    1. get
       1. 容量小
       2. 安全差
       3. 有缓存（用时间戳）
    2.  post
       1. 容量大（2G）
       2. 更安全
       3. 无缓存
11. 创建ajax
    1. let oAjax = new XMLHttpRequest();  非ie6  //创建ajax对象
    2. let oAjax = new ActiveXObject("Microsoft.XMLHTTP") IE6
    3. 小知识：
       1. 　用没有定义的变量 ---  报错    alert(a)
       2.     用没有定义的属性 ---  undefined    alert(window.a)
       3.     解决兼容  if(window.XMLHttpRequest){}else{}
    4. oAjax.open(请求方式，url(请求地址),同步(false)还是异步(true))  //连接服务器
    5. oAjax.send()   //发送请求

    7. oAjax.onreadyctatechange =  function(){
           if(oAjax.readyState == 4){
              if(aAjax.status == 200){ 
                 oAjax.responesText   //响应文本
              }
       　　}    //浏览器和服务器进行到哪一步 
                  0：（未初始化）还没有调用open()方法
                  1：（载入）已调用send()方法，正在发送请求
                  2：（载入完成）send()方法完成，已收到全部响应内容
                  3：（解析）正在解析响应内容
                  4：（完成）响应内容解析完成，可以在客户端调用了
       }        

        //接受返回信息
12. 面向对象：只关注对象提供的功能，不关注其内部细节
    
    1.  抽象：抽出核心、最主要的特性、跟问题相关的特征抽出来
    2. 封装：看不到里面的东西，用好表面的功能就行
    3. 继承：从父类上继承出一些方法、属性、子类，又有一些自己的特性
       1. 多重继承：
       2. 多态
    4. 变量：自由的，不属于任何   属性：属于一个对象 
    5. 函数：自由的    方法：属于一个对象  
13. 工厂模式：就是一个function
14. new  

    1.         function A(){
                 this.name=1234;
                // return {};
                 }
               A.prototype.getname=function(){
                   console.log(this.name);
                   }
               function CreateObj(){
                  var fn=[].shift.call(arguments);
                  var args=arguments;
                  var obj=new Object();
                  var ret=fn.apply(obj,args);
                  obj.__proto__=fn.prototype;
                  return typeof ret ==='object'?ret:obj;
                  }
           var a=CreateObj(A);
           console.log(a);        

        

       　　
15. call apply bind区别
    1. call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加，这是它们的区别，根据自己的实际情况来选择使用。
16. 类（模子---面包模子）   对象（成品 --- 面包）
17. 
18. json对象的应用
    1. 　命名空间 -- a = {}  b={}
    2.    把同一类放在一起，防止冲突
19. 继承：
20. 系统对象
    1. 本地对象
    2. 内置对象
    3. 宿主对象
       1. 　BOM DOM
    4. 
    5. BOM
       1. 　window.open(url,_self/_blank)
       2.     window.close()  火狐下面必须得是自己开的才可以window.open开的
       3.     window.navigator.userAgent'
       4. 　window.location
       5.     系统对话框：alert confirm prompt
       6.     window对象常用事件 onload onscroll  onresize 
21. js 自定义事件和触发
    1. 　document.createEvent()
    2. 　event.initEvent()
    3.   element.dispatchEvent()
    4. 　

       $(dom).addEvent("alert", function() {
           alert("弹弹弹，弹走鱼尾纹~~");
       });
       
       // 创建
       var evt = document.createEvent("HTMLEvents");
       // 初始化
       evt.initEvent("alert", false, false);
       
       // 触发, 即弹出文字
       dom.dispatchEvent(evt);

       initEvent(eventName, canBubble, preventDefault). 分别表示事件名称，是否可以冒泡，是否阻止事件的默认操作。

    5. dispatchEvent()就是触发执行了，dom.dispatchEvent(eventObject), 参数eventObject表示事件对象，是createEvent()方法返回的创建的Event对象。
22. document.compatMode
    
    1. IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的
    2. 在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。

    3. document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat，对其解释如下：

       BackCompat Standards-compliant mode is not switched on. (Quirks Mode)

       CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

    4. var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
23. arguments.length是实参长度，arguments.callee.length是形参长度，由此可以判断调用时形参长度是否和实参长度一致。

24. function show(){
         
    }
    show() //创建一个临时闭包空间，运行函数里面的代码，this指向是window对象
    
    function Show(){
                
    }
    new Show()  //创建一个被持有句柄的闭包空间，运行函数里面的代码，this指向就是当前这块空间的引用

     

25. ~~ 的用途：将操作数转化为 32 位有符号整数。 ----- 它会损失精度，包括小数和整数部分。

26.  !! 最主要的用途：将操作数转化为布尔类型。
27. 异步操作：
    1. 通常io（ajax获取服务器数据)、用户/浏览器自执行事件（onclick、onload、onkeyup等等）以及定时器（setTimeout、setInterval）都可以算作异步操作
    2. 这里的异步任务并不一定是按照文档定义的顺序推入队列中

    3. //第一个推入队列中
       setTimeout(function(){
         console.log("1");
       },0);
       //第三个推入队列中
       setTimeout(function(){
        console.log("2");
       },1000);
       //第二个推入队列中
       setTimeout(function(){
         console.log("3");
       },0);