欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-06 23:45:03
...

缘起

经常听说:不要重复造*,我深同此看法。如果在项目开发阶段,你还在研究和仿造现成的*,那项目的交付期将会是遥遥无期,能不能造出*不说,就算是造出的*,功能别人已经实现过了的功能,你的*会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开始实现这些个功能,那对自己也算是一种挑战了。
从0开始写前端UI框架:概述
博主并非两手空空就敢来发系列博客了,目前框架已经开始起步,已经实现了最基本的组件: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、以及格式化性别字段的回调函数。页面效果如下:
从0开始写前端UI框架:概述
上面截图是该框架(Library)实现的第一个功能,看似简单,但里面包括了一个插件开发(一个Libaray就是众多的插件集)的全部内容,麻雀虽小,五脏俱全。这里你已经看到该组件是如何使用的,那么从下章节起我将开始揭秘这一个个组件是如何实现的。如果你已经迫不及待的想实现这么一个功能,那么请继续关注我后面的文章吧,每当我实现一个功能的时候都会出一篇文章,为大家揭示框架开发的秘密。如果你想看源码的话,请关注我的github吧!