requirejs调用类似window.onresize自动执行函数的问题

本人在用requirejs过程中,想做一个随着浏览器窗口变化而变化的函数,用于控制div的高度。
此函数在common.js中,现在要在main.js调用common.js中的resize函数。

common.js函数如下:

define(["require","exports","module"],function (require,exports,module) { 
    exports.resize=function (){
        var winHeight=window.innerHeight?window.innerHeight:document.documentElement.clientHeight;
        var bottomHeight=parseInt(winHeight-100);
        $("#bottom").css("height",bottomHeight+"px");
    }});

main.js如下:

window.onresize=require(["jquery","common"],function ($,COMMON) {
    COMMON.resize();
});

这样只在初始的时候执行一次,不能实时监听窗口变化,请问谁遇到这种情况?指点一下,谢谢~

阅读 3.5k
2 个回答

将resize函数直接写在main.js中,就按照写普通函数的方法那样写,就实现了实时修改。

window.onresize = resize;
function resize(){...}

感觉这不是纯粹的模块化,但至少功能实现了。
如果谁有高见,欢迎讨论!

题主对requirejs理解有偏差,requirejs是异步加载的方式,require函数没有返回值(其实有,是一个我不知道的函数),所以正常是像下面这样写

require(["jquery","common"],function ($,COMMON) {
    //window.onresize = COMMON.resize;
    $(window).on('resize',COMMON.resize);
});

另外,建议如果不是必要,能用css写的样式不用js写(代码丑还性能不高)。
如果你的bottom是body的子元素,可以这样写试试

#bottom{
    hieght:calc(100% - 100px);
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题