TAT.dorsywang 剖析Babel——Babel总览
In JavaScript,Web开发 on 2017年04月06日 by view: 5,172
0

名词解释

AST:Abstract Syntax Tree, 抽象语法树

DI: Dependency Injection, 依赖注入

===============================================================

Babel的解析引擎

Babel使用的引擎是babylon,babylon并非由babel团队自己开发的,而是fork的acorn项目,acorn的项目本人在很早之前在兴趣部落1.0在构建中使用,为了是做一些代码的转换,是很不错的一款引擎,不过acorn引擎只提供基本的解析ast的能力,遍历还需要配套的acorn-travesal, 替换节点需要使用acorn-,而这些开发,在Babel的插件体系开发下,变得一体化了

Omi

Open and modern framework for building user interfaces.


  • Omi的Github地址https://github.com/AlloyTeam/omi
  • 如果想体验一下Omi框架,可以访问 Omi Playground
  • 如果想使用Omi框架或者开发完善Omi框架,可以访问 Omi使用文档
  • 如果你想获得更佳的阅读体验,可以访问 Docs Website
  • 如果你懒得搭建项目脚手架,可以试试 omi-cli
  • 如果你有Omi相关的问题可以 New issue
  • 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)

一.前言

当我们选择使用Node+React的技术栈开发Web时,React提供了一种优雅的方式实现服务器渲染。使用React实现服务器渲染有以下好处

        1.利于SEO:React服务器渲染的方案使你的页面在一开始就有一个HTML DOM结构,方便Google等搜索引擎的爬虫能爬到网页的内容。

        2.提高首屏渲染的速度:服务器直接返回一个填满数据的HTML,而不是在请求了HTML后还需要异步请求首屏数据。

        3.前后端都可以使用js

二.神奇的renderToString和renderToStaticMarkup

有两个神奇的React API都可以实现React服务器渲染:renderToStringrenderToStaticMarkup。renderToString和renderToStaticMarkup的主要作用都是将React Component转化为HTML的字符串。这两个函数都属于react-dom(react-dom/server)包,都接受一个React Component参数,返回一个String。

也许你会奇怪为什么会有两个用于服务器渲染的函数,其实这两个函数是有区别的:

june01 实现一个简单的模板引擎
In JavaScript,Web开发 on 2016年10月22日 by view: 3,505
5

简介

模板引擎,其实就是一个根据模板和数据输出结果的一个工具。

我们要开发一个将模板文件转换成我们实际要使用的内容的工具,这个工具就是模板引擎。我们把模板文件里的内容当成字符串传入到模板引擎中,然后模板引擎根据一定语法对该字符串进行解析处理,然后返回一个函数,之后我们在执行函数时把数据传输进去,即可拿到根据模板和数据得到的新字符串。最后我们想怎么处理该字符串就看需求了,如果用于前端模板生成的话,则可以用dom的innerHTML这个属性来追加内容。

目前前端的模板引擎多得数不胜数,语法特性也花样百出,用行内的话来说,我们要实现的是一种基于字符串的模板引擎。

原文地址

React 的实践从去年在 PC QQ家校群开始,由于 PC 上的网络及环境都相当好,所以在使用时可谓一帆风顺,偶尔遇到点小磕绊,也能够快速地填补磨平。而最近一段时间,我们将手Q的家校群重构成 React,除了原有框架上存在明显问题的原因外,选择React也是因为它确实有足够的吸引力以及优势,加之在PC家校群上的实践经验,斟酌下便开始了,到现在已有页面在线上正常跑起。

 

原文地址

在单页应用上,前端路由并不陌生。很多前端框架也会有独立开发或推荐配套使用的路由系统。那么,当我们在谈前端路由的时候,还可以谈些什么?本文将简要分析并实现一个的前端路由,并对 react-router 进行分析。

Timer

从JS执行机制说起

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

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

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

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

上个月在千里码刷题的时候,碰到了比较有意思的一道题——隐写术。既然感觉有意思,又很久没有玩过canvas,所以今天结合这两块内容带大家探索一下。

隐写术算是一种加密技术,权威的wiki说法是“隐写术是一门关于信息隐藏的技巧与科学,所谓信息隐藏指的是不让除预期的接收者之外的任何人知晓信息的传递事件或者信息的内容。”这看似高大上的定义,并不是近代新诞生的技术,早在13世纪末德国人Trithemius就写出了《隐写术》的著作,学过密码学的同学可能知道。好了,说了这么多,隐写术到底是什么技术,让我们看一个例子。

下面是一张看似普通的图片,但其中却藏有另一个肉眼无法识别的图像哦。

玩转npm
In JavaScript,Node.js,Web开发 on 2016年03月10日 by view: 13,068
19

NPM

npm本来是Node.js的包管理工具,但随着JS这几年的蓬勃发展,现在的npm已经成了几乎所有跟JS相关的工具和软件包的管理工具了,并且还在不断发展完善中。

本文从笔者的经验,总结了npm安装/卸载、更新、发布这几个最主要功能的正确使用姿势和一些小技巧,顺便从官网搬来了npm3处理依赖的重大变化。

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

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