javascript编程的最佳实践推荐

2023-07-22 10:27:10

推荐的javascript编程的最佳实践，摘要记录在这里：

可维护的代码
保证代码的性能
部署代码

1 可维护的代码
1.1什么是维护的代码：
可理解性——其他人可以接手代码并理解它的意图和一般途径，而无需原开发人员的完整解释。
直观性——代码中的东西一看就能明白，不管其操作过程多么复杂。
可适应性——代码以一种数据上的变化不要求完全重写的方法撰写。
可扩展性——在代码架构上已考虑到在未来允许对核心功能进行扩展。
可调试性——当有地方出错时，代码可以给予你足够的信息来尽可能直接地确定问题所在。

1.2 代码约定：
可读性
变量和函数命名
命名的一般规则如下所示:
变量名应为名词如 car 或 person。
函数名应该以动词开始，如 getName()。返回布尔类型值的函数一般以 is 开头，如isEnable()。
变量和函数都应使用合乎逻辑的名字，不要担心长度。长度问题可以通过后处理和压缩来缓解。
变量类型透明

1.3 松散耦合
解耦 HTML/JavaScript
解耦 CSS/JavaScript
解耦应用逻辑／事件处理程序

1.4 编程实践
尊重对象所有权
　　不要为实例或原型添加属性
　　不要为实例或原型添加方法
　　不要重定义已存在的方法
　　创建包含所需功能的新对象，并用它与相关对象进行交互
　　创建自定义类型，继承需要进行修改的类型。然后可以为自定义类型添加额外功能。
避免全局量
　　最多创建一个全局变量，让其他对象和函数存在其中，单一的全局量的延伸便是命名空间的概念
避免与 null 进行比较，如果看到了与 null 比较的代码，尝试使用以下技术替换
　　如果值应为一个引用类型，使用 instanceof 操作符检查其构造函数
　　如果值应为一个基本类型，使用 typeof 检查其类型
　　如果是希望对象包含某个特定的方法名，则使用 typeof 操作符确保指定名字的方法存在于对象上。
　　代码中的 null 比较越少，就越容易确定代码的目的，并消除不必要的错误。
使用常量
　　重复值
　　用户界面字符串
　　URLs
　　任意可能会更改的值

2. 性能
2.1 注意作用域
　　避免全局查找
　　避免 with 语句
2.2 选择正确方法
　　避免不必要的属性查找，最简单、最快捷的算法是常数值即 O(1)
　　优化循环
　　　　减值迭代
　　　　简化终止条件
　　　　简化循环体
　　　　使用后测试循环
　　　　展开循环，考虑使用一种叫做 Duff 装置的技术

//credit: Jeff Greenberg for JS implementation of Duff’s Device

//假设 values.length > 0

var iterations = Math.ceil(values.length / 8);

var startAt = values.length % 8;

var i = 0;

do {

    switch(startAt){

        case 0: process(values[i++]);

        case 7: process(values[i++]);

        case 6: process(values[i++]);

        case 5: process(values[i++]);

        case 4: process(values[i++]);

        case 3: process(values[i++]);

        case 2: process(values[i++]);

        case 1: process(values[i++]);

    }

    startAt = 0;

} while (--iterations > 0);

//credit: Speed Up Your Site (New Riders, 2003)

var iterations = Math.floor(values.length / 8);

var leftover = values.length % 8;

var i = 0;

if (leftover > 0){

    do {

        process(values[i++]);

    } while (--leftover > 0);

}

do {

    process(values[i++]);

    process(values[i++]);

    process(values[i++]);

    process(values[i++]);

    process(values[i++]);

    process(values[i++]);

    process(values[i++]);

    process(values[i++]);

} while (--iterations > 0);

　　　　避免双重解释, eval("alert('Hello world!')"); setTimeout("alert('Hello world!')", 500);
　　　　性能的其他注意事项
　　　　　　原生方法较快
　　　　　　Switch 语句较快, 还可以通过将 case 语句按照最可能的到最不可能的顺序进行组织
　　　　　　位运算符较快诸如取模，逻辑与和逻辑或都可以考虑用位运算来替换。
2.3 最小化语句数
　　　　多个变量声明，var count = 5, color = "blue", values = [1,2,3], now = new Date(); 变量声明只用了一个 var 语句，要比单个变量分别声明快很多。
　　　　插入迭代值
　　　　使用数组和对象字面量
2.4 优化DOM交互
　　　　最小化现场更新，即不要频繁的动态修改或生成DOM
　　　　使用 innerHTML
　　　　使用事件代理
　　　　注意 HTMLCollection，编写 JavaScript 的时候，一定要知道何时返回 HTMLCollection 对象
　　　　
3 部署
3.1 构建过程
　　知识产权问题
　　文件大小
　　代码组织
　　记住通过<script>标记引用 JavaScript 文件是一个阻塞操作
　　使用 Ant进行 JavaScript 和 CSS 的构建自动化

<project name="JavaScript Project" default="js.concatenate">

    <!-- 输出的目录 -->

    <property name="build.dir" value="./js" />

    <!-- 包含源文件的目录 -->

    <property name="src.dir" value="./dev/src" />

    <!-- 合并所有 JS 文件的目标 -->

    <!-- Credit: Julien Lecomte,     http://www.julienlecomte.net/blog/2007/09/16/ -->

    <target name="js.concatenate">

        <concat destfile="${build.dir}/output.js">

            <filelist dir="${src.dir}/js" files="a.js, b.js"/>

            <fileset dir="${src.dir}/js" includes="*.js" excludes="a.js, b.js"/>

        </concat>

    </target>

</project>

# ant js.concatenate

3.2 验证
　　有些工具可以帮助确定 JavaScript 代码中潜在的问题，其中最著名的就是 Douglas Crockford 的 JSLint (www.jslint.com)。
　　JSLint 可以查找 JavaScript 代码中的语法错误以及常见的编码错误。
　　　　eval()的使用；
　　　　未声明变量的使用；
　　　　遗漏的分号；
　　　　不恰当的换行；
　　　　错误的逗号使用；
　　　　语句周围遗漏的括号；
　　　　switch 分支语句中遗漏的 break；
　　　　重复声明的变量；
　　　　with 的使用；
　　　　错误使用的等号（替代了双等号或三等号）；
　　　　无法到达的代码。
它也可以使用基于Java的Rhino JavaScript引擎（www.mozilla.org/rhino/）运行于命令行模式下
# java -jar rhino-1.6R7.jar jslint.js a.js b.js c.js

<target name="js.verify">

    <apply executable="java" parallel="false">

        <fileset dir="${build.dir}" includes="output.js"/>

        <arg line="-jar"/>

        <arg path="${rhino.jar}"/>

        <arg path="${jslint.js}" />

        <srcfile/>

    </apply>

</target>

# ant js.verify

这个目标假设 Rhino jar 文件的位置已经由叫做 rhino.jar 的属性指定了，同时 JSLint Rhino 文件的位置由叫做 jslint.js 的属性指定了。output.js 文件被传递给 JSLint 进行校验，然后显示找到的任何问题。

3.3 压缩
　　文件压缩
　　　　删除额外的空白（包括换行）；
　　　　删除所有注释；
　　　　缩短变量名。
　　YUI 压缩器，http://yuilibrary.com/projects/yuicompressor
　　java -jar yuicompressor-2.3.5.jar -o cookie.js CookieUtil.js

<!-- Credit: Julien Lecomte, http://www.julienlecomte.net/blog/2007/09/16/ -->

<target name="js.compress">

    <apply executable="java" parallel="false">

        <fileset dir="${build.dir}" includes="output.js"/>

        <arg line="-jar"/>

        <arg path="${yuicompressor.jar}"/>

        <arg line="-o ${build.dir}/output-min.js"/>

        <srcfile/>

    </apply>

</target>

# ant js.compress

　　HTTP 压缩
　　　　对于 Apache Web服务器,
　　　　　　for apache 1.3 httpd.conf 文件或者是.htaccess 文件添加 mod_gzip_item_include file \.js$
　　　　　　for apache 2.0 AddOutputFilterByType DEFLATE application/x-javascript

码农公寓

相关文章