使用SeaJS实现模块化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 字符串
使用SeaJS实现模块化JavaScript开发(新)的更多相关文章
- 使用SeaJS实现模块化JavaScript开发
前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封 ...
- 使用SeaJS实现模块化JavaScript开发【转】
前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封 ...
- 模块化的JavaScript开发的优势在哪里
如今模块化的 JavaScript 的开发越来越火热,无论是模块加载器还是优秀的 JavaScript 模块,都是层出不穷.既然这么火,肯定是有存在的理由,肯定是解决了某些实际问题.很多没接触过模块化 ...
- seajs进行模块化开发
seajs进行模块化开发 模块化前端开发入门指南(二) 2015-08-26 15:23 by paseo, 370 阅读, 0 评论, 收藏, 编辑 概览 使用seajs模块化加载器进行模块化开发, ...
- Atitit.js模块化 atiImport 的新特性javascript import
Atitit.js模块化 atiImport 的新特性javascript import 1. 常见的js import规范amd ,cmd ,umd1 1.1. Require更多流行3 2. at ...
- 汇总一些知名的 JavaScript 开发开源项目
汇总一些知名的 JavaScript 开发开源项目 转自:CTOLib , www.ctolib.com/topics-107352.html ggraph - 图形可视化的凌乱数据 这是一个建立 ...
- JavaScript开发工具简明历史
译者按: JavaScript开发要用到的工具越来越多,越来越复杂,为什么呢?你真的弄明白了吗? 原文: Modern JavaScript Explained For Dinosaurs 为了保证可 ...
- 精通模块化JavaScript
近日读了一本名为<精通模块化JavaScript>的书,并记录了其中的精髓. 一.模块化思维 精通模块化开发并不是指要遵循一套定义明确的规则,而是指能够将自己置身于使用者的角度,为可能即将 ...
- 活字格发布新版本,插件公开,引领Web开发新潮流
日前,活字格Web 应用生成平台发布V4.0版本,首次公开插件机制,强大的扩展性和系统集成能力,引起业内瞩目. 活字格是由西安葡萄城自主研发的 Web 应用生成平台,提供易用的类Excel可视化设计器 ...
随机推荐
- careercup-递归和动态规划 9.4
9.4 编写一个方法,返回某集合的所有子集. 类似leetcode:Subsets 解法: 解决这个问题之前,我们先要对时间和空间复杂度有个合理的评估.一个集合会有多少子集?我们可以这么计算,生成了一 ...
- Android 自学之帧布局 FrameLayout
帧布局(FrameLayout)直接继承了ViewGroup组件: 帧布局容器为每一个加入其中的组件都创建了一个空白的区域,这个区域我们称之为一帧,所有每个组件都占据一帧,这些都会根据gravity属 ...
- 8.LNMP环境的配置
LNMP环境的配置 参照文档:https://oneinstack.com/install/ 安装文件位置:/data/soft: ```yum -y install wget screen pyth ...
- readonly和const区别
常量和只读变量的区别 const string name="Xuj"; readonly string name; 1.常量是不可改变的,只读变量只能在构造方法中才能改变其值. 2 ...
- SSIS结合BCP及SQL Server作业实现定时将数据导出打包实现数据同步
首先这个流程要实现的功能大致是: 有两台服务器,一台是对外网开发的,一台是内网的.那么很明显数据交互都是外网服务器在做,而这个流程要做的就是要将外网上面的数据定时同步到内网中. 我们依对其中某张表的操 ...
- MVC小系列(二十)【给Action提供HttpStatusCodeResult】
主要用到: HttpStatusCodeResult 和HttpStatusCode 的http返回状态 比如: /// <summary> /// 使用异步模式 /// </sum ...
- 主机访问 虚拟机web注意事项
在这里, 我通过NAT的方式, 通过主机访问虚拟机. 需要做的是, 将主机中访问的端口, 映射为虚拟机的'编辑->虚拟网络编辑器->vmnet8', 如下图 在弹出的'映射传入端口'界面中 ...
- Solr 1.3 安装步骤
可以通过以下三种方式之一设置 Solr 的主位置: 1.设置 java 系统属性 solr.solr.home (没错,就是 solr.solr.home). 2.配置 ...
- Ext.Net学习笔记04:Ext.Net布局
ExtJS中的布局功能很强大,常用的布局有border.accordion.fit.hbox.vbox等,Ext.Net除了将这些布局进行封装以外,更是对border进行了一些非常实用的改进,让我们来 ...
- iOS开发——JS网页交互——javaScript
JS中调用OC #import "ViewController.h" @interface ViewController () <UIWebViewDelegate> ...