淺談前端設計思想

淺談前端設計思想

前言:

今天師父聊了下前端思想,只是真的是淺談。但是收獲還是有的,不過,師父引進門,修行還是看個人吧。
所以我想聊聊我的學習心得,就不貼代碼了,太low,直接給傳送門。(這次簡單點,廢話不說~…^_^).

話題:

1.前端開發(fā)問題(遇到的問題和多人開發(fā)遇到的情況,以及在以前我們是怎么處理的)

2.前端開發(fā)工具篇(打怪獸沒武器怎么行?對吧)

3.不要小看了前端,這水很深的(目前主流的前端視覺,什么叫美與丑?此問剛一出立馬懵逼的問題)


1.前端開發(fā)的問題

第一種情況(前端后端分離式開發(fā))

在部分公司中 以往的開發(fā)中,我們總是自己開小組會議內部定好協(xié)議,那誰。前端頁面你開發(fā)吧,所以規(guī)格他自己玩,自己改我們不用去管,只要結過頁面和我們后端數(shù)據(jù)進行整合就好(筆者第一家公司就這么玩的T_T,不幸中的萬幸是中招的是我旁邊那位一臉茫然XX兄)。

這種情況的兄弟,你不用看了 這文章第一個主題不適合你看,請直接略過

第二種情況(模塊化的開發(fā))

這種情況就比較多了,SVN,GIT。代碼管理開發(fā),每天第一件工作就是更新工作代碼,二件事加個鎖搞自己的。然后每天(吃飯或者下班的時候)comint后,你準備在來個測試,你會發(fā)現(xiàn),自己本機玩這個的時候一點問題沒有,但是commit后,后再UPdate,整個模塊都不兼容,甚至其他的模塊也會有問題。所以我想以自己的經(jīng)歷來說 這里引出了沖突管理的慨念(師父提了2個,自己加了一個)

1.1 js變量污染(域污染)

1.2 文件名沖突

1.3 變量名沖突

以前我們是怎么處理的

電話 || QQ ||email(在公司||不在公司)

哥們,我的模塊那塊JS(變量名,文件名)和你的哪塊JS(變量名,文件名)沖突了,誰先提交的誰用唄,后面的改改?嘻嘻。。(協(xié)調解決)


PS:想法總是好的,但是有時候卻不盡人意,所以就有了分類分離式管理

以CSS為例:
我們將所有的默認樣式重寫做到統(tǒng)一,所以分出來一個reset.css
我們將所有的顏色樣式提取出來,所以分出來一個color.css
字體的,布局的,。。。。

好像在CSS我們就很難再沖突了,可是問題又來了,手機移動的時代到來了。你會發(fā)現(xiàn)我們網(wǎng)站上運行沒有一點問題,可是移動端時卻好像卡成翔了(或者說,等好久都不出來,用戶體驗度降低,不明事由的老板就會說,我花這么多錢請你,你怎么做的。。。其實我想說,你這點錢,我在北京多久能買個廁所啊。),其實問題并不在于我們,而在于移動端的帶寬和瀏覽器的線程上,我們以多文件的方式,文件越多那么瀏覽器一個是要消耗線程一個是消耗帶寬,而且還很慢。
所以有了另一個技術的引入
那么就是

CSS:sass
JS: coffeeScript

具體吹牛逼請看下一章:2.前端開發(fā)工具篇(打怪獸沒武器怎么行?對吧)

2.前端開發(fā)工具篇(打怪獸沒武器怎么行?對吧)

說道cass 我就想聊聊less,因為他們的用法有點像,但運行機制缺失不同的,一個是本地客戶端js編譯,一個是服務器端的編譯。具體的區(qū)別樓下傳送門

LESS介紹及其與Sass的差異

less:是個什么鬼?其實這個問題以前我也問過自己,但是一直沒管,直到我開始玩BS(BootStarp)時,接觸后。
然后我就放棄了。為什么?因為 當時手機端JS支持真的很差或者說部分都不支持,而less需要js去編譯轉換成可執(zhí)行的CSS。

---好了以上是我的吹牛逼,現(xiàn)在匯總我?guī)煾傅拇蹬1?呵呵),下面就是心得吧----

sass:通過import導入多個你自己需要的scss文件,編譯時會合并 并自己生成css樣式文件

sass 可以使用Compass工具 但是這種玩法并不適合小項目,但是非常試用于大型項目開發(fā)中

而JS 可以使用coffeeScript管理工具
能夠做到和sass的模塊化制作

JS不推薦玩coffeeScript,你玩這個,一般人沒法接手,國內基本沒有項目在用這個

再說個秒殺PS的工具Sketch
在菜單條中右側點擊網(wǎng)格或者layout布局,設置好偶數(shù)寬,和柵格數(shù)量,我這12.然后發(fā)現(xiàn)所有的布局是以3或者3的倍數(shù)來布局的
是不是很漂亮?可是為什么了?涉及到一個字體和美學的概念,然后說今天不吹了,

-關于CSS Compass管理工具資料

-關于JS coffeeScript管理工具資料

換我的話說,下章開始。3.不要小看了前端,這水很深

3.不要小看了前端,這水很深的

3.1什么叫美什么叫丑?(字體篇)

這個話題,個人比較了下,我真的說不好,什么叫美?什么叫丑?而我們?yōu)槭裁匆褂眠@些東西工具來做?
所謂的美與丑,就是我們一眼看過去,大腦的接受程度,而美工或者說前端都需要考慮進去,就像師父說的,為什么有些字體,中文使用很難看,英文卻很好看?(其實聽到這的時候我考慮到人為什么感知美與丑,然后直接跳屏去 一個新的學科 神經(jīng)學系統(tǒng)....后話)。
拉回話題,這個蠻好理解,中文屬于象形文字,英文屬于形式文字由拉丁文演化過來,中文常用漢字2W到3W個左右,英文26*2個,其字體規(guī)范化難易度很想而知。(而我查看了大量的網(wǎng)絡資料,關鍵字:字體設計美學,知乎應該給的解釋是最好的,但是卻沒有人說的特別清楚。)、對于我來說或者其他人來說 我覺得就像師父所說的那樣這個只是你自己大腦所接受的程序來評判并無標準。

3.2什么叫美什么叫丑?(圖片及布局篇)

這個是我自己加的一個主題,既然都說了字體,那么還有布局還有圖像對吧,網(wǎng)頁3元素嘛,不對還要加個動畫(其實就是個動圖。)。
布局的合理性,跟人覺得 讓人一看 就知道這個頁面的主要想表現(xiàn)的東西在哪部分,我覺得 這個就是突出意圖,突出主題。
而圖片的合理性在我這理解為裝飾品,既美觀而且和布局和字體結合起來,一種給人感官度。很舒服而明確。

4.總結下吧

什么叫設計思想?他是一種經(jīng)驗,一種在生活中我們開發(fā)所遇到問題的解決方案的匯總,一種模式,一種思想。并且不是固定的,因為隨著外在技術環(huán)境的發(fā)展,生產(chǎn)環(huán)境的變化,業(yè)務的不斷復雜化,我們也在不斷總結,所以他也在不停的變化。

個人是一個是不是就有想法的,過了那個想靠自己手寫的程序轟動全球年紀的,有點強迫癥愛折騰的,初心不變并想玩自己喜歡的程序過活的極客。

我想說夢想啊,你遙不可及,但是我也在路上一步一步的走來。---你們好,我是孤雪飄寒

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容