技术文章 | Technical articles

前端_模块化开发(上)

一、 异步加载模块

在浏览器端使用一个文件的时候要到服务器端加载, 这个加载的过程是异步行为, seajs为了实现这样的功能, 在模块内部提供了require.async,可以实现异步的加载模块文件

require.async方法:

第一个参数 是模块的依赖集合

可以是一个字符串 表示的是一个模块文件

可以是一个数组, 表示多个模块文件

第二个参数是回调函数

回调函数中的参数,就是前面加载模块向外暴露的功能(一一对应)

require.async方法与seajs.use方法一样,但是seajs建议

在模块外部使用seajs.use方法

在模块的内部使用require.async方法

require.async方法只能在模块中使用,在模块外是不能被访问的

require.async方法与seajs.use方法一样不能加载具有id的模块

可以通过模块依赖集合加载模块文件从而成功实现async方法加载具有id的模块

 

// 定义模块

define(["js/dom"], function(require, exports, module) {

// var dom = require("js/dom");

// console.log(dom);

// 异步加载

var dom = require.async("myId", function(dom) {

// var dom = require.async("myId", function(dom) {

// var dom = require.async(["js/dom", "js/color"], function(dom, color) {

10   console.log(arguments);

11 

12  });

13 })

 

require.asyncrequire方法

在条件语句中

对于require

if执行块中

加载并执行模块

if不执行块中

加载文件,没有执行加载模块

Require方法尽量放在最前面,不要写在代码块中

 

对于require.async

if执行快中

加载并执行模块

if不执行块中

没有加载文件,也没有执行模块

if (true) {

// 这里会执行

var dom = require('js/dom')

console.log(dom)

require.async('js/dom', function (dom) {

 console.log(dom)

})

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

 

setTimeout(function() {

// var dom = require("js/dom");

// console.log(dom);

require.async("js/dom", function(dom) {

 console.log(dom);

})

}, 1000)

 

二、 配置

seajs提供了config方法用来进行配置

配置: 本身这个框架就有的功能,需要开启,就要进行配置

插件: 本身这个框架没有这些功能,被别人实现了,如果需要使用引入该文件即可

 

2.1 alias

作用: 简化文件的引用

例如文件名过长,我们可以简化它

值是一个对象

key: 新的文件名

value: 原始路径

举例:

// 配置alias

seajs.config({

alias: {

 "jquery": "modules/js/jquery-1.7.2"

}

})

// 引入jquery

seajs.use(["jquery"], function(jq) {

console.log(jq);

10 })

输出:

图片1.png

 

2.2 paths

作用:简化路径

例如文件路径太长,我们可以简化它

值是一个对象

  key: 新的文件路径

value: 原始路径

举例:

seajs.config({

// 配置paths

paths: {

 "module": "modules/js"

}

})

// 引入jquery

seajs.use("module/jquery-1.7.2", function(jq) {

console.log(jq);

10 })

输出:

图片2.png

 

2.3 map

作用: 用于批量处理文件

值是一个二维数组

数组中的每一项都是一个数组, 代表一组处理的文件

数组中第一项表示匹配到的文件

数组中的第二项表示要修改的文件

 

比如,压缩之后的文件.min.js,在我们书写的时候不想写.min.js,此时可以通过map进行配置,决定哪些文件可以带.min.js,哪些文件可以不需要带.min.js

 

举例:

// 使用config方法进行配置

seajs.config({

// 配置map

map: [

 ["jquery.js", "jquery.min.js"]

 // [".js", ".min.js"]

]

})

// 引入main.js

10 seajs.use(["modules/js/main"], function() {})

 

main.js

// 定义模块

define(function(require, exports, module) {

var jq = require("modules/js/jquery");

console.log(jq);

})

输出:

图片3.png

 

2.4 vars

作用:解决路径不能拼接问题

值是一个对象

key: 模板变量名

value: 变量名称对应的值

举例:

// 进行配置

seajs.config({

// 配置vars

vars: {

 "q": "query"

}

})

// 引入入口文件

seajs.use(["modules/js/main"], function() {})

 

main.js

// 定义模块

define(function(require, exports, module) {

// 引入jquery

// var jq = require("modules/js/j" + "query" + "-1.7.2");

var jq = require("modules/js/j{q}-1.7.2");

console.log(jq);

})

输出:

图片4.png

 

2.5 base

作用: 更改根目录

举例:

// 进行配置

seajs.config({

// 配置base

base: "modules/js"

})

// 引入入口文件

seajs.use(["main"], function() {})

 

三、 加载css插件

seajs.css文件

使用css插件非常简单

第一步在sea.js之后引入css文件

第二步直接在模块中引入css文件

注意:在引入css文件的时候一定不能省略.css后缀, 因为seajsjs敏感, 对css不敏感

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<script type="text/javascript" src="sea.js"></script>

<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方法之后,模块加载之前

所以在工作中我们尽量将预加载的配置写在最前面

 

举例:

seajs.config({

// 配置preload

preload: ["jquery-1.7.2.js"]

})

// 引入main.js

seajs.use("main", function() {

console.log($);

});





扫描下方二维码添加微信:haomei0452,领取 前端资料、项目实战视频教程 !



爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!

 
我们前端课程的五大优势:

 
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
 
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习

3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K

4. 免费学习一周,不满意不收取任何费用

5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐

上一篇文章: web前端开发源码笔记_大数据与git(下午)
下一篇文章: 前端_模块化开发(下)

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>