나는 모든 프런트 엔드 엔지니어가 자신이 좋아하는 JavaScript 프레임워크를 감정이든 믿음이든 가지고 있다고 믿습니다. JavaScript 프레임워크는 편리한 개발뿐만 아니라 jquery의 우아한 단순성이든 Yui의 마법이든 순수한 논리적 아름다움을 제공합니다. 샌드박스는 모두 우리에게 끝없는 상상력을 선사합니다. 그러나 js 프레임워크는 전반적으로 완벽함을 달성할 수 없습니다. 예를 들어 OO에 대한 jquery 의 양보와 성능에 대한 yui의 희생은 모두 일종의 불완전한 아름다움과 이상적인 현실감을 사람들에게 전달합니다. 오늘은 yui3의 프레임워크 설계에 있어 이러한 희생과 양보를 살펴보고 yui3의 전체 그림을 더 깊이 이해하고 장점을 극대화할 수 있도록 하겠습니다.
1. 종자의 한 단계 또는 과립화
소위 1단계 시딩은 페이지에 프로토타입 및 jquery와 같은 시드 파일의 스크립트 태그만 도입하고, 프로토타입.js 또는 jquery.js만 도입하면 된다는 의미입니다. 이벤트 등을 파일에 저장하고 가능한 한 작게 유지하도록 노력하세요. 프레임워크를 사용하는 것은 매우 간단합니다. 그러나 Yui는 이러한 기능을 "핵심", "도구" 및 "구성 요소"를 개념적으로 추상화하여 레벨과 세분화된 디자인으로 나누었습니다. 필요한 경우 각 작은 기능을 파일에 배치해야 합니다. yui 문서에 있는 데모 중 이 방법은 분명히 jquery만큼 초보자에게 친숙하지 않으며, 작은 기능을 구현하려면 3~4개의 js를 도입하는 것도 필요합니다. 파일. yui가 이렇게 하는 데는 두 가지 이유가 있습니다. 첫째, yui는 너무 크고 모든 기능을 하나의 파일에 넣는 것이 약간 신뢰할 수 없습니다. 둘째, 동적으로 로드되는 프레임워크 디자인을 위한 기반을 마련합니다.
2. 수동 도입 또는 동적 로딩
페이지에 js를 작성하는 전통적인 방법은 페이지에 js 파일을 스크립트 태그 경로로 직접 작성하는 것입니다. yui를 사용하여 이 방법으로 페이지를 소개할 수도 있지만 yui에서는 동적 로딩을 위해 로더를 사용할 것을 권장합니다. 동적으로 로드되는 스크립트의 출처는 현재 매우 복잡합니다. 첫째, 페이지에 손으로 쓴 js 태그가 어쨌든 http 요청을 차지하므로 a를 시작할 필요가 없습니다. 동적으로 로드된 파일이 캐시된 후의 실제 http 요청입니다. 두 번째로 동적 로드는 온디맨드 로드를 실현할 수 있으며 js 파일을 기반으로 할 수 있습니다. 중복 제거 및 상호 종속성 정렬, 손으로 쓴 태그로 js 파일 로드를 위해서는 개발자가 파일 정렬, 복제 등에 특별한 주의를 기울여야 합니다. 셋째, 동적 로딩은 페이지 코드의 의미에 도움이 되므로 개발자는 "무엇을 해야 하는가"에만 관심을 갖게 됩니다. "어떻게 얻느냐"보다는 "필요하다"가 필요합니다. 프로젝트가 점점 더 커지고 유지 관리 비용이 점점 더 높아지면 이러한 중소 규모 기술이 큰 이점을 얻게 될 것입니다.
3. 논리적 시작을 위한 단일 입구 또는 샌드박스
페이지에서 js 로직을 시작할 때 일반적으로 onDomReady와 같은 메소드에 넣습니다. 페이지에 여러 로직이 있으면 어떻게 될까요? 예를 들어 A는 로직 A를 구현하고 페이지 코드는 다음과 같습니다.
<script src="logicA.js" />
<스크립트>
$.onDomReady(함수(){
____LogicA.start();
});
</script>
이 코드는 일반적으로 페이지 끝에 작성됩니다. 이 때, b는 페이지에 로직 B를 추가해야 합니다. end를 클릭한 다음 다음과 같이 변경합니다.
<script src="logicA.js" />
<script src="logicB.js" />
<스크립트>
$.onDomReady(함수(){
____LogicA.start();
____LogicB.start();
});
</script>
마찬가지로 B 로직에 수반되는 html 코드도 페이지 어딘가에 묻혀있는 것 같습니다. js 로직과 그에 수반되는 html 코드가 너무 분리되어 있어서 함수 삭제 시 html은 삭제되지만 js는 잊어버리는 경우가 많은 것 같습니다. . 또는 js를 삭제하고 html을 삭제하는 것을 잊어버리는 것도 코드를 재사용할 때 문제가 됩니다. 마찬가지로 디버깅할 때 엔지니어는 두 개의 코드 조각이 동일한 파일에 있더라도 js와 html에 각각 집중하기 위해 두 개의 창을 열어야 합니다. 이런 경우에는 다음과 같이 코드를 작성하는 것이 좋습니다.
이 코딩 방법은 바로 Yui가 주장하는 소위 샌드박스입니다. 각 로직은 샌드박스에 포함되어 있으며 서로 간섭하지 않고 자체 작업을 수행합니다. 제3자가 코드를 탐색할 때 이것이 일반적인 HTML 구조 및 시작 논리 js를 포함하는 독립적인 기능 블록이라는 것을 즉시 이해합니다. 재사용하려면 전체 블록을 복사하면 됩니다.
<!–논리적인 HTML 코드 세그먼트–>
<script src="logicA.js" />
<스크립트>
$.onDomReady(함수(){
____LogicA.start();
});
</script>
&헬립;
<!–B 논리적 HTML 코드 세그먼트–>
<script src="logicB.js" />
<스크립트>
$.onDomReady(함수(){
____LogicB.start();
});
</script>