jquery-概念

手机移动端
安卓和ios的兼容   
标签的设置  
vue的生命周期、指令、父子兄弟组件传值、vuex、router、路由传值、vue的底层原理、mixin
$nextTick的实现：Promise
MutationObserver
setTimeout

js中有多少种模式
单列模式
**************************************************
数组的操作
shift:删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined
        var a = [1,2,3,4,5];   
         var b = a.shift(); //a:[2,3,4,5] b:1 
unshift:将参数添加到原数组开头，并返回数组的长度
         var a = [1,2,3,4,5];   
         var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5] b:7 
pop:删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined 
         var a = [1,2,3,4,5];   
         var b = a.pop(); //a:[1,2,3,4] b:5 
push:将参数添加到原数组末尾，并返回数组的长度 
          var a = [1,2,3,4,5];   
          var b = a.push(6,7); //a:[1,2,3,4,5,6,7] b:7
concat:返回一个新数组，是将参数添加到原数组中构成的 
          var a = [1,2,3,4,5];   
          var b = a.concat(6,7); //a:[1,2,3,4,5] b:[1,2,3,4,5,6,7] 
splice(start,deleteCount,val1,val2,...):从start位置开始删除deleteCount项，并从该位置起插入val1,val2,... 
           var a = [1,2,3,4,5];   
           var b = a.splice(2,2,7,8,9); //a:[1,2,7,8,9,5] b:[3,4]   
           var b = a.splice(0,1); //同shift   
           a.splice(0,0,-2,-1); var b = a.length; //同unshift   
            var b = a.splice(a.length-1,1); //同pop   
            a.splice(a.length,0,6,7); var b = a.length; //同push 
reverse:将数组反序
             var a = [1,2,3,4,5];   
             var b = a.reverse(); //a:[5,4,3,2,1] b:[5,4,3,2,1]
sort(orderfunction):按指定的参数对数组进行排序
           function compare(value1, value2) {
                        if (value1 < value2) {
                             return -1;
                 } else if (value1 > value2) {
                              return 1;
                 } else {
                               return 0;
                 }
                  }
                   arr2 = [13, 24, 51, 3];
       console.log(arr2.sort(compare)); // [3, 13, 24, 51]
slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组 
              var a = [1,2,3,4,5];   
               var b = a.slice(2,5); //a:[1,2,3,4,5] b:[3,4,5]
join(separator):将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符 
               var a = [1,2,3,4,5];   
                var b = a.join("|"); //a:[1,2,3,4,5] b:"1|2|3|4|5"

indexOf()和 lastIndexOf()
indexOf()：从头开始（匹配值，开始位置）
lastIndexOf：从尾开始（匹配值，开始位置）
forEach()：arr.forEach(function(x, index, a){
                   console.log(x + '|' + index + '|' + (a === arr));
                    });
map():返回操作之后的数组
         var arr = [1, 2, 3, 4, 5];
          var arr2 = arr.map(function(item){
          return item*item;
           });
           console.log(arr2); //[1, 4, 9, 16, 25]
filter:返回过滤的数组
      var arr2 = arr.filter(function(x, index) {
           return index % 3 === 0 || x >= 8;
          }); 
     console.log(arr2); //[1, 4, 7, 8, 9, 10]           
every()：是否数组所以项都满足条件
          var arr3 = arr.every(function(x) {
             return x < 3;
               });
some()：某项满足
reduce()和 reduceRight()：迭代数组，返回最终值
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10（初始值）);

var value = obj[key]; > for ( ; ; ) > for ( in )

************************************************** 
ajax的状态值
if(ajax.readyState == 4 && ajax.status == 200) 
在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并不是一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是。
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了

跨域：jsonp、Access-Control-Allow-Origin  document.domain（设置二级域名相同）postMessage

//前端路由
单页面应用：url变化引起UI更新（无需刷新页面）
hash(#及以后部分)：通过hashchange
history:浏览器的前进后退触发popstate事件（但是pushstate/replaceState或<a>改变url不会触发，需要监听这些事件）

node  启服务  node  app.js(配置端口号)   链接数据库 （const pool = mysql.createPool($util.extend({}, $conf.mysql));）

事件冒泡 （blur、focus、load、unload除外）
div -> body -> html -> document 
子元素和父元素两者都有点击事件，如果点击子元素，那么父元素也会执行

阻止冒泡
   child.onclick = function () {
 
     if(event && event.stopPropagation){ 
          // w3c标准 阻止冒泡机制
      
     event.stopPropagation();
    
      }else{
     // IE系列 IE 678
 
          event.cancelBubble = true;
       
       }
     
    alert("点击了按钮");
   
      };

 事件捕获（冒泡反过来）

<div id="A" style="width:300px; height:300px; background:red;position:relative;">
 <div id="B" style="width:200px;height:200px; background:green;position:relative;top:50px;margin:auto;">
 <div id="C" style="width:100px;height:100px; background:blue;position:relative;top:50px;margin:auto;"></div> 
 </div>
</div>
 var A = document.getElementById("A"); 
 var B = document.getElementById("B"); 
 var C = document.getElementById("C"); 
 // 目标（目标阶段的处理函数，先注册先执行）
 C.addEventListener('click',function(){alert("Ct");},true);
 C.addEventListener('click',function(){alert("Cf");},false);
 // 事件冒泡
 A.addEventListener('click',function(){alert("Af");},false);
 B.addEventListener('click',function(){alert("Bf");},false);
 // 事件捕获
 A.addEventListener('click',function(){alert("At");},true);
 B.addEventListener('click',function(){alert("Bt");},true); 
</script>
//当点击C （子元素）时（蓝色），输出At Bt Ct Cf Bf Af

js创建对象
1.json创建
2.工厂模式（不能知道返回的类型）

 
function createStudent(name,sex,grade){       
 var o = new Object();
 o.name = name;
 o.sex = sex;
 o.grade = grade;
 
 o.sayName = function(){
 console.log(this.name);
 }
 return o;
}
var s1 = createStudent('Claiyre','famale',1);
 工厂模式就是将创建对象的语句放在一个函数里，通过传入参数来创建特定对象，最后返回创建的对象。
3.构造函数
function Student(name,sex,grade){       
 this.name = name;
 this.sex = sex;

Student_1.prototype.name = 'Claiyre';（通过原型赋值避免浪费）
 this.grade = grade;
 this.sayName = function(){
 console.log(this.name);
 }
}
var s2 = new Student('孙悟空'，'male',2);

*************************************************
兼容性

*************************************************
JS
1.内置类型 
    内置类型包含6中基本类型（string、number、null、undefined、symbol(不能new，类似于string，独一的值)、boolean）和对象

*************************************************
箭头函数 
1.匿名函数的简写
2.箭头函数中的this对象（根据词法作用域）指向外层的obj（以前的hack写法 var_this=this不需要）
3.箭头函数中的this已经根据词法作用域绑定，所以call()、apply()无法进行绑定（第一个参数this无效）
   面向对象中的继承：子类继承父类的方法和属性
   通过函数名调用方法将函数中的this指向某个对象
  　 ② 使用call/apply/binb.
                1：定义父类
                    funtion Parent(””,””,””){}
                2：定义子类
                    function Son(””,””,””){}
                3：在子类中通过call方法/apply/binb方法去调用父类。
                    function Son(){
                        Parent.call(this,””,””,””);// Parent.apply(this,[””,””,””]);//Parent.binb(this)(””,””,””);
                   
                    }

                4.使用for循环赋值
   
4.箭头函数中的this指向定义的那个对象，而不是使用时所在的那个对象
5.不能当做构造函数使用（new一个对象进行实例化，否则会抛出错误）
6、不可以使用arguments对象，该对象在函数体内不存在，如果要用的话，可以用rest参数代替；
7、不可以使用yield命令，箭头函数不能用作Generator函数；

*************************************************

    

*************************************************
*************************************************
浏览器
1.事件触发阶段
         document.getElementById("dddd").addEventListener("tap", function() {

            }，false/true);
         a.事件捕获阶段：当目标元素触发事件，从顶级对象发出事件流找到目标元素
         b.事件目标处理函数：函数的处理
         c.事件冒泡:从目标元素往回寻找节点绑定的同名事件的过程

2.跨域
 a.jsonp
  function jsonp(url, jsonpCallback, success) {
        let script = document.createElement('script')
         script.src = url
         script.async = true
         script.type = 'text/javascript'
     window[jsonpCallback] = function(data) {
         success && success(data)
      }
       document.body.appendChild(script)
      }
   jsonp('http://xxx', 'callback', function(value) {
            console.log(value)
     })
 b.CORS        
  服务端设置Access-Control-Allow-Origin
 c.document.domain
   适用于父域名相同
   打开id.qq.com，f12打开控制台，window.open页面: www.qq.com，同样访问返回的window对象的document属性，
   手动设置一下id.qq.com页面的document.domain，设置为qq.com
 d.postMessage
   // 发送消息端
   window.parent.postMessage('message', 'http://test.com')
// 接收消息端
    var mc = new MessageChannel()
    mc.addEventListener('message', event => {
    var origin = event.origin || event.originalEvent.origin
    if (origin === 'http://test.com') {
    console.log('验证通过')
    }
  })
3.存储

  
5.渲染部分
      a.处理html创建DOM
      b.处理CSS创建CSSOM（会阻塞渲染，保持层级扁平：少目录结构，少模块层次）
      c.将DOM和CSSOM合并生成完整的渲染树
      d.根据渲染树计算每个节点的位置
      e.通过GPU(图形处理器)渲染页面显示在页面上
   5-1：load:DOM、CSS、JS全部加载完毕
        DOMContentLoaded：初始的HTML加载完毕
   5-2：减少重绘（不影响布局：颜色）和回流（改变布局）
      a.使用visibility代替display
      b.transform: translate(50px,100px); 代替top
      c.不要把DO节点的很属性值放在循环当中
      d.不要使用table布局
      e.不要使用动画
6.性能

*************************************************
*************************************************
*************************************************
*************************************************