web前端进阶之路
大家好,我是輕風乍起,本人從事前端8年了,總結了很多學習資料,有時間我會普及一些入門和提升建議,思想提升了,路線明確了自然就好了,于是就整理了一些學習筆記,供大家學習,干貨福利內容 在文末↓
一、開發工具
Atom 代碼編輯器支持 Windows、Mac、Linux 三大桌面平臺,完全免費,并且已經在 GitHub 上開放了全部的源代碼。在經過一段長時間的迭代開發和不斷改進后,Atom 終于從早期的測試版達到了 1.0 正式版了!相比之前的版本,在性能和穩定性方面都有著顯著的改善。
IDEA 全稱IntelliJ IDEA,是java語言開發的集成環境,IntelliJ在業界被公認為最好的java開發工具之一,尤其在智能代碼助手、代碼自動提示、重構、J2EE支持、Ant、JUnit、CVS整合、代碼審查、 創新的GUI設計等方面的功能可以說是超常的。IDEA是JetBrains公司的產品,這家公司總部位于捷克共和國的首都布拉格,開發人員以嚴謹著稱的東歐程序員為主。
webpack是近期最火的一款模塊加載器兼打包工具,它能把各種資源,例如JS(含JSX)、coffee、樣式(含less/sass)、圖片等都作為模塊來使用和處理。
Gulp.js 是一個自動化構建工具,開發者可以使用它在項目開發過程中自動執行常見任務。Gulp.js 是基于 Node.js 構建的,利用 Node.js 流的威力,你可以快速構建項目…
lodash一開始是Underscore.js庫的一個fork,因為和其他(Underscore.js的)貢獻者意見相左。John-David Dalton的最初目標,是提供更多“一致的跨瀏覽器行為……,并改善性能”。之后,該項目在現有成功的基礎之上取得了更大的成果。最近lodash也發布了3.5版,成為了npm包倉庫中依賴最多的庫。它正在擺脫屌絲身份,成為開發者的常規的選擇之一。
對于 AJAX,現在一般都是使用各種框架實現,其本質是 XMLHttpRequest。使用過原生XMLHttpRequest的人都知道,這種方法實現起來不太方便?,F在,我們有了新的選擇:Fetch API。
Electron 框架的前身是 Atom Shell,可以讓你寫使用 JavaScript,HTML 和 CSS 構建跨平臺的桌面應用程序。它是基于io.js 和 Chromium 開源項目,并用于在 Atom 編輯器中。Electron 是開源的,由 GitHub 維護,有一個活躍的社區。最重要的是,Electron 應用服務構建和運行在 Mac,Windows 和 Linux。
二、javascript框架
跨平臺開發
學習如何基于 Angular 構建應用程序,并復用代碼和技能來構建適用于所有平臺的應用。比如: Web 應用、移動 Web 應用、原生移動應用和原生桌面應用等。
速度與性能
通過 Web Worker 和服務端渲染,達到在如今 ( 以及未來)的 Web 平臺上所能達到的最高速度。Angular 讓你有效掌控可伸縮性?;?RxJS 、 Immutable.js 和其它推送模型,能適應海量數據需求。
美妙的工具
使用簡單的聲明式模板,快速實現各種特性。使用自定義組件和大量現有組件,擴展模板語言。在幾乎所有的 IDE 中獲得針對 Angular 的即時幫助和反饋。所有這一切,都是為了幫助你編寫漂亮的應用,而不是絞盡腦汁的讓代碼“能用”。
React+Redux非常精煉,良好運用將發揮出極強勁的生產力。但最大的挑戰來自于函數式編程(FP)范式。在工程化過程中,架構(頂層)設計將是一個巨大的挑戰。要不然做出來的東西可能是一團亂麻。說到底,傳統框架與react+redux就是OO與FP編程范式的對決。
JQuery是繼prototype之后又一個優秀的Javascript庫。它是輕量級的js庫 ,它兼容CSS3,還兼容各種瀏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后續版本將不再支持IE6/7/8瀏覽器。
Ant Design 是螞蟻金服開發和正在使用的一套企業級的前端設計語言和基于 React 的前端框架實現。企業級金融產品的交互語言和視覺體系。豐富實用的 React UI 組件?;?React 的組件化開發模式。背靠 npm 生態圈?;?webpack 的調試構建方案,支持 ES6。
三、node相關技術
npm
NPM(node package manager),通常稱為node包管理器。顧名思義,它的主要功能就是管理node包,包括:安裝、卸載、更新、查看、搜索、發布等。
express
Express 是一個基于 Node.js 平臺的極簡、靈活的 web 應用開發框架,它提供一系列強大的特性,幫助你創建各種 Web 和移動設備應用。
koa2
koa 是由 Express 原班人馬打造的,致力于成為一個更小、更富有表現力、更健壯的 Web 框架。使用 koa 編寫 web 應用,通過組合不同的 generator,可以免除重復繁瑣的回調函數嵌套,并極大地提升錯誤處理的效率。koa 不在內核方法中綁定任何中間件,它僅僅提供了一個輕量優雅的函數庫,使得編寫 Web 應用變得得心應手。
rxjs
是一組庫使用可觀察到的集合和陣列、演員風格組成,組成異步和基于事件的程序。
zonejs
在ng2的開發過程中,Angular團隊為我們帶來了一個新的庫 – zone.js。zone.js的設計靈感來源于Dart語言,它描述JavaScript執行過程的上下文,可以在異步任務之間進行持久性傳遞,它類似于Java中的TLS(thread-local storage: 線程本地存儲)技術,zone.js則是將TLS引入到JavaScript語言中的實現框架。
四、設計模式
javascript設計模式
五、編程語言
javascript
JavaScript一種直譯式腳本語言,是一種動態類型、弱類型、基于原型的語言,內置支持類型。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用于客戶端的腳本語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能。
ecmscript6
ES6是繼ES5之后的一次主要改進,語言規范由ES5.1時代的245頁擴充至600頁。ES6增添了許多必要的特性,例如:模塊和類,以及一些實用特性,例如Maps、Sets、Promises、生成器(Generators)等。盡管ES6做了大量的更新,但是它依舊完全向后兼容以前的版本,標準化委員會決定避免由不兼容版本語言導致的“web體驗破碎”。結果是,所有老代碼都可以正常運行,整個過渡也顯得更為平滑,但隨之而來的問題是,開發者們抱怨了多年的老問題依然存在。
typesript
typescript是JavaScript的超集。TypeScript是JavaScript類型的超集,它可以編譯成純JavaScript。TypeScript可以在任何瀏覽器、任何計算機和任何操作系統上運行,并且是開源的。
六、數據存儲
mysql
MySQL是一個關系型數據庫管理系統,由瑞典MySQL AB 公司開發,目前屬于 Oracle 旗下公司。MySQL 最流行的關系型數據庫管理系統,在 WEB 應用方面MySQL是最好的 RDBMS (Relational Database Management System,關系數據庫管理系統) 應用軟件之一。
mongodb
MongoDB 是一個基于分布式文件存儲的數據庫。由 C++ 語言編寫。旨在為 WEB 應用提供可擴展的高性能數據存儲解決方案。MongoDB 是一個介于關系數據庫和非關系數據庫之間的產品,是非關系數據庫當中功能最豐富,最像關系數據庫的。
redis
Redis是一個開源的使用ANSI C語言編寫、支持網絡、可基于內存亦可持久化的日志型、Key-Value數據庫,并提供多種語言的API。
cookie
Cookie,有時也用其復數形式Cookies,指某些網站為了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端上的數據(通常經過加密)
access token
Windows操作系統安全性的一個概念。一個訪問令牌包含了此登陸會話的安全信息。當用戶登陸時,系統創建一個訪問令牌,然后以該用戶身份運行的的所有進程都擁有該令牌的一個拷貝。該令牌唯一表示該用戶、用戶的組和用戶的特權。系統使用令牌控制用戶可以訪問哪些安全對象,并控制用戶執行相關系統操作的能力。有兩種令牌:主令牌和模擬的令牌。主令牌是與進程相關的;模擬的令牌是與模擬令牌的線程相關的。
七、html5+css3
html5
HTML5是HTML最新的修訂版本,2014年10月由萬維網聯盟(W3C)完成標準制定。
HTML5的設計目的是為了在移動設備上支持多媒體。
HTML5 簡單易學。
ejs
EJS是一個JavaScript模板庫,用來從JSON數據中生成HTML字符串。引入EJS 創建一個模板 使用視圖工具組件 與最初的JavaScript相比較,一些不太了解你的代碼的人可以更容易地通過EJS模板代碼看得懂你的代碼。 讓我們放松一下,一起來享受下令人激動的干凈簡潔的感覺。
canvas
TML5 標簽用于繪制圖像(通過腳本,通常是 JavaScript)。不過, 元素本身并沒有繪制能力(它僅僅是圖形的容器) - 您必須使用腳本來完成實際的繪圖任務。getContext() 方法可返回一個對象,該對象提供了用于在畫布上繪圖的方法和屬性。
css3
CSS3是CSS技術的一個升級版本,是由Adobe、Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun Microsystems 等許多WEB界的巨頭聯合組織的一個名為 “CSS Working Group” 的組織共同協商策劃的。雖然目前很多細節還在討論之中,但它還是不斷地朝前發展著。2010年在HTML5成為IT界人士關注的焦點的同時,它也開始慢慢地普及開來。
sass
SASS是一種CSS的開發工具,提供了許多便利的寫法,大大節省了設計者的時間,使得CSS的開發,變得簡單和可維護。
postcss
PostCSS 是使用 JS 插件來轉換 CSS 的工具,支持變量,混入,未來 CSS 語法,內聯圖像等等。PostCSS 已經被許多大公司使用:谷歌,推特,阿里巴巴和 Shopify。 Autoprefixer PostCSS 插件是最流行的 CSS 處理器插件之一。
白鷺引擎
白鷺引擎是一個開源的、跨平臺的手機游戲開發引擎,你可以快速地創建HTML5類型的移動游戲,也可以將游戲項目編譯輸出成為目標移動平臺的原生游戲應用。
八、算法和數據結構
線型查找
在一列給定的值中進行搜索,從一端開始逐一檢查每個元素,直到找到所需元素的過程。線性查找又稱為順序查找·如果查找池是某種類型的一個表,比如一個數組,簡單的查找方法是從表頭開始,一次將每一個值與目標元素進行比較,最后,或者查找到目標,或者達到表尾,而目標不存在于組中,這個方法稱為線性查找。
二分查找
二分查找又稱折半查找,優點是比較次數少,查找速度快,平均性能好;其缺點是要求待查表為有序表,且插入刪除困難。因此,折半查找方法適用于不經常變動而查找頻繁的有序列表。首先,假設表中元素是按升序排列,將表中間位置記錄的關鍵字與查找關鍵字比較,如果兩者相等,則查找成功;否則利用中間位置記錄將表分成前、后兩個子表,如果中間位置記錄的關鍵字大于查找關鍵字,則進一步查找前一子表,否則進一步查找后一子表。重復以上過程,直到找到滿足條件的記錄,使查找成功,或直到子表不存在為止,此時查找不成功。
冒泡排序
冒泡排序(Bubble Sort),是一種計算機科學領域的較簡單的排序算法。它重復地走訪過要排序的數列,一次比較兩個元素,如果他們的順序錯誤就把他們交換過來。走訪數列的工作是重復地進行直到沒有再需要交換,也就是說該數列已經排序完成。
選擇排序
選擇排序(Selection sort)是一種簡單直觀的排序算法。它的工作原理是每一次從待排序的數據元素中選出最小(或最大)的一個元素,存放在序列的起始位置,直到全部待排序的數據元素排完。 選擇排序是不穩定的排序方法(比如序列[5, 5, 3]第一次就將第一個[5]與[3]交換,導致第一個5挪動到第二個5后面)。
插入排序
插入排序的基本思想是:每步將一個待排序的紀錄,按其關鍵碼值的大小插入前面已經排序的文件中適當位置上,直到全部插入完為止。
字符串反轉
.
var str = ‘123’;
.
.
var newStr = str.split("").reverse().join("");
.
.
alert(newStr);
.
搜索算法
搜索算法是利用計算機的高性能來有目的的窮舉一個問題解空間的部分或所有的可能情況,從而求出問題的解的一種方法。搜索算法實際上是根據初始條件和擴展規則構造一棵“解答樹”并尋找符合目標狀態的節點的過程。
貪心算法
貪心算法(又稱貪婪算法)是指,在對問題求解時,總是做出在當前看來是最好的選擇。也就是說,不從整體最優上加以考慮,他所做出的是在某種意義上的局部最優解。貪心算法不是對所有問題都能得到整體最優解,關鍵是貪心策略的選擇,選擇的貪心策略必須具備無后效性,即某個狀態以前的過程不會影響以后的狀態,只與當前狀態有關。
tween算法
Flash做動畫時會用到Tween類,利用它可以做很多動畫效果,例如緩動、彈簧等等。
javascript算法庫
?
numbers.js
?
?
Numeric Javascript
?
?
Tangle
?
?
accounting.js
?
九、測試框架
mocha
mocha 是一個簡單、靈活有趣的 JavaScript 測試框架,用于 Node.js 和瀏覽器上的 JavaScript 應用測試。Mocha 是具有豐富特性的 JavaScript 測試框架,可以運行在 Node.js 和瀏覽器中,使得異步測試更簡單更有趣。Mocha 可以持續運行測試,支持靈活又準確的報告,當映射到未捕獲異常時轉到正確的測試示例。
karma
Karma是Testacular的新名字,在2012年google開源了Testacular,2013年Testacular改名為Karma。Karma是一個讓人感到非常神秘的名字,表示佛教中的緣分,因果報應,比Cassandra這種名字更讓人猜不透!Karma是一個基于Node.js的JavaScript測試執行過程管理工具(Test Runner)。該工具可用于測試所有主流Web瀏覽器,也可集成到CI(Continuous integration)工具,也可和其他代碼編輯器一起使用。這個測試工具的一個強大特性就是,它可以監控(Watch)文件的變化,然后自行執行,通過console.log顯示測試結果。
jasmine
Jasmine (茉莉)是一款 JavaScript BDD(行為驅動開發)測試框架,它不依賴于其他任何 JavaScript 組件。它有干凈清晰的語法,讓您可以很簡單的寫出測試代碼。對基于 JavaScript 的開發來說,它是一款不錯的測試框架選擇。
chai
Chai 是一個針對 Node.js 和瀏覽器的行為驅動測試和測試驅動測試的診斷庫,可與任何 JavaScript 測試框架集成。
5.Qunit
該框架誕生之初是為了jquery的單元測試,后來獨立出來不再依賴于jquery本身,但是其身上還是脫離不開jquery的影子
should.js:
TJ的另外一個開源貢獻
expect.js
BDD風格的另外一個斷言庫,基于should.js,是mini版的BDD庫
assert
node自帶核心模塊: 可以在node中使用的斷言模塊
十、重構
命名
模塊劃分和命名空間
加載
js的動態加載
測試
Javascript的測試
編碼
Javascript編碼規則
閉包
利用原型/閉包開發組件
繼承
利用繼承來做事
重用
重用老代碼
檢測
JSDoc和JSLint
框架
自定義JavaScript產品框架
強化
強化對象封裝和模塊封裝
更多精彩請關注愛創課堂前端,需要資料的可以加我qq3252897743領取
總結
- 上一篇: [翻译] BFKit
- 下一篇: web前端网页界面/css 仿微软官网界