模块化开发--sea.js

当你的网站开发愈来愈复杂的时候,会常常遇到一下问题吗?
1.冲突
2.性能
3.依赖
若是在多人开发或者是复杂的开发过程当中会常常遇到这些问
题,就能够用模块化开发来解决.
以上问题是如何产生的?
1.冲突:若是你写了一个commen.js,这个JS文件主要是写一些
公用的方法,好比选项卡tab,拖拽等等...当你写好这些JS以后
可能交给同事用.同事首先引入这个JS文件,有可能这个页面又
交给新同事开发,这个同事写了一个function,名为tab,这时这
个tab就和你写的公用JS文件里的tab方法起了冲突致使页面
出现问题,这时你的同事就会和你协商解决方法,同事能够改自
己的方法名,最崩溃的状况是你的新同事引用了一个插件,好比
:xxx.js,这时若是冲突了,你的同事可能会和你协商更名.你可能
会这个时候去把你的公用JS修改一下,用命名空间,这个方法可
以下降冲突,可是不能彻底避免冲突.缘由是有的公司前端较多
,这样的话命名空间仍是容易冲突.
2.性能:假设仍是同样的,如今页面由你的同事来开发,在新的页
面中可能只用一个功能,这时若是把总体的公用JS引入到页面
中就不是很合理了,由于咱们只用一个方法,其余方法用不到就
会浪费不少白白请求的资源.这时咱们的解决方法是能够拆分
JS,把单独的JS方法写到一个JS文件中,这是按需引入不一样的
JS,使性能提高,这时新的问题又接踵而至,引入的这些JS文件
若是是相互独立呢,若是有相互依赖就更麻烦,须要注意放置顺
序等等.
3.依赖.好比你写了一个JS文件:text.js,使用方法:text();
你的同事拿去用,先引入了JS文件,而后正常调用,看着没有问
题可是出问题了,你的同事发现这个文件依赖了另外一个文件
a.js,这时解决了.过了几天产品提出需求,须要加一些功
能,text.js又须要依赖B.js,你须要再告诉同事,再引入B.js,这时
候你的同事已经很不爽了,他可能不少页面都调用了,须要改很
多.若是产品又改须要了,b.js不须要了,须要删除,你又告诉你同事需删除,这时你的同事发现页面出问题,缘由是删除的文件有依赖关系......这就是依赖的问题.因此致使咱们修改bug,工做中大部分是在修改bug,加班也就在所不免.若是咱们能够避免这些问题,就能够在工做中省去不少力气.

模块化就能够解决以上问题.

sea.js:
一个适合web端的模块加载器.解决以上问题,提高
代码可维护性.

 

模块的概念:为了提升性能,咱们把一个方法放到一个JS中,按
需引入提高性能,经过模块化这个库来解决依赖 冲突和性能三
个问题,咱们把每一个JS文件都看作是一个模块.

 

sea.js使用:
1.引入库
2.如何变成模块?
----define

3.如何调用模块
----export:对外的接口,创建关系的方式:exports.name = tab;

 

 

----seajs.use :

经过以上的模块调用形式就避免了命名冲突.,好比sea1.js是a同事开发的,调用是b同事,
4.如何解决依赖?
----require

假设a.js依赖于b.js,咱们能够经过sea.js就不须要写到页面上了,而是把b.js写到sea1.js这个文件当中进行依赖,这样的话咱们只须要引入sea1.js便可.