JavaScript精編乾貨

淺析用 js 解析 xml 的方法

因爲項目上須要解析 xml，因而各類百度，而後本身總結了下各個主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，可是尚未深層次的研究。

裝 X - 創建本身的鬥圖網站庫

以前加過一個鬥圖羣，看到不少經典的表情，而後就收藏到了 QQ， 迫於本屌絲開不起某 Q 會員，就只能收藏到本地，沒法在其餘的電腦上使用。長此以往收藏的也愈來愈多了，可是管理就成了問題，每次合適的場景想起一張合適的圖，但怎麼都找不到了，因而乎，本屌絲打算本身寫一個鬥圖收藏網站。

解決怎麼拿到 JavaScript 異步函數的返回值？

上面全部的例子，在最新 chrome 上均可以運行。一個個小例子，點了點幾個名詞。固然也只是 「點」 而已，若是能提供讀者深刻學習相關知識點的一個 trigger，那麼老姚就心滿意足了。

程序媛學 JS 小記一筆——高階函數 / map/reduce/filter/sort/reverse

程序媛學習手記一則！

【原創】Bootstrap 文件上傳組件：bootstrap fileinput

以前的三篇介紹了下 bootstrap 的一些經常使用組件，發現博主對這種扁平化的風格有點着迷了。前兩天作一個 excel 導入的功能，前端使用原始的 input type='file'這種標籤，效果不忍直視，因而博主下定決心要找一個好看的上傳組件換掉它。既然 bootstrap 開源，那麼社區確定有不少關於它的組件，確定也有這種常見的上傳組件吧。通過一番查找，功夫不負有心人，仍是被博主找到了這個組件：bootstrap fileinput。在此記錄下，就算作個學習筆記，也給須要使用的朋友提供點方便。

一個方案 - 適配全部移動端網頁

作過移動端網頁的都知道，在一些高要求的移動網頁上解決 Iphone五、六、6p，的屏幕適配問題上花了很多功夫，但有時候仍是不盡滿意，各類設備上顯示還有稍微有一點差距的。我曾今也嘗試了不少辦法，也參考了別人加的思路，有的用 js，有的用媒體查詢，有的用一些比較新的單位 rm、rem 等等...... 我以爲仍是很麻煩，難道就沒有一個能夠一行代碼解決問題的方案嗎？通過我各類的嘗試以後終於有了，目前階段還沒發現 bug，若是有問題，還請不吝賜教!

推薦一款開源免費的窗口管理工具——HammerSpoon

推薦HammerSpoon，由於它的窗口管理功能足夠強大。並且對開發者很友好，有控制檯能夠 Debug。語言採用 Lua，不難上手。另外，還有茫茫多的系統 API 能夠隨意調用。因此說，HammerSpoon 毫不僅僅是一個窗口管理軟件

javascript 之 - 深刻事件機制

原生 js 的事件綁定方式有幾種？想必有不少朋友說 3 種！ 目前，在本人目前的研究中，只有兩種半！兩種半？還有半種的？且聽我道來。

在 Linux 系統下運行微信 Web 開發者工具

微信 Web 開發者工具只有 window 版本和 mac 版本，若是想要在 Linux 系統下運行微信 Web 開發者工具，須要花費很大週摺。

推薦一款帶暫停功能的輪播組件，不要謝我，我叫紅領巾！

關於輪播組件，那確定是一搜一大把，實在不行本身寫貌似也不難。最近博主在項目中用到一款輪播組件，功能齊全，能夠設置各類標題樣式、動畫效果、輪播時間、開始暫停等功能，在此推薦給你們，供你們參考。相信有你須要的效果。

一入前端深似海，今後紅塵是路人系列第八彈之淺析 Vue 組件開發

這裏講的主要是想談談基於 Vue 的一個組件開發。不得不說的一點就是，在實際的 Vue 項目中，頁面中每個小塊都是由一個個組件（.vue 文件）組成，通過抽離後，而後再合併一塊兒組成一個頁面。因爲上家公司我負責多的是可視化這一塊的開發，這邊我也將帶着你們進行一個 Vue 項目中的可視化組件的開發，這裏用到的框架將是主流的可視化框架 highcharts。

Mac 小白必讀系列：你可能不知道的 Mac 技巧 - macOS 的窗口、標籤與工做區

很多朋友剛上手 Mac，對 macOS 系統提供的功能會很不適應，確實，有些功能隱藏的比較深，多少會影響些效率。我是一個作前端開發的菜雞，因此這個系列多少也會涉及到一些開發相關的配置，寫給有須要的朋友。文中提到的功能，強烈建議你們邊看邊試，有些東西文字描述起來會很複雜，本身操做一下就明白了，其實都很簡單

詳解：怎樣實現前端裁剪上傳圖片功能

因爲前端是不能直接操做本地文件的，要麼經過用戶點擊選擇文件或者拖拽的方式，要麼使用 flash 等第三方的控件，但 flash 日漸衰落，因此使用 flash 仍是不提倡的。同時 html5 崛起，提供了不少的 api 操控，能夠在前端使用原生的 api 實現圖片的處理，這樣能夠減小後端服務器的壓力，同時對用戶也是友好的。

【原創】Bootstrap 組件福利篇：幾款好用的組件推薦，你值得擁有！（二）

關於文本框的多值輸入，一直是一個比較常見的需求，今天博主推薦一款好用的多值輸入組件給你們，不要謝我，請叫我 「紅領巾」！

https 時代來了，你卻還一無所知？

如今打開各大知名網站，你有沒有發現地址欄都已經加了個綠色的小鎖？是的，這就是 https，這就是 https 的時代。

$.each 串聯起來的知識點

其實內容來講都是很簡單的，本文算是 zepto 的部分源碼分析了。其中 break 和 continue 的等價用法仍是須要掌握的。至於源碼都不是很難的東西，尤爲是後面的判斷類型的方法，判斷是否是 window 和 document 的實現都是經典的實現。

Mac小白必讀系列：你可能不知道的 Mac 技巧 - 文本操做篇

我知道，相似的文章網上一搜一大把。做爲一個只用 Mac 搞了不到一年開發的菜雞，不少功能我也還在摸索中。本文旨在把本身積累的一些小技巧與你們分享，任何疑問、意見、建議，請在下方留言評論

從 Chrome 源碼看瀏覽器如何計算 CSS

瀏覽器每收到一段 html 的文本以後，就會把它序列化成一個個的 tokens，依次遍歷這些 token，實例化成對應的 html 結點並插入到 DOM 樹裏面。我將在這一篇介紹第二步 Style 的過程，即 CSS 的處理。

情不知所起，一 「網」 而深

你只看到個人程序，卻沒有看到背後的代碼；你有你的選擇 ，我有個人堅持 ；你嘲笑我假期過節不回家陪父母，我可憐你只在家向父母衣食伸手；你能夠輕視個人道路，我會證實這是誰的時代！編程是註定孤獨的旅行，路上少不了質疑和嘲笑；但那又怎樣，哪怕代碼千萬行，我也要讓 bug 無處藏，編就編的漂亮。

老姚淺談：怎麼學 JavaScript？

鑑於時不時，有同窗私信問我（老姚，下同）怎麼學前端的問題。這裏統一回復一下，以下次再遇到問我此問題同窗，就直接把本文連接地址發給你了。

福利 - 不過百行代碼的爬蟲爬取美女圖

閒的無聊，看到一個段子網站的美女福利還不錯，迫於福利加載太慢看的不過癮，就想用 Nodejs 寫個簡單爬蟲所有爬下來看多好..... 此處省略 5000 字.....

JavaScript 實現點擊按鈕複製指定區域文本

html5 的 webAPI 接口能夠很輕鬆的使用短短的幾行代碼就實現點擊按鈕複製區域文本的功能，不須要依賴 flash。

兩種文件上傳的實現－Ajax 上傳和 form+iframe

話說如今不少不少項目須要用到文件上傳，自從有了 HTML5 以後，上傳就變的超級簡單了。HTML5 支持多圖片上傳，並且支持 ajax 上傳！並且支持上傳以前圖片的預覽！並且支持圖片拖拽上傳！並且仍是純粹利用 file 控件實現！並且代碼還超級簡單！！！原諒我這個沒見過世面的人這麼激動 ==，可是說真的，有這麼多優勢，想不讓人稱讚都難啊！

老姚談：JavaScript 中 prototype 的本質

老姚談：JavaScript 中 prototype 的本質系列文章！此係列共有 5 篇文章，帶你更深入的瞭解 JavaScript 中的 prototype 的本質！但願對你們有用！

鍵盤俠的利器：利用 HammerSpoon 實現音樂播放的全局鍵盤控制

擼碼的時候聽到不喜歡的音樂會不會想立刻下一曲，可是又不想切換程序呢。本身利用 HammerSpoon 捯飭的一個實現音樂播放的全局鍵盤控制的工具。擼碼聽歌，全局控制。感興趣的朋友能夠先試用一下，提提意見和建議。

移動適配的幾種方式

分享幾種移動適配的方式，但願對你們有用~

減小前端代碼耦合

什麼是代碼耦合？代碼耦合的表現是改了一點毛髮而牽動了全身，或者是想要改點東西，須要在一堆代碼裏面找半天。因爲前端須要組織 js/css/html，耦合的問題可能會更加明顯，下面按照耦合的狀況分別說明

從 Chrome 源碼看瀏覽器的事件機制

在上一篇《從 Chrome 源碼看瀏覽器如何構建 DOM 樹》介紹了 blink 如何建立一棵 DOM 樹，在這一篇將介紹事件機制。
上一篇還有一個地方未說起，那就是在構建完 DOM 以後，瀏覽器將會觸發 DOMContentLoaded 事件，這個事件是在處理 tokens 的時候遇到 EndOfFile 標誌符時觸發的

從 Chrome 源碼看瀏覽器如何構建 DOM 樹

這幾天下了 Chrome 的源碼，安裝了一個 debug 版的 Chromium 研究了一下，雖然不少地方都只知其一;不知其二，可是仍是有一點收穫，將在這篇文章介紹 DOM 樹是如何構建的，看了本文應該能夠回答如下問題：

搭建大型源碼閱讀環境——使用 OpenGrok

RTFSC 是程序員打怪升級路上避不開的功課，那營造一個溫馨的環境來提高上課的體驗就頗有必要了。好比閱讀 AOSP 這種大型源碼，用什麼姿式來閱讀才能絲般順滑，讓 F**king Source Code 也變得不那麼可惡呢？

從 Chrome 源碼看瀏覽器如何 layout 佈局

例如筆者就遇到一個奇芭的問題，就是使用 height: calc(100% - 80px) 的時候，在手機 Safari 上面展開某個子菜單時，偶現菜單滑不動的狀況。當時就想極可能是在 Safari 在展開菜單時高度算錯了，致使 overflow: auto 無論用。因此在展開菜單後再手手動計算和設置 height，而後就解決問題了。

深刻認識 Document

前端開發中或多或少都要對 DOM 進行一些操做，好比咱們經常使用的一些方法：document.getElementById("");document.querySelectorAll("");document.getElementsByClassName();document.createElement()...... 等等一系列的方法, 這些方式是從哪裏來的呢？在哪裏定義的呢？咱們就一塊兒來測試一下。

使用 LsLoader 優化 webpack2 應用加載性能，實現按 chunks 加載 web 應用

春節放假前打開知乎整理整理文章，發現 7 個月前開源的知乎專欄文章 LsLoader, 對 AMD 模式和 webpack1 打包的移動端網站技術進行了詳解，基本原理是利用對 AMD 語法的分析拆分請求，本地緩存，而後按需 combo 變化的代碼。滴

前端開發者進階之路

從畢業到如今也工做了一年多了，在這一年多裏面，我感受我是很幸運的，有和諧的團隊氛圍、哲學的 leader 和開放的環境。在這樣的環境中，個人成長不只僅侷限於技術棧的積累，更重要的是收穫了一個清晰的發展方向，讓本身在前端的道路上看的更遠，更清晰。這裏主要分享下我在成長道路上一點收穫和想法，主要講述了一些前端領域須要注意的地方，但願能夠帶給新人一些啓發，讓他們在前端的道路上走的順暢點。

Effective 前端 6：避免頁面卡頓

當拖動頁面或者滾動的時候頁面一卡一卡的，看起來不連貫，咱們就說頁面卡了，這是一種很是不友好的體驗，怎麼衡量頁面卡頓的狀況呢？

框架基礎：ajax 設計方案（三）--- 集成 ajax 上傳技術 大文件 / 超大文件前端切割上傳，後端進行重組

上次作了前端的 ajax 的上傳文件技術，支持單文件，多文件上傳，並對文件的格式和大小進行檢查和限制。可是上次還有個心結一直沒解開，就是原本前端瀏覽器的文件切割已經好了，可是後臺文件重組一直沒搞明白和處理好，因此就擱置了。主要也是對本身的代碼負責，由於本身自己都沒把這個技術搞透徹，外加各類測試都沒經過，不想這樣打臉。因此這個心結一直憋了很久，作夢都在想。終於功夫不負有心人，這周終於將這個問題幹掉了，一個字：爽！！！下面我們直接幹！！

如何合理利用 Git 進行團隊協做 (一)

團隊項目開發中，常見的版本控制有 svn，git 等。這裏我將向你們分享一下 TX 是如何合理利用 Git 進行一個團隊的協做開發。

網頁中實現正六邊形的 N種姿式

常常在別人家的網頁上看到各中好看圖形，其中就有正六邊形和組合的蜂窩狀圖形。今天咱們來盤點一下，網頁上有哪些姿式實現這個效果

【福利】成爲專業程序員路上用到的各類優秀資料、神器及框架

本文是鄙人工做這幾年隨手收集整理的一些自認爲還不錯的資料，成長的道理上須要積累，這麼長時間了，是時候放出來分享下了，或許能幫助到你。歡迎點贊，讓更多人看到，讓福利普照。由於本文之後不會更新，但項目依舊會更新。

移動端模擬 IOS 虛擬按鈕效果

用過蘋果的你們都知道，蘋果公司作了一個虛擬按鈕，讓頁面上的掛件可被拖拽並吸附到屏幕邊框處，下降掛件對用戶的干擾。該效果若是用 JavaScript 進行實現又該如何實現呢，接下來我將分享給你們。首先上一張效果圖

Mac 小白必讀系列：你可能不知道的 Mac 技巧 - 截圖，Gif 製做及 App 推薦

找不到 Mac 上的 Home，End，PageUp？想截圖還得打開 QQ？不知道 Mac 如何剪切文件？找不到全屏窗口的按鈕？找不到隱藏文件夾？不知道如何向後刪除？想少用鼠標，多用鍵盤？……

Mac 小白必讀系列：你可能不知道的 Mac 技巧 - 截圖，Gif 製做及 App 推薦

找不到 Mac 上的 Home，End，PageUp？想截圖還得打開 QQ？不知道 Mac 如何剪切文件？找不到全屏窗口的按鈕？找不到隱藏文件夾？不知道如何向後刪除？想少用鼠標，多用鍵盤？……
但願個人這一系列博文能幫到你

史上最 「腦殘」 的「搶火車票」程序（node.js 版）

快過年了，我媽一個電話打過來叫我給他買火車票，我到 12306 一查，硬座和硬臥基本沒有了，高鐵又太貴。最後只搶了 3 張無座票，可是我媽說能不能買有座位的啊，我說沒有了啊，我媽：你過兩天再幫我看看。我：... 爲了幫老媽搶到有座的票，後來用了 360 搶票插件，還用了網上的一個別人用 c# 寫的客戶端來搶票，媽的，用了兩三天都沒用。最後仍是打算本身用 node 寫一個，當時個人想法就是寫個簡單的，能用就行。

【原創】Bootstrap組件福利篇：幾款好用的組件推薦，你值得擁有！（一）

bootstrap 風格的時間組件很是多，你能夠在 github 上面隨便搜索 「datepicker」 關鍵字，能夠找到不少的時間組件。博主原來也用過其中的兩個，發現都會有一些大大小小的問題。通過一番篩選，找到一個效果不錯、能適用各類場景的時間組件，下面就來一睹它的風采吧。

關於前端性能優化的 23 條建議

前端性能優化是個巨大的課題，若是要面面俱到的說的話，估計三天三夜說不完。因此咱們就從實際的工程應用角度出發，聊咱們最常碰見的前端優化問題。Yslow 是雅虎開發的基於網頁性能分析瀏覽器插件，能夠檢測出網頁的具體性能值，而且有著名的 Yslow 23 條優化規則，這 23 條，就夠咱們玩的了。