您的位置:首页 > Web前端 > JavaScript

<<编写可维护的javascript>> part2: 编程实践

2016-01-24 20:23 543 查看
chapter5 UI层的松耦合- css 去 javascript > 不要用css 的expression 表达式
- javascript 去 css
- html 去 javascript
- javascript 去 html > 服务器加载: 从服务器端获取, 容易造成XSS 漏洞
> 简单模版: js奇淫技巧,
> 复杂模版: 用模版引擎如 Handlebars.js, [注意]获取模版时用jquery.html()方法而不是text()方法, 否则ie8会有问题

chapter6 避免全局变量- 全局变量的问题 > 命名冲突 > 难以测试- 单全局变量模式: 参考<<javscipt 设计模式>>
> 命名空间 >> 在一个全局变量的基础上, 增加命名空间
> 模块
- 零全局变量, 在一个匿名函数内执行, 不常用

chapter7 事件处理- 典型用法, 不太好
- 好的用法 > [优点]
>> 隔离了应用逻辑, 提高了可重用性
>> 阻止了分发event对象, 提高了便于测试, 方法可重用性, 代码可读性
chapter8 避免空比较- 监测原始值
> 用 typeof 来检查原始类型, 来确保安全, [字符串, 数字, 布尔值, undefined] > 不要用typeof 来检测null! 不要用typeof 来检测null! 不要用typeof 来检测null! 用 === | !==
- 监测引用值 > 用 instanceof来检查引用类型 > instanceof 不能跨帧(frame)
- 检测函数 > typeof可以跨帧(frame)
> 然而ie8 - 浏览器中, typeof 检测dom节点的函数时返回的是object
- 监测数组 > 用 Array.isArray() 方法
- 检测属性在不在对象中 > 用 in, in大法好
> 用hasOwnProperty(),但是在ie8-中,DOM对象并非继承Object. 所以不包含这个方法

chapter9 配置数据从代码分离- 抽离配置数据: [URL, 重复的值, 设置...] > 用对象保存
chapter10 抛出自定义异常- 抛异常的意义 > 正确的抛异常可以帮助我们找到错误的地方
> 对旧的ie 找到错误有较好的帮助 > 只在必要的地方抛
> 错误类型: [Error, EvalError, TypeError, RangeError, ...]- thorw
- try-catch
chapter11 不是你的对象不要动- 如果你的代码没有创建这些对象, 不要修改他们, 不要修改他们, 不要修改他们, 包括: > 原生对象(Object, Array...) > DOM 对象 (document)
> BOM 对象 (window)
> 类库对象
- 原则 > 不覆盖方法
> 不新增方法, [缺点]如下 >> 命名冲突
>> 如果将来原生的方法和你的方法行为不一致, 后果很悲催 (血淋淋的例子-> prototype.js 的getElementByClassName 方法)
> 不删除方法
- 更好的解决办法, 用最受欢迎的继承来扩充对象 > 基于对象的继承(原型继承) >> 原理是创建一个属于你的对象, 就可以随意修改了
> 基于类型的继承
> 门面模式 (复制一份)
- 关于 polyfill shim: http://www.ituring.com.cn/article/details/766# > [shim概念]: 一个shim是一个,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现.(一种模仿未来API并为旧浏览器提供后备功能的“衬垫”) > [polyfill概念]: 一个polyfill是一段代码(或者插件),提供了那些开发者们希望浏览器原生提供支持的功能.因此,一个polyfill就是一个用在浏览器API上的shim.我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill.然后新旧浏览器就都可以使用这个API了.
[例如] shim: 比如 jQuery 的 $.ajax 封装了 XMLHttpRequest 和 IE 用 ActiveXObject 方式创建 xhr 对象;polyfill 特指 shim 成的 api 是遵循标准的,其典型做法是在IE浏览器中增加 window.XMLHttpRequest ,内部实现使用 ActiveXObject。在实际中为了方便做对比,会特指 shim 的 api 不是遵循标准的,而是自己设计的。
>为了提高可维护性, 还是尽量避免使用polyfill(自行脑补的血淋淋的例子-> prototype.js 的getElementByClassName 方法?)

- 阻止修改
> 防止扩展: 禁止添加属性和方法, 但是已经属性存在的方法和属性可以修改和删除
> 密封: 子集是"防止扩展", 而且增加了对象可以删除
> 冻结: 子集是"密封", 而且禁止对象"修改"已经存在的属性和方法
chapter12 浏览器嗅探- user-agent 监测 > 浏览器的user-agent不总是正确的, 有可能呗其他工具修改
- 特性检测: 特性检测大法好 > 针对浏览器特有的功能特性来监测浏览器
- 特性推断: 不恰当的使用特性检测, 应该避免[/b]
- 浏览器推断: 不恰当的使用特性检测和特性检测, 应该避免[/b]
来自为知笔记(Wiz)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: