JavaScript 프레임워크(xmlplus) 구성 요소 소개(3) TextBox(TextBox)

xmlplus는 프론트엔드 및 백엔드 프로젝트의 신속한 개발을 위한 JavaScript프레임워크입니다. 이 글에서는 주로 참고할만한 가치가 있는 xmlplus 컴포넌트 디자인 시리즈의 텍스트 상자를 소개합니다. 관심 있는 친구들은

을 참조하세요. 텍스트 상자는 페이지에서 가장 일반적으로 사용되는 입력 컴포넌트이며 기본적으로 사용됩니다.

9887ef52099b93ef81a4073036326c37

물론 여기서 `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
  }
}

다른 유형 값이 필요한 경우 가져온 데이터의 형식을 지정해야 합니다. 예를 들어, 정수 숫자가 필요한 경우 parsInt 함수 를 사용해야 하며, 부동 소수점 숫자가 필요한 경우 parsFloat 함수를 사용해야 합니다. . 데이터 형식화 작업을 캡슐화할 수 있다면 사용하기 매우 편리할 것입니다. 우리의 기대를 명확히 하기 위해 먼저 대상 구성 요소 를 사용하는 예를 제시하는 것이 좋습니다.

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

이 예는 두 가지 구성 요소 입력을 인스턴스화합니다. 구성요소 입력을 사용하면 정적 인터페이스 입력으로 형식 매개변수를 수신하고 동적 입력 및 출력 인터페이스로 속성 값을 제공할 수 있습니다. 형식 매개변수에는 string(기본값), int 및 float의 세 가지 값이 있습니다. 이 세 가지 값은 각각 세 가지 데이터 유형, 즉 문자열 유형, 정수 유형 및 부동 소수점 유형에 해당합니다. 속성 값은 format 값에 따라 입력 및 출력 형식을 지정합니다. 예제의 출력은 다음과 같아야 합니다.

hello, world
227

대상 구성 요소 구현

위의 대상 컴포넌트를 완성하기 위해 먼저 텍스트 상자의 컴포넌트 프레임워크를 제공합니다.

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(TextBox)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!