JavaScriptフレームワーク（xmlplus）コンポーネント入門（3）TextBox（テキストボックス）-jsチュートリアル-php.cn

JavaScriptフレームワーク（xmlplus）コンポーネント入門（3）TextBox（テキストボックス）

零下一度

リリース： 2017-05-04 10:21:39

オリジナル

1980 人が閲覧しました

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 サイトの他の関連記事を参照してください。