用 Yarn 你還能做這 5 件事 [譯]

在 JavaScript 領域中有幾個包管理器: npm，bower，component，和 volo。到本文為止，最受歡迎的包管理器是 npm。npm 客戶端提供了對 npm 注冊庫中成千上萬代碼的訪問。Facebook 推出了一款名叫 Yarn 的包管理器，聲稱比現有的 npm 客戶端更快，更可靠，更安全。

Yarn 是 一個由 Facebook 創建的新 JavaScript 包管理器。為開發者使用 JavaScript 開發 app 時提供了快速，高可用，并且安全的依賴管理。下面有可以用 Yarn 做的五件事情：

• 1. 離線工作
• 2. 從多個注冊表安裝
• 3. 快速獲取安裝包
• 4. 自動鎖定安裝包版本
• 5. 在不同的機器上以同樣的方式安裝依賴

前端自動化測試探索

測試是完善的研發體系中不可或缺的一環。前端同樣需要測試，你的css改動可能導致頁面錯位、js改動可能導致功能不正常。由于前端偏向GUI軟件的特殊性，盡管測試領域工具層出不窮，在前端的自動化測試上面卻實施并不廣泛，很多人依舊以手工測試為主。本文試圖探討前端自動化測試領域的工具和實踐。

為什么需要自動化測試？一個項目最終會經過快速迭代走向以維護為主的狀態，在合理的時機以合理的方式引入自動化測試能有效減少人工維護成本。自動化測試的收益可以簡單總結為：自動化的收益 = 迭代次數 * 全手動執行成本 - 首次自動化成本 - 維護次數 * 維護成本。對于自動化測試來說，相對于發現未知的問題，更傾向于避免可能的問題。

首先本文不會探討單元測試方向，因為單測已經有完善的工具體系。但前端開發中，除了一些框架和庫，愿意去寫單測的少之又少。另外單測維護成本較高，而且也沒法滿足前端測試的所有需求。前端自動化測試可以在幾個方向進行嘗試：

• 界面回歸測試 測試界面是否正常，這是前端測試最基礎的環節
• 功能測試 測試功能操作是否正常，由于涉及交互，這部分測試比界面測試會更復雜
• 性能測試 頁面性能越來越受到關注，并且性能需要在開發過程中持續關注，否則很容易隨著業務迭代而下降。
• 頁面特征檢測 有些動態區域無法通過界面對比進行測試、也沒有功能上的異常，但可能不符合需求。例如性能測試中移動端大圖素材檢測就是一種特征檢測，另外常見的還有頁面區塊靜態資源是否符合預期等等。

用github來展示你的前端頁面吧

全球架構師峰會

QQ空間前端工程

QQ空間的hybrid頁面首屏優化方案webso，因為活動頁面、運營頁面的需要，亦或者客戶端開發周期長，需要采用H5的技術方案，越來越多的H5頁面內嵌在客戶端里了, 即所謂hybrid形式。

QQ空間如何優化hybrid頁面：把H5頁面內嵌在QQ空間客戶端里面，是一個開發重點轉型的問題，也是面臨的新的優化課題。hybrid頁面主要體現在兩個客戶端：QQ空間客戶端和手Q客戶端

當初面臨的主要體驗問題是：

• 客戶端的webview啟動太慢，尤其是android上
• 頁面加載有白屏的過程所以我們的精力也主要集中于來解決這兩個問題。

中國第二屆CSS Conf總結

瀏覽器的渲染性能

• 你所做的頁面，不但要能被快速加載，還要能流暢運行：頁面的滾動要快速響應手指的動作，動畫和交互效果更要如絲般順滑。要想編寫高性能的web站點或應用，你需要充分了解瀏覽器是如何處理HTML/JavaScript/CSS的，從而確保你寫的代碼（或引用的第三方代碼）是盡可能高效的。
• 60fps和設備刷新率:當今大多數設備的屏幕刷新率都是 60次/秒 。因此，如果在頁面中有一個動畫或漸變效果，或者用戶正在滑動頁面，那么瀏覽器渲染動畫或頁面的每一幀的速率，也需要跟設備屏幕的刷新率保持一致。
• 像素渲染流水線:在編寫web頁面時，你需要理解你所寫的頁面代碼是如何被轉換成屏幕上顯示的像素的。這個轉換過程可以歸納為這樣的一個流水線，包含五個關鍵步驟：JavaScript、計算樣式、布局、繪制、渲染層合并。
• 課程：瀏覽器渲染性能

別再為了this發愁了------JS中的this機制

• 誤解一：this引用function本身
• 誤解二：this引用的是function的詞法作用域
• 規則一：默認綁定全局變量，當函數被單獨定義和調用的時候，應用的規則就是綁定全局變量
• 規則二：隱式綁定，函數調用時擁有一個上下文對象，就好像這個函數是屬于該對象的一樣
• 規則三：顯示綁定，bind()\apply()\call()函數
• 規則四：new新對象綁定，用new來調用，那么綁定的將是新創建的對象

JS 的 new 到底是干什么的？?

少做四件事

• 不用創建臨時對象，因為 new 會幫你做（你使用「this」就可以訪問到臨時對象）；
• 不用綁定原型，因為 new 會幫你做（new 為了知道原型在哪，所以指定原型的名字為 prototype）；
• 不用 return 臨時對象，因為 new 會幫你做；
• 不要給原型想名字了，因為 new 指定名字為 prototype。

做了什么

http://warjiang.github.io/devcat/2016/05/12/JS%E4%B8%ADnew%E5%88%B0%E5%BA%95%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88/?utm_source=tuicool&utm_medium=referral

• var o = new Object();
• o. __proto__ = A.prototype;//這里還記得之那個function里面的默認的屬性么?
• A.call(o)//由于這里this是指向o,可以把什么this.name/getName綁定到o上.
• 把這個o返回給a;//完成var a = new A()的過程.

2017前端性能優化清單?

https://www.w3ctech.com/topic/1945

一個項目的性能是非常重要的，除了要在技術層面上注意，更要在項目的設計之初就開始考慮，這樣才可以使性能的各種隱形需求完美的整合到項目中，隨著項目一起推進。性能最好具有可量化、可監測以及可改動的特性。網絡越來越復雜，對網絡的監控也變得越來越難，因為監測的過程會受到包括設備、瀏覽器、協議、網絡類型以及其他技術（CDN，ISP，緩存，代理服務器，防火墻，負載均衡器和服務器對性能的影響都很大）的很大影響。?

JavaScript嚴格模式?

ECMAScript 5的嚴格模式是JavaScript中的一種限制性更強的變種方式。嚴格模式不是一個子集：它在語義上與正常代碼有著明顯的差異。不支持嚴格模式的瀏覽器與支持嚴格模式的瀏覽器行為上也不一樣， 所以不要在未經嚴格模式特性測試情況下使用嚴格模式。嚴格模式可以與非嚴格模式共存，所以腳本可以逐漸的選擇性加入嚴格模式。

嚴格模式在語義上與正常的JavaScript有一些不同。 首先，嚴格模式會將JavaScript陷阱直接變成明顯的錯誤。其次，嚴格模式修正了一些引擎難以優化的錯誤：同樣的代碼有些時候嚴格模式會比非嚴格模式下更快。 第三，嚴格模式禁用了一些有可能在未來版本中定義的語法。
如果你想讓你的JavaScript代碼在嚴格模式下運行，可以參考轉換成嚴格模式。
有時，你會看到符合規范的、非嚴格模式被稱為"懶散模式"，這不是官方術語，但你應該注意到它.

JavaScript常用代碼總結

分享了一些常用JavaScript代碼，有：1.手機類型判斷、2.字符串長度、3.獲取url中的參數、4.js 綁定事件、5.當前瀏覽器JS的版本、6.全選/全不選、7.移除事件、8.回車提交、9.ajax提交等。

localStorage，您坑了嗎？

客戶端localStorage被寫滿時，導致功能無法正常使用，只能自己挖的坑自己填了。在填坑之前，我們先考慮了使用緩存需要注意的問題：

• 緩存只是為了提升性能，不能認為緩存一定可用，數據獲取失敗或寫入失敗都應該有后續的代替處理
• 有可能會存在部分緩存數據寫入之后，長期都未使用過或者代碼中已不再會使用該緩存（已失去效用的數據占用了空間）
• 緩存的使用都是開發直觀上的認為有需要，但是寫入之后，后續是否真正有使用到（可能該功能用戶只使用一次之后就不再使用），是否也是非必要占用了緩存的空間
• 數據緩存保存在客戶端，需要有一定的機制來控制緩存的增長或者做緩存的清除

從__proto__和prototype來深入理解JS對象和原型鏈

Object本身是構造函數，繼承了Function.prototype;Function也是對象，繼承了Object.prototype。

Object instanceof Function // true Function instanceof Object // true

那么具體到JS，ES規范是怎么說的？Function本身就是函數，Function.__proto__是標準的內置對象Function.prototype。Function.prototype.__proto__是標準的內置對象Object.prototype。

最后總結：先有Object.prototype（原型鏈頂端），Function.prototype繼承Object.prototype而產生，最后，Function和Object和其它構造函數繼承Function.prototype而產生。

該死的IEEE-754浮點數，說「約」就「約」，你的底線呢？以JS的名義來好好查查你

?

77% 的網站使用了至少有 1 個漏洞的 JavaScript 庫

在 Alexa 上的 top 5000 網站上跑了測試，發現數字達到了驚人的 76.6%，76.6% 的網站使用了至少包含 1 個漏洞的庫。

需要說明的是，沒有一個單一的解決方案可以解決這個問題。相反，需要的是將提高安全意識、使用更好的工具、一套簡單可維護的 JavaScript 前端實現方法等相結合（前端包管理工具的使用遠不像后端那樣普遍）。而這也僅僅是個開始。

但是，正如我們前面所說的，對此依舊滿懷信心。第三方 JavaScript 的安全問題是一個可解決的問題，只是比預想的需要更長的時間而已。

Sticky Footer，完美的絕對底部

form me:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>Document</title><style type="text/css">html,body{width: 100%;height: 100%;padding: 0;margin: 0;}.wrapper{width: 100%;min-height: 100%; /*必須使用min-height*/}.main{padding-bottom: 50px;}.footer{width: 100%;height: 50px;margin-top: -50px;background: #ccc;}</style> </head> <body><div class="wrapper"><div class="main">main</div></div><div class="footer">footer</div> </body> </html>

頁面的 HTML 結構:

<div class="wrapper"><div class="content"><!-- 頁面主體內容區域 --></div><div class="footer"><!-- 需要做到 Sticky Footer 效果的頁腳 --></div> </div>

• 實現方案一：absolute，通過絕對定位處理應該是常見的方案，只要使得頁腳一直定位在主容器預留占位位置。常用
• 實現方案二：calc，通過計算函數 calc 計算（視窗高度 - 頁腳高度）賦予內容區最小高度，不需要任何額外樣式處理，代碼量最少、最簡單。兼容性
• 實現方案三：table，通過 table 屬性使得頁面以表格的形態呈現。不建議使用
• 實現方案四：Flexbox，Flexbox 是非常適合實現這種效果的，使用 Flexbox 實現不僅不需要任何額外的元素，而且允許頁腳的高度是可變的。

JavaScript排序，不只是冒泡

https://segmentfault.com/a/1190000008796659

實例分析 JavaScript 詞法作用域

作用域是在運行時代碼中的某些特定部分中變量，函數和對象的可訪問性。換句話說，作用域決定了代碼區塊中變量和其他資源的可見性。

作用域有兩種常見的模型：詞法作用域(在詞法分析階段就確定了，不會改變。變量的作用域是在定義時決定而不是執行時決定)和動態作用域(在運行時根據程序的流程信息來動態確定的)。

• 如果一個文檔流中包含多個script代碼段（用script標簽分隔的js代碼或引入的js文件），它們的運行順序是：
• JavaScript 解析過程：
• JavaScript 執行過程：
• 實例分析：不同作用域中的同名變量；參數和同名變量

用Async函數簡化異步代碼

隨著 ES6 的到來(現在被稱作 ES2015)，除了引入 Promise 的規范，不需要請求那些數不盡的庫之外，我們還有了生成器。生成器可在函數內部停止執行，這意味著可把它們封裝在一個多用途的函數中，我們可在代碼移動到下一行之前等待異步操作完成。突然你的異步代碼可能就開始看起來同步了。

這只是第一步。異步函數因今年加入 ES2017，已進行標準化，本地支持也進一步優化。異步函數的理念是使用生成器進行異步編程，并給出他們自己的語義和語法。因此，你無須使用庫來獲取封裝的實用函數，因為這些都會在后臺處理。

async/await與Promises ：

• 鏈式操作： async 函數在這個方面甚至比 Promise 做得還好。使用 async 函數，只需要像編寫同步代碼那樣調用 asynchronousOperation
• 并發操作：Promise 還有另一個偉大的特性，它們可以同時進行多個異步操作，等他們全部完成之后再繼續進行其它事件。ES2015 規范中提供了 Promise.all()，Promise.all() 也可以當作 async 函數使用。
• 處理拒絕：使用Promise，傳遞給 then，作為其第二個參數，或者傳遞給 catch 方法。不使用 Promise API 中的方法，可以通過 try 和 catch 來處理。
• 中斷 Promise：拒絕原生的 Promise，只需要使用 Promise 構建函數中的 reject 就好，當然也可以直接拋出錯誤。在 async 函數中隨時隨地拋出錯誤，它總會被 Promise 抓住。

?

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

總結

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

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