Question

我尝试实现一个功能，例如MyFn()具有以下一些功能：
1。 MyFn（＆＃39; Id＆＃39;）＆gt;它必须是document.getElementById的值（＆＃39; Id＆＃39;）; 2。 MyFn（＆＃39;标识＆＃39）。MyMethode（）; ＆gt;它必须是执行功能的结果下面是通过＆＃34; Object.prototype＆＃34;来实现的。如下：

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（＆＃39; Element-Id＆＃39;）或MyFn（＆＃39; Element-Id＆＃39;）。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;
    }

}

FIDDLE

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

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

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

你得到了这个对象，将你自己的函数附加到对象上（希望没有重新定义现有的函数），然后返回它。

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

4 个答案: