xmlplus组件设计系列之文本框（TextBox)（3）

网络编程 2025/1/12 佚名

3 1 2

快活林资源网 Design By www.csstdc.com

文本框是页面中最常用的输入组件，它的默认使用方式如下：

当然，这里的 `type='text' 可以略去不写。大部分情况下，使用默认的文本框作为输入组件是没什么问题的，但在具体的项目中，难免会有功能扩展的需求。这里仅以如何增加文本框数据的格式化输入输出能力为例说明如何扩展原生的文本框组件。除了本章的内容，你也可以参考官方文档中的参数映射一章。

目标组件的功能分析

对于原生的文本框，我们获取到的值是文本类型的，就像下面的示例所展示的：

Example: {
  xml: "<input id='input' value='text'/>",
  fun: function (sys, items, opts) {
    console.log(typeof this.prop("value")); // string
  }
}

如果需要其它类型的数值，就需要对获取到的数据进行格式化操作。比如，如果需要整型数，就需要用到 parseInt 函数；如果需要浮点型数，就需要用到 parseFloat 函数。如果我们能够将格式化数据的操作封装起来，那使用起来一定会相当的方便。为了明确我们的预期，不妨先给出目标组件的使用示例。

Index: {
  xml: "<div id='index'>       <TextBox id='foo'/>       <TextBox id='bar' format='int'/>     </div>",
  fun: function (sys, items, 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

目标组件的实现

为了完成上面的目标组件，我们先给出一个文本框的组件框架。

TextBox: {
  xml: "<input id='input' type='text'/>",
  opt: { format: "string" },
  fun: function (sys, items, 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 函数即所需的格式化函数。不过需要注意的是，该组件的格式化函数类型在组件初始化时就固定了。如果需要可变的格式化函数，你需要对组件做些修正。好了，下面可以给出完整的的文本框组件了。

TextBox: {
  xml: "<input id='input' type='text'/>",
  opt: { format: 'string' },
  map: { attrs: { input: "disabled value placeholder readonly" } },
  fun: function (sys, items, opts) {
    var parse = {"int": parseInt, "float": parseFloat, "string": String}[opts.format];
    function getValue() {
      return parse(sys.input.prop("value"));
    }
    function setValue(value) {
      sys.input.prop("value", parse(value));
    }
    return Object.defineProperty({}, "value", { get: getValue, set: setValue });
  }
}

另外请注意，上面组件添加了部分属性映射的内容，这可以在具体的项目中根据需要进行增删。

本系列文章基于 xmlplus 框架。如果你对 xmlplus 没有多少了解，可以访问 www.xmlplus.cn。这里有详尽的入门文档可供参考。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

xmlplus,文本框,TextBox

快活林资源网 Design By www.csstdc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

快活林资源网 Design By www.csstdc.com

评论“xmlplus组件设计系列之文本框（TextBox)（3）”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月12日

xmlplus组件设计系列之文本框（TextBox)（3）

Node.js对MongoDB数据库实现模糊查询的方法

利用Mongoose让JSON数据直接插入或更新到MongoDB

评论“xmlplus组件设计系列之文本框（TextBox)（3）”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接