手记

高效web之JS优化

来自于高效前端

减少代码耦合的手段:

1、 函数单一原则(一个函数表达一句话,写函数之前先想一想这个功能,我如何用一句话表示)
2、避免全局耦合,减少全局变量,变量跨文件最不可取。
2.1在HTML定义全局变量
2.2在模块文件中JS文件中定义变量
3、避免在 js里面修改style样式可以通过动态添加相应的class名字,同时可以通过更改父元素的class来修改兄弟或者子元素的样式。
4、抽象级别:一个函数一个功能-》模块抽象-》插件抽象(一般多是一个对象),提取公有分离差异部分。
5、封装成类:就是说在一个数据众多,可以通过传递参数初始化对象需要的变量大部分插件抽象原则:生成对象->初始化参数->调用功能函数(一般都是对DOM的一些操作)
策略模式:分析一个页面首先会发现结构相同只有某些地方文案不同,所以可以抽象成函数找到对应的不同type传递给HTML模板渲染的函数。根据不同的策略执行不同的东西,这样就是策略模式我们可以定义很多策略,然后根据不同的策略找到集合中的单一策略执行。

var PopCallback = {
    showBig: function(){console.log('big')},
    showSmall: function(){console.log('small')},
    showFast: function(){console.log('fas')}
}

然后我们可以引用var callback = require(‘data.js’);
在执行的里面决定 if(big){callback.big()}这就是策略模式,便于扩展,当然可以

if(typeof callback[策略] === 'function') {
       callback[策略] ()
}

好处在于不同的策略可以调用不同的函数,代码对外封闭不用就可以不调用。
访问者模式:
事件监听就是一个访问者模式:
这个就是我们的观察者设计模式:

function Input(inputDom) {
    this.visitors = {        'click': [],        // 把我们需要的click事件都存储在这个里面
        'change': [],        // 把我们的需要的change事件都存储在change里面
        'special': []        // 自定义事件存储在里面
    }    this.inputDom = inputDom;
}// 提供一个对外访问的接口Input.prototype.on = function(eventType, callback) {
    if(this.visitors[eventType]) {        this.visitors[eventType].push(callback);
    }
}// 提供一个删除接口Input.prototype.off = function(eventType, callback) {
    if(this.visitors[eventType].indexOf(callback) !== 'undefined') {    var index  = this.visitors[eventType].indexOf(callback);        this.visitors[eventType].splice(index, 1);
    }
}// 提供一个触发事件的接口Input.prototype.trigger = function(eventType,event) {
    this.visitors[eventType].foreach(item => {
        item(event);
    });
}// 此时已经放入了var input = new Input();
input.on('click', function(e) {
    console.log('1');
});
input.trigger('click');// 已经触发这个事件,其他访问click事件的函数就会接受到消息执行自己的函数,相当于下发通知,我们甚至可以在里面进行一个全局数据,然后访问者进行访问来修改数据,或者访问数据,对外暴露。模块和组件间的通信,当一个模块trigger事件,另一个模块监听事件就是使用a.on('xxx', function(E){})另一个trigger这个回调就会被执行。达到模块独立。

指明变量类型

在定义变量的时候告诉js解释器,变量的类型给一个初始值

let str = '';
    num  = 0;
    obj = {};    // 定义的变量不要修改变量类型因为解析成汇编语言的时候会使得增加额外的负担,如果更该类型的话建议使用新的变量。
    let new  = num + 'qqq';    // 这是最好的方式

函数返回类型确定

// 使用返回明确的类型告诉使用者返回-1表示不合法,类型确定减少解释器工作,虽然不返回默认是undefinedfunction showResult(){
 if(a === 0 ) {      return -1;
  } else {      return 1
  }

代码减少在全局作用域里面

// 这一点我们可以使用一些立即执行函数一个大函数里面有一些立即执行函数,然后返回一些函数,减少了全局变量,闭包容易内存泄漏首先在JS中不存在块级作用域只有函数作用域,所以我们的运行的时候查找变量就是由内到外浪费性能。最好的是放在函数内部保存,作用于由内到外最后在window上,缓存变量尤其是window.xx可以达到查找快于全局变量123

闭包的正确使用

// 在一些时候闭包确实可以实现缓存变量不过做好的方式可以把缓存的变量给作为参数传递给内部的函数这样既可以防止出现查找到上一级,因为直接就是一个参数function out(){
    var count = 0;    function in(count) {
     count = count + 1;
     }     return in(count)
}//减少作用域的查找节约性能

常量大写

原文出处

0人推荐
随时随地看视频
慕课网APP