//一段混用的jQuery代码
$('h1').after('<div><h2>目录</h2><ol></ol></div>');
避免混入其他技术
CSS:假设我们的页面上有必须填入的输入框（拥有class“mandatory”），如果它没有被输入数据，周围就会加上红色边框。
复制代码 代码如下:
//一段混合了其他技术的代码会这样做：
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
if(inputs[i].className === 'mandatory' &&
inputs[i].value === ''){
inputs[i].style.borderColor = '#f00';
inputs[i].style.borderStyle = 'solid';
inputs[i].style.borderWidth = '1px';
}
}
复制代码 代码如下:
//一段良好的代码会这么做：将风格化的事情交给CSS吧
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
if(inputs[i].className === 'mandatory' &&
inputs[i].value === ''){
inputs[i].className += ' error';
}
}
HTML:假设我们有内多HTML内容需要用JavaScript来载入，那么使用Ajax载入单独的文件，而不是通过JavaScript处理DOM，后者会让代码难以处理，并且出现难以维护的兼容性问题。
验证JavaScript代码
浏览器处理JavaScript代码可能会非常宽容，但我建议你不要依赖浏览器的解析能力，因此养成了懒散的编码习惯。
最简单的检测你的代码质量的方法是通过一个在线JavaScript验证工具JSLint。
“JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.”
– JSLint Documentation
使用更简单的格式来写innerscript
复制代码 代码如下:
//早期的代码可能是这样的
<script type="text/javascript" language="javascript">
...
</script>
复制代码 代码如下:
//现在不用language属性了
<script type="text/javascript">
...
</script>
总是检查数据
要检查你的方法输入的所有数据，一方面是为了安全性，另一方面也是为了可用性。用户随时随地都会输入错误的数据。这不是因为他们蠢，而是因为他们很忙，并且思考的方式跟你不同。用typeof方法来检测你的function接受的输入是否合法。
复制代码 代码如下:
//如果members的类型不是数组，那么下面的代码会抛出一个错误
function buildMemberList(members){
var all = members.length;
var ul = document.createElement('ul');
for(var i=0;i
复制代码 代码如下:
//良好的习惯是检查参数是否是一个数组
function buildMemberList(members){
//数组的typeof是object，所以如果要判断是否为数组的话，可以测试它是否拥有数组才有的function：slice
if(typeof members === 'object' &&
typeof members.slice === 'function'){
var all = members.length;
var ul = document.createElement('ul');
for(var i=0;i
另一个安全隐患是直接从DOM中取出数据使用。比如说你的function从用户名输入框中取得用户名做某项操作，但用户名中的单引号或者双引号可能会导致你的代码崩溃。
避免全局变量
全局变量和全局函数是非常糟糕的。因为在一个页面中包含的所有JavaScript都在同一个域中运行。所以如果你的代码中声明了全局变量或者全局函数的话，后面的代码中载入的脚本文件中的同名变量和函数会覆盖掉（overwrite）你的。
复制代码 代码如下:
//糟糕的全局变量和全局函数
var current = null;
function init(){...}
function change(){...}
function verify(){...}
解决办法有很多，Christian Heilmann建议的方法是：
复制代码 代码如下:
//如果变量和函数不需要在“外面”引用，那么就可以使用一个没有名字的方法将他们全都包起来。
(function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
})();
复制代码 代码如下: