让你的JS更优雅的小技巧

首先,看一个非常不优雅的例子:

看到这段代码,虽然代码很短,但是一眼看上去就不想再看了,也就是没什么可读性。这段代码,没有封装,随意定义一个变量都是全局变量,这样在多人开发或者是大型开发中,极其容易造成所谓的脏读。

那么,该怎样把JS写得优雅一些呢?下面总结了几点供大家参考(如有错误,欢迎指正!):

①巧用闭包将函数变量变为局部变量,基本格式为:

;(function(){

...

})()

解释一下,最前面的分号,主要是为了防止在与别人的代码合并的时候出错,例如以下情况:

var lucky=function(){

console.log("winty");

}

(function(){

....

})()

这种情况,写lucky函数的时候没有加上分号,这样就导致了出错。

②工具包和事件绑定分开

这个怎么理解呢?意思就是说,如果一个函数的功能属于工具类,例如两个数相加,这个函数很可能在多个地方都会用到,那么就把这个函数专门写在一个regular.js文件里面,如果一个函数属于事件处理类,例如点击事件,很可能只是某个元素需要的效果而已,那么就写在专门绑定事件处理的函数的文件当中。一个原则就是按类型和模块来拆分函数,尽量使得每个函数的代码量少而易读。

例如这样的regular.js:


调用:

更多例子:


总结了一些些JS函数的原则:

  1. 函数名字语义化,最好通过函数名就能够知道函数的作用。
  2. 降低数据耦合,例如写阶乘函数的时候,需要不断调用自身,这个时候用arguments.callee代替自身函数名。
  3. 复杂功能可拆分为几个函数,尽量控制每个函数的代码量。

?欢迎关注我的个人微信订阅号:前端生活

时间: 2024-10-12 18:33:09

让你的JS更优雅的小技巧的相关文章

【js】中的小技巧

本文主要介绍一些JS中用到的小技巧 1. 类型强制转换   1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为NaN,或者使用 a !== a 来判断是否为NaN,因为 NaN !== NaN '32' * 1            // 32 'ds' * 1            // NaN null * 1            // 0 undefined * 1    // NaN 1  * {

前端js调试的一些小技巧

===前言=== 此文根据本人长期js开发以及团队协作中遇到的一些问题的汇总.本文强调调试技巧,具体的代码逻辑实现本文不做深入讲解.本文所有场景均使用chrome作为开发浏览器. 掌握这些小技巧能有效的提高你的工作效率或降低低级错误出现的的几率.任何读者如果发现本文的任何错误请及时指出,也可以通过评论进行问题补充. ===场景=== A.表单提交 许多前端习惯按照以下流程编写表单程序. 1.编写html. 2.绑定form的submit事件,验证各表单项. 3.表单验证成功则提交表单,失败则提示

js脚本代码调试小技巧

以前写js代码调试代码查看数据是否正确的时候不知道F12(开发者工具),都是alert(xxx)或者console.log(xxx), 现在知道还可以用document.write或者try...catch或者window.onerror 还发现一个好用的东西,JSON.stringify(xxx),如果参数为对象,会显示对象的内容,不用用循环什么的了,对数组或数据对象之类的挺有用,像下面弹窗就是一个数据对象作为JSON.stringify参数的结果

【转】js调试信息输出小技巧

原文地址:http://blog.csdn.net/jom_ch/article/details/864574 通常我们在做简单的js调试输出的时候习惯用 alert  函数,这个函数也能解决大多数问题,但遇到如循环输出,滚动条状态监控,鼠标位置等场景的时候,alert就相当的不方便了,下面这个函数可以解决这个问题: [javascript] view plaincopy <script type="text/javascript"> function __js_debug

js 中的一些小技巧

js 数字操作: 1.1 取整: 取整有很多方法如: parseInt(a,10); Math.floor(a); a>>0; ~~a; a|0; 前面2种是经常用到的,后面3中算是比较偏的,因为其有不足之处,比如将下面代码放到 console 里测试: var num = 2150000000; console.log(num|0); console.log(parseFloat(num)) 你会发现问题; 输出的是: -2144967296 2150000000 其原因就在于js数字存储的

Chrome控制台 JS调试的一些小技巧

$ $_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中. $0~$4则代表了最近5个你选择过的DOM节点.在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而$0会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined. Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选

js中的换算小技巧

之前自己一直使用~~运算符来把‘112222’字符型的数值换算成整型的数值 但今天调试程序发现了一些问题 ~~'999'=>999 ~~'111111999'=>111111999 这些都是正常的 但 ~~'1111119998888000'=>-925489088 就不正常了 所以大数值的换算还是使用‘+’运算符吧 +'1111119998888000'=>1111119998888000

JS代码优化小技巧

下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完成页面渲染而不会造成页面堵塞问题,这个大家都懂的.   [合并JS代码,尽可能少的使用script标签] 最常见的方式就是带代码写入一个js文件中,让页面只使用一次<script></script>标签来引入   [无堵塞加载JS] 通过给script标签增加 defer属性或者是 a

CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅

首页 登录注册 CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立即免费体验容器集群吧!cloud.tencent.com 之前不久,由于自己平时涉猎还算广泛,总结了一篇博客:这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已,没想到受到了大家的欢迎,有人希望能博主还能整理个 CSS 的一些黑魔法小技巧,无奈我 CSS 一直很渣,没什么干货,最近写了一个 Chro