文章閱讀(二)

js閉包其實不難，你須要的只是瞭解什麼時候使用它

究竟什麼是閉包？閉包在什麼場景下使用？寫前端程序須要用到閉包嗎？我用jQuery也能寫的好好滴呀？閉包能夠解決哪些問題？使用閉包會帶來哪些好處？

閉包是指能夠包含自由（未綁定到特定對象）變量的代碼塊；這些變量不是在這個代碼塊內或者任何全局上下文中定義的，而是在定義代碼塊的環境中定義（局部變量）。

包含兩方面：要執行的代碼塊（因爲自由變量被包含在代碼塊中，這些自由變量以及它們引用的對象沒有被釋放）和爲自由變量提供綁定的計算環境（做用域）

既然全部函數都是閉包，還有必要專門提這個概念嗎？大多數函數被調用時(invoked)，使用的做用域和他們被定義時(defined)使用的做用域是同一個做用域，這種狀況下，閉包神馬的，可有可無。可是，當他們被invoked的時候，使用的做用域不一樣於他們定義時使用的做用域的時候，閉包就會變的很是有趣，而且開始有了不少的使用場景，這就是你之因此要掌握閉包的緣由。

理解「閉包」：

• step1：掌握嵌套函數的詞法做用域規則(lexical scoping rules)。只要記住一點：詞法做用域的規則，即函數被執行時(executed)使用的做用域鏈(scope chain)是 被定義 時的scope chain，而不是執行時的scope chain，就能夠很容易的理解閉包的行爲了。
• step 2：掌握閉包的使用場景。
• 閉包經典使用場景一：經過循環給頁面上多個dom節點綁定事件
• 閉包使用場景二：封裝變量
• 閉包使用場景三：延續局部變量的壽命

深刻理解 JavaScript 異步 

Node.js 初體驗

• Node是個啥？
• 安裝Node
• npm的下載和使用
• 理解Node的模塊概念：在Node中，不一樣的功能組件被劃分紅不一樣的模塊。應用能夠根據本身的須要來選擇使用合適的模塊。每一個模塊都會暴露一些公共的方法或屬性。
• Node能作什麼和它的優點：非阻塞；單線程；事件驅動。
• Node事件流概念：由於Node 採用的是事件驅動的模式，其中的不少模塊都會產生各類不一樣的事件，可由模塊來添加事件處理方法，全部可以產生事件的對象都是事件模塊中的 EventEmitter 類的實例。
• 強大的File System 文件系統模塊： Node 中的 fs 模塊用來對本地文件系統進行操做。文件的I/O是由標準POSIX函數封裝而成。須要使用require('fs')訪問這個模塊。全部的方法都提供了異步和同步兩種方式。
• 學習Node的總結：

2017，咱們來聊聊 Node.js

新一代 JavaScript 的開發圖譜（2017）

我將會將這張地圖分爲幾個你須要解決的問題，對於每一個問題，我將會：

• 描述問題或工具需求
• 決定你須要選取哪一種工具
• 討論爲何這樣選
• 給一些其餘選擇

問題：

• 包管理
• JavaScript風格
• 編譯
• Linting
• 打包工具
• 測試
• UI 庫／狀態管理
• DOM 操做和動畫
• 樣式

 JavaScript 中函數節流和函數去抖的講解

https://segmentfault.com/a/1190000002764479

http://www.topfe.cn/javascript/395.html

函數節流：在頻繁觸發的狀況下，須要執行的邏輯只有執行完以後，才能繼續執行下一次。

函數防抖：在頻繁觸發的狀況下，只有足夠的空閒時間，才執行代碼一次，若是沒有執行完就清除掉，從新執行邏輯。

應用場景：高頻觸發如下方法

• 頁面滾動監聽（onscroll）
• 窗口resize事件，等到窗口變化結束後才進行業務邏輯的運行
• 鼠標鍵盤 mousedown/keydown 事件
• 鼠標的進入移出事件（mouseenter/mouseleave）
• DOM 元素的拖拽功能實現（mousemove）
• 輸入框搜索等（keyup）

    // 函數節流
    var canRun = true;
    window.onscroll = function(){
         if(!canRun){
             // 判斷是否已空閒，若是在執行中，則直接return
             return;
        }
        canRun = false;
        setTimeout(function(){
            console.log("函數節流");
            canRun = true;
        }, 300);
    };

    // 函數防抖
    var timer = false;
    window.onscroll = function(){
        clearTimeout(timer); // 清除未執行的代碼，重置回初始化狀態
        timer = setTimeout(function(){
        console.log("函數防抖");
        }, 300);
    };

如何在 Vue.js 中使用第三方庫

在諸多 Vue.js 應用中, Lodash, Moment, Axios, Async等都是一些很是有用的 JavaScript 庫. 但隨着項目愈來愈複雜, 可能會採起組件化和模塊化的方式來組織代碼, 還可能要使應用支持不一樣環境下的服務端渲染. 除非你找到了一個簡單而又健壯的方式來引入這些庫供不一樣的組件和模塊使用, 否則, 這些第三方庫的管理會給你帶來一些麻煩.

補充：ES6標準發佈後，module成爲標準，標準的使用是以export指令導出接口，以import引入模塊，可是在咱們一向的node模塊中，咱們採用的是CommonJS規範，使用require引入模塊，使用module.exports導出接口。在一個文件或模塊中，export、import能夠有多個，export default僅有一個。 require和import。

本文將介紹一些在 Vue.js 中使用第三方庫的方式：

• 全局變量：在項目中添加第三方庫的最簡單方式是講其做爲一個全局變量, 掛載到 window 對象上。這種方式不適合於服務端渲染, 由於服務端沒有 window 對象, 是 undefined, 當試圖去訪問屬性時會報錯。
• 在每一個文件中引入：另外一個簡單的方式是在每個須要該庫的文件中導入。比較繁瑣, 而且帶來的問題是: 你必須記住在哪些文件引用了該庫, 若是項目再也不依賴這個庫時, 得去找到每個引用該庫的文件並刪除該庫的引用. 若是構建工具沒設置正確, 可能致使該庫的多份拷貝被引用。
• 優雅的方式：在 Vuejs 項目中使用 JavaScript 庫的一個優雅方式是講其代理到 Vue 的原型對象上去。Object.defineProperty(Vue.prototype, '$moment', { value: moment });

CSS Grid VS Flexbox：實例對比

CSS Grid佈局這樣玩

理解 Flexbox：你須要知道的一切

• 挑戰 1：定位頁面部分
• 挑戰 2：將頁面變爲響應式頁面
• 挑戰 3：對齊標頭組件

結論:

1. CSS grids 適用於佈局大畫面。它們使頁面的佈局變得很是容易，甚至能夠處理一些不規則和非對稱的設計。
2. Flexbox 很是適合對齊元素內的內容。你可使用 Flex 來定位設計上一些較小的細節。
3. 2D 佈局適合使用 CSS grids（行與列）。
4. Flexbox 適用於單一維度的佈局（行或列）。
5. 共同窗習並使用它們。

優化瀏覽器前端

爲了提高用戶體驗（User Experience，UX），咱們但願前端提供快速加載和執行的網頁。而對於提高開發者體驗（Developer Experience, DX）來講，咱們但願前端可以快速，簡便和實用。這樣的優化不只使咱們的用戶和開發者滿意，也會顯着提升SEO排名, 由於Google的SEO排名會偏向於優化較好的頁面。

優化瀏覽器前端的方法：首先，咱們不能控制瀏覽器或者改變它的行爲方式，可是咱們能夠理解它的工做原理，用來優化咱們頁面的加載。幸運的是，瀏覽器行爲的基本原理至關穩定並有據可查，長時間內也不會顯着改變；其次，代碼，堆棧，結構和模式是咱們能夠控制的。他們更靈活，改變地更快，爲咱們提供更多的選擇。 

咱媽說別亂點連接之淺談CSRF攻擊

CSRF（Cross-site request forgery），它的中文名稱是跨站請求僞造，也被稱爲：one click attack/session riding，縮寫爲：CSRF/XSRF。

簡單地說，CSRF就是利用了咱們的登陸狀態或者受權狀態（請注意「利用」，並無竊取到），而後作一些損害咱們自身利益的事情。

從上面這個實例可知,完成CSRF攻擊流程：

1. 用戶登陸了信任的網站A，而且保存登陸狀態
2. 黑客找出網站A沒有防護的連接，經過社會工程學假裝，誘導點擊。
3. 只要登陸狀態保持，用戶主動訪問目標連接，則攻擊成功。

總結：CSRF可以攻擊的根本緣由是：服務器沒法識別你的來源是否可靠。

那麼防護的方法有不少：

1. 好比加上驗證碼。但這麼作很繁瑣，而且影響用戶體驗。
2. 好比轉帳須要二次密碼驗證，如今不少銀行就這麼搞的。
3. 確認來源是否可靠（推薦）

根據驗證是否可靠性思路，能夠有如下幾種方法：

• 驗證HTTP Referer 字段：HTTP協議裏面定義了一個訪問來源的字段，這個字段叫Referer。
• 服務端驗證請求的token一致性：實現原理：在服務端生成一個隨機的token，加入到HTTP請求參數中，服務器攔截請求，查看發送的token和服務端的是否一致，若一致，則容許請求；若不一致，則拒絕請求。
• Ajax防護CSRF

【譯文】瞭解XSS攻擊

跨站點腳本（Cross-site scripting，XSS）是一種容許攻擊者在另外一個用戶的瀏覽器中執行惡意腳本的腳本注入式攻擊。攻擊者並不直接鎖定受害者。而是利用一個受害者可能會訪問的存在漏洞的網站，經過這個網站間接把惡意代碼呈遞給受害者。對於受害者的瀏覽器而言，這些惡意代碼看上去就是網站正常的一部分，而網站也就無心中成了攻擊者的幫兇。

惡意代碼是如何注入的：對於攻擊者來講可以讓受害者瀏覽器執行惡意代碼的惟一方式，就是把代碼注入受害者從網站下載的頁面中。若是網站直接在頁面中呈現用戶輸入的內容的話，這種攻擊有可能得逞。由於攻擊者能夠以字符串的形式向頁面插入一段受害者瀏覽器可以執行的代碼。好比一段評論包含了"<script></script>"，頁面加載就中招了。

什麼是惡意腳本：Javascript的執行環境受到嚴格限制並只有很是有限的權限訪問用戶的文件和操做系統，因此不算特別惡意。惡意的有Javascript有權訪問一些用戶的敏感信息，好比cookie；Javascript可以經過XMLHttpRequest或者其餘一些機制發送帶有任何內容的HTTP請求到任何地址；Javascript可以經過DOM操做方法對當前頁面的HTML作任意修改。

惡意腳本的後果：攻擊者有能力發動如下幾類攻擊，Cookie竊取；Cookie竊取；釣魚網站（Phishing）。

很是值得注意的重要一點是，惡意代碼只有在受害者的瀏覽器中最終獲得解析以後纔算得上是惡意，這隻可能發生有XSS缺陷的站點上。

攻擊是如何工做的：攻擊者利用提交網站表單將一段惡意文本插入網站的數據庫中；受害者向網站請求頁面；網站從數據庫中取出惡意文本把它包含進返回給受害者的頁面中；受害者的瀏覽器執行返回頁面中的惡意腳本，把本身的cookie發送給攻擊者的服務器。

XSS攻擊類型：雖然XSS攻擊的終極目標是在受害者的瀏覽器中執行惡意腳本，可是實現這個目標的不一樣途徑仍是有根本上的差異的。有持續型XSS攻擊：惡意文原本源於網站的數據庫；反射型XSS攻擊：惡意文原本源於受害者的請求；基於DOM的XSS攻擊：利用客戶端而不是服務端代碼漏洞發動攻擊。

阻止XSS攻擊的方式：編碼，也就是轉義用戶的輸入，這樣瀏覽器就會把它解讀爲數據而不是代碼；校驗，也就是對用戶的輸入進行過濾，這樣瀏覽器仍然把它解讀爲代碼但當中已不存在惡意指令了。