之前就使用过react+Ant Design、vue+ElementUI这两种架构开发前端项目，最近又有幸遇到一种新的架构方式：jQuery+AresUI，于是冒出了一些感想，有了这篇文章。
工作至今，我发现我开发过的几款后台管理系统，它们的页面结构和功能基本上是一样的。如图：
每个页面的结构就是导航+内容，内容部分大致分为表单+表格 ；功能上则细分为数据的增删改查、导入导出、下载等。
它们的区别只在于前端使用的框架 、样式库 (UI)的不同。
说起前端框架和UI库，现在主流的都是使用react 和vue ，jQuery基本没有多少学习的价值，但是我觉得它还是很有研究价值 的，毕竟它曾经在前端史上赫赫有名👍。
我在接手开发这个项目，然后陆续接需求差不多两年的时间内，除了提升使用jQuery API的熟练度外，我总结了一下，主要有以下收获：
- 更清楚的看到html、css、js的交互 ，以及组织这些文件的方式
- 如果用原生的html、css、js组织项目，而不使用框架的话，对它的复杂度有了更清楚的认识
- 对使用vue、react这些主流框的好处 有了更深刻的理解
先来说说这个项目，有哪些特点
- 它是通过jQuery API来处理页面逻辑的。
- 它使用AresUI样式库(一直没找到官网，猜测它应该是很古老的UI库，也没怎么维护了吧，如果有朋友知道，麻烦告诉一下，表示感谢！)。
- 它没有路由功能 ，而是采用内嵌iframe标签 的方式做局部替换 ，在点击左侧导航时，更改iframe标签的name属性 ，把各个html页面嵌入到主页面 中，这也导致切换后的渲染存在bug，因为是内部使用，一直未处理。
- 需要用到的第三方库，都通过直接下载的js文件引入 ，特别是在html中对这些js文件的引入顺序还有要求。
再来看看这个项目，有哪些问题
这是html页面的目录(一部分)：
这么多页面，没有组件化的情况下，冗余代码是极多的，有些功能改变时每个页面都得改，心累！
这是其中某个html页面的代码：
可以看到，引入了很多的css和js文件(且它们都是静态的)，这样的组织方式就会带来问题，比如样式的覆盖 和js引入顺序不同导致某些数据找不到。
这是某段插入表格的代码：
大家可能想不到，这300多行，我当初开发了一个星期，大家可能觉得我效率太低了，但是我只能说，这是我做前端以来写的最麻烦的代码了,用原生js创建表格再插入到DOM中的需求，我再也不想遇到了。
iframe标签嵌入页面会带来页面错乱的问题
正常是这样展示的： 
但是有时会出现这样的情况： 
具体原因不明，查了一些资料，只知道页面嵌入内容的这种方式，很早就已经存在了，iframe还是比较先进的做法🐶(当然在vue、react等主流的框架中没必要使用)。
嵌入简史
很久以前，很流行在网络上使用框架创建网站------网站的一小部分存储于单独的 HTML 页面中。这些被嵌入在一个称为框架集的主文档中，它允许你指定每个框架能够填充在屏幕上的区域，非常像调整表格的列和行的大小。这些做法在 90 年代中期至 90 年代后期被认为是比较酷的，有证据表明，将网页分解成较小的块，这样有利于下载速度------尤其是在那时网络连接速度太慢的情况下更为明显。然而，这些技术有很多问题，随着网络速度越来越快，这些技术带来的问题远超过它们带来的积极因素，所以你再也看不到它们被使用了。
一小段时间之后（20 世纪 90 年代末，21 世纪初），插件技术变得非常受欢迎，例如 Java Applet 和 Flash------这些技术允许网络开发者将丰富的内容嵌入到网页中，例如视频和动画等，这些内容不能通过 HTML 单独实现。 嵌入这些技术是通过诸如 object 和较少使用的 embed 元素来实现的，当时它们非常有用。由于许多问题，包括无障碍、安全性、文件大小等，它们已经过时了; 如今，大多数移动设备不再支持这些插件，桌面端也逐渐不再支持。
最后，iframe 元素出现了（连同其他嵌入内容的方式，如 canvas、video 等），它提供了一种将整个 web 页嵌入到另一个网页的方法，看起来就像那个 web 页是另一个网页的一个 img 或其他元素一样。iframe 现在经常被使用。
说了这么多，总结一下：
1. 这是一个古老的项目，使用的技术都不算主流，甚至过时了。之所以没想过用主流的框架重构，是因为它只在内部使用，用户量不大，公司不想投入成本。
2. 这个古老的项目暴露出的很多问题，让我看到了技术之更新迭代的一些轮廓，也意识到了一些学习技术的方式方法：
- 其一，基础的重要性，无论新老框架，底层都是html、css、js这些基础，无非是解决问题的方式更方便和更全面了，对基础掌握的越深，才能对框架使用的越好。
- 其二，新技术的敏感性，新技术的流行，必然解决了某些痛点，技术人应该与时俱进，保持学习，这样才能更好的解决问题。