原生JS實現jquery的鏈式編程。


這是我根據之前遇到的一個面試題,題目:用原生JS實現$("#ct").on("click",fn).attr("id")。

然后看了篇jquery源碼分析(http://www.cnblogs.com/aaronjs/p/3279314.html),自己寫出來的一個實現,選擇器用的querySelector,關於鏈式編程也只是返回this而已,這也算是自己看jquery源碼解決的第一個問題吧,繼續加油。

現在想來當年面試官確實沒說錯,我jquery基礎確實差,慢慢學吧,要學的還在很多。

先上代碼吧。

 var jq = function(selector){
           return new jq.prototype.init(selector);
       };
        jq.prototype = {
            init:function(selector){
                this.el = document.querySelector(selector);
                return this;
            },
            on:function(event,fn){
                if(window.addEventListener){
                    this.el.addEventListener(event,fn,false);
                }else if(window.attachEvent){
                    this.el.attachEvent(on+event,fn);
                }
                return this;
            },
            attr:function(event,val){
                if(!val){
                    return this.el.getAttribute(event);
                }else{
                    this.el.setAttribute(event,val);
                    return this;
                }
            }
        }
        jq.prototype.init.prototype = jq.prototype;

        console.log(jq("#ct").on("click",function(){alert("您點擊了我。")}).attr("title","我的圖片"));


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM