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 ...
随机推荐
- JavaScript的=、==和===
(1) 百度知道上的解释: = 为对象赋值 == 表示两个对象toString值相等 === 表示两个对象类型相同且值相等 (2) 知乎上的解释: 绝大多数场合应该使用 === ,只有检测 null ...
- 怎么在VS2010中打开VS2013的项目
其实VS2010与VS2013上的sln文件没有本质的区别.打不开的原因是什么呢?其实原因很简单,两者开头的软件信息不同.因此造成低版本VS的不识别. VS2013版本vs.sln文件开头的软件信息: ...
- centos7修改yum下载源为阿里源
在国内很多yum源不好用,所以改成国内的源很有必要 首先,切换到yum源目录 cd /etc/yum.repos.d 备份一下 sudo mv CentOS-Base.repo CentOS-Base ...
- 小二助手-react.js分块加载
小二助手在线演示地址:http://118.25.217.253:8000 账号test 密码123 小二助手是用material-ui开发的,感觉国内使用的人数不是特别多,所以创建了一个qq交流群 ...
- webpack配置:图片处理、css分离和路径问题
一.CSS中的图片处理: 1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic" ...
- 【前后台分离模式下,使用OAuth Token方式认证】
AngularJS is an awesome javascript framework. With it’s $resource service it is super fast and easy ...
- 【JAVA】StringTokenizer 迭代方式对字符串进行分割
StringTokenizer是一个用来分隔String的应用类,相当于VB的split函数.1.构造函数public StringTokenizer(String str)public String ...
- 【千纸诗书】—— PHP/MySQL二手书网站后台开发之功能实现
前言:前一篇温习了网站开发需要掌握的基础知识,这一篇重点梳理一下各个功能模块的[详细设计与实现].项目github地址:https://github.com/66Web/php_book_store, ...
- 蓝鲸安装Agent
1. APPO 所在机器(在 app 运行所在机器) 必须能通过 ssh 登陆到 Agent 机器2. Agent 所在机器可以访问到 zk 的端口3. 支持 Linux/Windows/AIX 操作 ...
- Oracle database wrc运行报错ORA-15557
[oracle@host capture]$ wrc system/oracle@db1 REPLAYDIR=/home/oracle/cap_dir/ Workload Replay Client: ...