这样写 CSS 才够原生

WEB 开发中常常需要使用一些工具来处理 HTML 和 CSS. 从语法层面来说很多都可以归类为模板方言, 比如: SASS, LESS, STYLUS, JSX, doT, ejs, handlebars, art-template 等等引擎.

这些工具的共性

以 JavaScript 为宿主语言, 并努力解决引入对象的问题

它们共同的缺点

你使用这些引入的对象会遇到各种限制, 因为它们是方言, 不再是纯粹的 JS

这些 CSS 处理器会给你一堆 API 和扩展 , , @function.

这些模板引擎会给你一些引入对象的使用契约, 最无奈的是: 模板的工作域是封闭的, 脱离了主环境.

问题:

在这些方言中, 直接使用 alert('hello world') 或 console.log('hello world') 会工作么?

不能, 这些工具做不到, 因为它们是方言, 已经脱离了执行主环境.

什么是原生 JavaScript?

渲染或者构建目标时, 执行处理后的模板就像执行一个载入的 js 文件一样

要实现原生 JavaScript, 必须满足一个条件

处理后的结果包含原生的 JavaScript 函数代码 function(){}, 即函数化

笔者有幸开发了两款工具实现了原生 JavaScript 函数化

• Real-DOM 模板引擎
• CSS 处理器