前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >seajs简记

seajs简记

作者头像
超然
发布2018-08-03 17:25:42
1.4K0
发布2018-08-03 17:25:42
举报
文章被收录于专栏:超然的博客超然的博客

参考seajs快速入门

一、前端模块化的价值

  1. 解决命名冲突
  2. 摆脱文件依赖
  3. 性能优化
  4. 提高可维护性
  5. seajs.use方法调用 通过exports暴露接口 通过require引入依赖

二、Sea.js 的常用 API

  1. seajs.config base string    Sea.js 在解析顶级标识时,会相对 base 路径来解析 
  2. seajs.use 用来在页面中加载模块
  3. require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口 require 的参数值 必须 是字符串直接量
  4. require.async require.async 方法用来在模块内部异步加载模块,并在加载完成后执行指定回调。callback 参数可选
代码语言:javascript
复制
 1 define(function(require) {
 2 
 3   // 异步加载一个模块,在加载完成时,执行回调
 4   require.async('./b', function(b) {
 5     b.doSomething();
 6   });
 7 
 8   // 异步加载多个模块,在加载完成时,执行回调
 9   require.async(['./c', './d'], function(c, d) {
10     c.doSomething();
11     d.doSomething();
12   });
13 
14 });
  1. exports exports 是一个对象,用来向外提供模块接口 可以直接将方法赋给接口,也可以将其添加到对象里面赋给接口 1 define(function(require, exports, module) { 2 3 // 对外提供接口 4 module.exports = { 5 name: 'a', 6 doSomething: function() {}; 7 }; 8 9 });
代码语言:javascript
复制
1 define(function(require, exports) {
2 
3   // 对外提供 foo 属性
4   exports.foo = 'bar';
5 
6   // 对外提供 doSomething 方法
7   exports.doSomething = function() {};
8 
9 });

三、模块

  1. 系统 构建:a. 定义系统成员     b. 约定系统通讯
  2. 模块 a. js代码,统一固定的格式      b. 通过基本交互规则,能彼此引用协同工作
  3. 模块标识 相对标识:相对标识以 . 开头,只出现在模块环境中(define 的 factory 方法里面)。 顶级标识:顶级标识不以点(.)或斜线(/)开始, 会相对模块系统的基础路径(即 Sea.js 的 base 路径)来解析

四、 使用步骤

  1. 引入sea.js文件(方法与引用jQuery相同)
  2. 配置信息 在<script>中,方式与写jQuery代码相同
代码语言:javascript
复制
 1 seajs.config({
 2 
 3   // 别名配置
 4   alias: {
 5     'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
 6     'json': 'gallery/json/1.0.2/json',
 7     'jquery': 'jquery/jquery/1.10.1/jquery'
 8   },
 9 
10   // 路径配置
11   paths: {
12     'gallery': 'https://a.alipayobjects.com/gallery'
13   },
14 
15   // 变量配置
16   vars: {
17     'locale': 'zh-cn'
18   },
19 
20   // 映射配置
21   map: [
22     ['http://example.com/js/app/', 'http://localhost/js/app/']
23   ],
24 
25   // 预加载项
26   preload: [
27     Function.prototype.bind ? '' : 'es5-safe',
28     this.JSON ? '' : 'json'
29   ],
30 
31   // 调试模式
32   debug: true,
33 
34   // Sea.js 的基础路径
35   base: 'http://example.com/path/to/base/',
36 
37   // 文件编码
38   charset: 'utf-8'
39 });
  1. 配置sea.js的基础路径  及加载模块
代码语言:javascript
复制
 1 通过 use 方法,可以在页面中加载任意模块:
 2 
 3 // 加载模块 main,并在加载完成时,执行指定回调
 4 seajs.use('./main', function(main) {
 5   main.init();
 6 });
 7 use 方法还可以一次加载多个模块:
 8 
 9 // // 并发加载模块 a 和模块 b,并在都加载完成时,执行指定回调
10 seajs.use(['./a', './b'], function(a, b) {
11   a.init();
12   b.init();
13 });
  1. 写基础模块
  2. 写引用模块(main)

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-09-04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档