도움이 될 수도 있고 아닐 수도있는 간단한 몇 가지를 살펴 보겠습니다. 일부는 명백 할 수도 있고 일부는 극도로 신비한 것일 수도 있습니다.
1 단계 : 코드 구분
코드를 여러 모듈 식 단위로 분리하는 것은 아주 좋은 첫 번째 단계입니다. "함께"작동하는 것을 모아서 작은 상자 안에 넣습니다. 지금은 형식에 대해 걱정하지 말고 인라인으로 유지하십시오. 구조는 나중 지점입니다.
따라서 다음과 같은 페이지가 있다고 가정합니다.
유지 관리의 용이성을 위해 (1000 줄을 검색 할 필요가 없음) 모든 헤더 관련 이벤트 처리기 / 바인더가 거기에 있도록 구획화하는 것이 좋습니다.
그런 다음 Grunt와 같은 도구를 사용하여 JS를 단일 유닛으로 다시 빌드 할 수 있습니다.
1a 단계 : 종속성 관리
RequireJS 또는 CommonJS와 같은 라이브러리를 사용하여 AMD 라는 것을 구현하십시오 . 비동기 모듈로드를 사용하면 코드가 의존하는 것을 명시 적으로 명시 할 수 있으며,이를 통해 라이브러리 호출을 코드로 오프로드 할 수 있습니다. 문자 그대로 "This needs jQuery"라고 말하면 AMD가이를로드하고 jQuery를 사용할 수있을 때 코드를 실행합니다 .
이것은 또한 숨겨진 보석을 가지고 있습니다. 라이브러리 로딩은 DOM이 준비되는 순간에 이루어집니다. 이것은 더 이상 페이지로드를 중단하지 않습니다!
2 단계 : 모듈화
와이어 프레임이 보이 시나요? 두 개의 광고 단위가 있습니다. 공유 이벤트 리스너가있을 가능성이 높습니다.
이 단계에서해야 할 일은 코드의 반복 지점을 식별하고이 모든 것을 모듈로 통합하는 것 입니다. 지금 모듈은 모든 것을 포함합니다. 우리는 진행하면서 물건을 나눌 것입니다.
이 단계의 전체 아이디어는 1 단계에서 모든 복사 파스타를 삭제하여 느슨하게 결합 된 장치로 교체하는 것입니다. 따라서 다음을 갖는 대신 :
ad_unit1.js
$("#au1").click(function() { ... });
ad_unit2.js
$("#au2").click(function() { ... });
난 ~을 가질 것이다:
ad_unit.js:
var AdUnit = function(elem) {
this.element = elem || new jQuery();
}
AdUnit.prototype.bindEvents = function() {
... Events go here
}
page.js:
var AUs = new AdUnit($("#au1,#au2"));
AUs.bindEvents();
이를 통해 반복을 제거하는 것 외에도 이벤트 와 마크 업 을 구분할 수 있습니다. 이것은 꽤 괜찮은 단계이며 나중에 이것을 더 확장 할 것입니다.
3 단계 : 프레임 워크 선택!
모듈화하고 반복을 더 줄이고 싶다면 MVC (Model-View-Controller) 접근 방식을 구현하는 멋진 프레임 워크가 많이 있습니다. 내가 가장 좋아하는 것은 Backbone / Spine이지만 Angular, Yii, ... 목록이 계속됩니다.
모델 데이터를 나타냅니다.
보기 당신의 마크 업을 나타내며 모든 이벤트는 연관
컨트롤러는 비즈니스 로직을 대표하는 - 즉, 컨트롤러가 사용하는 부하에 어떤 전망과 어떤 모델 페이지를 알려줍니다.
이것은 중요한 학습 단계가 될 것이지만 그만한 가치가 있습니다. 스파게티보다 깨끗한 모듈 식 코드를 선호합니다.
당신이 할 수있는 다른 많은 일들이 있습니다. 그것들은 단지 지침과 아이디어 일뿐입니다.
코드 별 변경
다음은 코드에 대한 몇 가지 구체적인 개선 사항입니다.
$('.new_layer').click(function(){
dialog("Create new layer","Enter your layer name","_input", {
'OK' : function(){
var reply = $('.dialog_input').val();
if( reply != null && reply != "" ){
var name = "ln_"+reply.split(' ').join('_');
var parent = "";
if(selected_folder != "" ){
parent = selected_folder+" .content";
}
$R.find(".layer").clone()
.addClass(name).html(reply)
.appendTo("#layer_groups "+parent);
$R.find(".layers_group").clone()
.addClass(name).appendTo('#canvas '+selected_folder);
}
}
});
});
이것은 다음과 같이 더 잘 작성됩니다.
$("body").on("click",".new_layer", function() {
dialog("Create new layer", "Enter your layer name", "_input", {
OK: function() {
// There must be a way to get the input from here using this, if it is a standard library. If you wrote your own, make the value retrievable using something other than a class selector (horrible performance + scoping +multiple instance issues)
// This is where the view comes into play. Instead of cloning, bind the rendering into a JS prototype, and instantiate it. It means that you only have to modify stuff in one place, you don't risk cloning events with it, and you can test your Layer stand-alone
var newLayer = new Layer();
newLayer
.setName(name)
.bindToGroup(parent);
}
});
});
코드 앞부분 :
window.Layer = function() {
this.instance = $("<div>");
// Markup generated here
};
window.Layer.prototype = {
setName: function(newName) {
},
bindToGroup: function(parentNode) {
}
}
갑자기 복사 붙여 넣기없이 코드의 어느 곳에서나 표준 레이어를 만들 수있는 방법이 생겼습니다. 당신은 이것을 5 개의 다른 장소에서하고 있습니다. 방금 5 개의 복사-붙여 넣기를 저장했습니다.
하나 더:
// 작업을위한 규칙 세트 래퍼
var PageElements = function(ruleSet) {
ruleSet = ruleSet || [];
this.rules = [];
for (var i = 0; i < ruleSet.length; i++) {
if (ruleSet[i].target && ruleSet[i].action) {
this.rules.push(ruleSet[i]);
}
}
}
PageElements.prototype.run = function(elem) {
for (var i = 0; i < this.rules.length; i++) {
this.rules[i].action.apply(elem.find(this.rules.target));
}
}
var GlobalRules = new PageElements([
{
"target": ".draggable",
"action": function() { this.draggable({
cancel: "div#scrolling, .content",
containment: "document"
});
}
},
{
"target" :".resizable",
"action": function() {
this.resizable({
handles: "all",
zIndex: 0,
containment: "document"
});
}
}
]);
GlobalRules.run($("body"));
// If you need to add elements later on, you can just call GlobalRules.run(yourNewElement);
이것은 표준이 아닌 이벤트 나 생성 이벤트가있는 경우 규칙을 등록하는 매우 강력한 방법입니다. 이것은 또한 pub / sub 알림 시스템과 결합 될 때 그리고 요소를 생성 할 때마다 발생하는 이벤트에 바인딩 될 때 매우 충격적입니다. Fire'n'forget 모듈 식 이벤트 바인딩!