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

「爱情、让人受尽委屈。」 2023-01-04 14:54 488阅读 0赞

## 导言 ##

最近感觉单纯 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_framework.ajaxjs.com]
 *  源码仓库：[https://gitee.com/sp42\_admin/ajaxjs/tree/master/aj-ts][https_gitee.com_sp42_admin_ajaxjs_tree_master_aj-ts]，支持 Git/SVN。
 *  Apache License Version–2.0 开源许可
 *  作者博客： [https://zhangxin.blog.csdn.net/][https_zhangxin.blog.csdn.net]。 QQ 群：[3150067][]

## 小结 ##

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

[https_framework.ajaxjs.com]: https://framework.ajaxjs.com/
[https_gitee.com_sp42_admin_ajaxjs_tree_master_aj-ts]: https://gitee.com/sp42_admin/ajaxjs/tree/master/aj-ts
[https_zhangxin.blog.csdn.net]: https://zhangxin.blog.csdn.net/
[3150067]: https://shang.qq.com/wpa/qunwpa?idkey=3877893a4ed3a5f0be01e809e7ac120e346102bd550deb6692239bb42de38e22