文档章节

前端模块化(一):模块化那些事儿

ali安东尼
 ali安东尼
发布于 2017/09/06 14:43
字数 1022
阅读 7
收藏 0

前端这几年发展太快了,我学习的速度都跟不上这速度了。在JavaScript发展初期就是为了实现简单的页面交互逻辑,随着前端的业务逻辑越复杂,代码也越来越多,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码,于是一些问题就暴漏了出来。

1、命名冲突 我们平时做的项目的时候,都是会将一些通用的、底层的功能抽象出来,独立成一个函数以提高代码的可复用性,比如这样子 function floatAdd(a,b) { // …… }; 完了之后,放在public.js里面,让其他有需要的同事调用就可以了。 不久之后,项目需求越来越多,新项目也一个接一个,换了个人来接手这个项目。新来的小哥开开心心的写完新需求功能提交给测试,测试过来说,这地方不对啊。小哥就懵逼了,我没动过这里啊,为啥就出错了呢?经过一番排查,原来小哥也定义了一个floatAdd函数,把上面的给覆盖了导致之前用过floatAdd函数的地方都出错了。此时小哥的内心是奔溃的,因为他很多文件很多地方都有用到他自己定义的floatAdd函数,得挨个文件挨个地方的改。 为了降低冲突的概览,大家开会讨论后,决定把自己写的公共函数封装在一个对象中,看下面的代码: var myModule = {}; myModule.floatAdd = function(a,b){ // …… } 但是,公司这么多研发人员,总有那么一个会跟你的想法一样,起了一个跟你一样的对象名,所以命名空间依然有可能会冲突。那么为了继续降低冲突概率,只好拉长命名空间,比如 project.tools.moduleA.floatAdd = xxx;

Yahoo的YUI早期就是这么做的,调用的时候还得这么写: project.tools.moduleA.floatAdd();

平时任务这么多,还得记住这么长的名字,记起来困难,一点也不优雅啊。所以这种方式并没有被很多人采用,YUI后来也不用这种方式了。

2、文件依赖 项目中有个日期操作的功能,刚刚好不久前在开源社区看到一个合适的插件,然后就运用到当前项目中了。使用的时候引入插件,如下

<script type="text/javascript" src="js/lib/date.js"></script>

<script type="text/javascript" src="js/b.js"></script>

看着没毛病是吧,然而报错了。跑去看了一下文档,原来这个插件是基于jQuery的,而页面中没有引入jQuery.js ,赶紧在插件date之前引入jQuery,还特地在插件隔壁备注了是依赖jQuery的,如下

<script type="text/javascript" src="js/lib/jQuery.js"></script>

<script type="text/javascript" src="js/lib/date.js"></script><!—依赖jQuery-->

<script type="text/javascript" src="js/b.js"></script>

过了一段时间,取消了这个功能,得把这些没有必要的js文件去掉引用,直接把插件date跟依赖文件jQuery删了。刷新页面,报错了。一番排查,发现原来另一个小哥写的那部分功能有用到jQuery,赶紧又引用回来了。引用顺序不能错,也不能漏写某个,在多人开发的时候是很难协调。后期优化重构都得小心翼翼,生怕一个不小心改了不该改的,删了不该删的。相信不少人都有碰到过上面的这种事,改来改去心好累啊,心疼大家。

命名冲突和文件依赖,是前端开发过程中的两个经典问题。在这个无模块的时代,大牛们也尝试过了诸多方法,比如用函数来包装代码、java风格的命名空间,但并未解决根本问题。为了解决这些问题,js模块化被提上了日程,开始了一段艰辛的历程。

本文由一些历史问题,抛出Js模块化这个概念,接下的文章将逐步讲述js模块化的演进。

由睿江云人员提供,想了解更多,请登陆www.eflycloud.com

© 著作权归作者所有

ali安东尼
粉丝 3
博文 192
码字总数 173101
作品 0
广州
私信 提问
说说node和es6模块化那些不为人知的事儿

前言 模块化已经成为前端开发中的必然趋势,模块化带来的好处如下: 1.避免变量污染,命名冲突 2.提高代码复用率 3.提高维护性 4.依赖关系的管理 文章主要就node的commonjs规范和es6规范进行...

笪笪
09/19
0
0
轻轻谈一下seaJs——模块化开发的利器

“仅做一件事,做好一件事。” 这个应该就是seaJs的精髓了。 我在自己的一些项目中使用过seaJs。对其算是了解一二。如今就班门弄斧。轻轻地谈一下。 首先上一段度娘的话: “seaJs是一个遵循...

技术mix呢
2017/11/09
0
0
Javascript模块化开发-轻巧自制

一、前言 现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端。模块化是必不可少的,这样不仅能够提高代码的可维护性、可扩展性以及鲁棒性,更大的好处就是...

卢林
2016/09/22
25
0
七牛云模块化文档

前言 闲来无事,搭建了个人私仓来放模块化项目,以便项目引入直接使用。关键是,模块化可以根据项目所需进行版本迭代,每一次的使用都是完善的根基,效果贼棒。 介绍 七牛云是国内领先的企业...

Joryun刘家源
2018/01/02
0
0
关于站内搜索的那些事儿

前言 之前学过一点点关于全文检索相关的技术,当时使用的是Java语言,Lucene和compass框架。有兴趣的话可以参考下面的专栏链接 http://blog.csdn.net/column/details/lucene-compass.html 然...

郭璞
2017/05/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

安全组和云防火墙的区别

前言 熟悉云平台的朋友可能都会注意到这样一个事情:无论公有云还是私有云,创建虚拟机的时候都需要选择安全组,来对虚拟机进行安全防护;有的云平台在VPC里,还能选择防火墙,ZStack在3.6版...

ZStack社区版
32分钟前
2
0
教育性app开发的重要性和好处

在这个精通技术的世界中,流行的app主导着无聊的教育系统。当我们将技术和教育结合在一起时,它将带来当代以及强大的学习资源。因此,将教育移动app集成到您的学习过程中,并根据自己的信念把...

a429011717
33分钟前
3
0
IE6/7/8如何兼容CSS3属性

本文转载于:专业的前端网站➩IE6/7/8如何兼容CSS3属性 最近在工作中总是要求IE8兼容CSS3属性,在网上搜了搜主要是引入了一个htc文件(ie-css3.htc或者PIE.htc。个人认为这两个文件的作用差不...

前端老手
48分钟前
4
0
手把手教你ALLEGRO的约束规则的设置教程!

约束规则的设置 分三步, 定义规则(一、基本约束规则设置:1、线间距设置;2、线宽设置;3、设置过孔;4、区域约束规则设置;5、设置阻抗;6、设置走线的长度范围;7、设置等长:7.1、不过电阻的NET 等...

demyar
50分钟前
5
0
完美解决H5滚动滑动穿透方案:不使用系统滚动

网上有很多黑科技解决这个问题,都不是从根本去解决,例如通过js控制弹出时html加上position:fixed; 弹窗关闭后再去掉该样式,总觉得不太对,像是打补丁。 今天终于找到了滚动穿透的原因和完...

未来cc
54分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部