一、形如<ui:tagname></ui:tagname>或<div sui="panel"></div><input sui="colorpicker" />的标记将会被视为需要渲染的节点,<ui:tagname>形式的渲染前会被移除,而普通形式的则会保留
二、属性转换约定:
- _attribute 以下划线开头的属性声明为SUI专用,不会被传递给渲染适配器
- auto_expand_column 以下线线连接的属性名将会转换成驮峰式名称,autoExpandColumn
- onclick 以on开头的属性名会被放到listner的map中,而其它的属性放到properties map中,listener和properties会被传递给渲染适配器
- 值为空字符串或者null的属性将不会被传递给渲染适配器
三、属性值转换约定:ui:tagname的属性值转换成对象,约定见以下代码中的注释
四、ui:configure转换约定:此节点地声明将会被作为其父节点的声明,这种形式适合声明多层次结构的组件,比如grid。在下面的grid示例中,header和columns转换后将会同ui:grid的其他属性一起被转换和传递,其中columns会被转换成数组对象,因为columns这个单词是复数的,而其子节点column将会成为这个数组的一个子元素。而header则会被换成object
/**
*将tag属性转换成object
*<h3>按如下规则转换</h3>
*<ol>
* <li>以~开头的字符串将去除掉~,其余部分当作String</li>
* <li>字符串格式为整数的转化成Number</li>
* <li>字符串格式为浮点数的转化成Float</li>
* <li>字符串为小写true和false的转化成Boolean</li>
* <li>以[]括住的格式转化Array,Array成员再按以convertString转换</li>
* <li>以{}括住的将会被eval执行返回一个Object(这意味着也可以是基于Object的其他类)<li>
* <li>以//括住的将会被转换成RegExp<li>
* <li>以%%括住的将会被eval执行以期返回一个对象
*</ol>
*@param <String> value
*@public
*/
convertString: function(value){
if(typeof(value)!="string")throw("参数类型错误,必须为String类型");
var stringReg = /^~/; //优先级别最高
if(value.match(stringReg)) return ""+ value.substr(1);
var integerReg = /^[-\+]?\d+$/;
if(value.match(integerReg))return parseInt(value);
var floatReg = /^[-\+]?\d+(\.\d+)?$/;
if(value.match(floatReg))return parseFloat(value);
var boolReg = /^true|false$/;
if(value.match(boolReg)) return value == "true";
if(!isNaN(Date.parse(value)))return new Date(Date.parse(value));
var arrayReg = /^\[.*\]$/;
if(value.match(arrayReg)){
try{
return (function(v){return eval("var obj;obj=" + v )})(value);
}
catch(e){
throw("错误的Array声明:" + e);
}
}
var objectReg = /^\{.*\}$/;
if(value.match(objectReg)){
try{
return (function(v){return eval("var obj;obj=" + v )})(value);
}catch(error){
throw ("错误的Object声明:" + error);
}
}
var bfhReg = /^%.*%$/;
if(value.match(bfhReg)){
try{
return eval(value.slice(1,value.length-1));
}catch(error){
throw ("错误的对象引用:" + error);
}
}
var regExtReg = /^\/.*\/$/;
if(value.match(regExtReg)){
var v = eval(value);
if(v instanceof RegExp){
return v;
}else{
throw ("错误的RegExp格式");
}
}
//otherwise
return value;
},
/**
*对tag的所有属性进行转换
*@public
*@param <Element> el
*@return <Object>
*/
wrapAttributes: function(el){
var config = {
properties:
{},
listeners:
{},
suiListeners:
{}
}
var EVENT_PREFIX = "on"
var SUI_EVENT_PREFIX = "sui_on"
for (var i = 0, l = el.attributes.length; i < l; i++) {
var attribute = el.attributes[i];
if(attribute.name.indexOf("_") == 0)continue; //_下划线开头的为SUI引擎专用属性
if(attribute.value == 'null' || attribute.value == ''){
continue
}
var isEventAttribute = attribute.name.toLowerCase().indexOf(EVENT_PREFIX) == 0
var isSUIEventAttribute = attribute.name.toLowerCase().indexOf(SUI_EVENT_PREFIX) == 0
if (isEventAttribute){
config.listeners[attribute.name.substr(2).toLowerCase()] = attribute.value;
continue;
}
if(isSUIEventAttribute){
config.suiListeners[attribute.name.substr(6).toLowerCase()] = attribute.value;
continue;
}
var name = attribute.name;
//因为属性名会全部转变成小写,故如果属性名中出现_,那么_后面的首字母将变成大写。
name = name.replace(/_[a-zA-Z]/g,function(word){return word[1].toUpperCase();})
config.properties[name] = this.convertString(attribute.value);
}
return config;
}
Ext grid声明示例:
<ui:grid id="egrid" stripe_rows="true" auto_expand_column="company" height="150" width="600" title="array grid" >
<ui:configure>
<ui:header title="ext grid" backgroundcolor="red" ></ui:header>
<ui:columns>
<ui:column id="company" header="Company" width="160" sortable="true" data_index="company" ></ui:column>
</ui:columns>
</ui:configure>
</ui:grid>
转换后传递给渲染适配器的对象如下所示:
- 大小: 31.2 KB
分享到:
相关推荐
《SUI-101A全面解析:从基础到实践》 SUI-101A是一款集成度高、功能强大的智能传感器模块,广泛应用于工业自动化、物联网以及智能家居等领域。这款设备的核心在于其与单片机的高效交互,以及通过Modbus协议实现的...
《SUI-101A说明书及测量值读取程序》是针对一款名为SUI-101A的设备的详细指南,包含了该设备的接线、使用以及测量值读取的相关知识。在这个压缩包中,用户可以找到必要的文档和程序,以便更好地理解和操作SUI-101A。...
SUI-101A型号的电流互感器是一款专门设计用于转换高电流为可测量的小电流信号的装置,使得低电压等级的电子设备如微控制器(如STM32或C51)能够安全、准确地读取这些测量值。 STM32是意法半导体...
SUI-101A交流变送器模块资源 有以下资源 1、SUI-101A使用说明书2023/7/6 18:46文件夹 2、单片机读取SUI-101A测量值例程文件夹2023/7/6 18:46 3、电脑Modbus读写测试文件夹2023/7/6 18:46 4、外挂互感器接线说明(15A...
在本项目"基于STM32的SUI-101A测量值读取程序"中,我们关注的是如何利用STM32F103RCT6型号的MCU来读取SUI-101A传感器模块提供的测量数据,包括交流电的电压、电流和有功功率。 首先,STM32F103RCT6是STM32系列的一...
SUI-101A型号的电流互感器是一款专为电气工程设计的专业设备,用于准确地检测和传输交流电流信号。在本文件压缩包中,我们将会深入探讨SUI-101A的使用方法、工作原理以及测量值的读取程序。 首先,SUI-101A的说明书...
本文将深入探讨无线信道建模的基本原理,特别是SUI-3信道的MATLAB仿真。 无线信道的特征主要包括多径传播、移动台速度、物体运动以及信号带宽等因素。在无线传播过程中,信号会受到多种因素的影响,导致信号质量...
SUI-Mobile组件库 city-picker.js SUI-Mobile组件库 city-picker.js
在这个名为“vue-sui-demo”的项目中,开发者使用了Vue.js结合SUI-Mobile来创建一个适用于移动端的示例应用。SUI-Mobile是一款基于Flexbox的移动端UI库,它提供了丰富的组件和样式,帮助开发者快速构建响应式的移动...
matlab写的sui-3的信道仿真,802.16推荐下的仿真代码
本文将深入探讨一个名为“sui-button”的组件,该组件以其高度可定制性和易用性为特点,成为JavaScript开发中的热门选择。我们将从组件的概要设计、实现原理以及实际应用等多个角度进行详细解析。 首先,我们要理解...
本压缩包“SUI-JI-GONG-ZHENG.rar”包含的是关于随机共振的源代码,对于理解该技术的实现原理以及进行相关项目开发具有一定的参考价值。 随机共振的概念源于1960年代,最初是在研究非线性系统对微弱信号响应时提出...
将sui-theme导入到您的sui-component中,包括index.scss的路径: @import ' ~@s-ui/theme/lib/index ' ; 如果您想自定义您的组件,创建自己的主题,它只是隋主题导入前添加到您的组件。 @import ' ../custom-...
标题 "matlab开发-JavaScript 项目-vue-sui-demo.zip" 暗示这是一个结合了MATLAB和JavaScript技术的项目,具体来说是基于Vue.js框架和SUI Mobile UI库的示例应用。这个压缩包可能包含了一个完整的前端项目结构,用于...
本文将针对"Sui-Mobile路由加载js,css问题的解决方案"进行详细的探讨。 首先,理解SUI Mobile的路由机制是解决问题的关键。SUI Mobile 并不是一个完整的前端框架,它不包含内置的路由管理功能。通常,开发者会结合...
sui-componentssui 组件库在线文档使用yarn add sui-components示例// libimport { Wrapper, Logo, Menu, RouterPage, Avatar} from 'sui-components';const { PageWrapper, LeftWrapper, RightWrapper, Header, ...
本系统方案主要采用STM32 F407单片机作为系统主控,通过串口同SUI-101A电能计量模块进行通讯,获取有功功率、电压、电流等电参数,并通过这些参数进行用电器识别功能。其中SUI-101A模块通过电流互感器接入插座,监测...
测试框架的小例子,可以用于参考和使用,内容是博客文档附加代码。
[SUI Mobile](http://m.sui.taobao.org/) 是阿里巴巴国际UED前端团队出品的移动端 __UI库__。 没有重复造轮子。主要借鉴 __Framework7__ 的形态并以此为基础,参考Ratchet、Ionic、Onsen各种不同的思路,强化功能,...
SUI React组件 SUI组件是React组件的开源,高质量库,使团队可以轻松制作任何产品。 :desktop_computer: 环境支援现代浏览器和Internet Explorer 11+(带有 ) 服务器端渲染 :sparkles: 产品特点经过测试的,可用于...