关于require模块化加载的问题，大神们求助呀

Question

模块化是前端发展的趋势，但是却碰到了这样的问题

<script type="text/javascript" src="js/require.js"></script>
//我在页面的head部分引入了require
//另外还分别有四个JS文件
<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/unslider.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/index.js"></script>
//依赖关系jq在最顶级，依次为unslider.js，common.js，index.js

unslider是JQ的一个轮播插件,common是一些公用的方法，index是首页用的一些JS

//common.js文件方法如下
/*===回到顶部 start===*/
    $('#footer span').click(function(){
        $('body').animate({
            scrollTop:0
        },500)
    });

 /*===回到顶部 end===*/

 /*====下一张，上一张计数==*/
    //window.calculateNumber={};

    function CalculateNumber(btn,bumberbox,target){
        //参数btn参数是按钮 上一张或者下一张的按钮
        //参数bumberbox是需要修改的数字标签
        //参数target是总共有几张图片
        this.btn=btn;
        this.bumberbox=bumberbox;
        this.target=target;
    };
    CalculateNumber.prototype={
        Calculate:function(){
            var noteNum=this.bumberbox.text();
            if(this.btn.hasClass('next'))
            {
                if(parseInt(noteNum)<this.target)
                {
                    this.bumberbox.text(function(){
                        return parseInt(noteNum)+1
                    });
                }
                else{
                    this.bumberbox.text(1);
                }
            }
            else
            {
                if(parseInt(noteNum)<=1)
                {
                    this.bumberbox.text(this.target);
                }
                else{
                    this.bumberbox.text(function(){
                        return parseInt(noteNum)-1
                    });
                    
                }
            }
        }
    };
 /*===下一张，上一张计数===*/

//index.js如下
(function(){
    //绑定了如下方法(还有些类似的，我就不往上贴代码了)
    $('#product .product-content li').hover(function(){
       $(this).find('.orange').addClass('hide').siblings().removeClass('hide');
    },function(){
        $(this).find('.black-warp').addClass('hide').siblings().removeClass('hide');
    });

    $('#joinus .jionus-content>div').hover(function(){
       $(this).addClass('cur');
    },function(){
        $(this).removeClass('cur');
    });
})(jQuery);

那么在用require做模块化加载的时候应该怎么做？我又在页面上写了如下代码

require.config({
            baseUrl:"./js",
            paths:{
                "jquery":"jquery-1.12.1.min",
                "unslider":"unslider",
                "common":"common"
            }
        });
        require(['jquery','unslider','common'],function(){
            alert("加载完成")
        })
        //会弹出对话框 但是页面的效果却完全不会出来

requirejs(['jquery', 'canvas', 'app/sub'],
function   ($,        canvas,   sub) {
    //jQuery, canvas and the app/sub module are all
    //loaded and can be used here now.
});
//这是require官方上的一段代码，文件conmmon.js 和index.js里面仅仅提供了调用，并没有返回

在这种情况下我应该怎么做？看了些有关conmmonjs的规范，以及requeire官方却不是特别明白。是不是我这样写JS是不能做模块化加载的？我必须要对外有返回值才可以？
如果不对外return 就现在这样的代码应该如何做到模块化加载,看了下require.js定义的模块互相依赖的方法却不是很明白到底是怎么回事
本人小白，希望有大神可以解答。

Answer 1

你既然知道require的返回值这个概念，那应该理解的差不多了。你的require的config文件少了 依赖关系的声明。

require.config({
        baseUrl:"./js",
        paths:{
        "jquery":"jquery-1.12.1.min",
        "unslider":"unslider",
        "common":"common"
        },
        shim:{
            "unslider": {
                deps: ["jquery"],
                exports:'unslider'
            },
            "common": {
                deps: ["jquery"],
                exports:'common'
            }
        }
});

你可以先加上这个试试。

Answer 2

引用require的时候 要加上配置文件路径 然后在配置文件中用shim声明

Answer 3

模块化加载，不管是哪个规范，你也可以简单地把他看做把引用的的js文件在一个自调函数中运行一遍。这样的话会发生什么呢？
首先，你有办法接收到这个js文件返回的值或对象，至于反不反回，都是不一定的，然后这个js文件会有自己的作用域。
你的疑问是是不是一定要返回值，答案是否定的。但要怎样在作用域外用呢？我既然运行了一遍，自然可以把对象，方法赋值到全局变量上。比如jquery插件,把方法放全局jquery对象里面，或者像你的代码直接CalculateNumber = function(){};当然这样会污染全局变量，一般是放在一个公共的全局对象里面作为方法。
所以结论是

var myGlobal = {};
var obj = (function(){
    // 你的模块代码
    myGlobal.method = function(){};
    return myObj;
})()

你可以把你引用的模块看成这种形式，既可以return对象供obj变量使用，也可以直接赋值。

Answer 4

你要学seajs最好就是从官网上下载一个demo然后，自己改改，很快你就能学会了。 加油～