我们来说全局配置，我们知道导入require.js之后会设置data-main属性来执行入口文件，然后再入口文件中进行require的配置。...全局配置方案： 我们把配置信息单独写一个js文件，然后再main.js中通过require函数配置依赖项来解决，代码如下。...配置非AMD规范JS： 我们知道要配置模块，js文件必须要使用AMD规范来编写，就是加上define函数，主动返回函数等操作。...但是我们以前编写的js，肯定没有这些功能，修改起来又比较麻烦，所以需要配置非AMD规范的JS。...function ($, normal) { normal.render("render"); normal.initial("initial"); }) }) 配置全局属性和配置非
通过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 依赖延迟：在需要的时候才去加载依赖项 模块化的实现（require.js） 下载后，把它放在目录下面，就可以加载了 <script src="js/<em>require.js</em>...中，模块路径的查找方式, 一共有三种： 不做任何<em>配置</em>，直接以当前文件的路径作为参照 require(["....标签的属性 这个属性可以用来指定一个文件，加载文件的路径会以这路径为基础， 指定的文件会在require.js加载完毕之后，通过异步的方式加载，并且执行里面的代码, 3.如果通过require.config方法配置了基础路径，那么所有的模块查找都会以这个基础路径作为参照 //config方法是用来配置require的一些加载规则的！...//和require.js能够实现更好的配合 shim: { //配置xyz xyz: {
在javascript中，我们把比较复杂的都是用模块化，今天我们就来了解一下require.js来实现模块化开发 require.js是什么？...require.js是在AMD规范上实现的一个 JavaScript 模块异步加载器。...lib下存放一些常用的库，和我们最关键的require.js script下存放我们自己写的一些js。 index.html代码 <!...require，这里我只配置两个常用项 baseUrl:加载模块的根目录，因为模块大多数情况都在同一目录下，配置了此项在配置模块的时候就不用加跟目录了。...好了，下篇我们接着讲require的全局配置和非amd规范的模块导入。 延生(全局配置)：所谓全局配置，就是配置只需要设置一次，我们这篇的入口文件是main.js。
在a执行到require('b')的地方时会停下来去调用b,当去执行b，执行到一半发现require('a'),就停下来去调用a。
概述 require.js是各种网络APP中非常常见的JS依赖库，它其实不仅仅是个模块加载器那么简单。它背后蕴含了一个非常重要的设计，也就是JS模块化编程。...后来随着require.js的推广和使用，就逐渐形成了AMD（The Asynchronous Module Definition），也就是"异步模块加载机制"。...这里通过一个计算幂运算的例子，详细论述require.js的使用。 2. 详论 AMD模块规范听起来很高大上，但实际上并不是很复杂。...require.config是用来配置导入的库文件，用来给模块定义配置真正的路径和简短的名称。...参考 【第67期】ES6 系列之模块加载方案 Javascript模块化编程（三）：require.js的用法 JavaScript的模块化编程
我采用的是一个非常流行的库require.js。 一、为什么要用require.js？ 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。...二、require.js的加载 使用require.js的第一步，是先去官方网站下载最新版本。 下载后，假定把它放在js子目录下面，就可以加载了。 ...在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。...underscore', 'jquery'], exports: 'Backbone' } } }); require.config()接受一个配置对象...，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。
require.js的诞生，就是为了解决这两个问题： （1）实现js文件的异步加载，避免网页失去响应； （2）管理模块之间的依赖性，便于代码的编写和维护。...require.js的加载： 使用require.js的第一步，是先去官方网站下载最新版本。 下载后，假定把它放在js子目录下面，就可以加载了。... 有人可能会想到，加载这个文件，也可能造成网页失去响应。...加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。...在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。
我采用的是一个非常流行的库require.js。 一、为什么要用require.js？ 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。...二、require.js的加载 使用require.js的第一步，是先去官方网站下载最新版本。 下载后，假定把它放在js子目录下面，就可以加载了。 ...在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。...['underscore', 'jquery'], exports: 'Backbone' } } }); require.config()接受一个配置对象...，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。
二、require.js的加载 使用require.js的第一步，是先去官方网站下载最新版本。 下载后，假定把它放在js子目录下面，就可以加载了。 ...在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。...deps: [‘underscore’, ‘jquery’], exports: ‘Backbone’ } } }); require.config()接受一个配置对象...，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。...插件 require.js还提供一系列插件，实现一些特定的功能。
function" && define.amd ) { define( "jquery", [], function() { return jQuery; }); } Require.js...中使用jQuery Require.js中使用jQuery非常方便，简单配置就可以了，例如： // 简单的配置 require.config({ // RequireJS 通过一个相对的路径...); }); Require.js中使用jQuery 插件 虽然jQuery的支持AMD的API， 这并不意味着jQuery插件也是和AMD兼容的。...function ($) { $.fn.myPlugin = function () { //你自己的插件代码 }; })(jQuery); 不过我们稍微修改一下就可以使用Require.js...中使用jQuery UI组件 Require.js中使用jQuery UI组件也类似的，只要改造一下jQuery Widget Factory 代码就可以了，并且感觉jQuery UI的依赖关系加载就可以了
关于Require.js在多页面应用的实践，可以参考：multipage 层次组织 /public |------require.js、config.js、index.html |------...require.js文件，可以从官方网站上下载： config.js: 用于配置requirejs的相关内容，可以设置文件目录，加载模块命名匹配，以及一些依赖关系等等。... alert("index"); 其中，data-main指定主要的配置文件...b','c'],function(a,b,c){ a.hello(); b.hello(); c.hello(); }); baseUrl指定所有文件的主要目录，paths配置模块名字以及其匹配的加载路径...文件的名字，就是上面requireconfig中配置的模块名字。require加载文件时，会自动加上.js后缀。
前面文章讲了FIS的源码实现细节，这篇文章偏实战一些，给出FIS跟require.js结合的简单例子。 FIS编译流程 如果已熟悉了FIS的编译设计，可以跳过这一节，直接进入下一小结。...喜欢require.js，但又喜欢用CMD编写模块的朋友有福了，下面会简单介绍如何整合require.js与FIS。 demo已经放在github，下载请猛戳。 首先看下项目结构。...实战：修改fis-conf.js 首先，打开fis-conf.js，加入如下配置。...直接看注释，如果对配置不熟悉，可参考官方文档。...的配置支持，打包部署等，这里也就抛个思路，感兴趣的童鞋可以进一步扩展。
目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。本系列的第三部分，将通过介绍require.js，进一步讲解AMD的用法，以及如何将模块化编程投入实战。...require.js的诞生，就是为了解决这两个问题： （1）实现js文件的异步加载，避免网页失去响应； （2）管理模块之间的依赖性，便于代码的编写和维护。...require.js的加载 使用require.js的第一步，是先去官方网站下载最新版本，下载后，假定把它放在js子目录下面，就可以加载了。...这个属性指定的 js 将在加载完 require.js 后处理，我们把require.config的配置加入到data-main后，就可以使每一个页面都使用这个配置，然后页面中就可以直接使用require...jquery.js，相当于默认配置了； 依赖非AMD规范的模块如果没用define(...)
本文作者：IMWeb 陈映平 原文出处：IMWeb社区 未经同意，禁止转载 前面文章讲了FIS的源码实现细节，这篇文章偏实战一些，给出FIS跟require.js结合的简单例子。...喜欢require.js，但又喜欢用CMD编写模块的朋友有福了，下面会简单介绍如何整合require.js与FIS。 demo已经放在github，下载请猛戳。 首先看下项目结构。...实战：修改fis-conf.js 首先，打开fis-conf.js，加入如下配置。...直接看注释，如果对配置不熟悉，可参考官方文档。...的配置支持，打包部署等，这里也就抛个思路，感兴趣的童鞋可以进一步扩展。
模块配置 使用require.config()方法，我们可以对模块的加载行为进行自定义。可以放到require.config.js文件中，但此js必须在require.js加载后再进行加载！.../js/libs/require.js" > <script src="....定义模块：避免全局名称空间污染 <em>require.js</em>加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。...加载非规范的模块：shim 理论上，<em>require.js</em>加载的模块，必须是按照AMD规范、用define()函数定义的模块。...因此，<em>require.js</em>提供了一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。
://requirejs.org/(官方文档) http://www.requirejs.cn(中文文档) 三：如何使用requireJS 1.使用requireJS以前，我们需要在页面引入require.js...文件,require.js文件需要在官网上下载 ?...引入require.js示例 2.requireJS中使用有3个变量：require，requirejs，define require和requirejs是等价的用于引入模块，define...3.配置短名称 在我们定义依赖模块时，可能有的文件名称过长，为了更简单一点，我们可以配置短名称，如下所示： ? 配置短名称示例
使用一般的方法引入： 1 但是这样的方法，还是可能在加载require.js的时候导致网页失去响应。...假设我们的主模块为js/home.js,引入代码应该如下： 12 //require.js...baseURL(所有模块的查找根路径)，paths(名称映射)，shim( 为那些没有使用define()来声明依赖关系、设置模块的”浏览器全局变量注入”型脚本做依赖和导出配置。)...关于require.config的详细内容可以看下下面这些文章： RequireJS进阶:配置文件的学习 RequireJS进阶:模块的优化及配置的详解 配置做完了，我们也可以开始真正写我们的逻辑代码了...AMD模块编写 require.js加载的模块的采用的AMD规范。所以我们的模块必须按照AMD的规定来写。
通过Require.js (AMD规范) 使用Element UI碰到的坑 原项目是基于require.js来加载模块的，增加新功能的同时想使用流行一点的组件（Element）和Vue；本身这两个库就是支持...Require.js的，不多说直接开干。...define("ELEMENT", ["vue"], t); Element是依赖于Vue的，所以得先在require.js的config中配置好Vue，修改为下面： require.config({
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
