프런트엔드 모듈식 탐색(jQuery 편)

Yui는 기업급 js 프레임워크에 맞추어 모듈화에 있어서 비교적 앞장섰다. 그에 비해 jQuery는 비교적 경량급 라이브러리이고 jQuery의 모듈은 jQuery 플러그인 모듈이라고 할 수 있다. 그러나 jQuery의 플러그인 모듈 시스템은 결함이 있다.
1. 이른바 명칭 공간 메커니즘이 없고 중명을 덮어쓰는 위험 문제
2) 플러그인 메커니즘의 방법($.fn)이나 전역 방법($)은 전역의 이름 공간 jQuery에 직접 삽입됩니다. 그 중에서 fn 방법은 jQuery 대상에 완전히 연결되어 있으며 매번 $작업은 하나의 jQuery 대상을 new에 삽입합니다. 방대한 jQuery 대상은 메모리 소모가 심각합니다.
3) 플러그인 모듈은merge나 스크립트를 통해 의존 순서대로 불러와야 한다
 
기업급 협동 전단 개발에는 무명 공간이 매우 위험하다.그래서 jQuery는 업계에서 소규모 사이트의 전단 가설에만 적합하다고 불린다.그런데 사실이 정말 그런가요?jQuery는 기업급 협동개발에도 사용될 수 있습니다!!
 
첫째, 이름 공간이 없는 문제를 해결해야 한다. jQuery는 구조가 없는 라이브러리인데 어떻게 이름 공간을 사용합니까?
비교적 믿을 만한 해결 방안은 jQuery를 유이의 DOM 작업으로만 간주하는plugin을 제공하는 전역 명칭 공간을 제공하는 것이다.
 

('doSomething' in FLOWG.op.widget) ||
(function($, C){

    var doSomething = function(node, activityId, config){
        this._init(node, activityId, config);
    }
	
	//TODO
	
    C.doSomething = doSomething;
	
})(jQuery,FLOWG.op.widget.doSomething);

 
이렇게 하면 자신의 명명 공간을 확보하고 코드 오염 수준을 낮출 수 있으며, 그 중에서 $와 같은 것을 쓸 수 없다.fn,$.extend 등 jQuery 대상에 의존하는 방법과 속성은 이렇게 하면 jQuery 대상이 너무 커서 유지보수하기 어렵다.결함이 뚜렷하다. jQuery 특색의 플러그인 메커니즘이 없고 jQuery를 YUI로 간주할 뿐이다.8의 DOM Query 도구는 jQuery의 강력한 체인 장점을 완전히 발휘하지 못했다.
 
jQuery는 명명 공간의 개념이 없다. 그러면 어떻게 jQuery 자신의 명명 공간을 가질 수 있을까?
이전에도 몇 가지 모의 hack이 있었다.
1), jQuery.fn.op.doSomething은 객체를 추가하는 방식으로
2), jQuery.fn.op_doSomething 밑줄 스타일
두 가지 방식은 전혀 믿을 수 없다는 것이 명백하다.이른바 명명 공간을 만들었지만 위의 문제를 해결하지 못했다. 전역 jQuery 대상은 플러그인이 증가함에 따라 점점 거대해지고 방법의 지루함과 기억하기 어려워진다.분명히 믿을 수가 없어...
 
jQuery의 이름 공간을 어떻게 해킹합니까?
 
두 번째 해결 방안은 $를 사용하는 것이 비교적 좋다.sub 이 방법은 jQuery 대상을 복제합니다. 이것은 jQuery 대상의 모든 방법 속성을 가지고 있습니다.우리는 서로 다른 플러그인을 이 복제체에 연결할 수 있다. 전역 jQuery 대상이 아니기 때문에 어느 정도 jQuery 대상의 크기를 보장한다.
 
 

var event = $.sub();

event.fn.doSomething = function(){  
      //TODO  
}  
  
event.otherDo = function(){  
      //TODO  
} 

이렇게 하면 jQuery 대상을 복제하여 대상의 부피를 확보한다.

event('#node').doSomething(//TODO);

event.otherDO();

위에서 방금 복제한 jQuery 대상Query DOM Node를 사용할 수 있으며 위에서 체인 동작을 할 수 있습니다.
jQuery의 체인 조작은 유지된 셈이다.다음은 모듈 불러오는 문제를 해결하려면 유이3으로 jQuery를 불러올 수 있고 유이3은 다른 라이브러리를 호환할 수 있는 프레임워크입니다.
 

YUI({  
    modules: {  
        'jQuery': {  
            fullpath: 'jquery.js',  
        }  
    }  
}).use('jQuery',function(Y){  
    //TODO  
});  

 
YUI3의 강력한 동적 불러오는 메커니즘을 빌려 우리는 jQuery 프레임워크를 쉽게 불러올 수 있다. 이렇게 하면 위의 복제 대상과 결합하면 비교적 믿을 만한 모듈 불러오는 메커니즘을 만들 수 있다.