talkingdata / fsd Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://talkingdata.github.io/fsd/
Home Page: https://talkingdata.github.io/fsd/
这个系列文章把异步方面的知识以及原理讲解的比较清楚,从传统的方式到promise到generator到async。值得一读。
深入理解 JavaScript 异步
如何自己实现事件处理,本文通过深入浅出解读 Zepto Event 模块源码,给我们提供了很好的答案。
Vuex 教程
Vuex 类似 Redux 的状态管理器,用来管理Vue的所有组件状态。
一般在你开发大型单页应用(SPA),会出现多个视图组件依赖同一个状态,来自不同视图的行为需要变更同一个状态。
遇到以上情况时候,可以考虑使用Vuex,它能把组件的共享状态抽取出来,当做一个全局单例模式进行管理。这样不管你在何处改变状态,都会通知使用该状态的组件做出相应修改。
iView 一周年了,同时发布了 2.0 正式版
一周年,两个大版本,很值得称赞的成绩!能跟梁灏这样优秀的前端生态贡献者共事,我感到非常荣幸!
正如标题所言,2.0正式版将会是一个全新的开始,她将随着Vue社区的进步而快速迭代。
期待vue社区和iView能有更好的发展,iView不会止于组件库,更期待iView deign、iView mobile…和更多优秀的开发者参与到开源生态的共建!
Server-Sent Events 教程
开发实时web应用的基础协议,基于http协议适用范围更广、性能更好、更轻量。缺点是IE不支持,需要降级为其它方式,但对于一些面向大屏、手机端的应用尤其适合。
WebSocket 教程
相比SSE,WebSocket会更重一些,需要自己实现协议的部分。这两篇文章一起读,就可以很全面的了解现代浏览器和服务器通信技术。
Three.js
中文文章资料还是不够丰富,以至于这本免费小书时至今日还是Three.js
入门的最佳选择之一。vue的Virtual Dom实现- snabbdom解密
文章通过详细的图文对照、算法代码解析讲述了虚拟dom的实现,Virtual Node作为纯数据对象,patch创建或者更新DOM树,diff算法用来比较同层级,然后通过钩子和扩展模块创建有attribute、props、eventlistener的复杂dom。
使用Vue做项目时,Vuex的使用与否和怎么使用始终是回避不了的一个问题。这篇文章或许能给你一些灵感。
你可能不需要 Vuex
#https://github.com/istanbuljs/nyc
覆盖率工具 istanbul 替换为 nyc,多进程覆盖率的测试速度提升了几倍。都是同一作者的作品,后者目前活跃度高,并支持前端很多新特性。
$ npm i nyc --save-dev
$ ./node_modules/.bin/nyc ./node_modules/.bin/mocha
执行单元测试命令后,还会直观的给出代码覆盖率报告,以Flclover为例:
------------------------------------|----------|----------|----------|----------|----------------|
File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines |
------------------------------------|----------|----------|----------|----------|----------------|
All files | 79.41 | 66.67 | 61.11 | 81.82 | |
flclover | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
flclover/lib | 88.52 | 82.35 | 81.82 | 88.52 | |
application.js | 100 | 100 | 100 | 100 | |
flclover.js | 30 | 0 | 0 | 30 |... 13,14,17,19 |
flclover/lib/middleware/bodyparser | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
flclover/lib/middleware/logger | 55.56 | 50 | 50 | 55.56 | |
index.js | 55.56 | 50 | 50 | 55.56 |... 39,42,45,48 |
flclover/lib/utils | 71.43 | 33.33 | 0 | 83.33 | |
index.js | 81.25 | 33.33 | 0 | 100 | 7,10 |
logger.js | 40 | 100 | 0 | 40 | 4,9,13 |
------------------------------------|----------|----------|----------|----------|----------------|
文中介绍了vue项目目录结构和数据绑定实现,没有太深入,但可以作为初步了解。
学习Vue.js源码
大致了解下http协议相关内容,有利于了解前端开发时,调用后台接口,请求做了什么。
http://www.jianshu.com/p/80e25cb1d81a
ES6的rest参数和扩展运算符
rest参数和扩展运算符都是ES6新增的特性。
rest参数的形式为:...变量名;扩展运算符是三个点(...)。
rest参数用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
扩展运算符可以看做是 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3]) // 1 2 3
console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5
ECharts 统计扩展,包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 ECharts 的结合,可以使大家方便地实现可视分析,也就是将数据分析的结果,通过可视化直观地呈现出来。
文章讲解数据响应式系统及其构建,分步骤实现了 vue2.0的响应式,还有详细的代码示例及注释。
现代前端科技解析 —— 数据响应式系统
排序算法可以分为内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存。常见的内部排序算法有:插入排序、希尔排序、选择排序、冒泡排序、归并排序、快速排序、堆排序、基数排序等
https://github.com/hustcc/JS-Sorting-Algorithm
TalkingData实习生写的一篇文章。作者回顾了自己经历三个项目的开发历程,发现了很多问题,也产生了很多思考。该文章有很多值得借鉴的地方。
本篇文章所提到的几个措施大家可能都曾经在项目里用过,但是就如作者所言:你只是在用,并不知道为什么用,本文最大的价值在于提供了系统的优化方案并解释了原因
Edit: 重复提交了,忽略这篇吧。。。
阮一峰的文章最大的好处就是解释的清楚,很多大牛工程师不善表达,自己会但不一定能教得会。
三篇系列文章介绍了:js模块花的基本概念,AMD规范以及require.js的实践
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
http://www.ruanyifeng.com/blog/2012/11/require_js.html
学习设计者模式,让我们站在巨人的肩膀上,获得前人所有的经验,保证我们以优雅的方式组织我们的代码,满足我们解决问题所需要的条件。
http://www.oschina.net/translate/learning-javascript-design-patterns?cmp
文章整理了GitHub入门,搭建发布个人博客及个人项目发布,还介绍了一些工具,插件及开源项目;内容比较丰富。
GitHub —— 你不得不上的交友网站
Vue 2.0 中模板渲染与 Vue 1.0的区别,1.0 中采用的 DocumentFragment (想了解可以观看这篇文章),而 2.0 中借鉴 React 的 Virtual DOM。基于 Virtual DOM,2.0 还可以支持服务端渲染(SSR),也支持 JSX 语法。
Vue2.0 源码阅读:响应式原理
文章深入Vue源码,详细地解析了响应式原理。其原理大致可总结为:当数据发生改变后,相应的 setter 函数被触发,然后执行 notify 函数通知订阅者(Watcher)去更新相关视图,也会对新的数据重新 observe,更新相关的依赖关系。
文章介绍了WebSocket 的特性及与HTTP对比在服务器推送上的优势,通过一个简单的示例介绍了WebSocket 部分API。
WebSocket 教程
Server Push
可以将静态资源推送给客户端,实现多路复用,是HTTP/2
众多协议优化中最令人振奋的特性,它大大降低了网络延迟对性能的影响。
https://juejin.im/post/59626ca0f265da6c2442fbdf
对Vue的组件化有一个非常清晰的讲解。组件化原理,组件化分,组件间传递都有涉及。另外笔者是一名普通的全职 iOS 开发者,还介绍iOS的组件化的东西,对前端和移动端进行了一些对比。
首先讲解一下数据双向绑定的基本原理,介绍对比一下三大框架的不同实现方式,同时会一步步完成一个简单的mvvm示例
五种事件驱动的API架构
本文会介绍 5 种事件驱动的 API 架构:WebSockets、WebHooks、REST Hooks、Pub-Sub, 以及 Server Sent Events,并分别介绍这几种架构的基础功能、使用方式以及各自的优缺点。
对于 Node.js 开发者来说,我们天生就在使用事件驱动的架构,业界也越来越认可事件驱动架构和异步系统的优势,了解本文介绍的 5 种事件驱动API 架构
浅谈 JS 对象之扩展、密封及冻结三大特性
由浅入深讨论JS中对象的扩展、密封及冻结特性,从三种不同的冻结程度介绍了 js 冻结对象的方法。
文章从each 的功能实现入手不断完善,整体实现思路清晰,对于问题及解决也有详细的代码实现与解释。这是一个系列内容涵盖防抖、节流、去重、类型判断等。
JavaScript专题之jQuery通用遍历方法each的实现
系列目录地址
使用svg文件显示小图标已经成为趋势,随之而来地,svg文件合并也成为必然需求。文中介绍了svg sprite的使用原理,并介绍了多种生成svg sprite的方式来满足偏前端、偏命令、偏设计各类coder的需求。
SVG Sprite技术介绍
阮一峰的文章最大的好处就是解释的清楚,很多大牛工程师不善表达,自己会但不一定能教得会。
三篇系列文章介绍了:js模块花的基本概念,AMD规范以及require.js的实践
git成为现在最火的代码管理工具,文中详细介绍了git在团队中的使用流程,这种思路在团队协作中很是受用。同时文中介绍了gitflow使用的方法。
Git 在团队中的最佳实践--如何正确使用Git Flow
彻底搞清楚javascript中的require、import和export
通过介绍CMD、AMD、ES6的模块规范,来引申出平时业务中经常用到require、import和export的用法以及含义。
大家都说学 Node.js 学 Node.js,到底是学它的什么呢?是学 JavaScript 这门语言,还是学 Node.js 的 API?还是学 Node.js 各种三方库?
主要从初始化的数据层面上分析了Vue是如何管理依赖来到达数据的动态响应。
initState的过程中,将props,computed,data等属性通过Object.defineProperty来改造其getter/setter属性,并为每一个响应式属性实例化一个observer观察者。这个observer内部dep记录了这个响应式属性的所有依赖。
当响应式属性调用setter函数时,通过dep.notify()方法去遍历所有的依赖,调用watcher.update()去完成数据的动态响应。
文章把学习Three.js需要掌握的基本概念和知识点讲解的很详细。并且结合代码实现了一个demo。对于Three.js有兴趣的同学,是一篇不错的入门文章。
初识Three.js
内容偏向于 WEB 技术(HTML、CSS、DOM、JavaScript)和以这些技术为根基直接构建而成的开源技术。书中引用和讨论的材料要么就是同类翘楚,要么就是解决问题的流行方案。
推荐人:郭俊兵
前端开发者指南
async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示,在函数内部使用 await 来表示异步。
想较于 Generator,Async 函数的改进在于下面四点:
Generator 函数的执行必须依靠执行器,而 Aysnc 函数自带执行器,调用方式跟普通函数的调用一样
async 和 await 相较于 * 和 yield 更加语义化
co 模块约定,yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await 命令后面则可以是 Promise 或者 原始类型的值(Number,string,boolean,但这时等同于同步操作)
async 函数返回值是 Promise 对象,比 Generator 函数返回的 Iterator 对象方便,可以直接使用 then() 方法进行调用
比较系统简介koa2使用,包含一些例子,可以让人更快上手。
koa2从起步到填坑
阐述了做单元测试的必要性,
着重介绍了Jasmine的常用语法,
并对其他流行测试框架和工具做了介绍。
关于前端开发谈谈单元测试
只要是工程师就必须学好计算机基础,只有这样才能适应计算机技术的快速发展,前端工程师更是如此。
介绍了RESTful API的实现**,并从http请求方式和相应内容等方面给出详细示例。
在项目接口设计和接口对接中可做实质性参考。
RESTful API 实践
JavaScript问题集锦
文章整理了一些比较有价值且常见的JS问题,看似简单,但深究其原理还是很有必要的,相信对你的JS基础功底是个考验。
文章由浅入深的介绍前端工程的测试,覆盖单元测试、端到端测试、集成测试,较为简单的事例介绍有利于你快速掌握这些知识。
测试你的前端代码 – part1(介绍篇)
测试你的前端代码 – part2(单元测试)
测试你的前端代码 – part3(端到端测试)
测试你的前端代码 – part4(集成测试)
掌握Symbols
继六种数据类型(Undefined、Null、Boolean、Number、String、Object)后,ES6又新增了Symbols类型。Symbols类型比较抽象,要了解相关的适应场景,可以看这两篇文章。
ECMAScript 6 入门-Symbol
symbols类型
文章通过对那些『延迟』执行的函数思考,深入的对event loop和task进行了拆分讲解,通过实例与图示详细讲解了整个执行渲染过程。
深入探究 eventloop 与浏览器渲染的时序问题
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.