编程实践

时间 2019-12-10

标签编程实践繁體版

原文原文链接

UI层的松耦合

将CSS从JavaScript中抽离前端
- 不容许在js中修改元素的样式，最佳方法是控制className。
- 有例外：好比说定位等问题，能够修改而不使用className控制。
将JavaScript从HTML中抽离jquery
- 不容许使用 on 属性（好比onclick）来绑定一个事件处理程序。
- js代码应当写在外部文件中而后引用。
将HTML从JavaScript中抽离数组
- 没法避免，使用前端模板工具，推荐使用Handlebar。

规则
- 规则一：隔离应用逻辑，即把事件触发须要执行的代码提取出来。
- 规则二：不要分发事件对象，应用逻辑不该当依赖于event对象来正确完成功能。最佳的办法是在事件处理程序中使用event（包括获取event里的数据，阻止默认事件，阻止事件冒泡），而后将拿到的数据在传给应用逻辑。

检测原始值浏览器
- 若是你但愿一个值是字符串、数字、布尔值或undefined。最佳选择是使用typeof运算符。
- typeof独特在于即便未声明的变量也不会报错。未声明的变量和值为undefined的变量都返回undefined。
  - 字符串，typeof返回"string"。
  - 数字，typeof返回"number"。
  - 布尔值，typeof返回"boolean"。
  - undefined，typeof返回"undefined"。
- 若要检测null，直接使用 === 或 !== 。
检测引用值函数
- 最佳的选择是使用instanceof运算符。
- 但instanceof不能跨frame。
- 函数和数组通常不用instanceof。
检测函数工具
- 检测函数最好的方法是使用 typeof ，由于它能够跨frame。
- 但在IE8和更早版本中，使用typeof检测用于获取DOM节点的方法（例如，getElementById等方法)会返回object而不是function。所以检测DOM的方法的最好的方法是 in运算符（若是须要兼容IE8及如下）。例如"querySelectorAll" in document。

检测数组prototype

jsfunction isArray(value){
    return Object.prototype.toString.call(value) === "[object Array]";
}

抛出错误就是本身留下告诉本身为何失败的缘由
抛出错误最佳的地方实在工具函数中，公共接口中。
- 一旦修复了一个很难调试的错误，尝试增长一两个自定义错误。当再次发生错误时，这将有助于更容易地解决问题。
- 若是正在编写代码，思考一下：我但愿「某些事情」不会发生，若是发生，个人代码会一团糟糕。这时若是某些事情发生，就抛出一个错误。
- 若是正在编写的代码别人也会使用，思考一下他们使用的方式，在特定的状况下抛出错误。