ESLint 是一个应用广泛的 JavaScript 代码检查工具。本文主要介绍由 AlloyTeam 总结的 ESLint 配置，以及应用 ESLint 配置时的一些经验和工具。

配置原则

我们依据以下三条原则，研读了 ESLint 所有的配置项，定制出了心目中「完美」的 ESLint 配置。

1. 能够帮助发现代码错误的规则，全部开启
2. 配置不应该依赖于某个具体项目，而应尽可能的合理
3. 帮助保持团队的代码风格统一，而不是限制开发体验

名词解释

AST：Abstract Syntax Tree, 抽象语法树

DI: Dependency Injection, 依赖注入

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

Babel 的解析引擎

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

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 服务器渲染：renderToString 和 renderToStaticMarkup。renderToString 和 renderToStaticMarkup 的主要作用都是将 React Component 转化为 HTML 的字符串。这两个函数都属于 react-dom(react-dom/server) 包，都接受一个 React Component 参数，返回一个 String。

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

简介

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

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

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

原文地址

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

原文地址

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

从 JS 执行机制说起

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

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

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

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

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

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

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

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

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