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 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
JAVASCRIPT keycode总结
Feb 04 Javascript
详解javascript数组去重问题
Nov 06 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
如何使用 vue + d3 画一棵树
Dec 03 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
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
PHP对象相关知识总结
2017/04/09 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
Python的requests网络编程包使用教程
2016/07/11 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
金融专业大学生自我评价
2014/01/09 职场文书
乔迁之喜主持词
2014/03/27 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
老公出轨后的保证书
2015/05/08 职场文书
小马王观后感
2015/06/11 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
Python集合的基础操作
2021/11/01 Python
java代码实现空间切割
2022/01/18 Java/Android
Python之matplotlib绘制饼图
2022/04/13 Python