按照叶小钗的方法，是从data-main开始的，所以我们也从那里开始把！...首先，页面会有一段js标签，会去加载requirejs: Requirejs中，代码是一个自执行的方法...，加载data-main所指向的js，读取配置 3 执行req(cfg)，执行刚刚读取的配置，加载目标模块... 基本上就是这个套路了！...流程图 收获 1 原来RequireJS加载模块的时候，是检查data-main属性，然后去加载目标js。 2 加载到目标模块后，会按照它的依赖关系，进行加载，并且每个模块仅会加载一次。...3 加载模块的时候，会绑定一个load事件，当加载完会触发事件，执行该js 4 脚本实际上是通过创建了页面的script元素，然后添加到head里面。
-- data-main attribute tells require.js to load scripts/main.js after require.js loads....--> My...Get it from the script tag with require.js in it....的引用： 这样写， requirejs 就会帮我们去自动加载主入口文件，而它需要去提取的是 data-main...对于主入口文件 index.js 加载 util 逻辑，原理也是大体类似。
/jquery"], "a" : "js/a" } }) 然后再页面中使用下面的方式来使用requirejs： 解释一下，加载 requirejs 脚本的 script 标签加入了data-main属性，这个属性指定的 js 将在加载完 require.js...后处理，我们把require.config的配置加入到data-main后，就可以使每一个页面都使用这个配置，然后页面中就可以直接使用require来加载所有的短模块名 data-main还有一个重要的功能...，当script标签指定data-main属性时，require会默认的将data-main指定的js为根路径，是什么意思呢？...如上面的data-main="js/main"设定后，我们在使用require(['jquery'])后(不配置jquery的paths)，require会自动加载js/jquery.js这个文件，而不是
.js"> 这段代码依次加载多个js文件。..." }) 全局配置 加载 requirejs 脚本的 script 标签加入了data-main...属性，这个属性指定的 js 将在加载完 require.js 后处理，我们把require.config的配置加入到data-main后，就可以使每一个页面都使用这个配置，然后页面中就可以直接使用require...来加载所有的短模块名；config可以在该js中定义；同时可作为程序的执行入口； data-main还有一个重要的功能，当script标签指定data-main属性时，require会默认的将data-main...如上面的data-main="js/main"设定后，我们在使用require(['jquery'])后(不配置jquery的paths)，require会自动加载js/jquery.js这个文件，而不是
主模块：data-main require.js在加载的时候会检察data-main属性。data-main属性的作用是，指定网页程序的主模块。...由于requireJS默认的文件后缀名是js，所以可以把main.js简写成main。... /* main.js */ require(['jquery', 'underscore...可以放到require.config.js文件中，但此js必须在require.js加载后再进行加载！ <script data-main="./js/main.js" src="....foo1.1.js foo1.2.js some/newmodule.js some/oldmodule.js some/module.js 当“some/newmodule”调用了“require
前端模块化 (Require.js) ? 为什么要用 前端模块化 早期，js代码量小, 所有Javascript代码可以都写在一个文件里面，只要加载一个js文件就够了。...src="4.js"> 这段代码依次加载多个js文件。...通用模块定义 sea.js 依赖延迟：在需要的时候才去加载依赖项 模块化的实现（require.js） 下载后，把它放在目录下面，就可以加载了 <script src="<em>js</em>/require.<em>js</em>.../modules/a"]) 如果设置了data-main属性，那么模块的查找，会以data-main指定的文件的路径作为基础（几乎不用） data-main是一个属性，是引入require.js的script..." data-main=".
RequireJS是符合AMD规范（Asynchronous module definition异步模块加载）一种js加载方式，目的是为了防止加载js的时候阻塞html页面渲染，其使用非常简单。...首先要去下载一个require.js，网址：http://requirejs.org/docs/download.html 在html文件中引入require.js： data-main指向模块加载的主文件...text/css"> common模块是我自定义的一个js模块，里面包含了绘制
我们来说全局配置，我们知道导入require.js之后会设置data-main属性来执行入口文件，然后再入口文件中进行require的配置。...但是比如我们有五个页面，data-main="main.js"，那五个页面都要导入这个main.js，因为main.js中有配置信息，但是我们五个页面的页面js都必须要写在main.js中了，这样反而不好...全局配置方案： 我们把配置信息单独写一个js文件，然后再main.js中通过require函数配置依赖项来解决，代码如下。...文件中，导入此文件即可，代码如下： main.js:入口文件 require(['/js/lib/config.js'], function () { require(['jquery', 'module1...但是我们以前编写的js，肯定没有这些功能，修改起来又比较麻烦，所以需要配置非AMD规范的JS。
它支持浏览器和像node.js之类的服务器环境。使用RequireJS,你可以顺序读取仅需要相关依赖模块。...data-main属性 当你下载RequireJS之后，你要做的第一件事情就是理解RequireJS是怎么开始工作的。...当RequireJS被加载的时候，它会使用data-main属性去搜寻一个脚本文件（它应该是与使用src加载RequireJS是相同的脚本）。data-main需要给所有的脚本文件设置一个根路径。...下面的脚本是一个使用data-main例子： 另外一种方式定义根路劲是使用配置函数...requireJs假设所有的依赖都是脚本，那么当你声明一个脚本依赖的时候你不需要使用.js后缀。
概述 require.js是各种网络APP中非常常见的JS依赖库，它其实不仅仅是个模块加载器那么简单。它背后蕴含了一个非常重要的设计，也就是JS模块化编程。...最开始的时候，每个JS框架都会设计自己的模块加载方案，每次使用不同的JS的框架就得理解不同的模块加载方案。...这里通过一个计算幂运算的例子，详细论述require.js的使用。 2. 详论 AMD模块规范听起来很高大上，但实际上并不是很复杂。..." data-main="main"> 其中， 这句代码定义了脚本的加载入口，src当然是require.js的源代码，而data-main则会默认的将dota-main指定的js路径为根路径。
随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。...RequireJS核心功能： 声明不同js文件之间的依赖 可以按需、并行、延时载入js库 可以让我们的代码以模块化的方式组织 初看起来并不复杂。...-- JavaScript --> 属性 data-main...是告诉requirejs：你下载完require.js以后，马上去载入真正的入口文件main.js。...main.js 在main.js 中通常做两件事： 配置requirejs 比如项目中用到哪些模块，文件路径是什么 载入程序主模块 /** * 真正的入口文件main.js。
.js"> 这段代码依次加载多个js文件。...require.js的加载： 使用require.js的第一步，是先去官方网站下载最新版本。 下载后，假定把它放在js子目录下面，就可以加载了。...加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。...那么，只需要写成下面这样就行了： data-main属性的作用是，指定网页程序的主模块...在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。
随着JS越来越庞大，已经不仅仅是以前复制粘贴做特效的时代了，JS越来越偏向于业务逻辑与应用。恰逢Node的流行，JS在web开发中占有越来越重要的地位。.../lib/a.js和/lib/b.js 以及 /others/c.js 是测试的模块js文件。...doctype html> alert("index"); 其中，data-main指定主要的配置文件；src为requirejs...因此会先弹出index对话框，当执行config.js的后半部分代码时，会依次使用a.js b.js c.js，因此也会依次弹出三个对话框。
RequireJS 是一个遵循 AMD 规范的模块化加载框架 与上文seajs一样，这里简单介绍其相关用法 同样的，首先是下载好 require.js --> http://requirejs.org/...index.html: 注意到这里script标签多了一个data-main属性(加不加后缀js都可以），它标识了引用主模块入口 main.js （也可以不使用这种引用入口方式，下边会介绍另一种方式，注意啦...require main.js: 将两个模块置入参数1，并以回调的方式传入使用 define(['main1','main2...假设 main.js文件因网络问题加载延迟后，就有可能出现以下结果 module of main2: module of main1: module of main: ...
在javascript中，我们把比较复杂的都是用模块化，今天我们就来了解一下require.js来实现模块化开发 require.js是什么？...DOCTYPE html> ...然后还有个data-main属性，这属性指定在加载完 reuqire.js 后，就用 requireJS 加载该属性值指定路径下的 JS 文件并运行，所以这个js为入口。...延生(全局配置)：所谓全局配置，就是配置只需要设置一次，我们这篇的入口文件是main.js。难道我们要把整个项目的js都写在main.js中吗？
= addX; index.js var example = require('....当执行到这一段代码的时候， 浏览器会先 加载 math 模块，在math模块加载成功后， 再执行后面的回调函数 math.add(2,3) require.js 说道AMD 就不得不提 require.js...首先下载最新require.js ，然后在 html 底部写上如下代码： data-main...（至少我是通过 react.js 认识到 webpack 的） react.js 可以说是前端（浏览器）项目，可是在编程风格上，确实不折不扣的 CommonJS 风格。...对于 CommonJS 的模块， 对将其 最终打包在一个js文件里面， 对于不写不需要立刻执行的文件，也可以拆分出来，在运行时异步加载。
通过require.js 可以对javascript文件进行别样引用 Require.js的使用： 第一步： 只需在html页面中引用require.js 就够了 第二步： 在引用require.js...的时候，要设置async属性为ture 确保不会阻塞页面 第三步：单写一个js文件，用于引用相关的javascripnt文件，这个文件可以随便命名，一般叫main.js 第四步： 在引用require.js...时，通过data-main属性指定main.js ***模块化**** 原本我们在引用require.js，指定main.js后，可以直接在main.js中书写我们的javascript代码。...模块化：把我们需要的功能和属性定义成一个js文件，通过引用这个js文件就能使用其功能和属性 使用require.js 实现的模块化满足 AMD 标准 → Asynchronous Module Define...使用sea.js 实现的模块化满足 CMD 标准 → Common Module Define npm install ‘–g’ 模块名称 全局安装相关模块 npm uninstall
/paper.js"> <script...依赖关系和模块加载优化（require.js） 其实完成上面的代码之后呢，整个系统的功能已经完成了，下面要做的只是一些使用方式的优化，我们用require.js来修改一下我们的代码。...首先，我们在网上下载一个 require.js，放在项目的js目录中。.../require.js" data-main="js/index"> 一句就能搞定，实在太方便啦。
-- XSS START -->当require.js找到一个具有data-main属性的脚本元素时，它会加载...data-main属性中指定的脚本，其等效代码如下：var node = document.createElement('script');node.url = 'data:,alert(1)';document.head.appendChild...-- XSS START --><!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
