RequireJS（一）

aganliang 2020-02-02

为什么使用RequireJS

  1. 有效防止命名冲突
  2. 声明不同js文件之间的依赖
  3. 可以是我们的代码以模块化的方式组织

RequireJS常用的方法

  1. reuqirejs.config 为模块设置别名
  2. requirejs 将写好的模块进行引入
  3. define 用来编写模块，相应地方进行引入

实例：

index.html:引入require.js

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>Document</title>
</head>
<body&g 大专栏  RequireJS（一）t;
<script src="js/require.js" data-main="js/main"></script>
</body>
</html>

main.js:引入jquery，validate.js定义别名

requirejs.config({
    paths:{
        jquery:'jquery-1.11.1'
    }
});
//传入引入模块
requirejs(['jquery','validate'],function($,validate){

    console.log(validate.isEqual(1,2))

});

validate.js:define定义模块

define(['jquery'],function($){ //需要引入模块，此处并没有使用引入的jqury模块
    return {
        isEmpty:function(){},
        checkLength:function(){},
        isEqual:function(str1,str2){

            return str1=== str2;

        }
    }
});

更多资料：http://www.requirejs.cn/home.html

aganliang

aganliang

相关推荐

RequireJS和Backbone的集成

有朋友留言RequireJS如何与Backbone集合使用。这两个轻量级的库合起来使用确实能够方便的构建大型应用程序。RequireJS填补了前端模块化开发的空缺，Backbone采用MVC的分层结构很好的将程序各个部分解耦。Backbone目前不支持AM

Chasingsun / 0评论 2013-05-16

Fastadmin 如何引入 layui 模块

FastAdmin,PHP,Fastadmin引入layui模,fastadmin使用layui。FastAdmin基于RequireJS进行前端JS模块的管理，因此如果我们需要再引入第三方JS插件，则必按照RequireJS的规则进行载入。FasrAdm

Elna / 0评论 2020-01-09

amd、cmd、CommonJS以及ES6模块化

他们之间有什么区别？AMD是一个组织，RequireJS是在这个组织下自定义的一套脚本语言。是一个依赖前置、异步定义的AMD框架，在定义的同时如果需要用到别的模块，在最前面定义好即在参数数组里面进行引入，在回调里面加载。输出方式有2种：默认输出---mod

binglingnew / 0评论 2019-12-03

RequireJS 加载 easyui

原因已经发现，那么如何解决呢，修改EAsyui的代码通常是不合情理的。我的方案是再次渲染。在自己的代码中加入定时器，定时扫描是否允许渲染，如允许，则执行渲染呢。$.fn.slider是easyui 最后定义的控件，如果slider都定义好了，那么其它也都定

lancelotlewis / 0评论 2014-01-21

使用 RequireJS 优化 Web 应用前端

前端开发在近一两年发展的非常快，JavaScript 作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了，这些框架都在尝试着解决一些前端开发中的共性问题，但是实现又不尽相同。在这个背景下，CommonJS 社区诞生了，为了让前端框架发展的更加成熟

FruitHardCandy / 0评论 2015-03-04

requirejs模块化开发后的合并压缩

所以现在就需要一个工具可以将这些文件在不影响业务的前提下智能压缩合并，以减少多余的请求，于是 r.js 就诞生了。r.js的压缩工具使用 UglifyJS 或者 Closure Compiler。此外r.js需要node环境，当然也可以运行在Java环境的

小新正在敲代码 / 0评论 2015-10-22

requireJs和angularJs集成

2首先，我们需要main.js文件，RequireJS将会加载这份文件，然后这份文件将会触发加工其他所有依赖的东西。这个文件定义了AngularJS应用，并且告诉它去依赖我们所定义的所有控制器、服务、过滤器及指令。//当DOM结构加载完成后，bootstr

小新正在敲代码 / 0评论 2016-04-14

requirejs/seajs

"RequireJS 是没有明显的 bug，SeaJS 是明显没有 bug. require依赖加载&执行，amd规范。通过function.toString扫描实现依赖js文件的识别

人生百态 / 0评论 2017-09-26

【已解决】requireJS 加载 layer.js时，使用layer.load无法显示提示弹窗问题

一般在html时，直接引入就可以调用layer的方法。但是requireJS比较特殊，使用layer.load时，发现根本没有加载显示弹窗；后面网上搜索了下，是因为requireJS在加载模块layer时，是不加载css文件的，所以需要在config配置里

jethai / 0评论 2019-09-07

前端的模块管理（RequireJS、AMD、CMD、CommonJS、ES6）

随着应用复杂度的攀升，常规的JavaScript引入方式已经不能满足需求，模块化管理成为团队协作的高效方法，现在的模块化管理主要有RequireJS、AMD、CMD、CommonJS、ES6四种模式。RequireJS是一个小巧的JavaScript模块载

jethai / 0评论 2019-07-01

如何用webpack打包umd模块并测试打包结果

对于 JavaScript 的模块而言, webpack 可以用来build 基于浏览器或服务端的包.下面让我们学习如何使用webpack生成UMD.让我们先来创建一个用来返回两数之和的加法模块.[0] ./add.js 83 bytes {0} [bui

Joyine / 0评论 2019-07-01

JavaScript模块化

AMD、CMD、CommonJs、UMD是ES5中提供的模块化编程的方案，import/export是ES6中新增。AMD是一个组织，RequireJS是在这个组织下自定义的一套脚本语言。是一个依赖前置、异步定义的AMD框架，在定义的同时如果需要用到别的模

earthhour / 0评论 2019-06-30

require.js学习笔记。

可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。页面顶层script标签含有一个特殊属性data-main,require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相

Chasingsun / 0评论 2019-06-30

requirejs的插件介绍与制作

前言我这里就不介绍requirejs了， 简而言之： requirejs是支持AMD规范的模块加载器， 事实上它也是AMD的最直接推动者。现在可供挑选的开源模块解决方案很多，比如component、cjs+browserify、umd等等，但是无疑类似re

lancelotlewis / 0评论 2019-06-29

requirejs的插件介绍与制作

前言我这里就不介绍requirejs了， 简而言之： requirejs是支持AMD规范的模块加载器， 事实上它也是AMD的最直接推动者。现在可供挑选的开源模块解决方案很多，比如component、cjs+browserify、umd等等，但是无疑类似re

qianqinggang / 0评论 2019-06-29

从 1 到完美，写一个 js 库、node 库、前端组件库

从 1 到完美，写一个 js 库、node 库、前端组件库之前讲了很多关于项目工程化、前端架构、前端构建等方面的技术，这次说说怎么写一个完美的第三方库。而针对 node 程序，可以直接用 commonjs 规范来写，也可由 es6 规范来写，然后用工具转化

jjjjjj / 0评论 2019-06-29

require.js学习记录

然后等待所有的依赖加载完毕，计算出模块定义函数正确调用顺序，再依次调用它们。data-main还有一个重要的功能，当script标签指定data-main属性时，require会默认的将data-main指定的js为根路径。在main.js中进行requi

qianqinggang / 0评论 2019-06-28

Webpack VS requireJS

两者都是前端自动化构建工具，模块化工具和资源管理工具，都支持AMD和CMD的加载方式，配置起来也非常简单，requireJS应有的功能，Webpack 全都有，而且Webpack 弥补了requireJS的所有缺陷。webpack通过打包，不同页面单独加载

FoolishInfanta / 0评论 2016-11-08

requirejs使用

默认的baseUrl是app.js所在的目录，也可以通过requirejs.config手动设置baseUrl，baseUrl是用来加载其他模块的相对根目录。

YOKOELEMENT / 0评论 2016-09-28

JavaScript模块化开发(四) —— RequireJS

本文转载自原地址,感谢Feeldesign Studio的无私分享！RequireJS是一个JavaScript文件和模块加载器，它主要用于浏览器端，但也可以适用于Rhino / Node 等环境。RequireJS遵循了AMD规范，使用非常广泛。之前的文

jethai / 0评论 2016-07-04

requireJs和angularJs集成

2首先，我们需要main.js文件，RequireJS将会加载这份文件，然后这份文件将会触发加工其他所有依赖的东西。这个文件定义了AngularJS应用，并且告诉它去依赖我们所定义的所有控制器、服务、过滤器及指令。});4、我们还有一份bootstrap.

Elna / 0评论 2016-04-14

requirejs直接引用zepto的方法

zepto并没有直接支持requirejs的引入，所以需要修改下源码，在v1.1.6版本line900处

aganliang / 0评论 2016-04-12

转 如何挑选适合的前端框架？

去哪儿网前端架构师司徒正美分析了各主流行框架优劣点、适用场景，并针对不同规模的公司、项目给出了相应的前端技术选择方案。最近几年，前端技术迅猛发展，差不多每年都会冒出一款主流的框架。每次新开业务线或启动新项目时，首先第一件事就是纠结：使用什么框架，重造什么轮

Pinkr / 0评论 2016-01-29

用grunt合并requireJS的模块文件,压缩css,images

// app顶级目录，非必选项。如果指定值，baseUrl则会以此为相对路径。默认情况下所有模块资源都相对此目录。// 若该值未指定，模块则相对build文件所在目录。// closure: 使用 Google's Closure Compiler 的

qianxiaona / 0评论 2015-07-20

快速理解RequireJs

RequireJs已经流行很久了，我们在项目中也打算使用它。它提供了以下功能：。声明不同js文件之间的依赖可以按需、并行、延时载入js库可以让我们的代码以模块化的方式组织初看起来并不复杂。属性data-main是告诉requirejs：你下载完以后，马上去

jethai / 0评论 2015-05-22

AngularJS与RequireJS集成

RequireJS允许你定义和管理JS文件之间的依赖关系，把这些工作变成了一个简单的构建过程。利用这些异步加载管理工具，可以保证在代码执行之前所有依赖的东西就已经被加载好了——专注于开发实际的应用功能从来没有如此简单过。下面通过配置AngularJS官方的

Chasingsun / 0评论 2014-09-07

RequireJS进阶（一）

为了应对日益复杂，大规模的JavaScript开发。我们化整为零，化繁为简。将复杂的逻辑划分一个个小单元，各个击破。这时一个项目可能会有几十个甚至上百个JS文件，每个文件为一个模块单元。如果上线时都是这些小文件，那将对性能造成一定影响。RequireJS提

小新正在敲代码 / 0评论 2014-09-05

Understanding RequireJS for Effective JavaScript Module Loading

define(["moduleA","moduleB","moduleC"],function(A,B,C){

aganliang / 0评论 2014-05-15

LABjs、RequireJS、SeaJS 哪个最好用？为什么？

LABjs、RequireJS、SeaJS 哪个最好用？LABjs的核心是LAB：Loading指异步并行加载，Blocking是指同步等待执行。LABjs通过优雅的语法实现了这两大特性，核心价值是性能优化。RequireJS和SeaJS则是模块加载器，倡

binglingnew / 0评论 2014-03-14

RequireJS 加载 easyui

原因已经发现，那么如何解决呢，修改EAsyui的代码通常是不合情理的。我的方案是再次渲染。在自己的代码中加入定时器，定时扫描是否允许渲染，如允许，则执行渲染呢。加上renderedFlag 标记是为了防止在不同控件代码文件中发起多次渲染。由此此段代码可以防

jethai / 0评论 2014-01-21

模仿RequireJs的用法实现一个低配版的模块加载器

Contents前言回顾RequireJs的基本用法实现原理使用方法总结前言前段时间一直想用单页开发技术写一个自己的个人网站，写了一部分之后，发现单页应用因为只有一个页面，所以第一次加载index.html时就要下载所有js文件，并且为了好管理各个部分的状

jethai / 0评论 2019-06-26

初次seajs使用

第一次用报了$=null的错误。然后上网查了是jquery需要封装成CMD才能使用。于是就删掉jquery中的AMD支持，就OK了。之后又use了uploadifive这个jquery插件，不论用use方式还是require方式，虽然能导入uploadif

Elna / 0评论 2013-11-22

LABjs、RequireJS、SeaJS 哪个最好用？为什么？

LABjs的核心是LAB：Loading指异步并行加载，Blocking是指同步等待执行。LABjs通过优雅的语法实现了这两大特性，核心价值是性能优化。LABjs是一个文件加载器。RequireJS和SeaJS则是模块加载器，倡导的是一种模块化开发理念，核

wuzlun / 0评论 2013-10-28

npm下载require

下载require：

Elna / 0评论 2013-05-22

RequireJS和Backbone的集成

有朋友留言RequireJS如何与Backbone集合使用。这两个轻量级的库合起来使用确实能够方便的构建大型应用程序。RequireJS填补了前端模块化开发的空缺，Backbone采用MVC的分层结构很好的将程序各个部分解耦。Backbone目前不支持AM

lancelotlewis / 0评论 2013-05-16

SuperPlan(3)TaoBao Winner - UI - RequiredJS Grunt

<scriptdata-main="scripts/main"src="./scripts/require-jquery.js"></script]]>. require(["jqu

Elna / 0评论 2013-05-06

JS 模块化编程 require.js 的用法

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用, 但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量。使用RequireJS，会在相关的js

qianqinggang / 0评论 2019-06-21

Javascript文件加载：LABjs和RequireJS

传统上，加载Javascript文件都是使用<script>标签。<script>标签很方便，只要加入网页，浏览器就会读取并运行。但是，它存在一些严重的缺陷。严格的读取顺序。由于浏览器按照<script>在网页中出现的顺

xxjoy / 0评论 2013-04-11

异步加载js文件：LABjs和RequireJS

传统上，加载 Javascript 文件都是使用<script>标签。<script>标签很方便，只要加入网页，浏览器就会读取并运行。但是，它存在一些严重的缺陷。当存在多个<script>标签时，浏览器无法同时读取，必须

jethai / 0评论 2012-12-18

AMD

本文介绍的是另一款较为精简的RequireJS框架，既想使用AMD的特性又不想引入一个庞大的库的开发人员，不妨试试RequireJS。RequireJS可以帮助用户异步按需的加载JavaScript代码，并解决JavaScript模块间的依赖关系，提升了前

starleejay / 0评论 2012-11-22

Web前端需要研究的内容（计划）

　CommonJSAPI定义很多普通应用程序使用的API，从而填补了这个空白。它的终极目标是提供一个类似Python，Ruby和Java标准库。这样的话，开发者可以使用CommonJSAPI编写应用程序，然后这些应用可以运行在不同的JavaScript解释

bluemengcom / 0评论 2012-11-20

OMD: javascript模块化开发兼容CommonJS, AMD, CMD 以及 原生 JS

什么是OMD在node.js流行起来之前，javascript的开发方式都是函数式的顺序依赖关系，直到node火起来。CommonJS其实首先提供了一个丰富的可扩展的库，在此基础上提供可应用的API，在这些API的基础上，逐渐形成一套规范，使得javasc

bangrenzhuce / 0评论 2019-06-20

使用 Yeoman 生成 backbone，requirejs 项目

背景现在搞前端开发，不用个什么框架都不好意思说自己是前端，什么React，angular，backbone，只用jquery都不好意思跟别人打招呼。比如说现在想搞一个小项目，选了一个框架，看完文档云里雾里，看别人的实践，更加迷惑，完全不知道他要干什么。假如

Chasingsun / 0评论 2019-06-20

怎样选择前端框架

介绍Hello，开发朋友们！下面你将看到一些比较主观的工具和框架。本文希望帮助你了解前端社区中海量的工具。当然，这些只是一些可选的列表，当你需要做出选择的时候帮助你抉择。我个人一直比较喜欢 npm ，似乎他是javascript和nodejs真正的标准。另

wufan0 / 0评论 2019-06-20

What、Why、How？解读Webpack官方文档

Webpack具有Grunt、Gulp对于静态资源自动化构建的能力，但更重要的是，Webpack弥补了requireJS在模块化方面的缺陷，同时兼容AMD与CMD的模块加载规范，具有更强大的JS模块化的功能。ES6带来了很强的模块化语法糖。

bbddl / 0评论 2019-06-20

JS学习笔记 - 模块化

本文章记录本人在学习 JavaScript 中理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。在开发大型的web项目中，可能会使用到管理js的模块化工具。目前比较流行的模块化工具有RequireJS 、SeaJS等等。CommonJS说道Co

aganliang / 0评论 2019-06-20

从 RequireJS 到 SeaJS

RequireJS发布1.0.0了，很值得关注，看是否有可借鉴之处。本次比较不涉及具体实现代码，主要比较两者的API设计。SeaJS是一个适用于浏览器端的JavaScript模块加载器。RequireJS的定位中，除了是模块加载器，还是文件加载器，这决定了

aganliang / 0评论 2011-10-26

Dojo1.6新特性概览 .

简介： Dojo 1.6正式版发布已近满月，无论是在功能还是稳定性上，都取得了不小的进步。新引入的AMD规范也让Dojo紧跟Ajax库的规范化的步伐。下面就让我们来看一下Dojo 1.6中又有什么让人眼前一亮的新内容呢？同时Dojo也将对Chrome的支持

Elna / 0评论 2011-07-10

去哪儿网的网站前端框架挑选经验分享

前端框架不断推新，众多IT企业都面临着“如何选择框架”，“是否需要再造轮子”的抉择。去哪儿网前端架构师司徒正美分析了各主流行框架优劣点、适用场景，并针对不同规模的公司、项目给出了相应的前端技术选择方案。最近几年，前端技术迅猛发展，差不多每年都会冒出一款主流

YJmeditation / 0评论 2015-12-17