require.js简单介绍和使用

官网:http://www.requirejs.org/

RequireJS是一个JavaScript文件和模块载入器。

还原一下需求的来源:一个网页开始的时候,所有js代码都写在一个文件里面,只要加载这一个就够了。随着应用越来越复杂,代码越来越多,一个文件不够了,由于各种原因必须分成多个文件,还有用到其他的一些框架,这样就必须加载多个js文件。有个问题就是加载的时候,浏览器会停止网页渲染,加载越多而失去响应的时间就越长;另外,js文件之间存在依赖关系,因此要保证加载顺序,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。为了解决以上问题,于是像require.js这样的项目就诞生了。

使用示例:

<!doctype html>
<html>
<head>
<title>requirejs使用</title>
<meta charset="UTF-8">
<script data-main="main" src="http://cdn.staticfile.org/require.js/2.1.15/require.min.js" type="text/javascript" async="true"></script>
</head>
<body>
</body>
</html>

上面代码中的script标签data-main属性是在require.js加载后要载入的js文件(main.js)

接下来是main.js,

require.config({
   paths: {
     jquery:[
       ‘http://cdn.staticfile.org/jquery/1.11.1/jquery.min‘,
       ‘http://cdn.bootcss.com/jquery/1.11.1/jquery.min‘
    ]
  }
});
require([‘jquery‘],
  function(_jj) {
     alert(_jj.fn.jquery);
  }
);

使用require.config()方法,可以对模块的加载行为进行自定义。require.config()参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。这里直接是引用的线上的地址(去掉.js后缀)。

require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。require()异步加载jquery,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

如果,main.js只是,

require([‘jquery‘],
   function(_jj) {
     alert(_jj.fn.jquery);
  }
);

这样的话,默认它会去加载与main.js在同一个目录的jquery.js文件。如果不在同一目录,那么用require.config()方法是有必要的,还有可以用baseUrl改变基目录。

这里简要说下还有个shim参数,从理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但更多的流行库都没有,那么这样的模块在用require()加载之前,要先定义它们的一些特征。

最后,require.js要求每个模块是一个单独的js文件。这样的话,如果加载多个模块,就会发出多次HTTP请求,会影响网页的加载速度。因此,require.js提供了一个优化工具r.js,当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,减少HTTP请求数。

时间: 2024-07-28 23:11:34

require.js简单介绍和使用的相关文章

Node.js简单介绍

Node.js是一个能够让javascript执行在server上的平台,既是语言又是平台. Node.js是一个实时web应用程序的平台. Node.js有强大的包管理器npm,故node相关软件安装用npm命令安装. Node.js简单介绍,布布扣,bubuko.com

前端之JavaScript:JS简单介绍

JavaScript(JS)之简单介绍 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿在其IE3.0

require.js简单入门

推荐文章:http://www.ruanyifeng.com/blog/2012/11/require_js.html 1.以下例子主要实现功能, 1)引用jq库获取dom中元素文本, 2)实现并引用去空格工具类trim, 3)最后获取文本并去掉空格后输出, 4)打包js(将所有js文件打包成main.min.js) 1.下载require文件 require.js require主文件 r.js require优化器文件 2.文件结构 index.html --js文件夹 jquery.js

Elasticlunr.js 简单介绍

Elasticlunr.js 项目地址:http://elasticlunr.com/ 代码地址:https://github.com/weixsong/elasticlunr.js 文档地址:http://elasticlunr.com/docs/index.html Elasticlurn.js is a lightweight full-text search engine in Javascript for browser search and offline search. Elast

js的nextSibling属性用法简单介绍

js的nextSibling属性用法简单介绍:此属性可以返回当前节点的下一个同级节点.如果下一个同级节点不存在,则此属性返回值是null.语法结构: elementNode.nextSibling 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softw

AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载.它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合.目前它已经被很多项目所接纳,包括jQuery(1.7). RequireJS RequireJS是一个工具库,主

js的table表格对象的rows属性用法简单介绍

js的table表格对象的rows属性用法简单介绍:rows作用正如其拼写一样,是用来获取一个行的集合,也就是表格中行的集合.代码如下: <!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部

require.js 的简单运用 --兰

功能描述: 1.简单的require.js的运用 2.BaseUrl运用(加载不同文件夹下的路径) 3.shim运用(依赖:比如jquery-ui 需要依赖jquery) 4.require方法调用(包括回调方法使用) 1.文件的目录结构 main.js代码 require.config({ baseUrl:"js", paths: { jquery: 'jquery-1.7.2', bootstrap_alert:'bootstrap-alert', model1:'model1/m

JS获取各种宽度、高度的简单介绍:

JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧