Atom JS 代碼片段補(bǔ)全

JS 代碼片段補(bǔ)全

題外話

這款插件就比較重量級(jí)了，用熟悉了寫(xiě)原生 JS 的效率要提升很多。而且，不僅支持 JS 還包含了 nodejs snippet。

javascript-snippets

插件作者: zenorocha

Github地址 : https://github.com/zenorocha/atom-javascript-snippets

內(nèi)置了豐富的 JS snippet。而且也很好理解和記憶，耍多了會(huì)上手的。

安裝

• 在設(shè)置中心搜索安裝

代碼片段(Tab 或者 Enter 補(bǔ)全)

Console 命令

[cd] console.dir — 這條命令可以遍歷一個(gè)對(duì)象內(nèi)容

console.dir(${1:obj});

[ce] console.error — 打印出信息帶有錯(cuò)誤圖標(biāo)

console.error(${1:obj});

[cl] console.log — 打印出信息

console.log(${1:obj});

[cw] console.warn — 打印帶有警告圖標(biāo)的信息

console.warn(${1:obj});

DOM — 文檔對(duì)象模型

[ae] addEventListener — 事件監(jiān)聽(tīng)

${1:document}.addEventListener('${2:event}', function(e) {
    ${0:// body...}
});

[ac] appendChild — 增加子元素

${1:document}.appendChild(${2:elem});

[rc] removeChild — 刪除子元素

${1:document}.removeChild(${2:elem});

[cel] createElement — 創(chuàng)建元素

${1:document}.createElement(${2:elem});

[cdf] createDocumentFragment — 創(chuàng)建文檔碎片節(jié)點(diǎn)

${1:document}.createDocumentFragment(${2:elem});

[ca] classList.add — 冷門(mén)屬性，為了解決 className 不能解決出現(xiàn)，沒(méi)用過(guò)

${1:document}.classList.add('${2:class}');

[ct] classList.toggle — 同上

${1:document}.classList.toggle('${2:class}');

[cr] classList.remove — 同上

${1:document}.classList.remove('${2:class}');

[gi] getElementById — 獲取元素ID

${1:document}.getElementById('${2:id}');

[gc] getElementsByClassName — 獲取元素類(lèi)名[返回值為數(shù)組]

${1:document}.getElementsByClassName('${2:class}');

[gt] getElementsByTagName — 獲取標(biāo)簽集合[返回值是一個(gè)nodeList,非數(shù)組]

${1:document}.getElementsByTagName('${2:tag}');

[ga] getAttribute — 獲取屬性值

${1:document}.getAttribute('${2:attr}');

[sa] setAttribute — 設(shè)置屬性值

${1:document}.setAttribute('${2:attr}', ${3:value});

[ra] removeAttribute — 移除屬性值

${1:document}.removeAttribute('${2:attr}');

[ih] innerHTML — 代碼塊插入 html 結(jié)構(gòu)

${1:document}.innerHTML = '${2:elem}';

[tc] textContent — 純文本，裸奔的 innerHTML

${1:document}.textContent = '${2:content}';

[qs] querySelector — HTML5 新屬性，獲取選擇器，類(lèi)似 JQ 的 $(‘div#name’)

${1:document}.querySelector('${2:selector}');

[qsa] querySelectorAll — 同上，都支持多個(gè)選擇器，但這個(gè)返回一個(gè) nodeList

${1:document}.querySelectorAll('${2:selector}');

Loop

[fe] forEach — 遍歷數(shù)組或者對(duì)象用的方法

${1:myArray}.forEach(function(${2:elem}) {
    ${0:// body...}
});

[fi] for in — 遍歷對(duì)象用的方法

for (${1:prop} in ${2:obj}) {
    if (${2:obj}.hasOwnProperty(${1:prop})) {
        ${0:// body...}
    }
}

Function

[fn] function — 函數(shù)聲明

function ${1:methodName} (${2:arguments}) {
    ${0:// body...}
}

[afn] anonymous function —- 匿名函數(shù)

function(${1:arguments}) {
    ${0:// body...}
}

[pr] prototype — 原型

${1:ClassName}.prototype.${2:methodName} = function(${3:arguments}) {
    ${0:// body...}
}

[iife] immediately-invoked function expression — 函數(shù)表達(dá)式

(function(window, document, undefined) {
    ${0:// body...}
})(window, document);

[call] function call — 回調(diào)函數(shù)

${1:methodName}.call(${2:context}, ${3:arguments})

[apply] function apply — 回調(diào)函數(shù)

${1:methodName}.apply(${2:context}, [${3:arguments}])

[ofn] function as a property of an object — 函數(shù)聲明

${1:functionName}: function(${2:arguments}) {
    ${3:// body...}
}

Timer

[si] setInterval — 根據(jù)設(shè)置時(shí)間不斷調(diào)用的方法

setInterval(function() {
    ${0:// body...}
}, ${1:delay});

[st] setTimeout — 同上,區(qū)別在于一般不會(huì)重復(fù)執(zhí)行

setTimeout(function() {
    ${0:// body...}
}, ${1:delay});

NodeJS

[ase] assert.equal

assert.equal(${1:actual}, ${2:expected});

[asd] assert.deepEqual

assert.deepEqual(${1:actual}, ${2:expected});

[asn] assert.notEqual

assert.notEqual(${1:actual}, ${2:expected});

[me] module.exports

module.exports = ${1:name};

[pe] process.exit

process.exit(${1:code});

[re] require — 請(qǐng)求模塊

require('${1:module}');

BDD

[desc] describe

describe('${1:description}', function() {
    ${0:// body...}
});

[ita] it asynchronous

it('${1:description}', function(done) {
    ${0:// body...}
});

[its] it synchronous

it('${1:description}', function() {
    ${0:// body...}
});

[itp] it pending

it('${1:description}');

Misc

[us] use strict — JS語(yǔ)法使用嚴(yán)格模式

'use strict';

[al] alert — 彈窗

alert('${1:msg}');

[pm] prompt — 提示彈窗

prompt('${1:msg}');