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

相关文章

来自专栏大数据文摘

干货 | MIT手把手教你一步步创建自己的R程序包

1581
来自专栏电光石火

Windows下Go环境安装

去https://studygolang.com/dl下载安装包 msi ■ 1,安装 安装把勾都打上,一路next,采用默认安装,安装在C:\G...

2206
来自专栏互联网软件技术

wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费(2)

1504
来自专栏玄魂工作室

Hacker基础之Linux篇:基础Linux命令三

我们继续学习Linux 1. find find命令用来在指定目录下查找文件,任何位于参数之前的字符串都将被视为欲查找的目录名。 如果使用该命令时,不设置任何参...

2946
来自专栏Coding迪斯尼

java开发操作系统:一个程序向另一个程序伸出的咸猪手

1634
来自专栏JAVA同学会

MAVEN简介之——settings.xml

Maven的settings.xml配置了Maven执行的方式,像pom.xml一样,但是它是一个通用的配置, 不能绑定到任何特殊的项目。它通常包括本地仓库地址...

2161
来自专栏linux运维学习

linux学习第四十二篇:限定某个目录禁止解析php, 限制user_agent,PHP相关配置

限定某个目录禁止解析php 虚拟主机配置文件添加的核心配置内容: <Directory /data/wwwroot/111.com/upload> ...

2409
来自专栏JAVA同学会

MAVEN简介之——settings.xml

Maven的settings.xml配置了Maven执行的方式,像pom.xml一样,但是它是一个通用的配置,

2860
来自专栏wblearn

package.json文件快速入门详解

相信入门nodejs或者npm的同学会对package.json这个文件有疑惑,对这个文件的作用不是很清晰,但搭建自己的博客每每用到node,npm这个文件又必...

1281
来自专栏守望轩

Visual Studio 2008 每日提示(二十四)

#231、如何找到最后一次设置的环境保存的位置? 原文链接:Did you know… How to find what development settin...

3707

扫码关注云+社区

领取腾讯云代金券