如何在javascript中编写具有扩展功能的函数？

Question

我尝试实现具有以下某些功能的函数，例如MyFn() ：
1. MyFn（'Id'） >必须是document.getElementById（'Id'）;的结果。
2. MyFn（'Id'）。MyMethode（）; >必须是执行功能的结果。
在下面，这通过“ Object.prototype”实现，如下所示：

Object.prototype.MyFn =function(param1){ return document.getElementById(param1); };
alert( MyFn('mydiv1') );
MyFn('mydiv1').posi = function() { alert("Hello, I'm the function posi!"); };
MyFn('mydiv1').posi();
alert( MyFn('mydiv1') );

上面的示例正是我想要实现的。 但是我不想使用Object.prototype或jQuery 。
下面是我的错误方法（这可能是我想要说或要做的事）：

var MyObj = {
    method: function(args, callback) {
        if(typeof callback == "function") {
            callback();
        }
        return 123;
    }
}

MyFn = function(sId) { 
    return MyObj;
};

alert( MyFn("mydiv1").method() ); // This is ok, because it calls the method: MyObj.method() as it was expected.
alert( MyFn("mydiv1") ); // <-- But here I like to get document.getElementById("mydiv1").

注意：代码的语法 （调用函数的方式）很重要！ 该函数将按以下方式调用：MyFn（'Element-Id'）或MyFn（'Element-Id'）。posi（），但不如下所示：MyObj.MyMethode（）
您有什么想法吗？ 提前致谢。

Answer 1

您可以尝试类似：

var MyObj = {
    method: function(args, callback) {
        if(typeof callback == "function") {
            callback();
        }
        return 123;
    }
}

var MyFn = function(sId) { 
    this.elem = document.getElementById(sId);
    this.MyObj = MyObj;
    return this;
};

alert( MyFn("mydiv1").MyObj.method() ); 
alert( MyFn("mydiv1").elem ); 

函数执行后，这将返回对函数的引用，因此提供的语法非常类似于C＃扩展方法。

Answer 2

应当直截了当，因为函数也是对象。
通常的完成方式和jQuery的完成方式都是返回该函数的新实例，只需执行简单的检查即可

function MyFn(selector, context) {

    if ( !(this instanceof MyFn) ) { // not an instance

        return new MyFn(arguments);  // calls itself with the "new" keyword

    } else { // now it is an instance

        context = context || document;
        this[0] = context.getElementById(id);
    }

    return this;
}

现在，在此基础上，我们可以添加方法，但是这需要对它们进行原型设计，这是正确的方法

MyFn.prototype.width = function() {
    return this[0].style.width;
}

甚至使这些方法可链接

MyFn.prototype.width = function(width) {

    if ( width ) {
        this[0].style.width = width + 'px';
        return this;
    } else {
        return this[0].style.width;
    }

}

小提琴

Answer 3

丑陋，几乎所有设计模式都不推荐，但应该可以：

MyFn = function(sId) {
    var obj = document.getElementById(param1);

    obj.method = function(args, callback) {
        if(typeof callback == "function") {
            callback();
        }
        return 123;
    }
    return MyObj;
};

基本上，您可以手动将功能添加到对象。

这不是一个很好的设计模式，因为外部人员可能事先不知道该对象还有其他方法。

Answer 4

这是一个有点棘手的解决方案：

var MyObj = function (id) {
    var obj = document.getElementById(id);
    // attach functions here
    obj.myFun = function () {
        // ...
    }
    // ...
    return obj;
}

获得对象，将自己的函数附加到该对象（希望不重新定义现有函数），然后返回它。