模块化以及requirejs和seajs

楼主^#

更多发布于：2017-05-23 16:20

我们用模块化的思想进行网页的编写是为了更好的管理我们的项目
模块与模块之间是独立存在的，每个模块可以独立的完成一个子功能。
模块化所涉及的规范commonjs,AMD,CMD,UMD
其中的commonjs是服务器规范，用到的是同步加载，适用于nodejs后台的操作
由于commonjs的特性是同步加载，并不适用于前端，人们想解决前端异步加载的问题，AMD就应运而生了。
AMD将commonjs的思想全部推翻，产生了一套新的规范，它是专门为前端定制的规范，实现了异步加载。
CMD和AMD的区别是可以实现按需加载。
UMD则是commonjs和AMD的结合。
requirejs遵循的是AMD规范
requirejs：
require.js提供两种加载（前置加载：2.0以前的版本使用，按需加载（异步加载，2.0以后的版本））
requirejs的引入：
页面只需要插入一个script标签：
   <script src="js/requirejs_module/require.min.js" data-main="js/require-main"></script>
   上面的data-main是用来加载配置文件的。
//require-main的配置如下：
   require.config({
   paths:{
   "m1"："js/js-module/m1",
   "m2"："js/js-module/m2",
   "my":"js/js-module/me
   shim:{
   "my":{export:"myFunc"}
   }//shim是为不支持AMD的js文件提供的方法（尽量不适用此方法，应该讲js文件进行改造）
   }) //paths用来配置所有路径

模块的定义：（define关键字）
   define（function（）{
   }）
   define(["module2"],function(m2){ })
定义的模块可在其他模块的内部加载
   define(function(require,exports,module){
   var m2=require("module2");//内部加载模块"module2"
   m2.func2
   })

模块的加载方法如下：
require（["m1"],function(m1){
   var fun1=function(){
   }
   var fun2=function(){
   }
   return{fun1:fun1,fun2:fun2
   }

//模块的前置加载
   require（["fun1,fun2"],function(m1,m2){}）

seajs：
1.sea.js的导入
   <script src="js/seajs_modules/sea.js"></script>//官网中提供的js文件
   <script src="js/seajs_config.js"></script>//自己建立的配置路径

配置路径中：
   seajs_config.js代码如下：

   seajs.config({
   base:".", //指定根路径
   alias:{
   "jquery":"js/seajs_modules/jquery-1.11.2-min",//导入的jQuery文件
   "bootstrap":"js/seajs_modules/bootstrap.min",//导入的框架
   "reg":"js/modules/reg/reg",//要进行模块化配置的页面
   "login":"js/modules/login/login",
   "student":"js/modules/student/register"
   } //alias别名
   });
使用：
   seajs.use("reg",function(reg){
   reg.load();
   });

seajs中模块的定义：
模块的定义：（关键字：define）
   define(function(require){
   var $=require("jquery");//加载jQuery
   var load=function(){
   $("#content").load("js/modules/login/login.html",function(){
   。。。。。。
   });//在content里面加载页面login.html

   };
   return{load:load}//定义的模块中返回的方法
   });

引入的第三方插件要进行改造：
第三方插件改造：
   jQuery改造：
   在js代码外面包裹：
   define（function（）{
   。。。。。。
   return $.noconflict();

   }）
上面的return $.noconflict()：运行这个函数将变量$的控制权让渡给第一个实现它的那个库（这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$("div p")的地方，就必须换成jQuery("div p")。 '''注意:'''这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库'''之前'''使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后一个导入的。

   bootstrap改造：
   define（function（require，exports，module）{
   return function（$）{
   ......js内容区.......
   }}）
模块化实现的都是单页面应用。
原文：http://www.cnblogs.com/hongxuejiao/p/4986854.html

喜欢1

模块化以及requirejs和seajs

最新喜欢：