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

缘起

经常听说：不要重复造轮子，我深同此看法。如果在项目开发阶段，你还在研究和仿造现成的轮子，那项目的交付期将会是遥遥无期，能不能造出轮子不说，就算是造出的轮子，功能别人已经实现过了的功能，你的轮子会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框架是基于j