让你的JS更优雅的小技巧
首先,看一个非常不优雅的例子:

看到这段代码,虽然代码很短,但是一眼看上去就不想再看了,也就是没什么可读性。这段代码,没有封装,随意定义一个变量都是全局变量,这样在多人开发或者是大型开发中,极其容易造成所谓的脏读。
那么,该怎样把JS写得优雅一些呢?下面总结了几点供大家参考(如有错误,欢迎指正!):
①巧用闭包将函数变量变为局部变量,基本格式为:
;(function(){
...
})()
解释一下,最前面的分号,主要是为了防止在与别人的代码合并的时候出错,例如以下情况:
var lucky=function(){
console.log("winty");
}
(function(){
....
})()
这种情况,写lucky函数的时候没有加上分号,这样就导致了出错。
②工具包和事件绑定分开
这个怎么理解呢?意思就是说,如果一个函数的功能属于工具类,例如两个数相加,这个函数很可能在多个地方都会用到,那么就把这个函数专门写在一个regular.js文件里面,如果一个函数属于事件处理类,例如点击事件,很可能只是某个元素需要的效果而已,那么就写在专门绑定事件处理的函数的文件当中。一个原则就是按类型和模块来拆分函数,尽量使得每个函数的代码量少而易读。
例如这样的regular.js:

调用:

更多例子:

总结了一些些JS函数的原则:
函数名字语义化,最好通过函数名就能够知道函数的作用。
降低数据耦合,例如写阶乘函数的时候,需要不断调用自身,这个时候用arguments.callee代替自身函数名。
复杂功能可拆分为几个函数,尽量控制每个函数的代码量。
欢迎关注我的个人微信订阅号:前端生活
让你的JS更优雅的小技巧的更多相关文章
- 【js】中的小技巧
本文主要介绍一些JS中用到的小技巧 1. 类型强制转换 1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为 ...
- JS、JQ相关小技巧积攒
JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime() 获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...
- JS前端下载文本文件小技巧:1、download属性;2、借助Blob转换成二进制下载
一.HTML download 与文件下载 如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如: <a href="large. ...
- js代码的一些小技巧
1. 数组中通过赋值语句来改变值 var a = 1; var msg = ["value0","value1"]; for(var i = 0;i<10 ...
- js 中的一些小技巧
js 数字操作: 1.1 取整: 取整有很多方法如: parseInt(a,10); Math.floor(a); a>>0; ~~a; a|0; 前面2种是经常用到的,后面3中算是比较偏 ...
- 泛微关于js设计的一些小技巧
1.关于泛微流程的js设计 泛微oa可以插入javascript可以diy自己想要的表单页面前端功能.如果有前端开发经验,或者熟练使用jQuery的话,这将变得非常容易!同时泛微OA内部有很多库,包括 ...
- 关于js事件执行顺序小技巧
js事件执行顺序是js中一个老生常谈的一个话题, 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件,如 <button ty ...
- js脚本代码调试小技巧
以前写js代码调试代码查看数据是否正确的时候不知道F12(开发者工具),都是alert(xxx)或者console.log(xxx), 现在知道还可以用document.write或者try...ca ...
- js 利用||和&&赋值小技巧
感谢原文作者:nayi_224 原文链接:https://blog.csdn.net/nayi_224/article/details/80437329 对于需要返回boolean类型数值的地方,比如 ...
随机推荐
- 将 java 项目打包成可运行的 jar 包(main 函数带参数),并上传到 linux 服务器上运行
一.概述 java项目有两种架构,一种是 B/S 架构的,一种是 C/S 架构的. 对于 B/S 架构来说,我们常见的 java ee 即是 B/S 架构,通常,开发人员会在本地进行开发,然后将项目打 ...
- PAT Judge
原题连接:https://pta.patest.cn/pta/test/16/exam/4/question/677 题目如下: The ranklist of PAT is generated fr ...
- ql 判断 函数 存储过程是否存在的方法
下面为您介绍sql下用了判断各种资源是否存在的代码,需要的朋友可以参考下,希望对您学习sql的函数及数据库能够有所帮助. 库是否存在 if exists(select * from master..s ...
- Ring0隐藏进程的方法
第一种在系统调用服务表HOOK ZwQuerySystemInformation函数地址 使用InterlockedExchange函数将ZwQuerySystemInformation在内核导出表K ...
- 多线程导出大规模excel文件
文章有点水,和前几篇没有太大区别,但是单线程处理大文件导出会非常耗时间,用到多线程才能更加合理的利用资源.大文件也可能会超出excel工作表范围.这里也有相应处理 参考:用DataGridView导入 ...
- SQL Server2016 原生支持JSON
SQL Server2016 原生支持JSON SQL Server 2005 开始支持 XML 数据类型,提供原生的 XML数据类型.XML 索引以及各种管理 XML 或输出 XML 格式的函数. ...
- Building Modern Web Apps-构建现代的 Web 应用程序(一些感想)
<iframe src="http://channel9.msdn.com/Series/MVA-China/Web20140611A01/player?h=540&w=960 ...
- .NET Core与.NET Framework、Mono之间的关系
随着微软的.NET开源的推进,现在在.NET的实现上有了三个.NET Framework,Mono和.NET Core.经常被问起Mono的稳定性怎么样,后续Mono的前景如何,要回答这个问题就需要搞 ...
- .NET面试题系列[12] - C# 3.0 LINQ的准备工作
"为了使LINQ能够正常工作,代码必须简化到它要求的程度." - Jon Skeet 为了提高园子中诸位兄弟的英语水平,我将重要的术语后面配备了对应的英文. .NET面试题系列目录 ...
- Java多线程7:死锁
前言 死锁单独写一篇文章是因为这是一个很严重的.必须要引起重视的问题.这不是夸大死锁的风险,尽管锁被持有的时间通常很短,但是作为商业产品的应用程序每天可能要执行数十亿次获取锁->释放锁的操作,只 ...