通用規(guī)范
- tab鍵用兩個(gè)空格代替
因?yàn)樵诓煌到y(tǒng)的編輯工具對(duì)tab解析不一樣蒂胞，windows下的tab鍵是占四個(gè)空格的位置，而在linux下會(huì)變成占八個(gè)空格的位置（除非你 自己設(shè)定了tab鍵所占的位置長(zhǎng)度）。 - 每個(gè)樣式屬性或者每句代碼后加 ";"
方便壓縮工具"斷句"啥箭。
HTML規(guī)范
HTML5 doctype
為每個(gè) HTML 頁面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明属划，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。
:::html
<!DOCTYPE html>
<html>
<head>
</head>
</html>
字符編碼
通過明確聲明字符編碼腹躁，能夠確保瀏覽器快速并容易的判斷頁面內(nèi)容的渲染方式。這樣做的好處是南蓬，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity）纺非，從而全部與文檔編碼一致（約定一致采用UTF-8編碼）。
:::html
<head>
<meta charset="UTF-8">
</head>
** 文檔模板**
:::html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Sample page</title>
<link rel="stylesheet" href="css_example_url" />
<script src="js_example_url"></script>
</head>
<body>
<section id="page">
<header id="header">
頁頭
</header>
<section id="body">
主體
</section>
<footer id="footer">
頁尾
</footer>
</section>
<script>
// 你的代碼
</script>
</body>
</html>
IE 兼容模式
IE 支持通過特定的 <meta> 標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 IE 版本赘方。除非有強(qiáng)烈的特殊需求烧颖，否則最好是設(shè)置為 edge mode，從而通知 IE 采用其所支持的最新的模式窄陡。
:::html
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
元素
-
html5元素
section 表示文檔中的節(jié)炕淮、區(qū)段，可以和h1-h6一起來顯示文檔結(jié)構(gòu)
article 表示一塊比較獨(dú)立的內(nèi)容或者主題內(nèi)容跳夭，塊級(jí)元素涂圆，比如blog的內(nèi)容，報(bào)紙的文章
aside 表示article以外的內(nèi)容币叹，而且應(yīng)該和article有一定的關(guān)系乘综，塊級(jí)元素
hgroup 表示一個(gè)文檔、區(qū)段(section)的標(biāo)題組合
header 表示頁眉,頁頭
footer 表示頁腳
nav 表示導(dǎo)航內(nèi)容
figure 表示以相對(duì)獨(dú)立的或外引的元素套硼，如img video
-
figcaption 表示 figure內(nèi)容的標(biāo)題
:::html <!-- hgroup 示例 --> <hgroup> <h1>文檔主標(biāo)題</h1> <h2>文檔副標(biāo)題</h2> </hgroup> <!-- figure 示例 --> <figure> <video src="ogg"></video> <figcaption>Example</figcaption> </figure> <figure> <img src="img" alt="Example image" /> <figcaption>Example image</figcaption> </figure>
-
結(jié)構(gòu)性元素
- p 表示段落卡辰。只能包含內(nèi)聯(lián)元素，不能包含塊級(jí)元素;
- div 本身無特殊含義邪意，可用于布局九妈。幾乎可以包含任何元素;
- br 表示換行符;
- hr 表示水平分割線;
- h1-h6 表示標(biāo)題。其中 h1 用于表示當(dāng)前頁面最重要的內(nèi)容的標(biāo)題;
- blockquote 表示引用雾鬼，可以包含多個(gè)段落萌朱。請(qǐng)勿純粹為了縮進(jìn)而使用 blockquote，大部分瀏覽器默認(rèn)將 blockquote 渲染為帶有左右縮進(jìn);
- pre 表示一段格式化好的文本;
-
頭部元素
- title 每個(gè)頁面必須有且僅有一個(gè) title 元素;
- base 可用場(chǎng)景：首頁策菜、頻道等大部分鏈接都為新窗口打開的頁面;
- link link 用于引入 css 資源時(shí)晶疼，可省去 media(默認(rèn)為all) 和 type(默認(rèn)為text/css) 屬性;
- style type 默認(rèn)為 text/css，可以省去;
- script type 屬性可以省去; 不贊成使用lang屬性; 不要使用古老的<!– //–>這種hack腳本, 它用于阻止第一代瀏覽器（Netscape 1和Mosaic）將腳本顯示成文字;
- noscript 在用戶代理不支持 JavaScript 的情況下提供說明;
-
文本元素
- a a 存在 href 屬性時(shí)表示鏈接又憨，無 href 屬性但有 name 屬性表示錨點(diǎn);
- em,strong em 表示句意強(qiáng)調(diào)翠霍，加與不加會(huì)引起語義變化，可用于表示不同的心情或語調(diào); strong 表示重要性強(qiáng)調(diào)蠢莺，可用于局部或全局寒匙，strong強(qiáng)調(diào)的是重要性，不會(huì)改變句意;
- abbr 表示縮寫;
- sub,sup 主要用于數(shù)學(xué)和化學(xué)公式躏将，sup還可用于腳注;
- span 本身無特殊含義;
- ins,del 分別表示從文檔中增加(插入)和刪除
-
媒體元素
- img 請(qǐng)勿將img元素作為定位布局的工具锄弱，不要用他顯示空白圖片; 必要時(shí)給img元素增加alt屬性;
- object 可以用來插入Flash;
-
列表元素
- dl 表示關(guān)聯(lián)列表考蕾，dd是對(duì)dt的解釋; dt和dd的對(duì)應(yīng)關(guān)系比較隨意：一個(gè)dt對(duì)應(yīng)多個(gè)dd、多個(gè)dt對(duì)應(yīng)一個(gè)dd会宪、多個(gè)dt對(duì)應(yīng)多個(gè)dd肖卧，都合法; 可用于名詞/單詞解釋、日程列表掸鹅、站點(diǎn)目錄;
- ul 表示無序列表;
- ol 表示有序列表, 可用于排行榜等;
- li 表示列表項(xiàng)塞帐，必須是ul/ol的子元素;
-
表單元素
- 推薦使用 button 代替 input，但必須聲明 type;
- 表單元素的 name 不能設(shè)定為 action, enctype, method, novalidate, target, submit 會(huì)導(dǎo)致表單提交混亂
屬性順序
- HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列河劝，確保代碼的易讀性。
class-
id矛紫、name data-*-
src赎瞎、for、type颊咬、href -
title务甥、alt -
aria-*、role
-
class用于標(biāo)識(shí)高度可復(fù)用組件喳篇，因此應(yīng)該排在首位敞临。id 用于標(biāo)識(shí)具體組件，應(yīng)當(dāng)謹(jǐn)慎使用（例如麸澜，頁面內(nèi)的書簽）挺尿，因此排在第二位。如：
:::html <a class="..." id="..." data-modal="toggle" href="#"> Example link </a> <input class="form-control" type="text"> <img src="..." alt="...">
文件和目錄命名約定
- 一律小寫炊邦，必須是英文單詞或者漢語拼音编矾，以英語單詞優(yōu)先，多個(gè)單詞以連字符 ( - ) 連接馁害。 只能出現(xiàn)小寫引文字母窄俏，數(shù)字和連字符。
- 很多瀏覽器會(huì)將含有這些詞的作為廣告攔截： ad碘菜、ads凹蜈、adv、banner忍啸、sponsor仰坦、gg、guangg计雌、guanggao等 頁面中盡量避免采用以上詞匯來命名缎岗。
- 該命令規(guī)范適用于所有前端維護(hù)的內(nèi)容和相關(guān)目錄。(html, css, js, png, gif, jpg, ico)白粉。
空格/標(biāo)簽/注釋
- 用兩個(gè)空格來代替制表符（tab） —— 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法传泊；
- 嵌套元素應(yīng)當(dāng)縮進(jìn)一次 —— 即兩個(gè)空格鼠渺；
- 對(duì)于屬性的定義，確保全部使用雙引號(hào)眷细，絕不要使用單引號(hào)拦盹；
- 不要省略可選的結(jié)束標(biāo)簽，如：
</li>,</body>溪椎； - 習(xí)慣性書寫注釋普舆，方便日后維護(hù)；
文件編碼約定
所有文件統(tǒng)一采用UTF-8無BOM編碼校读。換行格式為 unix 格式沼侣。
** id和class命名約定**
- id 和 class 的命名基本原則:* 內(nèi)容優(yōu)先，表現(xiàn)為輔*歉秫。首先根據(jù)內(nèi)容來命名蛾洛，如:
#header,#footer,.main-nav.如根據(jù)內(nèi)容無法找到合適的命名，可以再結(jié)合表現(xiàn)進(jìn)行命名雁芙，如：col-main,col-sub,col-extra,blue-box - id 和 class 的名稱一律小寫轧膘，多個(gè)單詞以連字符連接，如：
main-wrap - id 和 class 的名稱只能出現(xiàn)兔甘，小寫字母谎碍，數(shù)字和連字符( - )(js鉤子除外)
- id 和 class 的名稱盡量使用英文單詞命名,如確實(shí)找不到合適的單詞，可以使用拼音洞焙，如：
zhidao-com - 在不影響語意的情況下蟆淀，id 和 class 的名稱 可以適當(dāng)使用縮寫，如:
col,nav,hd,bd,fd(* 縮寫只用來表示結(jié)構(gòu)澡匪，不允許寫任何樣式*)扳碍。不要自造縮寫。 - class 對(duì)于選中命名
.selected;對(duì)于hover仙蛉，支持偽類使用:hover笋敞，不支持的使用.hover，隱藏使用.hide荠瘪。 - id 和 class 的選擇夯巷，如果只使用一次，使用id,如果使用多次使用class哀墓，如果需要和js交互趁餐，使用id,如果需要交互并且頁面中有大量重復(fù)，請(qǐng)參見下一條篮绰。
- 對(duì)于作為js鉤子的 id 和 class 命名規(guī)則為以”J_“開頭(J,象形鉤子的形狀)后雷，后面加上原應(yīng)有的命名，在使用class的時(shí)候需要放在最前面。如:
class="J_tab-content some-mod-content"臀突。（注意：鉤子勉抓，不允許在css中定義任何的樣式效果） - 很多瀏覽器會(huì)將含有這些詞的作為廣告攔截：
ad、ads候学、adv藕筋、banner、sponsor梳码、gg隐圾、guangg、guanggao等 頁面中盡量避免采用以上詞匯來命名掰茶。
文件引用
- 頁面中不允許出現(xiàn)css內(nèi)容(包括行內(nèi)樣式和style)
- 每個(gè)頁面中至多包括3個(gè)css文件暇藏，1個(gè) 產(chǎn)品級(jí) 1個(gè)模塊級(jí) 1個(gè)頁面級(jí)別
選擇器
- 命名比較短的詞，或者縮寫的不允許直接定義樣式濒蒋，如：.title,.hd,.bd,.body.必須用上級(jí)節(jié)點(diǎn)進(jìn)行限定,如：.recommend-mod .title
通用結(jié)構(gòu)
- 頁面中的塊采用如下結(jié)構(gòu)
:::html
<div class="mod recommend-mod">
<div class="hd recommend-title">Tilte </div>
<div class="bd recommend-body">contents</div>
<div class="ft recommend-footer">footer </div>
</div>
沒有內(nèi)容的部分可以省略盐碱，其中用來表示結(jié)構(gòu)的 mod hd bd ft 不允許直接定義樣式（避免嵌套帶來樣式問題）,需要定義樣式的時(shí)候需要另外增加class以控制樣式如：
:::html
<div class="mod recommend-mod">
<div class="hd recommend-title">Tilte </div>
<div class="bd recommend-body">contents</div>
<div class="ft recommend-footer">footer </div>
</div>
當(dāng)2個(gè)以上的結(jié)構(gòu)不存在的時(shí)候可以不是采用此結(jié)構(gòu)，如啊胶，沒有hd和ft,bd也可以省略
多選擇器規(guī)則之間換行
當(dāng)樣式針對(duì)多個(gè)選擇器時(shí)每個(gè)選擇器占一行
/* 推薦的寫法 */
a.btn,
input.btn,
input[type="button"] {
......
}
z-index
- 自己寫的z-index的值不能超過 100 (通用組的除外)
- 頁面中的元素內(nèi)容的z-index不能超過10(popup poptip除外)甸各，需要按照內(nèi)容定義1 2 3 4不允許直接使用如1000垛贤，9999
- popup poptip的z-index需要按照內(nèi)容使用 99以下焰坪，10以上的值（11,12,13，也可以小于10）聘惦，不允許直接使用1000某饰，9999之類大值
現(xiàn)在通用z-index記錄,使用時(shí)請(qǐng)避開和靈活使用
| ** z-index ** | 使用者 | ** 類型 ** |
|---|---|---|
| <10 | page-content | 頁面級(jí)別 |
| >10, <99 | page-popup | 頁面級(jí)別 |
| 20 | usercard用戶名片 | common通用 |
| MSG氣泡消息 | common通用 | |
| Dialog-Cover | common通用 | |
| Dialog | common通用 |
css規(guī)范
css屬性順序
顯示屬性；
元素位置善绎；
元素屬性黔漂；
元素內(nèi)容屬性；
-
css書寫順序：
:::html
例子:
.header {
/* 顯示屬性 */
display || visibility
list-style
position
top || right || bottom || left
z-index
clear
float/* 自身屬性 */ width max-width || min-width height max-height || min-height overflow || clip margin padding outline border background /* 文本屬性 */ color font text-overflow text-align text-indent line-height white-space vertical-align cursor content }
css寫法
- 小圖片（必須）sprite 合并
- 每個(gè)樣式屬性后加 ";"
- 禁止將樣式寫為單行
如
.hotel-content {margin: 10px; background-color: #efefef;}
單行顯示不好注釋禀酱，不好備注炬守，這應(yīng)該是壓縮工具的活兒~
- 禁止使用行內(nèi)（inline）樣式
- 禁止使用"*"來選擇元素
/*別這樣寫*/
* {
margin: 0;
padding: 0;
}
這樣寫是沒有必要的，一些元素在瀏覽器中默認(rèn)有margin或padding值剂跟，但是只是部分元素减途，沒有必要將所有元素的margin、padding值都置為0曹洽。
帶前綴的屬性
當(dāng)使用特定瀏覽器帶有前綴的屬性時(shí)鳍置，通過縮進(jìn)的方式，讓每個(gè)屬性的值在垂直方向?qū)R梆惯，這樣便于多行編輯彰阴。如：
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}-
優(yōu)化css選擇器
css選擇器是從右邊到左邊進(jìn)行匹配的祭示。如：#header a { color: #444; }瀏覽器會(huì)檢查整個(gè)文檔中的所有鏈接败徊，然后瀏覽器并不僅僅檢查每個(gè)鏈接的父元素辟拷，還要遍歷文檔樹去查找
id為header的祖先元素撞羽，如果被評(píng)估的鏈接不是 header 的后代，那么瀏覽器就要向上一級(jí)遍歷知道文檔的根節(jié)點(diǎn)梧兼。針對(duì)此問題放吩，有以下幾個(gè)解決方法：
- 避免使用通配規(guī)則
除了傳統(tǒng)意義的通配選擇符之外還包括相鄰兄弟選擇符, 子選擇符, 后代選擇符和屬性選擇符。推薦id羽杰、class和標(biāo)簽選擇符渡紫。 - 不要限定id選擇符
頁面中指定一個(gè)id只能對(duì)應(yīng)一個(gè)元素，所以沒有必要添加額外添加限定符考赛，如：div#header惕澎，應(yīng)該簡(jiǎn)化為：#header（提權(quán)的除外）。 - 不要限定類選擇器
不要用具體的標(biāo)簽限定類選擇符颜骤，而是根據(jù)實(shí)際情況對(duì)類名進(jìn)行擴(kuò)展唧喉。例如：ul.recommend，改成.recommend-list或者.list-recommend忍抽。 - 讓規(guī)則越具體越好
盡量不要使用ul li a這樣長(zhǎng)的選擇符八孝，最好使用.list-anchor之類的選擇符。 - 避免使用后代選擇符
通常處理后代選擇符開銷最高鸠项，使用字選擇符更高效干跛，最好使用下一條代替。 - 避免使用標(biāo)簽子選擇符
如果有如：#header > li > a祟绊，這樣基于子標(biāo)簽的自選擇符楼入，那么應(yīng)該使用一個(gè)class來關(guān)聯(lián)每個(gè)元素如：.header-anchor。盡量使用具體的類代替子選擇符牧抽。
前端規(guī)范之JavaScript
命名規(guī)范
文件命名可讀性強(qiáng)
文件夾嘉熊、文件的命名與命名空間應(yīng)能代表代碼功能，可讀性強(qiáng)扬舒。-
函數(shù)命名
駝峰命名方式:::javascript function funName() {} 常量
大寫
:::javascript
var VARIABLENAME變量
駝峰命名
:::javascript
var variableName
** 編碼規(guī)則**
-
排版縮進(jìn)
采用統(tǒng)一的縮進(jìn)方式排版代碼阐肤。縮進(jìn)為2個(gè)ASCII空格:::javascript If(condition1 || condition2) { action1; } else if (condition3 && condition4) { action2; } else if (condition5 && condition6 && condition7 && condition8) { action2; } else { default action; } -
關(guān)鍵詞讲坎、條件括弧后面使用空格孕惜；運(yùn)算操作符號(hào)兩側(cè)使用空格；語句分割符‘,’后面使用空格
:::javascript var name[空格]=[空格]value; if[空格](a,[空格]b) { } -
左大括號(hào)"{"可以居行尾衣赶，也可寫在下行首（獨(dú)自一行）诊赊；右大括號(hào)"}"單獨(dú)占一行，居行首
:::javascript if (a && b) { } ------------------------ if (a && b) { } -
句末必須用分號(hào)結(jié)尾
:::javascript var fn = function () { };//這里沒有分號(hào)的話府瞄，腳本解析器會(huì)報(bào)錯(cuò)１贪酢５夤俊！ (function () { alert(1); })(); -
單行過長(zhǎng)應(yīng)在適當(dāng)位置予以換行,增強(qiáng)可讀性
if 語句括號(hào)中的條件若過多過長(zhǎng)鲸郊，應(yīng)予以折行丰榴；折行后，||秆撮、&& 等符號(hào)應(yīng)與 “(” 后的第一個(gè)字母縱向?qū)R:::javascript if (condition1 && condition2 || condition3) { } -
if四濒、while、for职辨、do語句的執(zhí)行體總是用"{"和"}"括起來盗蟆，即使在其結(jié)構(gòu)體內(nèi)只有一條語句
:::javascript if (s==100) { alert('shit!'); } -
語法意義相互獨(dú)立的代碼將用空行分隔
:::javascript a++; b++; //！Ｊ婵恪喳资！避免同一行書寫兩個(gè)表達(dá)式 if (a > b) { value = a; //行間不用空行間隔 } var variableName = value; //與上一代碼行使用空行間隔
注釋規(guī)范
- 文件注釋
文件注釋要標(biāo)明作者、文件版本腾供、創(chuàng)建/修改時(shí)間仆邓、重大版本修改記錄
函數(shù)描述
-
文件版本、創(chuàng)建或者修改時(shí)間伴鳖、功能节值、作者
:::javascript /** * @file Image.js * @description 功能詳細(xì)描述 */ -
函數(shù)或者類等都要添加頭描述
:::javascript /** * 簡(jiǎn)述 * * 功能詳細(xì)描述 * * @param <String> arg1 參數(shù)1 * @param <Number> arg2 參數(shù)2，默認(rèn)為0 * @return <Boolean> 看xxx是否成功 */ function fooFunction (arg1, arg2) { }
- 操作注釋
單行注釋,寫在代碼上面
-
多行注釋
:::javascript /* * 注釋操作說明 */ for( var i = 0; i < obj.lenght; i++) { }
- 注釋標(biāo)簽參考
| * 標(biāo)簽 * | ** 描述 ** |
|---|---|
| @addon | 把一個(gè)函數(shù)標(biāo)記為另一個(gè)函數(shù)的擴(kuò)張榜聂，另一個(gè)函數(shù)的定義不在源文件中搞疗。 |
| @argument | 用大括號(hào)中的自變量類型描述一個(gè)自變量。 |
| @author | 函數(shù)/類作者的姓名峻汉。 |
| @base | 如果類是繼承得來贴汪，定義提供的類名稱脐往。 |
| @class | 用來給一個(gè)類提供描述休吠，不能用于構(gòu)造器的文檔中。 |
| @constructor | 描述一個(gè)類的構(gòu)造器业簿。 |
| @deprecated | 表示函數(shù)/類已被忽略瘤礁。 |
| @exception | 描述函數(shù)/類產(chǎn)生的一個(gè)錯(cuò)誤。 |
| @exec | |
| @extends | 表示派生出當(dāng)前類的另一個(gè)類梅尤。 |
| @fileoverview | 表示文檔塊將用于描述當(dāng)前文件柜思。這個(gè)標(biāo)簽應(yīng)該放在其它任何標(biāo)簽之前。 |
| @final | 指出函數(shù)/類巷燥。 |
| @ignore | 讓jsdoc忽視隨后的代碼赡盘。 |
| @link | 類似于@link標(biāo)簽，用于連接許多其它頁面缰揪。 |
| @member | 定義隨后的函數(shù)為提供的類名稱的一個(gè)成員陨享。 |
| @param | 用大括號(hào)中的參數(shù)類型描述一個(gè)參數(shù)。 |
| @private | 表示函數(shù)/類為私有，不應(yīng)包含在生成的文檔中抛姑。 |
| @requires | 表示需要另一個(gè)函數(shù)/類赞厕。 |
| @return | 描述一個(gè)函數(shù)的返回值。 |
| @returns | 描述一個(gè)函數(shù)的返回值定硝。 |
| @see | 連接到另一個(gè)函數(shù)/類皿桑。 |
| @throws | 描述函數(shù)/類可能產(chǎn)生的錯(cuò)誤。 |
| @type | 指定函數(shù)/成員的返回類型蔬啡。 |
| @version | 函數(shù)/類的版本號(hào)诲侮。 |
條件判斷的陷阱
- 在if判斷中，使用
===作比較,避免掉入==造成的陷阱
在條件判斷時(shí)箱蟆，這樣的一些值表示false：
null浆西，undefined，字符串''顽腾，數(shù)字0近零，NaN-
而在
==時(shí)，則會(huì)有一些讓人難以理解的陷阱,如：(function () { var undefined; undefined == null; // true 1 == true; //true 2 == true; // false 0 == false; // true 0 == ''; // true NaN == NaN;// false [] == false; // true [] == ![]; // true })(); 對(duì)于不同類型的
==判斷抄肖，有這樣一些規(guī)則久信，順序自上而下：
1.
undefined與null相等
2.一個(gè)是number一個(gè)是string時(shí)，會(huì)嘗試將string轉(zhuǎn)換為number
3.嘗試將boolean轉(zhuǎn)換為number漓摩，0或1
4.嘗試將Object轉(zhuǎn)換成number或string裙士，取決于另外一個(gè)對(duì)比量的類型
所以，對(duì)于0管毙、空字符串的判斷腿椎，建議使用 === 。===會(huì)先判斷兩邊的值類型夭咬，類型不匹配時(shí)為false啃炸。
簡(jiǎn)單類型轉(zhuǎn)換
number to string的轉(zhuǎn)換，建議使用
1 + ''或String(1)卓舵，不使用new String(1)或1.toString()的方式南用。-
string to number的轉(zhuǎn)換，建議使用
parseInt掏湾，必須顯式指定第二個(gè)參數(shù)的進(jìn)制裹虫。下面的例子展示了不指定進(jìn)制的風(fēng)險(xiǎn)：parseInt('08'); // 0 parseInt('08', 10); //8 float to integer的轉(zhuǎn)換，建議使用
Math.floor/Math.round/Math.ceil方法融击，不使用parseInt筑公。
字符串拼接
字符串拼接，應(yīng)使用數(shù)組保存字符串片段尊浪，使用時(shí)調(diào)用join方法匣屡。避免使用+或+=的方式拼接較長(zhǎng)的字符串涩拙，每個(gè)字符串都會(huì)使用一個(gè)小的內(nèi)存片段，過多的內(nèi)存片段會(huì)影響性能耸采。如:
不好的拼接方式兴泥，+=
var str = '';
for (var i = 0, len = list.length; i < len; i++) {
str+= '<div>' + list[i] + '</div>';
}
dom.innerHTML = str;
正確拼接方式，Array的push+join
var str = [];
for (var i = 0, len = list.length; i < len; i++) {
str.push('<div>'+ list[i] + '</div>');
}
dom.innerHTML = str.join('');
獲取元素
- 獲取單個(gè)元素
-
通常虾宇，我們使用
document.getElementById來獲取dom元素搓彻，避免使用document.all。document.getElementById是標(biāo)準(zhǔn)方法嘱朽，兼容所有瀏覽器ie瀏覽器會(huì)混淆元素的id和name屬性旭贬，document.getElementById可能獲得不期望的元素。 在對(duì)元素的id與name屬性的命名需要非常小心搪泳，應(yīng)使用不同的命名法稀轨。 下面是一個(gè)name與id沖突的例子： <input type="text" name="test"> <div id="test"></div> <button onclick="alert(document.getElementById('test').tagName)"></button> <!-- ie6下為INPUT -->
