Web前端领域，什么样的实践，才是好的处理方式？在《JavaScript高级程序设计》一书中，从三个不同的方面来描述最佳实践：
1、可维护性
什么是可维护性的代码？那么它可能需要做到：
可理解性——其他人可接手代码并理解其意图
直观性——代码中的东西一看就能明白，不管其操作过程多么复杂
可适应性——代码一种数据上的变化不要求重写的方法
可扩展性——代码在架构上考虑未来对核心功能的扩展
可调式性——当有地方出错时，代码给予足够的提示信息来确定问题所在
代码约定
<1>、可读性
让自己的代码保证良好的缩进是有必要的
给自己的代码写注释是有必要的
<2>、变量和函数命名
命名是提高代码可读性的非常重要的一环
命名包括变量名、函数名、class名等等。
变量名应该是名词，函数名应该是动词开始。
函数也可分为逻辑功能以及事件。
<3>、变量类型透明
每申明一个变量，应该给这个变量一个初始值。
var str = '';//代表string类型
var num = 0;//代表number类型
var bool = false;//代表boolean类型
松散耦合
<1>、解耦 HTML/JavaScript
一般而言，JavaScript的强大能力，使得它能够操作DOM，比如它能够随意的创建DOM元素、随意的添加DOM元素到document中。但是这样的代码不仅性能上存在问题，而且可读性非常差！！！
我们要有的一个思想就是，HTML用来表示界面的内容，而JavaScript只用来定义行为。
<2>、解耦 CSS/JavaScript
JavaScript同样能用来操作CSS，可是千万不要这样做！！除非你是要写运行函数。
<3>、解耦应用逻辑和事件处理程序
操作dom，我们使用的是事件函数
作为Js，有另外一部分功能是和DOM操作不相关的逻辑，应该单独隔离出来，封装成函数。
编程实践
<1>、尊重对象所有权
尽量的不要改变原生对象的方法，如toString()、push()、sort()等等，改变或者重写的后果，就是合作开发的时候，别人不知道这个方法已经改变，可能就会出错。
一定不要修改别人的对象，如果这个对象不是你创建并且维护的，那么你就只有使用的权利。
<2>、避免全局量
这个很好理解，全局变量的过多使用，很可能在合作开发的时候造成冲突。如果需要使用，那就用尽可能使用较少的全局变量。
//使用一个obj可以表示三个变量的功能。
var obj = {
a,
b,
c,
}
<3>、使用常量
你定义一个东西，一定要想，这个东西到底后面会不是被改变，如果不会被改变的话，那就尽量的把它定义成常量，作为一个公共的东西提取出来。
2、保证代码性能
保证自己的代码性能，是每个web开发人员的基本素养，虽然这方面的东西可量化的地方不多，但还是有一些比较好的编程模式值得去借鉴：
注意作用域
<1>、避免全局查找
使用全局变量的函数，一定要比使用局部变量的函数的开销更大，因为要涉及到作用域链上的查找。
function updateUI(){
var imgs = document.getElementsByTagName("img");
var obox = document.getElementById("box");
}
这样的函数，调用了两次document，也就是自己在作用域链上查找了两次。
function updateUI(){
var doc = document;//这里只调用一次document。
var imgs = doc.getElementsByTagName("img");
var obox = doc.getElementById("box");
}
避免多次的全局作用域查找，在编程实践中，是很有必要的。
<2>、避免使用with语句
with语句的使用，会有额外的作用域链的开销。
选择正确方法
<1>、避免不必要的属性查找
多层的属性查找的代价会很大，比如这个的示例：
var query = window.location.href.substring(window.location.href.indexof("?"));
两次使用window.location.href，这样还不如这么写：
var url = window.location.href;
var query = url.substring(url.indexof("?"));
这样的方式，性能明显更高。
<2>、优化循环
大多数循环是从0开始，但是很多情况下，从最大值开始，进行减值迭代的效果明显更高。
var list = document.getElementsByTagName('li');
for(var i = 0; i < list.length; i++){
//code
}
上面的for循环每次都要重新计算list的长度，这就存在性能问题，所以在for循环中，我们有一种说法是——优化终止条件。
下面的写法可能会好一点：
var list = document.getElementsByTagName('li');
for(var i = 0,len = list.length; i < len; i++){
//code
}
有时候，一些循环是没有必要的，我们增加一些if判断，可能要减少很多无用操作。
<3>、避免双重解释
JavaScript代码想解析JavaScript的时候会存在双重解释惩罚。
当使用eval()、Function()构造函数、setTimeout()的时候，传入一个字符串，都会发生这种情况。
原因就是JavaScript解析这些字符串是需要重新开启一个解析器来解析新的代码。（这是不容忽视的开销）。
eval("alert('hello world!')");//一定要避免
最小化语句数
var i = 0,j,k;
var i = 0；
var j；
var k；
这两个申明变量的方式相比，第一是一个申明变量的语句，第二个是三个申明变量的语句。
优化DOM交互
<1>、最小化现场更新
大量的dom操作是造成页面性能的最大帮凶，比如多次向页面添加元素。特别是在for循环中！！！
使用文档片段来构建DOM结构，可能是一个好方法。
var fragment = document.createDocumentFragment();
for(var i = 0; i < 10; i++){
item = document.createElement('li');
fragment.appendChild(item);
item.appendChild(document.createTextNode('Item'+i));
}
list.appendChild(fragment);
<2>、使用innerHTML
把innerHTML设置为某个值的时候，后台会自动创建一个HTML解析器，然后使用内部的DOM调用来创建DOM结构。
<3>、使用事件代理
一个ul列表，给添加一个点击事件，尽量别for循环添加。使用事件代理的方式，添加到ul上性能会好很多。
原文：https://blog.csdn.net/mapbar_front/article/details/78635412