资讯专栏INFORMATION COLUMN

JavaScript编码规范 2

yankeys / 2499人阅读

摘要:指定参数为可以获得所有子元素。如需多次操作同一集合,则应将集合转为数组。示例显示为显示为建议获取元素的直接子元素时使用。建议尽量减少操作。事件建议优先使用绑定事件,避免直接在属性中或的属性绑定事件处理。而的仅支持冒泡的事件触发。

转载:原地址

4 浏览器环境 4.1 模块化 4.1.1 AMD
[强制] 使用 AMD 作为模块定义。

解释:

AMD 作为由社区认可的模块定义形式,提供多种重载提供灵活的使用方式,并且绝大多数优秀的 Library 都支持 AMD,适合作为规范。

目前,比较成熟的 AMD Loader 有:

官方实现的 requirejs

百度自己实现的 esl

[强制] 模块 id 必须符合标准。

解释:

模块 id 必须符合以下约束条件:

类型为 string,并且是由 / 分割的一系列 terms 来组成。例如:this/is/a/module

term 应该符合 [a-zA-Z0-9_-]+ 规则。

不应该有 .js 后缀。

跟文件的路径保持一致。

4.1.2 define
[建议] 定义模块时不要指明 iddependencies

解释:

在 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

解释:

在模块定义中使用 global require,对封装性是一种破坏。

在 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

[建议] 获取元素的直接子元素时使用 children。避免使用childNodes,除非预期是需要包含文本、注释和属性类型的节点。
4.2.2 样式获取
[建议] 获取元素实际样式信息时,应使用 getComputedStylecurrentStyle

解释:

通过 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 操作有助于提高性能。举一个简单的例子,构建一个列表。我们可以用两种方式:

在循环体中 createElement 并 append 到父元素中。

在循环体中拼接 HTML 字符串,循环结束后写父元素的 innerHTML。

第一种方法看起来比较标准,但是每次循环都会对 DOM 进行操作,性能极低。在这里推荐使用第二种方法。

4.2.5 DOM 事件
[建议] 优先使用 addEventListener / attachEvent 绑定事件,避免直接在 HTML 属性中或 DOM 的 expando 属性绑定事件处理。

解释:

expando 属性绑定事件容易导致互相覆盖。

[建议] 使用 addEventListener 时第三个参数使用 false

解释:

标准浏览器中的 addEventListener 可以通过第三个参数指定两种时间触发模型:冒泡和捕获。而 IE 的 attachEvent 仅支持冒泡的事件触发。所以为了保持一致性,通常 addEventListener 的第三个参数都为 false。

[建议] 在没有事件自动管理的框架支持下,应持有监听器函数的引用,在适当时候(元素释放、页面卸载等)移除添加的监听器。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87681.html

相关文章

  • JavaScript 编码规范

    摘要:这样的变量增加了代码量,并且混淆读者。错误代码示例变量虽然声明了,但没被使用持续更新 JavaScript 编码规范 一、命名规范 1. 变量 命名方法:小驼峰式命名法(由小写字母开始,后续每个单词首字母都大写) 命名建议:语义化的名词 特殊:布尔值变量建议添加符合其含义的前缀动词 is:是否 can:能不能 has:有没有 示例: // 页面标题 let pageT...

    wenshi11019 评论0 收藏0
  • 在 React-CRA 应用中配合 VSCode 使用 ESLint 实践前端代码规范

    摘要:编码规范是独角兽公司内部的编码规范,该项目是上很受欢迎的一个开源项目,在前端开发中使用广泛,本文的配置规则就是以编码规范和编码规范作为基础的。 更新时间:2019-01-22React.js create-react-app 项目 + VSCode 编辑器 + ESLint 代码检查工具 + Airbnb 编码规范 前言 为什么要使用 ESLint 在项目开发过程中,编写符合团队编码规...

    Hujiawei 评论0 收藏0
  • HTML编码规范

    摘要:当然我们还可以引入框架,这些框架一般都自带模板处理引擎,比如等语义化命名和语义化标签我们尽量多采用语义化来命名,并且采用语义化标签来书写代码,多用中新增的标签来书写。 1.黄金法则(Golden rule) 不管有多少人参与同一个项目,一定要确保每一行代码都像是同一个人编写的。 Every line of code should appear to be written by a si...

    nifhlheimr 评论0 收藏0
  • 编写灵活、稳定、高质量的HTML代码的规范

    摘要:六字符编码通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。十一减少标签的数量编写代码时,尽量避免多余的父元素。未完待续编写灵活稳定高质量的代码的规范阅读更多 一、唯一定律 无论有多少人共同参与同一项目,一定要确保每一行代码都像是唯一个人编写的。 二、HTML 2.1 语法 (1)用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法...

    anquan 评论0 收藏0
  • JavaScript是怎样编码数字的[How numbers are encoded in Java

    摘要:译者注规范化就是把小数点放在第一个非零数字的后面总结当指数的范围是十进制分数不是所有的十进制分数都能够非常精确的表示例如和都不能够被精确的表示成二进制浮点数。相同的,也不能被精确表示成一个十进制分数,它大概能被表示成。 在JavaScript中所有的数字都是浮点数,本篇文章将介绍这些浮点数在JavaScript内部是怎样被转为64位二进制的。我们会特别考虑整数的处理,所以读完本篇之后,...

    oysun 评论0 收藏0
  • JavaScript如何实现UTF-16编码转换为UTF-8编码——utfx.js源码解析

    摘要:编码转换为编码下面让我们来看下如何将编码的数据转换为编码的数据。该方法是将码进行编码转换,从而得到编码的数据。 概述 当你在前端需要通过二进制数据与服务端进行通信时,你可能会遇到二进制数据的编码问题。大部分服务端的字符串编码类型都为UTF-8,而JavaScript中字符串编码类型是UTF-16,因此,你需要一个能够将字符串在两种编码方式间进行转换的方法。 本文通过对utfx.js这个...

    maybe_009 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<