前端为什么要模块化

微商城 前端开发视频教程
c#web前端开发视频教程
微服务 前端开发教程

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

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

下面演示一下命名冲突:

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

//tab切换组件
functiontab(){}
//弹出层组件
function dialog()[]
    //form表达组件
    function form() { }

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

<script src=”common.js”></script>
<script>
    //调用
    tab()
</script>

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

//新同事的新功能 function tab(){ }

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

//起一个命名空间为api,然后所有变量,和方法都变成他的属性。
var api = {}
api.name = ‘命名空间’
api.tab = function() {}
api.dialog = function() {}
//那么我们调用的时候就是
api.tab()

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

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

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

<script src=”dialog.js”></script>
<script>
    dialog()
</script>

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

<script src=”a.js”></script>
<script src=”dialog.js”></script>
<script>
    dialog()
</script>

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

<script src=”a.js”></script>
<script src=”b.js”></script>
<script src=”dialog.js”></script>
<script>
    dialog()
</script>

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

<script src=”b.js”></script>
<script src=”dialog.js”></script>
<script src=”hide.js”></script>
<script>
    dialog()
</script>

然后现在就出问题了, 你的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

微专业前端开发教程 pdf
前端开发 菜鸟教程
前端开发进阶教程
» 本文来自:前端开发者 » 《前端为什么要模块化》
» 本文链接地址:https://www.rokub.com/7757.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!