js如何扩展方法

Question

假设有如下js代码，用于修改html元素一些方法var $=function(o){
    var _o=document.getElementById(o);
    return {
        setAttr：function(a,b){
            _o[a]=b
        },
        setCss:function(a,b){
            _o.style[a]=b;
        }
    };
};这样通过$("div1").css("..","..")可以修改元素的css，
但如果我想在$中扩展一个新的方法html()，目的是修改元素的innerHTML属性，
如：$("div1").html("123");
在不改动原来的$函数的情况下如何通过prototype、extend或其他方式扩展？

Answer 1

假如要按照你现在的逻辑，$('xx').app('xxx')，那么函数私有变量_o是无法在扩展函数中共享的。因为实际上最后调用的方法 setCss html setAttr等都是执行$('xx')函数后才调用的，即这些方法的调用对象基于$函数的参数。

Answer 2

这个我知道，里面的_o变量不一定要私有，也可以储存到返回值里：如：var $=function(o){
    _o=document.getElementById(o);
    return {
        self:_o;
        setAttr：function(a,b){
            _o[a]=b
        },
        setCss:function(a,b){
            _o.style[a]=b;
        }
    };
};$函数的设计可以改变，但一旦定下来后，$函数便不能修改，而且在$函数不能预知扩充的方法的情况下怎么扩展其中的方法；

Answer 3

var el = function(dom){
    this.dom = dom;
};
el.prototype = {
    destroy: function(){this.dom = null},
    setAttr: function(a, b){this.dom[a] = b},
    setCss:  function(a, b){this.dom.style[a] = b}
};
var $ = function(o){
    return new el(document.getElementById(o));
};
$('xxx').setAttr('x', 'y');要扩展的话只要扩展el类就OK。比如
el.prototype.html = function(x){this.dom.innerHTML = x}这些只提供一个参考，它的缺点：
1.每次$都会生成一个el对象，可能会消耗内存。
2.el的每个方法中没对dom检查，可能会抛出异常。你可以自行设计。

Answer 4

模仿jquery方式：
var $=function(o){
    _o=document.getElementById(o);
    var fn = {};
    for(var i in $.fn) {
        fn[i]= function(){
           $.fn[i].call(_o);//更改调用者为html标签
        } 
    }
    return fn;
};
$.fn = {
    setAttr:function(a,b){
       this[a]=b
    },
    setCss:function(a,b){
       this.style[a]=b;
    }
}$.fn.html = function(a){//扩展html方法
    this.innerHTML = a;
}

Answer 5

看你的样子就是想实现jquery的效果吧，但明显你的基础不够，请先去好好学习下js的面向对象知识，现在做这种对你来说不合适，一步一步来，不要好高骛远；等你js基础到了，jquery里面的功能甚至这种扩展方式都能一想就透

Answer 6

不好意思写错了一些东西，粗心的，改下这儿：var $=function(o){
    var _o = document.getElementById(o);
    var fn = {};
    for(var i in $.fn) {
(function(i){
            fn[i]= function(){
   var argArr = [],parArr = "";;
   for(var j=0;j<arguments.length;j++) {
       argArr.push(arguments[j]);
   parArr += "argArr["+j+"]";
   if(j!=arguments.length-1) parArr+=",";
   }
               eval("$.fn[i].call(_o,"+parArr+");")//更改调用者为html标签
            };
})(i);
    }
    return fn;
};

Answer 7

$.fn.extend({
customHtml:function(){},
customText:function(){}
......
});

Answer 8

(function($){
$.fn.extend({
customHtml:function(){},
customText:function(){}
......
}); 
})(jQuery)
//页面追加：
$.extend($.fn,{test:function(p){alert(p);}});
$('body').test('test!');

Answer 9

看不下去了，楼上几位，提醒一下，这儿没有jquery，$方法是自己定义的，不要拿着jquery的方法来用，这儿需要自己实现扩展方式