选择器

来源:互联网 发布:现货黄金教学软件 编辑:程序博客网 时间:2024/04/25 21:06

最开始我需要模仿一个类似jQuery的例子,这里先是一个简单的例子,模仿的是百度的七巧板。

(function(win){    var UNSleet = function(selector){    return new UNSleet.init(selector);};UNSleet.$virtue = function(selector){    //真正实现的函数this[0] = document.getElementById(selector);};//就是相当于返回的函数的原型指向到UNSleet.virtue//生成的函数对象拥有UNSleet.virtue的方法UNSleet.virtue = UNSleet.$virtue.prototype;//返回函数的实现的方式UNSleet.init = function(selector){    var me = new UNSleet.$virtue(selector);return me;};win.UNSleet = UNSleet;})(window);    var aa = UNSleet("a");aa[0].innerHTML = "fsfs";

这里最重要的就是UNSleet.virtue = UNSleet.$virtue.prototype; 让生成的对象原型指向UNSleet.virtue。

然后用函数来实现的上述内容

(function(win){    var UNSleet = function(selector){    return new UNSleet.virtue(selector);};UNSleet.Class = function(chainName,fn,constructor){    var chain = UNSleet[chainName],className = "$"+chainName;//简化一个函数,上面例子中的UNSleet.virtue在这里用传值//fn来代替它 chain = UNSleet[chainName] = fn;chain.extend = function(extended){    for(var u in extended){    UNSleet[chainName].fn[u] = extended[u];}}//真正实现函数的构造函数UNSleet[className] = constructor || function(){};//原型链chain.fn = UNSleet[chainName].fn = UNSleet[className].prototype;//return chain;};UNSleet.Class("virtue",function(selector){    var me = new UNSleet.$virtue(selector);return me;}, function(selector){this[0] = document.getElementById(selector);}).extend({a:1});win.UNSleet = UNSleet;})(window);var aa = UNSleet("a");aa[0].innerHTML = "fsfs";alert(aa.a);

用函数来代替上面的例子,更加具有扩展性。

然后就是简易模仿的jQuery的例子

function jj(selector){    return new jj.fn.bb(selector);}jj.fn = jj.prototype ={    bb:function(selector){this[0] = document.getElementById(selector);    return this;},a:"sfsfs"};jj.fn.bb.prototype = jj.fn;var j = new jj("a");j[0].innerHTML = "aaa";console.log(j.a);

jj.fn.bb.prototype = jj.fn;这句话,使j这个对象的原型链指向了jj的原型对象。如果没有这句话,this则指向的是j对象,然后j对象没有添加的原型对象。


原创粉丝点击