Js代码优化

Js代码优化

　　松耦合：

　　　　1.将JS从CSS中抽离：不要使用CSS表达式

　　　　2.将CSS从JS中抽离：通过JS修改CSS样式时，使用className或classList，不要逐条修改style样式　　　　　

　　　　3.将JS从HTML中抽离：从JS文件放入外置文件中

　　　　4.将HTML从JS中抽离：不要在innerHTML中拼接DOM结构，而是使用字符串模板，如handlerbars

　　全局变量：

　　　　1.零全局变量   实现方法是使用一个立即调用函数IIFE并将所有脚本放置其中

(function(){
  var doc = win.document;
})(window);

　　　　这种模式的使用场景有限，只要代码需要被其他的代码所依赖，或者需要在运行中被不断扩展或修改，就不能使用这种方式　　　　

　　　　2.单全局变量和命名空间

　　　　依赖尽可能少的全局变量，即只创建一个全局变量，使用单变量模式，如YUI或jQuery

　　　　单全局变量，即所创建的这个唯一全局对象名是独一无二的，并将所有的功能代码都挂载到这个全局对象上。因此，每个可能的全局变量，都成为唯一全局变量的属性，从而不会创建多个全局变量

　　　　命名空间是简单的通过全局对象的单一属性表示的功能性分组。比如Y.DOM下的所有方法都是和DOM操作相关的，Y.Event下的所有方法都是和事件相关的。常见的约定是每个文件中都通过新的全局对象来声明自己的命名空间

　　　　3.使用模块

　　　　模块是一种通用的功能片段，它并没有创建新的全局变量或命名空间。相反，所有的这些代码都存放于一个表示执行一个任务或发布一个接口的单函数中。可以用一个名称来表示这个模块，同样这个模块可以依赖其他模块

　　事件处理：

　　　　1、隔离应用逻辑

　　　　将应用逻辑从所有事件处理程序中抽离出来是一种最佳实践，将应用逻辑和事件处理的代码拆分开来

　　　　2.不要分发事件对象

　　　　应用逻辑不应当依赖于event对象来正确完成功能，方法接口应该表明哪些数据是必要的。代码不清晰就会导致bug。最好的办法是让事件处理程序使用event对象来处理事件，然后拿到所有需要的数据传给应用逻辑

　　配置数据：

　　　　代码无非是定义一些指令的集合让计算机来执行。我们常常将数据传入计算机，由指令对数据进行操作，并最终产生一个结果。当不得不修改数据时，可能会带来一些不必要的风险。应当将关键数据从代码中抽离出来 

　　选择器优化：

　　　　将选择器选择到的元素作为对象的静态属性集中到一个地方统一管理

　　函数优化：

　　　　1、避免出现超大函数

　　　　2、独立出来的函数有助于代码复用

　　　　3、独立出来的函数更容易被覆写

　　　　4、独立出来的函数如果拥有一个良好的命名，它本身就起到了注释的作用

　　条件优化：

　　　　如果一个函数体内有一些条件分支语句，而这些条件分支语句内部散布了一些重复的代码，那么就有必要进行合并去重工作。

　　循环优化：

　　　　在函数体内，如果有些代码实际上负责的是一些重复性的工作，那么合理利用循环不仅可以完成同样的功能，还可以使代码量更少。

标签：应用逻辑,函数,Js,代码,抽离,JS,代码优化,全局变量
来源： https://www.cnblogs.com/yxkNotes/p/13936898.html