很多情况下,JS都是放到一个或者多个文件里,只要加载这些文件就可以了。

但是对于一些小型项目而言,这种写法是没有任何问题的。

但是对于某些大型网站,JS的量是很大的,如果还采用这种方式,网站时常在加载时,出现假死的现象。

为了解决这个问题,require.js应运而生。

1、require.js的核心

1、实现js文件异步加载,避免网站失去响应。

2、管理模块之间的依赖性,便于代码的编写和维护。

2、require.js的加载

在网页加载require.js时,需要实现如下写法:

<script src="js/require.js" defer async="true" data-main="js/jsname"></script>

defer兼容IE。

async=“true”兼容其它常规浏览器。

data-main属性的作用:加载当前网页的主模块。

3、主模块的写法

主模块即当前网页的主程序。

主模块依赖其它模块,此时,需要AMD规范定义require()函数。

Eg:

require(['moduleA','moduleB','moduleC',function(moduleA,moudleB,moduleC){

//...

}]);

第一个参数:所依赖的各个模块的全局名称。

第二个参数:回调函数,当前模块加载成功后,该函数将被调用。加载模块会以参数的形式传入改函数。

4、模块的配置

     require.config()方法,实现了对模块加载行为的自定义。require.config()定义在主模块的头部。

Eg:

require.config({

paths:{

"jquery":"juqery.min",

...

}

});

如果子模块在主模块的同级目录的子目录下,那写法为:

Eg:

require.config({

paths:{

"jquery":"lib/juqery.min",

...

}

});

require.config({

baseUrl:"js/lib",

paths:{

"jquery":"lib/juqery.min",

...

}

});

require.js要求,每个模块是一个单独的js文件。如果加载多个模块时,此时需要发出多次http请求,那么加载速度方面就会大大折扣。

require.js提供了一个优化工具,当模块部署完毕后,可以用这个工具将多个模块合并在一个文件中。

5、AMD模块写法

     require.js加载的模块,采用AMD规范。

定义模块,需要采用特定的define()函数来定义,以test.js为例。

定义不依赖其它模块的写法:

define(function(){

var fn1=function(obj){

return obj;

};

return{

op:fn1

};

});

定义依赖其它模块的写法:

define(['mytest'],function(mytest){

function test(){

//...

}

return {

ta:test

};

});

主模块或者别的模块调用的写法:

require(['test'],function(test){

//...

});

6、非AMD规范模块写法

理论上,require.js加载模块,必须按照AMD规范、必须用define()函数定义模块。

例如:JQuery等。,现实环境中,也会出现非AMD规范的模块,require.js也实现了对非AMD规范的模块的兼容。

实现对非AMD模块的兼容,需要用require.config()进行配置,定义他们的特征。

Eg:

jQuery插件可以这样定义:

require.config({

shim:{

'jQuery.scroll':{

deps:['jQuery'],

exports:'jQuery.fn.scroll'

}

}

});

deps,模块的依赖。

exports,输出的变量名,别的模块调用这个模块时的名称。

7、require.js插件

require.js还提供了一些插件

json和mdown插件。

domready插件,可以让回调函数在也页面DOM结构加载完成后再运行。

Eg:

require(['domready!'],function(doc){

//...

});

text和image插件,允许require.js加载文本和图片文件。

define(

['text!review.txt','image!cat.jpg'],

function(review,cat){

console.log(review);

document.body.appendChild(cat);

}

);

【上一章节】  【下一章节】

Javascript模块化编程-require.js[3]的更多相关文章

  1. 坑人的 Javascript 模块化编程 require.js

    坑人的 Javascript 模块化编程 require.js

  2. Javascript模块化编程require.js的用法

    JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...

  3. Javascript模块化编程 require.js使用详解

    一.为什么用require.js,产生的背景 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载. & ...

  4. 坑人的 Javascript 模块化编程 sea.js

    坑人的 Javascript 模块化编程 sea.js 忧伤 加 蛋疼的 开始了 看文档 Sea.js 进行配置 seajs.config({ // 设置路径,方便跨目录调用 paths: { 'ar ...

  5. Javascript模块化工具require.js教程

    转自:http://www.w3cschool.cc/w3cnote/requirejs-tutorial-1.html, http://www.w3cschool.cc/w3cnote/requir ...

  6. JavaScript模块化-require.js,r.js和打包发布

    在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章中,提到了模块化的基本思想,但是在实际项目中模块化和项目人员的分工,组建化开发,打包发 ...

  7. Javascript模块化编程(三):require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  8. Javascript模块化编程之路——(require.js)

    转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...

  9. (转)Javascript模块化编程(三):Require.js的用法

    转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...

随机推荐

  1. Hadoop1和Hadoop2的区别是什么?

    [学习笔记] Hadoop1和Hadoop2的区别是什么?马 克-to-win @ 马克java社区:原来的Hadoop1的Mapreduce又管资源管理,又管数据处理和计算.而Hadoop2中的Ma ...

  2. mysql-实现远程连接(授权法)

    远程连接阿里云主机的mysql,遇到以下问题: 1.连接被拒,无法连接 可能原因:1.3306(默认)端口未开放,在控制台设置防火墙规则: 2. host字段的值改为%就表示在任何客户端机器上能以ro ...

  3. 适配iOS7之—UITableView和UISearchBar

    iOS7中,如果用UITableViewStyleGrouped的话,里面的cell会比原来的拉长了,这样做应该是为了统一和UITableViewStylePlain风格时cell的大小一致,所以改用 ...

  4. Shell脚本部分语法

    Shell中的变量   Linux Shell中的变量分为“系统变量”和“用户自定义变量”,可以通过set命令查看那系统变量 系统变量:$HOME.$PWD.$SHELL.$USER等等 显示当前sh ...

  5. nginx/iptables动态IP黑白名单实现方案

    nginx/iptables动态IP黑白名单实现方案 一.手动封IP步骤 1.Nginx手动封IP 1.获取各个IP访问次数 awk '{print $1}' nginx.access.log |so ...

  6. UVA1406 - A Sequence of Numbers(树状数组)

    UVA1406 - A Sequence of Numbers(树状数组) 题目链接 题目大意: 给定N个数字.给两种操作:C x: 把这N个数字都加上x. Q x:查询这N个数里面有多少个数字和2^ ...

  7. 数据结构基础-Hash Table详解(转)

    理解Hash 哈希表(hash table)是从一个集合A到另一个集合B的映射(mapping). 映射是一种对应关系,而且集合A的某个元素只能对应集合B中的一个元素.但反过来,集合B中的一个元素可能 ...

  8. Linux环境变量PS1配置

    1. 说明: 在Shell下,我们能够拥有更加色慘斑斓的提示行信息.这能够通过改变bash的$PS1环境变量还设置,如以下就是提示行的一种: user@host$ root用户的提示是这种: user ...

  9. Laravel 5.4的本地化

    简介 Laravel 的本地化功能提供方便的方法来获取多语言的字符串,让你的网站可以简单的支持多语言. 语言包存放在 resources/lang 目录下的文件里.在此目录中应该有应用对应支持的语言并 ...

  10. ReentrentLock重入锁

    ReentrentLock lock=new ReentrentLock(); lock.lock(); //锁的代码 finally{ lock.unlock(); } ReentrentLock ...