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