模块化开发要解决的问题：

1.冲突

比如：多人协作开发时，不同js库中的函数重名问题

可以用命名空间解决：

var module={}

module.a=1;

module.b=function(){}

...

命名空间的缺点：

1)写起来较为复杂（特别是涉及到多级命名空间时）

2)只能减少冲突，不能完全消除冲突（两个开发人员恰巧用了同名的命名空间）

2.依赖

引入了多个存在依赖关系js库，后期维护不断增删js库，导致混乱，出现问题

3.SeaJs(CMD规范，在commonJS（服务端模块化规范）基础上)

解决冲突与依赖，便于维护

不同于jq库参与实际开发过程，它不涉及逻辑，相当于“后勤”。

seajs官网

4.SeaJs模块化开发的步骤

step1：引入seajs文件，方法同普通js文件

step2：如何形成模块——用define函数包含模块（定义模块），define有三个参数：require，exports,module.它们类似关键字，不可更改

step3:如何调用模块——exports给外部提供接口；seajs.use(url,callback)引入被调用的模块（加载模块）。回调函数会返回一个参数，也即exports

step4:多个模块如何实现相互依赖?——require(url)函数，获取指定模块的接口，也即exports，这样便可获得指定模块内的变量或函数（前提是该模块提供了变量或函数的外部接口exports）

5.实际用法举例

页面调用模块：

 //index.html

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>seajs</title>

     <script src="sea.js"></script>

 </head>

 <body>

 <script>

     seajs.use("./modules/module1.js",function(ex){

         ex.show();

     })

 </script>

 </body>

 </html>

 //module1.js

 define(function(require,exports,module){

     function show(){

         alert("我是module1的show函数");

     }

     exports.show=show;

 })

模块间相互依赖1（依赖的是普通js文件）：

//index.html

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>seajs</title>

    <script src="sea.js"></script>

</head>

<body>

<script>

    seajs.use("./modules/module1.js",function(ex){

        ex.show();

    })

</script>

</body>

</html>

//module1.js

define(function(require,exports,module){

    require("./normal.js");

    function show(){

        alert(a);

    }

    exports.show=show;

})

//normal.js

var a=100;

模块间相互依赖2(依赖的也是seajs模块文件)：

//index.html

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>seajs</title>

    <script src="sea.js"></script>

</head>

<body>

<script>

    seajs.use("./modules/module1.js",function(ex){

        ex.show();

    })

</script>

</body>

</html>

//module1.js

define(function(require,exports,module){

    var a=require("./module2.js").a;   //require返回值相当于exports

    function show(){

        alert(a);

    }

    exports.show=show;

})

//module2.js

define(function(require,exports,module){

    var a=100;

    exports.a=a;//因为是模块，所以必须提供对外接口

})

 6.seaJs配置

alias 别名配置

当模块标识很长时，可以使用 alias 来简化。

seajs.config({

  alias: {

    'jquery': 'jquery/jquery/1.10.1/jquery',

    'app/biz': 'http://path/to/app/biz.js',

  }

});

paths

当目录比较深，或需要跨目录调用模块时，可以使用 paths 来简化书写。

seajs.config({

  paths: {

    'gallery': 'https://a.alipayobjects.com/gallery',

    'app': 'path/to/app',

  }

});

与别名配置合用，可以简化路径书写

更多配置参数见seaJs配置

7.第三个参数module

module.id:模块唯一标识

module.uri：模块绝对路径

module.dependencies：该模块所依赖的模块数组

module.exports：

exports是module.exports的引用，它们是两个不同的对象，但是引用关系

我们真正调用的对象是module.exports

当要对模块的对外接口进行修改时，只能用module.exports，一般情况下用exports

8.require.async()  异步加载模块

require.async(“./module1.js”,callback) ;

//不需要等module1加载完成，下面的代码就可以执行

var a=100;

blablabla...

9.插件

1.安装spm

2.seaJs插件

10.技巧

1.通过seajs.use()一次引入多个模块：

seajs.use(["./module1.js","module2.js"],function(ex1,ex2){

　　ex1.show();

　　ex2.show();

})

2.性能

为了让 sea.js 内部能快速获取到自身路径，推荐手动加上 id 属性：

<script src="path/to/sea.js" id="seajsnode"></script>

加上 seajsnode 值，可以让 sea.js 直接获取到自身路径，而不需要通过其他机制去自动获取。这对性能和稳定性会有一定提升，推荐默认都加上。

3.线上调试

控制台：seajs.cache

JS模块化开发（一）——seaJs的更多相关文章

  1. JS模块化开发：使用SeaJs高效构建页面

    一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...

  2. JS模块化开发（三）——seaJs+grunt

    1.seaJs直接构建存在的问题 由于模块之间的依赖require引用的是模块名,当多个js模块被合并成一个时,会由于找不到模块名而报错 2.seaJs+grunt开发 用到的插件:grunt-cmd ...

  3. Js模块化开发的理解

    Js模块化开发的理解 模块化是一个语言发展的必经之路,其能够帮助开发者拆分和组织代码,随着前端技术的发展,前端编写的代码量也越来越大,就需要对代码有很好的管理,而模块化能够帮助开发者解决命名冲突.管理 ...

  4. JS模块化开发----require.js

    前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前 ...

  5. Js模块化开发--seajs和gruntJs

    1.Seajs库 解决开发中的冲突依赖等问题,提供代码可维护性. SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css ...

  6. js模块化开发——前端模块化

    在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可:如今CPU.浏览器性能得到了极大的提升,很多页面逻辑迁移到了客 户端(表单验证等),随着web2.0时代的到来,Ajax技术 ...

  7. require.js模块化开发

    模块化开发的原因: 1.引入的js过多然后在加载的过程中容易出现假死的状态,导致页面会发生白屏 2.变量名的问题 在多人协作开发的时候容易出现变量名的冲突 面向对象 3.引入优先级的问题 模块化开发分 ...

  8. 2.精通前端系列技术之JS模块化开发-深入学习seaJs（四）

    深入学习seajs 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基 ...

  9. 前端模块化 | 解读JS模块化开发中的 require、import 和 export

    本篇分为两个部分 第一部分:总结了ES6出现之前,在当时现有的运行环境中,实现"模块"的方式: 第二部分:总结了ES6出现后,module成为ES6标准,客户端实现模块化的解决方案 ...

随机推荐

  1. 忘记mysql数据库root密码

    找到配置文件my.ini  ,然后将其打开,可以选择用记事本打开,查找的方法如下: 打开后,搜索mysqld关键字 找到后,在mysqld下面添加skip-grant-tables,保存退出. PS: ...

  2. 【个人博客作业II】有关代码规范问题的讨论

    参考课程辅导书<构建之法>可以知道,程序的代码规范常指代码风格规范和代码设计规范两个方面,其中:代码风格规范包括(缩进,行宽,括号,断行与空白行,分行,命名,下划线,大小写,注释这几个部分 ...

  3. 用软件工程分析开源项目octave的移植

    在本科的时候学习了软件工程,报考了信息系统项目管理师的考试,,虽然没有过,但是其实还是学了一些相关项目管理方面的知识,,9大管理,,当年应该能背出来,,, 1 项目整体管理 2 项目范围管理 3 项目 ...

  4. 第一次Sprint

    项目刚开始做的话,离客户的需求应该,蛮远的. 用的是eclipse加安卓模拟器在弄. 目前主要弄APP的界面和一些主要的功能算法,各个功能板块的位置划分的内容. Github团队地址是:https:/ ...

  5. docker安装后启动出现错误

    重启报错: [root@localhost ~]# systemctl restart docker Job for docker.service failed because the control ...

  6. JavaScript使用jsonp实现跨域

    为什么要把ajax跨域写一下呢,因为ajax跨域并不是想跨就能跨的.因为为了安全,ajax是不允许跨域的. 举个例子,你有一个卖水果的网站,你的ajax请求另一个网站提供的图片,正常的时候,图片是一个 ...

  7. Exception while invoking TaskListener: Exception while invoking TaskListener: null

    https://community.alfresco.com/thread/225041-exception-while-invoking-tasklistener-null Ok, so the p ...

  8. WebLogic: 内存溢出

    每次部署完项目,重启Weblogic服务,总是遇到java.lang.OutOfMemoryError: PermGen space,其实物理内存也是够的,当时的解决方法就是多重启几次Weblogic ...

  9. SQLSERVER case when 的学习

    sqlserver 查询时的CASE WHEN学习记录 ) as '任务数', RPATask_State as id, case RPATask_State when then '已接收' when ...

  10. Linux基础学习（6）--Linux软件安装

    第六章——Linux软件安装 一.软件包管理简介 1.软件包分类: (1)源码包:脚本安装包 (2)二进制包(RPM包.系统默认包) 2.源码包: (1)源码包的优点:开源,如果有足够的能力,可以修改 ...