国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

roadtogeek / 2949人閱讀

摘要：一般來說，聲明式編程關(guān)注于發(fā)生了啥，而命令式則同時(shí)關(guān)注與咋發(fā)生的。聲明式編程可以較好地解決這個(gè)問題，剛才提到的比較麻煩的元素選擇這個(gè)動(dòng)作可以交托給框架或者庫區(qū)處理，這樣就能讓開發(fā)者專注于發(fā)生了啥，這里推薦一波與。

本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。

繼續(xù)譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在上半篇中介紹了HTML與CSS的基礎(chǔ)知識(shí)，在這里就主要介紹JavaScript與各種各樣的前端框架。再安利一波筆者的我的前端之路


筆者一直覺得不斷變革的前端永遠(yuǎn)充滿活力與激情，但是，哪有那么多激情燃燒的歲月，很多時(shí)候會(huì)有一種深深的無力感。B狗的才學(xué)會(huì)某個(gè)東西發(fā)現(xiàn)又被拋棄了，就好像筆者才決定大規(guī)模使用React+Redux+Webpack，就看到了這個(gè)from-a-react-point-of-vue-comparing...。實(shí)際上，就包括React本身已經(jīng)OverWhelming，對(duì)于初學(xué)者很不友好。并且各種各樣的最佳實(shí)踐、Boilerplate在某些意義上會(huì)反而提高學(xué)習(xí)門檻與曲線，對(duì)于這方面的討論筆者推薦幾個(gè)瞅瞅，當(dāng)然，筆者本身也在思考，打腹稿中：



javascript-fatigue


state-of-the-union-js

我做到我已知的最好的，讓最佳實(shí)踐留給未來的我吧

以下是正文部分。

JavaScript Basics

作為目前最流行的跨平臺(tái)語言之一，JavaScript幾乎出現(xiàn)在了所有的地方，但是千里之行始于足下，我們還是要先來理解JavaScript的一些基礎(chǔ)知識(shí)。

Language

在學(xué)習(xí)怎么將JavaScript應(yīng)用到Web開發(fā)之前，我們還是要看下JavaScript的基本語法。推薦閱讀Mozilla Developer Network的 Language basics crash course。本教程會(huì)導(dǎo)引學(xué)習(xí)譬如基本的變量、流程控制與函數(shù)等等語言基礎(chǔ)部分。

讀完了這個(gè)，你就可以讀MDN的 JavaScript guide中的剩余部分：

語法與類型

流程控制與異常處理

循環(huán)與迭代

函數(shù)

JavaScript Introduction,可以參考里面的Reference部分，有很多推薦的閱讀參考

同樣的，不要死記硬背，你可以在你記不住的時(shí)候多看看，當(dāng)然，最好的是能形成你自己的閱讀筆記或者知識(shí)體系框架，譬如這個(gè)。你應(yīng)當(dāng)專注于理解變量初始化、循環(huán)以及函數(shù)等等關(guān)鍵的知識(shí)點(diǎn)，譬如for-in、forEach、for-of的區(qū)別，this的N種綁定方法等。如果你實(shí)在覺得這貨太單調(diào)了，那也能直接跳過，以后發(fā)現(xiàn)啥東西不理解的時(shí)候再滾回來瞅一眼。在實(shí)踐中學(xué)習(xí)可能能讓你理解地更好。

讀書讀累了，那可以看看視頻換個(gè)腦子，這個(gè)Codecademy提供的 JavaScript系列教程 不錯(cuò)，可以隨手看也很有意思。另一個(gè)，如果你還有時(shí)間，可以看看 Eloquent JavaScript 中的相關(guān)章節(jié)來加深你的記憶。 Eloquent JavaScript 是個(gè)非常優(yōu)秀的在線的免費(fèi)的JavaScript學(xué)習(xí)工具書。

Interactivity

到這一步你應(yīng)該已經(jīng)對(duì)JavaScript這門語言本身的基礎(chǔ)知識(shí)有了了解，那么下一步就是學(xué)會(huì)如何應(yīng)用到Web項(xiàng)目開發(fā)中。你首先需要來瞅幾眼文檔對(duì)象模型 (DOM)來理解JavaScript是如何完成與網(wǎng)頁的交互的。文檔對(duì)象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對(duì)文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪問，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容。DOM 將文檔解析為一個(gè)由節(jié)點(diǎn)和對(duì)象（包含屬性和方法的對(duì)象）組成的結(jié)構(gòu)集合。簡(jiǎn)言之，它會(huì)將web頁面和腳本或程序語言連接起來。如果要做進(jìn)一步了解的話推薦閱讀CSSTricks出品的What is the DOM，它也提供了簡(jiǎn)單而直接的對(duì)于DOM的介紹。

好像剛才那段對(duì)DOM的介紹有點(diǎn)照本宣科，CSS Tricks里是這么說的，關(guān)于DOM與HTML的區(qū)別。可能你在HTML代碼中寫了個(gè)
元素，但是忘了寫，沒關(guān)系，瀏覽器會(huì)自動(dòng)幫你插入到DOM中，你可以利用JavaScript來控制該節(jié)點(diǎn)并且賦予樣式，盡管它從未出現(xiàn)在你的HTML中。
這里提供了一個(gè)簡(jiǎn)單的例子，通過JavaScript是如何改變某個(gè)DOM元素里的內(nèi)容來展示基本的JavaScript與DOM樹的交互，首先需要選擇到對(duì)應(yīng)DOM節(jié)點(diǎn)
var container = document.getElementById(“container”); 
然后使用該DOM節(jié)點(diǎn)的屬性來改變其內(nèi)容
container.innerHTML = "New Content!";
這只是一個(gè)簡(jiǎn)單的例子，你還可以用JavaScript DOM API干更多的事情，你可以閱讀以下的MDN的教程來進(jìn)行了解, The Document Object Model.
Events
使用DOM進(jìn)行Web與XML開發(fā)示例
怎么創(chuàng)建一個(gè)DOM樹
DOM介紹
利用選擇器來定位DOM節(jié)點(diǎn)
老生常談了，不能舍本逐末，還是要專注于理解概念而不是簡(jiǎn)單地表達(dá)式使用，要在心中默問自己幾個(gè)問題：
DOM是什么鬼?
怎么查詢?cè)?
怎么進(jìn)行事件監(jiān)聽?
怎么改變DOM節(jié)點(diǎn)的屬性?
對(duì)于常見的JavaScript與DOM之間的交互, 可以參考PlainJS出品的 JavaScript Functions and Helpers 。這個(gè)站點(diǎn)會(huì)給你提供很多的例子，譬如 如何操作DOM元素樣式 或者 怎么添加鍵盤事件響應(yīng)等等。如果你希望再深入一點(diǎn)，同樣推薦Eloquent JavaScript中的DOM介紹的章節(jié)。
Inspector
在瀏覽器中，我們可以用開發(fā)者工具來調(diào)試客戶端運(yùn)行的JavaScript代碼，譬如Firefox的Firebug和Chrome的開發(fā)者工具，可以幫你審視網(wǎng)頁源代碼，追蹤JavaScript的執(zhí)行過程和結(jié)果，打印出調(diào)試語句，還能瞅瞅譬如網(wǎng)絡(luò)請(qǐng)求、Cookie等等資源。這個(gè) tutorial 是關(guān)于如何使用Chrome的開發(fā)者工具，如果你是火狐的話，瞅瞅這個(gè) tutorial。
Practicing the basics
上面聊完了基礎(chǔ)的語法和交互操作，但是對(duì)于不知道有多少個(gè)坑的JS而言不過滄海一粟，不過我把一些新的東西放到了最后一節(jié)介紹，這邊先放松放松，做點(diǎn)小實(shí)驗(yàn)玩玩。
Experiment 1
實(shí)驗(yàn)1里讓我們把目光投向 AirBnB, 打開你瀏覽器的 page inspector, 然后點(diǎn)擊 console tab。這樣你就可以在頁面上執(zhí)行一些JavaScript腳本了，你可以嘗試著控制一些界面元素，改個(gè)字體樣式啥的。
我選用airbnb的網(wǎng)站作為介紹是因?yàn)樗腃SS類命名比較直接，并且沒有被編譯器混淆過，當(dāng)然，你也可以看看百度啊之類的調(diào)試。
選擇一個(gè)擁有唯一類名的header標(biāo)簽，改變其文字內(nèi)容
移除頁面上的隨機(jī)一個(gè)元素
改變?nèi)我庠氐腃SS屬性
將一塊區(qū)域的高度減小250px
改變一個(gè)組件，譬如panel的可見性
定義一個(gè)叫做 doSomething 的函數(shù)，讓它彈出“Hello world”，并且執(zhí)行它
為某個(gè)文本塊添加一個(gè)點(diǎn)擊響應(yīng)事件
如果你在那邊卡住了，別忘了去看看JavaScript Functions and Helpers 指南，我在這邊也給一個(gè)小小的例子：
var header = document.querySelector(‘.text-branding’)
header.innerText = ‘Boop"
這個(gè)實(shí)驗(yàn)的主要目的就是回顧下你學(xué)到的JavaScript的基本語法以及一些DOM操作的知識(shí)。
Experiment 2
第二個(gè)實(shí)驗(yàn)使用 CodePen-JonathanZWhite編寫一個(gè)較大較復(fù)雜的JavaScript交互項(xiàng)目，會(huì)用到一些programmatic logic 。這個(gè)實(shí)驗(yàn)的關(guān)注點(diǎn)會(huì)綜合你在前端攻略-從路人甲到英雄無敵中學(xué)到的關(guān)于HTML與CSS的知識(shí)，這邊有幾個(gè)參考項(xiàng)目：
Periodic Table
Mood Color Generator
Calculator
JavaScript Quiz
Playable Canvas Asteroids
More JavaScript
看過了基礎(chǔ)知識(shí)，動(dòng)手做了幾個(gè)小實(shí)驗(yàn)，下面我們會(huì)進(jìn)入一些更有難度的概念的學(xué)習(xí)。這邊的列舉的概念可能之間并么有什么必然的練習(xí)，不過我還是把它們放在了一起是因?yàn)樗鼈兡苡兄谀阃ㄍ鶎＜业牡缆罚⑶乙材苡兄谀憷斫庀旅骊P(guān)于框架部分的講解。
Language
實(shí)際上JavaScript并不是一門淺薄的語言，雖然它只用了短短一周時(shí)間就創(chuàng)建出來了，它包含了很多高級(jí)的概念與用法（并且因?yàn)闅v史版本問題存在著大量的Polyfill）。這里是列舉出了常見的概念，同樣地 Eloquent JavaScript也攘括了這些點(diǎn)：
原型與繼承
作用域
閉包
回環(huán)
事件冒泡
Apply, call, and bind
Callbacks and promises
變量與提升
Currying
Imperative vs. Declarative（命令式VS聲明式）
就如同常見的兩種編程方式，JavaScript與DOM交互的方式也分為命令式與聲明式。一般來說，聲明式編程關(guān)注于發(fā)生了啥，而命令式則同時(shí)關(guān)注與咋發(fā)生的。
var hero = document.querySelector(".hero")

hero.addEventListener(‘click’, function() {
  var newChild = document.createElement(‘p’)

  newChild.appendChild(document.createTextNode(‘Hello world!’))
    newChild.setAttribute(‘class’, ‘text’)
    newChild.setAttribute(‘data-info’, ‘header’)
    hero.appendChild(newChild)
 })
}
上面這個(gè)小例子就是典型的命令式編程，我們手動(dòng)地查找到某個(gè)元素，然后將UI狀態(tài)存儲(chǔ)在DOM中，換言之，就是關(guān)注于如何達(dá)成某個(gè)目標(biāo)。命令式編程的優(yōu)勢(shì)在于很直觀，不過缺點(diǎn)也很明顯，整個(gè)程序的健壯性很差，也不易于擴(kuò)展。譬如如果某人把那個(gè)元素的類名從hero變成了villain，那么事件監(jiān)聽器就永遠(yuǎn)不會(huì)被調(diào)用了。
聲明式編程可以較好地解決這個(gè)問題，剛才提到的比較麻煩的元素選擇這個(gè)動(dòng)作可以交托給框架或者庫區(qū)處理，這樣就能讓開發(fā)者專注于發(fā)生了啥，這里推薦一波 The State Of JavaScript?—?A Shift From Imperative To Declarative 與 Three D’s of Web Development #1: Declarative vs. Imperative。本指南并沒有一上來先給你看Angular或者React的HelloWord，而是告訴你命令式的做法和聲明式的區(qū)別在哪，這樣你就能更好地理解為啥我們會(huì)需要框架。
響應(yīng)式與聲明式也可以看看筆者在我的前端之路里面提到的從以DOM操作為核心到數(shù)據(jù)流驅(qū)動(dòng)的頁面，關(guān)注發(fā)生了啥本質(zhì)上就是關(guān)注狀態(tài)與數(shù)據(jù)，而不是額外的操作。
Ajax
雖然已經(jīng)有了很多關(guān)于Ajax的教程指南，還是建議你閱讀下官方的Ajax 介紹。Ajax即是一個(gè)允許Web頁面通過JavaScript與服務(wù)端完成交互的技術(shù)，Ajax也是前后端分離的一個(gè)基石。
譬如，如果你要去提交一個(gè)表單，那么就要先收集下輸入的內(nèi)容然后通過HTTP請(qǐng)求發(fā)送到服務(wù)端。你在發(fā)Twitter的時(shí)候，就是Twitter客戶端發(fā)送HTTP請(qǐng)求到Twitter的服務(wù)器，然后根據(jù)服務(wù)端響應(yīng)來修正頁面狀態(tài)。推薦閱讀下 What is Ajax來深入理解Ajax，如果還是覺得有些疑惑，那可以看看 Explain it like i’m 5, what is Ajax，要是還不夠，那就回到eloquentjavascript chapter 關(guān)于HTTP的章節(jié)吧。
早期，筆者是習(xí)慣用jQuery的$.ajax來進(jìn)行Ajax操作，不過現(xiàn)在已經(jīng)慢慢統(tǒng)一到了標(biāo)準(zhǔn)的 Fetch，你可以看看由 Dan Walsh寫的文章來多了解下Fetch，它涵蓋了Fetch的工作原理與基本的用法。因?yàn)镕etch在部分低版本瀏覽器上還不能使用，因此我們會(huì)選擇一些Fetch polyfill ，文檔是 這里。
jQuery
一些jQuery使用技巧
也需要你壓根用不到j(luò)Query
到這里，咱們一直是用單純的JavaScript來進(jìn)行節(jié)點(diǎn)操作，怪麻煩的說，而且在不同的瀏覽器里還有寫不同的Polyfill。實(shí)際上，已經(jīng)有了大量的DOM節(jié)點(diǎn)的操作庫來幫我們簡(jiǎn)化常用代碼，其中最著名的就是jQuery，一個(gè)當(dāng)年前端程序猿的標(biāo)配。要記住，jQuery是一個(gè)典型的命令式的操作庫，它編寫與前端井噴之前，在那個(gè)年代有著無可比擬的先進(jìn)行。雖然今天，我們應(yīng)該用像Angular、React這樣的聲明式編程的框架來進(jìn)行復(fù)雜UI界面的編寫，但是仍然是推薦學(xué)習(xí)下jQuery，畢竟還有大量的項(xiàng)目仍然是基于jQuery的。
jQuery官方提供了一個(gè)Learning Center，是不錯(cuò)的基礎(chǔ)學(xué)習(xí)的教程，它會(huì)一步一步帶你學(xué)習(xí)重要的概念，譬如animations 與 event handling。如果你想要更多的學(xué)習(xí)資源，那么可以參考Codecademy的 jQuery course。
不過一定要記住，jQuery并不是唯一的進(jìn)行DOM操作的庫， PlainJS 和 You Might Not Need jQuery 也提供了基于原本的JavaScript代碼怎么實(shí)現(xiàn)常見的jQuery中的操作。
ES5 vs. ES6
在現(xiàn)代的前端開發(fā)中，另一個(gè)繞不過去的概念就是 ECMAScript?，F(xiàn)在主要有兩個(gè)常用的JavaScript版本，分布是ES5和ES6，它們呢都是JavaScript使用的ECMAScript標(biāo)準(zhǔn)。你可以把它們看做不同版本的JavaScript，ES5是在2009年定稿，然后使用至今。而ES6, 也叫作ES2015，是一個(gè)新的標(biāo)準(zhǔn)，它提供了很多譬如常量, 類, 以及 模板字符串等等特性。ES6是兼容ES5的，不像Python3和Python2，并且很多ES6帶來的語法特性都是在ES5的封裝的基礎(chǔ)上，譬如ES6中的類是基于JavaScript prototypal inheritance的syntactical sugar。
這里推薦一個(gè)不錯(cuò)的ES6的教程ES5, ES6, ES2016, ES.Next: What’s going on with JavaScript versioning 以及Dan Wahlin的Getting Started with ES6?—?The Next Version of JavaScript.。看完了這些，你也可以看看ES5和ES6特性的詳細(xì)列表： ES6 Features以及 Github repository 。
More Practice
恭喜你，成功到達(dá)存檔點(diǎn)，你已經(jīng)學(xué)了不少關(guān)于JavaScript的知識(shí)了，下面讓我們來溫習(xí)一波。
Experiment 3
Experiment 3 著重于如何利用jQuery進(jìn)行常見的DOM節(jié)點(diǎn)操作，本實(shí)驗(yàn)中，我們會(huì)以一種更加結(jié)構(gòu)化的方式。我是選擇了Flipboard的主頁作為范本，你可以參考下Codecademy的Flipboard’s home page and add interactivity with JavaScript 教程。
Experiment 4
按照慣例，實(shí)驗(yàn)4呢又把你學(xué)過的HTML和CSS的知識(shí)跟JavaScript的知識(shí)混雜到了一起進(jìn)行鍛煉，這是一個(gè)關(guān)于鐘的實(shí)驗(yàn)，各種各樣的鐘。在動(dòng)手之前推薦你看看 Decoupling Your HTML, CSS, and JavaScript來了解下JavaScript混入的情況下基本的CSS類名命名規(guī)范。同樣的，我也準(zhǔn)備了一系列的CodePen來當(dāng)做你的教材：
Flat Clock
jQuery Wall Clock
Fancy Clock
Retro Clock
Simple JavaScript Clock
如果你要更多的例子，請(qǐng)?jiān)贑odePen上搜索 clock 。你可以選擇先寫基本的HTML與CSS樣式然后再加上JavaScript邏輯，也可以先寫JavaScript邏輯代碼然后再放入到樣式中。你可以選擇用jQuery，不過盡量還是用純粹的JavaScript代碼吧。
JavaScript Frameworks
小怪清完了，下面開始刷BOSS了，拿起你的劍吧勇士，美麗的公主就在前方。我們?cè)谶@一章節(jié)會(huì)開始介紹常用的JavaScript框架。我們不提倡重復(fù)造輪子，但是一定要理解輪子并且能給它上上油或者換換螺絲釘，這些JavaScript框架可以幫你更好地組織你的代碼。它們?yōu)榍岸碎_發(fā)者提供了可復(fù)用的解決方案，就好像所謂的設(shè)計(jì)模式一樣，它可以用來解決狀態(tài)管理、路由以及性能優(yōu)化等等，正是因?yàn)橛辛诉@些框架，我們才能更好地構(gòu)建web apps。
貪多嚼不爛，我不打算介紹所有的JavaScript框架，不過還是列個(gè)目錄下來，這些框架包括但不限于 Angular, React + Flux, Ember, Aurelia,Vue, 以及 Meteor。你并不需要學(xué)習(xí)所有的框架，選擇一個(gè)然后深入，最合適自己的才是最好的。
便如譯者在文首所說，我們并不能盲目地追趕框架，而是要理解框架背后的思想與原則。另一個(gè)在譯者自己的實(shí)踐中，會(huì)盡可能的基于ES6進(jìn)行抽象，這樣保證了即使換框架也能有很好地兼容于復(fù)用。
Architectural Patterns
在學(xué)習(xí)框架之前，首先要了解下常用的架構(gòu)模式：
model-view-controller
model-view-viewmodel
model–view–presenter
這些模式可以用來創(chuàng)建清晰的多層應(yīng)用關(guān)注分離 。關(guān)注分離是一個(gè)設(shè)計(jì)原則，即是講一個(gè)巨石型應(yīng)用切分到不同的領(lǐng)域?qū)Ｗ樱┤缜懊嫖覀兌际窃贖TML中保留應(yīng)用狀態(tài)，而你可以使用一個(gè)JavaScript對(duì)象，或者說是Model層來存儲(chǔ)應(yīng)用狀態(tài)。如果你想要了解地更多，可以先看下Chrome Developers里對(duì)于MVC的講解，然后閱讀Understanding MVC And MVP (For JavaScript And Backbone Developers)。閱讀這篇文章的時(shí)候不要在意有沒有學(xué)過Backbone，只要關(guān)注MVC與MVP比較的部分。 Addy Osman也寫了另一篇關(guān)于MVVM的文章Understanding MVVM?—?A Guide For JavaScript Developers。如果你想了解MVC的源起，可以參考Martin Fowler的 GUI Architectures。最后，閱讀這篇JavaScript MV* Patterns， Learning JavaScript Design Patterns也是個(gè)很不錯(cuò)的在線免費(fèi)電子書。
Design Patterns
JavaScript的框架也并沒有重復(fù)造輪子，很多還是基于已有的設(shè)計(jì)模式，你可以認(rèn)為設(shè)計(jì)模式是在軟件開發(fā)中用于解決通用問題的可復(fù)用的方法。盡管理解設(shè)計(jì)模式并不是學(xué)習(xí)一個(gè)框架的前提，不過我還是建議你可以先了解一些：
Decorator
Factory
Singleton
Revealing module
Facade
Observer
理解這些設(shè)計(jì)模式不僅會(huì)讓你變成一個(gè)更好地設(shè)計(jì)師，也能有助于你更好地理解這些框架。
AngularJS
AngularJS 是一個(gè) JavaScript MVC框架，不過有時(shí)候也是一個(gè) MVVM框架。它由在2010年由Google進(jìn)行維護(hù)并且迅速在社區(qū)刮起了一波浪潮。
Angular是一個(gè)典型的聲明式框架，這里推薦一個(gè)閱讀，可以幫你理解命令式編程到聲明式編程的轉(zhuǎn)變： How is AngularJS different from jQuery。如果你希望了解更多關(guān)于Angular的知識(shí)，可以參考Angulardocumentation。還有一個(gè)叫做 Angular Cat 的漸進(jìn)教程。 angular2-education 是一個(gè)由 Tim Jacobi.整理的完整的關(guān)于angular2的教程，另外，還有John Papa編寫的 最佳實(shí)踐指南 。
React + Flux
Angular幫助開發(fā)者解決了很多前端系統(tǒng)構(gòu)建中遇到的問題，不過Angular 1存在著極大的性能問題。今年才出的Angular 2也是組件化思維，不過太過龐大。另一個(gè)常用的小而美的工具就是 React，專注于用戶交互的構(gòu)建。React可以認(rèn)為是MVC層中的View層，React只是一個(gè)Library，通常與 Flux或者Redux一起結(jié)合起來使用。
Facebook最早設(shè)計(jì)React與Flux是為了解決MVC中的一些缺陷與擴(kuò)展問題，可以參考著名的Hacker Way: Rethinking Web App Development at Facebook演講，這里介紹了Flux的起源。首先，我們來學(xué)習(xí)React，推薦是直接看React 官方文檔，然后看看React.js Introduction For People Who Know Just Enough jQuery To Get By 來幫你從jQuery思維轉(zhuǎn)移到React思維。
可以參照譯者的React Introduction來獲取更多關(guān)于React參考資料的東東
在你對(duì)React有了基本的了解之后，下面就可以開始學(xué)習(xí)Flux了，同樣的首先推薦官方Flux文檔。然后你可以看看Awesome React, 這里包含了很多你可以慢慢咀嚼的內(nèi)容。
Practicing with Frameworks
又到了實(shí)踐環(huán)節(jié)了，現(xiàn)在你已經(jīng)對(duì)于JavaScript框架與架構(gòu)模式有了基本的了解，是時(shí)候帶一波節(jié)奏了。在這兩個(gè)實(shí)驗(yàn)中，注意體會(huì)架構(gòu)設(shè)計(jì)的理念，首先要保證 DRY, 然后有一個(gè) 清晰的分層概念, 最后要注意 單一職責(zé)原則.
Experiment 5
實(shí)驗(yàn)5是不用框架重構(gòu)著名的TodoMVC，換言之，就是用最基礎(chǔ)的JavaScript代碼來實(shí)現(xiàn)一個(gè)TodoMVC。本實(shí)驗(yàn)的目的就是為了向你展示在沒有框架介入的情況下怎么構(gòu)建一個(gè)完整的MVC應(yīng)用
你可以參考 TodoMVC，第一步就是創(chuàng)建一個(gè)新的本地項(xiàng)目然后建立三個(gè)基本的組件，你可以參考Github repository這里的完整代碼。如果你覺得現(xiàn)在的自己能力還不足以Hold住整個(gè)項(xiàng)目，表擔(dān)心，先把它們下載下來，然后慢慢實(shí)踐。
Experiment 6
Experiment 6 就是跟著Scotch.io的教程來實(shí)現(xiàn)一個(gè)下面這樣的站點(diǎn)：
Build an Etsy Clone with Angular and Stamplay 會(huì)教你怎么基于Angular來構(gòu)建一個(gè)網(wǎng)站，提供APIs并且在一個(gè)大型的項(xiàng)目中進(jìn)行架構(gòu)組織。學(xué)完了這些之后，你要能理解以下這些問題：
啥是web app?
怎么用Angular實(shí)踐 MVC/MVVM?
API是啥，腫么用?
怎么組織與管理一個(gè)大型的CodeBase?
將一個(gè)UI切分為聲明式組件的好處在哪?
如果這個(gè)教程還不夠，那還可以看看Build a Real-Time Status Update App with AngularJS & Firebase。
Experiment 7
第7個(gè)實(shí)驗(yàn)是將React與Flux綜合使用，即利用React來構(gòu)建一個(gè)TODOMVC。你可以參考Facebook’s Flux documentation site這個(gè)教程，它會(huì)教你一步一步地從零開始構(gòu)建界面然后將Flux應(yīng)用到整個(gè)Web項(xiàng)目中。通過了第一關(guān)，就可以移步到 怎么利用React、Redux與Immutable.js構(gòu)建一個(gè)TodoMVC 以及 利用Flux與React構(gòu)建一個(gè)微博客。
Stay current
就像前端一樣，JavaScript也永遠(yuǎn)不會(huì)停下前進(jìn)的步伐。
下面列舉了一系列博客，多讀讀，能夠隨時(shí)了解最新的發(fā)展與消息：
Smashing Magazine
JavaScript Weekly
Ng Weekly
Reddit JavaScript
JavaScript Jabber
Learn by exampleStyleguides
AirBnB JavaScript Styleguide
Principles of Writing Consistent, Idiomatic JavaScript
Node Styleguide
MDN Coding Style
Codebases
Lodash
Underscore
Babel
Ghost
NodeBB
KeystoneJS
Further Reading
web-frontend-practice-handbook

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/79580.html

               

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    [譯] 前端攻略-從路人甲到英雄無敵
    
                                                     
    摘要：整個(gè)系統(tǒng)變得日益繁復(fù)，人們也會(huì)去選擇使用一些預(yù)處理器或者后處理器來管理這種復(fù)雜性。的預(yù)處理器或者語言的擴(kuò)展會(huì)在無聲無息之間提供類似于變量以及繼承這些特性。最主要的兩個(gè)的預(yù)處理器就是與。

本文的 Github Repo本文翻譯自 FreeCodeCamp 的 from-zero-to-front-end-hero-part。本文的第二部分：這里
譯者的廢話，不感興趣的直接忽略
前兩天才翻...
    
                                                   
                          
    
                                
    
                                    RancherLabs
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    基礎(chǔ)知識(shí) - 收藏集 - 掘金
    
                                                     
    摘要：本文是面向前端小白的，大手子可以跳過，寫的不好之處多多分鐘搞定常用基礎(chǔ)知識(shí)前端掘金基礎(chǔ)智商劃重點(diǎn)在實(shí)際開發(fā)中，已經(jīng)非常普及了。

JavaScript字符串所有API全解密 - 掘金關(guān)于 我的博客：louis blog SF專欄：路易斯前端深度課 原文鏈接：JavaScript字符串所有API全解密 本文近 6k 字，讀完需 10 分鐘。 字符串作為基本的信息交流的橋梁，幾乎被所有的編程...
    
                                                   
                          
    
                                
    
                                    wdzgege
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    專治前端焦慮的學(xué)習(xí)方案
    
                                                     
    摘要：不過今天我希望能夠更進(jìn)一步，不僅僅再抱怨現(xiàn)狀，而是從我個(gè)人的角度來給出一個(gè)逐步深入學(xué)習(xí)生態(tài)圈的方案。最后，我還是想提到下對(duì)于的好的學(xué)習(xí)方法就是回顧參照各種各樣的代碼庫，學(xué)習(xí)人家的用法與實(shí)踐。

本文翻譯自A-Study-Plan-To-Cure-JavaScript-Fatigue。筆者看到里面的幾張配圖著實(shí)漂亮，順手翻譯了一波。本文從屬于筆者的Web Frontend Introduc...
    
                                                   
                          
    
                                
    
                                    codeGoogle
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    2017年2月份前端資源分享
    
                                                     
    平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron...
1. Javascript

前端生成好看的二維碼
十大經(jīng)典排序算法(帶動(dòng)圖演示) 
為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer
個(gè)人整理和封裝的YU.js庫|中文詳細(xì)注釋|供新手學(xué)習(xí)使用
擴(kuò)展JavaScript語法記錄 - 掉坑初期工具
漢字拼音轉(zhuǎn)換...
    
                                                   
                          
    
                                
    
                                    lily_wang
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    2017年2月份前端資源分享
    
                                                     
    平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron...
1. Javascript

前端生成好看的二維碼
十大經(jīng)典排序算法(帶動(dòng)圖演示) 
為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer
個(gè)人整理和封裝的YU.js庫|中文詳細(xì)注釋|供新手學(xué)習(xí)使用
擴(kuò)展JavaScript語法記錄 - 掉坑初期工具
漢字拼音轉(zhuǎn)換...
    
                                                   
                          
    
                                
    
                                    chengjianhua
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

                  
                  
發(fā)表評(píng)論

                   
               

                

                  
0條評(píng)論
   
                
 
                      

              

              
 
                

                   
              
  

                  
最新活動(dòng)
 
           
                             
              





                                
              

           

      
    

         
閱讀需要支付1元查看
  
         
     
       

        

            

              
              
            

             
        

    
        
<