摘要： 鑒于博客園流量流失嚴(yán)重，日后不再更新本站博客。 后續(xù)新的技術(shù)文獻(xiàn)將在我的掘金進(jìn)行發(fā)布，歡迎關(guān)注。 感謝博客園這么多年的陪伴，舊文獻(xiàn)依舊留在這邊了。 Leaving is for a better beginning. ?? 閱讀全文

摘要： 結(jié)束了一季的忙碌，我這封筆已久的博客也終究該從春困的咒印中復(fù)蘇，想來寫些實(shí)用易讀的作為開篇，自然是最好不過。 新開個 webpack 插件/工具介紹的文章系列，約莫每周更新一篇篇幅適中的文章聊以共勉，興許合適。 原本期望每篇文章里可以介紹若干個插件，但鑒于部分插件略為復(fù)雜，且單篇內(nèi)容不想寫的唇焦舌敝 閱讀全文

摘要： 上篇文章我們分別對 gulp 的 .src 和 .dest 兩個主要接口做了分析，今天打算把剩下的面紗一起揭開 —— 解析 gulp.task 的源碼，了解在 gulp4.0 中是如何管理、處理任務(wù)的。 在先前的版本，gulp 使用了 orchestrator 模塊來指揮、排序任務(wù)，但到了 4.0 閱讀全文

摘要： 在上一篇文章我們對 Stream 的特性及其接口進(jìn)行了介紹，gulp 之所以在性能上好于 grunt，主要是因?yàn)橛辛?#160;Stream 助力來做數(shù)據(jù)的傳輸和處理。 那么我們不難猜想出，在 gulp 的任務(wù)中，gulp.src 接口將匹配到的文件轉(zhuǎn)化為可讀（或 Duplex/Transform）流，通過 閱讀全文

摘要： 作為前端，我們常常會和 Stream 有著頻繁的接觸。比如使用 gulp 對項(xiàng)目進(jìn)行構(gòu)建的時候，我們會使用 gulp.src 接口將匹配到的文件轉(zhuǎn)為 stream（流）的形式，再通過 .pipe() 接口對其進(jìn)行鏈?zhǔn)郊庸ぬ幚恚?或者比如我們通過 http 模塊創(chuàng)建一個 HTTP 服務(wù)： 此處的 re 閱讀全文

摘要： 近期阿里搞了各LBS+AR實(shí)景的紅包玩法，小伙伴們在公司里都玩瘋了~ 有時候?yàn)榱藫屢粋€紅包，會跑到另一個地方去拍照，雖然略麻煩，但整體的互動還是很有意思的。 不過對于機(jī)智的前端童鞋來說，只需要簡單的一段代碼就能破解AR紅包（當(dāng)然成功率也不是100%）。 破解原理見《上線僅一天：支付寶AR紅包慘遭技術(shù) 閱讀全文

摘要： 接上篇《騰訊云下安裝 nodejs + 實(shí)現(xiàn) Nginx 反向代理》，想從頭一步到位的同學(xué)建議從上篇文章開始閱讀。本文將繼續(xù)介紹如何通過 Nginx 免費(fèi)部署HTTPS。 留意下，這里的“免費(fèi)”指的是HTTPS證書的獲取，至于域名還是需要額外購買（其實(shí)域名真心很便宜了）。 筆者在騰訊云上購買了 va 閱讀全文

摘要： 本文將介紹如何給騰訊云上的 Ubuntu Server 12.04 LTS 64位主機(jī)安裝 node 及 nginx，并簡單配置反向代理。 筆者在整個安裝過程中遇到不少麻煩（不贅述），如果你希望少踩坑，可以按本文的步驟進(jìn)行安裝部署。 一. 新版 nodejs 安裝 這里強(qiáng)烈推薦使用 nvm （Nod 閱讀全文

摘要： 在前兩章，為了方便調(diào)試，我們寫了一個非常簡單的 jQuery.fn.init 方法： 因此我們在 demo 里執(zhí)行 $('div') 時可以取得這么一個類數(shù)組對象： 在完整的 jQuery 中通過 $(selector) 的形式獲取的對象也基本如此 —— 它是一個對象而非數(shù)組，但可以通過下標(biāo)（如 $ 閱讀全文

摘要： 在上篇文章我們簡單實(shí)現(xiàn)了一個 jQuery 的基礎(chǔ)結(jié)構(gòu)，不過為了順應(yīng)潮流，這次咱把它改為模塊化的寫法，此舉得以有效提升項(xiàng)目的可維護(hù)性，因此在后續(xù)也將以模塊化形式進(jìn)行持續(xù)開發(fā)。 模塊化開發(fā)和編譯需要用上 ES6 和 rollup，具體原因和使用方法請參照我之前的《冗余代碼都走開——前端模塊打包利器 R 閱讀全文

摘要： 從本篇開始會陪大家一起從零開始走一遍 jQuery 的奇妙旅途，在整個系列的實(shí)踐中，我們會把 jQuery 的主要功能模塊都了解和實(shí)現(xiàn)一遍。 這會是一段很長的歷程，但也會很有意思 —— 作為前端領(lǐng)域的經(jīng)典之作，jQuery 里有著太多奇思妙想，如果能夠深入理解它，對于我們穩(wěn)固js基礎(chǔ)、提升前端大法技 閱讀全文

摘要： 很多開發(fā)的童鞋都是只身混江湖、夜宿城中村，如果居住的地方安保欠缺，那么出門在外難免擔(dān)心屋里的財產(chǎn)安全。 事實(shí)上世面上有很多高大上的防盜設(shè)備，但對于機(jī)智的前端童鞋來說，只要有一臺附帶攝像頭的電腦，就可以簡單地實(shí)現(xiàn)一個防盜監(jiān)控系統(tǒng)~ 純 JS 的“防盜”能力很大程度借助于 H5 canvas 的力量，且 閱讀全文

摘要： 最近產(chǎn)品妹子提出了一個體驗(yàn)issue —— 用 iOS 在手Q閱讀書友交流區(qū)發(fā)表書評時，光標(biāo)點(diǎn)擊總是不好定位到正確的位置： 如上圖，具體表現(xiàn)是較快點(diǎn)擊時，光標(biāo)總會跳到 textarea 內(nèi)容的尾部。只有當(dāng)點(diǎn)擊停留時間較久一點(diǎn)（比如超過150ms）才能把光標(biāo)正常定位到正確的位置。 一開始我以為是 iO 閱讀全文

摘要： 之前翻譯過一篇文章，介紹了通過 ES2015 的解構(gòu)賦值語法引入模塊，可以讓打包工具（browserify）最終編譯出來的代碼量最小化。 殊不知在 webpack 1.X 版本是無法利用該特性來避免引入冗余模塊代碼的，導(dǎo)致打出來的 bundle 文件大小難免略有臃腫。 今天則向大家介紹一個當(dāng)紅炸子雞 閱讀全文

摘要： 最近小組準(zhǔn)備啟動一個 node 開源項(xiàng)目，從前端親和力、大數(shù)據(jù)下的IO性能、可擴(kuò)展性幾點(diǎn)入手挑選了 NoSql 數(shù)據(jù)庫，但具體使用哪一款產(chǎn)品還需要做一次選型。 我們最終把選項(xiàng)范圍縮窄在 HBase、Redis、MongoDB、Couchbase、LevelDB 五款較主流的數(shù)據(jù)庫產(chǎn)品中，本文將主要對 閱讀全文

摘要： 在上篇動畫入門文章中我們了解了在 React Native 中簡單的動畫的實(shí)現(xiàn)方式，本篇將作為上篇的延續(xù)，介紹如何使用 Animated 實(shí)現(xiàn)一些比較復(fù)雜的動畫。 動畫組合 在 Animated 中提供了一些有趣的API方法來輕松地按我們的需求實(shí)現(xiàn)組合動畫，它們分別是 Animated.parall 閱讀全文

摘要： 針對瀏覽器的http緩存的分析也算是老生常談了，每隔一段時間就會冒出一篇不錯的文章，其原理也是各大公司面試時幾乎必考的問題。 之所以還寫一篇這樣的文章，是因?yàn)榻诙荚诟阈录夹g(shù)，想“回歸”下基礎(chǔ)，也希望盡量總結(jié)的更詳盡些。 那么你是否還需要閱讀本篇文章呢？可以試著回答下面這個問題： 我們在訪問百度首頁 閱讀全文

摘要： 在不使用任何RN動畫相關(guān)API的時候，我們會想到一種非常粗暴的方式來實(shí)現(xiàn)我們希望的動畫效果——通過修改state來不斷得改變視圖上的樣式。 我們來個簡單的示例： 效果如下： 這種方式實(shí)現(xiàn)的動畫存在兩大問題： 1. 將頻繁地銷毀、重繪視圖來實(shí)現(xiàn)動畫效果，性能體驗(yàn)很糟糕，常規(guī)表現(xiàn)為內(nèi)存花銷大且動畫卡頓明 閱讀全文

摘要： LayoutAnimation - layout動畫 當(dāng)布局發(fā)生改變時的動畫模塊，它有兩個方法： 1. 最常用的方法是 LayoutAnimation.configureNext(conf<Object>)，用于設(shè)置布局變化時的動畫類型，在調(diào)用 setState 之前使用。 其中 conf 參數(shù)格式 閱讀全文

摘要： 我已經(jīng)從事過好多年的SPA開發(fā)工作，我發(fā)現(xiàn)很多的程序猿都從來不往 bundle.js 文件的體積上動腦筋，這讓我有點(diǎn)懵逼。 “安心洗路，等俺把代碼混淆壓縮后就一切666了”，若是有人這么說，我會翻白眼。 其實(shí)當(dāng)我們壓縮 bundle.js 的時候，我們可能會憑空折騰出一個龐大的應(yīng)用，導(dǎo)致其加載時間抑 閱讀全文

摘要： Alert - 彈窗 通過 Alert.alert() 方法調(diào)用喚起原生彈窗，點(diǎn)擊會觸發(fā) onPress 回調(diào)（參考下方代碼）并清除彈窗。 import React, { AppRegistry, Component, StyleSheet, Alert, Text, View } from 're 閱讀全文

摘要： 第六章 快速響應(yīng)的用戶界面本章開篇介紹了瀏覽器UI線程的概念，我也突然想到一個小例子，這是寫css3動畫的朋友都經(jīng)常會碰到的一個問題： Title click me如代碼所示，我們希望點(diǎn)擊按鈕的時候，div能通過移除class瞬間變回50px，然后再給其加回class來觸發(fā)動畫（... 閱讀全文

摘要： 最近給 nzoo 折騰官網(wǎng)，拿 angular2.0 + webpack 實(shí)現(xiàn)SPA，然后覺得最終打包后的出口文件有點(diǎn)大，用戶首次訪問會有一個時間較長的白屏等候界面，感覺體驗(yàn)不太好。于是希望在用戶下載整個bundle 時能夠先看到一個“加載中”的UI做過度，鑒于 nzoo 的LOGO也較簡潔，便舍棄... 閱讀全文

摘要： 早幾年前端還處于刀耕火種、JQuery獨(dú)樹一幟的時代，前后端代碼的耦合度很高，一個web頁面文件的代碼可能是這樣的：這意味著后端的工程師往往得負(fù)責(zé)一部分修改HTML、編寫腳本的工作，而前端開發(fā)者也得了解頁面上存在的服務(wù)端代碼含義。有時候某處頁面邏輯的變動，鑒于代碼的混搭，可能都不確定應(yīng)該請后端還是前... 閱讀全文

摘要： 昨天在騰訊大廈參與了鵝廠AlloyTeam召開的AC2015前端大會，度過了充滿精彩和收獲的一個下午，用一句話形容這次前端Event應(yīng)該是“誠意滿滿，干貨滿滿”。說實(shí)話，這次AlloyTeam沒有對與會人員做嚴(yán)格的身份認(rèn)證，基本到了就能參與，因此整個騰大的多功能廳下午是爆滿了人。我去的其實(shí)算早了，卻... 閱讀全文