首页 »Javascript教程 » javascript不可运行:不唐突的JavaScript的 7条准则 »正文javascript不可运行:不唐突的JavaScript的 7条准则来源: 发布时间:星期一, 2009年1月26日 浏览:2次 评论:0
="t18">英文原文:The seven rules of Unobtrusive JavaScript
原文地址: var dynamicClass = 'js'; var b = document.body; b.  Name = b.Name ? b.Name + ' js' : 'js';CSS: /* 静态版本 */ #nav { .... } /* 动态版本 */ body.js #nav { .... } 4.理解浏览器和用户(在既有  使用模式上创建你所需要东西)不唐突 JavaScript 中很重要 部分就是理解浏览器是如何工作(尤其是浏览器是如何崩溃)以及用户期望是什么 不考虑浏览器你也可以很容易地使用JavaScript创建个完全区别界面拖拽界面 折叠区域滚动条和滑动块都可以使用JavaScript创建但是这个问题并不是个简单技术问题你需要研究下面问题:这个新界面可以独立于输入设备么？如果不能 那么可以依赖哪些东西？ 我创建 这个新界面是否遵循了浏览器或者其它富界面准则(你可以通过鼠标在多级菜单中直接切换吗？还是需要使用tab键？) 我需要提供什么功能但是这个功能是依赖于JavaScript ? 最后 个问题其实不是问题 如果需要你就可以使用DOM来凭空创建HTML有关这点个例子就是“打印”链接由于浏览器没有提供个非JavaScript打印文档功能所以你需要使用DOM来创建这类链接同样地个实现了展开和收缩内容模块、可以点击标题栏也属于这种情况标题栏不能被键盘激活但是链接可以所以为了创建个可以点击标题栏你需要使用JavaScript将链接加入进去然后所有使用键盘用户就可以收缩和展开内容模块了解决这类问题 极好资源就是设计模式库至于要知道浏览器中哪些东西是独立于输入设备那就要靠经验积累了首先你要理解就是事件处理机制5.理解事件(事件处理会引起改变) 事件处理是走向不唐突 JavaScript第 2步重点不是让所有东西都变得可以拖拽、可以点击或者为它们添加内联处理而是理解事件处理是个可以完全分离出来东西我们已经将HTML,CSS和JavaScript分离开来但是在事件处理分离方面却没有走得很远事件处理器会监听发生在文档中元素上 变化如果有事件发生处理器就会找到个很奇妙对象(般会是个名为e参数)这个对象会告诉元素发生了什么以及可以用它做什么对于大多数事件处理来说 真正有趣是它不止发生在你想要访问元素上还会在DOM中较高层级所有元素上发生(但是并不是所有事件都是这样focus和blur事件是例外)举例来说利用这个特性你可以为个导航列表只添加个事件处理器并且使用事件处理器思路方法来获取真正触发事件元素这种技术叫做事件委托它有几点好处:你只需要检查 个元素是否存在而不需要检查每个元素 你可以动态地添加或者删除子节点而并不需要删除相应 事件处理器 你可以在区别 元素上对相同事件做出响应 需要记住 另件事是在事件向父元素传播时候你可以停止它而且你可以覆写掉HTML元素(比如链接)缺省行为不过有时候这并不是个好主意浏览器赋予HTML元素那些行为是有原因举个例子链接可能会指向页面内某个目标不去修改它们能确保用户可以将页面当前脚本状态也加入书签6.为他人着想(命名空间 作用域和模式)你 代码几乎从来不会是文档中唯脚本代码所以保证你代码里没有其它脚本可以覆盖全局 或者全局变量就显得尤为重要有些可用模式可以来避免这个问题最基础点就是要使用 var 关键字来 化所有变量假设我们编写了下面脚本:var nav = document.getElementById('nav'); function init  {// do stuff } function show {// do stuff } function re  {// do stuff } 上面 代码中包含了个叫做nav全局变量和名字分别为 init,show 和 re 3个这些都可以访问到nav这个变量并且可以通过名互相访问:var nav = document.getElementById('nav'); function init {show ; (nav.Name  = 'show'){re ;} // do stuff } function show {var c = nav. Name;// do stuff } function re {// do stuff } 你可以将代码封装到 个对象中来避免上面那种全局式编码这样就可以将变成对象中思路方法将全局变量变成对象中属性 你需要使用“名字+冒号”方式来定义思路方法和属性并且需要在每个属性或思路方法后面加上逗号作为分割符var myScript = { nav:document.getElementById('nav'), init:function {// do stuff }, show:function {// do stuff }, re :function{// do stuff } } 所有 思路方法和属性都可以通过使用“类名+点操作符”方式从外部和内部访问到var myScript = { nav:document.getElementById('nav'), init:function {myScript.show ;(myScript.nav.Name = 'show'){myScript.re ;} // do stuff }, show:function {var c = myScript.nav. Name;// do stuff }, re :function{// do stuff } } 这种模式 缺点就是你每次从个思路方法中访问其它思路方法或属性都必须在前面加上对象名字而且对象中所有东西都是可以从外部访问如果你只是想要部分代码可以被文档中其他脚本访问可以考虑下面模块(module)模式:var myScript = function {//这些都是私有思路方法和属性 var nav = document.getElementById('nav'); function init {// do stuff } function show {// do stuff } function re {// do stuff } //公有 思路方法和属性被使用对象语法包装在 语句里面 {public:function {}, foo:'bar' } } ;你可以使用和前面 代码同样方式访问返回公有属性和思路方法在本举例中可以这么访问:myScript.public 和 myScript.foo 但是这里还有点让人觉得不舒服:当你想要从外部或者从内部个私有思路方法中访问公有思路方法时候还是要写个冗长名字(对象名字可以非常长)为了避免这点你需要将它们定义为私有并且在语句中只返回个别名:var myScript = function {// 这些都是私有思路方法和属性 var nav = document.getElementById('nav'); function init {// do stuff } function show {// do stuff // do stuff } function re {// do stuff } var foo = 'bar'; function public {} //只返回指向那些你想要访问 私有思路方法和属性指针 {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 re {// do stuff } }) ;对于那些只执行 次并且对其它没有依赖代码模块来说这种模式非常好通过遵循上面 那些规则你代码更好地为用户工作也可以使你代码在机器上更好地运行并和其他开发者代码和睦相处不过还有个群体需要考虑到7.为接手 开发者考虑(使维护更加容易)使你 脚本真正地unobtrusive最后步是在编写完代码的后仔细检查遍并且要照顾到旦脚本上线的后要接手你代码开发者考虑下面问题:所有 变量和名字是否合理并且易于理解？ 代码是否经过了合理 组织？从头到尾都很流畅吗？ 所有 依赖都显而易见吗？ 在那些可能引起混淆 地方都添加了注释吗？ 最重要 点是:要认识到文档中HTML和CSS代码相对于JavaScript来说更有可能被改变(它们负责视觉效果)所以不要在脚本代码中包含任何可以让终端用户看到和ID而是要将它们分离出来放到个保存配置信息对象中myscript = function {var config = { navigationID:'nav', visibleClass:'show' }; var nav = document.getElementById(config.navigationID); function init {show ;(nav.Name = config.visibleClass){re ;}; // do stuff }; function show {var c = nav. Name;// do stuff }; function re {// do stuff }; } ;这样维护者就知道去哪里修改这些属性 而不需要改动其他代码更多信息 以上就是我发现 7条准则如果你想要了解更多和上面所探讨主题相关东西可以看看下面链接:0
相关文章读者评论
发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
