文本框是页面 中最常用的输入组件，它的默 认使用方式如下：
当然，这里的 `type='text' 可以略去不写。大部分情况下，使用默 认的文本框作为输入组件是没什么问题的，但在具体的项目中，难免会有功能 扩展的需求。这里仅以如何增加 文本框数据的格式化输入输出 能力为例说明如何扩展原生的文本框组件。除了本章的内容 ，你也可以参考官方文档中的 参数映射 一章。
目标组件的功能 分析
对于原生的文本框，我们获取 到的值是文本类型的，就像下面的示例所展示的：
rush:js;">
Example: {
xml: "
如果需要其它类型的数值，就需要对获取 到的数据进行格式化操作。比如，如果需要整型数，就需要用到 parseInt 函数 ；如果需要浮点型数，就需要用到 parseFloat 函数 。如果我们能够将格式化数据的操作封装起来，那使用起来一定会相当的方便。为了明确我们的预期，不妨先给出目标组件的使用示例。
rush:js;">
Index: {
xml: "
\
",opts) {
items.foo.value = "hello,world";
items.bar.value = 27.1828;
console.log("foo",items.foo.value);
console.log("bar",items.bar.value);
}
}
此示例实例化了两个组件 Input。组件 Input 允许接收一个 format 参数作为其静态接口输入，并提供一个 属性 value 作为其动态输入输出 接口。format 参数有三种可能的值：string (默 认)、int 以及 float。这三种值分别对应三种数据类型：字符串型、整型和浮点型。属性 value 根据 format 的值来进行格式化输入输出 。示例的输出 结果应该会是下面这样子：
hello,world
227
目标组件的实现
为了完成上面的目标组件，我们先给出一个 文本框的组件框架。
rush:js;">
Text
Box : {
xml: "
",opt: { format: "string" },opts) {
var parse = {"int": parseInt,"float": parseFloat,"string": String}[opts.format];
function getValue() {
// 这里需要
获取 input 的值并根据 opts.format 值选择适当的格式化
函数 ，
}
function setValue(value) {
// 这里需要根据 opts.format 值选择适当的格式化
函数 ，对 value 进行格式化后同去赋值
}
return Object.defineProperty({},"value",{ get: getValue,set: setValue });
}
}
上面关键的地方在于格式化函数 的选取，为了简单化，我们采用的是表查询 方式。在组件初始化阶段该函数 就已经准备就绪了，上述的 parse 函数 即所需的格式化函数 。不过需要注意的是，该组件的格式化函数 类型在组件初始化时就固定了。如果需要可变的格式化函数 ，你需要对组件做些修正。好了，下面可以给出完整的的文本框组件了。
rush:js;">
Text
Box : {
xml: "
",opt: { format: 'string' },map: { attrs: { input: "
dis abled value placeholder readonly" } },"string": String}[opts.format];
function getValue() {
return parse(sys.input.prop("value"));
}
function setValue(value) {
sys.input.prop("value",parse(value));
}
return Object.defineProperty({},set: setValue });
}
}
另外请注意，上面组件添加 了部分属性 映射的内容 ，这可以在具体的项目中根据需要进行增删。
本系列文章 基于 xmlplus 框架。如果你对 xmlplus 没有多少了解，可以访问 nofollow " href="http://www.xmlplus.cn">www.xmlplus.cn。这里有详尽的入门文档可供参考。
以上就是本文的全部内容 ，希望对大家的学习有所帮助，也希望大家多多支持 编程之家。
