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

1,143 阅读5分钟

缘起

经常听说:不要重复造轮子,我深同此看法。如果在项目开发阶段,你还在研究和仿造现成的轮子,那项目的交付期将会是遥遥无期,能不能造出轮子不说,就算是造出的轮子,功能别人已经实现过了的功能,你的轮子会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. 下载发行版本代码:github.com/Spring-Chan…

  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吧!