JavaScript模块化开发之SeaJS


Posted in Javascript onDecember 13, 2015

前言

  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模块化开发有所帮助,谢谢大家一直以来对三水点靠木网站的支持。!

Javascript 相关文章推荐
xtree.js 代码
Mar 13 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
node.js require() 源码解读
Dec 13 #Javascript
JavaScript 模块的循环加载实现方法
Dec 13 #Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 #Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 #Javascript
详解JavaScript基于面向对象之继承
Dec 13 #Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 #Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 #Javascript
You might like
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP4实际应用经验篇(1)
2006/10/09 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP积分兑换接口实例
2015/02/09 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
javascript如何写热点图
2015/12/08 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
python处理按钮消息的实例详解
2017/07/11 Python
python多维数组切片方法
2018/04/13 Python
python实现AES加密解密
2019/03/28 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
python 实现超级玛丽游戏
2020/11/25 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
几道PHP面试题
2013/04/14 面试题
网站美工岗位职责
2014/04/02 职场文书
工会趣味活动方案
2014/08/18 职场文书
推广活动策划方案
2014/08/23 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
预备党员转正意见
2015/06/01 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android