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 条评论
登录 后参与评论

相关文章

  • 关于seajs

    虽然已经有很长时间没写JavaScript,但很多时候看到一些应用还是会带着好奇心去研究一下。之前是看腾讯的朋友网,它的webchat做的很不错(虽然ff下有b...

    meteoric
  • AMD && CMD

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

    超然
  • JS模块加载框架 SeaJS

    SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制,兼容所有主流浏览器 SeaJS的主要目的...

    dys
  • grunt任务之seajs模块打包

    grunt与seajs          grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我们做一些重复度很高的事情,如压缩,合并,js...

    欲休
  • 邂逅seajs 和spm

    城市中的游牧民族
  • 浅谈前端模块化

    模块化编程 CommonJS AMD(Asynchronous Module Definition)规范 requireJS与seaJS requireJs ...

    IMWeb前端团队
  • 浅谈前端模块化

    其实模块化的诞生不难理解,我们知道因为随着网站逐渐的发展,嵌入网页的Javascript代码越来越庞大,而网页越来越像桌面程序,需要一个团队去分工协作,进行管理...

    IMWeb前端团队
  • 前端相关片段整理——持续更新

    在不同的接口请求数据然后拼合成自己所需的数据,通常这些接口之间没有关联(例如不需要前一个接口的数据作为后一个接口的参数)

    超然
  • 对比requirejs更好的理解seajs

    seajs遵循CMD规范,requirejs遵循AMD规范。AMD规范是预加载,CMD规范是赖加载。 下文举例假设有文件 b.js, c.js如下 //b.js...

    smy
  • 深入seajs源码系列一

    简述         前端开发模块化已经是大势所趋,目前模块化的规范有很多,众所周知的有commonJS,Module/Wrappings和AMD等,而且ES6...

    欲休
  • 【前端面试题】10—18道有关模块化开发的面试题(附答案)

    如今的前端工作中,模块化开发成为主流,无论是前端还是后端,由于模块化开发为我们带来巨大的收益,因此开发者都在使用它。模块化开发部分的面试题主要考察应试者对几种模...

    前端达人
  • requirejs与seajs的异同

    用模块化的方式来实现的话,首先要抽取模块,那么哪些东西可以抽取为模块呢?四则运算的函数和初始化的函数可以作为模块抽离出来,不论是seajs实现还是require...

    挥刀北上
  • RequireJS 模块化加载框架使用

    同样的,首先是下载好 require.js --> http://requirejs.org/docs/download.html#requirejs

    书童小二
  • 30分钟学会前端模块化开发

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

    张果
  • JavaScript中export和import实现模块化管理

    在理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。但是,在ES6以前,JavaScript一直没有自己模块体系(module),无...

    青年码农
  • 模块化之AMD、CMD、UMD、commonJS

    做后台的对模块化的思想很清晰,都是类、继承什么的,而JavaScript早期开始就没有包、类模块的概念,甚至只有函数作用域。

    wade
  • 基于RequireJS和JQuery的模块化编程——常见问题解析

    由于js的代码逻辑越来越重,一个js文件可能会有上千行,十分不利于开发与维护。最近正在把逻辑很重的js拆分成模块,在一顿纠结是使用requirejs还是sea...

    用户1154259
  • 深入seajs源码系列三

    入口方法        每个程序都有个入口方法,类似于c的main函数,seajs也不例外。系列一的demo在首页使用了seajs.use(),这便是入口方法。...

    欲休
  • AMD and CMD are dead之js模块化黑魔法

    缘由 在2013-03-06 13:58的时候,曾甩下一片文章叫:《为什么不使用requirejs和seajs》,并放下豪言说发布一款完美的模块化库,再后来就把...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券