交朋友就要交那種即使變成老頭了也能互叫綽號的!
《初識RxJS》
背景
RP(Reactive Programming)是一種使用異步數據流進行編程新技術。用 RP 編程給人一種與眾不同的體驗。看下面的代碼體驗下：
// Make the raw clicks stream
var button = document.querySelector('.this');
var clickStream = Rx.Observable.fromEvent(button, 'click');
// HERE
// The 4 lines of code that make the multi-click logic
var multiClickStream = clickStream
.buffer(function() { return clickStream.throttle(250); })
.map(function(list) { return list.length; })
.filter(function(x) { return x >= 2; });
Rx.js 是 RP的一個實現。
概要
介紹了什么是 Rx.js 和 Rx.js 的幾個核心概念。
閱讀地址：https://juejin.im/post/5988ad175188250f7e00cd5c
RP 的詳細介紹見RP入門-中文版。
今天文章概覽
今天 08:20:31 抓取在掘金網上最新發布的50篇前端文章，概要：JavaScript(6篇),CSS(2篇),Angular(2篇),Vue(2篇),1.0(2篇),Node.js(2篇),初識(1篇),HTML5(1篇),構造函數(1篇),model(1篇),cli(1篇),工程化(1篇),Nuxt(1篇),ES6(1篇),Alfred(1篇),ReactNative(1篇),V8(1篇),變量(1篇),DOM(1篇),Sass(1篇),weex(1篇),插件(1篇),橡皮擦(1篇),文本編輯(1篇),wepy(1篇),Canvas(1篇),AE(1篇),React(1篇),API(1篇),Vue.js(1篇),Hexo(1篇),canvas(1篇),Web(1篇),SVG(1篇),自制(1篇),RxJS(1篇),小游戲(1篇),流媒體(1篇),BFC(1篇),測試(1篇)。
詳情如下：
標簽：JavaScript
JavaScript 專題之函數柯里化
JavaScript 專題系列第十三篇，講解函數柯里化以及如何實現一個 curry 函數 定義 維基百科中對柯里化 (Currying) 的定義為： In mathematics and computer science, currying is the technique o…
閱讀地址: https://juejin.im/post/598d0b7ff265da3e1727c491
JS不靠譜系列之枚舉出時間段和對應的分鐘數
前言 今天遇到一個需求,是把選擇時間段轉為分鐘數提交上去的; 所以想手動寫個數組一一映射,提交的時候遍歷下匹配的值提交. 比如 : 00:00 為 0分鐘或者1440分鐘; 00:10為30分鐘; 具體看下面的 效果圖 實現思路 一天的分數很容易換算出來: 24 * 60 = 1…
閱讀地址: https://juejin.im/post/598c32dcf265da3e3d12557d
JavaScript 專題之如何判斷兩個對象相等
JavaScript 專題系列第十二篇，講解如何判斷兩個參數是否相等 前言 雖然標題寫的是如何判斷兩個對象相等，但本篇我們不僅僅判斷兩個對象相等，實際上，我們要做到的是如何判斷兩個參數相等，而這必然會涉及到多種類型的判斷。 相等 什么是相等？在《JavaScript專題之去重》…
閱讀地址: https://juejin.im/post/598a701b6fb9a03c5b04bb14
翻譯 | 一行 JavaScript 代碼的逆向工程
原文地址：Reverse Engineering One Line of JavaScript 原文作者：Alex Kras 譯者：李波 校對者：冬青、小蘿卜 幾個月前，我看到一個郵件問：有沒有人可以解析這一行 JavaScript 代碼 <pre id=p><script>n…
閱讀地址: https://juejin.im/post/5988411251882526185d634a
JS 的平凡之路--學習人氣眼中的效果（中）
這一節簡單的模仿一下人氣眼中的無重疊彈幕效果，也不賣關子了，下一節模仿頭部的標簽切換效果 一、簡介 一談到彈幕相信大家多不陌生，平時看直播，那彈幕可是看的很歡啊。 人氣眼中的彈幕可能數量比較少的原因，是一種不重疊的彈幕。先看一下實現的效果： 無重疊彈幕效果 當你決定看下文之前，…
閱讀地址: https://juejin.im/post/598063335188254ae92091f0
JavaScript專題之jQuery通用遍歷方法each的實現
JavaScript 專題系列第十一篇，講解 jQuery 通用遍歷方法 each 的實現 each介紹 jQuery 的 each 方法，作為一個通用遍歷方法，可用于遍歷對象和數組。 語法為： jQuery.each(object, [callback])回調函數擁有兩個參數…
閱讀地址: https://juejin.im/post/5982837bf265da3e3d123a60
標簽：CSS
CSS入門指南-4：頁面布局
這是《CSS設計指南》的讀書筆記，用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數元素它們的默認值通常是 block 或 inline 。一個 block 元素通常被叫做塊級…
閱讀地址: https://juejin.im/post/598c4d93f265da3e2c70fbc0
[譯] 漸進增強的 CSS 布局：從浮動到 Flexbox 到 Grid
原文地址：Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid 原文作者：Manuel Matuzovi? 譯文出自：掘金翻譯計劃 本文永久鏈接：https://github.com/xitu/go…
閱讀地址: https://juejin.im/post/5987acfd6fb9a03c502288f3
標簽：Angular
解密Angular WebWorker Renderer (二)
很開心再次遇見你，接著上回分解。先把與通訊相關的類介紹完畢。與WebWorkerRendererFactory2類對應的就是WebWorkerRenderer2類，該類從類結構中就可以看出包含了各種對DOM節點的操作函數，基本覆蓋原生JS的DOM操作函數。特別注意，該類里面的操…
閱讀地址: https://juejin.im/post/598953e46fb9a03c484501cb
解密 Angular WebWorker Renderer (一)
本文主要介紹Angular中的黑科技之WebWorker Renderer，使用Worker線程渲染如何渲染頁面？從源碼的角度切入，帶領帶大家看個究竟。先來做個對比開發框架版本：Angular 4.x項目地址：Charway/angular-webworker-renderer-…
閱讀地址: https://juejin.im/post/598952a96fb9a03c4300952c
標簽：Vue
Vue 組件庫實踐和設計
現在前端的快速發展，已經讓組件這個模式變的格外重要。對于市面上的組件庫，雖然能滿足大部分的項目，但是一些小型細節方面和使用方面，或者UI庫存在的一些bug，會讓人很頭疼。 那我們應該如何面對解決這些問題。俗話說自己動手豐衣足食。有些組件不用刻意去造。應該考慮如何去打造一個快速，兼…
閱讀地址: https://juejin.im/post/598965bd5188256da941872c
基于文本相似度算法，分析 Vue 是抄出來的框架嗎？
本周一篇指摘 Vue 抄襲 Angular 的文章一石激起千層浪。為此，筆者作為中立吃瓜的 React 用戶，分析了 13 個主流前端框架版本上萬個變量的命名風格，應用自然語言處理中的文本相似度算法進行了分析，以對這一論點的有效性做出客觀的評價。 思路 在分析書籍抄襲、論文查重等…
閱讀地址: https://juejin.im/post/5985abf9f265da3e345f4f97
標簽：1.0
騰訊發布 Omix 1.0 - 用 JSX 或 hyperscript 創建用戶界面
Omix 1.0 https://user-gold-cdn.xitu.io/2017/8/8/bbe2ce1c1e7e925005df0f1cc8938374 今天，騰訊正式開源發布 Omix 1.0， 讓開發者使用 JSX 或 hyperscript 創建用戶界面。 Gith…
閱讀地址: https://juejin.im/post/59892e5cf265da3e277803c8
騰訊 AlloyCrop 1.0 發布
寫在前面 AlloyCrop 這個項目是8個月前發布的，作為AlloyFinger 的典型案例，發布之后被BAT等其他公司廣泛使用。但是發布之后，有兩個問題一直沒有抽出時間去解決: 裁剪圖像的分辨率太小，是否可配？ pinch雙指放大的時候，放大的中心不是雙指中心，是否可以優化？…
閱讀地址: https://juejin.im/post/5981433f6fb9a03c5022783a
標簽：Node.js
帶你用 Vue 全家桶和 Node.js 完成一個聚合應用
平時會經常瀏覽一些網站充電，但是老是需要切換網站也很麻煩，所以就有了做這個小項目的想法。通過爬蟲抓取一些網站，然后整合在一個應用中。雖然是個簡單應用，但是五臟六腑俱全，適合 Vue 的新手學習。 項目地址 項目技術棧 Vue 全家桶 語言：ES6 UI：這里使用了Element…
閱讀地址: https://juejin.im/post/59857c616fb9a03c5c6ffa91
[譯] 所有你需要知道的關于完全理解 Node.js 事件循環及其度量
原文地址：All you need to know to really understand the Node.js Event Loop and its Metrics 原文作者：Daniel Khan 譯文出自：掘金翻譯計劃 本文永久鏈接：https://github.co…
閱讀地址: https://juejin.im/post/5984816a518825265674c8f6
標簽：初識
初識RxJS
什么是Rx.JS? Rx.JS是英文 Reactive Extensions for JavaScript 的縮寫.翻譯成中文就是:JavaScript的響應式擴展.其主要的功能就是利用響應式編程的模式來實現JavaScript的異步式編程. 相對于JavaScript中其它的異…
閱讀地址: https://juejin.im/post/5988ad175188250f7e00cd5c
標簽：HTML5
從HTML5與PromiseA+規范來看事件循環
寫在最前 本次分享一下從HTML5與PromiseA+規范來迅速理解一波事件循環中的microtask 與macrotask。 歡迎關注我的博客，不定期更新中—— ## 先來看段代碼 setTimeout(function() { console.log('setTimeout1…
閱讀地址: https://juejin.im/post/598c595d6fb9a03c5f0c80e9
標簽：構造函數
回顧Javascript構造函數
長期更新文章 喜歡的start下 start https://github.com/asd0102433/blog 構造函數已經是老生常談的事情了。這里講一些比較基礎的東西。 先看下一個例子 function Book(name) { if (!(this instanceof…
閱讀地址: https://juejin.im/post/598c02e66fb9a03c4e18c2c8
標簽：model
v-model指令在組件中怎么玩
作者：孫輝，美團金融前端團隊成員。15年畢業加入美團，相信技術，更相信技術只是大千世界里知識的一種，個人博客: https://sunyuhui.com 備注：文章內容和案例均基于Vue2（具體版本為Vue2.3.4） 筆者最近在寫組件的時候，遇到了 v-model 的使用問題…
閱讀地址: https://juejin.im/post/598bf7a3f265da3e252a1d6a
標簽：cli
在 vue-cli 腳手架中引用 jQuery、bootstrap 以及使用 sass、less 編寫 css [vue-cli配置入門]
寫在前面： 本文是vue-手摸手教你使用vue-cli腳手架-詳細步驟圖文解析之后，又一篇關于vue-cli腳手架配置相關的文章，因為有些文章步驟不夠清晰，當時我引入JQuery、bootstrap的時候頗費了一番功夫，所以本文的步驟會盡量詳細一點。有需要的朋友可以做一下參考，喜…
閱讀地址: https://juejin.im/post/5986f5c8f265da3e0e1053cf
標簽：工程化
【上海線下活動】Web前端工程化架構實踐 -- 滬江技術沙龍
報名鏈接：http://www.huodongxing.com/event/5399668594900 Web前端工程化歷經了：2011年的Shell＆(YUICompress || Google Closure Compiler)；基于Node.js的前端工具浮現，2013年G…
閱讀地址: https://juejin.im/post/598bc9625188257d86430dea
標簽：Nuxt
美團點評點餐 Nuxt.js 實戰
一、背景在今年年初我開始接觸vue的時候，就發現在vue官方文檔中“服務端渲染”的一節中提到了Nuxt.js框架，SSR這種方式對于首屏的加載時間優化顯而易見，同時還可以方便的進行SEO。美團點評的點餐業務中，數據平臺因為其數據量大的特點，首頁加載時間很長，非常適合進行SSR改造…
閱讀地址: https://juejin.im/post/598aabe96fb9a03c335a8dde
標簽：ES6
《深入理解ES6》中的代碼片段，你能猜對幾個？
花了3個周末看完了《深入理解ES6》，其中有許多代碼段以及文字描述和我“常識”有些出入，因此記錄了下來并加以驗證。 有些代碼段還是蠻有趣的，再此分享下。正在閱讀屏幕的你，能“猜”對幾個代碼片段呢？ 每個代碼片段均有編號，格式為為try-xxx-yyy或note-xxx-yyy，其…
閱讀地址: https://juejin.im/post/598e6eed6fb9a03c543ebe02
標簽：Alfred
用 Node.js 把玩一番 Alfred Workflow
本文首發在個人博客：http://muyunyun.cn/posts/4c23be51/ 插件地址(集成Github、掘金、知乎、淘寶等搜索) 作為 Mac 上常年位居神器榜第一位的軟件來說，Alfred 給我們帶來的便利是不言而喻的，其中 workflow(工作流) 功不可沒…
閱讀地址: https://juejin.im/post/598a3203f265da3e213effd8
標簽：ReactNative
ReactNative學習筆記十三之布局詳細解析
又是一周過去了，似乎上周我只更新了一篇文章，最近工作實在太忙，望大家見諒。今天要講的還是布局相關的，之前已經對布局中主要屬性做了介紹，這次，會對布局中其他屬性進行介紹。 alignSelf alignSelf是指相對于父容器，自身的位置，有auto,flex-start,flex…
閱讀地址: https://juejin.im/post/59898948f265da3e282bd030
標簽：V8
【譯】如何學習V8開發
原文鏈接：How do I get started with V8 development? 作者：Franziska Hinkelmann 你是否有興趣理解更多關于編譯器、虛擬機、JavaScript引擎的知識，或者貢獻V8項目 你也許曾沒上過編譯原理的課程或者沒有c++編程…
閱讀地址: https://juejin.im/post/598e63b76fb9a03c4300a49e
標簽：變量
ES6 變量作用域與提升：變量的生命周期詳解
ES6 變量作用域與提升：變量的生命周期詳解從屬于筆者的現代 JavaScript 開發：語法基礎與實踐技巧系列文章。本文詳細討論了 JavaScript 中作用域、執行上下文、不同作用域下變量提升與函數提升的表現、頂層對象以及如何避免創建全局對象等內容；建議閱讀前文 ES6 …
閱讀地址: https://juejin.im/post/59905bea6fb9a03c34192c51
標簽：DOM
如何實現一個基于 DOM 的模板引擎
題圖：Vincent Guth 注：本文所有代碼均可在本人的個人項目colon中找到，本文也同步到了知乎專欄 可能你已經體會到了 Vue 所帶來的便捷了，相信有一部分原因也是因為其基于 DOM 的語法簡潔的模板渲染引擎。這篇文章將會介紹如何實現一個基于 DOM 的模板引擎（就像…
閱讀地址: https://juejin.im/post/59892b656fb9a03c445ddafe
標簽：Sass
常用 SCSS 總結（持續更新）
//伸縮盒（舊） @mixin box{display: -webkit-box;display: box;} @mixin pack-c{@include box;-webkit-box-pack:center;box-pack:center;} @mixin align-c{…
閱讀地址: https://juejin.im/post/59891d1e51882525d45c05d3
標簽：weex
weex頁面傳參
本文來自尚妝前端團隊南洋 發表于尚妝github博客，歡迎訂閱！ 前言 我司在weex上的應用是保證三端統一，為了延續web開發體驗，統一在三端的跳轉都采用url的形式，即采用<\a>組件，或者自定義的openUrl方法進行跳轉。 假如現在點擊B按鈕跳轉到/b.html頁面，在…
閱讀地址: https://juejin.im/post/59900547f265da3e135778fe
標簽：插件
基于 Vue.js 的消息氣泡插件
之前介紹了一款基于vue的文本折行顯示組件ellipisis-plus，今天介紹一款仿照QQ消息氣泡的插件vue-bubble，演示地址在這里。 仿照QQ消息氣泡想法的起源是來自掘金的安卓小伙伴們，看到他們在安卓平臺實現了這種效果，所以想遷移到web上。在這里要感謝他們。 先放張…
閱讀地址: https://juejin.im/post/598832486fb9a03c594587fd
標簽：橡皮擦
canvas 基礎系列（一）之實現抽獎刮刮卡（橡皮擦）
筆主最近一個多月以來 “深入“ 研究了 canvas 的實現原理，一口氣讀完了 《HTML5 Canvas 核心技術》這本書；而這一切以及這篇文章的誕生，都源于筆主公司的一位實習產品經理~ 這位實習生擁有剛畢業時的血氣方剛，以及天馬行空的想象力；他從未考慮過項目的實際需求，以及…
閱讀地址: https://juejin.im/post/59881ced51882525bd3562ab
標簽：文本編輯
人人都會寫的富文本編輯器
這個本來是給 vm-manager 寫的一個富文本編輯器，后來覺得獨立出來維護比較方便，就單獨分離出來放到NPM。之所以說人人都會寫, 是因為這個組件實現起來確實比較簡單，不需要很厲害的Js水平, 基本是對document.execCommand()指令的綁定。在此將過程分享給大…
閱讀地址: https://juejin.im/post/5987c4a66fb9a03c5539cfce
標簽：wepy
深入wepy小程序組件化框架
wepy是一個優秀的微信小程序組件化框架，突破了小程序的限制，支持了npm包加載以及組件化方案，并且在性能優化方面也下了功夫，不管之后項目是否會使用到，該框架組件化編譯方案都是值得學習和深入的。 本文同步于個人博客 http://www.imhjm.com/article/597…
閱讀地址: https://juejin.im/post/5987370e6fb9a03c42430a30
標簽：Canvas
一個少女心滿滿的例子帶你入門 Canvas
canvas入門 本文首發于我的個人博客：http://cherryblog.site/ github項目地址：https://github.com/sunshine940326/canvasStar 項目演示地址：https://sunshine940326.github.io…
閱讀地址: https://juejin.im/post/5986d6e1f265da3e241e8cdb
標簽：AE
用視頻軟件AE + bodymovin制作網頁動畫
我們知道，做動畫有多種形式，可以用CSS的animation，也可以用Canvas，或者是用JS控制CSS的屬性形成動畫。我們經常使用CSS做一些比較簡單的動畫，像過度、加載的動畫，對于一些比較復雜的，可能會做成gif，或者是用Canvas，使用Canvas的控制粒度可以很細，同…
閱讀地址: https://juejin.im/post/5986d4575188256dcf65cd5a
標簽：React
聊聊 React Router v4 的設計思想
React Router v4 發布已經有幾個月了，但好像并沒有得到太多人的青睞，大家（包括我們團隊自己）還是習慣使用v2、v3版本。這一方面是因為v4版本是一次破壞性的升級，從v2、v3 升級到v4，必需要大量重寫原有的路由相關的代碼，對于已經穩定的項目，一般是不會輕易嘗試這種…
閱讀地址: https://juejin.im/post/5986d1456fb9a03c3f405bd2
標簽：API
捋一捋容易被忽略的API用法
Date 獲取某月的天數 下一月的第0天就是當前月的最后一天。 function daysInMonth(year, month) { let date = new Date(year, month + 1, 0); return date.getDate(); } // 注意在…
閱讀地址: https://juejin.im/post/5985d7aef265da3e1727b0ab
標簽：Vue.js
手摸手教你使用vue-cli腳手架-詳細步驟圖文解析[vue入門]
寫在前面： 使用 vue-cli 可以快速創建 vue 項目，vue-cli很好用，但是在最初搭建環境安裝vue-cli及相關內容的時候，對一些人來說是很頭疼的一件事情，本人在搭建vue-cli的項目環境的時候也是踩了相當多的坑，特此寫了一篇搭建環境的教程，每一步盡量詳細解析。需…
閱讀地址: https://juejin.im/post/597eee92f265da3e2e56e37c
標簽：Hexo
你了解 Hexo 搭建博客的原理嗎？
一直在用 Hexo 寫博客，但是對其原理并不是很清晰，在網上找了一些資料，對 Hexo 有了新的認識，現在就來記錄一下 使用 Hexo + github pages 搭建博客 記得剛開始知道 Hexo + github pages 搭建博客是在 2016 年，那時候，閨蜜非常激動…
閱讀地址: https://juejin.im/post/598eeaff5188257d592e55bb
標簽：canvas
基于canvas實現波浪式繪制圖片
寫在最前 本次的分享是一個基于canvas的更新圖片特效實現。其中主要涉及canvas中getImageData()、putImageData()、toDataURL()方法的使用。效果請看下面。 歡迎關注我的博客，不定期更新中—— PS:請在本地服務器中打開頁面，因谷歌瀏覽器中…
閱讀地址: https://juejin.im/post/598471e3f265da3e2a2f8147
標簽：Web
Web 端的下一代三維圖形
原文地址：Next-generation 3D Graphics on the Web 原文作者：Dean Jackson 譯文出自：掘金翻譯計劃 本文永久鏈接：https://github.com/xitu/gold-miner/blob/master/TODO/next-g…
閱讀地址: https://juejin.im/post/5983208c5188253c6f2d185d
標簽：SVG
設計師的專屬魔法，用SVG動畫重現布爾運算的設計過程
這是在作圖時突然迸發的靈感（是的，偶爾也會有那么一瞬間頭腦開竅），作為設計師小伙伴們，平時用的最多的應該是布爾運算吧，基礎圖形的加加減減，得到任意的形狀。就不說經典的Apple了，比如網易云音樂圖標，你如果直接放上這個，似乎沒什么。 但放上布爾運算過程的設計稿（所有基礎圖形的輪廓…
閱讀地址: https://juejin.im/post/5982f223f265da3e315ec161
標簽：自制
自制前端框架之依賴追蹤器
依賴追蹤機制是 Vue 的核心之一，那么依賴追蹤算法如何工作呢？在 30 行內我們就能實現它?? Reactive 基礎 說起依賴追蹤，就不能不提數據綁定的概念。前端最常見的重復勞動之一就是把數據綁定到 HTML 模板上，這時數據綁定能夠實現數據更新時模板的自動更新。簡單的三行偽…
閱讀地址: https://juejin.im/post/5982e6bc5188253d7821e8f9
標簽：RxJS
[譯] RxJS: 白話 Subjects
原文鏈接: https://netbasal.com/rxjs-subjects-for-human-beings-7807818d4e4d 本文為 RxJS 中文社區 翻譯文章，如需轉載，請注明出處，謝謝合作！ 如果你也想和我們一起，翻譯更多優質的 RxJS 文章以奉獻給大家…
閱讀地址: https://juejin.im/post/5982989e6fb9a03c3a25b371
標簽：小游戲
基于jQuery的一個“射日”小游戲
寫在最前 本次的分享是一個基于jQuery實現的一個移動端射箭類小游戲。主要實現了目標物、障礙物的隨機渲染，以及中箭效果的判定等。 歡迎關注我的博客，不定期更新中—— 效果預覽 game.gif 點我查看源碼倉庫。 主要結構規劃 ... //基礎屬性 defaultOption …
閱讀地址: https://juejin.im/post/5981c27d5188253573589f8c
標簽：流媒體
流媒體加密
本文只討論應用于瀏覽器環境的流媒體協議的加密 為什么要加密視頻 付費觀看視頻的模式是很多平臺的核心業務，如果視頻被錄制并非法傳播，付費業務將受到嚴重威脅。因此對視頻服務進行加密的技術變得尤為重要。 本文所指的視頻加密是為了讓要保護的視頻不能輕易被下載，即使下載到了也是加密后的內…
閱讀地址: https://juejin.im/post/59819af051882537b32d9126
標簽：BFC
CSS 核心概念歸納之定位和 BFC
定位 流定位 普通流定位的元素不能通過left/top屬性來指定其x/y坐標，流定位的元素上下排布的區塊元素的縱向邊距會被合并，左右排布的內聯元素的橫向邊距不會合并，需要各自獨立計算。 浮動定位 浮動模型是一種可視化格式模型，浮動的框可以左右移動，直到它的外邊碰到包含框或者另外一…
閱讀地址: https://juejin.im/post/5980828251882556b5043bf7
標簽：測試
前端測試簡述及使用Karma/Mocha實現的集成測試栗子（Travis CI/Coverage）
前端測試 開發類型 TDD (Test Driven Development)，測試驅動開發 BDD (Behavior Driven Development)，行為驅動開發 // add.js function add(x, y) { return x + y; } modul…
