JavaScript 物件導向實戰思想

乘風gg發表於2019-03-03
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模組化的歷程也有點搭邊，我還希望大家在瀏覽任何網頁的時候，去分析一下，這個模組你來設計，你會怎麼設計，能做到解耦和,版本可迭代可維護，利於團隊開發嗎？

如有不對，請指正

相關文章