阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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}');
      
      目录
      目录