JavaScript 프레임워크(xmlplus) 구성 요소 소개(4) 목록

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

List 컴포넌트 를 참조하세요. 매우 일반적으로 사용되는 컴포넌트이므로 반드시 포함되어야 합니다. 보기 구성 요소 시스템. 목록은 간결한 내용만 표시하여 매우 간단하게 만들 수 있습니다. 목록은 매우 복잡하게 만들어 매우 풍부한 콘텐츠를 표시하는 데 사용될 수도 있습니다.

구성 요소

목록은 목록 항목 및 목록 항목을 포함하는 컨테이너와 분리될 수 없습니다. 다음은 목록 항목 구성 요소인 Item과 목록 항목 컨테이너 구성 요소 List를 포함하는 가장 간단한 목록 구성 요소입니다.

Item: {
 xml: "<li id=&#39;item&#39;/>"
},
List: {
 xml: "<ul id=&#39;list&#39;/>"
}

이 목록 구성 요소는 간단하지만 이 구성 요소가 구축하는 프레임워크는 지속적인 확장을 위한 기반을 마련합니다.

동적 연산

위에서 정의한 리스트 컴포넌트의 가장 기본적인 사용법은 다음과 같다. 이 사용법은 기본 목록 태그의 사용법과 다르지 않습니다. 우리는 더 많은 개선을 할 것입니다.

Example: {
 xml: "<List id=&#39;example&#39;>\
  <Item>Item 1</Item>\
  <Item>Item 2</Item>\
  </List>"
}

목록 구성 요소에는 일반적으로 추가, 삭제, 수정이라는 세 가지 작업이 포함됩니다. 단순화를 위해 먼저 이러한 작업을 구현해 보겠습니다. 우리가 정의한 목록 항목은 충분히 간단하므로 여기에서는 더 이상 새 작업 인터페이스를 정의하지 않고 시스템 인터페이스를 직접 사용합니다.

Example: {
 xml: "<p id=&#39;example&#39;>\
  <List id=&#39;list&#39;/>\
  <button id=&#39;append&#39;>append</button>\
  <button id=&#39;remove&#39;>remove</button>\
  <button id=&#39;modify&#39;>modify</button>\
  </p>",
 fun: function (sys, items, opts) {
 sys.append.on("click", function() {
  sys.list.append("Item").text("Item 1");
 });
 sys.remove.on("click", function() {
  sys.list.first() && sys.list.first().remove();
 });
 sys.modify.on("click", function() {
  sys.list.first() && sys.list.first().text("Item 2");
 });
 }
}

이 예에서는 목록의 시스템 함수 append를 사용하여 목록 항목을 추가하고, 목록 항목의 시스템 함수인 Remove를 사용하여 목록 항목을 제거하고, 목록 항목의 시스템 기능 텍스트를 사용하여 다음을 수행합니다. 목록 항목의 데이터를 수정합니다.

위 목록 항목에는 간단한 텍스트 데이터가 포함되어 있으므로 위 예에서는 텍스트 함수를 사용하여 데이터를 처리하는 것이 적합합니다. 이제 더 복잡한 데이터를 포함하는 목록 항목이 주어지면 목록 항목은 데이터 작업 인터페이스를 추가로 정의합니다.

Item: {
 xml: "<li id=&#39;item&#39;>\
  <span id=&#39;color&#39;>red</span>
  <span id=&#39;shape&#39;>square</span>
  </li>",
 fun: function (sys, items, opts) {
 function getValue() {
  return {color: sys.color.text(), shape: sys.shape.text()};
 }
 function setValue(obj) {
  sys.color.text(obj.color);
  sys.shape.text(obj.shape);
 }
 return Object.defineProperty({}, "data", { get: getValue, set: setValue});
 }
}

다음은 새 목록 항목이 포함된 목록 작업의 예입니다. 컴포넌트를 추가하고 삭제하는 경우에는 시스템에서 제공하는 기능을 사용할 수도 있지만, 데이터를 가져오고 수정하는 경우에는 새로 정의된 인터페이스만 사용할 수 있습니다.

Example: {
 xml: "<p id=&#39;example&#39;>\
  <List id=&#39;list&#39;/>\
  <button id=&#39;append&#39;>append</button>\
  <button id=&#39;remove&#39;>remove</button>\
  <button id=&#39;modify&#39;>modify</button>\
  </List>",
 fun: function (sys, items, opts) {
 sys.append.on("click", function() {
  sys.list.append("Item");
 });
 sys.remove.on("click", function() {
  sys.list.first() && sys.list.first().remove();
 });
 sys.modify.on("click", function() {
  sys.list.first() && items.list.first().data = {color: "blue", shape: "rectangle"};
 });
 }
}

목록 항목 인터페이스 정의에 대한 특별한 요구 사항은 없습니다. 예를 들어 setValue 및 getValue를 사용해야 합니다. 이는 특정 시나리오에 따라 다르며 필요에 따라 유연하게 선택할 수 있습니다.

타사 목록 구성 요소 사용

요즘 시중에는 풍부한 기능을 갖춘 다양한 목록 구성 요소가 있는데, 이를 2차 캡슐화를 통해 사용할 수 있습니다. 여기서는 JQuery 목록 구성 요소와 정렬 기능을 결합하여 작동 방법을 보여줍니다.

이 목록 항목이 너무 길기 때문에 먼저 목록 항목을 캡슐화하세요. 데이터 작업 인터페이스 도입에 주목하세요.

Item: {
 xml: "<li class=&#39;ui-state-default&#39;><span class=&#39;ui-icon ui-icon-arrowthick-2-n-s&#39;/><span id=&#39;data&#39;/></li>",
 map: { appendTo: "data" },
 fun: function (sys, items, opts) {
 return { data: sys.data.text };
 }
}

두 번째로 다음 목록 항목의 컨테이너 구성 요소를 정의합니다. 이 컨테이너 구성 요소는 주로 JQuery의 목록 초기화 코드를 캡슐화합니다. 여기서 목록은 정렬 가능하지만 선택 가능하지는 않습니다.

List: {
 css: "#list{ list-style-type: none; margin: 0; padding: 0; width: 60%; }\
  #list li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }\
  #list li span { position: absolute; margin-left: -1.3em; }",
 xml: "<ul id=&#39;list&#39;/>",
 fun: function (sys, items, opts) {
 var elem = this.elem();
 $(elem).sortable();
 $(elem).disableSelection();
 }
}

마지막으로 list 컴포넌트의 사용법을 살펴보겠습니다. 이 예제의 사용법은 이전 예제와 다르지 않지만 기능과 성능은 상당히 다릅니다.

Example: {
 xml: "<List id=&#39;example&#39;>\
  <Item>Item 1</Item>\
  <Item>Item 2</Item>\
  <Item>Item 3</Item>\
  </List>"
}

최적화

목록에 데이터를 자주 업데이트해야 하는 경우 필연적으로 목록 항목이 자주 추가되고 삭제되어 문제가 발생할 수 있습니다. 나쁜 앱 경험. 공식 문서의 최적화 장에 나타난 실행 가능한 최적화 계획이 아래에 나와 있습니다.

List: {
 xml: "<ul id=&#39;list&#39;/>",
 fun: function (sys, items, opts) {
 function setValue(array) {
  var list = sys.list.children();
  for ( var i = 0; i < array.length; i++ )
  (list[i] || sys.list.append("Item")).show().text(array[i]);
  for ( var k = i; k < list.length; k++ )
  list[k].hide();
 }
 return Object.defineProperty({}, "value", { set: setValue });
 }
}

복잡한 목록 항목의 경우 다시 생성하는 데 드는 비용이 엄청납니다. 따라서 이 최적화 계획은 기존 목록 항목을 최대한 재사용하고, 새 목록 항목을 삭제하고 다시 작성하는 대신 필요한 경우에만 데이터를 새로 고치고, 기존 목록 항목이 충분하지 않은 경우에만 새 목록 항목을 생성합니다.

이 기사 시리즈는 xmlplus 프레임워크를 기반으로 합니다. xmlplus에 대해 잘 모르신다면 www.xmlplus.cn을 방문해 보세요. 자세한 시작 설명서는 여기에서 확인할 수 있습니다.

[관련 추천]

1. 무료 js 온라인 동영상 튜토리얼

JavaScript 중국어 참조 매뉴얼

3. php.cn Dugu Jiujian (3) - JavaScript 비디오 튜토리얼

위 내용은 JavaScript 프레임워크(xmlplus) 구성 요소 소개(4) 목록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!