主要来介绍require.js的使用

开始之前先给大家看一下同步加载出现的问题：

 <script src="a.js"></script><script src="b.js"></script><script src="d.js"></script><script src="e.js"></script><script src="f.js"></script><script src="g.js"></script>

上面这样加载主要出现的问题：

加载的时候，浏览器会停止对网页的渲染，加载的文件越多，网页失去响应的时间就会越长；
文件之间是存在依赖关系的，比如b.js 依赖于a.js ，因此必须严格保证文件之间的加载顺序，依赖性最大的文件一定要放在最后面加载，而且依赖性如果很复杂，维护起来将很麻烦。

为了解决这样的问题于是有了require.js

实现js文件的异步加载，避免网页失去响应
管理每个模块之间的依赖项，便于维护

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

模块化的标准

AMD ，异步加载模块require.js。依赖前置：在一开始就将所有依赖项加载完全。
CMD，通用模块定义sea.js。依赖延迟，在需要的时候才去加载。

现在比较常用的AMD

接下来看一下如何使用

主要分为3步：

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

然后定义模块，
- 每个模块都有自己独立的作用域
- 在定义模块的时候，需要使用requirejs提供的函数define() 进行定义
- 需要使用语法如下

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

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

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

模块的注意项

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

如果有导出项，只需要把导出项通过return语句进行返回即可！引用模块时。

模块有导出项，怎么使用导出项？

要接收模块的返回值，那么就在回调函数中的形参里声明形参来接收
requiresjs 会自动为形参赋值
引入多个模块时，形参的顺序和模块加载的顺序是一一对应的！！！
注意：**在请求多个模块的时候，一般将没有返回值的模块放在后面，有返回值的放在前面，因为形参的顺序和模块加载的顺序是一一对应的，则有返回值的模块则都在参数前面，这样就可以避免要为没有返回值的模块写形参

 require([ "./modules/b", "./modules/c",'./modules/a'], function(mb, mc){//a 是没有导出项的console.log(mb);console.log(mc);})

模块的依赖项

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

 //5-模块的 依赖项define(['./c'],function(toolbox){console.log(toolbox);});

模块路径的查找方式

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

不做任何配置，直接以当前文件的路径作为参照 require(["./modules/a"])
如果设置了data-main属性，那么模块的查找，会以data-main指定的文件的路径作为基础（几乎不用）
1. data-main是一个属性，是引入require.js的script标签的属性
2. 这个属性可以用来指定一个文件，加载文件的路径会以这路径为基础，指定的文件会在require.js加载完毕之后，通过异步的方式加载，并且执行里面的代码,

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

如果通过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: "./abc",},//require.js中可通过设置shim，让不支持模块化的第三方内容//和require.js能够实现更好的配合shim: {//配置xyzxyz: {//设置依赖项： jquerydeps: ["jquery"]},//配置abcabc: {deps: ["jquery"],exports: "animate" //导出项名称}}})

前端模块化 AMD 详解相关推荐

layUI前端框架使用详解_layUI前端框架视频教程
百度云网盘下载 ayUI前端框架使用详解_layUI前端框架视频教程课程目录: 1前言 2为什么要用layUI框架 3layer组件的引用方法 4layer组件的使用方法详解 5用layer组件快速 ...
layUI前端框架使用详解_layUI前端框架视频教程完整版
layUI前端框架使用详解_layUI前端框架视频教程课程目录: 1前言 2为什么要用layUI框架 3layer组件的引用方法 4layer组件的使用方法详解 5用layer组件快速开发一个表单验 ...
window 程序报错自动重启_好程序员web前端教程之详解JavaScript严格模式
好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版.旨在改善错误检查功 ...
DD每周前端七题详解-第五期
DD每周前端七题详解-第五期系列介绍你盼世界,我盼望你无bug.Hello 大家好!我是霖呆呆! 呆呆每周都会分享七道前端题给大家,系列名称就是「DD每周七题」. 系列的形式主要是:3道JavaS ...
前端路由模式详解（hash和history）
前端路由模式详解(hash和history) 前端路由有两种模式:hash 模式和 history 模式,接下来分析这两种模式的实现方式和优缺点. hash 模式 hash 模式是一种把前端路由的路径 ...
前端this指向详解
前端this指向详解什么是this this在不同应用场景中的取值普通函数(非箭头函数)被调用时的this指向普通函数(非箭头函数)作为对象方法被调用时的this指向普通函数(非箭头函数)作为 ...
用WEB技术栈开发NATIVE应用（二）：WEEX 前端SDK原理详解
摘要: WEEX依旧采取传统的web开发技术栈进行开发,同时app在终端的运行体验不输native app.其同时解决了开发效率.发版速度以及用户体验三个核心问题.那么WEEX是如何实现的?目前WEE ...
一零四、前端性能优化详解
1 前端性能优化介绍页面性能优化浏览器浏览器的主要作用浏览器的组成结构浏览器是多进程的浏览器的渲染机制重排reflow与重绘repaint 页面加载缓慢的原因浏览器部分代码部分优 ...
web前端 --- HTML标签详解
HTML标签详解 head头标签: meta标签.title标签.link标签.style标签.script标签 body标签: 字体标签: h1~h6标签.font标签.u标签.b标签.strong ...

前端模块化 AMD 详解