从前端小白到中高级前端需要掌握的技能总结

事件模型

js中有两种事件,DOM0和DOM2.

  • DOM0
    DOM0事件很简单,就是在dom上绑定事件,代码如下
document.getElementById('click').onclick = function(){
  console.log('123')
}

解除绑定很简单,赋值为null即可。

document.getElementById('click').onclick = null

但是这种事件虽然在所有浏览器都能运行,但是有个很明显的缺陷,就是不能绑定多个相同事件,如果绑定了多个相同事件,后面的会覆盖前面的

  • DOM2
    第二种就是事件捕获和事件冒泡。代码上来说就是注册事件是addEventListener,解除绑定是removeEventListener。阻止冒泡的方法是stopPropagation。

声明提升

其实js中的声明提升很简单,就是指变量声明提升和函数的声明提升。声明提示的意思就是把变量或者函数在编译的时候提升到环境的顶部,并赋值undefined

  • 变量声明

变量声明,js会把变量声明分为两个部分,一个是声明操作(var a),一个是赋值操作(a=1),这里的声明提升针对的是声明操作,赋值操作还是在原来的地方等待执行。

  • 函数声明

定义函数的方式有两种,函数声明和函数表达式
在js编译时,函数声明会把函数声明和整个函数体都提升到环境的顶部,所以可以在函数声明前调用这个函数,如以下代码

foo()
function foo(){
    console.log(111)
}
  • 声明的顺序

函数声明是优先于变量声明的
1.js编译时,会把所有的函数声明提到顶部,如果有重复的进行覆盖
2.把所有的变量提到顶部,并赋值undefined,如果有重复的进行覆盖

继承

js继承的几种方法
1.原型链继承,将父类的实例作为子类的原型

function Cat(){}
Cat.prototype = New Animal()

2.构造继承,利用父元素的构造函数来增强子元素的实例,其实就是把父类的实例属性给了子类

function Cat(){
Animal.call(this);
}

3.实例继承,父类的实例增加属性作为子类的实例返回

function Cat(){
  var instance = new Animal();
  intance.name = 'aaa';
  return instance;
}

4.拷贝继承,无法获取父类不可枚举的方法(不可枚举方法,不能使用for in 访问到)

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

5.组合继承,通过调用父类,实现了继承父类的属性和保留传参的优点,父类的实例作为子类的原型,实现了函数的复用

unction Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;//组合继承也是需要修复构造函数指向的。

6.寄生组合继承,通过第三方的一个空类,来继承父类的函数复用,父类的属性的继承通过在子类中调用父类实现。
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
(function(){
// 创建一个没有实例方法的类
var Super = function(){};
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
})();
参考https://www.cnblogs.com/humin...

跨域

跨域,是指不能执行其他网站的脚本,是因为浏览器的同源策略(域名,协议,端口均相同)引起的,是浏览器对js实施的安全限制。
限制:
1.cookie,localstorage,indexDB无法读取
2.DOM和js对象无法获取
3.ajax请求发不出去
解决办法:
1.jsonp 但是只限于get请求
1.1 通过动态创建script标签,请求一个带参数的网址实现跨域

var script = document.createElement('script');
script.src = 'http://www.aaa.com/username=aaaa&callback=cb';
document.body.appendChild(script);
function cb(res){}

1.2 jquery的ajax支持jsonp

$.ajax({
    url:'http://www.aaa.com',
    type:'get',
    dataType:'json',
    jsonCallback:'cb',
    data:{
        username:'111'
    }
})

2.document.domain+iframe,但是要求主域名相同
3.window.name + iframe 跨域
4.location.hash + iframe 跨域
5.postMessage
1.html

<iframe id="iframe" src="http://www.neal.cn/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向neal传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.neal.cn');
    };

    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from neal ---> ' + e.data);
    }, false);
</script>

2.html(另一端口)

script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from nealyang ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;

            // 处理后再发回nealyang
            window.parent.postMessage(JSON.stringify(data), 'http://www.nealyang.cn');
        }
    }, false);
</script>

6.跨域资源共享CORS

相关文章
相关标签/搜索