繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 不唐突的JavaScript的七条准则整理收集
- Javascript
- 动态改变图片尺寸（一）
- JavaScript＋PHP 应用一：网页制作中双下拉菜单的动态实现
- JavaScript + PHP 应用二：网页设计中树形菜单的动态实现
- 在Javascript中为String对象添加trim,ltrim,rtrim方法
- 纯JavaScript时钟
- 网页之定时器详解
- 为网页添加活动的背景音乐
- Javascript Game
- 实用的检测分辨率的程序代码
- 【推荐】一个非常漂亮的列表框
- 绝对精彩：在网页里做类似window右键的弹出式菜单
- 怎样使网页中的元素可编辑??
- JavaScript和Java的区别
- 怎样编写IE和NN6通用的闪烁(blank)效果
- 关于如何动态地在同一页面实现两个 < select > 互传 (s1 <==> s2)
- ＣＯＯＫＩＥ欺骗
- 连串英文自动换行的方法
- JavaScript中的正则表达式(1)
- JavaScript中的正则表达式(2)
- JavaScript窗口功能指南之定制新窗口
Javascript 中的 不唐突的JavaScript的七条准则整理收集
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 34 ::
收藏到网摘: n/a
在开始设计你的脚本之前，要考虑的第一件事情就是检查一下你要为其编写脚本的HTML代码，看看有什么东西可以帮助你达到目的。 1.不要做任何假设
（JavaScript是一个不可靠的助手）
可能不唐突的JavaScript 的最重要的一个特性就是——你要停止任何假设：
* 不要假设JavaScript是可用的，你最好认为它很有可能是不可用的，而不是直接依赖于它。
* 在你经过测试确认一些方法和属性可以使用之前，不要假设浏览器支持它们。
* 不要假设HTML代码如你想象的那样正确，每次都要进行检查，并且当其不可用的时候就什么也不要做。
* 让JavaScript的功能独立于输入设备
* 要记住其他的脚本可能会影响你的JavaScript的功能，所以要保证你的脚本的作用域尽可能地安全。
在开始设计你的脚本之前，要考虑的第一件事情就是检查一下你要为其编写脚本的HTML代码，看看有什么东西可以帮助你达到目的。
2.找出钩子和节点关系
（HTML是脚本的基石）
在开始编写脚本之前，要先看一下你要为之编写JavaScript的HTML。如果HTML是未经组织的或者未知的，那么你几乎不可能有一个好的脚本编写方案——很可能就会出现下面的情况：要么是会用JavaScript创建太多标记，要么就是应用太依赖于JavaScript。
在HTML中有一些东西需要考虑，那就是钩子和节点关系。
<1>.HTML 钩子
HTML最初的和最重要的钩子就是ID，而且ID可以通过最快的DOM方法——getElementById 访问到。如果在一个有效的HTML文档中所有的ID都是独一无二的话（在IE中关于name 和 ID 有一个bug，不过有些好的类库解决了这个问题），使用ID就是安全可靠的，并且易于测试。
其他一些钩子就是是HTML元素和CSS类，HTML元素可以通过getElementsByTagName方法访问，而在多数浏览器中都还不能通过原生的DOM方法来访问CSS类。不过，有很多外部类库提供了可以访问CSS类名（类似于 getElementsByClassName） 的方法。
<2>.HTML 节点关系
关于HTML的另外比较有意思的一点就是标记之间的关系，思考下面的问题：
* 要怎样才可以最容易地、通过最少的DOM遍历来到达目标节点？
* 通过修改什么标记，可以尽可能多地访问到需要修改的子节点？
* 一个给定的元素有什么属性或信息可以用来到达另外一个元素？
遍历DOM很耗资源而且速度很慢，这就是为什么要尽量使用浏览器中已经在使用的技术来做这件事情。
3.把遍历交给专家来做
（CSS，更快地遍历DOM）
有关DOM的脚本和使用方法或属性（getElementsByTagName, nextSibling, previousSibling, parentNode以及其它）来遍历DOM似乎迷惑了很多人，这点很有意思。而有趣的是，我们其实早已经通过另外一种技术—— CSS ——做了这些事情。
CSS 是这样一种技术，它使用CSS选择器，通过遍历DOM来访问目标元素并改变它们的视觉属性。一段复杂的使用DOM的JavaScript可以用一个CSS选择器取代：
复制代码 代码如下:
所有的方法和属性都可以通过使用“类名+点操作符”的方式从外部和内部访问到。
var myScript = {
nav:document.getElementById('nav'),
init:function(){
myScript.show();
if(myScript.nav.className === 'show'){
myScript.reset();
}
// do stuff
},
show:function(){
var c = myScript.nav.className;
// do stuff
},
reset:function(){
// do stuff
}
}
这种模式的缺点就是，你每次从一个方法中访问其它方法或属性都必须在前面加上对象的名字，而且对象中的所有东西都是可以从外部访问的。如果你只是想要部分代码可以被文档中的其他脚本访问，可以考虑下面的模块（module）模式：
var myScript = function(){
//这些都是私有方法和属性
var nav = document.getElementById('nav');
function init(){
// do stuff
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
//公有的方法和属性被使用对象语法包装在return 语句里面
return {
public:function(){
},
foo:'bar'
}
}();
你可以使用和前面的代码同样的方式访问返回的公有的属性和方法，在本示例中可以这么访问：myScript.public() 和 myScript.foo 。但是这里还有一点让人觉得不舒服：当你想要从外部或者从内部的一个私有方法中访问公有方法的时候，还是要写一个冗长的名字（对象的名字可以非常长）。为了避免这一点，你需要将它们定义为私有的并且在return语句中只返回一个别名：
var myScript = function(){
// 这些都是私有方法和属性
var nav = document.getElementById('nav');
function init(){
// do stuff
}
function show(){
// do stuff
// do stuff
}
function reset(){
// do stuff
}
var foo = 'bar';
function public(){
}
return {
public:public,
foo:foo
}
}();
这就保证了代码风格一致性，并且你可以使用短一点的别名来访问其中的方法或属性。
如果你不想对外部暴露任何的方法或属性，你可以将所有的代码封装到一个匿名方法中，并在它的定义结束后立刻执行它：
(function(){
// these are all private methods and properties
var nav = document.getElementById('nav');
function init(){
// do stuff
show(); // 这里不需要类名前缀
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
})();
对于那些只执行一次并且对其它函数没有依赖的代码模块来说，这种模式非常好。
通过遵循上面的那些规则，你的代码更好地为用户工作，也可以使你的代码在机器上更好地运行并与其他开发者的代码和睦相处。不过，还有一个群体需要考虑到。
7.为接手的开发者考虑
（使维护更加容易）
使你的脚本真正地unobtrusive的最后一步是在编写完代码之后仔细检查一遍，并且要照顾到一旦脚本上线之后要接手你的代码的开发者。考虑下面的问题：
* 所有的变量和函数名字是否合理并且易于理解？
* 代码是否经过了合理的组织？从头到尾都很流畅吗？
* 所有的依赖都显而易见吗？
* 在那些可能引起混淆的地方都添加了注释吗？
最重要的一点是：要认识到文档中的HTML和CSS代码相对于JavaScript来说更有可能被改变（因为它们负责视觉效果）。所以不要在脚本代码中包含任何可以让终端用户看到的class和ID，而是要将它们分离出来放到一个保存配置信息的对象中。
myscript = function(){
var config = {
navigationID:'nav',
visibleClass:'show'
};
var nav = document.getElementById(config.navigationID);
function init(){
show();
if(nav.className === config.visibleClass){
reset();
};
// do stuff
};
function show(){
var c = nav.className;
// do stuff
};
function reset(){
// do stuff
};
}();
这样维护者就知道去哪里修改这些属性，而不需要改动其他代码。
所有的方法和属性都可以通过使用“类名+点操作符”的方式从外部和内部访问到。
复制代码 代码如下:
var myScript = {
nav:document.getElementById('nav'),
init:function(){
myScript.show();
if(myScript.nav.className === 'show'){
myScript.reset();
}
// do stuff
},
show:function(){
var c = myScript.nav.className;
// do stuff
},
reset:function(){
// do stuff
}
}
这种模式的缺点就是，你每次从一个方法中访问其它方法或属性都必须在前面加上对象的名字，而且对象中的所有东西都是可以从外部访问的。如果你只是想要部分代码可以被文档中的其他脚本访问，可以考虑下面的模块（module）模式：
复制代码 代码如下:
var myScript = function(){
//这些都是私有方法和属性
var nav = document.getElementById('nav');
function init(){
// do stuff
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
//公有的方法和属性被使用对象语法包装在return 语句里面
return {
public:function(){
},
foo:'bar'
}
}();
你可以使用和前面的代码同样的方式访问返回的公有的属性和方法，在本示例中可以这么访问：myScript.public() 和 myScript.foo 。但是这里还有一点让人觉得不舒服：当你想要从外部或者从内部的一个私有方法中访问公有方法的时候，还是要写一个冗长的名字（对象的名字可以非常长）。为了避免这一点，你需要将它们定义为私有的并且在return语句中只返回一个别名：
复制代码 代码如下:
var myScript = function(){
// 这些都是私有方法和属性
var nav = document.getElementById('nav');
function init(){
// do stuff
}
function show(){
// do stuff
// do stuff
}
function reset(){
// do stuff
}
var foo = 'bar';
function public(){
}
return {
public:public,
foo:foo
}
}();
这就保证了代码风格一致性，并且你可以使用短一点的别名来访问其中的方法或属性。
如果你不想对外部暴露任何的方法或属性，你可以将所有的代码封装到一个匿名方法中，并在它的定义结束后立刻执行它：
复制代码 代码如下:
(function(){
// these are all private methods and properties
var nav = document.getElementById('nav');
function init(){
// do stuff
show(); // 这里不需要类名前缀
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
})();
对于那些只执行一次并且对其它函数没有依赖的代码模块来说，这种模式非常好。
通过遵循上面的那些规则，你的代码更好地为用户工作，也可以使你的代码在机器上更好地运行并与其他开发者的代码和睦相处。不过，还有一个群体需要考虑到。
7.为接手的开发者考虑
（使维护更加容易）
使你的脚本真正地unobtrusive的最后一步是在编写完代码之后仔细检查一遍，并且要照顾到一旦脚本上线之后要接手你的代码的开发者。考虑下面的问题：
* 所有的变量和函数名字是否合理并且易于理解？
* 代码是否经过了合理的组织？从头到尾都很流畅吗？
* 所有的依赖都显而易见吗？
* 在那些可能引起混淆的地方都添加了注释吗？
最重要的一点是：要认识到文档中的HTML和CSS代码相对于JavaScript来说更有可能被改变（因为它们负责视觉效果）。所以不要在脚本代码中包含任何可以让终端用户看到的class和ID，而是要将它们分离出来放到一个保存配置信息的对象中。
复制代码 代码如下:
myscript = function(){
var config = {
navigationID:'nav',
visibleClass:'show'
};
var nav = document.getElementById(config.navigationID);
function init(){
show();
if(nav.className === config.visibleClass){
reset();
};
// do stuff
};
function show(){
var c = nav.className;
// do stuff
};
function reset(){
// do stuff
};
}();
这样维护者就知道去哪里修改这些属性，而不需要改动其他代码。
评论 (0) All
