一直以來,很多新手都會(huì)經(jīng)常問,我學(xué)完了基礎(chǔ)知識(shí),如何做項(xiàng)目?平時(shí)在公司工作都是做些什么?其實(shí)我想說,只要你找對(duì)方法,隨便打開一個(gè)網(wǎng)站,都能是你的項(xiàng)目。
這里指的面向?qū)ο蟛粏螁芜m用于javascript,也適用其他語言。
萬物皆對(duì)象,所以,任何事物都是有特征(屬性)和動(dòng)作(方法)的,一般拿到一份需求分檔,或者你瀏覽一個(gè)網(wǎng)頁看到一個(gè)畫面的時(shí)候,腦子里就要有提煉出來的屬性和方法的能力,那你才是合格的。
例如一個(gè)購物車?yán)?/p>
估計(jì)很多人都做過購物車,我就不賣關(guān)子,做任何東西,先宏觀思考*,然后再去處理細(xì)節(jié),然后組裝起來,就好像組裝汽車的道理一樣。例如上圖,紅色的就是屬性,黃色的就是方法,抽象出屬性和方法,其他都是死的。
假如是剛學(xué)前端的同學(xué),可能就會(huì)用這種全局化的變量,也叫面向函數(shù)編程,缺點(diǎn)就是很亂,代碼冗余
//商品屬性 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()
假如是單例模式的思想,可能會(huì)這樣做,但這樣還是不太好。對(duì)象太多,可能造成變量重復(fù),項(xiàng)目小還可以接受
var product={ name:'macbook pro', description:'', price:6660, addOne:funcion(){}, reduceOne:function(){}, addToCart:function(){ alert('添加到購物車') } } /*購物車*/ var cart={ name:'購物車', 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('添加到購物車') } 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ì)算購物車內(nèi)商品總價(jià)') } }
通過創(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() }
上面這種方式,就降低了耦合性,不管你用什么語言,還是任何javascript框架(模板引擎,jquery,react等),都是脫離不開上面那段代碼的思想,
再來說說,現(xiàn)在mvvm的模式,例如vue,他們不需要獲取dom,那么渲染的時(shí)候,定義好一個(gè)一個(gè)的組件就行了。屬性全部用{{}}定義好,剩下的就是替換模板,就解決了。
data:{ name ='', price='', description = '' }, methods:{ addToCart:function(){ alert('添加到購物車') } addOne:funcion(){}, reduceOne:function(){}, }
然后page級(jí)組件引入這個(gè)產(chǎn)品組件,然后循環(huán)這個(gè)產(chǎn)品組件就好了。
組件化的好處
將代碼分類管理
代碼清晰
容易維護(hù)
容易發(fā)現(xiàn)問題
代碼可讀性好
易于團(tuán)隊(duì)化協(xié)作
當(dāng)然這篇文章是為了鍛煉抽象化思維的能力,雖然跟javascript模塊化的歷程也有點(diǎn)搭邊,我還希望大家在瀏覽任何網(wǎng)頁的時(shí)候,去分析一下,這個(gè)模塊你來設(shè)計(jì),你會(huì)怎么設(shè)計(jì),能做到解耦和,版本可迭代可維護(hù),利于團(tuán)隊(duì)開發(fā)嗎?
如有不對(duì),請(qǐng)指正
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com