YeeUI 介绍

YeeUI 是什么

YeeUI 框架是一个配合BeaconPHP 的一个JS框架，同时YeeUI 也可以单独脱离BeaconPHP 使用。

YeeUI 提供一种高效便捷的输入框控件初始化的一种方式，提供自动加载模块，自动渲染控件，并且自带提供了一些在WEB开发中常用的输入方式的插件实现。

YeeUI的设计特点是竟可能的不使写JS代码或者少些JS代码实现后台程序大多数交互逻辑，比如数据渲染，数据表单验证，Ajax交互操作，对话框等相关功能，通过给Html标签添加 yee-module 属性来赋予某个标签特定的功能，并通过data-* 来配置相关的插件设置，实现标签化配置，使用感受就如同html 原生属性。
在后台开发中，我们可能会有很多输入插件需要编写，比如 输入验证脚本，上传控件脚本，图片上传，多图上传，引入编辑器，关联菜单，数值大小判断，Ajax表单提交，Ajax交互操作，动态增删控件，以及 打开对话框，选择对话框 等相应的脚本实现，在这里可以得到很简便的方式实现。 YeeUI 的出现 主要是为了更便捷的解决在后台或者WEB项目中一般常用的交互问题，节约宝贵的js脚本编写时间。

YeeUI 是基于 jQuery 实现的，并且整个框架中都是以事件和触发事件的方式交互数据，且数据会以 data-* 方式绑定到节点之上，YeeUI 会对html节点进行文档操作，所以 类似 vue.js 这种数据渲染的框架会与 YeeUI 冲突。当然如果你已知道这个事实，并且可以合理规避冲突本作者并不会反对联合它们使用。

在 BeaconPHP 框架中 ，YeeUI 框架的目录所在位置为  /www/yeeui 所以在 BeaconPHP我们需要引入的文件是：

<link type="text/css" rel="stylesheet" href="/yeeui/css/yeeui.css"/>
<script src="/yeeui/third/jquery-3.3.1.min.js"></script>
<script src="/yeeui/yee.js"></script>

这3个文件，其中 yeeui.css 是YeeUI库的样式文件，yee.js 文件是框架文件。

YeeUI 的渲染流程

1 页面加载完成后 YeeUI 会扫描 所有 具有 yee-module 属性的html节点，并且 为渲染这些节点加载依赖的 js 脚本文件。

2 所有依赖文件加载完成 后开始渲染 具有 yee-module 属性的节点，节点上的设置 以 data-* 的方式提供。

3 渲染完成后 执行 jQuery 的 $(function(){}); ready 方法。 此处使用 jQuery 的 ready 方法会被延后到 所有节点渲染完成。

YeeUI 在加载运行的过程中会懒加载 /yeeui/yee.config.js 这个配置文件。这个配置文件会定义一些依赖关系，以及预加载的文件，具体请查阅 YeeUI 的配置说明。

在 代码中使用 我们一般需要使用 yee-module 来为我们的html 节点设置相关的属性功能。

如下面一个例子：

<a href="/mybook" yee-module="ajax confrim" data-confirm="确定要提交了吗？"/>提交</a>

这个例子中 使用到了 YeeUI 的 ajax 模块功能，表示使用 ajax 来提交这个url ，

同时这个a 标签 也使用到了 YeeUI 的 confrim 模块功能(提交前弹窗提示) data-confirm 是弹窗提示的内容信息。


YeeUI 框架的所有设置 都是使用 data-*  来进行设置的，而所有使用模块都是使用 yee-module 来引用模块的，除此之外 YeeUI 还扩展了一些事件，使用 on-* 来监听 或者使用jQurey 的 $('#id').on()  来监听。

即后面所讲的 设置项 全部是指  data-*   模块引用指 yee-module 的应用(类似 class 样式名一样使用)，而事件 则一般是指使用 $('#id').on('事件名')