随着 Javascript 语言的发展,ES6 规范为我们带来了许多新的内容,其中生成器 Generators 是一项重要的特性。利用这一特性,我们可以简化迭代器的创建,更加令人兴奋的,是 Generators 允许我们在函数执行过程中暂停、并在将来某一时刻恢复执行。这一特性改变了以往函数必须执行完成才返回的特点,将这一特性应用到异步代码编写中,可以有效的简化异步方法的写法,同时避免陷入回调地狱。

本文将对 Generators 进行简单介绍,然后结合笔者在 C#上的一点经验,重点探讨 Generators 运行机制及在 ES5 的实现原理。

原文地址

 

 

webpack

最近,项目用了 React,配套使用了 Webpack,毕竟热替换(react-hot-loader)吸引力确实高,开发模式下使用 webpack 构建其实也够用,并且相对 gulp-webpack 来说,模块的编译等待时间大大缩小,这是生命啊! 发布时,借助 gulp 来进行其他方面的处理,如合图,打包等。或许把这些边幅修一修、支持下,Webpack 估计就要逆天了吧?

 

Hey async, await me
In JavaScript,Web开发 on 2015年12月18日 by view: 6,727
5

背景

笔者在前面的文章介绍过如何使用 generator 来解决 callback hell,尽管现在多数浏览器特别是移动端浏览器还不支持该 ES2015 新特性,但你可以通过 Babel 等转换工具转化成 ES5 兼容的等效代码,从而在生产环境使用。

不过使用 generator 来解决 callback hell 似乎有点不务正业,毕竟 generator 是生成器,属于 Iterator 的一种,设计之初是用来生成一种特殊的迭代器的。

另外还有两点也可以算是 generator 解决 callback hell 问题的缺陷:

  1. generator 需要从 generator function 执行得到,而 generator function 执行之后只会返回一个 generator,不管里面是怎样的代码,与我们通常对函数的认知存在差异
  2. 如果想执行 generator function 的函数体,需要不断调用返回的 generator 的 next 方法,这样就决定了必须依赖 cobluebird.coroutine 等其他辅助代码或者手动执行 next,来保证 generator 不断 next 下去

Tips:文章 ES6 Generator 介绍有介绍 generator 和 generator function,以及它们之间的关系和区别。

上一篇文章 从 setTimeout 说事件循环模型》从 setTimeout 入手,探讨了 Javascript 的事件循环模型。有别于 Java/C#等编程语言,Javascript 运行在一个单线程环境中,对 setTimeout/setInterval、ajax 和 dom 事件的异步处理是依赖事件循环实现的。作为一个转向 Javascript 的开发人员,很自然的产生一个疑问,如何实现 Javascript 多线程编程呢?随着学习的深入,我了解到 HTML5 Web Worker,本文将分析 Web Worker 为 Javascript 带来了什么,同时带大家看看 worker 模型在其他语言的应用。

背景

为什么是 React?

React 今年在国内特别火,一时间虚拟 DOM(Virtual DOM)等酷炫概念一下刷新了很多前端开发同学的三观,关于性能优劣的争论也在知乎上看到不少。不得不说 React 解决了一些前端项目开发的痛点,而我最近的一年多的工作重心,都在兴趣部落这样一个基于兴趣社交的 web 产品上,有很多感同身受的地方。兴趣部落这个产品从初期只有移动端的 2、3 个页面,发展到现在 50+移动页面,加上 PC 版的最近上线,中间经历了从 2-3 人的小项目到 10+人团队的大型前端项目的巨大转变。这个过程中除了人员相对业务的线性增加,代码量、维护成本也是以指数速度增长的,很快代码臃肿、难以维护与测试等问题就凸显出来。虽然内部经过一些轻量的重构优化,但开发模式还是与高度的迭代节奏很不匹配。这时候,React+Webpack 的组件开发模式让我眼前一亮,暗下决心要让这样的先进开发模式推广到项目团队,好东西一定要让大家有所受益,而不仅仅是技术的尝鲜、摆设。

为什么尝试使用 Canvas 绘制列表?使用 canvas 绘制列表的好处在于页面只有一个 dom 元素,这样对于大量 dom 元素组成的列表来说,无疑更节省页面内存。

本文将一步一步分析,如何实现一个 canvas 绘制的长列表。

 

Step1:dom 节点映射

首先考虑一个问题,对于我们在页面中常见的 dom 结点,在 Canvas 中如何表示?

因此我们的第一步工作就是实现 dom 结点到 Canvas 绘制对象的映射

前言

Facebook  在 2015.9.15 发布了 React Native for Android,把 JavaScript  开发技术扩展到了移动 Android 平台。基于 React 的 React Native  让前端开发者使用 JavaScript  和 React  编写应用,利用相同的核心代码就可以创建  基于 Web,iOS  和 Android  平台的原生应用。在 React Native for Android 出来之后,本人花了些时间从环境搭建到做出几个 demo,从体验来看都挺流畅,具体将此间遇到和问题和具体的新的体会,向大家分享一下。

作为一个从其他编程语言(C#/Java)转到 Javascript 的开发人员,在学习 Javascript 过程中,setTimeout() 方法的运行原理是我遇到的一个不太好理解的部分,本文尝试结合其他编程语言的实现,从 setTimeout 说事件循环模型

原文地址

 

继 Facebook 提出 Flux 架构来管理 React 数据流后,相关架构开始百花齐放,本文简单分析 React 中管理数据流的方式,以及对 Redux  进行较为仔细的介绍。

        作为一只网瘾少女,各种酷炫的网页效果已经不能再引起我的注意了,直到有一天我看到了这个 http://matthew.wagerfield.com/parallax/ ,瞬间晕船了。嗯,我喜欢这种微醺的感觉。这时我的脑洞突然开了一下,想起了前段时间票圈疯转的各种 360° 全景摄影。当手机绕着你 360° 转动的时候,就好像置身照片中的场景一样,那这个框架应该可以做成这样的效果~(虽然后来知道这个效果并不是用 parallax.js 做的sad)。于是开启了我用 parallax.js 来变身炫酷少女之路。

 

Parallax.js 到底干嘛的