AJAXJS 框架用到的核心算法

痛定思痛。 2022-11-18 02:05 59阅读 0赞

做了那么多年，我通常还是被认为是一个“厉害”的前端，——那说明我一直在原地踏步，没有进步：（。难道就不能突破“全栈”的天花板吗？我想了想，其实是大家没有关注我另一面后端的缘故，后端也是干货的满满的。其实同行交流呢，都逃不过层层“鄙视链”的影响，说这个工具、那个框架，一旦不是自己的心头好，或者存在信息不对称的地方，不见得会立马否定对方，但内心已起波澜，“鄙视链”发作，总之谈半天都谈不到点上。所以呢，为避免这种情况发生，谈一些有点“技术深度”而不是泛泛而谈的表面东西，就有所必要了，最好能拉高一些门槛的。比如选择谈“算法”就是一个比较好的例子了，算法如同数学那样，虽然也有抽象思想但不是那么“忽悠”的（因为某些十分抽象的概念往往很容易拿出来忽悠），显得非常“干货”的干。难怪一般面试都会考算法题，才好体现程序员之价值。

首先可以肯定是的算法比较难，而且对于初级程序员而言，特别是前端程序员而言，算法使用的机会不多。而对于后端或者想进入全栈程序员的同学，算法就不可或缺。业界不是有个名言叫：“`程序=算法+数据结构`”吗？容我补充一下，后两者还是一回事，往往学习《数据结构》这门课就是在学习算法。当然，结合我们 Web 程序的开发，用俗话说，就是一个项目的编程等于：`画画界面（前端/UI）、搞搞 CRUD、还有写写算法`——这么几回事来组成——大体如此。里面的算法可以你自己去写，或者调用 SDK/API 写好的算法，同样也是算法。

我既非科班出身，亦非“原装”后端出身，自问数学基础也不好，所以算法对于我来说，最开始是恐惧、其次是学得吃力，最后结论自己还不是那块料。于是，我的策略不同常人，我是用到的时候才去研究这个算法，不像其他基础好的同学去刷题、刷 LeetCode，因为我总觉得算法之所以难学，就在于它本身很抽象的，如果不结合实际场合去应用算法，总会觉得为什么要那样做？大脑会有很多问号。比如你学“堆栈”本身，第一感觉是不知道有什么用，用来干嘛，教科书上“每个汉字都懂，但组合起来每句话就是不知背后什么意思”，——但换个场景，当你要分析树求层数的时候，碰到钉子，再去寻找答案，从而认识了“堆栈”，便会觉得顺理成章得多。

再次重申算法是难的，特别对于我这种笨的人来说。按我自身经验来说，虽然能正确地使用算法，理解了其思想，但日子一久了还是容易忘记。客观原因是算法本身难（抽象、不够直观），主观原因我缺乏高强度的训练（排斥背算法、做题），但我在造“轮子”的时候，随着深入没办法不学习算法。所以在这里，我只能谈谈我框架中所应用到的算法，都是一些比较简单的，蜻蜓点水。不怕大家见笑，复杂一点的算法我也做不来：（

好记性不如烂笔头，笔者打算通过本文记录一下用到的算法，——尽管可能在大侠眼中，简单得不值一提。

# MVC 的路由 #

控制器自定义配置路由地址，对应 Java 方法，这种就是类似 Spring MVC 的做法。比如 `/foo/bar` 对于 `method1()`，`/foo/bar/xyz` 对应 `method2()`……等等。

这些路径类似文件目录，也就是树目录。每次地址请求过来，得到路径后将字符串（如 `/foo/bar`）转为先进先出的队列（Queue），消耗第一个 foo 找到树节点 foo，然后队列剩下 bar，在前面已经找到的 foo 其下面的子节点再找出来，最后发现这个队列元素为空，说明已经查找完毕，bar 节点就是结果。这个节目是 key/value 结构，对应 Java method 对象。接着通过反射执行方法即可。

# 网站结构描述与配置系统 #

URL 地址一层一层的解释为树状，于是网站可视为“一颗树”，网站的首页就是树的根节点。我们用 JSON 描述这个结构。在编码中就有遍历树、修改树的问题，这些问题仍然离不开堆栈、队列等的数据结构处理手段。

同样推广到系统的配置系统也如是，它本质结构也是一颗树。

不但后端程序，前端画界面的时候也需要这部分数据结构的知识。

# 无限级分类 #

当初自学 ASP 和数据库时遇到的第一个算法。一般实体允许带有分类的字段。我当初不懂，愣是硬编码，写到三层就觉得重复了，一个分类一个字段……直到后来学习“双亲节点法”，解决了树状结构在数据库中“扁平化”的存储问题。参见我的笔记。

*  [SQL 双亲节点查找所有子节点][SQL]

解决了存储的问题，然后是如何展示的问题。和上面提到遍历树类似，可归类为树的操作。我们可以写一个菜单或者树状控件作为练习。

*  [用 TypeScript 写一个轻量级的 UI 框架之十四：Tree 树组件（上）][TypeScript _ UI _Tree]

# 分页算法 #

这个太简单了，小儿科算术题……是否整除、求余数。稍有点难的是补充 `<table>` 元素空 `td`。

# 缓存算法 #

缓存的思想，可用三行多的代码 `if(map[xxx] == null)map[xxx] = yyy;……` 简单体现，复杂的话可以其他不同的策略来实现。我学习时候整理文章如下。

*  [白话 LRU 缓存及链表的数据结构讲解（一）][LRU]
 *  [白话 LRU 缓存及链表的数据结构讲解（二）][LRU 1]
 *  [白话 LRU 缓存及链表的数据结构讲解（三）][LRU 2]
 *  [简简单单做一个带过期时间的内存缓存][Link 1]

# JSON 解释器 #

这是解决 JSON 如何序列化/反序列化的问题。例如把一个 map/bean 转换为字符串的 JSON。这个简单，无非“递归、反射”的操作。可是如何解释 JSON 字符串为 Java 世界里面的对象（可以是 map/bean），则需要挑战编译原理那些“高大上”的知识，对我无疑是“超纲”了。

领我入门的是一个网友写的解释 JSON 的小函数，代码行数不多，它号称可以适用于 JSON 常规 80% 的情况，速度也快，但同时也引来了其他高手的嘲讽，说复杂一些的情况没有考虑，总之他们之间的对话很搞笑，各不相让，其实都有自己的道理，也引起我的兴趣与好奇。

于是我接着开始一些完整的例子，如何去解析 JSON，发现水不是一般的深。比如说状态机模式，有个理解的捷径不知对不对，就是把状态机理解为一个类似于表格二维结构，然后围绕这个表格来编码。

AJAXJS 的 JSON 解析器不是原创的，不过我改了很多，把过程式的风格改成尽量往 OOP 的靠拢。实话说我至今还没完全消化这部分知识，文章也只写到第一篇。

*  [大家都懂的 JSON 解析器原理（一）简介 & 低配版入门][JSON _ _]

# 权限系统 #

权限系统一开始我找到的是类似 Shiro 的框架，但真正的权限算法还是要自己写。以前上司教过我 8421 码，也就是 Linux 文件权限那一套，当然非常好，再一次展现数学无穷的魅力。我觉得此类算法真的是“低成本、高回报”之典型，不学就错过一百万了：）

其他有类似的算法也看过一下，最终决定二进制 long 的存储方案。参见博客：

*  [通过“单键锁配置法”实现访问控制][Link 2]
 *  [权限设计算法基础][Link 3]

# CRUD #

什么！？增删改查也算算法？呃……广义上说，算是吧，我们天天干这……

这里试举 DAO（Data Access Object） 的例子。我实现的是类似 MyBatis 的注解绑定 SQL 方案。对付 SQL 用 lambda 来处理。基础 SQL 封装好，然后想要修改目标 SQL 语句？传入一个 lambda 吧。返回的 String 就是要执行的 SQL。

# 小结 #

“笨鸟后飞”——我都不是“先飞”，落后至今属于“后飞”了，能飞起来算不错了……另外显然我非要“蹭算法”的逼格不可，却奈何肚中的墨水不多。聪明的你可能不屑于本文的土方法：），没关系～～如有错误敬请斧正！

最后的最后，请容笔者我安利下 AJAXJS 框架，配文的代码都可以在里面找。

*  源码：[https://gitee.com/sp42\_admin/ajaxjs][https_gitee.com_sp42_admin_ajaxjs]
 *  学习资源索引 [https://zhangxin.blog.csdn.net/article/details/114283320][https_zhangxin.blog.csdn.net_article_details_114283320]
 *  UI Demo [https://framework.ajaxjs.com/demo/index.html][https_framework.ajaxjs.com_demo_index.html]

[SQL]: https://zhangxin.blog.csdn.net/article/details/51297845
[TypeScript _ UI _Tree]: https://zhangxin.blog.csdn.net/article/details/115313570
[LRU]: https://zhangxin.blog.csdn.net/article/details/90482303
[LRU 1]: https://zhangxin.blog.csdn.net/article/details/90492307
[LRU 2]: https://zhangxin.blog.csdn.net/article/details/90517338
[Link 1]: https://zhangxin.blog.csdn.net/article/details/106324339
[JSON _ _]: https://zhangxin.blog.csdn.net/article/details/77132093
[Link 2]: https://zhangxin.blog.csdn.net/article/details/75314560
[Link 3]: https://zhangxin.blog.csdn.net/article/details/107530676
[https_gitee.com_sp42_admin_ajaxjs]: https://gitee.com/sp42_admin/ajaxjs
[https_zhangxin.blog.csdn.net_article_details_114283320]: https://zhangxin.blog.csdn.net/article/details/114283320
[https_framework.ajaxjs.com_demo_index.html]: https://framework.ajaxjs.com/demo/index.html