前端開發 | 嘗試用Markdown寫一下近幾個月的總結

近期總結

回顧

半年前

半年前，接觸了前端一年多(工做半年)的我瞭解的東西只有下面這些。由於在公司裏的工做就是切靜態頁，搗鼓CMS。

• HTML (比較簡潔的編寫HTML)
• CSS/CSS3 (PC兼容IE6+,FF,Chrome | WAP兼容各類安卓瀏覽器)
• Javascript (基礎比較紮實,不懂得寫插件,不懂得設計模式,徹底面向過程)
• jQuery (各類DOM操做)

當時我覺得前端就這些東西了，據說過NodeJS，但以爲那是很遙遠的東西，我應該還沒到能學習它的程度。

工做中一些工做經驗差很少的同事，很愛在網上搬一些插件來用，
但我以爲本身入行，應該本身多打點代碼，因此堅持了半年多純手打各類代碼。
輪播，拖曳之類的，最後本身寫了一些方便本身使用的插件。

Less有據說過，可是也沒有主動去用。

因爲工做中多數都是寫靜態頁，因此工做了大半年，惟一讓我感覺獲得在進步的就是「兼容性」;

ajax幾乎沒用到，就更加談不上用模版引擎了。

git也沒有用到，開發流程很是的亂，用郵件，直接丟靜態頁面代碼的形式。不少修改直接用ftp修改線上的。

---

換工做後

當時的知識面很窄，後來我加入到了新公司，來了2個和同屆畢業的學生。並且都不是計算機專業。

可能因爲他們以前所在的公司開發流程比較規範，他們眼界更開闊，或者學習更努力。他們貌似比我懂得更多的知識。
但基礎感受也差很少。做爲計算機專業的我感到好大壓力。

隨後我認識到，這是深度和廣度的問題。我可能更加註重在一個知識上面深度去學習（雖然也沒有多深），
然而他們更樂於去了解更多的新技術新想法。
我當時的狀態來講，我以爲我應該多去了解一些新知識才是。

---

如今

隨後我就學習並瞭解瞭如下相關知識
（並不能所有融會貫通，但我知道他們是幹什麼的，知道如何去使用。
有的甚至在學習的過程當中遇到一些莫名的因素致使放棄了學習該知識）。

由於沒有作到相關的項目，因此都是本身在搗鼓，發現不了不少的坑，有些東西也沒用到精髓。算是拓寬了知識面吧。

• Git
• Less
• CreateJs
• Markdown
• AngularJs
• requireJs
• Underscore.js
• Backbone.js
• 設計模式
• 模版引擎
  • handlebars.js
  • template.js
• Node
  • gulp
  • Bower
  • Jade
  • Express
  • MongoDB

接下來我就粗略的說一下近半年來接觸到的這些技術。以我本身的理解，比較淺的談一下。但願大神們指導指導，指條明路。
順便也梳理記錄一下。

---

細說新接觸的技術

Git

Git，版本管理工具。

用這個東西幾個月了，沒什麼好說的，就是修改代碼，提交代碼，推送。 方便多人合做。
這個本身能夠看一下網上的教程，瞭解一下每一個操做的概念。具體的還得在實際工做中，看下團隊的須要，才能知道具體須要用到哪些。

---

Less

Less是一種動態樣式語言,屬於CSS預處理語言的一種，和Sass是一個意思。就是經過一些嵌套，mixin，變量等。編譯出你須要的CSS。讓你本身寫的樣式更少些。

例如：

base.less

#box{
    @color1: red;
    @color2: blue;
    span{
        background: @color1;
    }
    a{
        color: @color2;
    }
}

編譯後的CSS爲
base.css

#box span { background: red; }
#box a { color: blue; }

附: Less教程

---

CreateJS

CreateJS是一個js庫，是一款爲HTML5遊戲開發的引擎，用於操做。

其中包含五款工具：

EaselJS：用於 Sprites、動畫、向量和位圖的繪製，建立 HTML5 Canvas 上的交互體驗（包含多點觸控），同時提供 Flash 中的「顯示列表」功能。

TweenJS：一個簡單的用於製做相似 Flash 中「補間動畫」的引擎，可生成數字或非數字的連續變化效果。

SoundJS：一個音頻播放引擎，可以根據瀏覽器性能選擇音頻播放方式。將音頻文件做爲模塊，可隨時加載和卸載。

PrloadJS：幫助你簡化網站資源預加載工做，不管加載內容是圖形、視頻、聲音、JS、數據……

PxLoadr：一款用於網站資源預加載的 JavaScript 庫，可加載圖片、音頻等任何類型的文件。PxLoader 除了能夠幫你對資源加載的進度進行監測，捕捉「加載完成」事件外，還能夠幫你指定資源加載的順序。你甚至還能夠按照優先級分組加載資源。

我本人只用到了EaselJs和SoundJS。
EaselJs是寫了個小demo體驗了一下,SoundJs是作一個H5的時候用到。

CreateJS沒有中文版的文檔，也找不到教程，看起來至關吃力。有一個相似的庫，lufylegend，有中文的，我還沒去了解，有興趣能夠看一下。

---

Markdown

很早以前就據說過markdown了，一直都沒去了解。通常用來寫文檔吧。感受還挺實用的。並且看起來好像挺裝逼的樣子。
這篇文章就是今天剛看了一下markdown的語法。試用一下，寫個總結。

附： Markdown 語法 | Markdown編輯器

---

Angular

AngularJs是MVVM的模式。Model,View,ViewModel。

就是Model的數據發生改變時，View層的表現也會同時發生變化。
View層的數據發生改變時，Model裏的數據也會隨之改變。
不須要寫任何的事件操做。只須要綁定一下模型。

這個跟着看了一遍文檔教程,跟着視頻走了一遍,Demo寫了一些。

附: Angular文檔教程 | Angular視頻教程

---

requireJs

RequireJS的目標是鼓勵代碼的模塊化，它使用了不一樣於傳統script標籤的腳本加載步驟。
能夠用它來加速、優化代碼，但其主要目的仍是爲了代碼的模塊化。它鼓勵在使用腳本時以module ID替代URL地址。

附: requireJs 中文教程

---

Underscore.js

之因此學這個是由於想學習一下Backbone,而後Backbone強制依賴於這個庫，就過了一遍。

這是一個函數庫，裏面都是一些功能函數。很是好懂。

附: Underscore.js 中文文檔

---

Backbone

Backbone 這個東西，從頭看到尾都懂，可是看一下demo，就不懂了。T _ T
尋求backbone視頻教程.

附: Backbone API文檔

---

設計模式

設計模式我是看紙質書的，感受很是有用。開發模式可讓你寫的代碼更容易維護。
咱們能夠根據本身的須要，採起不一樣的模式

具體的模式以下：

【晚點補上】

---

模版引擎

• handlebars.js
• template.js

這裏的模版引擎僅僅是爲了"不拼字符串"。具體的操做也沒什麼好說的。

附: handlebars文檔

---

NodeJS

主要是用了Node的一些插件。
大概瞭解Node建站的流程。（看了大漠老師的視頻教程）

附: NodeJS菜鳥教程 | Node建站視頻教程

Gulp

和grunt和Fis同樣，是自動化構建工具，實現前端項目工程化就須要它了。
我用到的它的功能有下面幾個：

• Livereload
• 編譯Less/Sass
• 合併/壓縮樣式
• 混淆JS
• 壓縮圖片/拼接圖片
• 打包文件

---

如下幾個接觸過，知道怎麼用，可是沒有深刻的去了解和實踐。

Bower

開發包管理工具。

Jade

模版引擎，Node建站時經過請求數據來渲染頁面。

Express

web應用開發框架(在windows下面會有一些奇奇怪怪的問題，建議用linux)

MongoDB

非關係型數據庫