JavaScript框架（xmlplus）元件的介紹（三）文字方塊（TextBox)

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中文網其他相關文章！