淺談前端設(shè)計(jì)思想
前言:
今天師父聊了下前端思想,只是真的是淺談撑碴。但是收獲還是有的讨彼,不過(guò)略贮,師父引進(jìn)門(mén)掉房,修行還是看個(gè)人吧蕴忆。
所以我想聊聊我的學(xué)習(xí)心得颤芬,就不貼代碼了,太low套鹅,直接給傳送門(mén)站蝠。(這次簡(jiǎn)單點(diǎn),廢話不說(shuō)~…^_^).
話題:
1.前端開(kāi)發(fā)問(wèn)題(遇到的問(wèn)題和多人開(kāi)發(fā)遇到的情況卓鹿,以及在以前我們是怎么處理的)
2.前端開(kāi)發(fā)工具篇(打怪獸沒(méi)武器怎么行菱魔?對(duì)吧)
3.不要小看了前端,這水很深的(目前主流的前端視覺(jué)吟孙,什么叫美與丑澜倦?此問(wèn)剛一出立馬懵逼的問(wèn)題)
1.前端開(kāi)發(fā)的問(wèn)題
第一種情況(前端后端分離式開(kāi)發(fā))
在部分公司中 以往的開(kāi)發(fā)中,我們總是自己開(kāi)小組會(huì)議內(nèi)部定好協(xié)議杰妓,那誰(shuí)藻治。前端頁(yè)面你開(kāi)發(fā)吧,所以規(guī)格他自己玩巷挥,自己改我們不用去管桩卵,只要結(jié)過(guò)頁(yè)面和我們后端數(shù)據(jù)進(jìn)行整合就好(筆者第一家公司就這么玩的T_T,不幸中的萬(wàn)幸是中招的是我旁邊那位一臉茫然XX兄)。
這種情況的兄弟倍宾,你不用看了 這文章第一個(gè)主題不適合你看雏节,請(qǐng)直接略過(guò)
第二種情況(模塊化的開(kāi)發(fā))
這種情況就比較多了,SVN,GIT凿宾。代碼管理開(kāi)發(fā)矾屯,每天第一件工作就是更新工作代碼兼蕊,二件事加個(gè)鎖搞自己的初厚。然后每天(吃飯或者下班的時(shí)候)comint后,你準(zhǔn)備在來(lái)個(gè)測(cè)試孙技,你會(huì)發(fā)現(xiàn)产禾,自己本機(jī)玩這個(gè)的時(shí)候一點(diǎn)問(wèn)題沒(méi)有,但是commit后牵啦,后再UPdate亚情,整個(gè)模塊都不兼容,甚至其他的模塊也會(huì)有問(wèn)題哈雏。所以我想以自己的經(jīng)歷來(lái)說(shuō) 這里引出了沖突管理的慨念(師父提了2個(gè)楞件,自己加了一個(gè))
1.1 js變量污染(域污染)
1.2 文件名沖突
1.3 變量名沖突
以前我們是怎么處理的
電話 || QQ ||email(在公司||不在公司)
哥們衫生,我的模塊那塊JS(變量名,文件名)和你的哪塊JS(變量名土浸,文件名)沖突了罪针,誰(shuí)先提交的誰(shuí)用唄,后面的改改黄伊?嘻嘻泪酱。。(協(xié)調(diào)解決)
PS:想法總是好的还最,但是有時(shí)候卻不盡人意墓阀,所以就有了分類(lèi)分離式管理
以CSS為例:
我們將所有的默認(rèn)樣式重寫(xiě)做到統(tǒng)一,所以分出來(lái)一個(gè)reset.css
我們將所有的顏色樣式提取出來(lái)拓轻,所以分出來(lái)一個(gè)color.css
字體的斯撮,布局的,扶叉。吮成。。辜梳。
好像在CSS我們就很難再?zèng)_突了粱甫,可是問(wèn)題又來(lái)了,手機(jī)移動(dòng)的時(shí)代到來(lái)了作瞄。你會(huì)發(fā)現(xiàn)我們網(wǎng)站上運(yùn)行沒(méi)有一點(diǎn)問(wèn)題茶宵,可是移動(dòng)端時(shí)卻好像卡成翔了(或者說(shuō),等好久都不出來(lái)宗挥,用戶(hù)體驗(yàn)度降低乌庶,不明事由的老板就會(huì)說(shuō),我花這么多錢(qián)請(qǐng)你契耿,你怎么做的瞒大。。。其實(shí)我想說(shuō)谅猾,你這點(diǎn)錢(qián)倡怎,我在北京多久能買(mǎi)個(gè)廁所啊。)酗电,其實(shí)問(wèn)題并不在于我們,而在于移動(dòng)端的帶寬和瀏覽器的線程上内列,我們以多文件的方式撵术,文件越多那么瀏覽器一個(gè)是要消耗線程一個(gè)是消耗帶寬,而且還很慢话瞧。
所以有了另一個(gè)技術(shù)的引入
那么就是
CSS:sass
JS: coffeeScript
具體吹牛逼請(qǐng)看下一章:2.前端開(kāi)發(fā)工具篇(打怪獸沒(méi)武器怎么行嫩与?對(duì)吧)
2.前端開(kāi)發(fā)工具篇(打怪獸沒(méi)武器怎么行寝姿?對(duì)吧)
說(shuō)道cass 我就想聊聊less,因?yàn)樗麄兊挠梅ㄓ悬c(diǎn)像划滋,但運(yùn)行機(jī)制缺失不同的会油,一個(gè)是本地客戶(hù)端js編譯,一個(gè)是服務(wù)器端的編譯古毛。具體的區(qū)別樓下傳送門(mén)
less:是個(gè)什么鬼翻翩?其實(shí)這個(gè)問(wèn)題以前我也問(wèn)過(guò)自己,但是一直沒(méi)管稻薇,直到我開(kāi)始玩BS(BootStarp)時(shí)嫂冻,接觸后。
然后我就放棄了塞椎。為什么桨仿?因?yàn)?當(dāng)時(shí)手機(jī)端JS支持真的很差或者說(shuō)部分都不支持,而less需要js去編譯轉(zhuǎn)換成可執(zhí)行的CSS案狠。
---好了以上是我的吹牛逼服傍,現(xiàn)在匯總我?guī)煾傅拇蹬1?呵呵),下面就是心得吧----
sass:通過(guò)import導(dǎo)入多個(gè)你自己需要的scss文件骂铁,編譯時(shí)會(huì)合并 并自己生成css樣式文件
sass 可以使用Compass工具 但是這種玩法并不適合小項(xiàng)目吹零,但是非常試用于大型項(xiàng)目開(kāi)發(fā)中
而JS 可以使用coffeeScript管理工具
能夠做到和sass的模塊化制作
JS不推薦玩coffeeScript,你玩這個(gè),一般人沒(méi)法接手拉庵,國(guó)內(nèi)基本沒(méi)有項(xiàng)目在用這個(gè)
再說(shuō)個(gè)秒殺PS的工具Sketch
在菜單條中右側(cè)點(diǎn)擊網(wǎng)格或者layout布局灿椅,設(shè)置好偶數(shù)寬,和柵格數(shù)量钞支,我這12.然后發(fā)現(xiàn)所有的布局是以3或者3的倍數(shù)來(lái)布局的
是不是很漂亮茫蛹?可是為什么了?涉及到一個(gè)字體和美學(xué)的概念烁挟,然后說(shuō)今天不吹了婴洼,
-關(guān)于JS coffeeScript管理工具資料
換我的話說(shuō),下章開(kāi)始撼嗓。3.不要小看了前端柬采,這水很深
3.不要小看了前端,這水很深的
3.1什么叫美什么叫丑静稻?(字體篇)
這個(gè)話題警没,個(gè)人比較了下匈辱,我真的說(shuō)不好振湾,什么叫美?什么叫丑亡脸?而我們?yōu)槭裁匆褂眠@些東西工具來(lái)做押搪?
所謂的美與丑树酪,就是我們一眼看過(guò)去,大腦的接受程度大州,而美工或者說(shuō)前端都需要考慮進(jìn)去续语,就像師父說(shuō)的,為什么有些字體厦画,中文使用很難看疮茄,英文卻很好看?(其實(shí)聽(tīng)到這的時(shí)候我考慮到人為什么感知美與丑根暑,然后直接跳屏去 一個(gè)新的學(xué)科 神經(jīng)學(xué)系統(tǒng)....后話)力试。
拉回話題,這個(gè)蠻好理解排嫌,中文屬于象形文字畸裳,英文屬于形式文字由拉丁文演化過(guò)來(lái),中文常用漢字2W到3W個(gè)左右淳地,英文26*2個(gè)怖糊,其字體規(guī)范化難易度很想而知。(而我查看了大量的網(wǎng)絡(luò)資料颇象,關(guān)鍵字:字體設(shè)計(jì)美學(xué)伍伤,知乎應(yīng)該給的解釋是最好的,但是卻沒(méi)有人說(shuō)的特別清楚遣钳。)嚷缭、對(duì)于我來(lái)說(shuō)或者其他人來(lái)說(shuō) 我覺(jué)得就像師父所說(shuō)的那樣這個(gè)只是你自己大腦所接受的程序來(lái)評(píng)判并無(wú)標(biāo)準(zhǔn)。
3.2什么叫美什么叫丑耍贾?(圖片及布局篇)
這個(gè)是我自己加的一個(gè)主題阅爽,既然都說(shuō)了字體,那么還有布局還有圖像對(duì)吧荐开,網(wǎng)頁(yè)3元素嘛付翁,不對(duì)還要加個(gè)動(dòng)畫(huà)(其實(shí)就是個(gè)動(dòng)圖。)晃听。
布局的合理性百侧,跟人覺(jué)得 讓人一看 就知道這個(gè)頁(yè)面的主要想表現(xiàn)的東西在哪部分,我覺(jué)得 這個(gè)就是突出意圖能扒,突出主題佣渴。
而圖片的合理性在我這理解為裝飾品,既美觀而且和布局和字體結(jié)合起來(lái)初斑,一種給人感官度辛润。很舒服而明確。
4.總結(jié)下吧
什么叫設(shè)計(jì)思想见秤?他是一種經(jīng)驗(yàn)砂竖,一種在生活中我們開(kāi)發(fā)所遇到問(wèn)題的解決方案的匯總真椿,一種模式,一種思想乎澄。并且不是固定的突硝,因?yàn)殡S著外在技術(shù)環(huán)境的發(fā)展,生產(chǎn)環(huán)境的變化置济,業(yè)務(wù)的不斷復(fù)雜化解恰,我們也在不斷總結(jié),所以他也在不停的變化浙于。
個(gè)人是一個(gè)是不是就有想法的修噪,過(guò)了那個(gè)想靠自己手寫(xiě)的程序轟動(dòng)全球年紀(jì)的,有點(diǎn)強(qiáng)迫癥愛(ài)折騰的路媚,初心不變并想玩自己喜歡的程序過(guò)活的極客黄琼。
我想說(shuō)夢(mèng)想啊,你遙不可及整慎,但是我也在路上一步一步的走來(lái)脏款。---你們好,我是孤雪飄寒