在 $.mobile 中覆盖 JQuery Mobile 方法的正确方法答案

【问题标题】：Proper way to override a JQuery Mobile method in $.mobile在 $.mobile 中覆盖 JQuery Mobile 方法的正确方法
【发布时间】：2012-10-16 02:02:49
【问题描述】：

当软键盘启动时，我正在开发的 JQuery Mobile 应用程序往往会崩溃。我已经实现了一个解决方案并且效果很好，但是我必须直接编辑 jquery.mobile-1.2.0.js 才能做到这一点。我更愿意将我的更改保存在扩展 jQuery Mobile 的 jquery.mobile.customizations.js 文件中。

我尝试执行以下操作但没有成功：

delete $.mobile.getScreenHeight;
$.mobile.last_width = null;
$.mobile.last_height = null;
$.mobile.getScreenHeight = function() 
{
   // My modified version
}

我在我的$.mobile.getScreenHeight 中添加了警报语句，加上原来的$.mobile.getScreenHeight。我确实看到我的自定义方法的警报被触发了，但有时它也会在原始函数中触发警报。

有人知道在 $.mobile 中覆盖方法并添加两个新属性的正确方法吗？

（有关原始问题的完整详细信息在window.resize due to virtual keyboard causes issues with jquery mobile）

更新：

@elclanrs - 我尝试实现下面的代码，但没有成功。我也试过交换第二个和第三个参数。每当我运行代码时，它都会触发我的扩展 getScreenHeight，但随后会触发基础 getScreenHeight。（我挖空了原来的 getScreenHeight 并在里面放了一个警报。这个警报永远不会触发。

开放思考！

$.mobile = $.extend( {}, $.mobile, {
    last_width: null,
    last_height: null,
    getScreenHeight: function() {
        // My code...
    }
} );

【问题讨论】：

我无法通过查看源代码找到last_width 和last_height，但是像这样覆盖getScreenHeight 应该可以工作...
是的，抱歉 - 澄清一下，我添加了 last_width 和 last_height 属性，并且我想覆盖 getScreenHeight()。我试过的方法，如上所示，但没有按预期工作。它触发了我的自定义函数和原始函数。
你不需要删除它，你可以覆盖它。尝试使用$.extend 覆盖，例如$.extend( { getScreenHeight: function() {...} }, $.mobile )
嗯.. 我试过了，但没有运气。请参阅上面的修改。

标签： jquery jquery-mobile extending

【解决方案1】：

违规行似乎是getScreenHeight = $.mobile.getScreenHeight;，它将当前定义放在resetActivePageHeight 函数的闭包中。我不确定是否可以在不编辑文件的情况下直接覆盖它，但您可以在下游将其关闭：

  //simply set the active page's minimum height to screen height, depending on orientation
  function resetActivePageHeight() {
    var aPage = $( "." + $.mobile.activePageClass ),
      aPagePadT = parseFloat( aPage.css( "padding-top" ) ),
      aPagePadB = parseFloat( aPage.css( "padding-bottom" ) ),
      aPageBorderT = parseFloat( aPage.css( "border-top-width" ) ),
      aPageBorderB = parseFloat( aPage.css( "border-bottom-width" ) );

    aPage.css( "min-height", getScreenHeight() - aPagePadT - aPagePadB - aPageBorderT - aPageBorderB );
  }


  //set page min-heights to be device specific
  $( document ).bind( "pageshow", resetActivePageHeight );
  $( window ).bind( "throttledresize", resetActivePageHeight );

定义您自己的resetActivePageHeight，然后再定义unbinding 和binding 可能会成功。有点乱。

【讨论】：