文章收藏(一)

時間 2019-11-18

標籤文章收藏简体版

原文原文鏈接

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

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

Yarn 是一個由 Facebook 建立的新 JavaScript 包管理器。爲開發者使用 JavaScript 開發 app 時提供了快速，高可用，而且安全的依賴管理。下面有能夠用 Yarn 作的五件事情：css

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

前端自動化測試探索

測試是完善的研發體系中不可或缺的一環。前端一樣須要測試，你的css改動可能致使頁面錯位、js改動可能致使功能不正常。因爲前端偏向GUI軟件的特殊性，儘管測試領域工具層出不窮，在前端的自動化測試上面卻實施並不普遍，不少人依舊以手工測試爲主。本文試圖探討前端自動化測試領域的工具和實踐。html

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

首先本文不會探討單元測試方向，由於單測已經有完善的工具體系。但前端開發中，除了一些框架和庫，願意去寫單測的少之又少。另外單測維護成本較高，並且也無法知足前端測試的全部需求。前端自動化測試能夠在幾個方向進行嘗試：java

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

QQ空間前端工程

QQ空間的hybrid頁面首屏優化方案webso，由於活動頁面、運營頁面的須要，亦或者客戶端開發週期長，須要採用H5的技術方案，愈來愈多的H5頁面內嵌在客戶端裏了, 即所謂hybrid形式。android

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

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

客戶端的webview啓動太慢，尤爲是android上
頁面加載有白屏的過程因此咱們的精力也主要集中於來解決這兩個問題。

瀏覽器的渲染性能

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

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

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

JS 的 new 究竟是幹什麼的？

少作四件事web

不用建立臨時對象，由於 new 會幫你作（你使用「this」就能夠訪問到臨時對象）；
不用綁定原型，由於 new 會幫你作（new 爲了知道原型在哪，因此指定原型的名字爲 prototype）；
不用 return 臨時對象，由於 new 會幫你作；
不要給原型想名字了，由於 new 指定名字爲 prototype。

作了什麼ajax

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 抓住。