Atom编辑器折腾记_(15)JS代码片段补全(插件:javascript-snippets)
题外话
这款插件就比較重量级了….用熟悉了写原生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}');
结束语
这些用熟悉了…. 写代码的速度不说提升百分百…可是添加20%还是有的;
并且另一个优点,不会出现代码漏打字符,打错字符的情况..毕竟模版写死了;
除非參数传错了…..
我也在学习的路上,,,,慢慢的充实自己……………………………
Atom编辑器折腾记_(15)JS代码片段补全(插件:javascript-snippets)的更多相关文章
- Atom编辑器折腾记_(13)JS代码智能提示补全(插件:atom-ternjs)
题外话 官方正式版尽管内置了.autocomplete-plus;最为明显的一个功能就是记忆你已经输入过的名称进行匹配; 可是针对于某些语言来说,还是有些不足的-.当中JS的补全上就明显不足了-所以须 ...
- Atom编辑器折腾记
http://blog.csdn.net/bomess/article/category/3202419/2 Atom编辑器折腾记_(1)介绍下载安装 Atom编辑器折腾记_(2)基础了解使用 Ato ...
- Bolt XML和JQBolt Lua代码自动补全插件配置教程
Bolt没有提供官方IDE,缺少强大的代码提示和自动补全,Notepad++写起界面和脚本来比较费劲. Notepad++有个QuickText插件,支持多语言的自动补全,进行简单的配置就可以支持Bo ...
- 代码自动补全插件CodeMix全新发布CI 2019.7.15|改进CSS颜色辅助
CodeMix是Eclipse的一款插件,它解锁了VS Code和Code OSS附加扩展的各种技术,支持各种语言. 作为Eclipse开发人员,您再也不必觉得自己已被排除在朋友使用Visual St ...
- 【VS Code】中node.js代码自动补全的方法
原文链接: https://blog.csdn.net/qq_39189819/article/details/91347484
- 127个常用的JS代码片段,每段代码花30秒就能看懂(上)
127个常用的JS代码片段,每段代码花30秒就能看懂(上) JavaScript 是目前最流行的编程语言之一,正如大多数人所说:“如果你想学一门编程语言,请学JavaScript.” FreeCode ...
- 记一个同时支持模糊匹配和静态推导的Atom语法补全插件的开发过程: 序
简介 过去的一周,都睡的很晚,终于做出了Atom上的APICloud语法提示与补全插件:apicloud_autocomplete.个中滋味,感觉还是有必要记录下来的.代码基于 GPL-3.0 开源, ...
- 常用JS代码片段
1.隐藏部分数字,如手机号码,身份证号码 1 2 3 function (str,start,length,mask_char){ return str.replace(str.substr(star ...
- 这个 Python 代码自动补全神器搞得我卧槽卧槽的
是时候跟你说说这个能让你撸代码撸得舒服得不要不要的神器了——kite. ! 简单来说,它是一款 IDE 的插件,能做到代码自动补全,可能你会说了,这有什么牛逼的?一般的编辑器不都有这个功能么 ...
随机推荐
- myeclipse配置tomcat后,无法正常使用的问题
如图所示:一定要设置为Enable.否则部署tomcat时,没有tomcat8.0
- Coursera公开课-Machine_learing:编程作业7
这周的编程作业主要是两方面内容. 1.K-means聚类. 2.PCA(Principle Component Analys)主成分分析. 方式主要是通过对图像的聚类实现压缩图像,后来发现PCA也可以 ...
- jsp中session执行机制
- centos mysql允许远程root登录
Mysql为了安全性,在默认情况下用户只允许在本地登录,可是在有此情况下,还是需要使用用户进行远程连接,因此为了使其可以远程需要进行如下操作: 一.允许root用户在任何地方进行远程登录,并具有所有库 ...
- HTML 表单 存为EXCEL文件时 中文显示乱码
在做宣传品发放系统时,需求要把数据库查询的记录生成表单并转存excel文件. 在转存的EXCEL文件中文显示乱码,表格和其他字符正常,检查后发现是创建EXCEL文件打开模式不对 之前: myfile ...
- wordpress登录账号之后才能查看页面,实例
函数: <?php auth_redirect(); ?> 例子: 要求用户登录才能查看页面 if(!is_user_logged_in()){ auth_redirect(); } 源文 ...
- android接收mjpg-streamer软件视频流
[代码]主要实现代码 package cn.dong.mjpeg; import java.io.InputStream; import java.net.HttpURLConnection; imp ...
- linux 安装 mongo
整个安装过程:下载安装包--> 解压,添加系统路径(是滴,不用安装解压即可) --> 创建数据目录 --> 启动mongod服务 --> 运行mongo 1.下载安装包 Mon ...
- Ajax——php基础知识(一)
AMP环境 AMP(Apache.MySQL.PHP)是三个独立的软件,但是对于初学者而言分别安装以及配置需要掌握一定的软件知识,所以就有了很多AMP集成环境帮助我们简化安装 ——WAMP WAMP安 ...
- html——标签选择器
交集选择器:标签+类(ID)选择器{属性:值:}.即要满足使用了某个标签,还要满足使用了类(id)选择器. <!DOCTYPE html> <html> <head> ...