Introduction to JavaScript framework (xmlplus) components (3) TextBox (TextBox)

xmlplus is a JavaScriptframework used for rapid development of front-end and back-end projects. This article mainly introduces the text box of the xmlplus component design series, which has certain reference value. Interested friends can refer to it

The text box is the most commonly used input component on the page, and its default use The method is as follows:

Of course, the `type='text' here can be omitted. . In most cases, there is no problem using the default text box as the input component, but in specific projects, there will inevitably be a need for functional expansion. Here we only take how to increase the formatted input output capability of text box data as an example to illustrate how to extend the native text box component. In addition to the content of this chapter, you can also refer to the Parameter Mapping chapter in the official documentation.

Functional Analysis of Target Component

For the native text box, the value we obtain is of text type, as shown in the following example :

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

If you need other types of values, you need to format the obtained data. For example, if you need an integer number, you need to use the parseInt function; if you need a floating point number, you need to use the parseFloat function. If we can encapsulate the operation of formatting data, it will be quite convenient to use. In order to clarify our expectations, we might as well give a example of the use of the target component.

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

This example instantiates two components Input. The component Input is allowed to receive a format parameter as its static interface input, and provide a attribute value as its dynamic input and output interface. The format parameter has three possible values: string (default), int, and float. These three values ​​respectively correspond to three data types: string type, integer type and floating point type. The attribute value formats input and output according to the value of format. The output of the example should look like this:

hello, world
227

Implementation of the target component

In order to complete the above target component, we first give a component framework of a text box.

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

The key point above is the selection of the formatting function. For simplicity, we use the tablequery method. This function is ready during the component initialization phase. The above parse function is the required formatting function. However, it should be noted that the formatting function type of this component is fixed when the component is initialized. If you need variable formatting functions, you need to make some modifications to the component. Okay, the complete text box component can be given below.

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

Also please note that the above components have added some attribute mapping content, which can be added or deleted as needed in specific projects.

This series of articles is based on the xmlplus framework. If you don’t know much about xmlplus, you can visit www.xmlplus.cn. Detailed getting started documentation is available here.

The above is the detailed content of Introduction to JavaScript framework (xmlplus) components (3) TextBox (TextBox). For more information, please follow other related articles on the PHP Chinese website!