seajs简记

参考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 参数可选
 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 });
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代码相同
 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的基础路径  及加载模块
 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)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • AMD && CMD

    随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀

    超然
  • URL中的#

    作者:阮一峰   http://www.ruanyifeng.com/blog/2011/03/url_hash.html

    超然
  • ECMAScript 6 笔记(三)

      ES6 的写法还有两个好处:首先,阅读代码的人,可以立刻意识到哪些参数是可以省略的,不用查看函数体或文档;其次,有利于将来的代码优化,即使未来的版本在对外接...

    超然
  • 【THE LAST TIME】深入浅出 JavaScript 模块化

    随着互联网的发展,前端开发也变的越来越复杂,从一开始的表单验证到现在动不动上千上万行代码的项目开发,团队协作就是我们不可避免的工作方式,为了更好地管理功能逻辑,...

    Nealyang
  • 30分钟学会前端模块化开发

    早期的javascript版本没有块级作用域、没有类、没有包、也没有模块,这样会带来一些问题,如复用、依赖、冲突、代码组织混乱等,随着前端的膨胀,模块化显得非常...

    张果
  • 一览js模块化:从CommonJS到ES6

    js模块化规范有:CommonJS、AMD、CMD、ES6的模块系统。本文将依次介绍下每个规范。

    前端林子
  • 详解cmd规范

    cmd的全称是Common Module Definition,即通用模块定义,其提供了模块定义和按需加载执行模块。该规范明确了模块的基本书写格式和基本的交互规...

    无邪Z
  • MIT 发明“雾中看车”新成像系统,雾天自动驾驶表现比人类更好

    credit:Camera Culture 精彩回顾 2018 新智元产业跃迁 AI 技术峰会圆满结束,点击链接回顾大会盛况: 爱奇艺 http://w...

    朱晓霞
  • 【并非愚人节】科学家创建可自我复制的神经网络,AI像生命体一样繁殖

    新智元
  • 使用requirejs编写模块化代码

    李国宝

扫码关注云+社区

领取腾讯云代金券