面向過程

javascript是一門面向過程的語言，也就是側(cè)重點(diǎn)是實(shí)現(xiàn)一件事的步驟。

特點(diǎn)：有良好的可擴(kuò)展性和重用性，降低了代碼間的耦合度，接近日常思維。

面向?qū)ο?/pre>

以事物為中心，側(cè)重于完成某件事所需要的事物的特征和行為的設(shè)計(jì)。
特點(diǎn)：封裝、繼承、多態(tài)，耦合度低，復(fù)用度好。

相信這些概念性的東西，網(wǎng)上真的是一搜一大堆，在我使用我的方法理解和上手面向?qū)ο笾?，容許我把概念性的東西寫完，畢竟基礎(chǔ)特別重要啊。相信我，如果你正在閱讀，請忍耐一兩分鐘
相關(guān)名詞

prototype : 獲取構(gòu)造函數(shù)的原型對象
constructor ： 獲取原型對象的構(gòu)造函數(shù)
--proto-- : 獲取實(shí)例對象的構(gòu)造函數(shù)的原型對象
原型鏈 ： 構(gòu)造函數(shù)自身會(huì)有原型對象，通過prototype查看，構(gòu)造函數(shù)的實(shí)例對象自身也會(huì)有原型對象，通過--proto--查看，--proto--是object類型，當(dāng)訪問一個(gè)實(shí)例化的屬性時(shí)，瀏覽器會(huì)先查找自身內(nèi)部屬性，沒有就找--proto--，直到--proto--類型為null。
New關(guān)鍵字作用：創(chuàng)建一個(gè)空對象，讓空對象調(diào)用構(gòu)造函數(shù)給自己賦值，將該對象返回

繼承
實(shí)現(xiàn)B繼承A

方式一：在B的構(gòu)造函數(shù)內(nèi)部寫A.call(this);缺點(diǎn)：參數(shù)設(shè)置不靈活
方式二：(使用原型鏈實(shí)現(xiàn)繼承)step1：改變自身原型對象B.prototype=new A();step2:修復(fù)原型對象指向的構(gòu)造函數(shù)B.prototype.constructor=B

好啦，概念性的東西就寫到這，下面開始我的代碼之旅，現(xiàn)在已經(jīng)晚上11：30整，我好瞌睡啊，太困了，把這個(gè)寫完我就去睡覺了Zzzz

基礎(chǔ)設(shè)置
國際慣例，先把代碼的基礎(chǔ)設(shè)置好
            div,
            p {
                width: 100px;
                height: 30px;
                border: 1px solid #ffffd;
                margin: 30px auto;
            }
            div.open,p.open{
                background: pink;
            }


            
                

                

                

                

            
1.基礎(chǔ)版
        /*NO.1
         * 基礎(chǔ)方法
         * 缺點(diǎn)：代碼冗余，重復(fù)獲取元素重復(fù)循環(huán)操作
         * 功能：修改背景色
         */

        var divs1 = document.getElementsByTagName("div");
        var ps1 = document.getElementsByTagName("p");
        for (var i = 0; i < divs1.length; i++) {
            divs1[i].style.backgroundColor = "pink";
        }
        for (var i = 0; i < ps1.length; i++) {
            ps1[i].style.backgroundColor = "pink";
        }
2.進(jìn)階版（一）
        /*NO.2
         * 進(jìn)階方法
         * 缺點(diǎn)：太局限，只能設(shè)置樣式
         * 功能：修改背景色
         */
        function getDOM(tagName){
            return document.getElementsByTagName(tagName);
        }
        function setStyle(arr,styleName,styleVal){
            for (var i = 0; i < arr.length; i++) {
                arr[i].style[styleName] = styleVal;
            }
        }
        var divs2 = getDOM("div");
        var ps2 = getDOM("p");
        setStyle(divs2,"backgroundColor","#00a09d");
        setStyle(ps2,"backgroundColor","#00a09d");
3.進(jìn)階版（二）
        /*NO.3
         * 進(jìn)階方法
         * 缺點(diǎn)：代碼不利于閱讀，沒有結(jié)構(gòu)化
         * 功能：修改寬度，填充文字，遍歷封裝
         */
        function getDOM(tagName){
            return document.getElementsByTagName(tagName);
        }
        function each(arr,callback){
            for (var i = 0; i < arr.length; i++) {
                callback(arr[i])
            }
        }
        var divs2 = getDOM("div");
        var ps2 = getDOM("p");
        each(divs2,function(tag){    
            tag.style.width = "200px";
            tag.innerText = "I have a pen!!!";
        })
4.進(jìn)階版（三）
        /*NO.4
         * 進(jìn)階方法，傳統(tǒng)面向?qū)ο髮懛?獨(dú)立作用域)
         * 功能：添加樣式，遍歷封裝
         */
        function Tool(bgColor){
            this.bgColor = bgColor||"#00a09d";
            this.getDom = function(tagName){
                return document.getElementsByTagName(tagName);
            };
            this.each = function(arr,callback){
                for (var i = 0; i < arr.length; i++) {
                    arr[i].style.backgroundColor = this.bgColor;
                    callback(arr[i]);
                }
            };
        }
        //實(shí)例化(使用)
        var tool = new Tool();
        var ps3 = tool.getDom("p");
        var divs3 = tool.getDom("div");
        tool.each(divs3,function(tag){    
            tag.style.width = "200px";
            tag.innerText = "I have a pen!!!";
        })
5.終極版
        /*NO.5
         * 進(jìn)階方法，ES6面向?qū)ο髮懛?獨(dú)立作用域,類本身指向構(gòu)造函數(shù))
         * 功能：將傳入的對象變成紅色，填充文字，添加點(diǎn)擊效果(歪樓了，需求改成這慫樣子了)
         * 說明：實(shí)例化之后立即實(shí)現(xiàn)以上功能
         * 功能：修改背景，填充文字，綁定事件......
         */
        class Tool{
            //構(gòu)造函數(shù)(options為實(shí)例化傳入的參數(shù))
            //作用：設(shè)置默認(rèn)參數(shù)，合并默認(rèn)參數(shù)和傳入的參數(shù)，實(shí)現(xiàn)繼承
            constructor(options){
                let dafultOpations = {
                    element:"",
                    bgColor:"red",
                    color:"#fff"
                }
                
                this.options = Object.assign({},dafultOpations,options); //合并對象   assign(相同項(xiàng)會(huì)覆蓋) merge(相同項(xiàng)會(huì)合并)
                this.checkOptions().setStyle().setText().bindClick()  //實(shí)例化后立即執(zhí)行這些方法，每個(gè)方法在調(diào)用完成后一定要釋放this
            }
            //由于該類的實(shí)現(xiàn)依賴于傳入的DOM，此方法用來確保已經(jīng)傳入DOM，若實(shí)例化沒有傳入，則拋出異常
            checkOptions(){
                if(!this.options.element){
                    throw new Error("Element is required!!!")
                }
                return this;
            }
            setStyle(){
                for (var i = 0; i < this.options.element.length; i++) {
                    this.options.element[i].style.backgroundColor = this.options.bgColor;
                    this.options.element[i].style.textAlign = "center";
                    this.options.element[i].style.color = this.options.color;
                }
                return this;
            }
            setText(){
                for (var i = 0; i < this.options.element.length; i++) {
                    this.options.element[i].innerText = "呆呆Akuma";
                }
                return this;
            }
            bindClick(){
                for (var i = 0; i < this.options.element.length; i++) {
                    let __this = this.options.element[i];  //需將當(dāng)前的元素區(qū)分開 __this!=this
                    let flag = false;
                    __this.addEventListener("click",()=>{
                        if(flag = !flag){                            
                            __this.style.backgroundColor = "pink"
                        }else{
                            __this.style.backgroundColor =     this.options.bgColor;                    
                        }
                    })
                }
                return this;
            }
        }
        
        
        
        var divs = new Tool({
            element:document.getElementsByTagName("div"),
            bgColor:"#00a09d"
        });
        var ps = new Tool({
            element:document.getElementsByTagName("p"),
            bgColor:"#f48"
        });
目前看起來，這個(gè)終極版好像是最繁瑣的，首先我要說明，這里只是介紹面向?qū)ο缶幊淌窃趺椿厥?，對于漫天飛的this真的神煩，不過多寫寫就好了，習(xí)慣就好，要學(xué)會(huì)控制它，如果你成功看完這篇文章，你就會(huì)發(fā)現(xiàn)，隨著版本（暫時(shí)就算版本吧）升級，功能也慢慢增多，靈活性更好，代碼的可擴(kuò)展性更高啦，至于質(zhì)疑一個(gè)簡單的功能至于寫這么復(fù)雜嗎？
很好，我覺得面向?qū)ο缶幊叹褪窃燧喿拥倪^程，輪子就相當(dāng)于工具。打個(gè)比方，伐樹你會(huì)選擇電鋸還是斧頭，劈柴你會(huì)選擇電鋸還是斧頭，相信答案就在你心里，好了不寫了，真困了，快睡著了。