Web前端----Javascript模块化

概述

Javascript模块化
面向过程

面向对象

模块化开发

概述

一提到模块化，也许我们首先想到的是做项目的时候进行模块设计，按照功能划分不同的模块，最后通过模块的选择和组合组成最终的产品；那把模块化的思想放到前端页面，js上来是不是也适用？当然，而且也能很好的提高我们项目的开发效率。



开发过前端界面的同志们都知道，最一开始的时候，让你用CSS写界面的样式，初入职场的程序员一般都这么写：从上到下依次编写，有新的样式需要添加，就在下面接着写，从来不去考虑是否有公共样式，着重在样式的实现上，怎么实现的无所谓；稍微有点经验的程序员就会开始注意到公共样式的问题，把一些公共的样式抽出来，从而来达到复用的结果，比如：按钮，颜色，图标等，这样节省时间，也提高了开发效率；这还不是终极的，高级的程序员一般会把一些公共的功能模块提取出来，比如说导航，版权信息等，实现部分公共模块的复用。

Javascript模块化

面向过程

2005年以前，JavaScript没人重视，只作为表单验证等少量应用。那时一个网页上写不了几行JS代码，1000行算很复杂了。这时组织代码的方式是过程式，几十行的代码甚至连一个函数都不用写。稍多的需要提取抽象出一个函数，更复杂一些则需要更多函数，函数间互相调用。

/*面向过程*/
//说
function sayHello(){
return "hello";
}
//读
function readBook(){
return "readBook!";
}
//听
function listenSong(){
return "Good Time!";
}
//写
function writeName(){
return "zhangling";
}

如果说开发一个大型项目，按照面向过程的方式写了一大堆js代码，组长过来说：你把XXX的js代码找出来咱一块看看！这时你的表情一定是这样的：

面向对象

2006年，Ajax席卷全球。JavaScript被重视了，越来越多的后端逻辑放到了前端。网页中的JS代码量急剧增加。这时写函数方式组织大量代码显得力不从心。有时调试一个小功能，从一个函数可能会跳到第N个函数去。为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。

/*面向对象*/
//听说读写
function person(){
return{
count:0,
say:function(){return "saying";},
read:function(){return "reading";},
listen:function(){return "listening"},
write:function(){return "writting"}
}

};

使用的时候直接person().say()就行了！

不过这样使用的话也有一定的缺陷：

这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。

Person().count=4

模块化开发

首先我们要搞明白为什么要用模块化开发？前面的内容也大致的讲了讲，对于具体的为什么要用模块化开发，大家可以去看看前端模块化开发的价值，主要是两个问题：

其一、恼人的命名冲突

其二、烦琐的文件依赖

在网上查了写资料，Javascript中近来用的模块化开发用SeaJs，RequireJs比较多，但是具体他们两个有什么区别，还有怎么使用？在项目中用哪个更合适？后续博客中会说明，正在研究中……