国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

寫出高效jquery代碼的19條指南_jquery

來源:懂視網 責編:小采 時間:2020-11-27 21:21:02
文檔

寫出高效jquery代碼的19條指南_jquery

寫出高效jquery代碼的19條指南_jquery:首先,在腦子里牢牢記住jQuery就是javascript。這意味著我們應該采取相同的編碼慣例,風格指南和最佳實踐。首先,如果你是一個javascript新手,我建議您閱讀 《給JavaScript初學者的24條最佳實踐》 ,這是一篇高質量的javascript教程,接觸jQuer
推薦度:
導讀寫出高效jquery代碼的19條指南_jquery:首先,在腦子里牢牢記住jQuery就是javascript。這意味著我們應該采取相同的編碼慣例,風格指南和最佳實踐。首先,如果你是一個javascript新手,我建議您閱讀 《給JavaScript初學者的24條最佳實踐》 ,這是一篇高質量的javascript教程,接觸jQuer

首先,在腦子里牢牢記住jQuery就是javascript。這意味著我們應該采取相同的編碼慣例,風格指南和最佳實踐。
首先,如果你是一個javascript新手,我建議您閱讀 《給JavaScript初學者的24條最佳實踐》 ,這是一篇高質量的javascript教程,接觸jQuery之前最好先閱讀。
當你準備使用jQuery,我強烈建議你遵循下面這些指南:
1.緩存變量
DOM遍歷是昂貴的,所以盡量將會重用的元素緩存。
代碼如下:
// 糟糕

h = $('#element').height();
$('#element').css('height',h-20);

// 建議

$element = $('#element');
h = $element.height();
$element.css('height',h-20);
2.避免全局變量
jQuery與javascript一樣,一般來說,最好確保你的變量在函數作用域內。
代碼如下:
// 糟糕

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

// 建議

var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);
3.使用匈牙利命名法
在變量前加$前綴,便于識別出jQuery對象。
代碼如下:
// 糟糕

var first = $('#first');
var second = $('#second');
var value = $first.val();

// 建議 - 在jQuery對象前加$前綴

var $first = $('#first');
var $second = $('#second'),
var value = $first.val();
4.使用 Var 鏈(單 Var 模式)
將多條var語句合并為一條語句,我建議將未賦值的變量放到后面。
代碼如下:
var
$first = $('#first'),
$second = $('#second'),
value = $first.val(),
k = 3,
cookiestring = 'SOMECOOKIESPLEASE',
i,
j,
myArray = {};
5.請使用'On'
在新版jQuery中,更短的 on(“click”) 用來取代類似 click() 這樣的函數。在之前的版本中 on() 就是 bind()。自從jQuery 1.7版本后,on() 附加事件處理程序的首選方法。然而,出于一致性考慮,你可以簡單的全部使用 on()方法。
代碼如下:
// 糟糕

$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});

$first.hover(function(){
$first.css('border','1px solid red');
})

// 建議
$first.on('click',function(){
$first.css('border','1px solid red');
$first.css('color','blue');
})

$first.on('hover',function(){
$first.css('border','1px solid red');
})
6.精簡javascript
一般來說,最好盡可能合并函數。
代碼如下:
// 糟糕

$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});

// 建議

$first.on('click',function(){
$first.css({
'border':'1px solid red',
'color':'blue'
});
});
7.鏈式操作
jQuery實現方法的鏈式操作是非常容易的。下面利用這一點。
代碼如下:
// 糟糕

$second.html(value);
$second.on('click',function(){
alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);

// 建議

$second.html(value);
$second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
8.維持代碼的可讀性
伴隨著精簡代碼和使用鏈式的同時,可能帶來代碼的難以閱讀。添加縮緊和換行能起到很好的效果。
代碼如下:
// 糟糕

$second.html(value);
$second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

// 建議

$second.html(value);
$second
.on('click',function(){ alert('hello everybody');})
.fadeIn('slow')
.animate({height:'120px'},500);
9.選擇短路求值
短路求值是一個從左到右求值的表達式,用 &&(邏輯與)或 || (邏輯或)操作符。
代碼如下:
// 糟糕

function initVar($myVar) {
if(!$myVar) {
$myVar = $('#selector');
}
}

// 建議

function initVar($myVar) {
$myVar = $myVar || $('#selector');
}
10.選擇捷徑
精簡代碼的其中一種方式是利用編碼捷徑。
代碼如下:
// 糟糕

if(collection.length > 0){..}

// 建議

if(collection.length){..}
11.繁重的操作中分離元素
如果你打算對DOM元素做大量操作(連續設置多個屬性或css樣式),建議首先分離元素然后在添加。
代碼如下:
// 糟糕

var
$container = $("#container"),
$containerLi = $("#container li"),
$element = null;

$element = $containerLi.first();
//... 許多復雜的操作

// better

var
$container = $("#container"),
$containerLi = $container.find("li"),
$element = null;

$element = $containerLi.first().detach();
//... 許多復雜的操作

$container.append($element);
12.熟記技巧
你可能對使用jQuery中的方法缺少經驗,一定要查看的文檔,可能會有一個更好或更快的方法來使用它。
代碼如下:
// 糟糕

$('#id').data(key,value);

// 建議 (高效)

$.data('#id',key,value);
13.使用子查詢緩存的父元素
正如前面所提到的,DOM遍歷是一項昂貴的操作。典型做法是緩存父元素并在選擇子元素時重用這些緩存元素。
代碼如下:
// 糟糕

var
$container = $('#container'),
$containerLi = $('#container li'),
$containerLiSpan = $('#container li span');

// 建議 (高效)

var
$container = $('#container '),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');
14.避免通用選擇符
將通用選擇符放到后代選擇符中,性能非常糟糕。
代碼如下:
// 糟糕

$('.container > *');

// 建議

$('.container').children();
避免隱式通用選擇符
通用選擇符有時是隱式的,不容易發現。

// 糟糕

$('.someclass :radio');

// 建議

$('.someclass input:radio');
優化選擇符
例如,Id選擇符應該是唯一的,所以沒有必要添加額外的選擇符。

// 糟糕

$('div#myid');
$('div#footer a.myLink');

// 建議
$('#myid');
$('#footer .myLink');
15.避免多個ID選擇符
在此強調,ID 選擇符應該是唯一的,不需要添加額外的選擇符,更不需要多個后代ID選擇符。
代碼如下:
// 糟糕

$('#outer #inner');

// 建議

$('#inner');
16.堅持最新版本
新版本通常更好:更輕量級,更高效。顯然,你需要考慮你要支持的代碼的兼容性。例如,2.0版本不支持ie 6/7/8。

摒棄棄用方法
關注每個新版本的廢棄方法是非常重要的并盡量避免使用這些方法。
代碼如下:
// 糟糕 - live 已經廢棄

$('#stuff').live('click', function() {
console.log('hooray');
});

// 建議
$('#stuff').on('click', function() {
console.log('hooray');
});
// 注:此處可能不當,應為live能實現實時綁定,delegate或許更合適
17.利用CDN
谷歌的CND能保證選擇離用戶最近的緩存并迅速響應。(使用谷歌CND請自行搜索地址,此處地址以不能使用,推薦jquery官網提供的CDN)。

18.必要時組合jQuery和javascript原生代碼
如上所述,jQuery就是javascript,這意味著用jQuery能做的事情,同樣可以用原生代碼來做。原生代碼(或 vanilla)的可讀性和可維護性可能不如jQuery,而且代碼更長。但也意味著更高效(通常更接近底層代碼可讀性越差,性能越高,例如:匯編,當然需要更強大的人才可以)。牢記沒有任何框架能比原生代碼更小,更輕,更高效

鑒于vanilla 和 jQuery之間的性能差異,我強烈建議吸收兩人的精華,使用(可能的話)和jQuery等價的原生代碼。

19.最后忠告
最后,我記錄這篇文章的目的是提高jQuery的性能和其他一些好的建議。如果你想深入的研究對這個話題你會發現很多樂趣。記住,jQuery并非不可或缺,僅是一種選擇。思考為什么要使用它。DOM操作?ajax?模版?css動畫?還是選擇符引擎?或許javascript微型框架或jQuery的定制版是更好的選擇。

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

寫出高效jquery代碼的19條指南_jquery

寫出高效jquery代碼的19條指南_jquery:首先,在腦子里牢牢記住jQuery就是javascript。這意味著我們應該采取相同的編碼慣例,風格指南和最佳實踐。首先,如果你是一個javascript新手,我建議您閱讀 《給JavaScript初學者的24條最佳實踐》 ,這是一篇高質量的javascript教程,接觸jQuer
推薦度:
標簽: 代碼 19 高效
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 免费日本黄色网址 | 图片专区亚洲 欧美 另类 | 国产日韩在线观看视频网站 | 欧美成人中文字幕在线视频 | 国产99在线观看 | 色妞综合网 | 精品国产亚一区二区三区 | 日韩欧美国产高清在线观看 | 国产精品特级毛片一区二区三区 | 免费中国女人69xxxxx视频 | 欧美日韩国产精品 | 国产精品每日更新在线观看 | 国产日韩在线观看视频网站 | 国产午夜精品视频 | 久久久久国产成人精品亚洲午夜 | 日韩欧美精品在线观看 | 欧美午夜一区二区福利视频 | 欧美视频一区二区在线观看 | 国产片一区二区三区 | 欧美一级成人影院免费的 | 国产精品久久二区三区色裕 | 欧美亚洲另类在线观看 | 国产产一区二区三区久久毛片国语 | 欧美日韩国产一区二区三区播放 | 2022国产精品福利在线观看 | 欧美国产精品 | 国产精品亚洲片在线观看不卡 | 欧美va免费精品高清在线 | 久久精品国产欧美成人 | 色在线免费视频 | 青青热久久综合网伊人 | 久久久久久亚洲精品影院 | 欧美一区二区在线 | 日韩在线第三页 | 久久久久久久亚洲精品 | 亚洲视频在线免费看 | 欧美日本激情 | 国产三级一区二区 | 国产精品一区二区久久精品 | 亚洲精品国产第七页在线 | 精品国产欧美一区二区五十路 |