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

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

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

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

;(function(){

...

})()

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

var lucky=function(){

console.log("winty");

}

(function(){

....

})()

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

②工具包和事件绑定分开

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

例如这样的regular.js:


调用:

更多例子:


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

  1. 函数名字语义化,最好通过函数名就能够知道函数的作用。

  2. 降低数据耦合,例如写阶乘函数的时候,需要不断调用自身,这个时候用arguments.callee代替自身函数名。

  3. 复杂功能可拆分为几个函数,尽量控制每个函数的代码量。

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

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

  1. 【js】中的小技巧

    本文主要介绍一些JS中用到的小技巧 1. 类型强制转换   1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为 ...

  2. JS、JQ相关小技巧积攒

    JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime()  获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...

  3. JS前端下载文本文件小技巧:1、download属性;2、借助Blob转换成二进制下载

    一.HTML download 与文件下载 如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如: <a href="large. ...

  4. js代码的一些小技巧

    1. 数组中通过赋值语句来改变值 var a = 1; var msg = ["value0","value1"]; for(var i = 0;i<10 ...

  5. js 中的一些小技巧

    js 数字操作: 1.1 取整: 取整有很多方法如: parseInt(a,10); Math.floor(a); a>>0; ~~a; a|0; 前面2种是经常用到的,后面3中算是比较偏 ...

  6. 泛微关于js设计的一些小技巧

    1.关于泛微流程的js设计 泛微oa可以插入javascript可以diy自己想要的表单页面前端功能.如果有前端开发经验,或者熟练使用jQuery的话,这将变得非常容易!同时泛微OA内部有很多库,包括 ...

  7. 关于js事件执行顺序小技巧

    js事件执行顺序是js中一个老生常谈的一个话题, 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件,如 <button ty ...

  8. js脚本代码调试小技巧

    以前写js代码调试代码查看数据是否正确的时候不知道F12(开发者工具),都是alert(xxx)或者console.log(xxx), 现在知道还可以用document.write或者try...ca ...

  9. js 利用||和&&赋值小技巧

    感谢原文作者:nayi_224 原文链接:https://blog.csdn.net/nayi_224/article/details/80437329 对于需要返回boolean类型数值的地方,比如 ...

随机推荐

  1. *HDU 1757 矩阵乘法

    A Simple Math Problem Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  2. Ubuntu安装Gnome3

    参考:How To Install GNOME In Ubuntu 14.04 . Ubuntu11.10安装GNOME3,卸载UNITY和UNITY2D操作 和How to install Gnom ...

  3. ABP理论学习之开篇介绍

    返回总目录 为了和2016年春节赛跑,完成该系列博客,我牺牲了今天中午的时间来完成该系列的第一篇----开篇介绍.开篇介绍嘛,读过大学教材的同学都知道,这玩意总是那么无聊,跟考试没关系,干脆直接跳过, ...

  4. 一种让 IE6/7/8 支持 media query 响应式设计的方法

    在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 med ...

  5. .NET单元测试的艺术-1.入门

    开篇:最近在看Roy Osherove的<单元测试的艺术>一书,颇有收获.因此,将其记录下来,并分为四个部分分享成文,与各位Share.本篇作为入门,介绍了单元测试的基础知识,例如:如何使 ...

  6. 你必须知道的指针基础-7.void指针与函数指针

    一.不能动的“地址”—void指针 1.1 void指针初探 void *表示一个“不知道类型”的指针,也就不知道从这个指针地址开始多少字节为一个数据.和用int表示指针异曲同工,只是更明确是“指针” ...

  7. Apache Mina实战

    Mina介绍 Mina可以用于快速的开发基于网络通信的应用,特别是在开发手机端的游戏应用时,使用的较为普遍.本文简单介绍了一个用Mina搭建的一个简易讨论组,通过该应用可以对Mina的基本用法用途有个 ...

  8. 【效率】专为Win7系统设计的极简番茄计时器 - MiniPomodoro (附源码)

    时光飞逝,一转眼坚持使用番茄工作法已经快3年了!能坚持这么长时间,主要还是得益于它的简单.但是令人纠结的是,这么长时间以来,换了7款不同的番茄计时器,仍然没有找到非常满意的: ■ 机械的噪音太大,会妨 ...

  9. ios 避免循环引用

    类似网络请求的情况下会导致循环引用,但是 如果网络请求的对象是局部变量,就必须用self,不能用weakSelf,否则,一旦当前方法所在对象销毁,那weakSelf就为空了(如果目的是这样,那就另当别 ...

  10. 用java PreparedStatement就不用担心sql注入了吗?

    先感慨下,好久没写博客了,一是工作太忙,二是身体不太给力,好在终于查清病因了,趁着今天闲下来,迫不及待与读者交流,最后忠告一句:身体是活着的本钱! 言归正传,对java有了解的同学基本上都体验过JDB ...