javascript - 关于require模块化加载的问题,大神们求助呀
怪我咯
怪我咯 2017-04-11 11:09:36
[JavaScript讨论组]

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


//我在页面的head部分引入了require
//另外还分别有四个JS文件




//依赖关系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)
//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>p').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定义的模块互相依赖的方法却不是很明白到底是怎么回事
本人小白,希望有大神可以解答。

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(4)
伊谢尔伦

你既然知道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'
            }
        }
});

你可以先加上这个试试。

伊谢尔伦

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

PHP中文网

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

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

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

巴扎黑

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号