Atom JS code snippets are supplemented

JS code snippets are complete

Off-topic

This plug-in is more heavyweight, with familiar with writing native JS to improve the efficiency of a lot. Also, support for JS also includes nodejs snippet.

javascript-snippets

Plug-in author: zenorocha

Github address: Https://github.com/zenorocha/atom-javascript-snippets

Rich JS snippet is built in. And also very good understanding and memory, play a lot of hands.

Installation

• Search for the installation in the Settings Center

Code snippets (Tab or Enter supplement)

Console command

(cd) console.dir - This command can traverse the contents of an object

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

(ce) console.error - Print out the message with an error icon

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

The "cl" console .log - print out the information

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

(cw) console.warn - Print information with a warning icon

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

DOM - Document object model

addEventListener - Event Listener

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

AppendChild - Add child elements

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

RemoveChild - Remove child elements

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

CreateElement - Create elements

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

CreateDocumentFragment - Create a document fragmentation node

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

ClassList.add - Cold property, in order to solve className can not solve the appearance, not used

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

classList.toggle - i.e. above

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

classList.remove - i.e. above

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

getElementById - Get element ID

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

getElementsByClassName - Get element class name (return value is array)

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

getElementsByTagName - Get label collection (return value is a nodeList, non-array)

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

getAttribute - Get property values

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

setAttribute - Set property values

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

removeAttribute - Remove property values

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

innerHTML - Block insertion html structure

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

textContent - plain text, naked innerHTML

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

querySelector - HTML5 new property, get selector, similar to $(‘div#name’)

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

QuerySelectorAll - I.e., multiple selectors are supported, but this one returns a nodeList

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

Loop

forEach - the method used to traverse an array or object

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

for in - the method used to traverse the object

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

Function

function - function declaration

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

the anonymous function -- anonymous function

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

prototype - prototype

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

(iife) immediately-invoked function expression - function expression

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

Call function call - callback function

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

the function of the function - callback function

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

function as a property of an object - function declaration

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

Timer

SetInterval - Methods that are constantly called based on the setup time

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

SetTimeout - I.m., the difference is that execution is generally not repeated

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});

the request module

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

The use strict - JS syntax uses strict mode

'use strict';

(al) alert - e-window

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

(pm) prompt - prompt to play the window

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