淺談前端設(shè)計(jì)思想

淺談前端設(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介紹及其與Sass的差異

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)于CSS Compass管理工具資料

-關(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)脏款。---你們好,我是孤雪飄寒

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末裤园,一起剝皮案震驚了整個(gè)濱河市撤师,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拧揽,老刑警劉巖剃盾,帶你破解...
    沈念sama閱讀 212,222評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異淤袜,居然都是意外死亡痒谴,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)铡羡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)积蔚,“玉大人,你說(shuō)我怎么就攤上這事烦周【”” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,720評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵读慎,是天一觀的道長(zhǎng)漱贱。 經(jīng)常有香客問(wèn)我,道長(zhǎng)夭委,這世上最難降的妖魔是什么幅狮? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,568評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上彪笼,老公的妹妹穿的比我還像新娘钻注。我一直安慰自己蚂且,他們只是感情好配猫,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,696評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著杏死,像睡著了一般泵肄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上淑翼,一...
    開(kāi)封第一講書(shū)人閱讀 49,879評(píng)論 1 290
  • 那天腐巢,我揣著相機(jī)與錄音,去河邊找鬼玄括。 笑死冯丙,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的遭京。 我是一名探鬼主播胃惜,決...
    沈念sama閱讀 39,028評(píng)論 3 409
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼哪雕!你這毒婦竟也來(lái)了船殉?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,773評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤斯嚎,失蹤者是張志新(化名)和其女友劉穎利虫,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體堡僻,經(jīng)...
    沈念sama閱讀 44,220評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡糠惫,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,550評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了钉疫。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寞钥。...
    茶點(diǎn)故事閱讀 38,697評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖陌选,靈堂內(nèi)的尸體忽然破棺而出理郑,到底是詐尸還是另有隱情,我是刑警寧澤咨油,帶...
    沈念sama閱讀 34,360評(píng)論 4 332
  • 正文 年R本政府宣布您炉,位于F島的核電站,受9級(jí)特大地震影響役电,放射性物質(zhì)發(fā)生泄漏赚爵。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,002評(píng)論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望冀膝。 院中可真熱鬧唁奢,春花似錦、人聲如沸窝剖。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,782評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)赐纱。三九已至脊奋,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間疙描,已是汗流浹背诚隙。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,010評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留起胰,地道東北人久又。 一個(gè)月前我還...
    沈念sama閱讀 46,433評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像效五,于是被迫代替她去往敵國(guó)和親地消。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,587評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容