Question

当我尝试自定义我们在Web应用程序中使用的第三方插件之一时，我遇到了这个问题。我们倾向于不更新核心插件文件，以确保我们在升级第三方插件时不会遇到问题。避免这种情况的最佳方法是使用新的方法集扩展现有功能，或者覆盖主插件文件之外的现有插件方法。

我尝试应用此方法的插件之一是以一种不寻常的方式编写的，它定义了主插件函数外部对象中的所有方法。

所以我的问题是我们如何在不更新插件代码的情况下扩展或更有可能重载valEngine插件的方法之一（validateFields，showErrorMsg）。

这是一个带有粗略原型的JS小提琴。 http://jsfiddle.net/g9Ng9/

// Can't update any of this.
(function($) {

  "use strict";

  var methods = {
    validateFields: function() {
        console.log('I perform validation of fields!');
    },
    showErrorMsg: function() {
        console.log('I log error messages');
    }
  };

  $.fn.valEngine = function() {
    console.log('I access methods within method object!');
    methods.validateFields();
    methods.showErrorMsg();
  };
})(jQuery);
// Can't update any of this.


// Your code goes here

提前致谢。

Answer 1

没有直接的方法来完成这项工作，因为将这些方法保留在插件定义之外的全部目的是让它们保持私密。

因此，为了重载像'validateFields'这样的方法对象方法，我们需要以某种形式修改核心插件文件。

类似于亚伯拉罕·乌里韦在他的JS小提琴中提到的东西：http://jsfiddle.net/g9Ng9/1/

//无法更新任何此类内容。（函数（$）{

"use strict";

var methods = {
    validateFields: function() {
        console.log('I perform validation of fields!');
    },
    showErrorMsg: function() {
        console.log('I log error messages');
    }
};

$.fn.valEngine = function() {
    console.log('I access methods within method object!');
    methods.validateFields();
    methods.showErrorMsg();
};

$.fn.valEngine.methods=methods;
});
$().valEngine();
$.fn.valEngine.methods.validateFields=function(){
  console.log("validateFields");
};

$().valEngine();

Answer 2

您可以使用extend()方法扩展或重载jQuery方法。

一个简单的例子是

jQuery.fn.extend({
validateFields: function() {

 // your custom code here   
}    
});

我不确定，但你的案例中的命名空间是jQuery.fn.ValEngine。

jQuery插件中的方法重载

2 个答案: