1. 程式人生 > >web前端進階之路

web前端進階之路

一、開發工具

1. atom

Atom 程式碼編輯器支援 Windows、Mac、Linux 三大桌面平臺,完全免費,並且已經在 GitHub 上開放了全部的原始碼。在經過一段長時間的迭代開發和不斷改進後,Atom 終於從早期的測試版達到了 1.0 正式版了!相比之前的版本,在效能和穩定性方面都有著顯著的改善。

2. idea

IDEA 全稱IntelliJ IDEA,是java語言開發的整合環境,IntelliJ在業界被公認為最好的java開發工具之一,尤其在智慧程式碼助手、程式碼自動提示、重構、J2EE支援、Ant、JUnit、CVS整合、程式碼審查、 創新的GUI設計等方面的功能可以說是超常的。IDEA是JetBrains公司的產品,這家公司總部位於捷克共和國的首都布拉格,開發人員以嚴謹著稱的東歐程式設計師為主。

3. webpack

webpack是近期最火的一款模組載入器兼打包工具,它能把各種資源,例如JS(含JSX)、coffee、樣式(含less/sass)、圖片等都作為模組來使用和處理。

4. gulp

Gulp.js 是一個自動化構建工具,開發者可以使用它在專案開發過程中自動執行常見任務。Gulp.js 是基於 Node.js 構建的,利用 Node.js 流的威力,你可以快速構建專案...

5. lodash

lodash一開始是Underscore.js庫的一個fork,因為和其他(Underscore.js的)貢獻者意見相左。John-David Dalton的最初目標,是提供更多“一致的跨瀏覽器行為……,並改善效能”。之後,該專案在現有成功的基礎之上取得了更大的成果。最近lodash也釋出了3.5版,成為了npm包倉庫中依賴最多的庫。它正在擺脫屌絲身份,成為開發者的常規的選擇之一。

6. fetch

對於 AJAX,現在一般都是使用各種框架實現,其本質是 XMLHttpRequest。使用過原生XMLHttpRequest的人都知道,這種方法實現起來不太方便。現在,我們有了新的選擇:Fetch API。

7. Electron

Electron 框架的前身是 Atom Shell,可以讓你寫使用 JavaScript,HTML 和 CSS 構建跨平臺的桌面應用程式。它是基於io.js 和 Chromium 開源專案,並用於在 Atom 編輯器中。Electron 是開源的,由 GitHub 維護,有一個活躍的社群。最重要的是,Electron 應用服務構建和執行在 Mac,Windows 和 Linux。

二、javascript框架

1. angular2

跨平臺開發

學習如何基於 Angular 構建應用程式,並複用程式碼和技能來構建適用於所有平臺的應用。比如: Web 應用、移動 Web 應用、原生移動應用和原生桌面應用等。

速度與效能

通過 Web Worker 和服務端渲染,達到在如今 ( 以及未來)的 Web 平臺上所能達到的最高速度。Angular 讓你有效掌控可伸縮性。基於 RxJS 、 Immutable.js 和其它推送模型,能適應海量資料需求。

美妙的工具

使用簡單的宣告式模板,快速實現各種特性。使用自定義元件和大量現有元件,擴充套件模板語言。在幾乎所有的 IDE 中獲得針對 Angular 的即時幫助和反饋。所有這一切,都是為了幫助你編寫漂亮的應用,而不是絞盡腦汁的讓程式碼“能用”。

2. react+redux

React+Redux非常精煉,良好運用將發揮出極強勁的生產力。但最大的挑戰來自於函數語言程式設計(FP)正規化。在工程化過程中,架構(頂層)設計將是一個巨大的挑戰。要不然做出來的東西可能是一團亂麻。說到底,傳統框架與react+redux就是OO與FP程式設計正規化的對決。

3. jquery

JQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫 ,它相容CSS3,還相容各種瀏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及後續版本將不再支援IE6/7/8瀏覽器。

4. antd

Ant Design 是螞蟻金服開發和正在使用的一套企業級的前端設計語言和基於 React 的前端框架實現。企業級金融產品的互動語言和視覺體系。豐富實用的 React UI 元件。基於 React 的元件化開發模式。背靠 npm 生態圈。基於 webpack 的除錯構建方案,支援 ES6。

三、node相關技術

1. npm

NPM(node package manager),通常稱為node包管理器。顧名思義,它的主要功能就是管理node包,包括:安裝、解除安裝、更新、檢視、搜尋、釋出等。

2. express

Express 是一個基於 Node.js 平臺的極簡、靈活的 web 應用開發框架,它提供一系列強大的特性,幫助你建立各種 Web 和移動裝置應用。

3. koa2

koa 是由 Express 原班人馬打造的,致力於成為一個更小、更富有表現力、更健壯的 Web 框架。使用 koa 編寫 web 應用,通過組合不同的 generator,可以免除重複繁瑣的回撥函式巢狀,並極大地提升錯誤處理的效率。koa 不在核心方法中繫結任何中介軟體,它僅僅提供了一個輕量優雅的函式庫,使得編寫 Web 應用變得得心應手。

4. rxjs

是一組庫使用可觀察到的集合和陣列、演員風格組成,組成非同步和基於事件的程式。

5. zonejs

在ng2的開發過程中,Angular團隊為我們帶來了一個新的庫 – zone.js。zone.js的設計靈感來源於Dart語言,它描述JavaScript執行過程的上下文,可以在非同步任務之間進行永續性傳遞,它類似於Java中的TLS(thread-local storage: 執行緒本地儲存)技術,zone.js則是將TLS引入到JavaScript語言中的實現框架。

四、設計模式

五、程式語言

1. javascript

JavaScript一種直譯式指令碼語言,是一種動態型別、弱型別、基於原型的語言,內建支援型別。它的直譯器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的指令碼語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能。

2. ecmscript6

ES6是繼ES5之後的一次主要改進,語言規範由ES5.1時代的245頁擴充至600頁。ES6增添了許多必要的特性,例如:模組和類,以及一些實用特性,例如Maps、Sets、Promises、生成器(Generators)等。儘管ES6做了大量的更新,但是它依舊完全向後相容以前的版本,標準化委員會決定避免由不相容版本語言導致的“web體驗破碎”。結果是,所有老程式碼都可以正常執行,整個過渡也顯得更為平滑,但隨之而來的問題是,開發者們抱怨了多年的老問題依然存在。

3. typesript

typescript是JavaScript的超集。TypeScript是JavaScript型別的超集,它可以編譯成純JavaScript。TypeScript可以在任何瀏覽器、任何計算機和任何作業系統上執行,並且是開源的。

六、資料儲存

1. mysql

MySQL是一個關係型資料庫管理系統,由瑞典MySQL AB 公司開發,目前屬於 Oracle 旗下公司。MySQL 最流行的關係型資料庫管理系統,在 WEB 應用方面MySQL是最好的 RDBMS (Relational Database Management System,關係資料庫管理系統) 應用軟體之一。

2. mongodb

MongoDB 是一個基於分散式檔案儲存的資料庫。由 C++ 語言編寫。旨在為 WEB 應用提供可擴充套件的高效能資料儲存解決方案。MongoDB 是一個介於關係資料庫和非關係資料庫之間的產品,是非關係資料庫當中功能最豐富,最像關係資料庫的。

3. redis

Redis是一個開源的使用ANSI C語言編寫、支援網路、可基於記憶體亦可持久化的日誌型、Key-Value資料庫,並提供多種語言的API。

4. cookie

Cookie,有時也用其複數形式Cookies,指某些網站為了辨別使用者身份、進行session跟蹤而儲存在使用者本地終端上的資料(通常經過加密)

5. access token

Windows作業系統安全性的一個概念。一個訪問令牌包含了此登陸會話的安全資訊。當用戶登陸時,系統建立一個訪問令牌,然後以該使用者身份執行的的所有程序都擁有該令牌的一個拷貝。該令牌唯一表示該使用者、使用者的組和使用者的特權。系統使用令牌控制使用者可以訪問哪些安全物件,並控制使用者執行相關係統操作的能力。有兩種令牌:主令牌和模擬的令牌。主令牌是與程序相關的;模擬的令牌是與模擬令牌的執行緒相關的。

七、html5+css3

1. html5

HTML5是HTML最新的修訂版本,2014年10月由全球資訊網聯盟(W3C)完成標準制定。
HTML5的設計目的是為了在移動裝置上支援多媒體。
HTML5 簡單易學。

2. ejs

EJS是一個JavaScript模板庫,用來從JSON資料中生成HTML字串。引入EJS 建立一個模板 使用檢視工具元件 與最初的JavaScript相比較,一些不太瞭解你的程式碼的人可以更容易地通過EJS模板程式碼看得懂你的程式碼。 讓我們放鬆一下,一起來享受下令人激動的乾淨簡潔的感覺。

3. canvas

TML5 <canvas> 標籤用於繪製圖像(通過指令碼,通常是 JavaScript)。不過,<canvas> 元素本身並沒有繪製能力(它僅僅是圖形的容器) - 您必須使用指令碼來完成實際的繪圖任務。getContext() 方法可返回一個物件,該物件提供了用於在畫布上繪圖的方法和屬性。

4. css3

CSS3是CSS技術的一個升級版本,是由Adobe、Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun Microsystems 等許多WEB界的巨頭聯合組織的一個名為 “CSS Working Group” 的組織共同協商策劃的。雖然目前很多細節還在討論之中,但它還是不斷地朝前發展著。2010年在HTML5成為IT界人士關注的焦點的同時,它也開始慢慢地普及開來。

5. sass

SASS是一種CSS的開發工具,提供了許多便利的寫法,大大節省了設計者的時間,使得CSS的開發,變得簡單和可維護。

6. postcss

PostCSS 是使用 JS 外掛來轉換 CSS 的工具,支援變數,混入,未來 CSS 語法,內聯影象等等。PostCSS 已經被許多大公司使用:谷歌,推特,阿里巴巴和 Shopify。 Autoprefixer PostCSS 外掛是最流行的 CSS 處理器外掛之一。

7. 白鷺引擎

白鷺引擎是一個開源的、跨平臺的手機遊戲開發引擎,你可以快速地建立HTML5型別的移動遊戲,也可以將遊戲專案編譯輸出成為目標移動平臺的原生遊戲應用。

八、演算法和資料結構

1. 線型查詢

在一列給定的值中進行搜尋,從一端開始逐一檢查每個元素,直到找到所需元素的過程。線性查詢又稱為順序查詢·如果查詢池是某種型別的一個表,比如一個數組,簡單的查詢方法是從表頭開始,一次將每一個值與目標元素進行比較,最後,或者查詢到目標,或者達到表尾,而目標不存在於組中,這個方法稱為線性查詢。

2. 二分查詢

二分查詢又稱折半查詢,優點是比較次數少,查詢速度快,平均效能好;其缺點是要求待查表為有序表,且插入刪除困難。因此,折半查詢方法適用於不經常變動而查詢頻繁的有序列表。首先,假設表中元素是按升序排列,將表中間位置記錄的關鍵字與查詢關鍵字比較,如果兩者相等,則查詢成功;否則利用中間位置記錄將表分成前、後兩個子表,如果中間位置記錄的關鍵字大於查詢關鍵字,則進一步查詢前一子表,否則進一步查詢後一子表。重複以上過程,直到找到滿足條件的記錄,使查詢成功,或直到子表不存在為止,此時查詢不成功。

3. 氣泡排序

氣泡排序(Bubble Sort),是一種電腦科學領域的較簡單的排序演算法。它重複地走訪過要排序的數列,一次比較兩個元素,如果他們的順序錯誤就把他們交換過來。走訪數列的工作是重複地進行直到沒有再需要交換,也就是說該數列已經排序完成。

4. 選擇排序

選擇排序(Selection sort)是一種簡單直觀的排序演算法。它的工作原理是每一次從待排序的資料元素中選出最小(或最大)的一個元素,存放在序列的起始位置,直到全部待排序的資料元素排完。 選擇排序是不穩定的排序方法(比如序列[5, 5, 3]第一次就將第一個[5]與[3]交換,導致第一個5挪動到第二個5後面)。

5. 插入排序

插入排序的基本思想是:每步將一個待排序的紀錄,按其關鍵碼值的大小插入前面已經排序的檔案中適當位置上,直到全部插入完為止。

6. 字串反轉

var str = '123';
var newStr = str.split("").reverse().join("");
alert(newStr);

7. 搜尋演算法

搜尋演算法是利用計算機的高效能來有目的的窮舉一個問題解空間的部分或所有的可能情況,從而求出問題的解的一種方法。搜尋演算法實際上是根據初始條件和擴充套件規則構造一棵“解答樹”並尋找符合目標狀態的節點的過程。

8. 貪心演算法

貪心演算法(又稱貪婪演算法)是指,在對問題求解時,總是做出在當前看來是最好的選擇。也就是說,不從整體最優上加以考慮,他所做出的是在某種意義上的區域性最優解。貪心演算法不是對所有問題都能得到整體最優解,關鍵是貪心策略的選擇,選擇的貪心策略必須具備無後效性,即某個狀態以前的過程不會影響以後的狀態,只與當前狀態有關。

9. tween演算法

Flash做動畫時會用到Tween類,利用它可以做很多動畫效果,例如緩動、彈簧等等。

10. javascript演算法庫

九、測試框架

1. mocha

mocha 是一個簡單、靈活有趣的 JavaScript 測試框架,用於 Node.js 和瀏覽器上的 JavaScript 應用測試。Mocha 是具有豐富特性的 JavaScript 測試框架,可以執行在 Node.js 和瀏覽器中,使得非同步測試更簡單更有趣。Mocha 可以持續執行測試,支援靈活又準確的報告,當對映到未捕獲異常時轉到正確的測試示例。

2. karma

Karma是Testacular的新名字,在2012年google開源了Testacular,2013年Testacular改名為Karma。Karma是一個讓人感到非常神祕的名字,表示佛教中的緣分,因果報應,比Cassandra這種名字更讓人猜不透!Karma是一個基於Node.js的JavaScript測試執行過程管理工具(Test Runner)。該工具可用於測試所有主流Web瀏覽器,也可整合到CI(Continuous integration)工具,也可和其他程式碼編輯器一起使用。這個測試工具的一個強大特性就是,它可以監控(Watch)檔案的變化,然後自行執行,通過console.log顯示測試結果。

3. jasmine

Jasmine (茉莉)是一款 JavaScript BDD(行為驅動開發)測試框架,它不依賴於其他任何 JavaScript 元件。它有乾淨清晰的語法,讓您可以很簡單的寫出測試程式碼。對基於 JavaScript 的開發來說,它是一款不錯的測試框架選擇。

4. chai

Chai 是一個針對 Node.js 和瀏覽器的行為驅動測試和測試驅動測試的診斷庫,可與任何 JavaScript 測試框架整合。

5.Qunit

該框架誕生之初是為了jquery的單元測試,後來獨立出來不再依賴於jquery本身,但是其身上還是脫離不開jquery的影子

6. should.js:

TJ的另外一個開源貢獻

7. expect.js

BDD風格的另外一個斷言庫,基於should.js,是mini版的BDD庫

8. assert

node自帶核心模組: 可以在node中使用的斷言模組

十、重構

1. 命名

模組劃分和名稱空間

2. 載入

js的動態載入

3. 測試

Javascript的測試

4. 編碼

Javascript編碼規則


5. 閉包

利用原型/閉包開發元件

6. 繼承

利用繼承來做事

7. 重用

重用老程式碼

8. 檢測

JSDoc和JSLint

9. 框架

自定義JavaScript產品框架

10. 強化

強化物件封裝和模組封裝