Introduction to the JavaScript framework (xmlplus) component (3) TextBox)

Xmlplus is a JavaScript framework used to quickly develop frontend and backend projects. This article mainly introduces the text box of the xmlplus component design series, which has some reference value. If you are interested, refer to xmlplus as a JavaScript framework for fast development of front-end and back-end projects. This article mainly introduces the text box of the xmlplus component design series, which has some reference value. If you are interested, please refer to it.

Text Box is the most commonly used input component on the page. Its default usage is as follows:

Of course, 'Type = 'text' here can be skipped. In most cases, it is okay to use the default text box as the input component. However, in a specific project, function expansion is inevitable. Here, we use how to increase the formatting capability of text box data as an example to describe how to extend native text box components. In addition to the content in this chapter, you can also refer to the parameter ing chapter in the official documentation.

Function Analysis of the target component

For native text boxes, the obtained values are of the text type, as shown in the following example:

Example: {  xml: "",  fun: function (sys, items, opts) {    console.log(typeof this.prop("value")); // string  }}

If other types of values are required, you need to format the obtained data. For example, if you need an integer, 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 formatted data operations, it will be quite convenient to use. In order to clarify our expectations, we may first give examples of the target components.

Index: {  xml: "
\       
  
   \       
   
    \     
   
  
",  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);  }}

In this example, two components are instantiated: Input. The component Input allows a format parameter to be Input as its static interface, and provides an attribute value as its dynamic Input and output interface. The format parameter has three possible values: string (default), int, and float. These three values correspond to three data types: String, integer, and floating point. The attribute value is formatted based on the format value. The output result of the example is as follows:

Hello, world
227

Implementation of target components

To complete the above target components, we first provide a text box component framework.

TextBox: {xml :"", Opt: {format:" string "}, fun: function (sys, items, opts) {var parse = {" int ": parseInt," float ": parseFloat, "string": String} [opts. format]; function getValue () {// you need to obtain the input value and follow opts. select the appropriate Formatting function for the format value,} function setValue (value) {// here we need to follow the opts. select an appropriate Formatting Function for the format value, format the value, and assign a value} return Object. defineProperty ({}, "value", {get: getValue, set: setValue });}}

The key aspect above is the selection of formatting functions. To simplify the process, we use the table query method. In the component initialization phase, the function is ready. The preceding parse function is the required Formatting Function. However, you must note that the Formatting Function Type of the component is fixed during component initialization. If you need a variable Formatting Function, You need to modify the component. Now, we can provide the complete text box component.

TextBox: {  xml: "",  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 });  }}

In addition, note that some property ing content is added to the component above, which can be added or deleted as needed in a specific project.

This series of articles is based on the xmlplus framework. If you do not know much about xmlplus, visit www.xmlplus.cn. Here are detailed introductory documents for your reference.

The above is the introduction of the JavaScript framework (xmlplus) component (3) The details of the TextBox. For more information, see other related articles in the first PHP community!