博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
教你优雅地运用JS模块化编程
阅读量:7175 次
发布时间:2019-06-29

本文共 754 字,大约阅读时间需要 2 分钟。

hot3.png

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

13145252_NAvC.jpg

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

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

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

;(function(){

   ...

 })()

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

var lucky=function(){

console.log("winty");

}

(function(){

  ....

})()

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

②工具包和事件绑定分开

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

例如这样的regular.js:

13145252_IwvD.jpg

调用:13145252_sUfx.jpg

更多例子:

13145252_JIkC.jpg

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

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

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

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

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

转载于:https://my.oschina.net/LuckyWinty/blog/636579

你可能感兴趣的文章
对中间过程进行调试
查看>>
怎样获取数据库中某一个字段长度最长的那条记录
查看>>
yourphp常用标签
查看>>
anchor_target_layer层解读
查看>>
7.6 服务远程暴露 - 注册服务到zookeeper
查看>>
Lua------------------unity与lua的热更新
查看>>
【Win 10 应用开发】UI Composition 札记(一):视图框架的实现
查看>>
JavaScript面向对象总结
查看>>
分布式系统理论基础,以及选举,多数派,租约
查看>>
Breadth-first search 算法(Swift版)
查看>>
Vue.js系列之四计算属性和观察者
查看>>
pycharm 对代码做静态检查
查看>>
在Windows上安装Nexus
查看>>
用mysql查询某字段是否有索引
查看>>
ubuntu 查看进程,查看服务
查看>>
Cisco DHCP Snooping + IPSG 功能实现
查看>>
Linux命令_用户身份切换
查看>>
学习在.NET Core中使用RabbitMQ之启动和基础(一)
查看>>
支付业务的数据库表的设计
查看>>
php面试题二--解决网站大流量高并发方案(从url到硬盘来解决高并发方案总结)...
查看>>