随着鸡西网站设计的功能逐渐丰富，网页中的js也变得越来越复杂和臃肿。原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，做网站时需要团队协作、模块复用、单元测试等等一系列复杂的需求。RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有10几K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。
鸡西网站开发时找了一下网络上现有的Require教程，发现很多教程讲的都不够完善，现整理开发网站中能用到的实用RequireJS教程如下。讲解思路直接按照鸡西网站制作的Require文件进行分析。

首先下载Require主文件，将以下代码复制到Require文件的最下方。

require.config({
    baseUrl: APP.STATIC + '/static/js',
    urlArgs: 'ver=' + APP.VERSION,
    paths: {
        'jquery' : 'libs/jquery.min',
        'fastclick' : 'libs/fastclick.min',
        'baguetteBox' : 'libs/jquery.baguetteBox.min',
        'iziModal' : 'libs/iziModal.min',

        'main' : 'main.min',
        'sign' : 'ajax-sign-script.min',
        'user' : 'user.min'
    }
})
require(['main']);

以上代码中APP.STATIC和APP.VERSION分别调用了RequireJS文件的路径和版本号的JS变量，可充分用CDN静态缓存进行存储调用。以下代码可放在html中，RequireJS文件调用的script之前，用于调用。

<script type='text/javascript'>
/* <![CDATA[ */
    var APP = {"STATIC":"URL",//URL可以替换成你的CDN存储路径
    "VERSION":"V1.0"};//V1.0可随时修改用于更新CDN上的文件
/* ]]> */
</script>

path中的数组是所有.js文件的列表，相当于给你网站所有js文件做了一个列表。鸡西做网站是将所有的js插件库，包括jquery、fastclick等都放在了js/libs子文件夹内。自己编写的main、sign等文件都放在了js文件夹内。libs里专门存放各种js库，用以区分管理。

用RequireJS最大的好处就是可以按需调用，而不是把所有用的到和用不到的js都调用在页面上。例如path中有个owl文件，这是一个幻灯片插件。可以做一个判断，当前页面如果存在幻灯片的id或者class，才调用owl文件。判断与调用代码如下：

//滚动首页广告
if($('.banner').length){
    require(['owl'], function(){
        var ad1Owl = $('.gg1 .owl-carousel');
        ad1Owl.owlCarousel({
            items: 1,
            loop: true,
            smartSpeed: 500,
            autoplay: true,
            dots:false
        });
    })
}

以上的if判断，就是判断页面中是否存在banner这个标签，如果存在，则用require调用owl文件。require函数可以放两个参数，第一个是需要调用的js文件名，第二个是调用完这个js后需要执行的函数。
通过这篇文章的例子，相信你也可以用RequireJS为网站的js文件优化归类了。