JavaScript 面向對象實戰思想

一直以來，不少新手都會常常問，我學完了基礎知識，如何作項目？平時在公司工做都是作些什麼？其實我想說，只要你找對方法，隨便打開一個網站，都能是你的項目。

這裏指的面向對象不僅僅適用於javascript，也適用其餘語言。

萬物皆對象，因此，任何事物都是有特徵(屬性)和動做(方法)的，通常拿到一份需求分檔，或者你瀏覽一個網頁看到一個畫面的時候，腦子裏就要有提煉出來的屬性和方法的能力，那你纔是合格的。

例如一個購物車例子

估計不少人都作過購物車，我就不賣關子， 作任何東西，先宏觀思考*，而後再去處理細節，而後組裝起來，就好像組裝汽車的道理同樣。例如上圖，紅色的就是屬性，黃色的就是方法，抽象出屬性和方法，其餘都是死的。

假如是剛學前端的同窗，可能就會用這種全局化的變量，也叫面向函數編程，缺點就是很亂，代碼冗餘

//商品屬性
    var name = 'macbook pro'
    var description = ''。' var price = 0; //商品方法 addOne:funcion(){alert('增長一件商品')}, reduceOne:function(){alert('減小一件商品')}, //購物車屬性 var card = ['macbook pro' ,'dell'] var sum = 2, var allPrice = 22000, //購物車方法 function addToCart:function(){ alert('添加到購物車') } addToCart()複製代碼

假如是單例模式的思想，可能會這樣作,但這樣仍是不太好。對象太多，可能形成變量重複，項目小還能夠接受

var product={
        name:'macbook pro',
        description:'',
        price:6660,
        addOne:funcion(){},
        reduceOne:function(){},
        addToCart:function(){
            alert('添加到購物車')
        }
    }

    /*購物車*/
    var cart={
        name:'購物車',
        products:[],
        allPrice:5000,
        sum:0
    }複製代碼

假如是有必定經驗的人，可能會這樣子作。

function Product(name,price,des) {
        /*屬性 行爲 能夠爲空或者給默認值*/
        this.name = name;
        this.price = price;
        this.description = des;
    }
    Product.prototype={
        addToCart:function(){
            alert('添加到購物車')
        }
        addOne:funcion(){},
        reduceOne:function(){},
         /*綁定元素*/
        bindDom:function(){
        //在這裏進行字符串拼接，
        //例如
        var str = ''
        str +='<div>價格是:'+this.privce+'</div>'
        return str
        },

    }

function Card(products,allPrice,sum) {
        /*屬性 行爲 能夠爲空或者給默認值*/
        this.products = products;
        this.allPrice = allPrice;
        this.sum = sum
    }
    Product.prototype={
        getAllPrice:function(){
            alert('計算購物車內商品總價')
        }
    }複製代碼

經過建立各類對象例如macbook

//後臺給的數據
 var products= [
        {name:'macbook',price:21888},
        {name:'dell',price:63999}
    ]

 var str = ''
 for(var i = 0,len=products.length;i<len;i++) {
        var curName = products[i].name
        var curName = new Product()
        curName.name=products[i].name;
        curName.price=products[i].price;
        str+= curName.bindDom()
    }複製代碼

上面這種方式，就下降了耦合性，無論你用什麼語言，仍是任何javascript框架(模板引擎，jquery,react等)，都是脫離不開上面那段代碼的思想，

再來講說，如今mvvm的模式，例如vue，他們不須要獲取dom,那麼渲染的時候，定義好一個一個的組件就好了。屬性所有用{{}}定義好，剩下的就是替換模板，就解決了。

data:{
        name ='',
        price='',
        description = ''
},
methods:{
     addToCart:function(){
            alert('添加到購物車')
        }
    addOne:funcion(){},
    reduceOne:function(){},  
}複製代碼

而後page級組件引入這個產品組件，而後循環這個產品組件就行了。

組件化的好處

• 將代碼分類管理
• 代碼清晰
• 容易維護
• 容易發現問題
• 代碼可讀性好
• 易於團隊化協做

固然這篇文章是爲了鍛鍊抽象化思惟的能力，雖然跟javascript模塊化的歷程也有點搭邊，我還但願你們在瀏覽任何網頁的時候，去分析一下，這個模塊你來設計，你會怎麼設計，能作到解耦和,版本可迭代可維護，利於團隊開發嗎？

若有不對，請指正