前端模块化 (Require.js)

为什么要用前端模块化

早期，js代码量小, 所有Javascript代码可以都写在一个文件里面，只要加载一个js文件就够了。

但是后来，随着功能需求变多, 所有功能写在一个文件不好维护, 就拆分成了多个文件, 需要依次加载多个文件。如下：

　　<script src="1.js"></script><script src="2.js"></script><script src="3.js"></script><script src="4.js"></script><script src="5.js"></script><script src="6.js"></script>

这段代码依次加载多个js文件。

这样的写法有很大的缺点:

加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长
由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

插件引入也会有依赖关系：

为了解决这两个问题：

实现js文件的异步加载，避免网页失去响应；
管理模块之间的依赖性，便于代码的编写和维护。

所以，require.js诞生了

官网网址：http://requirejs.org/

/* ---
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
IE 6+ .......... compatible ✔
Firefox 2+ ..... compatible ✔
Safari 3.2+ .... compatible ✔
Chrome 3+ ...... compatible ✔
Opera 10+ ...... compatible ✔
Get started then check out the API.
--- */

模块化的标准

让模块拥有更好的通用性！

AMD : Async Module Definition 异步模块定义 require.js

依赖前置：在一开始就将所有的依赖项全部加载

CMD : Common Module Definition 通用模块定义 sea.js

依赖延迟：在需要的时候才去加载依赖项

模块化的实现（require.js）

下载后，把它放在目录下面，就可以加载了

　<script src="js/require.js"></script>

定义模块

在require.js中，每个模块也是分成单独的文件保存的
每一个模块中都有自己单独的作用域！
在定义模块的时候，需要使用requirejs提供的函数define() 进行定义

语法：

define("模块名称", ["模块的依赖项"], function(){模块中所有的代码全都放到这个函数中
})

引用模块

在require.js中，引用一个模块使用require.js提供的函数 require()

语法： require(["模块文件的路径(不带.js后缀的)"], function(){//模块加载成功之后的回调函数//模块的加载是异步的，在模块加载完成之后，才能使用模块的相关功能
})

模块的注意项

定义模块的时候，有导出项的情况

如果有导出项，只需要把导出项通过return语句进行返回即可！

引用模块时，模块有导出项，怎么使用导出项

要接收模块的返回值，那么就在回调函数中的形参里声明形参来接收
requiresjs 会自动为形参赋值
引入多个模块时，形参的顺序和模块加载的顺序是一一对应的！！！

       require(['./modules/a', "./modules/b", "./modules/c"], function(ma, mb, mc){console.log(mb);console.log(mc);})

注意：在请求多个模块的时候，一般将没有返回值的模块放在后面，有返回值的放在前面，这样就可以避免要为没有返回值的模块写形参！

   require([ "./modules/b", "./modules/c",'./modules/a'], function(mb, mc){console.log(mb);console.log(mc);})

模块的依赖项

在定义一个模块的时候，这个模块内部可能会使用到其他模块的内容，这些其他模块就可以称作当前模块的依赖项

//5-模块的 依赖项
define(['./c'],function(toolbox){console.log('我有依赖项，依赖的是工具箱:');console.log(toolbox);
});

模块路径的查找方式

在require.js中，模块路径的查找方式, 一共有三种：

不做任何配置，直接以当前文件的路径作为参照

require(["./modules/a"])

如果设置了data-main属性，那么模块的查找，会以data-main指定的文件的路径作为基础（几乎不用）
- data-main是一个属性，是引入require.js的script标签的属性
- 这个属性可以用来指定一个文件，加载文件的路径会以这路径为基础，指定的文件会在require.js加载完毕之后，通过异步的方式加载，并且执行里面的代码,

  <script src="require.js" data-main="./js/"></script>

3.如果通过require.config方法配置了基础路径，那么所有的模块查找都会以这个基础路径作为参照

//config方法是用来配置require的一些加载规则的！require.config({//baseUrl 指的就是查找模块时的基础路径，所有的模块的查找都会以这个为参照//baseUrl 一般都被设置为绝对路径baseUrl: "/modules",//可以用这paths给模块路径设置别名（ID）paths: {dianzuan: "./gongju/diandong/zuankong/dahaode/dianzuan"}})//当引用模块的时候，模块的路径  baseUrl + 引用模块的路径
// require(["dianzuan"]);

注意：第三种方式中找文件的规则是：baseUrl + paths

特殊情况

注意: 第三种方式中,
找文件的规则是: baseUrl + 文件路径 或者 baseUrl + paths
如果引用模块的时候, 路径写法是如下 3 种形式之一, 就不遵守上面的规则了
1. 文件路径 加上了 .js 后缀, 将不拼接基础路径, 直接按照配置的路径查找
2. 文件路径 是以 / 开头的绝对路径, 会直接以绝对路径读取 (需要加上 .js 后缀)
3. 文件路径 以 http:// 或者 https:// 开头的

第三方插件使用

支持模块化

用模块化语法引入

不支持模块化

没有依赖项，没有导出项，require直接引入
有依赖项，没有导出项
- shim属性中进行配置
有依赖项且有导出项
- shim属性中进行配置

require.config({
baseUrl: "/modules",
paths: {
xyz: "./youyilai",
jquery: "../jquery.min",
abc: "./youdaochuxiang",
},
//require.js中可通过设置shim，让不支持模块化的第三方内容
//和require.js能够实现更好的配合
shim: {
//配置xyz
xyz: {
//设置依赖项： jquery
deps: ["jquery"]               },
//配置abc
abc: {
deps: ["jquery"],
exports: "animate" //导出项名称
}
}
})

阿里百秀：个人博客（6）相关推荐

WordPress阿里百秀XIU v7.5博客主题
介绍: 阿里百秀XIU v7.5兼容WordPress5.4+ 全解密博客主题完美无限制 XIU主题是一款清新扁平风格.13种颜色.多设备支持.SEO优化.各种提速优化的Wordpress主题. 功 ...
Wordpress清新扁平风格阿里百秀XIU v7.5博客主题全解密
模板介绍 WordPress XIU(阿里百秀)主题适用于图片展示.多元化图片新闻展示.个人博客.资源分享站,扁平化设计.简洁风.全面SEO优化.,响应式布局支持电脑.平板和手机的完美展示.除了百看不 ...
博客模板：xiu-v7-0阿里百秀主题-去域名限制
<![endif]--> 公交车司机终于在众人的指责中将座位让给了老太太 </div> </div> </figure> 白嫖博客你已登录为 : 13 ...
HTML——阿里百秀案例
阿里百秀 bootstrap bootstrap:前端开发框架一.使用 1.创建文件夹 2.创建html骨架 3.引入相关样式 4.书写内容二.栅格系统 1.把页面布局划分为等宽的列,然后通过列数 ...
前端移动Web第四天案例：阿里百秀首页-响应式布局（bootstrap框架）
阿里百秀首页案例技术选型方案:我们采取响应式页面开发方案技术:bootstrap框架设计图: 本设计图采用 1280px 设计尺寸 1. 页面布局分析 2. 屏幕划分分析 ① 屏幕缩放发现中 ...
阿里百秀响应式页面制作
文章目录案例:阿里百秀移动端首页一.技术选型二.需求分析 1.页面布局分析 2.屏幕划分分析三.页面制作 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容 he ...
bootstrap响应式布局之阿里百秀
响应式布局移动端布局技术选型 -流式布局(百分比布局) -flex弹性布局 -rem适配布局 -响应式布局响应式就是页面布局会随着屏幕大小变化响应,做出不同的布局模式. 相应不同设备(手机,PAD ...
Web APIs：移动端网页特效--移动端常用开发框架（Bootstrap）及阿里百秀轮播图案例
框架概述框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案.框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发. 前端常用的框架有 Bootstrap.V ...
四十三、项目实战—阿里百秀
案例:阿里百秀移动端首页技术选型方案:我们采取响应式页面开发方案技术:bootstrap框架设计图:本设计图采用1280px设计尺寸页面布局分析屏幕划分分析屏幕缩放发现中屏幕和大屏幕布 ...
bootstrap实际应用之阿里百秀的制作
视频教程是参考黑马程序猿pink老师的视频加上自身所学所作的笔记,以及一些心得,希望能有所帮助 html快捷键真正的能理解CSS中的line-height padding,border,margi ...

阿里百秀：个人博客（6）

前端模块化 (Require.js)

为什么要用前端模块化

所以，require.js诞生了

模块化的标准

模块化的实现（require.js）

定义模块

引用模块

模块的注意项

模块路径的查找方式

特殊情况

第三方插件使用

支持模块化

不支持模块化

阿里百秀：个人博客（6）相关推荐

最新文章

热门文章

阿里百秀：个人博客（6）

前端模块化 (Require.js)

为什么要用 前端模块化

所以，require.js诞生了

模块化的标准

模块化的实现（require.js）

定义模块

引用模块

模块的注意项

模块路径的查找方式

特殊情况

第三方插件使用

支持模块化

不支持模块化

阿里百秀：个人博客（6）相关推荐

最新文章

热门文章

为什么要用前端模块化