淺談前端入門以及項目初創的經驗

從去年1月份到今天恰好一年,值此值得紀念的一天,來點評一下這一年來作爲一個前端工程師遇到的坑和總結一些工作經驗。
前端的入門從HTML的標籤開始,分爲

  • 語義化
  • 樣式

語義相當於word的格式,樣式就是格式的細節。很多新手剛入門的時候習慣除了html``body後只用div,這樣有兩個壞處:一是不便於代碼的維護查看,二是讓自己的邏輯層次混亂,尤其到了寫層疊樣式表(css)的時候無從下手。常見的語義標籤的嵌套層次應該是如下順序:

  • html
  • body
  • section(article,nav,footer)
  • div
  • h1,h2,…,p
  • span,i,label

其次是樣式的編寫。這裏遇到的兩個大坑是定位問題(position)和行內塊(display)。
position是一個非常重要的佈局屬性,通常是不會和float一塊出現,一般我們想讓元素固定出現在某個位置的時候,使用

position:absolute;

不過需要注意的是,它的父元素也需要有position的屬性定義,不管是absolute還是relative,不然定位會直接到body或者整個文檔流上。

值得一提的是,fixed固定定位是會讓整個元素脫離文檔流,掛靠到screen上,所以纔不會受到滾動的影響,網頁的導航欄<nav>可以嘗試使用,加上一個headroom.js的輕量插件可以讓導航欄更加好看。在移動端開發上,fixed會出現卡頓現象,並且IOS內核在鍵盤彈出時出現不兼容,這時最好選擇relative定位。
定位問題的基礎是盒子模型,HTML實際上是一門排版語言,每個標籤都是對應着一個佔位,佔位符就是一個盒子。網絡上有許多關於盒子模型的介紹,但是都說的太抽象,其實所謂的盒子模型就是把元素切成三個部門來看,外部,邊界(border)和內部內容。
這裏寫圖片描述
盒子模型

一般元素標籤div都是默認佔一行,所以排版的時候也是一行行排下來,當我們想要兩個元素之間的間距變大,可以使用margin屬性,想要父元素內部的子元素跟自己距離遠一點就選擇用padding。有些情況它們可以互相補充,所以總結下來就是一句話,同級用margin,不同級paddingmarginpadding屬性的寫法基本一樣,除了padding沒有auto的屬性。屬性只有一個參數就是4個邊距都相同,兩個參數的情況,前面的是上下邊距,後面的是左右邊距,三個參數情況第一個和第三個指上下,第二個指中間兩邊,四個是最一般的情況,實際上可以用順時針的順序來排,第一個是上,第二個是右,第三個是下,第四個是下。特別的情況是屬性值爲auto的情況,理解了盒子模型,就是相對父元素的四個邊,我距離你們多少由我自己決定,所以這是一種元素居中的方式。當選擇絕對定位時也要元素居中需要用lefttransform來解決,前者是父元素的距離,後者是自身的寬度。

說完了規範的position定位問題,剩下就是float浮動問題,這個屬性與fixed有點像,也是脫離了文本流,但是fixed脫離的是全部有定義到頁面的根元素,float則是脫離當前,到最相鄰的有position定義的父元素去,這也是流式佈局瀑布佈局的基礎,因爲它能見縫插針,慢工出細活地找到空的地方佔位。
正常佈局
正常佈局
第一個float:left
第一個float:left
這裏寫圖片描述
三個div都浮動了

但是有時候會發現佔的位是一個大坑,使用flaot屬性就必須要面對清除浮動的問題。一個父元素的子元素浮動了,因此他們實際上不佔空間,所以我們需要填充內容來將那些脫離文檔流的地方撐開,所以常見的方法就是給這個元素加上clearfix的類名,基礎寫法如下:

content:'';
clear:both;
width:0;
height:0;

基本能解決問題,更多詳細的可以參考

那些年我們一起清除過的浮動

另外一種要讓兩個元素在同一行的方法就是使用display屬性,這種方法的本質就是將div這種默認是塊(block)變成像span一樣的行內塊(‘inline-block’),這種寫法相對於float的優勢很明顯,位置能掌控在自己手中,並且不用整個頁面都是clearfix的身影。
上面的知識(語義標籤、層疊樣式表的屬性和屬性值、盒子模型、清除浮動)是作爲一個前端入門的基礎素質,能理解浮動的發生和處理方法就差不多了,在工作中除了PM和UI給的設計圖,一般我常用的屬性是

font-size:14px;
font-family:'Arial';
box-shadow:rgba(200,200,200,0) 0 0 5px;

前端入(進)完門(坑),也就是差不多能自己獨立寫出一個完整頁面(nav+body+footer+圖標)後,基本就要開始思考用戶交互的問題,這個是所有互聯網產品都應該思考的核心問題。之前深圳有一款叫酷米客公交的APP,發版初基本功能都能實現並且沒有太大的bug,但是許多存在許多交互的缺陷,這個產品上了應用商店後一直不溫不火,直到今年幾次改版後我能感受到做產品的用心,所以我纔會去推薦其他人用,所以前端在做交互其實也是要思考產品的用戶體驗,讓人感覺到誠意。常見的實習生或者創業公司會犯的錯就是不去考慮圖標的清晰度,用sprite圖也是圖標失真後難以維護的原因,現在大部分解決方法是用font-icon和svg來表示圖標。(使用圖標是讓整個毫無生氣的文字網站活起來的最簡單的方法)。

因此,回寫頁面並且有經驗後就開始javascript的奇妙之旅,認真啃js的話還是要去看經典(磚頭)《javascript權威指南》,而如果是直接上項目的話就去HTML教程裏簡單把六個基本數據類型。跟C++一樣,在使用之前需要聲明,六種類型

  • String
  • Number
  • Boolean
  • Array
  • Object

其實不管哪種語言,都會有相似的這種數據類型,還是C++,字符串,整型,布爾,數組(鏈表、順序表、哈希),結構體對象。JS最大的好處就是不用去考慮這些底層的越界問題。交互實現的時候我們也是要考慮算法的問題,但是基本都是操作DOM元素,所以比較直觀,該做些什麼,右鍵審查元素就能定位到,所以最簡單的項目就是綁定一個點擊事件,寫了這一個其他的都大同小異。有時候寫原生的js會讓人抓狂,獲取頁面元素的步驟太繁瑣,所以我們請出了大殺器jQuery。jQuery實際上是一個函數庫,封裝了元素選擇器和事件綁定兩個最常用也最實在的方法。它使得我們獲取DOM能像寫css那樣直接,幾乎不用動腦,譬如用原生的js來獲取頁面元素 p:

var ele = document.getElementsByTagName('p');//獲取頁面所有p元素

使用jQ:

var ele = $('p');//同上
var ele2 = $('div p');//與css一樣的選擇器寫法獲取div裏面的p元素

事件綁定的封裝,原生的基本寫法:

document.getElementById("btn").οnclick=function(){alert('點擊事件')};//先獲得元素,實現onclick的方法

jQ的寫法

$('#btn').click(function(){alert('點擊事件');});//接口封裝的更簡潔;

以上兩個事件綁定的寫法都涉及到一個筆試或者面試的常考知識點,就是閉包的概念。所謂JS的閉包用一句話來說就是”函數的內部定義函數,內部函數可以調用外部的變量”。
更進一步,其實JS的對象的實例的本質都是函數。
在開發項目,尤其是涉及到ajax的時候,總是會在原來的div容器裏添加更多的元素,這時我們會發現點擊事件(click)不能觸發了,怎麼點沒有反應,這是因爲ajax請求回來的拼接數據append到父元素後已經是我們的js執行完以後,所以當然不會有反應。所以頁面點擊元素沒有響應的問題,一般有兩種解決方法:
1.在拼接的數據後再加上事件綁定
2.

$('body').on('click','.ele',function(){
    //your code
});//將事件監聽綁定在父元素或者根元素上

一般的項目寫到一堆的事件綁定後就差不多了,閉包函數內實現的大多數操作css的屬性,顯示、隱藏內容,現在主流的ajax數據交互其實也是一樣的東西,不斷重複的工作。說到實習生做項目,因爲自身的經驗問題還有許多時間制約,我建議是多用插件,尤其是涉及到canvas的,先把項目做完,再來研究源碼有時候更能讓提起我們的興趣。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章