완전한 JavaScript 구성 요소 개발
- 黄舟원래의
- 2017-02-25 13:27:491505검색
개발자라면 누구나 브라우저에 경고, 확인 등 몇 가지 내장 컨트롤이 있다는 것을 알아야 합니다. 그러나 이러한 컨트롤은 일반적으로 브라우저 제조업체에 따라 모양이 다르며 시각적 효과가 나타나지 않는 경우가 많습니다. UI 디자이너 요구 사항에 부합합니다. 더 중요한 것은 이러한 내장 컨트롤의 스타일이 다양한 스타일을 가진 다양한 인터넷 제품의 디자인 스타일과 통합하기 어렵다는 것입니다. 따라서 우수한 프런트 엔드 개발자는 이러한 기본 제공 브라우저 컨트롤을 대체하기 위해 자신만의 개인화된 컨트롤을 개발합니다. 물론 인터넷에는 이미 이런 종류의 우수한 컴포넌트가 셀 수 없이 많지만, 이 글을 쓰는 목적은 내가 개발한 컴포넌트가 얼마나 뛰어난지 설명하려는 것도 아니고, 이런 식으로 상호작용할 수 있기를 바라는 것일 뿐입니다. 많은 개발자들이 서로 소통하고, 서로 배우며, 함께 발전해 나가고 있습니다. 좋아요, 더 이상 고민하지 말고 본론으로 들어가겠습니다.
기능 소개
브라우저와 함께 제공되는 경고 및 확인 컨트롤을 대체
사용자 정의 인터페이스 스타일
기본적으로 내장된 컨트롤과 사용방법이 일치합니다
효과 미리보기
1. 알림 컨트롤
2. 제어 확인
3. 전체 코드, 온라인 미리보기(하단 참조, 압축 패키지 다운로드 제공)
개발 과정
1. 컴포넌트 구조 설계
먼저 내장 컴포넌트의 기본 사용법을 살펴보겠습니다.
alert("内置Alert控件");
if (confirm("关闭内置Confirm控件？")) {
alert("True");
} else {
alert("False");
}구성 요소의 사용법이 내장 컨트롤과 일치하는지 확인하려면 내장 컨트롤을 재정의하는 것을 고려해야 합니다. 컴포넌트 개발의 통일된 스타일, 사용 용이성, 쉬운 유지 관리 및 객체 지향 기능을 고려하여 사용자 정의된 경고 및 확인 메서드를 클래스(Winpop)의 인스턴스 메서드로 사용하고 마지막으로 인스턴스 메서드를 사용하여 다음을 수행할 계획입니다. 시스템의 내장 컨트롤 방법을 재정의합니다. 목표를 달성하기 위해 나의 기본 접근 방식은 다음과 같습니다.
var obj = new Winpop(); // 创建一个Winpop的实例对象
// 覆盖alert控件
window.alert = function(str) {
obj.alert.call(obj, str);
};
// 覆盖confirm控件
window.confirm = function(str, cb) {
obj.confirm.call(obj, str, cb);
};브라우저에 내장된 컨트롤이 브라우저의 다른 동작을 방지할 수 있으므로 사용자 정의 구성 요소에는 이러한 기능이 없습니다. 미리보기에서 볼 수 있듯이 최대한 통일성을 높이기 위해 맞춤 구성요소를 표시할 때 전체 화면 반투명 마스크 레이어를 사용합니다. 부울 값을 반환하는 기본 제공 방법부터 "OK" 및 "취소" 논리를 올바르게 추가할 수 있습니다. 따라서 커스텀 컴포넌트의 사용은 다음과 같은 형태가 됩니다.
alert("自定义Alert组件");
confirm("关闭自定义Confirm组件？", function(flag){
if (flag) {
alert("True");
} else {
alert("False");
}
});2. 컴포넌트 코드 디자인
Winpop 컴포넌트의 코드를 정식으로 소개하기 전에 먼저 Javascript 구성 요소의 기본 구조를 살펴보십시오.
(function(window, undefined) {
function JsClassName(cfg) {
var config = cfg || {};
this.get = function(n) {
return config[n];
}
this.set = function(n, v) {
config[n] = v;
}
this.init();
}
JsClassName.prototype = {
init: function(){},
otherMethod: function(){}
};
window.JsClassName = window.JsClassName || JsClassName;
})(window);자체 실행 익명 함수를 사용하여 구성 요소 코드를 래핑하여 전역 오염을 최대한 줄이고 마지막으로 클래스를 전역 창 객체에 연결합니다. 이는 권장되는 접근 방식입니다.
생성자의 get 및 set 메소드는 필요하지 않으며 작성자의 개인적인 습관일 뿐입니다. 이렇게 작성하면 구성 매개변수 및 기타 구성요소의 내부 전역 캐싱 및 읽기 호출 방법을 통합할 수 있다고 생각합니다. 변수이며 객체 지향 스타일이 더 효율적인 것 같습니다. 독자들은 자신의 생각을 공유하고 이런 식으로 쓰는 것이 좋은지 아닌지를 공유하는 것을 환영합니다.
다음으로 Winpop 구성 요소의 전체 코드를 살펴보겠습니다.
(function(window, jQuery, undefined) {
var HTMLS = {
ovl: '<p class="J_WinpopMask winpop-mask" id="J_WinpopMask"></p>' + '<p class="J_WinpopBox winpop-box" id="J_WinpopBox">' +
'<p class="J_WinpopMain winpop-main"></p>' + '<p class="J_WinpopBtns winpop-btns"></p>' + '</p>',
alert: '<input type="button" class="J_AltBtn pop-btn alert-button" value="确定">',
confirm: '<input type="button" class="J_CfmFalse pop-btn confirm-false" value="取消">' + '
<input type="button" class="J_CfmTrue pop-btn confirm-true" value="确定">'
}
function Winpop() {
var config = {};
this.get = function(n) {
return config[n];
}
this.set = function(n, v) {
config[n] = v;
}
this.init();
}
Winpop.prototype = {
init: function() {
this.createDom();
this.bindEvent();
},
createDom: function() {
var body = jQuery("body"),
ovl = jQuery("#J_WinpopBox");
if (ovl.length === 0) {
body.append(HTMLS.ovl);
}
this.set("ovl", jQuery("#J_WinpopBox"));
this.set("mask", jQuery("#J_WinpopMask"));
},
bindEvent: function() {
var _this = this,
ovl = _this.get("ovl"),
mask = _this.get("mask");
ovl.on("click", ".J_AltBtn", function(e) {
_this.hide();
});
ovl.on("click", ".J_CfmTrue", function(e) {
var cb = _this.get("confirmBack");
_this.hide();
cb && cb(true);
});
ovl.on("click", ".J_CfmFalse", function(e) {
var cb = _this.get("confirmBack");
_this.hide();
cb && cb(false);
});
mask.on("click", function(e) {
_this.hide();
});
jQuery(document).on("keyup", function(e) {
var kc = e.keyCode,
cb = _this.get("confirmBack");;
if (kc === 27) {
_this.hide();
} else if (kc === 13) {
_this.hide();
if (_this.get("type") === "confirm") {
cb && cb(true);
}
}
});
},
alert: function(str, btnstr) {
var str = typeof str === 'string' ? str : str.toString(),
ovl = this.get("ovl");
this.set("type", "alert");
ovl.find(".J_WinpopMain").html(str);
if (typeof btnstr == "undefined") {
ovl.find(".J_WinpopBtns").html(HTMLS.alert);
} else {
ovl.find(".J_WinpopBtns").html(btnstr);
}
this.show();
},
confirm: function(str, callback) {
var str = typeof str === 'string' ? str : str.toString(),
ovl = this.get("ovl");
this.set("type", "confirm");
ovl.find(".J_WinpopMain").html(str);
ovl.find(".J_WinpopBtns").html(HTMLS.confirm);
this.set("confirmBack", (callback || function() {}));
this.show();
},
show: function() {
this.get("ovl").show();
this.get("mask").show();
},
hide: function() {
var ovl = this.get("ovl");
ovl.find(".J_WinpopMain").html("");
ovl.find(".J_WinpopBtns").html("");
ovl.hide();
this.get("mask").hide();
},
destory: function() {
this.get("ovl").remove();
this.get("mask").remove();
delete window.alert;
delete window.confirm;
}
};
var obj = new Winpop();
window.alert = function(str) {
obj.alert.call(obj, str);
};
window.confirm = function(str, cb) {
obj.confirm.call(obj, str, cb);
};
})(window, jQuery);코드가 조금 더 있지만 핵심 사항은 다음과 같습니다.
작가님이 훔쳐가셨네요 게을러서 jQuery를 사용하셨네요. 사용하기 전에 꼭 jQuery를 도입했는지 꼭 확인해주세요
결국 커스텀 컴포넌트 구조는 본문에 추가되고, 따라서 위 js를 소개하기 전에 문서가 로드되었는지 확인하세요
컴포넌트에 ESC를 누르고 마스크 레이어를 클릭하여 컴포넌트를 숨기는 기능이 추가되었습니다
-
참고: 이 예제 destroy 메소드에서는 사용되지 않지만 독자는 이 메소드에서 window.alert 삭제 및 window.confirm 삭제에 주의할 수 있습니다. 사용자 정의 구성 요소가 삭제되면 경고 및 확인 컨트롤이 브라우저의 내장 효과로 복원됩니다.
구성 요소 끝에 window.Winpop = Winpop을 추가하면 다른 클래스가 호출할 수 있는 전역 개체
드디어
저는 개인적으로 프론트엔드 개발 엔지니어로서 Javascript 컴포넌트 개발이 매우 흥미롭고 재미있는 일이라고 생각합니다. 직접 시도해 봐야만 알 수 있습니다. 프런트엔드 구성 요소 개발에는 절반의 노력으로 두 배의 결과를 얻기 위해 Javascript, CSS 및 HTML의 협력이 필요한 경우가 많습니다. 위에서 언급한 Winpop도 예외는 아닙니다. 여기에서 관심 있는 독자에게 완전한 데모 압축 패키지를 제공합니다. 단어.
위 내용은 완전한 JavaScript 컴포넌트를 개발하는 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!