ProjectOne（04） - 番外篇02 requirejs初体验

来源：互联网发布：广告优化师编辑：程序博客网时间：2024/06/05 23:50

前几天有个猎头找到俺，说起看到我在智联上的简历。

说有个公司想让我去面试一下。就顺便转发了一下招聘要求。

看了一眼。

猴赛雷！！！是招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 onclick="click_all()">全部加载</button><button onclick="click_jquery()">加载jQuery</button><button onclick="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是声明requirejs包的入口函数是js文件夹下的main.js文件。（这个写法有点像java ？

然后，我们就需要在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:'$'            }        }

这样,“加载Zepto”按钮也有效果了。

刷新页面，打开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!');        });    }

再次刷新页面。点击click_all的按钮可以看到两个包都被同时加载了。

至此，

我们的引入require.js包，设置main.js文件，

配置require.config里面的属性，配置paths，非标准包shim，

require()引用并调用。

这几个步骤都做完了。

这也是一个比较基本的，基础的requirejs的用法了吧！！！？？？对吧。。。

说不定还有人要我说说用它的好处。

好处就是一开始不用加载很多包，

能迅速展示页面，

并且通过shim能模块化很多包及功能，适合更庞大的系统开发和组合。

就酱紫！

0 0