도움이 될 수도 있고 아닐 수도있는 간단한 몇 가지를 살펴 보겠습니다. 일부는 명백 할 수도 있고 일부는 극도로 신비한 것일 수도 있습니다.

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 모듈 식 이벤트 바인딩!

답변

function getModified(){
...
}

App.getModified = function() {

}

selected_layer = "."+classes[1];

App.selected_layer = "."+classes[1];

getModified()

App.GetModified()

www/page.html

www/js/jquery.js

<script data-main="js/main" src="js/require.js"></script>

require.config({
 "shim": {
   'jquery': { exports: '$' }
 }
})

require(['jquery', 'app']);

www/js/app.js

require(['jquery'], function($) {

})

$('a').click(function() { App.foo() }

require(['jquery', 'app'], function($, App) {

})

require(['jquery', 'app', 'foo']);

<!-- build:js scripts/app.js -->
<script src="scripts/sidebar.js"></script>
<script src="scripts/canvas.js"></script>
<!-- endbuild -->

useminPrepare: {
  html: 'app/index.html',
  options: {
    dest: 'dist'
  }
},
usemin: {
  html: ['dist/{,*/}*.html'],
  css: ['dist/styles/{,*/}*.css'],
  options: {
    dirs: ['dist']
  }
}

var Sidebar = (function(){
// functions and vars here are private
var init = function(){
  $("#sidebar #sortable").sortable({
            forceHelperSize: true,
            forcePlaceholderSize: true,
            revert: true,
            revert: 150,
            placeholder: "highlight panel",
            axis: "y",
            tolerance: "pointer",
            cancel: ".content"
       }).disableSelection();
  }
  return {
   // here your can put your "public" functions
   init : init
  }
})();

$(document).ready(function(){
   Sidebar.init();
   ...

(function(){//HEADER: menu
    //your code for your header
})();
(function(){//HEADER: location bar
    //your code for your location
})();
(function(){//FOOTER
    //your code for your footer
})();
(function(){//PANEL: interactive links. e.g:
    var crr = null;
    $('::section.panel a').addEvent('click', function(E){
        if ( crr) {
            crr.hide();
        }
        crr = this.show();
    });
})();

(function(){//HEADER: menu_____________________________________
(function(){//HEADER: location bar_____________________________
(function(){//FOOTER___________________________________________
(function(){//PANEL: interactive links. e.g:___________________