一、形如<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说明书以及STM32/C51测量值读取程序
SUI-101A说明书及测量值读取程序:内附有接线说明书,和使用说明书 ,C51和STM32读取程序
SUI-101A资料(内含SUI-101A使用说明书、单片机读取SUI-101A例程、Modbus读写测试、外挂互感器接线说明)
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...
无线信道建模原理及SUI-3信道的MATlab仿真.pdf无线信道建模原理及SUI-3信道的MATlab仿真.pdf
SUI-Mobile组件库 city-picker.js SUI-Mobile组件库 city-picker.js
电流互感器SUI-101A说明书及测量值读取程序
matlab写的sui-3的信道仿真,802.16推荐下的仿真代码
这是一个用 Vue 和 SUI-Mobile 写的移动端 Demo,可以用来学习 Vue.js。项目线上预览,效果图如下:
matlab开发-JavaScript 项目-vue-sui-demo.zip
sui-mobile路由加载js,css问题的解决方案,仅供参考
无线信道建模原理及SUI-3信道的MATlab仿真 (2).docx无线信道建模原理及SUI-3信道的MATlab仿真 (2).docx
无线信道建模原理及SUI-3信道的MATlab仿真 (2).pdf无线信道建模原理及SUI-3信道的MATlab仿真 (2).pdf
将sui-theme导入到您的sui-component中,包括index.scss的路径: @import ' ~@s-ui/theme/lib/index ' ; 如果您想自定义您的组件,创建自己的主题,它只是隋主题导入前添加到您的组件。 @import ' ../custom-...
sui-componentssui 组件库在线文档使用yarn add sui-components示例// libimport { Wrapper, Logo, Menu, RouterPage, Avatar} from 'sui-components';const { PageWrapper, LeftWrapper, RightWrapper, Header, ...
测试框架的小例子,可以用于参考和使用,内容是博客文档附加代码。
随机共振的源代码,对微弱信号检测有很大 作用,仅供参考使用
[SUI Mobile](http://m.sui.taobao.org/) 是阿里巴巴国际UED前端团队出品的移动端 __UI库__。 没有重复造轮子。主要借鉴 __Framework7__ 的形态并以此为基础,参考Ratchet、Ionic、Onsen各种不同的思路,强化功能,...
SUI React组件 SUI组件是React组件的开源,高质量库,使团队可以轻松制作任何产品。 :desktop_computer: 环境支援现代浏览器和Internet Explorer 11+(带有 ) 服务器端渲染 :sparkles: 产品特点经过测试的,可用于...
sui-components快速SSR测试 准备组件 组件文件夹(您要测试的组件)中要做的事情 1.-构建生产版本 npm run build 2.-使用NPM进行链接,这样您就可以直接在其他项目中使用它了,例如,在AtomTooltip组件的文件夹中( ...