从0开始写前端UI框架：概述

Posted 2022-11-02 「已注销」

缘起

经常听说：不要重复造轮子，我深同此看法。如果在项目开发阶段，你还在研究和仿造现成的轮子，那项目的交付期将会是遥遥无期，能不能造出轮子不说，就算是造出的轮子，功能别人已经实现过了的功能，你的轮子会bug一堆，这种做法事半功倍，得不偿失。但是，闲暇之余，如果你精力充足，又喜欢窥探轮子的秘密，那么仿造现成轮子造出一个产品也是一件酷毙了的事情。

博主在开发需求过程中，就深刻体会到现成UI框架没法满足用户需求的痛处：当时项目匆匆上线，博主面对用户的过程中，框架所用的输入框始终满足不了用户的需求：某个每天比用功能中存在众多时间输入框，用户的唯一要求就是智能化。第一点是回车切换输入框，现成框架用的是tab键切换，用户就是不肯买账，必须回车切换输入框(其实有时候原生js能做的事情反而被框架束缚住了)，第二是智能填充24小时。这需求是现成UI框架中没法满足的，用户又是上帝，当时的想法是用原生的JS来实现，但是当时异想天开：为啥别人能写出这玩意儿我写不出呢？ 于是加班加点学习了javascript高级编程：JavaScript面向对象，this指针，闭包和作用域、原型以及原型链等技能，重点在面向对象封装这一块。于是加班熬夜用原生JS写了一款插件，满足了用户的需求，得到了用户的认可，并且返京途中用户打电话给我们组长对博主褒扬一番。

这款插件的成功开发为博主揭示框架(Library)的奥秘。 于是如中毒一般一发不可收，后来尝试封装一些前端插件，比如轮播、返回顶部、仿easyui numberbox，datepick等，并仿过jQuery造出mini版Dom框架，不过只是实现了简单的Dom选择器和过滤器功能。并且知道犹如jQuery这种经典框架也不是从0开始构建自己的代码的，他的选择器就选用了sizzle引擎。

如今在项目竣工之际，留下些许自由时间，于是想鼓捣鼓捣，捣腾捣腾一些开源项目玩玩。希望能从一个博客作者转变为开源项目作者，能提高自己编程水平的同时也结实一些志同道合的小伙伴。并写下一系列文章，为那些内心也存在着一团热火，想自己造轮子却又找不到方向的同学提供一个参考。

介绍

my-ui – 基于jQuery扩展实现的前端UI框架，封装统一API调用风格，汇聚众家优秀框架以及插件之所长，借鉴了easyui api设计风格，bootsrap的样式，追求视角完美的前端框架。

这里多说一句，博主选择jQuery家族的UI框架一是在项目开发过程中和jQuery家族的UI框架结下了不解之缘。二是目前网上这方面的博客和资源比较多。第三就是为造轮子的快感。如果你正在项目开发，博主还是建议你用现成的mvvm框架，那才是一种优雅的编程方式，博主最近也学完了Vue全家桶，跃跃欲试在下一个项目中小试牛刀。

好了，接下来就开始咱们的轮子之旅了。

• 官网
• 文档
• 开源地址

由于项目处于刚起步阶段，(github代码才提交上去呢！欢迎大家去github关注一下项目^_)，咱先来看看官网以及文档，上面罗列了将要实现的功能，这16个组件当然不能和成熟的框架相比，但是博主感觉如果自己能从0开始实现这些个功能，那对自己也算是一种挑战了。

博主并非两手空空就敢来发系列博客了，目前框架已经开始起步，已经实现了最基本的组件：table表格组建了。

使用

1. 下载发行版本代码：https://github.com/Spring-Chang/my-ui/tree/master/release

2. 按需引入框架所需的js以及css文件，或者一次性引入myui.bundle.js文件(无需引入css,css已经打包到myui.bundle.js)。因为my-ui框架是基于jQuery的扩展，
   所以您需要先引入jQuery文件。

   <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
   <script src="../../release/myui.bundle.js"></script>
   

3. 定义html元素

           <table id="table" class="myui-table">
               <caption>梁山好汉排名</caption>
               <tr>
                   <th style="height: 5px;" field="index" >座次</th>
                   <th style="height: 5px;" field="name" >原名</th>
                   <th style="height: 5px;" field="nickName">昵称</th>
                   <th style="height: 5px;" field="constellation" >星宿</th>
                   <th style="height: 5px;" field="birthDay" formatter="daily-date">生日</th>
                   <th style="height: 5px;" field="sex" formatter="sexFormatter">性别</th>
                   <th style="height: 5px;" field="effectiveness" formatter="number" >战斗指数</th>
                   <th style="height: 5px;" field="specialSkills" >特殊技能</th>
                   <th style="height: 5px;" field="remark" >备注</th>
               </tr>
           </table>
   

4. js代码调用组件

   $(function () 
       $('#table').table(
           url : './table_data.json',
           method: 'get',
           sexFormatter : function (value, row, index)  //性别格式化回调函数
               if(value) 
                   return "男";
                else if(!value) 
                   return "女";
               
               return value;
           
       );
   );
   

上述例子示范了table组件调用过程，js代码中传入了url、menthod、以及格式化性别字段的回调函数。页面效果如下：

上面截图是该框架(Library)实现的第一个功能，看似简单，但里面包括了一个插件开发(一个Libaray就是众多的插件集)的全部内容，麻雀虽小，五脏俱全。这里你已经看到该组件是如何使用的，那么从下章节起我将开始揭秘这一个个组件是如何实现的。如果你已经迫不及待的想实现这么一个功能，那么请继续关注我后面的文章吧，每当我实现一个功能的时候都会出一篇文章，为大家揭示框架开发的秘密。如果你想看源码的话，请关注我的github吧！