前端開發週報：CSS 佈局方式與JavaScript動畫庫

編程語言 JavaScript CSS 數據結構前端開發學習前端開發學習 2017-08-29

1、常見 CSS 佈局方式

詳見：一些常見的 CSS 佈局方式梳理，涉及 Flex 佈局、Grid 佈局、聖盃佈局、雙飛翼佈局等。

http://cherryblog.site/common-CSS-layout.html

2、幾種 JavaScript 動畫庫推薦

JavaScript 庫對設計師和開發人員來說，都是非常有用的工具。它們可以為你的網站添加一些超級強大的功能，給用戶帶來更好的體驗。

http://www.tuicool.com/articles/ruQreaz

3、JS 命名與註釋規範詳解

從事前端開發也有一段時間了，一直在遵循著規範化開發，從 js 也逐漸轉向了 ts ，在這個過程中也有了很多收穫，在此把自己的開發心得寫下來。本文參考了 JavaScript 開發規範，並做了補充和修改，同時刪去了框架開發相關的內容。

http://foreverz.cn/2017/08/23/JS%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/

4、JavaScript數據結構和算法

數據結構和算法對於很多前端工程師來說，一直覺得是可有可無的，但其實不然，個人覺得，前端工程師其實是最需要重視數據結構和算法的人，因為前端所做的東西是用戶訪問網站第一眼看到的東西，特別在移動浪潮到來之後，對用戶體驗越來越高，對前端提出了更高的要求，面對越來越複雜的產品，需要堅實的數據結構和算法基礎才能駕馭。如果沒有學習過計算機科學的程序員，當我們在處理一些問題時，比較熟悉的數據結構就是數組，數組無疑是一個很好的選擇。但很多時候，對於很多複雜的問題，數組就顯得太過簡陋了，當學習了數據結構和算法之後，對於很多編程問題，當想到一個合適的數據結構後，設計和實現解決這些問題的算法就手到擒來。

https://github.com/zoro-web/blog/issues/4

5、JavaScript數據類型的存儲

一個很基礎的知識點，JavaScript中基本數據類型和引用數據類型是如何存儲的。由於自己是野生程序員，在剛開始學習程序設計的時候沒有在意內存這些基礎知識，導致後來在提到“什麼什麼是存在棧中的，棧中只是存了一個引用”這樣的話時總是一臉懵逼。。後來漸漸的瞭解了一些內存的知識，這部分還是非常有必要了解的。

http://axuebin.com/blog/2017/08/24/javascript-data-storage/

6、iframe和HTML5 blob實現JS,CSS,HTML直接當前頁預覽

這前端代碼效果實時預覽的需求實際上是非常常見的，例如jsbin，codepen，runjs之類的網站就是滿足此需求的。傳統做法是這樣子的，會新建一個另外的獨立頁面，專門用來接收傳入的前端代碼，通過新開窗口或者嵌入iframe頁面的方式達到最終效果，其中可能會用到 HTML5 postMessage等通信技術。本文講述藉助iframe和blob實現前端代碼的實時預覽。

http://www.zhangxinxu.com/wordpress/2017/08/iframe-html5-blob-code-view/

7、淺談JavaScript中的接口實現

接口是面向對象JavaScript程序員的工具箱中最有用的工具之一。在設計模式中提出的可重用的面向對象設計的原則之一就是“針對接口編程而不是實現編程”，即我們所說的面向接口編程，這個概念的重要性可見一斑。但問題在於，在JavaScript的世界中，沒有內置的創建或實現接口的方法，也沒有可以判斷一個對象是否實現了與另一個對象相同的一套方法，這使得對象之間很難互換使用，好在JavaScript擁有出色的靈活性，這使得模擬傳統面向對象的接口，添加這些特性並非難事。接口提供了一種用以說明一個對象應該具有哪些方法的手段，儘管它可以表明這些方法的含義，但是卻不包含具體實現。有了這個工具，就能按對象提供的特性對它們進行分組。

http://developer.51cto.com/art/201708/548703.htm

8、深入理解 JavaScript 中的 this

你是否經常被JavaScript中的this關鍵字搞暈? 不用太過於當心, 很多JavaScript的初學者都被它搞暈過. 你不是一個人在戰鬥. 話雖如此, 但這並不意味著你可以永遠不用理解this. 不管是在JavaScript中還是在許多教程中, 都廣泛的使用this, 所以掌握this是遲早的事. 一旦你理解this, 就會覺得它實際上比你想象的簡單許多. 讀過這篇文章以後, 你就會深入理解this的祕密. 到時候你就知道它是什麼, 它做什麼以及如何使用它.

https://zhuanlan.zhihu.com/p/28704724

9、如何編寫輕量級 CSS 框架

想說的東西很多，卻又無從說起。如今輕量級框架如雨後春筍，層出不窮。我想每個人都應該歸納總結工作中的常見需求，編寫一套適合自己的 CSS 框架。（by nzbin）

http://web.jobbole.com/92035/

前端開發週報：CSS 佈局方式與JavaScript動畫庫

10、JavaScript 中的執行上下文和調用棧是什麼？

詳見：一篇文章帶你瞭解 JavaScript 基本概念之執行上下文。在本文中，作者將幫助你理解 JavaScript 解釋器是如何執行你的代碼的。

http://zcfy.cc/article/what-is-the-execution-context-amp-stack-in-javascript-by-david-shariff-4007.html

11、JavaScript精進之路 — 異步的實現（上）

程序中現在運行部分和將來運行部分的關係就是異步編程的核心。簡單來講，如果程序中出現了一部分要在現在運行（順序同步執行），一部分要在將來運行（可能是設置了timeout也可能是一個ajax的異步調用後執行的函數），那麼兩者之間的關係的構建就構成了異步編程。

https://segmentfault.com/a/1190000010791199

12、深度好文 | JavaScript 疲勞終極指南：我們行業的真相

上週我在 NebraskaJS 2017 會議上做了一個和這個話題極其類似的演講，我也收到了許多積極的反饋，所以我就想這個演講也可以寫成一篇文章發表出來，讓更多的人知道，並幫助他們應對 JS 疲勞，理解我們行業的真相。這篇文章的目的是希望改變你對軟件工程行業的普遍的看法，助你在你可能工作的領域上一臂之力。

https://zhuanlan.zhihu.com/p/28650844

13、在JavaScript中實現隊列

隊列和棧非常類似，但是使用了不同的原則，而非後進先出。隊列是遵循FIFO（First In First Out，先進先出，也稱先來先服務）原則的一組有序的項。隊列在尾部添加新元素，並從頂部移除元素。最新添加的元素必須排在隊列的末尾。在現實中，最常見的例子就是排隊：排在第一位的人會先接受服務。

http://alloween.top/2017/03/26/在JavaScript中實現隊列/

14、深入淺出 Web Audio Api

Web Audio API 需要在音頻上下文中處理音頻的操作，並具有模塊化路由的特點。基本的音頻操作是通過音頻節點來執行的，這些音頻節點被連接在一起形成音頻路由圖。我們可以從上面這段文字中提取出幾個關鍵詞：音頻上下文音頻節點模塊化音頻圖我將會以這些關鍵詞為開始，慢慢介紹什麼是 Web Audio Api，如何使用 Web Audio Api 來處理音頻等等。

https://juejin.im/post/599e35f5f265da246c4a1910

15、2017年8月前端開發者超實用乾貨大合集

在過去的幾年當中，網絡上所流傳的各種設計和開發資源，在素質上有明顯的提升。其中有一些已經幾乎成為了設計師和開發者必備的工具，但是其中絕大多數由於其應用範疇的侷限，或者傳播不夠廣，導致它們大多並廣為人知。將這些素材集中到一起，很大程度上是希望它們的目標用戶能夠明白，需要這些工具的時候，上哪兒找。這次的前端乾貨合集內容也很齊全，仔細看看，總能找到幾款你所需要的。

https://juejin.im/entry/599b90b251882524481c7f51

16、個人總結（css3新特性）

css3這個相信大家不陌生了，是個非常有趣，神奇的東西！有了css3，js都可以少寫很多！我之前也寫過關於css3的文章，也封裝過css3的一些小動畫。個人覺得css3不難，但是很難用得好，用得順手，最近我也在過一遍css3的一些新特性（不是全部，是我在工作上常用的，或者覺得有用的），以及一些實例，就寫了這一篇總結！希望，這篇文章能幫到大家認識css3。寫這篇文章主要是讓大家能瞭解css3的一些新特性，以及基礎的用法，感覺css3的魅力！如果想要用好css3，這個得靠大家繼續努力學習，尋找一些講得更深入的文章或者書籍了！如果大家有什麼其他特性推薦的，歡迎補充！大家一起學習，進步！

https://segmentfault.com/a/1190000010780991

前端開發週報：CSS 佈局方式與JavaScript動畫庫

17、Vue 插件編寫與實戰

本文立足vue開源的理念，主要為vue開發者講解編寫vue插件的方法和步驟，通過理論與實踐相結合的方式來加深大家對vue插件編寫的認識。

https://juejin.im/post/599c18b2f265da249823f21f

18、Ajax的全面總結

Ajax在前端開發中有著舉足輕重的地位，關於Ajax的使用和注意事項一直是一個重要的話題，藉此機會，本文希望對Ajax做一個全面的總結，徹底揭開Ajax的神祕面紗。一.什麼是AjaxAjax(Asynchronous JavaScript and XM...

https://segmentfault.com/a/1190000010832550

19、HTTP緩存機制詳解

Http 緩存機制作為 web 性能優化的重要手段，對於從事 Web 開發的同學們來說，應該是知識體系庫中的一個基礎環節，同時對於有志成為前端架構師的同學來說是必備的知識技能。但是對於很多前端同學來說，僅僅只是知道瀏覽器會對請求的靜態文件進行緩存，但是為什麼被緩存，緩存是怎樣生效的，卻並不是很清楚。在此，我會嘗試用簡單明瞭的文字，像大家系統的介紹HTTP緩存機制，期望對各位正確的理解前端緩存有所幫助。

https://segmentfault.com/a/1190000010775131

20、Vue.js數據綁定原理

Vue.js是一款MVVM框架，上手快速簡單易用，通過數據綁定在修改數據的時候更新視圖。Vue.js的數據綁定原理依賴於Object.defineProperty，尤大大在Vue.js文檔中就已經提到過，這也是Vue.js不支持E8 以及更低版本瀏覽器的原因。Vue通過設定對象屬性的 setter/getter 方法來監聽數據的變化，通過getter進行依賴收集，而每個setter方法就是一個觀察者，在數據變更的時候通知訂閱者更新視圖。