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){// 判斷是否已空閑，如果在執行中，則直接returnreturn;}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：對齊標頭組件

結論:

CSS grids 適用于布局大畫面。它們使頁面的布局變得非常容易，甚至可以處理一些不規則和非對稱的設計。

Flexbox 非常適合對齊元素內的內容。你可以使用 Flex 來定位設計上一些較小的細節。

2D 布局適合使用 CSS grids（行與列）。

Flexbox 適用于單一維度的布局（行或列）。

共同學習并使用它們。

優化瀏覽器前端

為了提升用戶體驗（User Experience，UX），我們希望前端提供快速加載和執行的網頁。而對于提升開發者體驗（Developer Experience, DX）來說，我們希望前端能夠快速，簡便和實用。這樣的優化不僅使我們的用戶和開發者滿意，也會顯著提高SEO排名, 因為Google的SEO排名會偏向于優化較好的頁面。

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

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

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

簡單地說，CSRF就是利用了我們的登錄狀態或者授權狀態（請注意“利用”，并沒有竊取到），然后做一些損害我們自身利益的事情。

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

用戶登錄了信任的網站A，并且保存登錄狀態

黑客找出網站A沒有防御的鏈接，通過社會工程學偽裝，誘導點擊。

只要登錄狀態保持，用戶主動訪問目標鏈接，則攻擊成功。

總結：CSRF能夠攻擊的根本原因是：服務器無法識別你的來源是否可靠。

那么防御的方法有很多：

比如加上驗證碼。但這么做很繁瑣，并且影響用戶體驗。

比如轉賬需要二次密碼驗證，現在很多銀行就這么搞的。

確認來源是否可靠（推薦）

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

• 驗證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攻擊的方式：編碼，也就是轉義用戶的輸入，這樣瀏覽器就會把它解讀為數據而不是代碼；校驗，也就是對用戶的輸入進行過濾，這樣瀏覽器仍然把它解讀為代碼但當中已不存在惡意指令了。

?

轉載于:https://www.cnblogs.com/Chen-XiaoJun/p/6761197.html

總結

以上是生活随笔為你收集整理的文章阅读(二)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。