腳本類

盡量使用id選擇器

選擇頁面DOM元素時(shí)盡量使用id選擇器，因?yàn)閕d選擇器速度最快。

合理緩存DOM對(duì)象

對(duì)于需要重復(fù)使用的DOM對(duì)象，要優(yōu)先設(shè)置緩存變量，避免每次使用時(shí)都要從整個(gè)DOM樹中重新查找。

// 不推薦
$('#mod .active').remove('active');
$('#mod .not-active').addClass('active');

// 推薦
let $mod = $('#mod');
$mod.find('.active').remove('active');
$mod.find('.not-active').addClass('active');

頁面元素盡量使用事件代理，避免直接事件綁定

使用事件代理可以避免對(duì)每個(gè)元素都進(jìn)行綁定，并且可以避免出現(xiàn)內(nèi)存泄露及需要?jiǎng)討B(tài)添加元素的事件綁定問題，所以盡量不要直接使用事件綁定。

/ 不推薦
$('.btn').on('click', function(e){
    console.log(this);
});

// 推薦
$('body').on('click', '.btn', function(e){
    console.log(this);
});

使用touchstart代替click

由于移動(dòng)端屏幕的設(shè)計(jì)，touchstart事件和click事件觸發(fā)時(shí)間之間存在300毫秒的延時(shí)，所以在頁面中沒有實(shí)現(xiàn)touchmove滾動(dòng)處理的情況下，可以使用touchstart事件來代替元素的click事件，加快頁面點(diǎn)擊的響應(yīng)速度，提高用戶體驗(yàn)。但同時(shí)我們也要注意頁面重疊元素touch動(dòng)作的點(diǎn)擊穿透問題。

$('body').on('click', '.btn', function(e){
    console.log(this);
});

// 推薦
$('body').on('touchstart', '.btn', function(e){
    console.log(this);
});

避免touchmove、scroll連續(xù)事件處理

需要對(duì)touchmove、scroll這類可能連續(xù)觸發(fā)回調(diào)的事件設(shè)置事件節(jié)流，例如設(shè)置每隔16ms（60幀的幀間隔為16.7ms，因此可以合理地設(shè)置為16ms）才進(jìn)行一次事件處理，避免頻繁的事件調(diào)用導(dǎo)致移動(dòng)端頁面卡頓。

// 不推薦
$('.scroller').on('touchmove', '.btn', function(e){
    console.log(this);
});

// 推薦
$('.scroller').on('touchmove', '.btn', function(e){
    let self = this;
    setTimeout(function(){
        console.log(self);
    }, 16);
});

避免使用eval、with，使用join代替連接符+，推薦使用ECMAScript 6的字符串模板

這些都是一些基礎(chǔ)的安全腳本編寫問題，盡可能使用較高效率的特性來完成這些操作，避免不規(guī)范或不安全的寫法。

盡量使用ECMAScript 6+的特性來編程

ECMAScript 6+一定程度上更加安全高效，而且部分特性執(zhí)行速度更快，也是未來規(guī)范的需要，所以推薦使用ECMAScript 6+的新特性來完成后面的開發(fā)。