名词解释

AST：Abstract Syntax Tree, 抽象语法树

DI: Dependency Injection, 依赖注入

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

Babel 的解析引擎

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

原文链接

写在前面

先说说 Store 系统是干什么的！为什么要造这样一个东西？能够给系统架构带来什么？

当我们组件之间，拥有共享的数据的时候，经常需要进行组件通讯。在 Omi 框架里，父组件传递数据给子组件非常方便：

• 通过在组件上声明 data-* 或者 :data-* 传递给子节点
• 通过在组件上声明 data 或者 :data 传递给子节点（支持复杂数据类型的映射）
• 声明 group-data 把数组里的 data 传给一堆组件传递（支持复杂数据类型的映射）

注：上面带有冒号的是传递 javascript 表达式

原文链接

写在前面

Omi 框架可以通过在组件上声明 data-* 把属性传递给子节点。
Omi 从设计之初，就是往标准的 DOM 标签的标准传递方式靠齐。比如：

• 下划线自动转驼峰， data-page-index 传到子组件就变成 this.data.pageIndex
• data-xx 传递到子节点全都变成字符串，如 data-page-index="1"到子节点中 this.data.pageIndex 就是字符串"1"

输入在移动端是一个很常用的功能，那么输入框必然是一个很重要的部分。然而，移动端输入框总会遇到各种各样的问题，无论是样式还是 ios 和 android 两端体验不一致都是很让我们头疼的问题，那么如何使移动 web 的输入框体验更贴近原生也成了一个需要我们多多思考和研究的问题。

原文地址

在前端开发工作中，除了项目开发保质保量上线以外，项目的数据监控也应该配套起来，确保线上的正常运转。如上报 pv 监控项目是否正常运转；测速上报反应项目质量；脚本错误监控作为监控中重要一环，当页面发生报错的时候，通过上报错误信息，能及时发现存在问题，修复优化、减少损失。

本文基于在手 Q 家校群前端脚本错误量优化的方案，致力于打造极致的脚本错误优化。

原文链接

写在前面

Omi 框架经过几十个版本的迭代，越来越简便易用和强大。
经过周末的连续通宵加班加点，Omi v1.0 版本终于问世。虽然版本遵循小步快跑、频繁迭代，但是 Omi 团队成员都有着克制之心，处女座占了半壁江山，所以 Omi 的 API 除了增量的 API，其他的历史 API 没有任何变化。

• Github：https://github.com/AlloyTeam/omi

废话不多说，这就为大家介绍到目前 1.0 版本为止，关于 Omi，你必须知道的点点滴滴。

前言

现在时富媒体时代，图片的重要性对于数十亿互联网用户来说不言而喻，图片本身就是像素点阵的合集，但是为了如何更快更好的存储图片而诞生了各种各样的图片格式：jpeg、png、gif、webp 等，而这次我们要拿来开刀的，就是 png。

简介

首先，png 是什么鬼？我们来看看 wiki 上的一句话简介：

Portable Network Graphics (PNG) is a raster graphics file format that supports lossless data compression.

也就是说，png 是一种使用无损压缩的图片格式，而大家熟知的另外一种图片格式——jpeg 则是采用有损压缩的方式。用通俗易懂的方式来讲，当原图片数据被编码成 png 格式后，是可以完全还原成原本的图片数据的，而编码成 jpeg 则会损耗一部分图片数据，这是因为两者的编码方式和定位不同。jpeg 着重于人眼的观感，保留更多的亮度信息，去掉一些不影响观感的色度信息，因此是有损耗的压缩。png 则保留原始所有的颜色信息，并且支持透明／alpha 通道，然后采用无损压缩进行编码。因此对于 jpeg 来说，通常适合颜色更丰富、可以在人眼识别不了的情况下尽可能去掉冗余颜色数据的图片，比如照片之类的图片；而 png 适合需要保留原始图片信息、需要支持透明度的图片。

Webgl 的魅力在于可以创造一个自己的 3D 世界，但相比较 canvas2D 来说，除了物体的移动旋转变换完全依赖矩阵增加了复杂度，就连生成一个物体都变得很复杂。

什么？！为什么不用 Threejs？Threejs 等库确实可以很大程度的提高开发效率，而且各方面封装的非常棒，但是不推荐初学者直接依赖 Threejs，最好是把 webgl 各方面都学会，再去拥抱 Three 等相关库。

上篇矩阵入门中介绍了矩阵的基本知识，让大家了解到了基本的仿射变换矩阵，可以对物体进行移动旋转等变化，而这篇文章将教大家快速生成一个物体，并且结合变换矩阵在物体在你的世界里动起来。

写在前面

Md2site 是基于 Omi 的一款 Markdown 转网站工具，使用简单，生成的文件轻巧，功能强大。

• 官网：http://alloyteam.github.io/omi/md2site/
• Github: https://github.com/AlloyTeam/omi/tree/master/md2site
• 真实案例:http://alloyteam.github.io/omi/website/docs-cn.html

在使用之前的版本的时候，你会发现体验非常好？为什么非常好？因为页面间的切换是无刷新！
无刷新的原理就是，所有的 markdown 都会被 webpack 打包到 js 里，只要在 js 动态 require 就行。

这样带来的一个问题便是：如果有海量的 markdown 的时候，首次加载的时间非常长。

怎么解决？支持动态拉取和解析 markdown~~

写在前面

读文先看此图，能先有个大体概念：

阅读本文需要 11m 24s。

CSS Modules 介绍

CSS Modules 是什么东西呢？首先，让我们从官方文档入手：
GitHub - css-modules/css-modules: Documentation about css-modules