前几天有个猎头找到俺，说起看到我在智联上的简历。
说有个公司想让我去面试一下。就顺便转发了一下招聘要求。
看了一眼。
猴赛雷！！！是招Web前端，最好还有hybrid app开发经验。
我看了一圈，除了懂了一点加分项nodejs之外。貌似别的都不太及格的样子。
好吧，既然咱不懂，咱就来学呗。多大点事。
其中有一个名词叫requirejs，
百度了一下，貌似就是个模块适时加载器的作用。
ok，那么，今天就在ProjectOne上写一个requirejs的测试项目呗。
首先，我们现在ProjectOne下面新建一个项目咯。
在ProjectOne的根目录下的web目录里面，新建一个Test文件夹，然后Test文件夹下面新建一个001文件夹，
再然后在这个文件夹下面新建一个index.html和一个js文件夹。
接着，当然还是去requirejs的官网下一个包啦。地址是这个：http://requirejs.org/docs/download.html
当前requirejs的版本是2.1.22，我们选择右边的minified，右键目标另存为，进行保存。
将它存到ProjectOne/Test/001/js文件夹下面。
然后，因为是要测试动态加载，那么加载的js我们自然也要选一个咯。
好吧，那就加载jQuery和zepto，这两个比较常用的包吧！
去jQuery官网和zepto(官?)网...(http://www.css88.com/doc/zeptojs_api/)，分别下了两个包：jquery-1.12.1.min.js 和 zepto.min.js （1.1.6版）
下2个包是因为听说在requirejs里面不能用zepto。
虽然《bootstrap中文网》不推荐我们用Zepto，（原文：http://www.bootcss.com/article/why-we-dropped-zepto/）
但是Zepto还是很多人在用的。所以暂时还是考虑尝试支持一下。
分别将2个包夜同样拷贝到js文件夹下面。
下面开始写代码。
测试思路很简单，
写3个按钮，1个同时加载2个包，2个分别对应加载对应的包。
写2个输入框，通过点击按钮改变框内的内容。
都是用jQuery和zepto的语法来进行操作。
然后观察chrome的F12(开发者工具/Firebug)，查看network一项，看模块是不是正确在点击按钮后，加载对应的模块。
下面是实例代码。
首先，我们的index页面需要上面说的3个按钮2个输入框，并且要3个简单的点击事件。
代码大概是这样的。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
输入框1：<input type="text" id="input1" />
<br />
输入框2：<input type="text" id="input2" />
<br />
<button οnclick="click_all()">全部加载</button>
<button οnclick="click_jquery()">加载jQuery</button>
<button οnclick="click_zepto()">加载Zepto</button>
</body>
<script>
function click_all(){
}
function click_jquery(){
}
function click_zepto(){
}
</script>
</html>然后，在head中引入requirejs包，
这里要注意一点就是，引入requirejs包需要在后面添加一个data-main属性。
<script src="js/require.js" data-main="js/main"></script>然后，我们就需要在js文件夹下面创建一个main.js文件咯。
这个js文件前提是需要包含一个自执行函数，我们就习惯性的匿名咯。
主要作用就是配置一个require.config函数对象的样子。看如下代码：
(function(){
require.config({
baseUrl: 'js/',
defaultExt: '.js',
paths:{
jquery:'jquery-1.12.1.min',
zepto:'zepto.min'
}
});
})();
这里的baseUrl是为了将路径引导到js文件夹下面，如果不用的话，那么下面的path就要写成zepto:'js/zepto.min'这样的了。
defaultExt是为了配置引用的文件的默认后缀名，所以下面的paths里面指定的文件“不需要加.js”。（貌似也不允许加
这样配置就完成了。（paths里面的jquery属性名请全小写，别问我为什么...
然后，我们就在index.html的script部分，click_jquery和click_zepto函数里加几句代码试一下效果吧。
requirejs的语法是这样的 require([path中定义的模块名，多个用逗号分隔],function(如果有的话，传入模块的对象，如$，必须按顺序){//todo}); 这样。
那么示范代码就写成这样。
function click_jquery(){
require(['jquery'],function(jQuery){
jQuery('#input2').val('click_jquery jquery!');
});
}
function click_zepto(){
require(['zepto'],function($){
$('#input1').val('click_zepto zepto!');
});
}这个时候，我们去点击“加载jQuery”按钮，输入框2是能正确显示的，
但是！！！点击“加载Zepto”却不行。
这是因为zepto的代码不符合AMD规范，
这时，从百度可以得知有几种解决办法。
第一种是改zepto的代码，但是我个人觉得麻烦，就用第二种，
requirejs的conifg里面加一个shim属性，这个属性是为了支持那些不规范的代码用的。
我们加入以下代码：
paths:{.....}
,
shim:{
zepto:{
exports:'$'
}
}
刷新页面，打开F12观察Network。可以看到，分别点击2个按钮之后，是分别加载2个包文件的。
接下来，我们补充完click_all的代码：
function click_all(){
require(['zepto','jquery'],function($,jQuery){
$('#input1').val('click_all zepto !');
jQuery('#input2').val('click_all jQuery!');
});
}
至此，
我们的引入require.js包，设置main.js文件，
配置require.config里面的属性，配置paths，非标准包shim，
require()引用并调用。
这几个步骤都做完了。
这也是一个比较基本的，基础的requirejs的用法了吧！！！？？？对吧。。。
说不定还有人要我说说用它的好处。
好处就是一开始不用加载很多包，
能迅速展示页面，
并且通过shim能模块化很多包及功能，适合更庞大的系统开发和组合。
就酱紫！
1756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
