笔记：2019年5月

ゝ一纸荒年。 2022-02-02 01:13 366阅读 0赞

# 关于更好地写出代码 #

## 可维护性 ##

1.  划分好的层次

html，css，javascript不应该紧密耦合。  
使得显示问题的唯一来源应该是css，行为问题的唯一来源应该是javascript。

1.  应用和业务逻辑之间松散耦合的几条原则：

（1）勿将event对象传给其他方法；只传来自event对象中所需的数据  
（2）任何可以在应用层面的动作都应该可以在不执行任何事件处理程序的情况下进行  
（3）任何时间处理程序都应该处理事件，然后将处理转交给应用逻辑

1.  尊重对象所有权

（1）不要为实例或原型添加属性  
（2）不要为实例或原型添加方法  
（3）不要重定义已存在的方法

1.  避免与null进行比较

代码中的null比较越少，就越容易确定代码的目的，并消除不必要的错误  
如果看到了与null比较的代码，尝试使用一下技术替换：  
（1）如果值应为一个引用类型，使用instanceof 操作符检查其构造函数  
（2）如果值应为一个基本类型，使用typeof检查其类型  
（3）如果是希望对象包含某个特定的方法名，则使用typeof操作符确保指定名字的方法存在于对象上

## 性能 ##

1.  避免全局查找

将一个函数中会用到多次的对象保存为局部对象，查找局部对象比在作用域链上查找，速度快的多

1.  避免with语句

with会创建自己的作用域，因此会增加其中执行的代码的作用域链的长度，与（1）同理，会造成访问变量速度变慢。试使用with的地方，大多数情况下，可以用局部变量完成相同的事情而不引入新的作用域

1.  避免不必要的属性查找

对于多次用到的属性查找，应该用局部变量来保存这个值，可以大大减少属性查找。

1.  优化循环  
    （1）减值迭代  
    大多数循环使用一个从0开始、增加到某个特定值的迭代器。在很多情况下，从最大值开始，在循环中不断减值的迭代器更加高效  
    （2）简化终止条件  
    由于每次循环过程都会计算终止条件，所有必须保证它尽可能快。也就是说避免属性查找或其他复杂的操作  
    （3）简化循环体  
    循环体是执行最多的，所有要确保其被最大限度地优化。确保没有某些可以被很容易移出循环的密集计算  
    （4）使用后测试循环  
    最常用for循环和while环迅都是前测试循环。而如do-while这种后测试循环，可以避免最初终止条件的计算，因此运行更快

for(var i=0;i<values.length;i++){
    	process(values[i]);
    }

优化

for(var i=values.length-1;i>=0;i--){
    	process(values[i]);
    }

更优化

var i=values.length-1;
    if(i>-1){
    	do{
    		provess(values[i]);
    	}while(--i>=0);
    }

注意：使用“后测试”循环时必须确保要处理的值至少有一个。空数组会导致多余的一次循环而“前测试”循环则可以避免  
（5）清除循环  
当循环次数是确定的，消除循环而采用多次函数调用速度更快。

provess（values[0]);
    provess（values[1]);
    provess（values[2]);

（6）避免出现需要按照JavaScript解释的字符串  
例如避免出现：

setTimeout("alert('Hello world !')",500);

修正为:

setTimeout(function(){
    	alert('Hello world !');
    },500)

1.  其他性能注意事项  
    （1）原生方法较快  
    原生方法是用诸如c/c++之类的编译型语言写出来的，所以要比js快很多  
    （2）switch语句较快  
    如果有一系列复杂的if-else语句，可以转换成单个switch语句则可以更到更快的代码，还可以通过将case语句按照最可能的到最不可能的顺序进行组织，来进一步优化switch语句  
    （3）位运算符较快  
    诸如取模，逻辑与和逻辑或都可以考虑用位运算替代。  
    位运算操作要比任何布尔运算或算数运算快。

## 闭包中的this指向 ##

问题出现：在vue项目中写了一个闭包，然后在闭包里的this竟然是undefined。但在js文件中，尝试闭包，this指向window。  
解释：this是在在函数执行上下文编译阶段确定的，也就是说this是在调用时确定，应该明确的是，this指向的是一个具体的对象。  
例如：obj.function1(),函数调用时的执行环境所属对象是obj，