YOUI组件库之filed组件构建思路

一、YOUI组件库通用约定

1、遵循jQuery官方UI组件库的模式，依赖jquery.js(1.3.2),ui.core.js(1.7.2)

2、约定使用initHtml参数决定是否初始化静态html

3、约定使用_defaulHtmls方法执行静态html的初始化

4、约定使用_initAction方法初始化动作相关的操作

5、约定使用div元素作为组件的载体

二、Field组件的通用约定

1、所有的field组件都需要extend 自 $.youi.field，一般情况下使用如下代码组件化

$.widget("youi.fieldText",$.extend({},$.youi.field,{......});

2、field结构约定

field相关的抽象对象

$.youi.field 所有field组件的需要extend的对象

$.youi.fieldSource 带数据的类型的field组件需要extend的对象，通过parents数组参数实现父子联动

$.youi.fieldPop 下拉类型的field组件需要extend的对象，已经extend 自 $.youi.fieldSource

3、field组件公共访问方法

getValue 获得field组件值，返回单值或者值数组

setValue(value) 设置field组件值，value可以是单值或者值数组

getText 获得显示文本

focus 聚焦field组件

clear 清空

reset 重置（根据defaultValue决定调用 setValue或者clear）

validate 校验

4、通过样式和field div元素的样式来展示校验信息，validate-error样式表示校验不通过，validate-success样式表示校验通过,通过title属性存储校验的输出信息,fieldText组件中使用validating样式表示ajax校验中。

fieldSelect示例：

/*** field组件* Copyright (c) 2009 zhouyi* licenses* doc */
(function($) {var _log = $.youi.log;/*** fieldSelect组件* */$.widget("youi.fieldSelect",$.extend({},$.youi.field,//field$.youi.fieldPop,{//fieldPop继承了fieldSource/*** fieldSelect的个性初始化* 1、调用约定的fieldSource组件的初始化方法_initSource*/_initField:function(){this._initSource();},/*** 回调函数，返回record解析成的html*/_parseRecord:function(index,record,options){var htmls = [],codeValue = record.code,showValue = record.show,itemClasses = ['option-item'];var selectedValue = options.selectedValue;if(selectedValue!=null){//已选值处理var values= [];if($.isArray(selectedValue)){values = selectedValue;}else{values = [selectedValue];}for(var i=0;i<values.length;i++){if(codeValue==values[i]){itemClasses.push('selected');options.selectedTexts.push(showValue);//选值对应的文本加入约定的参数selectedTexts中break;}}}htmls.push('<div value="'+codeValue+'" class="'+itemClasses.join(' ')+'">'+showValue+'</div>');return htmls.join('');},/*** 空记录的html*/_nullItemHtml:function(){return '<div class="option-item"></div>';},/*** 获得存放数据的容器的id*/_getDatasContextId:function(){return this._getPanelId();//fieldSelect组件的数据panel和popPanel一致},/*** 初始化panel的动作*/_initPanelAction:function(){this._getPopPanel().mousedown(function(event){event.stopPropagation();})//阻止冒泡.bind('click',function(event){var eventClass = $.youi.eventUtil.getEventClass(event);//option-item;if(eventClass=='option-item'){var fieldId = this.getAttribute('fieldId');$.youi.fieldUtil.execMethod($('#'+fieldId),'setValue',event.target.getAttribute('value'));$.youi.fieldUtil.execMethod($('#'+fieldId),'_closePanel');}});},/*** 设置值*/setValue:function(value){this.element.find('input.value').val(value);//设置文本if(!this._isLoaded()){//如果没有加载数据this._datasLoader();//加载数据}else{//已经加载了数据var text = this._getPopPanel().find('.option-item[value='+value+']').text();this.setText(text);this._resetChildren();}},/*** 获得值*/getValue:function(){return this.element.find('input.value').val();},/*** 设置显示值*/setText:function(text){this.element.find('input.textInput').val(text);},/*** 获得显示值*/getText:function(){return this.element.find('input.textInput').val();},clear:function(){this.element.find('input.textInput,input.value').val("");},focus:function(){//TODO}}));$.extend($.youi.fieldSelect,{defaults:$.extend({},$.youi.fieldPopDefaults,{})});
})(jQuery);

YOUI组件库之filed组件构建思路相关推荐

30组常用前端开发组件库，前端组件收集整理列表
0. 前端自动化前端构建工具 gulp – The streaming build system grunt – the JavaScript Task Runner 前端模块管理器 Bower – ...
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
vue组件库介绍以及组件库Element UI 的使用
组件库前言这篇文章介绍vue组件库! 介绍什么是组件库以及Element UI组件库的使用! 看完不会你打我.哈哈哈,开玩笑的,不多说,上刺刀!! 1. 什么是 vue 组件库在实际开发中,前端 ...
Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构
1 常见的 CSS 架构模式常见的 CSS 架构模式有很多:OOCSS.ACSS.BEM.SMACSS.ITCSS 等,其中 SMACSS 和 ITCSS 很相似.我在企业级项目中最常使用的是简化版 ...
Material组件库中table组件的sticky属性
sticky 英文字面意思是粘,粘贴,所以姑且称之为粘性定位 .我们先看下在Angular中如何使用. 当我们需要固定住头部的时候,只需要在mat-header-row 加上 sticky: true ...
vue项目组件库Avue表格组件avue-crud
vue项目一直在用的pc端后台管理系统的组件库是ElementUI,但是在最近的项目中使用了avue-crud这个组件,他是Avue这个库里面的表格组件.这是github. 表格使用体验,相比于饿了么 ...
新手适合用什么Vue组件库？TinyVue组件库好用吗？
对于刚接触前端领域的同学,绕不开选择组件库的问题, 常见的 Vue组件库如下: Vuetify 组件库.一个纯手工精心打造的 Material 样式的组件库.文档全,但是纯英文的官网还是会让一些同学望 ...
微信小程序引入WeUI组件库并使用组件
1. git 下载:weui,解压,打开文件夹,dist文件夹,style-->weui.wxss,复制到项目里 2.useExtendedLib引入根目录的app.json里引入 " ...
mathcal 对应于什么库_如何快速构建React组件库
前言俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...

YOUI组件库之filed组件构建思路

YOUI组件库之filed组件构建思路相关推荐

最新文章

热门文章