大前端周刊第18期

02-02

Show me the code

用Javascript學習數據結構之棧(Stack)

棧(Stack)是一種遵循後進先出（LIFO）的有序集合，較新的元素會靠近頂部，較舊的元素會在棧的底部。

接下來我們正式開始實現棧（Stack）。首先，建立一個Stack類：

function Stack() {n // 類內部定義Stack的屬性和方法n}n

屬性：

let items = []; //使用array來存儲棧內的元素

方法：

push(elements): 新增一個或者多個元素到棧的頂部
pop(): 移除棧頂部元素，同時返回被移除的元素
peek()或top(): 僅返回stack元素，不做任何修改
isEmpty(): 檢查棧是否為空？若無任何元素則返回true，反之返回false
clear(): 清空棧內的所有元素
size(): 返回棧的元素個數

1.push(elements)和pop()

由於我們使用array當做stack的存儲方式，所以我們可以使用array內建的push(element)和pop()方式來實現LIFO的特性，讓元素的新增和刪除只能發生在尾端。

function Stack() {n let items = [];n this.push = function(element) {n items.push(element);n }n this.pop = function() {n return items.pop();n }n}n

2.peek()：

若是我們想知道棧中的最後一個元素（最頂端的元素），我們可以實現peek()方法，返回頂部元素

function Stack() {n let items = [];n this.peek = function() {n return items[items.length - 1];n }n}n

3.isEmpty()：

若我們想知道棧內是否還有元素，我們可以使用isEmpty()來判斷

function Stack() {n let items = [];n this.isEmpty = function() {n return items.length === 0;n }n}n

4.clear()：

若我們想清空棧的話，可以使用clear()方法，將所有元素刪除

function Stack() {n let items = [];n this.clear = function() {n items = [];n }n}n

5.size()：

通過size()方法我們可以取得棧的大小（共有幾個元素）

function Stack() {n let items = [];n this.size = function() {n return items.length;n }n}n

完整代碼：

把上面各種方法放到一起

插件推薦

PhantomJS
PhantomJS可以應用於下面這幾個典型場景：無需瀏覽器的web測試，頁面自動化操作，屏幕截圖和網路監控等

文章推薦

Node.js的事件輪詢Event Loop原理解釋
Event Loop是理解Node實現事件驅動、非同步高並發服務的關鍵。這篇文章中解釋了下面幾個容易被忽略的點： 1. Node.js的底層其實也是有一個線程池的，用來執行各種堵塞操作。2. 一個Event loop的三個基本組件：事件隊列、讀取事件的輪詢線程、以及線程池。3. 各個事件的回調函數是如何激活並執行的。
jsonp原理詳解
jsonp不是ajax的一個特例，哪怕jquery等巨頭把jsonp封裝進了ajax，也不能改變這一點！
this , apply , call , bind詳解

幾個ES5 的坑，this是其中經常搞暈的一個，上一篇通俗且易理解的文章
深入理解 Node.js Stream 內部機制
知其然知其所以然，來了解一下nodejs stream內部機制。
基於 Electron 開發客戶端產品的體驗
基於 Electron 開發的產品非常多，文章主要是針對於如何入門 Electron，可以說是作者開發的總結；非常適合計劃使用 Electron的開發者閱讀。
babel到底該如何配置？
大家都知道js作為宿主語言，很依賴執行的環境（瀏覽器、node等），不同環境對js語法的支持不盡相同，特別是ES6之後，ECMAScrip對版本的更新已經到了一年一次的節奏，雖然每年更新的幅度不大，但是每年的提案可不少。babel的出現就是為了解決這個問題，把那些使用新標準編寫的代碼轉譯為當前環境可運行的代碼，簡單點說就是把ES6代碼轉譯（轉碼+編譯）到ES5。
CSS 新的長度單位 fr 你知道么？
本文介紹了 CSS Grid 規範中引入的一個新的長度單位 fr，我們一起來看看到底是怎麼回事吧！
使用 webpack 優化資源

本片文章中主要是基於 webpack 打包，以 React、vue 等生態開發的單頁面應用來舉例說明如何從 webpack 打包的層面去處理資源以及緩存，其中主要我們需要做的是對 webpack 進行配置的優化，同時涉及少量的業務代碼的更改。
SASS用法指南
今年TalkingData團隊將 CSS 預處理器切換到了 SASS，代碼層面只是簡單直接的做了風格轉換，還沒有挖掘出 SASS 更深入的能力。本周推薦一篇 SASS 「基礎」內容，推薦大家閱讀和實踐，以提升大家在 CSS 方面的編程能力。
VirtualDOM與diff(Vue實現)
我們是不是可以把真實DOM樹抽象成一棵以JavaScript對象構成的抽象樹，在修改抽象樹數據後將抽象樹轉化成真實DOM重繪到頁面上呢？於是虛擬DOM出現了，它是真實DOM的一層抽象，用屬性描述真實DOM的各個特性。當它發生變化的時候，就會去修改視圖。
多「維」優化——前端高並發策略的更深層思考
一項指標的變好，總少不了相應優化策略的實施。優化並不是簡單的一蹴而就，而是個不斷迭代與推翻的過程。更深層的優化方案，往往是在某種思維策略之下，對問題場景和基本策略優缺的深刻理解後做出的當下最優的權衡結果——作者導讀。
Egg 源碼解析之 egg-cluster

Node.js 進程只能運行在一個 CPU 上，而 egg 採用多進程模型，使多核 CPU 的性能發揮到極致，最大程度地榨乾伺服器資源，進而解決了該問題。egg-cluster 是用於 egg 多進程管理的基礎模塊，負責底層的 IPC 通道的建立以及處理各進程的通信，本文解析了實現原理，值得一看。

本期小編： @包baoqger

大前端周刊 第18期