首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

60行代码实现简单模板语法

不久前看过一篇不错的文章,作者用了15行代码就实现了一个简单的模板语法,我觉得很有趣,建议在阅读本文之前先看一下这个,本文不会讲解一些细节实现,这里是传送门:只有20行的Javascript模板引擎 这个模板语法实现的核心点是利用正则表达式来匹配到模板语法里面的变量和JS语句,遇到变量就将匹配到的字符串 push 到一个数组中,遇到 JS 语句就执行,最后再把数组中的字符串 join 起来,用 Function 来解析执行这串字符串,最终将执行后的结果放到指定 DOM 节点的innerHTML 里面。 但是这个模板语法还是有很多不足,比如不支持取余运算,不支持自定义模板语法,也不支持if、for、switch 之外的JS语句,缺少 HTML 实体编码。 恰好我这阵子也在看 underscore 源码,于是就参考了一下 underscore 中 template 方法的实现。 这个是我参考 template 后实现的模板,一共只有60行代码。

02

前端工程师为什么要学习编译原理?

普遍的观点认为,前端就是打好 HTML、CSS、JS 三大基础,深刻理解语义化标签,了解 N 种不同的布局方式,掌握语言的语法、特性、内置 API。再学习一些主流的前端框架,使用社区成熟的脚手架,即可快速搭建一个前端项目。胜任前端工作非常容易。再往深处学习,你会发现前端这个领域,总是有学不完的框架、工具、库,不断有新的轮子出现。技术推陈出新,版本快速迭代,但万变不离其宗。工具致力于流程自动化、规范化,服务于简洁、优雅、高效的编码,将问题高度抽象化、层次化。在如今前端开源界如此火热的现状下,框架的使用者与框架的维护者联系更加紧密,不仅能深入源码来更彻底地认识框架,还能够提出问题,参与讨论,贡献代码,共同解决技术问题,推进前端生态的发展和壮大。而编译原理,作为一门基础理论学科,除了 JS 语言本身的编译器之外,更成为 Babel、ESLint、Stylus、Flow、Pug、YAML、Vue、React、Marked 等开源前端框架的理论基石之一。了解编译原理能够对所接触的框架有更充分的认识。

03

类型即正义:TypeScript 从入门到实践(一)

JavaScript 已经占领了世界上的每一个角落,能访问网页的地方,基本上就有 JavaScript 在运作,然而 JavaScript 因为其动态、弱类型、解释型语言的特性、出错的调用栈隐蔽,使得开发者不仅在调试错误上花费大把时间,在团队协作开发时理解队友编写代码也极其困难。TypeScript 的出现极大的解决了上面的问题,TypeScript -- 一个 JavaScript 的超集,它作为一门编译型语言,提供了对类型系统和最新 ES 语法的支持,使得我们可以在享受使用 ES 最新语法的编写代码的同时,还能在写代码的过程中就规避很多潜在的语法、语义错误;并且其提供的类型系统使得我们可以在团队协作编写代码时可以很容易的了解队友代码的含义:输入和输出,大大提高了团队协作编写大型业务应用的效率。在现代 JavaScript 世界中,已经有很多大型库在使用 TypeScript 重构,包括前端三大框架:React、Vue、Angular,还有知名的组件库 antd,material,在很多公司内部的大型业务应用也在用 TypeScript 开发甚至重写现有的应用,所以如果你想编写大型业务应用或库,或者想写出更利于团队协作的代码,那么 TypeScript 有十足的理由值得你学习!本文是 TypeScript 系列教程的第一篇,主要通过使用 antd 组件库实战演练一个 TypeScript 版本 React TodoList 应用来讲解 TypeScript 的语法,使得你能在学会语法的同时还能完成一个实际可运行的项目。

02
领券