>웹 프론트엔드 >JS 튜토리얼 >extjs_jquery의 확장 사용법에 대한 jquery 플러그인 개발 요약

extjs_jquery의 확장 사용법에 대한 jquery 플러그인 개발 요약

WBOY
WBOY원래의
2016-05-16 17:44:371011검색

jquery에서는 실제로 플러그인을 만들 때 확장이 더 자주 사용됩니다. 오늘은 jquery와 ext js에서의 확장 사용을 동시에 정리하겠습니다. 먼저 jquery에서의 확장 사용법을 살펴보겠습니다.

1) 확장(dest,src1,src2,src3...)

코드 복사 코드는 다음과 같습니다.
var start = {
id: 123,
count: 41,
desc: '정보입니다',
title: '기본 개체',
태그: '분류되지 않음',
값: [1,1,2,3,5,8,13]}
var more = { 이름: 'Los Techies', 태그: ' javascript'};
var extra = { 개수: 42, 제목: null, 설명: 정의되지 않음, 값: [1,3,6,10]} var Extended = $.extend(start , more, extra);
console.log(JSON.stringify(extended))


출력 결과는 다음과 같습니다:
{ "id": 123,
"count ": 42,
"desc": "정보입니다",
"title": null,
"tag": "javascript",
"values": [1, 3, 6 , 10],
"name": "Los Techies"}
보시다시피 실제로는
extend(dest,src1,src2,src3...), src1을 확장합니다. ,src2,src3.. .dest로 병합되고 반환값은 병합된 dest입니다. 이 메서드는 병합 후 dest의 구조를 수정하는 것을 볼 수 있습니다. 병합된 결과를 얻고 싶지만 dest의 구조를 수정하고 싶지 않은 경우 다음과 같이 사용할 수 있습니다.
var newSrc=$.extend({},src1,src2,src3...)/ /즉, "{}"를 대상 매개변수로 변경합니다.
예:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
그런 다음 병합 결과
result={name:"Jerry",age:21,sex:"Boy"}
즉, 다음 매개변수가 이전 매개변수와 이름이 같은 경우 후자는 이전 매개변수 값을 덮어씁니다.
또한 첫 번째 예에서는 "desc": 정의되지 않음이 결과에 표시되지 않습니다.
결합하면 desc의 원래 값이 계속 유지됩니다. 하지만 title:null이면 확장
결과에 나타납니다.

2) jquery 확장의 다른 사용법

1. $.extend(src) 이 방법은 src를 jquery의 전역 개체에 병합하는 것입니다. $ .extend({ hello:function(){alert('hello');} });
hello 메소드를 jquery의 전역 객체에 병합하는 것입니다.
 2. $.fn.extend(src)
이 메소드는 src를 jquery 인스턴스 객체에 병합합니다.
$.fn.extend({ hello:function(){alert(' hello' );} });
 는 hello 메소드를 jquery 인스턴스 객체에 병합하는 것입니다.
다음은 일반적으로 사용되는 몇 가지 확장 예입니다.
$.extend({net:{}})
이는 jquery 전역 개체에서 net 네임스페이스를 확장하는 것입니다.
$.extend($.net,{ hello:function(){alert('hello');} })
이는 hello 메소드를 이전에 확장된 Jquery net 네임스페이스로 확장하는 것입니다.
3 전체 복사
// Previous.extend()
jQuery.extend( false,
{ 이름: “John”, 위치: { 도시: “Boston” } },
{ 마지막: “Resig”, 위치: { 상태: “MA” } }
)
// 결과:
// => { 이름: “John”, 마지막: “Resig”, 위치 : { state: “MA” } }
jQuery.extend( true,
{ name: “John”, location: { city: “Boston” } },
{ last: “Resig”, location : { 상태: “MA” } }
)
// 결과
// => { 이름: “John”, 마지막: “Resig”,
// 위치: { 도시 : “Boston”, state: “MA” } }

3) ext js라면 차이점을 보세요
:

복사 code 코드는 다음과 같습니다. var start = {
id: 123,
count: 41,
desc: 'this 정보',
제목: '기본 개체',
태그: '분류 없음',
값: [1,1,2,3,5,8,13]}
var more = { 이름: 'Los Techies', 태그: 'javascript'};
var extra = { 개수: 42, 제목: null, desc: 정의되지 않음,
값: [1,3,6,10]} ;
var Extended = Ext.apply(start, more, extra);console.log(JSON.stringify(extended))



출력
{ "id": 123, "count": 42, "title": null, "tag": "javascript", "values": [1,3,6,10], "name": "Los Techies"}
extjs에서 apply가 사용된 것을 볼 수 있는데, extjs는 undefind가 결합된 결과에 나타나지 않아야 하고 원본이 지워진다고 생각하기 때문에 실제로 결합된 결과에서 desc가 손실됩니다. , 이것에 주의해야 합니다
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.