require的总结：

---

1.require用来将js文件模块化，可以避免一个html文件引入过多的js文件。因为大量的加载js文件会使网页响应时间过长，并且在页面引入js文件时还要严格注意先后顺序。

而require.js的出现可以做到在网页中只加载一个js文件，将其他的js文件作为模块引入就可以使用了。

---

2.js的模块化规范有两种：commonJS、AMD

commonJS适用于服务器端，是同步加载，服务器端所使用到的模块都是放在服务器硬盘上所以加载速度是很快的。

大概结构：

var module1 = require(‘module1’)

module1.fnName()

AMD是适用于浏览器端的规范，因为浏览器加载所需要的js文件都在服务器上，所以同步加载模块就会让浏览器进入假死状态，而AMD是异步加载规范。

require([module],callback)

即

require([‘module1’],function(module1){

module1.fnName()

})

---

3.require.js就是适用于浏览器端的AMD规范的js库

使用步骤：

a.首先定义js文件入口:

在html页面引入标签：

src=”../js/require.js” data-main=”../js/index”>

data-main定义了文件入口，require.js默认文件后缀名为.js所以只需要写index就可以

b.写index.js：

写index.js时需要配置依赖信息、加载依赖等步骤

建议先从加载依赖开始写，在写的过程中需要用到哪个模块的时候再回头添加，这样能够做到心中有数，这些是建立在模块是现成的基础上，当然如果没有模块一定是要准备好模块。

---

4.需要注意的点：

虽然很早之前就接触到一丁点require.js，但是有很多地方都是处于模糊不清，今天在公司决定把写过的一个使用require.js项目重构一下,过程中看了阮一峰的文章之后茅塞顿开。

在重构时遇到的几个问题：

a.require究竟会不会加载不符合AMD规范的js文件：

答案是会的。

在查资料时看到一篇博客讲如何在requirejs中使用非AMD规范的js文件时提到，即使js文件不符合AMD规范，只要被添加依赖，就会被加载到html页面中去，只是模块不能在主文件中使用而已，于是窃喜，并在自己代码中实验，代码中使用了一个jquery插件，并不符合AMD规范，于是在html中写了相应代码，js文件是被加载了，但是提示$ is undefined，当即以为是博客说的不对，遂放弃，不能继续纠缠否则容易陷入死胡同。

转而解决另一个问题：

将另外一段不符合AMD规范的js文件内的代码直接放入index.js中去。该文件是对window方法requestAnimationFrame做了一个对各个浏览器的兼容，由于代码是在张鑫旭大哥那里复制的所以并不知道该怎么去改成AMD规范。索性直接拿到index里面去吧。

然后稍稍研究了一下，认为这个其实是对window.requestAnimationFrame和window.cancelAnimationFrame这两个方法接受不了或者接受情况不一样的浏览器进行了不同情况的处理。并不太属于模块，所以斗胆认为不用AMD规范改写，于是删掉index里面相关代码发现，居然能用！！证明上面那篇博客讲的是对的！

b.于是反过头去思考为什么jquery插件不能用，得到的答案是：

jquery源码中有这样一段

if(typeofdefine==="function"&&define.amd&&define.amd.jQuery) {

define("jquery", [],function() {returnjQuery; } );

}

意思就是如果检测到需要使用AMD规范的话，就使用AMD规范，换言之，在html页面中我们得不到全局的jquery对象，浏览器报错。

c.那么如何使用不是AMD规范的jquery插件呢？

答案是：将它变成符合AMD规范

在百度上找到书写规范：

一般的jQuery插件格式：代码如下:

(function ($) {

$.fn.myPlugin = function () {

//

你自己的插件代码

};

})(jQuery);

不过稍微修改一下就可以使用Require.js加载一个jQuery插件：代码如下:

;(function (factory) {

if (typeof define === "function" && define.amd) {

// AMD

模式

define([ "jquery" ], factory);

} else {

//

全局模式

factory(jQuery);

}

}(function ($) {

$.fn.jqueryPlugin = function () {

//

插件代码

};

}));

终于在修改之后，jquery插件也可以投入使用啦！

美滋滋

那么下一个问题来了

d.听说require还可以加载css文件！

试试咯

require.config({

map:{

'*':{

'css':'css'

}

},

paths:{

"jquery":"jquery.min",

"requestAnimationFrame":"requestAnimationFrame",

"unslider":"unslider.min",

"rem":"rem",

"common":"common"

},

shim:{

fontAwesome:{

deps:['css!http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css']

},

common:{

deps:['css!../css/common.css']

},

index:{

deps:['css!../css/index.css']

}

}

})

这是require的配置代码

在map中引入了require插件css.js

map的作用是无论在什么情况下都优先加载其中的文件

shim则是告诉浏览器在加载文件之前需要引入的依赖

我们在这里通过shim引入了css文件，经测试，本地css文件成功引入，而远程css样式表并未引用成功，在这里也求教大家，如果知道请留言告知，先谢谢您！！

一条注意：

通过require引入了css之后发现页面加载的时候会闪过一下没有样式的页面，这样用户体验其实并不好，在以后的学习中需要解决此问题。

e.万恶的ie8-------------如果想根据浏览器版本不同引用不同版本jquery怎么破

其实并不是非要叫人家万恶的ie8，可四实在是实至名归啊

本次项目中使用的是jquery1.9.1,并没有针对ie8使用更低版本的jquery

但是以后难免会使用到

原本打算是用自己的笨方法，一查资料，原来可以这样玩

varpathToJQuery

if('querySelector'indocument

&& 'localStorage'inwindow

&& 'addEventListener'inwindow) {

pathToJQuery= 'jquery/jquery-2.1.1.min'

}else{

pathToJQuery= 'jquery/jquery-1.11.1.min'

}

然后在path中这样用就可以了

paths: {

jquery: pathToJQuery

}

最后的思考：

其实今天重构的项目很小，js代码量也很少，在整理完之后，发现其实代码量是增加的。require显得大材小用。

所以在一些小的项目中是不是用一些朴素的方法就足矣。

技术虽好用，也要合适才行。

以上就是今天的收获。谨在此记录。希望每天进步一点点~