cc
cc copied to clipboard
ccforward
Code & Blog
# 在 Vue 中使用全局共享的方式管理状态 Vuex 是个非常好用的状态管理方案，但有时项目并不大，不需要很多的 `action` 和 `mutation`，但是确实需要在各个组件之间共享一些数据和状态，所以就写了一个小巧的状态共享库：vue-stores ## 链接 GitHub: [vue-stores](https://github.com/ccforward/vue-stores) Demo: [vue-stores-demo](https://ccforward.github.io/vue-stores/) NPM: [vue-stores](https://www.npmjs.com/package/vue-stores) ## 说明 vue-stores 的特点就是小巧，一共才 50 多行的代码，但缺点就是不能像 vuex 那样在 dev-tools 中进行 time-travel ### 原理...
# About HTML5 的 WebRTC WebRTC是Web Real-Time Communication(网页实时通信)。WebRTC 包含有三个组件： 1. 访问用户摄像头及麦克风的 getUserMedia 2. 穿越 NAT 及防火墙建立视频会话的 PeerConnection 3. 在浏览器之间建立点对点数据通讯的 DataChannels 分别对应三个API接口： 1. Network Stream API 代表媒体数据流 2. RTCPeerConnection 一个RTCPeerConnection对象允许用户在两个浏览器之间直接通讯； 3....
# Vue.js 组件库 Rubik UI 开发心得总结 Rubik UI 是一套基于 Vue 2.0 和 Material Design 开发的桌面端、移动端组件库 ## 开发目的 因为公司内部系统开发的越来越多，而却同事们的要求也越来越高，不仅要好用而且要好看，看惯了 Bootstrap 自然会产生视觉疲劳，因此设计师同学的需求越来越多、后台系统各种体验不统一，因此就自发决定： * 开发一套组件库，首先提升后台的可用性和用户体验 * 设计师 "轻" 参与，选定 Material Design 作为视觉的规范 *...
# ES6/7 Cheat Sheet 简明扼要的 ES6 ES7 Cheat Sheet > 用 keynote 做的图 转为 PDF 和 图片 [pdf](https://github.com/ccforward/cc/blob/master/cheat%20sheet/ES.pdf) [keynote](https://github.com/ccforward/cc/blob/master/cheat%20sheet/ES.key)      
# 关于 Rubik UI Rubik UI 是一个基于 Vue.js 2.0+ 的开源 UI 组件库，在交互和视觉设计上遵循 Material Design 规范，适用于 PC 端和 mobile 端。 这是个从 jQuery 版本的 Material Design UI 组件库改版而来，内部系统已经开始使用，开源版本还在开发完善中。 ## GitHub [https://github.com/ccforward/rubik](https://github.com/ccforward/rubik) ##...
# 前端技术体系和结构 由于前端触及的领域越来越宽，而且每条业务线的开发都有相同和不行痛的部分，所以通过公司业务实践和思考，从整体的角度对前端的体系做下总结。 目前的技术体系(正在用和正在开发的)包括这几个方面： * 规范 (开发、构建、测试、发布、运行) * 技术栈 * 开发、构建工具 * 测试 (接口测试、自动化测试) * 发布流程 发布平台 * 监控和统计系统 (异常监控 性能监控 服务监控) 如下图所示：  ### 规范 js 基于 ES6 开发，用...
# HTTP/2 + Node.js HTTP/2是基于Google的SPDY协议为基础开发的新的web协议。HTTP/2算是从1991年以来HTTP的第一次重大升级。 Yahoo 旗下的 [Flickr](https://www.flickr.com/) 貌似在2016年7月开始用上了HTTP2，如图  虽然 HTTP/2 是基于 SPDY 协议开发的，但是两者还是有不同点的： 1. HTTP/2支持明文的HTTP传输，但是SPDY强制要求使用HTTPS 2. HTTP/2 消息头的压缩算法采用 [HPACK](http://http2.github.io/http2-spec/compression.html)，而非 SPDY 采用的 [DEFLATE](http://zh.wikipedia.org/wiki/DEFLATE) HTTP2的优势： - 多路复用：在一个TCP连接中将所有请求并发完成。 - 服务端推送：服务端可以在客户端确认需要资源(js css)之前把资源推送到客户端，而不是客户端解析了HTML之后再做请求...
# 两张图解释CSS动画的性能 在手机上使用CSS动画时很多时候会感到卡顿，然后网上很多教程说开启GPU加速 `transform: translate3d(0,0,0);` 可解决，但是为什么开启GPU加速就能让动画顺滑呢? ## 我们从浏览器内部去理解下 JS是单线程的，但是浏览器可以开启多个线程，渲染一个网页需要两个重要的线程来共同完成： - Main Thread 主线程 - Compositor Thread 绘制线程(我自己翻译的) ### 主线程的工作： 1. 运行JS 2. 计算 HTML 元素的 CSS 样式 3. 布局页面 4....
# ES6 笔记四 - Set Map ## Set ### 基本用法 类似数组，但是成员都是唯一的没有重复值。 Set本身是一个构造函数用来生成Set类型的数据 Set可以接受一个数组或者类数组的对象作为参数来初始化 ``` js var s = new Set([1,2,3,3,3,4,5]) s.size // 5 [...s] // [1,2,3,4,5] var ss = new...
# 自定义事件库 EventFire ## 源码 EventFire仓库地址: [https://github.com/ccforward/EventFire](https://github.com/ccforward/EventFire) 事件的管理主要有三点：绑定(on)、触发(fire)、销毁(off)；所以写一个自定义的事件库就从这三点出发。 下面一步一步来写 ## 0、思考 #### 绑定 就像在各种js库里面监听DOM事件一样，会有下面几种方式： ``` js event.on('someEvent', callback) // 绑定多个事件 event.on(['someEventA', 'someEventB'], callback) // 绑定一次 event.once('someEvent', callback) // .... 其他...