登录  /  注册
首页 > web前端 > js教程 > 正文

JavaScript框架(xmlplus)组件的介绍(三)文本框(TextBox)

零下一度
发布: 2017-05-04 10:21:39
原创
1719人浏览过

xmlplus 是一个javascript框架,用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之文本框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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


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

目标组件的功能分析

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

Example: {
  xml: "<input id=&#39;input&#39; value=&#39;text&#39;/>",
  fun: function (sys, items, opts) {
    console.log(typeof this.prop("value")); // string
  }
}
登录后复制

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

Index: {
  xml: "<p id=&#39;index&#39;>\
       <TextBox id=&#39;foo&#39;/>\
       <TextBox id=&#39;bar&#39; format=&#39;int&#39;/>\
     </p>",
  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=&#39;input&#39; type=&#39;text&#39;/>",
  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=&#39;input&#39; type=&#39;text&#39;/>",
  opt: { format: &#39;string&#39; },
  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。这里有详尽的入门文档可供参考。

以上就是JavaScript框架(xmlplus)组件的介绍(三)文本框(TextBox)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号