JavaScript编码范例 2

2024年2月3日 128次阅读 来源: 小弟调调

转载：原地点

4 浏览器环境

4.1 模块化

4.1.1 AMD

[强迫] 运用 AMD 作为模块定义。

诠释：

AMD 作为由社区承认的模块定义情势，供应多种重载供应天真的运用体式格局，而且绝大多数优异的 Library 都支撑 AMD，合适作为范例。

现在，比较成熟的 AMD Loader 有：

[强迫] 模块 id 必需相符规范。

诠释：

模块 id 必需相符以下约束条件：

  1. 范例为 string，而且是由 / 支解的一系列 terms 来构成。比方：this/is/a/module。
  2. term 应当相符 [a-zA-Z0-9_-]+ 划定规矩。
  3. 不该当有 .js 后缀。
  4. 跟文件的途径坚持一致。

4.1.2 define

[发起] 定义模块时不要指明 id 和 dependencies。

诠释：

在 AMD 的设想头脑里，模块称号是和地点途径相干的，匿名的模块更利于封包和迁徙。模块依靠应在模块定义内部经由历程 local require 援用。

所以，引荐运用 define(factory) 的情势举行模块定义。

示例：

javascriptdefine(
    function (require) {
    }
);
[发起] 运用 return 来返回模块定义。

诠释：

运用 return 能够削减 factory 吸收的参数（不须要吸收 exports 和 module），在没有 AMD Loader 的场景下也更轻易举行简朴的处置惩罚来捏造一个 Loader。

示例：

javascriptdefine(
    function (require) {
        var exports = {};

        // ...

        return exports;
    }
);

4.1.3 require

[强迫] 全局运转环境中，require 必需以 async require 情势挪用。

诠释：

模块的加载历程是异步的，同步挪用并没法保证取得准确的效果。

示例：

javascript// good
require(['foo'], function (foo) {
});

// bad
var foo = require('foo');
[强迫] 模块定义中只允许运用 local require，不允许运用 global require。

诠释：

  1. 在模块定义中运用 global require，对封装性是一种损坏。
  2. 在 AMD 里，global require 是能够被重命名的。而且 Loader 以至没有全局的 require 变量，而是用 Loader 称号做为 global require。模块定义不该当依靠运用的 Loader。
[强迫] Package在完成时，内部模块的 require 必需运用 relative id。

诠释：

关于任何能够经由历程 宣布-引入 的情势复用的第三方库、框架、包，开发者所定义的称号不代表运用者运用的称号。因而不要基于任何称号的假定。在完成源码中，require 本身的别的模块时运用 relative id。

示例：

javascriptdefine(
    function (require) {
        var util = require('./util');
    }
);
[发起] 不会被挪用的依靠模块，在 factory 最先处一致 require。

诠释：

有些模块是依靠的模块，但不会在模块完成中被直接挪用，最为典范的是 css / js / tpl 等 Plugin 所引入的外部内容。此类内容发起放在模块定义最最先处一致援用。

示例：

javascriptdefine(
    function (require) {
        require('css!foo.css');
        require('tpl!bar.tpl.html');

        // ...
    }
);

4.2 DOM

4.2.1 元素猎取

[发起] 关于单个元素，只管运用 document.getElementById 猎取，防止运用document.all。
[发起] 关于多个元素的鸠合，只管运用 context.getElementsByTagName 猎取。个中 context 能够为 document 或其他元素。指定 tagName 参数为 * 能够取得一切子元素。
[发起] 遍历元素鸠应时，只管缓存鸠合长度。如需屡次操纵统一鸠合，则应将鸠合转为数组。

诠释：

原生猎取元素鸠合的效果并不直接援用 DOM 元素，而是对索引举行读取，所以 DOM 构造的转变会及时反应到效果中。

示例：

html

<div></div>


<span></span>



<script>
var elements = document.getElementsByTagName('*');

// 显现为 DIV
alert(elements[0].tagName);

var div = elements[0];
var p = document.createElement('p');
docpment.body.insertBefore(p, div);

// 显现为 P
alert(elements[0].tagName);
</script>
[发起] 猎取元素的直接子元素时运用 children。防止运用childNodes，除非预期是须要包括文本、解释和属性范例的节点。

4.2.2 款式猎取

[发起] 猎取元素现实款式信息时，应运用 getComputedStyle 或 currentStyle。

诠释：

经由历程 style 只能取得内联定义或经由历程 JavaScript 直接设置的款式。经由历程 CSS class 设置的元素款式没法直接经由历程 style 猎取。

4.2.3 款式设置

[发起] 只管经由历程为元素增加预定义的 className 来转变元素款式，防止直接操纵 style 设置。
[强迫] 经由历程 style 对象设置元素款式时，关于带单元非 0 值的属性，不允许省略单元。

诠释：

除了 IE，规范浏览器会疏忽不范例的属性值，致使兼容性问题。

4.2.4 DOM 操纵

[发起] 操纵 DOM 时，只管削减页面 reflow。

诠释：

页面 reflow 是异常耗时的行动，异常轻易致使机能瓶颈。下面一些场景会触发浏览器的reflow：

  • DOM元素的增加、修正（内容）、删除。
  • 运用新的款式或许修正任何影响元素规划的属性。
  • Resize浏览器窗口、转动页面。
  • 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)) 。
[发起] 只管削减 DOM 操纵。

诠释：

DOM 操纵也是异常耗时的一种操纵，削减 DOM 操纵有助于进步机能。举一个简朴的例子，构建一个列表。我们能够用两种体式格局：

  1. 在轮回体中 createElement 并 append 到父元素中。
  2. 在轮回体中拼接 HTML 字符串，轮回完毕后写父元素的 innerHTML。

第一种方法看起来比较规范，然则每次轮回都会对 DOM 举行操纵，机能极低。在这里引荐运用第二种方法。

4.2.5 DOM 事宜

[发起] 优先运用 addEventListener / attachEvent 绑定事宜，防止直接在 HTML 属性中或 DOM 的 expando 属性绑定事宜处置惩罚。

诠释：

expando 属性绑定事宜轻易致使相互掩盖。

[发起] 运用 addEventListener 时第三个参数运用 false。

诠释：

规范浏览器中的 addEventListener 能够经由历程第三个参数指定两种时刻触发模子：冒泡和捕捉。而 IE 的 attachEvent 仅支撑冒泡的事宜触发。所认为了坚持一致性，一般 addEventListener 的第三个参数都为 false。

[发起] 在没有事宜自动治理的框架支撑下，应持有监听器函数的援用，在恰当时刻（元素开释、页面卸载等）移除增加的监听器。
    原文作者：小弟调调
    原文地址: https://segmentfault.com/a/1190000002460944
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞