模块化是前端发展的趋势,但是却碰到了这样的问题
//我在页面的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定义的模块互相依赖的方法却不是很明白到底是怎么回事
本人小白,希望有大神可以解答。
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
你既然知道require的返回值这个概念,那应该理解的差不多了。你的require的config文件少了 依赖关系的声明。
你可以先加上这个试试。
引用require的时候 要加上配置文件路径 然后在配置文件中用shim声明
模块化加载,不管是哪个规范,你也可以简单地把他看做把引用的的js文件在一个自调函数中运行一遍。这样的话会发生什么呢?
首先,你有办法接收到这个js文件返回的值或对象,至于反不反回,都是不一定的,然后这个js文件会有自己的作用域。
你的疑问是是不是一定要返回值,答案是否定的。但要怎样在作用域外用呢?我既然运行了一遍,自然可以把对象,方法赋值到全局变量上。比如jquery插件,把方法放全局jquery对象里面,或者像你的代码直接CalculateNumber = function(){};当然这样会污染全局变量,一般是放在一个公共的全局对象里面作为方法。
所以结论是
你可以把你引用的模块看成这种形式,既可以return对象供obj变量使用,也可以直接赋值。
你要学seajs最好就是从官网上下载一个demo然后,自己改改,很快你就能学会了。 加油~