xmlplus는 프론트엔드 및 백엔드 프로젝트의 신속한 개발을 위한 JavaScript프레임워크입니다. 이 글에서는 주로 참고할 가치가 있는 xmlplus 컴포넌트 디자인 시리즈 목록을 소개합니다. 관심 있는 친구들은
List 컴포넌트 를 참조하세요. 매우 일반적으로 사용되는 컴포넌트이므로 반드시 포함되어야 합니다. 보기 구성 요소 시스템. 목록은 간결한 내용만 표시하여 매우 간단하게 만들 수 있습니다. 목록은 매우 복잡하게 만들어 매우 풍부한 콘텐츠를 표시하는 데 사용될 수도 있습니다.
구성 요소
목록은 목록 항목 및 목록 항목을 포함하는 컨테이너와 분리될 수 없습니다. 다음은 목록 항목 구성 요소인 Item과 목록 항목 컨테이너 구성 요소 List를 포함하는 가장 간단한 목록 구성 요소입니다.
Item: {
xml: "<li id='item'/>"
},
List: {
xml: "<ul id='list'/>"
}이 목록 구성 요소는 간단하지만 이 구성 요소가 구축하는 프레임워크는 지속적인 확장을 위한 기반을 마련합니다.
동적 연산
위에서 정의한 리스트 컴포넌트의 가장 기본적인 사용법은 다음과 같다. 이 사용법은 기본 목록 태그의 사용법과 다르지 않습니다. 우리는 더 많은 개선을 할 것입니다.
Example: {
xml: "<List id='example'>\
<Item>Item 1</Item>\
<Item>Item 2</Item>\
</List>"
}목록 구성 요소에는 일반적으로 추가, 삭제, 수정이라는 세 가지 작업이 포함됩니다. 단순화를 위해 먼저 이러한 작업을 구현해 보겠습니다. 우리가 정의한 목록 항목은 충분히 간단하므로 여기에서는 더 이상 새 작업 인터페이스를 정의하지 않고 시스템 인터페이스를 직접 사용합니다.
Example: {
xml: "<p id='example'>\
<List id='list'/>\
<button id='append'>append</button>\
<button id='remove'>remove</button>\
<button id='modify'>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='item'>\
<span id='color'>red</span>
<span id='shape'>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='example'>\
<List id='list'/>\
<button id='append'>append</button>\
<button id='remove'>remove</button>\
<button id='modify'>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='ui-state-default'><span class='ui-icon ui-icon-arrowthick-2-n-s'/><span id='data'/></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='list'/>",
fun: function (sys, items, opts) {
var elem = this.elem();
$(elem).sortable();
$(elem).disableSelection();
}
}마지막으로 list 컴포넌트의 사용법을 살펴보겠습니다. 이 예제의 사용법은 이전 예제와 다르지 않지만 기능과 성능은 상당히 다릅니다.
Example: {
xml: "<List id='example'>\
<Item>Item 1</Item>\
<Item>Item 2</Item>\
<Item>Item 3</Item>\
</List>"
}최적화
목록에 데이터를 자주 업데이트해야 하는 경우 필연적으로 목록 항목이 자주 추가되고 삭제되어 문제가 발생할 수 있습니다. 나쁜 앱 경험. 공식 문서의 최적화 장에 나타난 실행 가능한 최적화 계획이 아래에 나와 있습니다.
List: {
xml: "<ul id='list'/>",
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을 방문해 보세요. 자세한 시작 설명서는 여기에서 확인할 수 있습니다.
[관련 추천]
3. php.cn Dugu Jiujian (3) - JavaScript 비디오 튜토리얼
위 내용은 JavaScript 프레임워크(xmlplus) 구성 요소 소개(4) 목록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
