js红宝石 第二十八章-最佳实践

JS的最佳实践可以分为几类,用于开发的不同流程

28.1 可维护性

编写可维护的代码非常重要,因为大多数开发者需要去维护别人写的代码

28.1.1 可维护性的代码

容易理解 符合常识 容易配置 容易扩展 容易调试

28.1.2 编码规范

1.可读性(注释)

函数和方法要用注释描述其用途

大型代码块应该在块前描述用途

复杂的代码

黑科技

2.变量和函数名

变量名应该是名词

函数名应该从动词开始

对变量和函数都使用符合逻辑的名称

变量,函数方法应该用小写字母开头,用驼峰命名法

名称尽量使用描述性的词汇,不要过于永昌

3.变量类型透明化

通过初始化表明变量类型

匈牙利表示法(在变量前面加一个表示类型的字母) 现在几乎不用了

let bFound;    //boolean
let iCount;    //int
let sName;    //string

使用类型注释符在变量后面表明数据类型,但是不能使用多行注释了

let fount /*:boolean*/ = false;
let count /*:int*/ = 10;

28.1.3 松散耦合

只要应用程序在某一个部分对另一个部分依赖的过于紧密,代码就会变成紧密耦合,难以维护

典型的问题是在一个对象中直接引用另一个对象,这样子可能要一起修改

1.解耦HTML/JavaScript

HTML是数据,JavaScript是行为

它们中的一些交互方式会把两者紧密耦合

例如把JS直接嵌套在HTML中

在紧密耦合时,不能第一时间确定报错来自谁,降低代码的可维护性

应该避免在JS中创建大量HTML

HTML的渲染应该尽量和JavaScript分开

2.解耦CSS/JavaScript

JS和CSS紧密关联,由于他们都构建在HTML上

最常见的紧密耦合就是在使用JavaScript修改个别样式

虽然不能完全解耦,但是可用 修改CSS类名 的方式让耦合变得松散

JS应该只负责修改元素的类名而不修改元素的样式

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

每个Web应用程序中会有大量事件处理程序在监听各种事件,但是很难真正做到应用程序逻辑和事件处理程序的分离

更好的做法是让应用程序逻辑和事件处理程序分离.让事件处理程序专注于event对象的相关信息,让后吧这些信息传递给应用程序逻辑的某些方法

在解耦时要注意的点:

不要把event对象传递给其他方法,而是只传递event对象中的重要信息

应用程序中每个程序在没有事件处理程序时都可以执行

事件处理程序应该处理事件,而把后续处理交给应用程序逻辑

28.1.4 编码惯例

1.遵循对象所有权

因为JS几乎没有限制,所以开发者需要限制自己

不要修改不属于你自己的对象:

不要给原型或实例添加属性

不要给原型或实例添加方法

不要重定义已有的方法

可用按照如下方法给对象添加新功能:

创建包含想要功能的新对象,用它和别人交互

创建新自定义类型继承本来想要修改的类型,给自定义类型添加新功能

2.不声明全局变量

最多可以创建一个全局变量,作为其他对象和函数的命名空间

全局对象可以拓展为命名空间,其他对象包含在这里面

    // 创建全局对象
    var Wrox = {};

    // 为这本书创建命名空间
    Wrox.ProJS = {};

    // 添加其他对象
    Wrox.ProJS.EventUtil = { ... };
    Wrox.ProJS.CookieUtil = { ... };

只要每个人都遵循这个模式,就不用担心会覆盖这里的方法

3.不要比较null

对null进行比较可能会出现意想不到的错误

要比较null,可以使用下列某种技术替换它:

值是引用类型,使用instanceos检查其构造函数

如果值是原始类型,使用typeof检查其类型

如果值是特定方法名的对象,则使用typeof操作符确保对象上存在给定名字的方法

4.使用常量

依赖常量的目的是从应用程序逻辑中分离数据,以便修改数据时不会发生错误

需要提取的数据:

重复出现的值

用户界面字符串

URL

任何可能变化的值

28.2 性能

如果遵循一些基本模式,可以写出执行速度很快的代码

28.2.1 作用域意识

任何缩短遍历作用域的举措都能提升代码性能

1.避免全局查找

通过在局部作用域中保存document对象的引用,能够明显提升某些函数的性能,引用只需要在作用域链查找

2.不使用with语句

with语句会创建自己的作用域,因此也会加长其中代码的作用域链

但是很少有需要使用with的情况,使用局部变量可用实现同样的效果

28.2.2 选择正确的方法

1.避免不正确的属性查找

使用复杂度低的算法

2.优化循环

简化终止条件

简化循环体

使用后测试循环

3.展开循环

如果循环的次数是有限的,那么直接抛弃循环可能更快

4.避免重复解释

尽量避免使用eval(),直接写出来就行

5.其他性能优化注意事项

尽量使用原生方法

使用switch语句

位操作很快

28.2.3 语句最少化

1.多个变量声明改成逗号分隔

2.插入迭代性值

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

28.2.4 优化DOM交互

理解DOM优化可以极大的提升脚本的执行速度

1.实时更新最小化

在访问DOM时,只要访问的部分是显示页面的一部分,都是在执行实时更新操作

要减少实时更新的操作:

从页面中移除列表,执行更新,再把列表插回到页面中相同的位置

使用文档片段构建DOM结构,任何一次性把它添加到list元素

2.使用innerHTML

对于大量更新,innerHTML比creatElement()和appendChild()快很多

因为innerHTML会使用原生DOM解析

3.使用事件委托

事件委托利用了事件的冒泡

可以把事件处理程序添加到负责处理多个目标的高层元素上

4.注意HTMLCollection

减少访问HTMLCollection可以减少文档查询的次数,从而极大地提升性能

28.3 部署

任何JS最重要的部分就是把网站或者Web应用部署到线上环境

28.3.1 构建流程

代码不应该不做任何处理就放在浏览器,因为:

知识产权问题

文件大小

代码组织

要注意:

文件结构: 不要在一个文件中包含所有的JS代码

任务运行器: 任务运行器负责辅助组织和排序复杂命令调用

摇树优化: 极为有效地减少代码冗余

模块打包器: 使用模块打包工具,可以把基于模块的代码转化为普遍兼容的网页脚本

28.3.2 验证

使用辅助验证工具可以帮助我们发现代码中的潜在问题

下面是一些可能报告的问题:

使用eval()

使用未声明的变量

遗漏了分号

不恰当的换行

不正确的使用都好

遗漏了包含语句的括号

遗漏了switch中的break

重复声明变量

使用了with

错误的使用等于号

执行不到的代码

28.3.3 压缩

JS压缩,实际上指的就是: 代码大小 和 传输负载

1.代码压缩

代码压缩工具可以通过如下操作减小代码大小:

删除空格和换行

删除注释

缩短变量名,函数名和其他标识符

2.JavaScript编译

JavaScript代码编译通常指把源代码转换为一种逻辑相同但是字节更少的形式

可能会执行如下操作:

删除未使用的代码

将某些代码转换为更简洁的语法

全局函数调用,常量和变量行内化

3.JavaScript转译

移交到代码仓库中的代码和浏览器中的代码不一样

通过JavaScript转译,可以在开发中使用最新特性而不用担心兼容性问题

4.HTTP压缩

传输负载是从服务器发送给浏览器的实际字节数

浏览器都支持客户端解压缩收到的资源

服务器则可以根据浏览器通过请求头部