javascript 最佳实践 ( 24 章 )
代码约定
易于维护, 形成了一套 JavaScript 代码书写的约定:
跟别的语言差不多, 不过 javascript 中的大括号一定要放在 行尾, 例如:
function abc() {
// 函数体
}
另外, 由于 javascript 变量是松散类型的, 很容易忘记变量所应包含的数据类型. 所以, 有以下3种方式可以缓解该问题.
1. 初始化:例如: ( 即 利用初值来提醒自己, 该变量的类型 )
var found = false;
var count = –1;
2. 使用类型注释
// 用于指定类型的类型注释
var found /* Boolean */ = false;
var count /* int */ = 10;
另外, 常量使用全部大写字母, 多个单词以下划线分割.
枚举类型, 同常量
不要封装基本类型
只在解析序列化串时使用 eval()
禁止 with
仅在函数内使用 this
禁止修改内置对象原型
使用 Array/Object 直接量, 避免使用 Array/Object 构造器
尽量少使用 == , 多使用 ===
变量声明, 尽量放在函数头部
所有函数都在使用之前定义
避免使用全局变量, 如果必须使用, 那么同常量书写规范
松散耦合
1. 解耦 HTML/JavaScript
理想情况下, HTML和 JavaScript 应该完全分离, 并通过外部文件和使用DOM附加来包含 JavaScript。
1: // 将HTML紧密耦合到 Javascript
2: function insertMessage(msg) {
3: var container = document.getElementById("container");
4: container.innerHTML = "<div class=\"msg\"><p class=\"post\">" + msg + "</p>";
5: }
一般来说, 你应该避免在 JavaScript 中创建大量 HTML, 再一次重申保持层次的分离, 这样可以很容易确定错误的来源
2. 解藕CSS/JavaScript
// css 对 Javascript 的紧密耦合
element.style.color = “red”;
element.style.backgroundColor = “blue”;
// css 对 JavaScript 的松散耦合
element.className = “edit”;
修改后, 就可以让大部分式样信息严格保留在 CSS 中.
3. 解藕 应用逻辑 / 事件处理程序 (启示就是讲逻辑写在一个函数里, 然后事件处理程序调用那个逻辑, 而不要写在一起)
编程实践
1. 尊重对象所有权
不要随意改变别人创建的对象, 不要为实例或原型添加属性, 不要为实例或原型添加方法, 不要重定义已存在的方法.
2. 避免全局量( 包含属性 和 方法 ), 如果非要创建, 最多创建一个全局量
// 两个全局量 - 不好, 避免
var name = "Nicholas";
function sayName() {
alert(name);
} // 一个全局量 - 还可以
var MyApplication = {
name : "Nicholas",
sayName: function() {
alert(this.name);
}
}
这种用一个全局对象作为容器, 其中又定义了其他对象, 这种方式将功能组合在一起的对象, 叫做 命名空间
命名空间很重要的一部分是确定每个人都统一使用的全局对象的名字, 并且尽可能唯一, 让其他人不太可能也使用这个名字.
3. 避免与 null 进行比较
由于 javascript 不做任何自动类型检查,
引用类型, 使用 instanceof 进行比较, 例如: if (values instanceof Array)
基本类型, 使用 typeof 进行检查, 例如: if (typeof(values) == “boolean”)
4. 使用常量
尽管 javascript 没有常量的正式概念, 但是可以通过如下方法来定义常量: 常量在比较时, 容易避免错误.
另外, 常量的好处是, 不能修改这个内容, 要真的想修改, 可以一改全改
var Constants = {
INVALID_VALUE_MSG: "Invalid value!",
INVALID_VALIE_URL: "/errors/invalid.php"
}; function validate(value) {
if (!value) {
alert(Constants.INVALID_VALUE_MSG);
location.href = Constants.INVALID_VALUES_URL;
}
}
性能
- 注意作用域
1. 避免全局查找
function updateUI() {
var imgs = document.getElementsByTagName("img");
for (var i=0, len=imgs.length; i<len; i++) {
imgs[i].title = document.title + "image" + i;
}
var msg = document.getElementById("msg");
msg.innerHTML = "Update complete.";
}
该函数看上去完全正常, 但是它包含了三个对全局 document 对象的引用, 如果在页面上有多个图片, for 循环中的 document 引用要进行作用域链查找, 通过创建一个指向 document 对象的局部变量, 就可以通过限制一次全局查找来改进这个函数性能:
1: function updateUI() {
2: var doc = document;
3: var imgs = doc.getElementsByTagName("img");
4: for (var i=0, len=imgs.length; i<len; i++) {
5: imgs[i].title = doc.title + "image" + i;
6: }
7: var msg = doc.getElementById("msg");
8: msg.innerHTML = "Update complete.";
9: }
2. 避免使用 with 语句
- 注意事项 原生方法较快, switch 较快, 位运算符较快
- 最小化语句数
1. 多个变量声明
var count = 5;
var color = “blue”;
改为一个语句
var count = 5,
color = “blue”;
2. 数组和对象, 尽量用字面量的方法来创建.
javascript 最佳实践 ( 24 章 )的更多相关文章
- JavaScript 最佳实践
这个文档是基于JavaScript社区众多开发者的意见和经验,在开发JavaScript代码上的最佳实践和首选的方案的明细表.因为这是一个推荐的表而非原则性的方案,经验丰富的开发者可能对下面的表达会有 ...
- 【原】javascript最佳实践
摘要:这篇文章主要内容的来源是<javascript高级程序设计第三版>,因为第二遍读完,按照书里面的规范,发觉自己在工作中没有好好遵守.所以此文也是对自己书写js的一种矫正. 1.可维护 ...
- JavaScript最佳实践:可维护性
代码约定 一.可读性 代码缩进 包含注释 二.变量和函数命名 变量名应为名词如car或person 函数名应该以动词开始,如getName().返回布尔类型值的函数一般以is开头,如isEnable( ...
- 学习JavaScript最佳实践方法
首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门. 谈不上经验,都是一些教训. 这个时候有人要说,“靠,你丫半桶水,凭啥教我们”.您先别急着骂,先听我说. 你叫一个大学生去教小学数 ...
- JavaScript最佳实践
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5540469.html 举个例子:用户在点击某个链接的时候弹出一个新窗口 弹出窗口的方法采用:wind ...
- 15条JavaScript最佳实践很经典噢
感觉比较经典,特转载腾讯大讲堂.本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览 ...
- 15条JavaScript最佳实践【转】
本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断:比如不要嵌套太深). ...
- 我们必须要知道的RESTful服务最佳实践
看过很多RESTful相关的文章总结,参齐不齐,结合工作中的使用,非常有必要归纳一下关于RESTful架构方式了,RESTful只是一种架构方式的约束,给出一种约定的标准,完全严格遵守RESTful标 ...
- 给JavaScript初学者的24条最佳实践
.fluid-width-video-wrapper { width: 100%; position: relative; padding: 0 } .fluid-width-video-wrapp ...
随机推荐
- 使用ASP.Net WebAPI构建REST服务(七)——调试工具
由于WebAPI本身是基于HTTP协议的,在开发过程中,我们可以使用浏览器或Fiddler等HTTP工具辅助开发.与此同时,微软也提供了一些工具方便我们调试,使得开发更加简单快捷,本文就简单的介绍一下 ...
- Inno Setup入门(一)——最简单的安装脚本
地址:http://379910987.blog.163.com/blog/static/3352379720110238252326/ 一个最简单的安装脚本: 1.最简单的安装文件脚本: [setu ...
- Delphi 使窗体Showmodal后可以操作其他窗体
对话框ShowModal之后不能操作其它窗口,实际上是因为Windows Disable了其它窗口.所以当你需要在模态对话框中访问其它已经可见的窗口时,需要用EnableWindow API来激活对应 ...
- java获取桌面路径的方法
FileSystemView fsv = FileSystemView.getFileSystemView(); File com=fsv.getHomeDirectory(); System.out ...
- 本机搭建PHP环境全教程(图文)
为了更好的维护空间网站,研究和调试PHP程序,许多人需要在自己的计算机内搭建PHP环境.本文将介绍使用phpnow环境组件搭建的全过程.使用搜索工具,搜索phpnow<ignore_js_op& ...
- renderdoc on android
国内没人发这种贴...一个发了renderdoc with unity是在pc平台跑的 没有挂android 这货有点坑啊 花了好几个小时 wiki上的issue基本全看了...感觉是版本提交的log ...
- 【招聘App】—— React/Nodejs/MongoDB全栈项目:项目准备
前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...
- $ 和getElementId的区别 / 一个jquery对象的原型
请说出 div 和 $div 的联系和区别 区别 div 返回一个HTML DOM Object $div 返回一个 jQuery Object, 两者不等价 $div是包装了dom对象后产生的,无法 ...
- web报表工具FineReport经常使用函数的使用方法总结(日期和时间函数)
web报表工具FineReport经常使用函数的使用方法总结(日期和时间函数) 说明:凡函数中以日期作为參数因子的,当中日期的形式都必须是yy/mm/dd.并且必须用英文环境下双引號(" & ...
- MYSQL百万级数据,如何优化
MYSQL百万级数据,如何优化 首先,数据量大的时候,应尽量避免全表扫描,应考虑在 where 及 order by 涉及的列上建立索引,建索引可以大大加快数据的检索速度.但是,有些情况索引是 ...