js编写的可维护与性能优化

2018-11-10 admin

可维护

解耦HTML/JavaScript

1、采用引入`js`文件的方式取代在`html`页面写`js`代码
2、避免在js中创建大量`html`
(1)当`js`用于插入数据时,尽量不要直接插入标记。一般可以在页面中直接包含并隐藏标记,然后等到整个页面渲染好之后,就可以用`js`显示该标记,而非生成它
(2)也可以通过`Ajax`请求获得更多要显示的`html`,这个方法可以让同样的渲染层(`PHP、JSP、Ruby`等等)来输出标记,而不是直接嵌在`js`中

解耦CSS/JavaScript

尽量不要在js中更改样式,而是采用动态更改样式类,从而做到对于样式的问题应只查看CSS文件来解决,例:

element.style.color = 'red';
element.style.backgroundColor = 'blue';

更改后:
element.className = 'edit';

3、解耦应用逻辑/事件处理程序

每个web应用一般都有相当多的事件处理程序,监听这无数不同的事件,然而,很少有能仔细得将应用逻辑从事件处理程序中分离的,如下:

function handleKeyPress (event) {
    if(event.keyCode == 1){
        let target = event;
        let value = 5 * parseInt(target.value);
        if(value > 10){
            document.getElementById('tip-msg').style.display = 'block';
        }
    }
}

这个事件处理程序处理包含了应用逻辑,还进行了事件处理,这种方式的问题有其双重性

(1)、处理通过事件之外就没有办法执行应用逻辑
(2)、调试困难,如果没有发生预想的结果,并不知道是事件没被调用还是应用逻辑失败
(3)、如果后续的事件需要执行相同的应用逻辑,那么就必须复制功能代码或将代码抽到一个单独的函数中所以就好进行两者的解耦,即一个事件处理程序应该从事件对象中提取相关信息,并将这些信息传送到处理应用逻辑的某个方法中,前面例子重写如下:

function validateValue (value) {
    value = 5 * parseInt(value);
    if(value > 10){
        document.getElementById('tip-msg').style.display = 'block';
    }
}

function handleKeyPress (event) {
    if(event.keyCode == 13){
        let target = event;
        validateValue(target.value);
    }
}

从而使validateValue()中没有任何东西会依赖于任何事件处理程序逻辑,他只接收一个值,并根据该值进行其他处理 好处:如果事件最初只有鼠标事件触发,那么现在只需少量修改就可以实现按键触发

避免全局变量

最多创建一个全局变量,让其他对象和函数存在其中,如:

//两个全局变量——避免!!
let name= 'bad';
function sayName() {
    alert(name);
}    

//一个全局变量——推荐
let good = {
    name: 'nice',
    sayName: function () {
        alert(this.name);
    }
}

多人协作开发可以使用命名空间

//创建全局对象
let wrox = {};

//为Tony创建命名空间
wrox.Tony = {};

//为Tony(可以以人名划分)创建方法
wrox.Tony.sayName = function () {
    ...
};

上述例子,wrox是全局变量,其他命名空间在此之上创建,只要所有人都按这样写,那么就不用当心不同开发者创建相同的方法等,因为它存在于不同的命名空间

避免与null进行比较

应该让条件与预想的类型进行比较而不是与null

//bad
function sortArray(values) {
    if(values != null){
        ...
    }
}
//good
function sortArray(values) {
    if(values instanceof Array){
        ...
    }    
}

抽离常量

const constants = {
    INVALID_VALUE_MSG:'Invalid value!',
    INVALID_VALUE_URL:'/errors/invalid.php'
}

性能优化

因为访问全局变量要比访问局部变量慢,因为要遍历作用域链,所以减少花费在作用域链上的时间,就可以增加脚本的整体新能

避免全局查找

//bad
function updateUI () {
    let imgs = document.getElementsByTagName('img');
    for(let i=0, len=imgs.length; i<len; i++){
        imgs[i].title = document.title + 'imge' + i;
    }
    let msg = document.getElementById('msg');
    msg.innerHTML = 'Upadate complete.';
}
//good
function updateUI () {
    let doc = document;
    let imgs = doc.getElementByTagName('img');
    for(let i=0, len=imgs.length; i<len; i++){
        imgs[i].title = doc.title + 'imge' + i;
    }
    let msg = doc.getElementById('msg');
    msg.innerHTML = 'Upadate complete.';
}

上面将document对象保存在doc变量中,然后替换原来的document,与原来相比,只需进行一次全局查找,速度肯定更快

循环优化

循环优化基本步骤如下:

1、减值迭代——大多数循环使用一个从0开始、增加到某个特定值的迭代器。在很多情况下,从最大值开始,在循环中的迭代器更加高效。
2、简化终止条件——由于每次循环过程都会计算终止条件,所以必须保证它尽可能快。也就是说避免属性查找或者其他O(n)的操作。
3、简化循环体——循环体是执行最多的,所以要确保其被最大限地优化,确保没有某些可以被很容易移除循环的密集计算。
4、使用后侧试循环——最常用的`for`循环和`while`循环都是前测试循环。而入`do—while`这种后侧试循环,可以避免最初终止条件的计算
//基本for循环
for(let i=0;i<values.lenght;i++){
    process(values[i]);
}
//将终止条件从values.length的O(n)调用简化成了0的O(1)调用
for(let i=values.length -1; i>=0; i--){
    process(values[i]);
}
//再进行改造成后测试循环,此处主要的优化是将终止条件和自减操作符组合成了单个语句
let i = values.length - 1;
if(i> -1){
    do{
        process(valeus[i]);
    }while(--i>=0)
}

最小语句数

1、多个声明变量

//bad
let count = 5;
let color = 'blue';
let values = [1,2,3];
let now = new Date();
//good
let count = 5,
    color = 'blue',
    values = [1,2,3],
    now = new Date();

2、插入迭代值

//bad
let name = values[i];
i++;
//good
let name = values[i++];

3、使用数组和对象字面量

//bad
let values = new Array();
values[0] = 123;
values[1] = 456;
values[2] = 789;
//bad
let person = new Object();
person.name = 'Tony';
person.age = 18;
person.sayName = function () {
    alert(this.name);
}

//good
let values = [123,456,789];
let person = {
    name: 'Tony',
    age: 18,
    sayName: function () {
        alert(this.name);
    }
}

原文链接:https://segmentfault.com/a/1190000016972662

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-45089.html

文章标题:js编写的可维护与性能优化

相关文章
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
回到顶部