JavaScriptフレームワーク（xmlplus）コンポーネント入門（3）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
  }
}

other

typeの値が必要な場合は、取得したデータをフォーマットする必要があります。たとえば、整数が必要な場合は、parseInt 関数 を使用する必要があり、 浮動小数点 数値が必要な場合は、parse Float 関数を使用する必要があります。データのフォーマット操作をカプセル化できれば、非常に便利になります。私たちの期待を明確にするために、ターゲット コンポーネント の使用例を示すこともできます。

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

この例では、2 つのコンポーネントの入力をインスタンス化します。コンポーネントの入力により、

静的

インターフェース入力としてフォーマットパラメーターを受け取り、動的入出力インターフェースとしてプロパティ値を提供することができます。 format パラメータには、string (デフォルト)、int、float の 3 つの値があります。これら 3 つの値は、3 つの データ型 : 文字列、整数、および浮動小数点に対応します。属性値は、format の値に従って入力と出力をフォーマットします。例の出力は次のようになります: hello, world227

ターゲットコンポーネントの実装

上記のターゲットコンポーネントを完成させるために、最初にテキストボックスのコンポーネントフレームワークを与えます。

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

上記の重要な点は、簡単にするために、テーブル

クエリ

メソッドを使用することです。この関数は、コンポーネントの初期化フェーズ中に準備が整っています。上記の解析関数は、必要なフォーマット関数です。ただし、このコンポーネントの書式設定関数のタイプは、コンポーネントの初期化時に固定されることに注意してください。変数フォーマット関数が必要な場合は、コンポーネントにいくつかの変更を加える必要があります。完全なテキスト ボックス コンポーネントを以下に示します。

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）コンポーネント入門（3）TextBox（テキストボックス）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。