javascript 面向?qū)ο髮?shí)戰(zhàn)思想分享

更新時(shí)間：2017年09月07日 22:07:31 作者：乘風(fēng)gg

萬(wàn)物皆對(duì)象，所以，任何事物都是有特征(屬性)和動(dòng)作(方法)的，一般拿到一份需求分檔，或者你瀏覽一個(gè)網(wǎng)頁(yè)看到一個(gè)畫面的時(shí)候，腦子里就要有提煉出來(lái)的屬性和方法的能力，那你才是合格的

一直以來(lái)，很多新手都會(huì)經(jīng)常問(wèn)，我學(xué)完了基礎(chǔ)知識(shí)，如何做項(xiàng)目？平時(shí)在公司工作都是做些什么？其實(shí)我想說(shuō)，只要你找對(duì)方法，隨便打開一個(gè)網(wǎng)站，都能是你的項(xiàng)目。

這里指的面向?qū)ο蟛粏螁芜m用于javascript，也適用其他語(yǔ)言。
萬(wàn)物皆對(duì)象，所以，任何事物都是有特征(屬性)和動(dòng)作(方法)的，一般拿到一份需求分檔，或者你瀏覽一個(gè)網(wǎng)頁(yè)看到一個(gè)畫面的時(shí)候，腦子里就要有提煉出來(lái)的屬性和方法的能力，那你才是合格的。

例如一個(gè)購(gòu)物車?yán)?/p>

估計(jì)很多人都做過(guò)購(gòu)物車，我就不賣關(guān)子，做任何東西，先宏觀思考*，然后再去處理細(xì)節(jié)，然后組裝起來(lái)，就好像組裝汽車的道理一樣。例如上圖，紅色的就是屬性，黃色的就是方法，抽象出屬性和方法，其他都是死的。

假如是剛學(xué)前端的同學(xué)，可能就會(huì)用這種全局化的變量，也叫面向函數(shù)編程，缺點(diǎn)就是很亂，代碼冗余

//商品屬性
  var name = 'macbook pro'
  var description = ''。'
  var price = 0;
  //商品方法
  addOne:funcion(){alert('增加一件商品')},
  reduceOne:function(){alert('減少一件商品')},

  //購(gòu)物車屬性
  var card = ['macbook pro' ,'dell']
  var sum = 2,
  var allPrice = 22000,
  //購(gòu)物車方法
  function addToCart:function(){
      alert('添加到購(gòu)物車')
    }


  addToCart()

假如是單例模式的思想，可能會(huì)這樣做,但這樣還是不太好。對(duì)象太多，可能造成變量重復(fù)，項(xiàng)目小還可以接受

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

  /*購(gòu)物車*/
  var cart={
    name:'購(gòu)物車',
    products:[],
    allPrice:5000,
    sum:0
  }

假如是有一定經(jīng)驗(yàn)的人，可能會(huì)這樣子做。

function Product(name,price,des) {
    /*屬性 行為 可以為空或者給默認(rèn)值*/
    this.name = name;
    this.price = price;
    this.description = des;
  }
  Product.prototype={
    addToCart:function(){
      alert('添加到購(gòu)物車')
    }
    addOne:funcion(){},
    reduceOne:function(){},
     /*綁定元素*/
    bindDom:function(){
    //在這里進(jìn)行字符串拼接，
    //例如
    var str = ''
    str +='<div>價(jià)格是:'+this.privce+'</div>'
    return str
    },

  }

function Card(products,allPrice,sum) {
    /*屬性 行為 可以為空或者給默認(rèn)值*/
    this.products = products;
    this.allPrice = allPrice;
    this.sum = sum
  }
  Product.prototype={
    getAllPrice:function(){
      alert('計(jì)算購(gòu)物車內(nèi)商品總價(jià)')
    }
  }

通過(guò)創(chuàng)建各種對(duì)象例如macbook

//后臺(tái)給的數(shù)據(jù)
 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()
  }

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

再來(lái)說(shuō)說(shuō)，現(xiàn)在mvvm的模式，例如vue，他們不需要獲取dom,那么渲染的時(shí)候，定義好一個(gè)一個(gè)的組件就行了。屬性全部用{{}}定義好，剩下的就是替換模板，就解決了。

data:{
    name ='',
    price='',
    description = ''
},
methods:{
   addToCart:function(){
      alert('添加到購(gòu)物車')
    }
  addOne:funcion(){},
  reduceOne:function(){}, 
}

然后page級(jí)組件引入這個(gè)產(chǎn)品組件，然后循環(huán)這個(gè)產(chǎn)品組件就好了。

組件化的好處

將代碼分類管理
代碼清晰
容易維護(hù)
容易發(fā)現(xiàn)問(wèn)題
代碼可讀性好
易于團(tuán)隊(duì)化協(xié)作
當(dāng)然這篇文章是為了鍛煉抽象化思維的能力，雖然跟javascript模塊化的歷程也有點(diǎn)搭邊，我還希望大家在瀏覽任何網(wǎng)頁(yè)的時(shí)候，去分析一下，這個(gè)模塊你來(lái)設(shè)計(jì)，你會(huì)怎么設(shè)計(jì)，能做到解耦和,版本可迭代可維護(hù)，利于團(tuán)隊(duì)開發(fā)嗎？

如有不對(duì)，請(qǐng)指正