JavaScript 구조, 맞습니까?

Iam이 자바 스크립트 코딩을 개선하려고합니다. 하나의 파일에 1000 줄의 코드가 없습니다.JavaScript 구조, 맞습니까?

RequireJS "boot.js"내부 필요할 때 파일을로드 :

require([ 
    "library/jquery.form/jquery.form", 
    "app/eventManager", 
    "app/myapp" 
], function() { 
    $(function() { 
     MyApp.init(); 
    }); 
});

MyApp.js

var MyApp = { 
init: function() { 
    MyApp.mainController(); 
}, 

// this is our controller, only load stuff needed.. 
mainController: function() { 

    //controller = set from php/zendframework 
    switch (controller) { 
     case 'admin': 
      MyApp.initAdmin(); 
      break; 
     default: 
      break; 
    } 
}, 

// action for admin controller 
initAdmin: function() { 
    //lazy load 
    require(["app/admin/admin"], function(){ 
     MyApp.admin.init(); 
    }); 
}};

MyApp.admin 그러나 스피이 "올바른"방법입니다 확실하지 않은 경우 .js

MyApp.admin = { 
init : function() { 
    if (permisson != 'admin') { 
     console.log('Permission denied.'); 
     return false; 
    } 
    MyApp.admin.dashboard.init(); 
}

}};

MyApp.admin.dashboard = { 

init: function() { 
    MyApp.admin.dashboard.connectEventHandlers(); 
    MyApp.admin.dashboard.connectEvents(); 
    MyApp.admin.dashboard.getUserList('#admin-user-list'); 
}, 

connectEvents: function() { 
    EventManager.subscribe("doClearCache", function() { 
     MyApp.admin.dashboard.doClearCache(url); 
    }); 

    EventManager.subscribe("doDeleteUser", function() { 
     MyApp.admin.dashboard.doDeleteUser(url); 
    }); 

},

다른 "스타일"은 일반적입니까? 또는이 구조 코드에 좋은 길? 그물에 많은 예제가 있지만 "실생활"코드를 찾을 수 없었습니다 ..

그리고 ".prototype"이 필요할 때 가장 큰 "문제"중 하나가 무엇입니까?

출처

2010-12-13 opHASnoNAME

코드에 한 가지 변경 사항은 '이벤트'문자열을 사방에 반복하지 않는 것입니다. 당신은 같은 수행하여이 문제를 줄일 수있다 : 내가 직접 CONSOLE.LOG 호출 피할 것이다

var app = { 

     events : { 

     someEvent : "someEvent" 

     } 

} 

EventManager.subscribe(app.events.someEvent, someFn); 

EventManager.publish(app.events.someEvent);

및 콘솔하지 않을 경우 대체를 제공 this 같은 래퍼를 사용하는 것은

N. 볼 수 있습니다B 앵거스 크롤 그가 JS 구조/네임 스페이스 지정 등

을 언급 괜찮은 blog가 있고 더 복잡한 무언가를 구축하는 경우

출처

2010-12-13 18:58:17 redsquare

JavaScript Patterns은 코드를 구조화하는 다양한 방법에 대한 좋은 참고 자료입니다.

jQuery와 같은 라이브러리의 소스 코드를 연구하는 것도 좋은 생각입니다.

출처

2010-12-13 17:57:09

유용한 링크 : +1 – Sarfraz

좋은 책 덕분에 힌트를 많이 주셔서 주문했습니다 ;-) – opHASnoNAME

JavaScript 우수 사례와 관련된 모든 문제에 대해 Douglass Crockford에게 연기합니다.

그의 홈페이지는 http://javascript.crockford.com/입니다.

다음은 JavaScript로 수행 할 작업과 수행하지 않는 작업에 대한 훌륭한 책입니다. http://www.amazon.com/exec/obidos/ASIN/0596517742/wrrrldwideweb

다음은 최악의 사례를 사용하고 있는지 자동으로 알려주는 놀라운 도구입니다. http://www.jslint.com/

프로토 타입 질문과 관련하여 프로토 타입 상속을 사용하거나 각 인스턴스에 대한 메모리를 소비하지 않고 해당 클래스의 모든 인스턴스에 대해 표시되는 "정적"클래스 함수를 만들 때 프로토 타입을 사용합니다.

출처

2010-12-13 18:03:36

Require.js는 훌륭한 도구이므로 클라이언트 측에서도 사용할 수 있습니다. 그러나 모바일에서 사용할 때는주의하십시오. 이 경우 편집기를 사용하여 한 파일에서 더 잘 탐색하거나 sprocket과 같은 것을 사용해야합니다. "프리 컴파일러"이며 코드에 라이브러리를 추가하지 않습니다.

나는 조각난 코드를 통과했습니다. 아마도 다른 부품을 모듈로 정의해야하고 requirejs documentation for defining modules을 읽으면 좋은 도움이 될 것입니다.

하지만 실제로 코드를 추가 라이브러리로 구성해야하는지 여부는 두 번 생각하십시오.

출처

2010-12-13 18:06:40 fifigyuri

잘 정통한 JS 닌자에서 JsMentors에 걸쳐 공유되는 몇 가지 정말 좋은 지식이 들어있다 예를 들어 여러 제품 모듈과 하위 모듈이있는 경우 모듈에 대한 컨텍스트 계층을 만드는 것이 좋습니다. 또한 특정 UI 구성 요소에 대한 템플리트, CSS, 논리, 자산, 지역화 등을 한 곳에서 가질 수 있도록 UI 구성 요소가 자체 포함되도록하십시오.

enter image description here

당신이 대규모 JS 개발을위한 참조 아키텍처를 참조해야하는 경우

는 http://boilerplatejs.org를 참조하십시오. 나는이 책의 주 저자이며 복잡한 제품 개발에 유용한 많은 패턴을 보여줍니다.

출처

2012-08-20 17:48:29 Hasith

JavaScript 구조, 맞습니까?

답변

관련 문제