Introduction aux composants du framework JavaScript (xmlplus) (3) TextBox (TextBox)

xmlplus est un JavaScriptframework pour le développement rapide de projets front-end et back-end. Cet article présente principalement la zone de texte de la série de conception de composants xmlplus, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

La zone de texte est le composant d'entrée le plus couramment utilisé sur la page et son utilisation par défaut. La méthode est la suivante :

9887ef52099b93ef81a4073036326c37

Bien sûr, le `type='text' ici peut être omis. Dans la plupart des cas, il n'y a aucun problème à utiliser la zone de texte par défaut comme composant d'entrée, mais dans des projets spécifiques, une extension fonctionnelle sera inévitablement nécessaire. Ici, nous prenons uniquement comme exemple comment augmenter la capacité de sortie d'entrée formatée des données de zone de texte pour illustrer comment étendre le composant de zone de texte natif. En plus du contenu de ce chapitre, vous pouvez également vous référer au chapitre Mappage des paramètres dans la documentation officielle.

Analyse fonctionnelle du composant cible

Pour la zone de texte native, la valeur que nous obtenons est de type texte, comme le montre l'exemple ci-dessous :

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

Si vous avez besoin d' autres valeurs de type, vous devez formater les données obtenues. Par exemple, si vous avez besoin de nombres entiers, vous devez utiliser la fonction parseInt  ; si vous avez besoin de nombres à virgule flottante , vous devez utiliser la fonction parseFloat . Si nous pouvons encapsuler l’opération de formatage des données, ce sera très pratique à utiliser. Afin de clarifier nos attentes, autant donner un exemple d'utilisation du composant cible en premier.

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

Cet exemple instancie deux composants Input. Le composant Input permet de recevoir un paramètre de format comme son entrée statique interface , et de fournir une valeur attribut comme interface d'entrée et de sortie dynamique. Le paramètre format a trois valeurs possibles : string (par défaut), int et float. Ces trois valeurs correspondent respectivement à trois types de données : type chaîne , type entier et type virgule flottante. La valeur de l'attribut formate l'entrée et la sortie en fonction de la valeur du format. Le résultat de l'exemple devrait ressembler à ceci :

bonjour tout le monde
227

Implémentation du composant cible

Afin de compléter le composant cible ci-dessus, nous donnons d'abord un cadre de composants d'une zone de texte.

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

Le point clé ci-dessus est la sélection de la fonction de formatage Pour plus de simplicité, nous utilisons la méthode table requête . Cette fonction est prête pendant la phase d'initialisation du composant. La fonction d'analyse ci-dessus est la fonction de formatage requise. Cependant, il convient de noter que le type de fonction de formatage de ce composant est fixé lors de l'initialisation du composant. Si vous avez besoin de fonctions de formatage variable, vous devez apporter quelques modifications au composant. D'accord, le composant complet de la zone de texte peut être donné ci-dessous.

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

Veuillez également noter que les composants ci-dessus ont ajouté du contenu de mappage d'attributs, qui peut être ajouté ou supprimé selon les besoins dans des projets spécifiques.

Cette série d'articles est basée sur le framework xmlplus. Si vous ne savez pas grand-chose sur XMLplus, vous pouvez visiter www.xmlplus.cn. Une documentation détaillée de démarrage est disponible ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!