jquery로 자바스크립트 코드 정리(js 기능화)_기본지식

마법의 "$" 함수로 시작하기
"$" 함수는 문서가 로드된 후 이벤트를 지정된 버튼에 바인딩합니다. 이 코드는 단일 웹 페이지에서 잘 작동합니다. 하지만 다른 페이지가 있으면 이 과정을 반복해야 합니다.

코드 복사 코드는 다음과 같습니다.

Say Hello

버튼에 다른 작업이 필요한 경우 어떻게 해야 할까요? 예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

좋아요 취소

다음에는 이와 같은 버튼이 많이 필요합니다.

코드 복사 코드는 다음과 같습니다.

좋아요 취소

코드 복사 코드는 다음과 같습니다.

Say Hello javascript:; " class="sayUnlike">좋아하지 않음

그러나 모든 페이지에서 이 두 가지 버튼을 순서대로 사용하지는 않습니다. 페이지에서 추가 선택기를 사용하려면 몇 가지 필요한 조정을 해야 합니다. 클래스 기반 선택기의 성능은 ID 선택기에 비해 매우 비싸기 때문입니다. 모든 DOM 요소를 탐색하고 클래스 속성을 일치시키기 위해 정규식을 사용해야 합니다. 조건을 만족하는 요소를 선택합니다.

코드 복사

코드는 다음과 같습니다. 'A' ){?>

$(function(){

$('.sayHello').click(function(){
alert('Hello world!');
})
} ?> 페이지 == 'B'){?>
?> >
저희 프로젝트 기능은 시간이 지나면서 점점 더 복잡해지고 있습니다. 이렇게 빠르지만 지저분해졌습니다...




코드 복사


코드는 다음과 같습니다:

if($page == 'A' or $page == "C" and $page is not "D" ){ ?> ;
if ($page == "B" 또는 $page == "E"이고 $page가 "X"가 아닙니다){ ?> if($page == "B" 또는 $page == "C"){ ?> ?> ;


이것은 정말 나쁜 일입니다. 모든 이벤트를 바인딩하려면 한 페이지에 많은 코드 조각을 로드해야 합니다. 여러 js 파일에 서로 다른 코드를 로드하면 여러 페이지의 리소스 소비가 증가하게 됩니다. 관리 및 사용자 경험과 관련하여 더 나은 솔루션을 찾아야 합니다.
클래스 선택기의 오버헤드가 너무 높기 때문에 모든 이벤트를 한 번의 스캔으로 바인딩할 수 있나요? 시도해 볼 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//전역 이름 공간을 등록합니다.
var Yottaa || {}
Yottaa.EventMonitor = function(){
this.listeners = {} ;
}
//모든 이벤트 바인딩
Yottaa.EventMonitor.prototype.subscribe=function(msg, callback){
var lst = this.listeners[msg]; lst) {
lst.push(callback);
} else {
this.listeners[msg] = [callback];
}
}
// 이벤트 모니터 생성 instance.
var event_monitor = new Yottaa.EventMonitor();
function load_event_monitor(root){
var re = /a_(w )/; //모든 이벤트 객체를 필터링합니다. 🎜>var fns = {};
$(".j", root).each(function(i) {
var m = re.exec(this.className);
if (m) {
var f = fns[m[1]];
if (!f) { //이벤트 핸들러 함수가 없으면 함수 객체를 생성합니다.
f = eval("Yottaa. init_" m[1] );
fns[m[1]] = f;//바인딩 함수를 호출합니다.
}
f && f(this);
}
} );
}
$(function(){
// DOM이 준비되면 모든 이벤트를 바인딩합니다.
load_event_monitor(document);
}); 샘플 구성요소
Yottaa.init_sayhello = function(obj){
$(obj).click(function(){
alert('Hello world!');
}); }
Yottaa.init_unlike = function(obj){
$(obj).click(function(){
alert('좋아요.');
});
script>


DOM 요소는 다음과 같이 작성됩니다.
Say Hello a>
Say Like

이것이 훨씬 더 나은 것 같습니다. 페이지가 로드됩니다(위(코드의 모든 '.j' 요소)에서 이벤트에 바인딩되어야 하는 모든 요소를 ​​찾을 수 있습니다. 바인딩할 특정 구성 요소는 클래스 이름의 a_xxx에 의해 결정됩니다. Yottaa.init_xxx에 해당하며 현재 요소의 참조를 이벤트 로직에 매개변수로 전달합니다.
이 처리 모드에서는 이벤트 처리 로직을 수동으로 다시 작성하고 이를 $(function(){ .... })과 같은 초기화 함수에 넣을 필요가 없습니다. 구성 요소의 "컨테이너"에 두 개의 클래스를 추가합니다: "j a_XXX". 이 프로그램은 이벤트 바인딩 작업을 완료하는 데 도움이 됩니다. 일반적으로 사용되는 확장/축소 효과, 전체/역 선택 효과 등이 멋지지 않나요? 탭 전환 등에 이 방법을 사용할 수 있습니다. 이것이 전설적인 은총알이 될 수 있을까? 아니요, 그렇게 간단하지는 않습니다. 이 접근 방식에는 몇 가지 약점이 있습니다.
초기화 매개변수를 구성 요소에 전달할 수 없습니다.
구성요소의 포함 관계를 반영할 수 없으며, 프로그램을 더 쉽게 작성하고 이해하기 위해 상속, 다형성과 같은 객체지향 기능을 사용할 수도 없습니다.
특정 관계가 있는 일부 구성 요소를 처리하는 것은 약간 번거롭고 합리적인 이벤트 알림 메커니즘이 없습니다.
첫 번째를 살펴보겠습니다. 매개변수 전달과 관련하여 여러 항목 목록에 대한 많은 시나리오에서 일반적으로 각 항목에 해당하는 요소에 고유 ID를 할당합니다. 유일한 차이점은 메시지 목록이나 제품 목록과 같은 서버 측의 숫자입니다. 아래 코드를 보면 id 속성을 사용하여 항목에 해당하는 서버 측 번호를 JavaScript에 알리고 서버의 일부로 다시 서버 측으로 보낼 수 있습니다. 후속 이벤트 로직 처리의 콜백 함수 매개변수입니다.




코드 복사

코드는 다음과 같습니다. Yottaa.init_sampleajax = function(obj){ $(obj).click(function(){

var component_id = $(this).attr('id').split(' -') [1];

$.get('/server/controller/method', {id: component_id}, function(data){
if(data){
alert('다음에서 보낸 메시지 서버: ' 데이터 );
}
})
서버 메시지 표시
동일한 작업을 수행하지만 서버측 식별자가 다른 버튼


더 복잡한 시나리오에서는 페이지의 인라인 코드를 사용하여 일부 필수 정보를 구성 요소에 전달할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

Yottaa.globalConst = {
사용자 :{
familyName: "Jhone",
givenName: 'bruce'
},
Url:{
siteName: 'yottaa.com',
점수: 98
}
}
Yottaa.comComponentMetaData = {
compoment_id_1:{ ...... },
comComponent_id_2:{ ...... }
}; >
위에서는 가능한 코드 구성 방법을 논의하지만 모든 프로젝트에 적합하지는 않습니다. 우리가 해야 할 일은 현재 상태를 기반으로 상대적으로 저렴한 리팩토링 솔루션을 찾는 것입니다. 다음 사항을 고려합니다.

이벤트 바인딩 코드와 요소의 구성 요소 코드를 분리합니다. 구성 요소 코드에는 jquery 라이브러리, 관련 확장 플러그인, 차트 상자 및 기타 콘텐츠와 같이 직접 작성한 위젯이 포함됩니다.
이벤트 바인딩 및 처리 로직: 다양한 구성요소에 따라 여러 모듈로 구분되며, 각 모듈은 함수에 배치됩니다.
페이지는 이 페이지에서 초기화할 모듈을 지정하고 전역 이벤트 바인더에 의한 통합 처리를 위한 목록을 제공해야 합니다.
코드의 일부를 보여드리겠습니다.

코드 복사 코드는 다음과 같습니다.

function init_loginPanel = function(){
var 컨테이너 = $('login_panel')
$('#login_button').click( function(){
......
})
}
function init_chart = function(){
......
}
/ /전역 정적 초기화 방법
Yottaa.initComponents = function(comComponents){
for(var i = 0;iif(typeof window[comComponents[i]] = = 'Function' ){
window[comComponents[i]]();
}
}
}
// 위의 내용은 'all-in-one' 자산 파일에 있습니다.
var Components = ['init_loginPanel', 'init_chart']
var MetaData = {
loginPanel: {},
chart: {},
.... ..
};
$(function(){
Yottaa.initComponents(comComponents);
})
//여기에 페이지의 인라인 스크립트가 있습니다. 🎜>