JavaScript模块化开发之SeaJS

更新时间：2015年12月13日 13:50:52 作者：DEPSI

SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制,本文给大家介绍JavaScript模块化开发之SeaJS，需要的朋友参考下

前言

SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。

SeaJS本身遵循KISS（Keep it Simple,Stupid）理念进行开发，后续的几个版本更新也都是吵着这个方向迈进。

如何使用SeaJS

下载及安装在这里不赘述了，不了解的请查询官网。

基本开发原则
•一切皆为模块：SeaJS中的模块概念有点类似于面向对象中的类--模块可以拥有数据和方法，数据和方法可以定义为公共或私有，公共数据和方法可以供别的模块调用。

•每个模块应该都定义在一个单独的js文件中，即一个对应一个模块。

模块的定义和编写

模块定义函数define

SeaJS中使用define函数定义一个模块。define可以接收三个参数：

/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
  //code of function…
}

define可以接收的参数分别是模块ID，依赖模块数组及工厂函数。

•如果只有一个参数，则赋值给factory

•如果有两个参数，第二个赋值给factory，第一个如果是数组则赋值给deps，否则赋值给id

•如果有三个参数，则分别赋值

但是，包括SeaJS官网示例在内几乎所有用到define的地方都只传递一个工厂函数进去，类似于如下代码：

define(function(require,exports,module){
  //code of the module
})

个人建议遵循SeaJS官方示例的标准，用一个参数的define定义模块。那么id和deps会怎么处理呢？

id是一个模块的标识字符串，define只有一个参数时，id会被默认赋值为此js文件的绝对路径。如example.com下的a.js文件中使用define定义模块，则这个模块的ID会赋值为 http://example.com/a.js ，没有特别的必要建议不要传入id。deps一般也不需要传入，需要用到的模块用require加载即可。

工厂函数factory解析

工厂函数是模块的主体和重点。它的三个参数分别是：

•require：模块加载函数，用于记载依赖模块
•exports：接口点，将数据或方法定义在其上则将其暴露给外部调用
•module：模块的元数据

这三个参数可以根据需要选择是否需要显示指定。

module是一个对象，存储了模块的元信息，具体如下：
•module.id：模块的ID
•module.dependencies：一个数组，存储了此模块依赖的所有模块的ID列表。
•module.exports：与exports指向同一个对象

三种编写模块的模式

第一种是基于exports的模式：

define(function(require,exports,module){
  var a=require('a');
  var b=require('b'); //引入模块
  var data1=1; //私有数据
  var fun1=function(){//私有方法
    return a.run(data1);
  }
  exports.data2=2; //公有数据
  exports.fun2=function(){
    return 'hello';
  }
})

上面是一种比较“正宗”的模块定义模式。除了讲公共数据和方法附加在exports上，也可以直接返回一个对象表示模块，如下面的代码与上面的代码功能相同：

define(function(require){
  var a=require('a');
  var b=require('b'); //引入模块
  var data1=1;
  var fun1=function(){
    return a.run(data1);
  }
  return{
    data2:2,
    fun2:function(){
      return 'hello';
    }
  }
})

如果模块定义没有其他代码，只返回一个对象，还可以有如下简化写法：

define({
  data2:2,
    fun2:function(){
      return 'hello';
    }
  })

第三种写法对于定义纯JSON数据的模块非常合适。

根据应用场景的不同，SeaJS提供了三个载入模块的API，分别是：seajs.use,require和require.async。

seajs.use

seajs.use主要用于载入入口模块。入口模块相当于C语言的main函数，同时也是整个模块依赖树的根。seajs.use
的用法如下：

//第一模式
seajs.use('./a');
//回调模式
seajs.use('./a',function(a){
  a.run();
})
//多模块模式
seajs.use(['./a','./b'],function(a,b){
  a.run();
  b.run();
})

其中多模块的用法和KISSY中的模块加载方法类似，不亏是一个人写的啊！

一般seajs.use只用在页面载入入口模块，SeaJS会顺着入口模块解析所有依赖模块并将它们加载。如果入口模块只有一个，也可以通过给引入seajs的script标签加入“data-main”属性来省略seajs.use，例如一下写法：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>TinyApp</title>
</head>
<body>
  <p class="content"></p>
  <script src="./sea.js" data-main="./init"></script>
</body>
</html> 
require

require是seajs主要的模块加载方法，当在一个模块中需要用到其他模块时一般用require加载：

var m=require('./a'); 
require.async

上文说过seajs会在html页面打开时通过静态分析一次性记载所有需要的js文件，如果想要某个js文件在用时才加载，可以使用require.async。

这样只有在用到这个模块时，对应的js文件才会被下载，也就实现了JavaScript代码的按需加载。

SeaJS的全局配置

seajs提供了一个seaj.configd的方法可以设置全局配置，接收一个表示全局配置的配置对象，具体方法如下：

seajs.config({
base:'path',
alias:{
  'app':'path/app/'
},
charset:'utf-8',
timeout:20000,
debug:false
})

其中，

•base表示基址路径
•alias可以对较长的常用路径设置缩写
•charset表示下载js时script标签的charset属性。
•timeout表示下载文件的最大时长，以毫秒为单位。

Seajs如何与现有的JS库配合使用

要将现有的JS库与seajs一起使用，只需根据seajs的模块定义规则对现有库进行一个封装。例如，下面是对jQuery的封装方法：

define(function(){
  /*
  此处为jquery源码
  */
  })

一个完整的例子：

上文说了那么多，知识点比较分散，所以最后我打算用一个完整的SeaJS例子把这些知识点串起来，方便朋友们归纳回顾。这个例子包含如下文件：
•index.html 主页面

•sea.js
•jquery.js
•init.js init模块，入口模块，依赖data、jquery、style三个模块，又主页面载入
•data.js data模块，纯json数据模块
•style.css css样式表

html：
<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="content">
  <p class="author"></p>
  <p class="blog"><a href="#">Blog</a></p>
</div>
<script src="sea.js"></script>
<script>
    seajs.use('init');
</script>
</body>
</html> 
javascript:
//init.js
define(function(require, exports, module) {
  var $ = require('./jquery');
  var data = require('./data');
  var css = require('./style.css');
  $('.author').html(data.author);
  $('.blog').attr('href', data.blog);
});
//data.js
define({
  author: 'ZhangYang',
  blog: 'http://blog.codinglabs.org'
}); 
css:
.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}

请注意：

1.请讲jquery.js源码文件包含在seajs模块加载代码中；

2.在Sea.js < 2.3.0版本之前是可以加载css文件的，新版本中此功能移除，为了兼容考虑，加载css功能将作为一个插件存在。

使用方法

•可以在sea.js标签后引入这个插件使用
•也可以将插件代码混入sea.js当中
•和seajs-style的区别 •seajs-css是使 Sea.js 能够加载一个css文件，和link标签一样
•seajs-style是指提供一个seajs.importStyle方法用于加载一段 css 字符串

以上内容是小编给大家分享的JavaScript模块化开发之SeaJS，希望对大家学习javascript模块化开发有所帮助，谢谢大家一直以来对脚本之家网站的支持。！

您可能感兴趣的文章:

fullpage.js全屏滚动的具体使用方法
fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，本文主要介绍了fullpage.js全屏滚动的具体使用方法，感兴趣的可以了解一下
2021-09-09
JavaScript实现的使用键盘控制人物走动实例
这篇文章主要介绍了JavaScript实现的使用键盘控制人物走动实例,也可说是一个JS实现的小人走动小游戏,需要的朋友可以参考下
2014-08-08
深入浅析js原型链和vue构造函数
这篇文章主要介绍了js原型链和vue构造函数的相关知识，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2018-10-10
webpack 模块热替换原理
这篇文章主要介绍了webpack 模块热替换原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
一文搞懂JavaScript中的内存泄露
以前我们说的内存泄漏，通常发生在后端，但是不代表前端就不会有内存泄漏。特别是当前端项目变得越来越复杂后，前端也逐渐称为内存泄漏的高发区。本文就带大家了解一下Javascript的内存泄漏
2022-06-06
手机端页面rem宽度自适应脚本
网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文章讲述模糊的地方。重点给大家介绍下rem.有需要的小伙伴可以参考下。
2015-05-05
原生JS实现九宫格抽奖
这篇文章主要为大家详细介绍了原生JS九宫格抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
vue3+Pinia+TypeScript 实现封装轮播图组件
这篇文章主要介绍了vue3+Pinia+TypeScript 实现封装轮播图组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
2022-07-07
JavaScript中arguments和this对象用法分析
这篇文章主要介绍了JavaScript中arguments和this对象用法,结合实例形式较为详细的分析了arguments对象和this对象的功能、常见用法及相关操作注意事项,需要的朋友可以参考下
2018-08-08
JavaScript 中的数据类型Number
这篇文章主要介绍了JavaScript 中的数据类型Number，Number 类型使用 IEEE 754 格式表示整数和浮点值，下文相关详细资料介绍，需要的小伙伴可以参考一下
2022-04-04