码迷,mamicode.com
首页 > Web开发 > 详细

require.js结合jQuery的多页面多模块使用小结

时间:2015-04-30 13:55:03      阅读:2490      评论:0      收藏:0      [点我收藏+]

标签:

小结:使用require.js的好处在于一个页面一个js文件,非常条理,且能够按需加载

使用说明:

1. 目录结构

技术分享

2. 在html页面的最后加载require.js。这样就可以少加载一个domready(require.js的一个等待dom加载完成的插件)

<script src="js/lib/require.js" data-main="js/index"></script>

其中data-main内容就是当前页面按需加载,js触发等等的设置,实际的加载文件是./js/index.js

3. 看一下index.js

requirejs.config({
    baseUrl:‘./js/lib‘,
    paths:{
        app:‘../app‘
    },
    shim:{
        ‘fullpage‘:[‘jquery‘],
        ‘vticker‘:[‘jquery‘]
    }
});

define([‘jquery‘, ‘fullpage‘, ‘vticker‘], function($){
    require([‘app/nav‘, ‘app/navline‘, ‘app/banner‘]);
    $(‘#news .container‘).vTicker({showItems:1, pause:3000});
});

其中requirejs.config为初始化设置,shim是设置非标准amd的jquery插件的加载方式

define内的内容即为当前页的实际js效果

所谓多模块即为define内require内的部分

require.js结合jQuery的多页面多模块使用小结

标签:

原文地址:http://www.cnblogs.com/smismile/p/4468492.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!