javascript 面向對象實戰思想分享

來源：懂視網責編：小采時間：2020-11-27 22:30:45

javascript 面向對象實戰思想分享

javascript 面向對象實戰思想分享:一直以來，很多新手都會經常問，我學完了基礎知識，如何做項目？平時在公司工作都是做些什么？其實我想說，只要你找對方法，隨便打開一個網站，都能是你的項目。這里指的面向對象不單單適用于javascript，也適用其他語言。萬物皆對象，所以，任何事物都是有

推薦度：

點擊下載本文 文檔為doc格式

導讀javascript 面向對象實戰思想分享:一直以來，很多新手都會經常問，我學完了基礎知識，如何做項目？平時在公司工作都是做些什么？其實我想說，只要你找對方法，隨便打開一個網站，都能是你的項目。這里指的面向對象不單單適用于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模塊化的歷程也有點搭邊，我還希望大家在瀏覽任何網頁的時候，去分析一下，這個模塊你來設計，你會怎么設計，能做到解耦和,版本可迭代可維護，利于團隊開發嗎？

如有不對，請指正

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com