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.性能

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值