文章阅读(二)
js閉包其實不難，你需要的只是了解何時使用它
究竟什么是閉包？閉包在什么場景下使用？寫前端程序需要用到閉包嗎？我用jQuery也能寫的好好滴呀？閉包可以解決哪些問題？使用閉包會帶來哪些好處？
閉包是指可以包含自由（未綁定到特定對象）變量的代碼塊；這些變量不是在這個代碼塊內(nèi)或者任何全局上下文中定義的，而是在定義代碼塊的環(huán)境中定義（局部變量）。
包含兩方面：要執(zhí)行的代碼塊（由于自由變量被包含在代碼塊中，這些自由變量以及它們引用的對象沒有被釋放）和為自由變量提供綁定的計算環(huán)境（作用域）
既然所有函數(shù)都是閉包，還有必要專門提這個概念嗎？大多數(shù)函數(shù)被調(diào)用時(invoked)，使用的作用域和他們被定義時(defined)使用的作用域是同一個作用域，這種情況下，閉包神馬的，無關(guān)緊要。但是，當他們被invoked的時候，使用的作用域不同于他們定義時使用的作用域的時候，閉包就會變的非常有趣，并且開始有了很多的使用場景，這就是你之所以要掌握閉包的原因。
理解“閉包”：
- step1：掌握嵌套函數(shù)的詞法作用域規(guī)則(lexical scoping rules)。只要記住一點：詞法作用域的規(guī)則，即函數(shù)被執(zhí)行時(executed)使用的作用域鏈(scope chain)是 被定義 時的scope chain，而不是執(zhí)行時的scope chain，就可以很容易的理解閉包的行為了。
- step 2：掌握閉包的使用場景。
- 閉包經(jīng)典使用場景一：通過循環(huán)給頁面上多個dom節(jié)點綁定事件
- 閉包使用場景二：封裝變量
- 閉包使用場景三：延續(xù)局部變量的壽命
深入理解 JavaScript 異步?
Node.js 初體驗
- Node是個啥？
- 安裝Node
- npm的下載和使用
- 理解Node的模塊概念：在Node中，不同的功能組件被劃分成不同的模塊。應(yīng)用可以根據(jù)自己的需要來選擇使用合適的模塊。每個模塊都會暴露一些公共的方法或?qū)傩浴?/li>
- Node能做什么和它的優(yōu)勢：非阻塞；單線程；事件驅(qū)動。
- Node事件流概念：因為Node 采用的是事件驅(qū)動的模式，其中的很多模塊都會產(chǎn)生各種不同的事件，可由模塊來添加事件處理方法，所有能夠產(chǎn)生事件的對象都是事件模塊中的 EventEmitter 類的實例。
- 強大的File System 文件系統(tǒng)模塊：?Node?中的 fs 模塊用來對本地文件系統(tǒng)進行操作。文件的I/O是由標準POSIX函數(shù)封裝而成。需要使用require('fs')訪問這個模塊。所有的方法都提供了異步和同步兩種方式。
- 學(xué)習(xí)Node的總結(jié)：
2017，我們來聊聊 Node.js
新一代 JavaScript 的開發(fā)圖譜（2017）
我將會將這張地圖分為幾個你需要解決的問題，對于每個問題，我將會：
- 描述問題或工具需求
- 決定你需要選取哪種工具
- 討論為什么這樣選
- 給一些其他選擇
問題：
- 包管理
- JavaScript風(fēng)格
- 編譯
- Linting
- 打包工具
- 測試
- UI 庫／狀態(tài)管理
- DOM 操作和動畫
- 樣式
?JavaScript 中函數(shù)節(jié)流和函數(shù)去抖的講解
https://segmentfault.com/a/1190000002764479
http://www.topfe.cn/javascript/395.html
函數(shù)節(jié)流：在頻繁觸發(fā)的情況下，需要執(zhí)行的邏輯只有執(zhí)行完之后，才能繼續(xù)執(zhí)行下一次。
函數(shù)防抖：在頻繁觸發(fā)的情況下，只有足夠的空閑時間，才執(zhí)行代碼一次，如果沒有執(zhí)行完就清除掉，重新執(zhí)行邏輯。
應(yīng)用場景：高頻觸發(fā)以下方法
- 頁面滾動監(jiān)聽（onscroll）
- 窗口resize事件，等到窗口變化結(jié)束后才進行業(yè)務(wù)邏輯的運行
- 鼠標鍵盤 mousedown/keydown 事件
- 鼠標的進入移出事件（mouseenter/mouseleave）
- DOM 元素的拖拽功能實現(xiàn)（mousemove）
- 輸入框搜索等（keyup）
如何在 Vue.js 中使用第三方庫
在諸多 Vue.js 應(yīng)用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 庫. 但隨著項目越來越復(fù)雜, 可能會采取組件化和模塊化的方式來組織代碼, 還可能要使應(yīng)用支持不同環(huán)境下的服務(wù)端渲染. 除非你找到了一個簡單而又健壯的方式來引入這些庫供不同的組件和模塊使用, 不然, 這些第三方庫的管理會給你帶來一些麻煩.
補充：ES6標準發(fā)布后，module成為標準，標準的使用是以export指令導(dǎo)出接口，以import引入模塊，但是在我們一貫的node模塊中，我們采用的是CommonJS規(guī)范，使用require引入模塊，使用module.exports導(dǎo)出接口。在一個文件或模塊中，export、import可以有多個，export default僅有一個。 require和import。
本文將介紹一些在 Vue.js 中使用第三方庫的方式：
- 全局變量：在項目中添加第三方庫的最簡單方式是講其作為一個全局變量, 掛載到 window 對象上。這種方式不適合于服務(wù)端渲染, 因為服務(wù)端沒有 window 對象, 是 undefined, 當試圖去訪問屬性時會報錯。
- 在每個文件中引入：另一個簡單的方式是在每一個需要該庫的文件中導(dǎo)入。比較繁瑣, 并且?guī)淼膯栴}是: 你必須記住在哪些文件引用了該庫, 如果項目不再依賴這個庫時, 得去找到每一個引用該庫的文件并刪除該庫的引用. 如果構(gòu)建工具沒設(shè)置正確, 可能導(dǎo)致該庫的多份拷貝被引用。
- 優(yōu)雅的方式：在 Vuejs 項目中使用 JavaScript 庫的一個優(yōu)雅方式是講其代理到 Vue 的原型對象上去。Object.defineProperty(Vue.prototype, '$moment', { value: moment });
CSS Grid VS Flexbox：實例對比
CSS Grid布局這樣玩
理解 Flexbox：你需要知道的一切
- 挑戰(zhàn) 1：定位頁面部分
- 挑戰(zhàn) 2：將頁面變?yōu)轫憫?yīng)式頁面
- 挑戰(zhàn) 3：對齊標頭組件
結(jié)論:
優(yōu)化瀏覽器前端
為了提升用戶體驗（User Experience，UX），我們希望前端提供快速加載和執(zhí)行的網(wǎng)頁。而對于提升開發(fā)者體驗（Developer Experience, DX）來說，我們希望前端能夠快速，簡便和實用。這樣的優(yōu)化不僅使我們的用戶和開發(fā)者滿意，也會顯著提高SEO排名, 因為Google的SEO排名會偏向于優(yōu)化較好的頁面。
優(yōu)化瀏覽器前端的方法：首先，我們不能控制瀏覽器或者改變它的行為方式，但是我們可以理解它的工作原理，用來優(yōu)化我們頁面的加載。幸運的是，瀏覽器行為的基本原理相當穩(wěn)定并有據(jù)可查，長時間內(nèi)也不會顯著改變；其次，代碼，堆棧，結(jié)構(gòu)和模式是我們可以控制的。他們更靈活，改變地更快，為我們提供更多的選擇。?
咱媽說別亂點鏈接之淺談CSRF攻擊
CSRF（Cross-site request forgery），它的中文名稱是跨站請求偽造，也被稱為：one click attack/session riding，縮寫為：CSRF/XSRF。
簡單地說，CSRF就是利用了我們的登錄狀態(tài)或者授權(quán)狀態(tài)（請注意“利用”，并沒有竊取到），然后做一些損害我們自身利益的事情。
從上面這個實例可知,完成CSRF攻擊流程：
總結(jié)：CSRF能夠攻擊的根本原因是：服務(wù)器無法識別你的來源是否可靠。
那么防御的方法有很多：
根據(jù)驗證是否可靠性思路，可以有以下幾種方法：
- 驗證HTTP Referer 字段：HTTP協(xié)議里面定義了一個訪問來源的字段，這個字段叫Referer。
- 服務(wù)端驗證請求的token一致性：實現(xiàn)原理：在服務(wù)端生成一個隨機的token，加入到HTTP請求參數(shù)中，服務(wù)器攔截請求，查看發(fā)送的token和服務(wù)端的是否一致，若一致，則允許請求；若不一致，則拒絕請求。
- Ajax防御CSRF
【譯文】了解XSS攻擊
跨站點腳本（Cross-site scripting，XSS）是一種允許攻擊者在另一個用戶的瀏覽器中執(zhí)行惡意腳本的腳本注入式攻擊。攻擊者并不直接鎖定受害者。而是利用一個受害者可能會訪問的存在漏洞的網(wǎng)站，通過這個網(wǎng)站間接把惡意代碼呈遞給受害者。對于受害者的瀏覽器而言，這些惡意代碼看上去就是網(wǎng)站正常的一部分，而網(wǎng)站也就無意中成了攻擊者的幫兇。
惡意代碼是如何注入的：對于攻擊者來說能夠讓受害者瀏覽器執(zhí)行惡意代碼的唯一方式，就是把代碼注入受害者從網(wǎng)站下載的頁面中。如果網(wǎng)站直接在頁面中呈現(xiàn)用戶輸入的內(nèi)容的話，這種攻擊有可能得逞。因為攻擊者可以以字符串的形式向頁面插入一段受害者瀏覽器能夠執(zhí)行的代碼。比如一段評論包含了"<script></script>"，頁面加載就中招了。
什么是惡意腳本：Javascript的執(zhí)行環(huán)境受到嚴格限制并只有非常有限的權(quán)限訪問用戶的文件和操作系統(tǒng)，所以不算特別惡意。惡意的有Javascript有權(quán)訪問一些用戶的敏感信息，比如cookie；Javascript能夠通過XMLHttpRequest或者其他一些機制發(fā)送帶有任何內(nèi)容的HTTP請求到任何地址；Javascript能夠通過DOM操作方法對當前頁面的HTML做任意修改。
惡意腳本的后果：攻擊者有能力發(fā)動以下幾類攻擊，Cookie竊取；Cookie竊取；釣魚網(wǎng)站（Phishing）。
非常值得注意的重要一點是，惡意代碼只有在受害者的瀏覽器中最終得到解析之后才算得上是惡意，這只可能發(fā)生有XSS缺陷的站點上。
攻擊是如何工作的：攻擊者利用提交網(wǎng)站表單將一段惡意文本插入網(wǎng)站的數(shù)據(jù)庫中；受害者向網(wǎng)站請求頁面；網(wǎng)站從數(shù)據(jù)庫中取出惡意文本把它包含進返回給受害者的頁面中；受害者的瀏覽器執(zhí)行返回頁面中的惡意腳本，把自己的cookie發(fā)送給攻擊者的服務(wù)器。
XSS攻擊類型：雖然XSS攻擊的終極目標是在受害者的瀏覽器中執(zhí)行惡意腳本，但是實現(xiàn)這個目標的不同途徑還是有根本上的差別的。有持續(xù)型XSS攻擊：惡意文本來源于網(wǎng)站的數(shù)據(jù)庫；反射型XSS攻擊：惡意文本來源于受害者的請求；基于DOM的XSS攻擊：利用客戶端而不是服務(wù)端代碼漏洞發(fā)動攻擊。
阻止XSS攻擊的方式：編碼，也就是轉(zhuǎn)義用戶的輸入，這樣瀏覽器就會把它解讀為數(shù)據(jù)而不是代碼；校驗，也就是對用戶的輸入進行過濾，這樣瀏覽器仍然把它解讀為代碼但當中已不存在惡意指令了。
?
轉(zhuǎn)載于:https://www.cnblogs.com/Chen-XiaoJun/p/6761197.html
總結(jié)
- 上一篇： echo指令
- 下一篇： django 快速实现注册（四）