資訊專欄INFORMATION COLUMN
摘要：指定參數(shù)為可以獲得所有子元素。如需多次操作同一集合，則應(yīng)將集合轉(zhuǎn)為數(shù)組。示例顯示為顯示為建議獲取元素的直接子元素時(shí)使用。建議盡量減少操作。事件建議優(yōu)先使用綁定事件，避免直接在屬性中或的屬性綁定事件處理。而的僅支持冒泡的事件觸發(fā)。
轉(zhuǎn)載：原地址
4 瀏覽器環(huán)境 4.1 模塊化 4.1.1 AMD解釋：
AMD 作為由社區(qū)認(rèn)可的模塊定義形式，提供多種重載提供靈活的使用方式，并且絕大多數(shù)優(yōu)秀的 Library 都支持 AMD，適合作為規(guī)范。
目前，比較成熟的 AMD Loader 有：
官方實(shí)現(xiàn)的 requirejs
百度自己實(shí)現(xiàn)的 esl
解釋：
模塊 id 必須符合以下約束條件：
類型為 string，并且是由 / 分割的一系列 terms 來(lái)組成。例如：this/is/a/module。
term 應(yīng)該符合 [a-zA-Z0-9_-]+ 規(guī)則。
不應(yīng)該有 .js 后綴。
跟文件的路徑保持一致。
4.1.2 define解釋：
在 AMD 的設(shè)計(jì)思想里，模塊名稱是和所在路徑相關(guān)的，匿名的模塊更利于封包和遷移。模塊依賴應(yīng)在模塊定義內(nèi)部通過(guò) local require 引用。
所以，推薦使用 define(factory) 的形式進(jìn)行模塊定義。
示例：
javascriptdefine(
function (require) {
}
);
解釋：
使用 return 可以減少 factory 接收的參數(shù)（不需要接收 exports 和 module），在沒(méi)有 AMD Loader 的場(chǎng)景下也更容易進(jìn)行簡(jiǎn)單的處理來(lái)偽造一個(gè) Loader。
示例：
javascriptdefine(
function (require) {
var exports = {};
// ...
return exports;
}
);
4.1.3 require
解釋：
模塊的加載過(guò)程是異步的，同步調(diào)用并無(wú)法保證得到正確的結(jié)果。
示例：
javascript// good
require(["foo"], function (foo) {
});
// bad
var foo = require("foo");
解釋：
在模塊定義中使用 global require，對(duì)封裝性是一種破壞。
在 AMD 里，global require 是可以被重命名的。并且 Loader 甚至沒(méi)有全局的 require 變量，而是用 Loader 名稱做為 global require。模塊定義不應(yīng)該依賴使用的 Loader。
解釋：
對(duì)于任何可能通過(guò) 發(fā)布-引入 的形式復(fù)用的第三方庫(kù)、框架、包，開(kāi)發(fā)者所定義的名稱不代表使用者使用的名稱。因此不要基于任何名稱的假設(shè)。在實(shí)現(xiàn)源碼中，require 自身的其它模塊時(shí)使用 relative id。
示例：
javascriptdefine(
function (require) {
var util = require("./util");
}
);
解釋：
有些模塊是依賴的模塊，但不會(huì)在模塊實(shí)現(xiàn)中被直接調(diào)用，最為典型的是 css / js / tpl 等 Plugin 所引入的外部?jī)?nèi)容。此類內(nèi)容建議放在模塊定義最開(kāi)始處統(tǒng)一引用。
示例：
javascriptdefine(
function (require) {
require("css!foo.css");
require("tpl!bar.tpl.html");
// ...
}
);
4.2 DOM
4.2.1 元素獲取
解釋：
原生獲取元素集合的結(jié)果并不直接引用 DOM 元素，而是對(duì)索引進(jìn)行讀取，所以 DOM 結(jié)構(gòu)的改變會(huì)實(shí)時(shí)反映到結(jié)果中。
示例：
html
解釋：
通過(guò) style 只能獲得內(nèi)聯(lián)定義或通過(guò) JavaScript 直接設(shè)置的樣式。通過(guò) CSS class 設(shè)置的元素樣式無(wú)法直接通過(guò) style 獲取。
4.2.3 樣式設(shè)置解釋：
除了 IE，標(biāo)準(zhǔn)瀏覽器會(huì)忽略不規(guī)范的屬性值，導(dǎo)致兼容性問(wèn)題。
4.2.4 DOM 操作解釋：
頁(yè)面 reflow 是非常耗時(shí)的行為，非常容易導(dǎo)致性能瓶頸。下面一些場(chǎng)景會(huì)觸發(fā)瀏覽器的reflow：
DOM元素的添加、修改（內(nèi)容）、刪除。
應(yīng)用新的樣式或者修改任何影響元素布局的屬性。
Resize瀏覽器窗口、滾動(dòng)頁(yè)面。
讀取元素的某些屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)) 。
解釋：
DOM 操作也是非常耗時(shí)的一種操作，減少 DOM 操作有助于提高性能。舉一個(gè)簡(jiǎn)單的例子，構(gòu)建一個(gè)列表。我們可以用兩種方式：
在循環(huán)體中 createElement 并 append 到父元素中。
在循環(huán)體中拼接 HTML 字符串，循環(huán)結(jié)束后寫父元素的 innerHTML。
第一種方法看起來(lái)比較標(biāo)準(zhǔn)，但是每次循環(huán)都會(huì)對(duì) DOM 進(jìn)行操作，性能極低。在這里推薦使用第二種方法。
4.2.5 DOM 事件解釋：
expando 屬性綁定事件容易導(dǎo)致互相覆蓋。
解釋：
標(biāo)準(zhǔn)瀏覽器中的 addEventListener 可以通過(guò)第三個(gè)參數(shù)指定兩種時(shí)間觸發(fā)模型：冒泡和捕獲。而 IE 的 attachEvent 僅支持冒泡的事件觸發(fā)。所以為了保持一致性，通常 addEventListener 的第三個(gè)參數(shù)都為 false。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/87681.html
摘要：這樣的變量增加了代碼量，并且混淆讀者。錯(cuò)誤代碼示例變量雖然聲明了，但沒(méi)被使用持續(xù)更新 JavaScript 編碼規(guī)范 一、命名規(guī)范 1. 變量 命名方法：小駝峰式命名法（由小寫字母開(kāi)始，后續(xù)每個(gè)單詞首字母都大寫） 命名建議：語(yǔ)義化的名詞 特殊：布爾值變量建議添加符合其含義的前綴動(dòng)詞 is：是否 can：能不能 has：有沒(méi)有 示例： // 頁(yè)面標(biāo)題 let pageT...
摘要：編碼規(guī)范是獨(dú)角獸公司內(nèi)部的編碼規(guī)范，該項(xiàng)目是上很受歡迎的一個(gè)開(kāi)源項(xiàng)目，在前端開(kāi)發(fā)中使用廣泛，本文的配置規(guī)則就是以編碼規(guī)范和編碼規(guī)范作為基礎(chǔ)的。 更新時(shí)間：2019-01-22React.js create-react-app 項(xiàng)目 + VSCode 編輯器 + ESLint 代碼檢查工具 + Airbnb 編碼規(guī)范 前言 為什么要使用 ESLint 在項(xiàng)目開(kāi)發(fā)過(guò)程中，編寫符合團(tuán)隊(duì)編碼規(guī)...
摘要：當(dāng)然我們還可以引入框架，這些框架一般都自帶模板處理引擎，比如等語(yǔ)義化命名和語(yǔ)義化標(biāo)簽我們盡量多采用語(yǔ)義化來(lái)命名，并且采用語(yǔ)義化標(biāo)簽來(lái)書寫代碼，多用中新增的標(biāo)簽來(lái)書寫。 1.黃金法則（Golden rule） 不管有多少人參與同一個(gè)項(xiàng)目，一定要確保每一行代碼都像是同一個(gè)人編寫的。 Every line of code should appear to be written by a si...
摘要：六字符編碼通過(guò)明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁(yè)面內(nèi)容的渲染方式。十一減少標(biāo)簽的數(shù)量編寫代碼時(shí)，盡量避免多余的父元素。未完待續(xù)編寫靈活穩(wěn)定高質(zhì)量的代碼的規(guī)范閱讀更多 一、唯一定律 無(wú)論有多少人共同參與同一項(xiàng)目，一定要確保每一行代碼都像是唯一個(gè)人編寫的。 二、HTML 2.1 語(yǔ)法 （1）用兩個(gè)空格來(lái)代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法...
摘要：譯者注規(guī)范化就是把小數(shù)點(diǎn)放在第一個(gè)非零數(shù)字的后面總結(jié)當(dāng)指數(shù)的范圍是十進(jìn)制分?jǐn)?shù)不是所有的十進(jìn)制分?jǐn)?shù)都能夠非常精確的表示例如和都不能夠被精確的表示成二進(jìn)制浮點(diǎn)數(shù)。相同的，也不能被精確表示成一個(gè)十進(jìn)制分?jǐn)?shù)，它大概能被表示成。 在JavaScript中所有的數(shù)字都是浮點(diǎn)數(shù)，本篇文章將介紹這些浮點(diǎn)數(shù)在JavaScript內(nèi)部是怎樣被轉(zhuǎn)為64位二進(jìn)制的。我們會(huì)特別考慮整數(shù)的處理，所以讀完本篇之后，...
摘要：編碼轉(zhuǎn)換為編碼下面讓我們來(lái)看下如何將編碼的數(shù)據(jù)轉(zhuǎn)換為編碼的數(shù)據(jù)。該方法是將碼進(jìn)行編碼轉(zhuǎn)換，從而得到編碼的數(shù)據(jù)。 概述 當(dāng)你在前端需要通過(guò)二進(jìn)制數(shù)據(jù)與服務(wù)端進(jìn)行通信時(shí)，你可能會(huì)遇到二進(jìn)制數(shù)據(jù)的編碼問(wèn)題。大部分服務(wù)端的字符串編碼類型都為UTF-8，而JavaScript中字符串編碼類型是UTF-16，因此，你需要一個(gè)能夠?qū)⒆址趦煞N編碼方式間進(jìn)行轉(zhuǎn)換的方法。 本文通過(guò)對(duì)utfx.js這個(gè)...
閱讀 2780·2021-09-23 11:44
閱讀 1671·2021-09-13 10:24
閱讀 2619·2021-09-08 09:36
閱讀 1231·2019-08-30 15:54
閱讀 2248·2019-08-30 13:54
閱讀 3308·2019-08-30 10:57
閱讀 1844·2019-08-29 18:43
閱讀 3609·2019-08-29 15:10
