前端模块化开发之seaJs

时间 2019-11-30

标签前端模块化开发之 seajs 繁體版

原文原文链接

了解后端语言的童鞋必定听过模块化开发的概念，好比java、python等后端语言都有本身的模块化特性，然而和后端语言相比，javascript还还没有实现模块化的功能，虽然以后的更高版本可能引入模块化开发的概念，可是现阶段咱们能够经过第三方控件来实现。javascript

今天我就来给你们介绍下能够帮助咱们实现前端模块化的工具——seaJs。若是对seaJs已经有实际使用经验的小伙伴能够直接忽略这篇文章。css

若是有小伙伴了解requireJs，那么学习seaJs会至关的容易，由于requireJs也是前端模块化的构建工具之一，二者的主要区别就是requireJs是基于AMD规范的，而seaJs是基于CMD规范的。html

至于什么是AMD和CMD，在这里不作详细介绍啦，想要了解的童鞋能够查看seaJs做者玉伯的回答：http://www.zhihu.com/question/20351507/answer/14859415前端

好了，咱们切入正题，首先先介绍下seaJs的下载及配置。java

1、seaJs的下载及配置node

下载：http://seajs.org/docs/#downloads （当前最新版本为3.0.0，还可使用smp下载）python

配置：（1）将下载后的sea.js文件挪到本身的网站目录下（sea.js位于sea-modules\seajs\seajs中）；jquery

　　　个人网站目录以下：git

　　　（2）在templates下的demo.html中进行载入，以下所示：github

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>Examples</title>
 7 <link href="" rel="stylesheet">
 8 </head>
 9 <body>
10     <p class="text">111</p>
11     <script type="text/javascript" src="../static/seajs_module/jquery/2.1.4/jquery-2.1.4.min.js"></script>
12     <script type="text/javascript" src="../static/seajs_module/seajs/2.2.0/sea.js"></script>
13     <script>
14     seajs.config({
15         base:"../static/seajs_module"  //基准文件目录
16     });
17     seajs.use("../static/app/src/demo.js")</script>  //入口模块
18 </body>
19 </html>

配置主要包括：载入sea.js文件、seajs.config配置及使用入口模块这三块，在这里我就不作详细介绍了，官方文档介绍的很是详细 http://seajs.org/docs/#quick-start

其中seajs.config的配置项主要有以下几个：

 1 seajs.config({
 2     // 别名配置    alias: {
 3         'jquery'     : '/static/lib/jquery/2.1.4/jquery',
 4     },
 5     map: [
 6         [ /^(.*\.(?:css|js|tpl))(.*)$/i, '$1?'+seajsTimestamp ]
 7     ],
 8 
 9     // 路径配置    paths: {
10         'lib': '/static/lib',
11         'util': '/static/component/base/util'
12     },
13 
14     // 变量配置//vars: {//    'locale': 'zh-cn'//},// 映射配置//map: [//    ['http://example.com/js/app/', 'http://localhost/js/app/']//],// 预加载项
15     preload: ['jquery', 'seajs-text','common'],
16     //preload: ['jquery', 'seajs-text', 'seajs-combo'],// 调试模式
17     debug: true,
18 
19     // Sea.js 的基础路径//base: 'http://example.com/path/to/base/',// 文件编码
20     charset: 'utf-8'
21 });

2、seaJs模块的编写

seaJs遵循一个文件即一个模块的规则，模块与模块之间能够存在依赖关系。

模块编写方法以下：

demo.js文件

1 define(function(require, exports, module) {  
2        var until=require('../src/untils'); //引入须要的模块（即相应js文件）  
3        //你的代码
4  　　$(".text").css("color","red");
5 　　 until.rule(); //调用until中的方法
6 });

以上代码说明，demo.js中的代码依赖于until.js中的代码

untils.js文件

1 define(function(require, exports, module) {
2     exports.rule=function(){
3         console.log('111');
4     }
5 });

untils.js中经过exports将rule方法暴露到全局。

这样咱们就实现了js模块与模块之间的编写与功能实现，效果以下：

虽然咱们再页面中没有引入untils.js，可是经过模块之间的依赖关系，seaJs也会自动帮咱们加载进来，而demo.js是做为入口模块载入。

这里须要注意的是jquery模块若是以require方式在demo.js中引入的话会报 Uncaught TypeError: $ is not a function 的错误。具体缘由是jquery是非CMD标准的，若是须要调用能够经过以下解决方案：

（1）直接在页面中引入jquery文件，就像本文上方的demo.html中同样

（2）删除jquery中的相应代码，2.14版本中删除源码底部的 && define.amd 便可（亲测可行）。

（3）官方解决方案请查看 https://github.com/seajs/seajs/issues/286

总之这也是使用seaJs比较深的坑了。

3、使用spm压缩合并模块

刚刚上面演示的模块加载例子，咱们能够看到浏览器运行的时候自动会把咱们的模块加载进去，那么若是咱们构建一个稍微复杂的功能后，咱们使用的模块也会愈来愈多，若是这样一会儿加载不少js文件显然是很是影响性能的，那么怎么解决呢，这里就须要用到seaJs的包管理工具spm。

用过npm的童鞋确定知道它是node.js的包管理工具，这里咱们须要下载node 和 npm来安装spm。

至于如何下载安装node.js就不作介绍了，能够访问 https://nodejs.org/en/ 进行下载。

下载安装完成后，打开命令行(cmd)，输入 npm install -g spm开始下载spm

等待一段时间下载完成后咱们就可使用spm命令了。

进入咱们所要压缩合并的项目js目录，输入spm build demo.js --combine 就能够压缩咱们的demo模块文件了：

压缩成功后会在demo.js的同级目录下新建一个dist文件夹存放压缩后的js文件。

接下来咱们再来打开网页看一下加载的文件就会发现只加载了demo.js了：

ok，大功告成，咱们的前端模块化之路就迈进了一小步了，至于详细的spm命令请查看 http://spmjs.io/documentation/develop-a-package#build

后续还会介绍前端自动化开发，虽然都不是什么新鲜玩意了，可是本身探索的过程才是最重要的，值得记录分享。

欢迎关注、分享、评论。