用 TypeScript 写一个轻量级的 UI 框架之一、开篇

导言

最近感觉单纯 JavaScript 越来越不能胜任稍大型一点的项目，原因在于 JS 缺乏强类型支持，等于在代码层面少了一个辅助提示的功能，不能说明那个变量或者对象具体是什么，当然你可以通过为其添加注释或者，起一个更好的变量名，来给予代码维护者更多的信息。但是，这不是严格的约束，对于工程性而言那简直不能称得上是有效的模式。于是很自然地我们青睐于类似 Java 那般类型安全语言实现强类型要求，不仅获得编码阶段的类型检查，而且在编译的时候能够减少错误，更有价值的在处于维护阶段的代码，强类型会使得代码更健壮和可读。况且，还能带来编码时候更多的智能联想提示功能。

对于无类型（或弱类型）的 JS，添加类型的约束可能不仅仅是“辅助”层面那么简单了，个人认为那是不可或缺之必要了。

选型

Vue.js

语言确立 TypeScript 无误了。接下来确定的是 Vue.js。不是说其他的 React/Angular 不好，而是笔者一经用上了 Vue 就爱上了，在使用的过程中发现几乎所有的问题都可以有优雅的解决方案，让人十分舒服——这是其一，其二是 Vue 强大的特性，——说出来可能让 React/Angular 粉丝不服，因为这两个特性它们都有，或者做得比 Vue 更优秀，但万变不离其宗，笔者还是觉得有必要重点提一提，就是响应式的 MVVM 数据驱动和 UI 组件化。

记得，MVVM 最先在 C# 社区兴起，后来被证明是 UI 实现的极佳生产力模式。其“惊艳”之于本人简直不亚于当初C语言“过程式”思想转变到“OOP”的那种程度。更痛恨自己之前搞了那么多 DOM 的“数据绑定”就是在浪费生命。“珍惜生命，远离 jQuery”。

说句题外话，现在有新人居然可以只熟悉 Vue，却连 JS 都不熟悉（当然是用 JS 写 Vue，只是说语言本身的高级用法则不知）。这是笔者反对的，不深入一点底层的原理和满足于狭窄的知识面，则只是停留在简单的知其然阶段。

其次是 UI 组件。组件化是前端 UI 的一大目标。为更好地复用，UI 化是行之有效的手段，但问题在于如何规范一个 Web UI 组件，那是一个难点。要知道 UI 本身就是频繁改动的对象，A 项目封装 OK 了，到 B 项目因为一丁点需求变动又要把写好的 UI 一层层解开来，——那还不如不封装，得不偿失。

于是，如何拿捏颗粒度合理封装组件，是个关键问题，这和开发者自己的经验把握有大关系——这里先不展开讨论。这个问题上，Vue 组件提供有比较好的底子，其 Component 组件本身就是一个封装数据（data or props）、标签（template）、行为（method）的综合体，异曲同工地对应我们一早学习 Web DHTML 那时的概念：一张页面里面，HTML 负责对应结构，是骨架，展示内容来自于后台提供的数据，有后台动态生成或者 AJAX 请求皆可；CSS 对应外观样式；JavaScript 负责用户交互的行为。和 MVC 思想相似，都是关注点分离后的划分，各司其职。既然有了 Vue 组件，甚至觉得即使有 ES Class 也不重要了，一样能较好地封装一个个组件。要想类那样继承才能复用代码？大可不必，使用组件的 Mixins 来“组合”组件更佳。

总之说了那么多，一句白话就是“Vue 很爽”。

Less.js

样式处理器选了个我熟手的。感觉其他的也大同小异。

Gulp.js

Webpack 固然强大，是主流。但我还是更倾向于简单一点的 gulp.js。我最早用过复杂的 Grunt.js，不久就放弃了，然后好长一段时间在 Eclipse 下面搞定所有前端打包压缩的问题，自给自足，连 node 都放弃用。我不喜欢用很重的框架，包括工具，不过现在看来我还是偏执了一点。Gulp 用起来还是人畜无害，简单迅速。

VS Code

不消多说，选择 TS 那么 IDE 势必就是 VS Code。

设计目标

虽为轮子，但也要做一个有鲜明方向目标的“轮子”！简单说就是：correct、clean、straightforward。第一点正确性不用多解释，不能正确解决需求不用干了。

轻量级

代码少，依赖少，最常见的功能优先，不求高大全。笔者不是专业前端，面面俱到不是优先的考虑。

原生

现在浏览器那么强大，H5 API 其实也不用那么多库来封装，直接调用多爽呀。

简单易维护

自己写的代码，维护成本少很多。拿别人的代码，后期就是你帮人家在维护代码，你要改它，不熟悉怎么改？要熟悉才能来改，那就是提高了维护成本。

当然，在我的例子和注释充沛的情况，你们来“维护”我这个框架的代码，也会事半功倍多。或者你可以把我这个框架的代码视作一个“引子”，来实现你自己的框架。虽然前期会花点时间，但后期维护会舒服得多。

项目信息

轻量级前端 UI 框架、组件库。

• 技术栈：TypeScript v4.1 + Vue.js v2.7 + Less.js + Gulp.js，编辑器是 VS Code，图标库采用 Font Awesome v4.7。
• 官网/DEMO：https://framework.ajaxjs.com/
• 源码仓库：https://gitee.com/sp42_admin/ajaxjs/tree/master/aj-ts，支持 Git/SVN。
• Apache License Version–2.0 开源许可
• 作者博客： https://zhangxin.blog.csdn.net/。 QQ 群：3150067

小结

玩前端那么多年，中途离开过，最后还是能够遇到 TypeScript，可以解决 JS 那么多痛点，可以说乃是神器了，那些什么“相见恨晚”的“肺”话就不多说了。下篇博文中让我们正式进入代码的世界吧！