xmlplus組件設計系列之文本框（TextBox)（3）

更新時間：2017年05月03日 09:46:02 作者：qudou

xmlplus 是一個JavaScript框架，用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus組件設計系列之文本框，具有一定的參考價值，感興趣的小伙伴們可以參考一下

文本框是頁面中最常用的輸入組件，它的默認使用方式如下：

當然，這里的 `type='text' 可以略去不寫。大部分情況下，使用默認的文本框作為輸入組件是沒什么問題的，但在具體的項目中，難免會有功能擴展的需求。這里僅以如何增加文本框數(shù)據(jù)的格式化輸入輸出能力為例說明如何擴展原生的文本框組件。除了本章的內(nèi)容，你也可以參考官方文檔中的參數(shù)映射一章。

目標組件的功能分析

對于原生的文本框，我們獲取到的值是文本類型的，就像下面的示例所展示的：

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

如果需要其它類型的數(shù)值，就需要對獲取到的數(shù)據(jù)進行格式化操作。比如，如果需要整型數(shù)，就需要用到 parseInt 函數(shù)；如果需要浮點型數(shù)，就需要用到 parseFloat 函數(shù)。如果我們能夠?qū)⒏袷交瘮?shù)據(jù)的操作封裝起來，那使用起來一定會相當?shù)姆奖恪榱嗣鞔_我們的預期，不妨先給出目標組件的使用示例。

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 參數(shù)作為其靜態(tài)接口輸入，并提供一個屬性 value 作為其動態(tài)輸入輸出接口。format 參數(shù)有三種可能的值：string (默認)、int 以及 float。這三種值分別對應三種數(shù)據(jù)類型：字符串型、整型和浮點型。屬性 value 根據(jù) format 的值來進行格式化輸入輸出。示例的輸出結果應該會是下面這樣子：

hello, world
227

目標組件的實現(xiàn)

為了完成上面的目標組件，我們先給出一個文本框的組件框架。

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 的值并根據(jù) opts.format 值選擇適當?shù)母袷交瘮?shù)，
    }
    function setValue(value) {
      // 這里需要根據(jù) opts.format 值選擇適當?shù)母袷交瘮?shù)，對 value 進行格式化后同去賦值
    }
    return Object.defineProperty({}, "value", { get: getValue, set: setValue });
  }
}

上面關鍵的地方在于格式化函數(shù)的選取，為了簡單化，我們采用的是表查詢方式。在組件初始化階段該函數(shù)就已經(jīng)準備就緒了，上述的 parse 函數(shù)即所需的格式化函數(shù)。不過需要注意的是，該組件的格式化函數(shù)類型在組件初始化時就固定了。如果需要可變的格式化函數(shù)，你需要對組件做些修正。好了，下面可以給出完整的的文本框組件了。

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 });
  }
}

另外請注意，上面組件添加了部分屬性映射的內(nèi)容，這可以在具體的項目中根據(jù)需要進行增刪。

本系列文章基于 xmlplus 框架。如果你對 xmlplus 沒有多少了解，可以訪問 www.xmlplus.cn。這里有詳盡的入門文檔可供參考。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: