为什么前端要模块化

原创 xiaolong2122451 随笔 前端理论知识 318阅读 2018-03-16 10:46:49 举报

js的模块化解决的问题有:
1 , 命名冲突
2 , 文件依赖
3 , 性能

当你的项目开发到一定程度的时候,比如特别大或者很多人在一起开发的时候就会出现下面的问题:命名冲突,文件依赖,性能等问题。

下面演示一下命名冲突:

当你去开发一个类库给同事用的时候,你可能会这样:

然后你的同事可能会这么调用:

然后忽然来了一位新同事, 他也去调用你的组件库,但是他发现他需要添加一个新功能:

根据上面的代码,无形当中就出现了命名冲突的问题。其实冲突在多人开发的时候非常容易发生。包括方法,变量等冲突都会发生。一般解决办法就是加命名空间,比如:

但是这样写只能降低冲突,不能完全避免。并且调用不方便,如果你的方法是好几层的话, 你需要写一长串:api.tab.alert....非常不方便。

下面演示一下依赖出现的问题

假如你开发了一个弹出层的组件dialog.js , 然后你的另外一个同事要用,他可能会这么做:

但是他这么写完以后,你的dialog.js有报错。然后你的同事告诉你,你是不是还需要依赖其他js。这时候你想起来,想要用这个dialog.js,必须要先引用a.js文件。 所以这时候你的同事又改成这样:

现在这样没问题了。但是有一天产品经理说了,我们这个弹出框太简单了,要加点功能, 这时候你和你同事说了,要想使用新功能,必须在引个b.js文件。 然后你同事回去在他每一个页面当中都改了一遍。

然后又过了一段时间,产品经理说了, 我们的弹出框用户用了说太复杂,需要我们砍掉一些功能。 然后你看了代码以后发现,去掉a.js就可以了。这时候你和你同事说了以后,你同事这样做:

然后现在就出问题了, 你的hide.js也是依赖的a.js的。 所以a.js还是不能去掉。

以上不难看出,就这么2个开发都搞出这么一堆的依赖问题。

以上就是我们工作当中遇到的问题,其实工作大部分的时候都是在修改bug上,真正开发的时候很少。这就是js模块化需要解决的问题。

前端的模块化开发分为浏览器端的模块化开发 和 服务端的模块化开发(node.js)。
浏览器端的模块化开发的规范有AMD和CMD, 服务端的模块化开发的规范是CommonJs。

他们的本质区别就是:浏览器端的模块加载是异步进行的, 而服务器端的模块加载是同步进行的。

客户端的模块化开发有Sea.js 和 Require.js。直接引用js文件就可以使用,具体的使用方法请查看官网API或者教程。
服务端的模块化开发有webpack。需要依赖node环境。教程https://www.runoob.com/w3cnote/webpack-tutorial.html。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复