阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Atom JS 代码片段补全

    题外话

    这款插件就比较重量级了,用熟悉了写原生 JS 的效率要提升很多。而且,不仅支持 JS 还包含了 nodejs snippet。

    javascript-snippets

    插件作者:zenorocha

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

    内置了丰富的 JS snippet。而且也很好理解和记忆,耍多了会上手的。

    安装

    • 在设置中心搜索安装

    代码片段 (Tab 或者 Enter 补全)

    Console 命令

    [cd] console.dir — 这条命令可以遍历一个对象内容

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

    [ce] console.error — 打印出信息带有错误图标

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

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

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

    [cw] console.warn — 打印带有警告图标的信息

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

    DOM — 文档对象模型

    [ae] addEventListener — 事件监听

    ${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 — 创建元素

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

    [cdf] createDocumentFragment — 创建文档碎片节点

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

    [ca] classList.add — 冷门属性,为了解决 className 不能解决出现,没用过

    ${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 — 获取元素类名、【返回值为数组、]

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

    [gt] getElementsByTagName — 获取标签集合、【返回值是一个 nodeList, 非数组、]

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

    [ga] getAttribute — 获取属性值

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

    [sa] setAttribute — 设置属性值

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

    [ra] removeAttribute — 移除属性值

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

    [ih] innerHTML — 代码块插入 html 结构

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

    [tc] textContent — 纯文本,裸奔的 innerHTML

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

    [qs] querySelector — HTML5 新属性,获取选择器,类似 JQ 的 $(‘div#name’)

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

    [qsa] querySelectorAll — 同上,都支持多个选择器,但这个返回一个 nodeList

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

    Loop

    [fe] forEach — 遍历数组或者对象用的方法

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

    [fi] for in — 遍历对象用的方法

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

    Function

    [fn] function — 函数声明

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

    [afn] anonymous function —- 匿名函数

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

    [pr] prototype — 原型

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

    [iife] immediately-invoked function expression — 函数表达式

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

    [call] function call — 回调函数

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

    [apply] function apply — 回调函数

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

    [ofn] function as a property of an object — 函数声明

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

    Timer

    [si] setInterval — 根据设置时间不断调用的方法

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

    [st] setTimeout — 同上,区别在于一般不会重复执行

    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 — 请求模块

    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 语法使用严格模式

    'use strict';
    

    [al] alert — 弹窗

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

    [pm] prompt — 提示弹窗

    prompt('${1:msg}');
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录