一、 异步加载模块
在浏览器端使用一个文件的时候要到服务器端加载， 这个加载的过程是异步行为， seajs为了实现这样的功能， 在模块内部提供了require.async，可以实现异步的加载模块文件
require.async方法:
第一个参数 是模块的依赖集合
可以是一个字符串 表示的是一个模块文件
可以是一个数组， 表示多个模块文件
第二个参数是回调函数
回调函数中的参数，就是前面加载模块向外暴露的功能（一一对应）
require.async方法与seajs.use方法一样，但是seajs建议
在模块外部使用seajs.use方法
在模块的内部使用require.async方法
require.async方法只能在模块中使用，在模块外是不能被访问的
require.async方法与seajs.use方法一样不能加载具有id的模块
可以通过模块依赖集合加载模块文件从而成功实现async方法加载具有id的模块
1 // 定义模块 2 define(["js/dom"], function(require, exports, module) { 3 // var dom = require("js/dom"); 4 // console.log(dom); 5 6 // 异步加载 7 var dom = require.async("myId", function(dom) { 8 // var dom = require.async("myId", function(dom) { 9 // var dom = require.async(["js/dom", "js/color"], function(dom, color) { 10 console.log(arguments); 11 12 }); 13 }) |
require.async与require方法
在条件语句中
对于require
在if执行块中
加载并执行模块
在if不执行块中
加载文件，没有执行加载模块
Require方法尽量放在最前面，不要写在代码块中
对于require.async
在if执行快中
加载并执行模块
在if不执行块中
没有加载文件，也没有执行模块
1 if (true) { 2 // 这里会执行 3 var dom = require('js/dom') 4 console.log(dom) 5 6 require.async('js/dom', function (dom) { 7 console.log(dom) 8 }) 9 10 } else { 11 // 这里不会执行 12 var color = require('js/color') 13 console.log(color) 14 15 require.async('js/color', function (color) { 16 console.log(color) 17 }) 18 } |
在异步操作中：
对于require
立即加载文件，但是会在异步语句执行之后去执行加载require
对于async
没有立即加载文件，会在异步语句执行之后执行加载require.async
1 setTimeout(function() { 2 // var dom = require("js/dom"); 3 // console.log(dom); 4 5 require.async("js/dom", function(dom) { 6 console.log(dom); 7 }) 8 }, 1000) |
二、 配置
seajs提供了config方法用来进行配置
配置： 本身这个框架就有的功能，需要开启，就要进行配置
插件： 本身这个框架没有这些功能，被别人实现了，如果需要使用引入该文件即可
2.1 alias
作用： 简化文件的引用
例如文件名过长，我们可以简化它
值是一个对象
key: 新的文件名
value: 原始路径
举例：
1 // 配置alias 2 seajs.config({ 3 alias: { 4 "jquery": "modules/js/jquery-1.7.2" 5 } 6 }) 7 // 引入jquery 8 seajs.use(["jquery"], function(jq) { 9 console.log(jq); 10 }) |
输出：
1 |
2.2 paths
作用：简化路径
例如文件路径太长，我们可以简化它
值是一个对象
key： 新的文件路径
value: 原始路径
举例：
1 seajs.config({ 2 // 配置paths 3 paths: { 4 "module": "modules/js" 5 } 6 }) 7 // 引入jquery 8 seajs.use("module/jquery-1.7.2", function(jq) { 9 console.log(jq); 10 }) |
输出：
2 |
2.3 map
作用： 用于批量处理文件
值是一个二维数组
数组中的每一项都是一个数组， 代表一组处理的文件
数组中第一项表示匹配到的文件
数组中的第二项表示要修改的文件
比如，压缩之后的文件.min.js，在我们书写的时候不想写.min.js，此时可以通过map进行配置，决定哪些文件可以带.min.js，哪些文件可以不需要带.min.js
举例：
1 // 使用config方法进行配置 2 seajs.config({ 3 // 配置map 4 map: [ 5 ["jquery.js", "jquery.min.js"] 6 // [".js", ".min.js"] 7 ] 8 }) 9 // 引入main.js 10 seajs.use(["modules/js/main"], function() {}) |
main.js
1 // 定义模块 2 define(function(require, exports, module) { 3 var jq = require("modules/js/jquery"); 4 console.log(jq); 5 }) |
输出：
1 |
2.4 vars
作用：解决路径不能拼接问题
值是一个对象
key: 模板变量名
value: 变量名称对应的值
举例：
1 // 进行配置 2 seajs.config({ 3 // 配置vars 4 vars: { 5 "q": "query" 6 } 7 }) 8 // 引入入口文件 9 seajs.use(["modules/js/main"], function() {}) |
main.js
1 // 定义模块 2 define(function(require, exports, module) { 3 // 引入jquery 4 // var jq = require("modules/js/j" + "query" + "-1.7.2"); 5 var jq = require("modules/js/j{q}-1.7.2"); 6 console.log(jq); 7 }) |
输出：
1 |
2.5 base
作用: 更改根目录
举例：
1 // 进行配置 2 seajs.config({ 3 // 配置base 4 base: "modules/js" 5 }) 6 // 引入入口文件 7 seajs.use(["main"], function() {}) |
三、 加载css插件
seajs.css文件
使用css插件非常简单
第一步在sea.js之后引入css文件
第二步直接在模块中引入css文件
注意：在引入css文件的时候一定不能省略.css后缀， 因为seajs对js敏感， 对css不敏感
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <script type="text/javascript" src="sea.js"></script> 9 <script type="text/javascript" src="seajs-css.js"></script> 10 <script type="text/javascript"> 11 // 引入css文件 12 // 第一步在seajs之后引入css文件 13 // 第二步直接引入css文件 14 // 需要注意： 不能省略.css后缀 15 seajs.use("css.css"); 16 </script> 17 </body> 18 </html> |
3.1 预加载文件
seajs-preload.js
第一步在seajs文件之后加载preload.js文件
第二步在配置中，定义preload配置
值是一个数组
数组中的每一项就是预加载的文件
我们就可以使用预加载的文件了
加载预加载文件的时间点
在seajs.use方法之后，模块加载之前
所以在工作中我们尽量将预加载的配置写在最前面
举例：
1 seajs.config({ 2 // 配置preload 3 preload: ["jquery-1.7.2.js"] 4 }) 5 6 // 引入main.js 7 seajs.use("main", function() { 8 console.log($); 9 }); |
扫描下方二维码添加微信：haomei0452，领取 前端资料、项目实战视频教程 ！
爱创课堂是一家专门做前端培训的机构，由百度高级工程师，《JavaScript设计模式》作者张容铭老师亲自授课，全程20个项目实战，真正做到学习完即可到企业正常工作！
我们前端课程的五大优势：
1. 名师亲自授课，根据企业需求 实时跟进课程大纲，保证学员学到的都是最新的、企业最需要的前端知识点
2. 采取小班教学、上二休一的模式（一个班20—30人，保证老师可以照顾到每一位同学，学员有充足的时间练习）
3. 签订就业协议，帮助学员制作简历，投递简历，模拟面试，不用担心就业问题，目前学员平均就业薪资12K
4. 免费学习一周，不满意不收取任何费用
5. 与中国石油，中国电信，软通等知名企业合作，进行企业内训，并进行学员就业推荐
