首页 > 技术文章 > 框架: require.js

qq21270 2016-06-24 13:44 原文

 

require.js

http://www.bootcdn.cn/require.js/

 

 

HTML:

<div class="container" data-page="indexpage">
.......
</div>
<script data-main="js/askMain.js?v=61" src="js/plugin/require.js"></script>

askMain.js

require.config({
    paths: {
        //Zepto: 'plugin/zepto.min',
        //swiper:'plugin/swiper.min'
        Zepto: 'http://s1.xxx.com/common_h5/js/plugin/zepto.min',
        swiper:'http://s1.xxx.com/common_h5/js/plugin/swiper.min'
    },
    shim: {
        'Zepto': {
            exports: 'Zepto'
        },
        'common': {
            deps: ['Zepto'],//依赖
            exports: 'common'
        },
        'swiper': {
            deps: ['Zepto'],//依赖
            exports: 'swiper'
        }
    }
});
//require(['Zepto','common','ask'], function($,common,askDesign) {
require(['Zepto','common','swiper','ask'], function($,common,swiper,askDesign) {
    var dataPage = $('.container').attr('data-page');
    switch (dataPage) {
    case 'indexpage':/*首页*/
            askDesign.init();
            break;

        case 'questions-to'://提问
            //....
            break;
    }
});

ask.js

'use strict';
//define(['Zepto','common'], function($,common) {
define(['Zepto','common','swiper'], function($,common,swiper) {
    var askDesign = {
        init: function() {
            var mySwiper = new Swiper('.swiper-container',{
                //pagination: '.pagination',
                //loop:false,
                //paginationClickable: true,
                mousewheelControl:true,//鼠标滚轮
                //autoplay:2000,
                //mode: 'vertical',//纵向滚动(这个好像不好使了 2016-1-15)
                //direction: 'vertical',//纵向滚动(这个好用 2016-1-15)
                onInit: function(mySwiper){//Swiper初始化了
                    //console.log("提示Swiper的当前索引 "+mySwiper.activeIndex);//提示Swiper的当前索引
                },
            });
        },
        log : function(){
    

        }
    };
    return askDesign;
});

 

推荐阅读