Atom Editor Toss _ (+) JS Snippet completion (plugin: javascript-snippets)

Source: Internet
Author: User
Tags assert event listener set time setinterval

Off Topic

This plug-in is more heavyweight .... With the familiarity of writing native JS efficiency to improve very much ... And, not only supports JS but also includes the Nodejs snippet

Javascript-snippets

Plugin Author: Zenorocha
GitHub Address: Https://github.com/zenorocha/atom-javascript-snippets

Built-in Rich JS snippet. and also very good understanding and memory ... It's a lot of tricks.

Installation
    • Search installation in the Settings center

Code Snippet (tab or enter complete) console command [CD] console.dir-This command can traverse an object's contents
console.dir(${1:obj});
[CE] console.error-print out information with error icon
console.error(${1:obj});
[CL] console.log-print out information
console.log(${1:obj});
[CW] console.warn-Print information with warning icon
console.warn(${1:obj});
dom-Document Object Model [AE] addeventlistener-event Listener
${1:document}.addEventListener(‘${2:event}‘function(e) {    ${0:// body...}});
[AC] appendchild-adding child elements
${1:document}.appendChild(${2:elem});
[RC] removechild-Delete child elements
${1:document}.removeChild(${2:elem});
[cel] createelement-creating elements
${1:document}.createElement(${2:elem});
[CDF] createdocumentfragment-Creating a document fragmentation node
${1:document}.createDocumentFragment(${2:elem});
[CA] classlist.add-upset attribute, in order to resolve ClassName cannot be resolved appears: No use.
${1:document}.classList.add(‘${2:class}‘);
[CT] classlist.toggle-Ibid.
${1:document}.classList.toggle(‘${2:class}‘);
[CR] classlist.remove-Ibid.
${1:document}.classList.remove(‘${2:class}‘);
[GI] getelementbyid-get element ID
${1:document}.getElementById(‘${2:id}‘);
[GC] getelementsbyclassname-get element class name [return value array]
${1:document}.getElementsByClassName(‘${2:class}‘);
[GT] getelementsbytagname-get Tag Collection [return value is a nodelist, non-array]
${1:document}.getElementsByTagName(‘${2:tag}‘);
[GA] getattribute-Get property value
${1:document}.getAttribute(‘${2:attr}‘);
[SA] setattribute-setting property values
${1:document}.setAttribute(‘${2:attr}‘, ${3:value});
[RA] removeattribute-Remove attribute values
${1:document}.removeAttribute(‘${2:attr}‘);
[IH] innerhtml-code block insert HTML structure
${1‘${2:elem}‘;
[TC] textcontent-plain text, bare Ben's innerHTML
${1‘${2:content}‘;
[QS] QUERYSELECTOR-HTML5 new attribute, get selector, similar to JQ's $ (' Div#name ')
${1:document}.querySelector(‘${2:selector}‘);
[QSA] queryselectorall-Ibid, both support multiple selectors, but this returns a nodelist
${1:document}.querySelectorAll(‘${2:selector}‘);
LOOP[FE] foreach-the way to iterate over an array or object
${1:myArray}.forEach(function(${2:elem}) {    ${0:// body...}});
Method used by the [fi] for in-traversal object
for (${1in ${2:obj}) {    if (${2:obj}.hasOwnProperty(${1:prop})) {        ${0:// body...}    }}
FUNCTION[FN] function-function declaration
function ${1:methodName} (${2:arguments}) {    ${0:// body...}}
[AFN] Anonymous function--anonymous function
function(${1:arguments}) {    ${0:// body...}}
[PR] prototype-prototype
${1:ClassName}.prototype.${2function(${3:arguments}) {    ${0:// body...}}
[Iife] immediately-invoked function expression-expression
(function(window, document, undefined) {    ${0:// body...}})(window, document);
[Call] Function call-callback function
${1:methodName}.call(${2:context}, ${3:arguments})
[Apply] Function apply-callback
${1:methodName}.apply(${2:context}, [${3:arguments}])
[Ofn] Function as a property of a object-functions declaration
${1function(${2:arguments}) {    ${3:// body...}}
Timer[si] Setinterval-method that is constantly called based on set time
setInterval(function() {    ${0:// body...}}, ${1:delay});
[St] settimeout-Ibid, the difference is that the general will not run repeatedly
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-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[us] Use STRICT-JS syntax using strict mode
‘use strict‘;
[Al] alert-pop-up window
alert(‘${1:msg}‘);
[PM] prompt-prompt pop-up window
prompt(‘${1:msg}‘);
Conclusion

These are familiar with .... The speed of writing code is not said to improve hundred percent ... But add 20% is still some;
And another advantage, does not appear code leak typing characters, the case of typo characters. After all, the template was written dead;
Unless the number of references is wrong .....

I am also on the road of learning,,,, slowly enrich themselves ......... .............

Atom Editor Toss _ (+) JS Snippet completion (plugin: javascript-snippets)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.