摘要：老姚淺談怎么學(xué)鑒于時(shí)不時(shí)，有同學(xué)私信問我老姚，下同怎么學(xué)前端的問題。擼碼聽歌，全局控制。

由于項(xiàng)目上需要解析 xml，于是各種百度，然后自己總結(jié)了下各個(gè)主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒有深層次的研究。

之前加過一個(gè)斗圖群，看到很多經(jīng)典的表情，然后就收藏到了 QQ， 迫于本屌絲開不起某 Q 會(huì)員，就只能收藏到本地，無(wú)法在其他的電腦上使用。久而久之收藏的也越來越多了，但是管理就成了問題，每次合適的場(chǎng)景想起一張合適的圖，但怎么都找不到了，于是乎，本屌絲打算自己寫一個(gè)斗圖收藏網(wǎng)站。

上面所有的例子，在最新 chrome 上都可以運(yùn)行。一個(gè)個(gè)小例子，點(diǎn)了點(diǎn)幾個(gè)名詞。當(dāng)然也只是 “點(diǎn)” 而已，如果能提供讀者深入學(xué)習(xí)相關(guān)知識(shí)點(diǎn)的一個(gè) trigger，那么老姚就心滿意足了。

程序媛學(xué)習(xí)手記一則！

之前的三篇介紹了下 bootstrap 的一些常用組件，發(fā)現(xiàn)博主對(duì)這種扁平化的風(fēng)格有點(diǎn)著迷了。前兩天做一個(gè) excel 導(dǎo)入的功能，前端使用原始的 input type="file"這種標(biāo)簽，效果不忍直視，于是博主下定決心要找一個(gè)好看的上傳組件換掉它。既然 bootstrap 開源，那么社區(qū)肯定有很多關(guān)于它的組件，肯定也有這種常見的上傳組件吧。經(jīng)過一番查找，功夫不負(fù)有心人，還是被博主找到了這個(gè)組件：bootstrap fileinput。在此記錄下，就算做個(gè)學(xué)習(xí)筆記，也給需要使用的朋友提供點(diǎn)方便。

做過移動(dòng)端網(wǎng)頁(yè)的都知道，在一些高要求的移動(dòng)網(wǎng)頁(yè)上解決 Iphone5、6、6p，的屏幕適配問題上花了不少功夫，但有時(shí)候還是不盡滿意，各種設(shè)備上顯示還有稍微有一點(diǎn)差距的。我曾今也嘗試了很多辦法，也參考了別人加的思路，有的用 js，有的用媒體查詢，有的用一些比較新的單位 rm、rem 等等...... 我覺得還是很麻煩，難道就沒有一個(gè)可以一行代碼解決問題的方案嗎？經(jīng)過我各種的嘗試之后終于有了，目前階段還沒發(fā)現(xiàn) bug，如果有問題，還請(qǐng)不吝賜教!

推薦HammerSpoon，因?yàn)樗拇翱诠芾砉δ茏銐驈?qiáng)大。而且對(duì)開發(fā)者很友好，有控制臺(tái)可以 Debug。語(yǔ)言采用 Lua，不難上手。另外，還有茫茫多的系統(tǒng) API 可以隨意調(diào)用。所以說，HammerSpoon 絕不僅僅是一個(gè)窗口管理軟件

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

微信 Web 開發(fā)者工具只有 window 版本和 mac 版本，如果想要在 Linux 系統(tǒng)下運(yùn)行微信 Web 開發(fā)者工具，需要花費(fèi)很大周折。

關(guān)于輪播組件，那肯定是一搜一大把，實(shí)在不行自己寫貌似也不難。最近博主在項(xiàng)目中用到一款輪播組件，功能齊全，可以設(shè)置各種標(biāo)題樣式、動(dòng)畫效果、輪播時(shí)間、開始暫停等功能，在此推薦給大家，供大家參考。相信有你需要的效果。

這里講的主要是想談?wù)劵?Vue 的一個(gè)組件開發(fā)。不得不說的一點(diǎn)就是，在實(shí)際的 Vue 項(xiàng)目中，頁(yè)面中每一個(gè)小塊都是由一個(gè)個(gè)組件（.vue 文件）組成，經(jīng)過抽離后，然后再合并一起組成一個(gè)頁(yè)面。由于上家公司我負(fù)責(zé)多的是可視化這一塊的開發(fā)，這邊我也將帶著大家進(jìn)行一個(gè) Vue 項(xiàng)目中的可視化組件的開發(fā)，這里用到的框架將是主流的可視化框架 highcharts。

不少朋友剛上手 Mac，對(duì) macOS 系統(tǒng)提供的功能會(huì)很不適應(yīng)，確實(shí)，有些功能隱藏的比較深，多少會(huì)影響些效率。我是一個(gè)做前端開發(fā)的菜雞，所以這個(gè)系列多少也會(huì)涉及到一些開發(fā)相關(guān)的配置，寫給有需要的朋友。文中提到的功能，強(qiáng)烈建議大家邊看邊試，有些東西文字描述起來會(huì)很復(fù)雜，自己操作一下就明白了，其實(shí)都很簡(jiǎn)單

由于前端是不能直接操作本地文件的，要么通過用戶點(diǎn)擊選擇文件或者拖拽的方式，要么使用 flash 等第三方的控件，但 flash 日漸衰落，所以使用 flash 還是不提倡的。同時(shí) html5 崛起，提供了很多的 api 操控，可以在前端使用原生的 api 實(shí)現(xiàn)圖片的處理，這樣可以減少后端服務(wù)器的壓力，同時(shí)對(duì)用戶也是友好的。

關(guān)于文本框的多值輸入，一直是一個(gè)比較常見的需求，今天博主推薦一款好用的多值輸入組件給大家，不要謝我，請(qǐng)叫我 “紅領(lǐng)巾”！

現(xiàn)在打開各大知名網(wǎng)站，你有沒有發(fā)現(xiàn)地址欄都已經(jīng)加了個(gè)綠色的小鎖？是的，這就是 https，這就是 https 的時(shí)代。

其實(shí)內(nèi)容來說都是很簡(jiǎn)單的，本文算是 zepto 的部分源碼分析了。其中 break 和 continue 的等價(jià)用法還是需要掌握的。至于源碼都不是很難的東西，尤其是后面的判斷類型的方法，判斷是不是 window 和 document 的實(shí)現(xiàn)都是經(jīng)典的實(shí)現(xiàn)。

我知道，類似的文章網(wǎng)上一搜一大把。作為一個(gè)只用 Mac 搞了不到一年開發(fā)的菜雞，很多功能我也還在摸索中。本文旨在把自己積累的一些小技巧與大家分享，任何疑問、意見、建議，請(qǐng)?jiān)谙路搅粞栽u(píng)論

瀏覽器每收到一段 html 的文本之后，就會(huì)把它序列化成一個(gè)個(gè)的 tokens，依次遍歷這些 token，實(shí)例化成對(duì)應(yīng)的 html 結(jié)點(diǎn)并插入到 DOM 樹里面。我將在這一篇介紹第二步 Style 的過程，即 CSS 的處理。

你只看到我的程序，卻沒有看到背后的代碼；你有你的選擇 ，我有我的堅(jiān)持 ；你嘲笑我假期過節(jié)不回家陪父母，我可憐你只在家向父母衣食伸手；你可以輕視我的道路，我會(huì)證明這是誰(shuí)的時(shí)代！編程是注定孤獨(dú)的旅行，路上少不了質(zhì)疑和嘲笑；但那又怎樣，哪怕代碼千萬(wàn)行，我也要讓 bug 無(wú)處藏，編就編的漂亮。

鑒于時(shí)不時(shí)，有同學(xué)私信問我（老姚，下同）怎么學(xué)前端的問題。這里統(tǒng)一回復(fù)一下，如下次再遇到問我此問題同學(xué)，就直接把本文鏈接地址發(fā)給你了。

閑的無(wú)聊，看到一個(gè)段子網(wǎng)站的美女福利還不錯(cuò)，迫于福利加載太慢看的不過癮，就想用 Nodejs 寫個(gè)簡(jiǎn)單爬蟲全部爬下來看多好..... 此處省略 5000 字.....

html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制區(qū)域文本的功能，不需要依賴 flash。

話說現(xiàn)在很多很多項(xiàng)目需要用到文件上傳，自從有了 HTML5 之后，上傳就變的超級(jí)簡(jiǎn)單了。HTML5 支持多圖片上傳，而且支持 ajax 上傳！而且支持上傳之前圖片的預(yù)覽！而且支持圖片拖拽上傳！而且還是純粹利用 file 控件實(shí)現(xiàn)！而且代碼還超級(jí)簡(jiǎn)單！！！原諒我這個(gè)沒見過世面的人這么激動(dòng) ==，但是說真的，有這么多優(yōu)點(diǎn)，想不讓人稱贊都難啊！

老姚談：JavaScript 中 prototype 的本質(zhì)系列文章！此系列共有 5 篇文章，帶你更深刻的了解 JavaScript 中的 prototype 的本質(zhì)！希望對(duì)大家有用！

擼碼的時(shí)候聽到不喜歡的音樂會(huì)不會(huì)想馬上下一曲，但是又不想切換程序呢。自己利用 HammerSpoon 捯飭的一個(gè)實(shí)現(xiàn)音樂播放的全局鍵盤控制的工具。擼碼聽歌，全局控制。感興趣的朋友可以先試用一下，提提意見和建議。

分享幾種移動(dòng)適配的方式，希望對(duì)大家有用~

什么是代碼耦合？代碼耦合的表現(xiàn)是改了一點(diǎn)毛發(fā)而牽動(dòng)了全身，或者是想要改點(diǎn)東西，需要在一堆代碼里面找半天。由于前端需要組織 js/css/html，耦合的問題可能會(huì)更加明顯，下面按照耦合的情況分別說明

在上一篇《從 Chrome 源碼看瀏覽器如何構(gòu)建 DOM 樹》介紹了 blink 如何創(chuàng)建一棵 DOM 樹，在這一篇將介紹事件機(jī)制。
上一篇還有一個(gè)地方未提及，那就是在構(gòu)建完 DOM 之后，瀏覽器將會(huì)觸發(fā) DOMContentLoaded 事件，這個(gè)事件是在處理 tokens 的時(shí)候遇到 EndOfFile 標(biāo)志符時(shí)觸發(fā)的

這幾天下了 Chrome 的源碼，安裝了一個(gè) debug 版的 Chromium 研究了一下，雖然很多地方都一知半解，但是還是有一點(diǎn)收獲，將在這篇文章介紹 DOM 樹是如何構(gòu)建的，看了本文應(yīng)該可以回答以下問題：

RTFSC 是程序員打怪升級(jí)路上避不開的功課，那營(yíng)造一個(gè)舒適的環(huán)境來提升上課的體驗(yàn)就很有必要了。比如閱讀 AOSP 這種大型源碼，用什么姿勢(shì)來閱讀才能絲般順滑，讓 F**king Source Code 也變得不那么可惡呢？

例如筆者就遇到一個(gè)奇芭的問題，就是使用 height: calc(100% - 80px) 的時(shí)候，在手機(jī) Safari 上面展開某個(gè)子菜單時(shí)，偶現(xiàn)菜單滑不動(dòng)的情況。當(dāng)時(shí)就想很可能是在 Safari 在展開菜單時(shí)高度算錯(cuò)了，導(dǎo)致 overflow: auto 不管用。所以在展開菜單后再手手動(dòng)計(jì)算和設(shè)置 height，然后就解決問題了。

前端開發(fā)中或多或少都要對(duì) DOM 進(jìn)行一些操作，比如我們常用的一些方法：document.getElementById("");document.querySelectorAll("");document.getElementsByClassName();document.createElement()...... 等等一系列的方法, 這些方式是從哪里來的呢？在哪里定義的呢？我們就一起來測(cè)試一下。

春節(jié)放假前打開知乎整理整理文章，發(fā)現(xiàn) 7 個(gè)月前開源的知乎專欄文章 LsLoader, 對(duì) AMD 模式和 webpack1 打包的移動(dòng)端網(wǎng)站技術(shù)進(jìn)行了詳解，基本原理是利用對(duì) AMD 語(yǔ)法的分析拆分請(qǐng)求，本地緩存，然后按需 combo 變化的代碼。滴

從畢業(yè)到現(xiàn)在也工作了一年多了，在這一年多里面，我感覺我是很幸運(yùn)的，有和諧的團(tuán)隊(duì)氛圍、哲學(xué)的 leader 和開放的環(huán)境。在這樣的環(huán)境中，我的成長(zhǎng)不僅僅局限于技術(shù)棧的積累，更重要的是收獲了一個(gè)清晰的發(fā)展方向，讓自己在前端的道路上看的更遠(yuǎn)，更清晰。這里主要分享下我在成長(zhǎng)道路上一點(diǎn)收獲和想法，主要講述了一些前端領(lǐng)域需要注意的地方，希望可以帶給新人一些啟發(fā)，讓他們?cè)谇岸说牡缆飞献叩捻槙滁c(diǎn)。

當(dāng)拖動(dòng)頁(yè)面或者滾動(dòng)的時(shí)候頁(yè)面一卡一卡的，看起來不連貫，我們就說頁(yè)面卡了，這是一種非常不友好的體驗(yàn)，怎么衡量頁(yè)面卡頓的情況呢？

上次做了前端的 ajax 的上傳文件技術(shù)，支持單文件，多文件上傳，并對(duì)文件的格式和大小進(jìn)行檢查和限制。但是上次還有個(gè)心結(jié)一直沒解開，就是本來前端瀏覽器的文件切割已經(jīng)好了，但是后臺(tái)文件重組一直沒搞明白和處理好，所以就擱置了。主要也是對(duì)自己的代碼負(fù)責(zé)，因?yàn)樽约罕旧矶紱]把這個(gè)技術(shù)搞透徹，外加各種測(cè)試都沒通過，不想這樣打臉。所以這個(gè)心結(jié)一直憋了好久，做夢(mèng)都在想。終于功夫不負(fù)有心人，這周終于將這個(gè)問題干掉了，一個(gè)字：爽！！！下面咱們直接干！！

團(tuán)隊(duì)項(xiàng)目開發(fā)中，常見的版本控制有 svn，git 等。這里我將向大家分享一下 TX 是如何合理利用 Git 進(jìn)行一個(gè)團(tuán)隊(duì)的協(xié)作開發(fā)。

經(jīng)常在別人家的網(wǎng)頁(yè)上看到各中好看圖形，其中就有正六邊形和組合的蜂窩狀圖形。今天我們來盤點(diǎn)一下，網(wǎng)頁(yè)上有哪些姿勢(shì)實(shí)現(xiàn)這個(gè)效果

本文是鄙人工作這幾年隨手收集整理的一些自認(rèn)為還不錯(cuò)的資料，成長(zhǎng)的道理上需要積累，這么長(zhǎng)時(shí)間了，是時(shí)候放出來分享下了，或許能幫助到你。歡迎點(diǎn)贊，讓更多人看到，讓福利普照。因?yàn)楸疚囊院蟛粫?huì)更新，但項(xiàng)目依舊會(huì)更新。

用過蘋果的大家都知道，蘋果公司做了一個(gè)虛擬按鈕，讓頁(yè)面上的掛件可被拖拽并吸附到屏幕邊框處，降低掛件對(duì)用戶的干擾。該效果如果用 JavaScript 進(jìn)行實(shí)現(xiàn)又該如何實(shí)現(xiàn)呢，接下來我將分享給大家。首先上一張效果圖

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

找不到 Mac 上的 Home，End，PageUp？想截圖還得打開 QQ？不知道 Mac 如何剪切文件？找不到全屏窗口的按鈕？找不到隱藏文件夾？不知道如何向后刪除？想少用鼠標(biāo)，多用鍵盤？……
希望我的這一系列博文能幫到你

快過年了，我媽一個(gè)電話打過來叫我給他買火車票，我到 12306 一查，硬座和硬臥基本沒有了，高鐵又太貴。最后只搶了 3 張無(wú)座票，但是我媽說能不能買有座位的啊，我說沒有了啊，我媽：你過兩天再幫我看看。我：... 為了幫老媽搶到有座的票，后來用了 360 搶票插件，還用了網(wǎng)上的一個(gè)別人用 c# 寫的客戶端來?yè)屍保瑡尩模昧藘扇於紱]用。最后還是打算自己用 node 寫一個(gè)，當(dāng)時(shí)我的想法就是寫個(gè)簡(jiǎn)單的，能用就行。

bootstrap 風(fēng)格的時(shí)間組件非常多，你可以在 github 上面隨便搜索 “datepicker” 關(guān)鍵字，可以找到很多的時(shí)間組件。博主原來也用過其中的兩個(gè)，發(fā)現(xiàn)都會(huì)有一些大大小小的問題。經(jīng)過一番篩選，找到一個(gè)效果不錯(cuò)、能適用各種場(chǎng)景的時(shí)間組件，下面就來一睹它的風(fēng)采吧。

前端性能優(yōu)化是個(gè)巨大的課題，如果要面面俱到的說的話，估計(jì)三天三夜說不完。所以我們就從實(shí)際的工程應(yīng)用角度出發(fā)，聊我們最常遇見的前端優(yōu)化問題。Yslow 是雅虎開發(fā)的基于網(wǎng)頁(yè)性能分析瀏覽器插件，可以檢測(cè)出網(wǎng)頁(yè)的具體性能值，并且有著名的 Yslow 23 條優(yōu)化規(guī)則，這 23 條，就夠我們玩的了。