TAT.heyli babel到底将代码转换成什么鸟样?
In Web开发 on 2016年05月15日 by view: 2,743
4


原文链接

前言

将babel捧作前端一个划时代的工具一定也不为过,它的出现让许多程序员幸福地用上了es6新语法。但你就这么放心地让babel跑在外网?反正我是不放心,我就曾经过被坑过,于是萌生了研究babel代码转换的想法。本文不是分析babel源码,仅仅是看看babel转换的最终产物。

es6在babel中又称为es2015。由于es2015语法众多,本文仅挑选了较为常用的一些语法点,而且主要是分析babel-preset-2015这个插件(react开发的时候,常在webpack中用到这个preset)。

Timer

从JS执行机制说起

浏览器(或者说JS引擎)执行JS的机制是基于事件循环。

由于JS是单线程,所以同一时间只能执行一个任务,其他任务就得排队,后续任务必须等到前一个任务结束才能开始执行。

为了避免因为某些长时间任务造成的无意义等待,JS引入了异步的概念,用另一个线程来管理异步任务。

同步任务直接在主线程队列中顺序执行,而异步任务会进入另一个任务队列,不会阻塞主线程。等到主线程队列空了(执行完了)的时候,就会去异步队列查询是否有可执行的异步任务了(异步任务通常进入异步队列之后还要等一些条件才能执行,如ajax请求、文件读写),如果某个异步任务可以执行了便加入主线程队列,以此循环。

TAT.dnt 移动web开发调试工具AlloyLever介绍
In Web开发 on 2016年05月10日 by view: 5,301
8

简介

web调试有几个非常频繁的刚需:看log、看error、看AJAX发包与回包。其他的如timeline和cookie以及localstorage就不是那么频繁,但是AlloyLever都支持。如你所见:

 

TAT.rocket 总结伪类与伪元素
In CSS3 on 2016年05月09日 by view: 8,008
12

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法,即使你有用过伪类与伪元素,但里面总有一两个你没见过的吧。

1.伪类与伪元素

先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述

CSS introduces the concepts of pseudo-elements and pseudo-classes  to permit formatting based on information that lies outside the document tree.

 

写在前面

因为zepto、jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发。每个框架类库被大量用户大规模使用都说明其戳中了开发者的刚需。本文将对比zepto/jQuery到Nuclear的设计和演化的过程。

无框架时代

互联网的春风刚刮来的时候,人们当时利用三剑客制作网页。

【译】2016React大会之React展望
In Web开发 on 2016年04月20日 by view: 4,674
4

译者按:2016年React.js大会在今年1月份举行,2月底放出了视频,本文翻译的是其中一个演讲What Lies Ahead(自备梯子),介绍了React目前的进展,以及未来的研发方向。

Hi, 我是Ben,在React团队工作,今天我要介绍的是我们对React未来的构想。

当我们在考虑“React还有哪些改进空间?”“还有什么问题可以用React解决?”的时候,我们都在尝试回答一个问题——React如何帮助(开发者)开发极致的应用?这个问题有两个部分要考量。首先,一个极致的应用明显应该有良好的用户体验。同时,我们认为开发体验的地位也是举足轻重。所以今天我们要讨论这两个话题。

TAT.李强 Node嵌入式数据库——NeDB
In Web开发 on 2016年03月30日 by view: 6,831
5

一、简介

NeDB是使用Nodejs实现的一个NoSQL嵌入式数据库操作模块,可以充当内存数据库,也可以用来实现本地存储,甚至可以在浏览器中使用。查询方式比较灵活,支持使用正则、比较运算符、逻辑运算符、索引以及JSON深度查询等。

NeDB嵌入到了应用程序进程中,消除了与客户机服务器配置相关的开销,在运行时,也只需要较少的内存开销,使用精简代码编写,速度更快。其API是MongoDB的一个子集,可以通过这些接口轻松管理应用程序数据,而不依靠原始的文档文件。

具有简单、轻量、速度快等特点,由于嵌入式数据库存储总数据量最好要控制在1GB以内,所以适合在不需要大量数据处理的应用系统中使用(比如使用nw.js等实现的桌面应用程序、并发量不大的系统等)。

TAT.tennylv 移动web适配利器-rem
In CSS3 on 2016年03月27日 by view: 29,601
31

前言

提到rem,大家首先会想到的是em,px,pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移动端的响应式适配哦。

 

兼容性

TAT.dorsywang 从Promise的Then说起
In Web开发 on 2016年03月25日 by view: 3,881
4

Promise让代码变得更人性化

曾经我一直在思考,为什么代码会比较难读。后来发现,我们平时要阅读的所有媒体:报纸、书、新闻,我们在阅读的时候,都是从上到下一直读下去的,然而,我们的在读代码的时候,经常要跳着去读,这种阅读方式其实是反人类的,如果我们能在读代码的时候,也可以从上往下一直读下去,那么,代码就会变得可读性提高很多。

探索react-redux的小秘密
In Web开发 on 2016年03月25日 by view: 5,885
7

一、前言

    自从React火起来后,笔者对这种组件化的开发模式实在太喜欢,瞬间成为了它的脑残粉。后面也用React做了一些项目,比如http://buluo.qq.com/p,采用的技术架构是Reactjs + Reflux + webpack。不得不说前端的变化是日新月异,Redux出来后,github star嗖嗖的,用Reflux就显得很low B了,迎头赶上吧。 

这是Redux的架构图。
此处输入图片的描述

Redux起源于React,但它们并没有关系。它是独立的,支持React、Angular、Ember或者更多其他的框架。网上有非常多的文章去讨论Redux,本文就不去讨论它的原理及使用方法了,不了解的同学请移步Redux中文文档

 

既然Redux与React没有什么关联,那要怎样搭配它们使用呢? 
官方提供了一个react-redux绑定库,来配合React,它是怎么实现的呢? 
OK,本文就是来讲react-redux的。