seajs学习

最新推荐文章于 2019-09-07 23:38:35 发布

binglingnew

最新推荐文章于 2019-09-07 23:38:35 发布

阅读量708

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/binglingnew/article/details/17709399

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、什么是seajs

SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。SeaJS的作者是淘宝前端工程师玉伯。

二、 seajs的下载

使用了seaJS，基本上不需要改动当前项目js或者css的目录结构，我想对于前端er来说，js、css的放置虽然各有千秋，但都肯定是放在一起的，或者是分门别类的放在一起，那么这样就好办了，你的配置不需要改动，就这样。

接下来，要做的是下载seaJS了。使用seaJS非常的友好，因为是中文的，虽然部分文档在了github上，很可喜的是这个全球最大的开源分享社区并没有被防火墙拦截，你可以随心所欲的阅读。

seaJS的官网：http://seajs.org

解压后，目录说明如下：

dist      -- sea.js 等压缩好的文件，直接可用
docs      -- 使用文档
lib       -- 给 Node.js 用的版本
src       -- 源码
tests     -- 测试集
tools     -- 压缩等工具，可查看 build.xml 得到源码合并顺序
Makefile  -- 可执行构建、测试等命令

三、seajs的配置

在页面中使用seaJS和使用jQuery一样，需要引入，seaJS需要配置可选的两个参数：config（配置文件）、main（入口文件）。如下代码所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>引用seajs</title>
<script src="sea/sea.js" data-config="./js/config" data-main="./js/main"></script>
</head>
<body>
</body>
</html>

可以看出sea和项目的脚本是分别放在两个同级目录的文件夹的。

注意两个参数里的路径都要打点号。“./”表示当前路径，如果省略将忽略“/”。

配置文件是以当前文件为准的同级文件夹js下的config.js。

入口文件是以当前文件为准的同级文件夹js下的main.js。（如果文件就是js，可以省略后缀，如果文件是其他类型，可以使用#号结尾，如main.js.php#，加载的文件就是main.js.php，或者使用get参数，如main.js?get=123，那么加载的文件就是main.js?get=123）

3.1 seajs的配置

seajs.config({
  // 激活 shim 插件
   plugins: ['shim'],
  // 别名配置
  alias: {
    'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
    'json': 'gallery/json/1.0.2/json',
    'jquery': 'jquery/jquery/1.10.1/jquery'
  },

  // 路径配置，当目录比较深或者跨目录调用模块时可以引用
  paths: {
    'gallery': 'https://a.alipayobjects.com/gallery'
  },

  // 变量配置：模块路径在运行时才能确定，这时可以使用 vars 变量来配置例如define(function(require, exports, module) {

  //var lang = require('./i18n/{locale}.js');
     //=> 加载的是 path/to/i18n/zh-cn.js

  //});
  vars: {
    'locale': 'zh-cn'
  },

  // 映射配置
  map: [
    ['http://example.com/js/app/', 'http://localhost/js/app/']
  ],

  // 预加载项:可以在普通模块加载前，提前加载并初始化好指定模块
  preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
  ],

  // 调试模式
  debug: true,

  // Sea.js 的基础路径:Sea.js 在解析顶级标识时，会相对base路径来解析
  base: 'http://example.com/path/to/base/',

  // 文件编码
  charset: 'utf-8'
});

3.2 seajs main写法

这个入口，就像wordpress的index.php一样，所有的访问都从这里进入，然后流通到各个目的地。main.js也是如此，当然了这个文件也是非常的小巧，也许一行代码就可以，也许几行代码就可以。我的代码是这样的：

seajs.use('./js/second',function(s)
{
	s.show();
});

使用js文件夹下面的second.js启动项，启动完毕执行该模块下的show方法。这里的目录必须是相对运行文件为准的路径。

use的其他用法：

// 加载一个模块
seajs.use('./a');

// 加载一个模块，在加载完成时，执行回调
seajs.use('./a', function(a) {
  a.doSomething();
});

// 加载多个模块，在加载完成时，执行回调
seajs.use(['./a', './b'], function(a, b) {
  a.doSomething();
  b.doSomething();
});

四、seajs模块

如上second模块的写法：

//second
define(function(require,exports,module)
{
	var $=require('jquery');
	exports.show=function()
	{
		$(document.body).append('<div>seaJS的second模块被正常加载。</div>');
	}
});

这是一个模块的书写方法，全局函数define，参数是一个function，其中的function有3个参数，参数名分别为require、exports、module。
详解：

define 用来定义模块。Sea.js 推崇一个模块一个文件，遵循统一的写法：

define(function(require, exports, module) {
  // 模块代码
});

require 用来获取指定模块的接口。

define(function(require) {
  // 获取模块 a 的接口
  var a = require('./a');
  // 调用模块 a 的方法
  a.doSomething();
});

require.async 用来在模块内部异步加载一个或多个模块。

define(function(require) {
  // 异步加载一个模块，在加载完成时，执行回调
  require.async('./b', function(b) {
    b.doSomething();
  });
  // 异步加载多个模块，在加载完成时，执行回调
  require.async(['./c', './d'], function(c, d) {
    c.doSomething();
    d.doSomething();
  });
});

exports 用来在模块内部对外提供接口，可以使用 return或给 module.exports赋值直接向外提供接口。

define(function(require) {
  // 通过 return 直接提供接口
  return {
    foo: 'bar',
    doSomething: function() {}
  };
});

define(function(require, exports, module) {

  // 正确写法
  module.exports = {
    foo: 'bar',
    doSomething: function() {}
  };

});

module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。

module.id `String`

模块的唯一标识。

define('id', [], function(require, exports, module) {
  // 模块代码
});

上面代码中， define 的第一个参数就是模块标识。

module.uri `String`

根据模块系统的路径解析规则得到的模块绝对路径。

define(function(require, exports, module) {
  console.log(module.uri); 
  // ==> http://example.com/path/to/this/file.js
});

binglingnew

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

seajs学习

module.id String

module.uri String

module.id `String`

module.uri `String`