前端開發(fā)規(guī)范10_第1頁
前端開發(fā)規(guī)范10_第2頁
前端開發(fā)規(guī)范10_第3頁
前端開發(fā)規(guī)范10_第4頁
前端開發(fā)規(guī)范10_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、WEB前端開發(fā)規(guī)范1. HTML部分1.1. 遵循xhtml 1.0規(guī)則：1) 所有標(biāo)簽必須結(jié)束2) 所有標(biāo)簽必須小寫3) 標(biāo)簽屬性必須使用成對(duì)引號(hào)（單引號(hào)或雙引號(hào)）4) 標(biāo)簽屬性必須有值：<select><option selected="selected"></option></select><input type="checkbox" checked="checked" />5) 所有特殊符號(hào)必須轉(zhuǎn)義（&、<、>、©、»）6) 文

2、檔類型聲明及編碼: 統(tǒng)一為html5聲明類型<!DOCTYPE html> 編碼統(tǒng)一為<meta charset="utf-8" />, 書寫時(shí)利用IDE實(shí)現(xiàn)層次分明的縮進(jìn);7) 2. 非特殊情況下樣式文件必須外鏈至<head>.</head>之間;非特殊情況下JavaScript文件必須外鏈至頁面底部;1.2. 標(biāo)簽屬性命名規(guī)范id：連接符命名法“hello-world”class:連接符命名法“hello-world”name：駝峰式命名法“helloWorld”1) 用于結(jié)構(gòu)布局的元素id命名：主容器：main頁頭：he

3、ader頁腳：footer內(nèi)容區(qū)域：contentLOGO：logo主導(dǎo)航：main-nav二級(jí)導(dǎo)航：sub-nav2) name命名：一般用于表單元素，根據(jù)當(dāng)前元素id屬性值命名，去掉id屬性值的前綴和所有連接符，使用駝峰式命名法命名，例如id=”id-card”，那么name=”idCard”。1.3. 合理使用標(biāo)簽，語義化結(jié)構(gòu)1) 標(biāo)簽合理嵌套1. span、strong、em、p、h1h6等行級(jí)元素不能包含塊級(jí)元素：div、ul、ol、dl、p盡可能減少div嵌套, 如<div class="box"><div class="welcom

4、e">歡迎訪問XXX, 您的用 戶名是<div class="name">用戶名</div></div></div>完全可以用以下代碼替代: <div class="box"><p>歡迎 訪問XXX, 您的用戶名是<span>用戶名</span></p></div>2) 嚴(yán)禁多div癥、多span癥、多table癥，正確使用標(biāo)簽表現(xiàn)DOM結(jié)構(gòu)，在文檔去除css的情況下，任然具有結(jié)構(gòu)和可讀性，以下是html標(biāo)記的使用規(guī)范：

5、p：文本段落；dl：定義列表，可包括標(biāo)題和內(nèi)容簡(jiǎn)介的列表；ul：無序列表；ol：有序列表；h1h6：文章標(biāo)題、內(nèi)容區(qū)塊標(biāo)題，根據(jù)重要性由大到小區(qū)分，h1一個(gè)頁面只出現(xiàn)一次；strong/em：強(qiáng)調(diào)文本；img：圖像，必須加上alt屬性，當(dāng)圖像無法顯示時(shí)，可表示圖像信息，背景和按鈕使用css處理，不使用img元素；table：數(shù)據(jù)網(wǎng)格，規(guī)則的分欄布局，盡可能顯性的定寬和定高。3) 充分利用無兼容性問題的html自身標(biāo)簽, 比如span, em, strong, optgroup, label,等等; 需要為html元素添加自定義屬性的時(shí)候, 首先 要考慮下有沒有默認(rèn)的已有的合適標(biāo)簽去設(shè)置, 如果

6、沒有, 可以使用須以"data-"為前綴來添加自定義屬性，避免使用"data:"等其他命名方式;4) 書寫鏈接地址時(shí), 必須避免重定向，例如：href=" 即須在URL地址后面加上“/”；5) 合理化表單結(jié)構(gòu)a) 使用fieldset元素包裹相同類別的字段；b) 使用legend元素表示字段類別名稱；c) 使用label表示字段文本，添加必要的for屬性，以在點(diǎn)擊字段文本時(shí)，文本框能獲得焦點(diǎn)；d) 文本框不使用size屬性定義寬度，而使用css的width屬性；e) 添加maxlength屬性限制輸入字符的長(zhǎng)度。（<input type=

7、"password" id="password1" maxLength="8" />允許輸入密碼8位數(shù)）2. CSS部分2.1. Css 命名規(guī)則1) 樣式類名全部用小寫，首字符必須是字母，禁止數(shù)字或其他特殊字符。由以字母開頭的小寫字母（a-z）、數(shù)字（0-9）、下劃線（-）組成;2) 可以是單個(gè)單詞，也可以是組合單詞，要求能夠描述清楚模塊和元素的含義，使其具有語義化。避免使用 123456red,blue,left,right之類的（如顏色、字號(hào)大小等）矢量命名，如class=”left-news”、class=”2” ，以避

8、免當(dāng)狀態(tài)改變時(shí)名稱失去意義;3) 盡量用單個(gè)單詞簡(jiǎn)單描述class名稱;4) 雙單詞或多單詞組合方式：形容詞-名詞、命名空間-名次、命名空間-形容詞-名詞。例如：news-list、mod-feeds、mod-my-feeds、cell-title;5) css文件命名: 英文命名, 后綴.css. 共用wichung.css, 首頁index.css, 其他頁面依實(shí)際模塊需求命名;6)2.2. 命名空間在編碼思想上，我們可以將頁面拆分成不同的層級(jí)（布局、模塊、元件）。什么是CSS命名空間？通過統(tǒng)一的命名規(guī)范定義命名的范圍，成為CSS class & id命名空間。布局: 以語義化的單

9、詞layout作為命名空間，例如主欄布局命名 layout-main，只改變layout-命名空間后面的命名，layout始終保留。布局的命名空間為layout-xxx。模塊：頁面是由一個(gè)或多個(gè)模塊組成，模塊的英文單詞是module，規(guī)范簡(jiǎn)寫成mod，如新聞模塊mod-news，照片展示模塊mod-photo-show。模塊的命名空間為mod-xxx 。元件：元件是屬于模塊內(nèi)部的，也可以說模塊是由元件和它內(nèi)部的自有元素組成。如用戶照片信息元件cell-user-photo。元件的命名空間為cell-xxx 。2.3. 添加文檔樣式1) 引用外部文件方式添加樣式2) 嚴(yán)禁編寫標(biāo)記內(nèi)代碼，比如&l

10、t;div style="display:none;">就應(yīng)該寫成<div class="hide">，然后在樣式表中去完成樣式代碼編寫。3) 嚴(yán)禁在文檔中使用<style type="text/css"></style>代碼塊。4) 如果是發(fā)布版本，請(qǐng)壓縮合并代碼，將多個(gè)樣式文件合并為單個(gè)文件，在線css代碼壓縮工具：2.4. 屬性簡(jiǎn)寫為了節(jié)省字節(jié)數(shù)及文件大小，以下屬性請(qǐng)使用簡(jiǎn)寫方式：padding:top right bottom left;margin:top right bottom

11、left;border:style width color;border-top: style width color;border-right: style width color;border-bottom: style width color;border-left: style width color;border-color:top right bottom left;border-style:top right bottom left;border-width:top right bottom left;background:color url(image) repeat posi

12、tion; list-style:type position url(image);font-weight:400 / 700;2.5. 字體：1) 全局定義字體：bodyfont: 12px arial, helvetica, sans-serif; line-height: 1.5;2) font-family: a) 等寬字體組合：Arial, Helvetica, sans-serif;b) 不等寬（寬扁）字體組合： Verdana, Trebuchet MS, sans-serif;c) 中文字體：除非內(nèi)容文本需要，不推薦強(qiáng)制定義2.6. 編寫兼容的CSS代碼1) 頁面必須在ie68

13、、firefox、opera、safari、chrome下顯示兼容；2) 盡量不使用IE有條件注釋方式，對(duì)某一版本瀏覽器編寫額外的樣式表。針對(duì)某一版本瀏覽器編寫額外的樣式表，會(huì)對(duì)維護(hù)和管理照成困難。如出現(xiàn)有顯示不兼容現(xiàn)象應(yīng)首先考慮代碼是否有問題（如屬性是否對(duì)當(dāng)前瀏覽器支持），必須編寫與常用瀏覽器都兼容的代碼；不推薦的引用方式：<!-if IE 6><link type="text/css" rel="stylesheet" href="ie6.css" /><!endif-><!-if lte

14、 ie 7><link type="text/css" rel="stylesheet" href="ie7.css" /><!endif->3) 盡量不要使用!important或下劃線等招數(shù)編寫代碼。2.7. CSS 通用命名(1)頁面框架命名，一般具有唯一性，推薦用ID命名ID名稱命名ID名稱命名頭部header主體main腳部footer容器wrapper/container側(cè)欄side-bar欄目column布局layout(2)模塊結(jié)構(gòu)命名CLASS名稱命名CLASS名稱命名模塊(如：新聞模塊

15、)mod (mod-news)標(biāo)題欄title內(nèi)容content次級(jí)內(nèi)容sub-content(2)導(dǎo)航結(jié)構(gòu)命名CLASS名稱命名CLASS名稱命名導(dǎo)航nav主導(dǎo)航main-nav子導(dǎo)航sub-nav頂部導(dǎo)航top-nav菜單menu子菜單sub-menu(3)一般元素命名CLASS名稱命名CLASS名稱命名二級(jí)sub面包屑breadcrumb標(biāo)志logo廣告Bner(禁用banner或ad)登陸login注冊(cè)regsiter/reg搜索search加入join狀態(tài)status按鈕btn滾動(dòng)scroll標(biāo)簽頁tab文章列表list短消息msg/message當(dāng)前的current提示小技巧tip

16、s圖標(biāo)icon注釋note指南guide服務(wù)service熱點(diǎn)hot新聞news下載download投票vote合作伙伴partner友情鏈接link版權(quán)copyright演示demo下拉框select摘要summary翻頁pages主題風(fēng)格themes設(shè)置set成功suc按鈕btn文本txt顏色color/c背景bg邊框border/bor居中center上top/t下bottom/b左left/l右right/r添加add刪除del間隔sp段落p彈出層pop公共global/gb操作op密碼pwd透明tran信息info重點(diǎn)hit預(yù)覽pvw單行輸入框input首頁index日志blog相冊(cè)

17、photo留言板guestbook用戶user確認(rèn)confirm取消cancel報(bào)錯(cuò)error3. 圖片部分 1) 背景圖片：bg001,bg002,bg0032) 一般圖片：img001,img002,img0033) 特定圖片：如banner,logo按照具體情況命名4) 按鈕圖片：btn-submit,btn-cancel.5) 運(yùn)用css sprite技術(shù)集中小的背景圖或圖標(biāo), 減小頁面http請(qǐng)求, 但注意, 請(qǐng)務(wù)必在對(duì)應(yīng)的sprite psd源圖中劃參考線, 并保存至images目錄下6) 圖片格式僅限于gif | png | jpg7) 在保證視覺效果的情況下選擇最小的圖片格式與

18、圖片質(zhì)量, 以減少加載時(shí)間4. JavaScript部分4.1. Js命名規(guī)范：1) Js文件命名: 英文命名, 后綴.js. 共用wichung-common.js, 其他依實(shí)際模塊需求命名4.2. 在文檔中引用js：1) 使用外部文件方式引用js；2) 將引用js的代碼集中放置在一起，可放置在</head>之前或</body>之前，嚴(yán)禁在body間分散放置；3) 使DOM結(jié)構(gòu)和js代碼分離，禁止寫在標(biāo)記內(nèi)部；4) 如果是發(fā)布版本，請(qǐng)將多個(gè)穩(wěn)定版本的js文件壓縮、歸類放置到單個(gè)文件內(nèi)，壓縮和最小化js文件，在線packer壓縮工具：；5) 引入JS庫(kù)文件, 文件名須包

19、含庫(kù)名稱及版本號(hào)及是否為壓縮版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式為庫(kù)名稱+插件名稱, 比 如jQuery.cookie.js;4.3. 優(yōu)化jQuery代碼，提高性能：1. 原則上僅引入jQuery庫(kù), 若需引入第三方庫(kù), 須與團(tuán)隊(duì)其他人員討論決定；2. jQuery變量命名：$name，普通變量命名：name；3. 選擇器從最近的ID開始繼承或直接使用ID選擇器：$(”#id tag”)；4. 選擇器在使用class前加上標(biāo)簽名：$(”span.span1”)；5. 盡量使用ID選擇器代替class；6. 要獲取子元素請(qǐng)使用子選擇器，而不要使用后代選擇器

20、：$(”#id > span”)；7. 緩存jQuery對(duì)象，不要在代碼中重復(fù)出現(xiàn)相同的選擇器：var btn=$(”#id”)；8. 使用data()存儲(chǔ)臨時(shí)變量；9. 避免使用live()方法綁定事件；10. 在父級(jí)元素監(jiān)聽事件，對(duì)目標(biāo)元素進(jìn)行操作：$(”#id”).click(function(e)var input=$(e.target););11. 推遲加載拖放、動(dòng)畫、視覺特效等代碼，把可能會(huì)影響頁面加載速度的代碼綁定到$(window).load()事件中。下面是一些關(guān)于jQuery優(yōu)化方面的建議：1，總是從ID選擇器開始繼承 在jQuery中最快的選擇器是ID選擇器，因?yàn)樗?/p>

21、直接來自于JavaScript的getElementById()方法。例如有一段HTML代碼： <div id="content"><form method="post" action="#"><h2>交通信號(hào)燈</h2><ul id="traffic-light"><li><input type="radio" class="on" name="light" value=&qu

22、ot;red" /> 紅色</li><li><input type="radio" class="off" name="light" value="yellow" /> 黃色</li><li><input type="radio" class="off" name="light" value="green" /> 綠色</li></

23、ul><input class="button" id="traffic-button" type="submit" value="Go" /></form></div>如果采用下面的選擇器，那么效率是低效的。var traffic-button = $("#content .button");因?yàn)閎utton已經(jīng)有ID了，我們可以直接使用ID選擇器。如下所示：var traffic-button = $("#traffic-button&qu

24、ot;);當(dāng)然 這只是對(duì)于單一的元素來講。如果你需要選擇多個(gè)元素，這必然會(huì)涉及到 DOM遍歷和循環(huán)，為了提高性能，建議從最近的ID開始繼承。如下所示：var traffic-lights = $("#traffic-light input"); 2，在class前使用tag(標(biāo)簽名) 在jQuery中第二快的選擇器是tag(標(biāo)簽)選擇器( 比如：$("head") )。跟ID選擇器累時(shí)，因?yàn)樗鼇碜栽膅etElementsByTagName() 方法。繼續(xù)看剛才那段HTML代碼： <div id="content">&l

25、t;form method="post" action="#"><h2>交通信號(hào)燈</h2><ul id="traffic-light"><li><input type="radio" class="on" name="light" value="red" /> 紅色</li><li><input type="radio" class=&qu

26、ot;off" name="light" value="yellow" /> 黃色</li><li><input type="radio" class="off" name="light" value="green" /> 綠色</li></ul><input class="button" id="traffic-button" type="su

27、bmit" value="Go" /></form></div> 比如需要選擇 紅綠 單選框，那么可以使用一個(gè)tag name來限制(修飾)class ，如下所示：var active-light = $("input.on");當(dāng)然也可以結(jié)合 就近的ID，如下所示：var active-light = $("#traffic-light input.on");在使用tag來修飾class的時(shí)候，我們需要注意以下幾點(diǎn)： （1） 不要使用tag來修飾ID，如下所示： var content = $

28、("div#content"); 這樣一來，選擇器會(huì)先遍歷所有的div元素，然后匹配#content。 （好像jQuery從1.3.1開始改變了選擇器核心后，不存在這個(gè)問題了。暫時(shí)無法考證。） （2）不要畫蛇添足的使用ID來修飾ID，如下所示： var traffic-light = $("#content #traffic-light"); 注：如果使用屬性選擇器，也請(qǐng)盡量使用tag來修飾，如下所示：$('prow="c3221"').html();而不是這樣：$('row="c3221"

29、').html(); 特別提示：tag.class 的方式 在IE下的性能 好于 .class 方式。但在Firefox下 卻低于 直接 .class方式。Google瀏覽器下兩種都差不多。我頁面上有300個(gè)元素，他們的性能差距都在50毫秒以內(nèi)。 3，將jQuery對(duì)象緩存起來 把jQuery對(duì)象緩存起來 就是要告訴我們 要養(yǎng)成將jQuery對(duì)象緩存進(jìn)變量的習(xí)慣。下面是一個(gè)jQuery新手寫的一段代碼： $("#traffic-light input.on").bind("click", function() . );$("#traff

30、ic-light input.on").css("border", "1px dashed yellow");$("#traffic-light input.on").css("background-color", "orange");$("#traffic-light input.on").fadeIn("slow");但切記不要這么做。我們應(yīng)該先將對(duì)象緩存進(jìn)一個(gè)變量然后再操作，如下所示： var $active-light = $("

31、;#traffic-light input.on");$active-light.bind("click", function() . );$active-light.css("border", "1px dashed yellow");$active-light.css("background-color", "orange");$active-light.fadeIn("slow");記住，永遠(yuǎn)不要讓相同的選擇器在你的代碼里出現(xiàn)多次.注：（1）為了區(qū)分普通的Ja

32、vaScript對(duì)象和jQuery對(duì)象，可以在變量首字母前加上 $ 符號(hào)。 （2）上面代碼可以使用jQuery的鏈?zhǔn)讲僮骷右愿纳?。如下所示?var $active-light = $("#traffic-light input.on");$active-light.bind("click", function() . ) .css("border", "1px dashed yellow") .css("background-color", "orange") .fadeI

33、n("slow"); 如果你打算在其他函數(shù)中使用jQuery對(duì)象，那么你必須把它們緩存到全局環(huán)境中。如下代碼所示： / 在全局范圍定義一個(gè)對(duì)象 (例如: window對(duì)象)window.$my = head : $("head"),traffic-light : $("#traffic-light"),traffic-button : $("#traffic-button");function do-something()/ 現(xiàn)在你可以引用存儲(chǔ)的結(jié)果并操作它們var script = document.create

34、Element("script"); $my.head.append(script);/ 當(dāng)你在函數(shù)內(nèi)部操作是, 可以繼續(xù)將查詢存入全局對(duì)象中去.$my.cool-results = $("#some-ul li");$my.other-results = $("#some-table td"); / 將全局函數(shù)作為一個(gè)普通的jquery對(duì)象去使用.$my.other-results.css("border-color", "red"); $my.traffic-light.css("

35、border-color", "green"); /你也可以在其他函數(shù)中 使用它 4，對(duì)直接的DOM操作進(jìn)行限制 這里的基本思想是在內(nèi)存中建立你確實(shí)想要的東西，然后更新DOM 。這并不是一個(gè)jQuery最佳實(shí)踐，但必須進(jìn)行有效的JavaScript操作 。直接的DOM操作速度很慢。例如，你想動(dòng)態(tài)的創(chuàng)建一組列表元素，千萬不要這樣做,如下所示：var top-100-list = ., / 假設(shè)這里是100個(gè)獨(dú)一無二的字符串$mylist = $("#mylist"); / jQuery 選擇到 <ul> 元素for (var i=0,

36、 l=top-100-list.length; i<l; i+) $mylist.append("<li>" + top-100-listi + "</li>");我們應(yīng)該將整套元素字符串在插入進(jìn)dom中之前先全部創(chuàng)建好，如下所示：var top-100-list = .,$mylist = $("#mylist"), top-100-li = "" / 這個(gè)變量將用來存儲(chǔ)我們的列表元素for (var i=0, l=top-100-list.length; i<l; i+) t

37、op-100-li += "<li>" + top-100-listi + "</li>"$mylist.html(top-100-li);注：記得以前還看過一朋友寫過這樣的代碼：for (i = 0; i < 1000; i+) var $myList = $('#myList'); $myList.append('This is list item ' + i);呵呵，你應(yīng)該已經(jīng)看出問題所在了。既然把#mylist循環(huán)獲取了1000次！ 5，冒泡 除非在特殊情況下, 否則每一個(gè)js事件(例

38、如:click, mouseover等.)都會(huì)冒泡到父級(jí)節(jié)點(diǎn)。當(dāng)我們需要給多個(gè)元素調(diào)用同個(gè)函數(shù)時(shí)這點(diǎn)會(huì)很有用。代替這種效率很差的多元素事件監(jiān)聽的方法就是, 你只需向它們的父節(jié)點(diǎn)綁定一次。比如, 我們要為一個(gè)擁有很多輸入框的表單綁定這樣的行為: 當(dāng)輸入框被選中時(shí)為它添加一個(gè)class傳統(tǒng)的做法是，直接選中input，然后綁定focus等，如下所示：$("#entryform input").bind("focus", function() $(this).addClass("selected");).bind("blur&qu

39、ot;, function() $(this).removeClass("selected"););當(dāng)然上面代碼能幫我們完成相應(yīng)的任務(wù)，但如果你要尋求更高效的方法，請(qǐng)使用如下代碼： $("#entryform").bind("focus", function(e) var $cell = $(e.target); / e.target 捕捉到觸發(fā)的目標(biāo)元素 $cell.addClass("selected");).bind("blur", function(e) var $cell = $(e.

40、target); $cell.removeClass("selected"););通過在父級(jí)監(jiān)聽獲取焦點(diǎn)和失去焦點(diǎn)的事件，對(duì)目標(biāo)元素進(jìn)行操作。在上面代碼中，父級(jí)元素扮演了一個(gè)調(diào)度員的角色, 它可以基于目標(biāo)元素綁定事件。如果你發(fā)現(xiàn)你給很多元素綁定了同一個(gè)事件監(jiān)聽, 那么現(xiàn)在的你肯定知道哪里做錯(cuò)了。 同理，在Table操作時(shí)，我們也可以使用這種方式加以改進(jìn)代碼：普通的方式： $('#myTable td').click(function() $(this).css('background', 'red');); 改進(jìn)方式： $(&

41、#39;#myTable').click(function(e) var $clicked = $(e.target); $clicked.css('background', 'red');); 假設(shè)有100個(gè)td，在使用普通的方式的時(shí)候，你綁定了100個(gè)事件。在改進(jìn)方式中，你只為一個(gè)元素綁定了1個(gè)事件，至于是100個(gè)事件的效率高，還是1個(gè)事件的效率高，相信你也能自行分辨了。 6，推遲到 $(window).load jQuery對(duì)于開發(fā)者來說有一個(gè)很誘人的東西, 可以把任何東西掛到$(document).ready下。盡管$(document).rea

42、dy 確實(shí)很有用， 它可以在頁面渲染時(shí)，其它元素還沒下載完成就執(zhí)行。如果你發(fā)現(xiàn)你的頁面一直是載入中的狀態(tài)，很有可能就是$(document).ready函數(shù)引起的。你可以通過將jQuery函數(shù)綁定到$(window).load 事件的方法來減少頁面載入時(shí)的cpu使用率。它會(huì)在所有的html(包括<iframe>)被下載完成后執(zhí)行。 $(window).load(function() / 頁面完全載入后才初始化的jQuery函數(shù).);一些特效的功能，例如拖放, 視覺特效和動(dòng)畫, 預(yù)載入隱藏圖像等等，都是適合這種技術(shù)的場(chǎng)合。 7，壓縮JavaScript 壓縮和最小化你的JavaScr

43、ipt文件。 壓縮之前，請(qǐng)保證你的代碼的規(guī)范性，否則可能失敗，導(dǎo)致Js錯(cuò)誤。 8，盡量使用ID代替Class。 前面性能優(yōu)化已經(jīng)說過，ID選擇器的速度是最快的。所以在HTML代碼中，能使用ID的盡量使用ID來代替class?？聪旅娴囊粋€(gè)例子： / 創(chuàng)建一個(gè)listvar $myList = $('#myList');var myListItems = '<ul>'for (i = 0; i < 1000; i+) myListItems += '<li class="listItem' + i + '&q

44、uot;>This is a list item</li>' /這里使用的是class myListItems += '</ul>'$myList.html(myListItems);/ 選擇每一個(gè) li for (i = 0; i < 1000; i+) var selectedItem = $('.listItem' + i); 在代碼最后，選擇每個(gè)li的過程中，總共用了5066毫秒，超過5秒了。接著我們做一個(gè)對(duì)比，用ID代替class： / 創(chuàng)建一個(gè)listvar $myList = $('#myList

45、');var myListItems = '<ul>'for (i = 0; i < 1000; i+) myListItems += '<li id="listItem' + i + '">This is a list item</li>' /這里使用的是idmyListItems += '</ul>'$myList.html(myListItems); / 選擇每一個(gè) lifor (i = 0; i < 1000; i+) var sele

46、ctedItem = $('#listItem' + i); 在上段代碼中，選擇每個(gè)li總共只用了61毫秒，相比class的方式，將近快了100倍。 9，給選擇器一個(gè)上下文 jQuery選擇器中有一個(gè)這樣的選擇器，它能指定上下文。jQuery( expression, context );通過它，能縮小選擇器在DOM中搜索的范圍，達(dá)到節(jié)省時(shí)間，提高效率。普通方式：$('.myDiv')改進(jìn)方式：$('.myDiv' , $("#listItem") ) 10，慎用 .live()方法（應(yīng)該說盡量不要使用） 這是jQuery1.

47、3.1版本之后增加的方法，這個(gè)方法的功能就是為 新增的DOM元素 動(dòng)態(tài)綁定事件。但對(duì)于效率來說，這個(gè)方法比較占用資源。所以請(qǐng)盡量不要使用它。例如有這么一段代碼: <script type="text/javascript" >$(function() $("p").click(function() alert( $(this).text() ); );$("button").click(function() $("<p>this is second p</p>").appendT

48、o("body"););) </script><body><p>this is first p</p> <button>add</button></body>運(yùn)行后，你會(huì)發(fā)現(xiàn) 新增 的 p元素，并沒用被綁定click事件。你可以改成.live("click")方式解決此問題，代碼如下： $(function()$("p").live("click",function() /改成live方式 alert( $(this).text()

49、 ); );$("button").click(function() $("<p>this is second p</p>").appendTo("body"); );)但我并不建議大家這么做，我想用另一種方式去解決這個(gè)問題，代碼如下： $(function()$("p").click(function() alert( $(this).text() ););$("button").click(function() $("<p>this is sec

50、ond p</p>").click(function() /為新增的元素重新綁定一次 alert( $(this).text() ); ).appendTo("body"););)雖然我把綁定事件重新寫了一次，代碼多了點(diǎn)，但這種方式的效率明顯高于live()方式，特別是在頻繁的DOM操作中，這點(diǎn)非常明顯。 11，子選擇器和后代選擇器 后代選擇器經(jīng)常用到，比如：$("#list p");后代選擇器獲取的是元素內(nèi)部所有元素。而有時(shí)候?qū)嶋H只要獲取 子元素，那么就不應(yīng)該使用后代選擇器。應(yīng)該使用子選擇器，代碼如下：$("#list

51、> p"); 12，使用data()方法存儲(chǔ)臨時(shí)變量 下面是一段非常簡(jiǎn)單的代碼，$(function() var flag = false; $("button").click(function() if(flag) $("p").text("true"); flag=false; else $("p").text("false"); flag=true; );) 改用data()方式后，代碼如下： $(function() $("button").click(function() if( $("p").data("flag") ) $("p").text("true"); $("p").data("flag",false); else $("p").text("false"); $("p"

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論