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


Posted in Javascript onMay 03, 2017

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

<input type='text'/>

当然,这里的 `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。这里有详尽的入门文档可供参考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
深入理解node.js之path模块
May 03 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 #Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 #Javascript
javascript过滤数组重复元素的实现方法
May 03 #Javascript
JS实现图片点击后出现模态框效果
May 03 #Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 #Javascript
javascript 判断一个对象为数组的方法
May 03 #Javascript
深入理解node.js之path模块
May 03 #Javascript
You might like
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
Python实现多线程下载文件的代码实例
2014/06/01 Python
Pyhton中防止SQL注入的方法
2015/02/05 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
Shell编程面试题
2016/05/29 面试题
材料物理专业大学毕业生求职信
2013/10/15 职场文书
劳资员岗位职责
2013/11/11 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
公司演讲稿开场白
2014/08/25 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
标枪加油稿
2015/07/22 职场文书
初中地理教学反思
2016/02/19 职场文书
关于python中模块和重载的问题
2021/11/02 Python
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android