자바 스크립트 코드 아키텍처 질문

Question

나는 꽤 무거운 클라이언트가 끝날 웹 애플 리케이션을 만들려고하고있다. 내 자바 스크립트 코드를 구성하는 방법에 대해 잘 모르겠지만, 여기에 기본적인 아이디어이다 :

// the namespace for the application 
var app = {}; 

// ajax middle layer 
app.products = { 
    add : function(){ 
    // send ajax request 
    // if response is successful 
     // do some ui manipulation 
     app.ui.products.add(json.data); 
    }, 
    remove : function(){}, 
    ... 
}; 
app.categories = { 
    add : function(){}, 
    .... 
}; 

// the ui interface which will be called based on ajax responses 
app.ui = {}; 
app.ui.products = { 
    add : function(product_obj){ 
    $('#products').append("<div id='"+product_obj.id+"'>"+product_obj.title+"</div>"); 
    } 
}; 
app.ui.categories = {}; 

누구나 비슷한 경험을 나에게이 방법의 장점과 단점을 말할 수있어는? 클라이언트 측 자바 스크립트 코드 아키텍처를 설계하는 방법은 무엇입니까? 감사.

[업데이트] : 위에서 본 것처럼이 웹 앱은 제품 CRUD, 카테고리 CRUD를 아약스 방식으로 만 취급합니다. 나는 여기서 단편을 보여줄뿐입니다. 그래서 여러분은 제가 성취하고자하는 것과 내 질문에 대해 알고 있습니다. 다시 말하지만,이 앱의 코드를 구성하는 방법에 대한 의견을 묻고 있습니다.

Answer 1

JavaScript 프로젝트와 비슷한 방식입니다. 여기에 내가 사용한 몇 가지 트릭이 있습니다 :

• 각 싱글 톤 객체에 대해 하나의 파일을 만듭니다. 코드에서 ajax, middle layer 및 ui 인터페이스를 별도의 파일에 저장하십시오.
• 일반적으로 프로젝트에서 3 개의 레이어에 대한 글로벌 싱글 톤 객체를 만듭니다. GUI, 백엔드 및 응용
• 백엔드 객체 외부의 아무 곳에서나 순수한 아약스를 사용하지 마십시오. 백엔드 오브젝트의 서버 측 페이지에 URL을 저장하고 해당 URL을 사용하여 서버에 접속하는 함수 하나를 작성하십시오.
• 오류 및 예외를 클라이언트에보고 할 수있는 서버에 JSON 클래스가 있습니다. Backend 객체에서 반환 된 JSON 객체에 오류가 있는지 확인하고 GUI 클래스의 serverError 함수를 호출하여 사용자 (또는 개발자)에게 오류를 표시합니다. 여기

는 백엔드 객체의 예이다 :

var Backend = {}; 
Backend.url = "/ajax/myApp.php"; 
Backend.postJSON = function(data, callback){ 
    var json = JSON.stringify(data); 
    $.ajax({ 
    type: "POST", 
    url: Backend.url, 
    data: "json="+json, 
    dataType: "json", 
    success: function(response){ 
     if(response){ 
     if(response.task){ 
      return callback(response); 
     }else if(response.error){ 
      return Backend.error(response); 
     } 
     } 
     return Backend.error(response); 
    }, 
    error: function(response){ 
     Backend.error({error:"network error", message:response.responseText}); 
    }, 
    }); 
}; 
Backend.error = function(error){ 
    if(error.message){ 
    Client.showError(error.message, error.file, error.line, error.trace); 
    } 
}; 

이 백엔드 객체의 AJAX 객체 somewher를 저장함으로써 개선 될 수 있지만, 그럴 필요는 않다.

Answer 2

평범하지 않은 무언가를 만들 때, 장기간에 걸쳐 유지 보수가 가능하도록 캡슐화가 중요합니다. 예를 들어, JS UI는 단순한 JS 메소드가 아닙니다. UI 구성 요소는 CSS, 템플릿, 논리, 현지화, 자산 (이미지 등)으로 구성됩니다.

제품 모듈과 동일하므로 자체 설정, 이벤트 버스, 라우팅이 필요할 수 있습니다. 선택한 라이브러리 세트를 통합 할 때 기본 아키텍처 코드를 수행하는 것이 중요합니다. 대규모 JS 개발을 시작했을 때 이것은 나에게 큰 도전이었습니다. 내가 얻은 경험을 누군가가 사용할 수 있도록 http://boilerplatejs.org의 참조 아키텍처에 대한 모범 사례를 모았습니다.

Answer 3

클라이언트 측 아약스 처리의 경우 모든 URL을 포함하는 URL 객체가 있고 아약스를 처리하는 아약스 객체가 있습니다. 이것은 중심 접근법이 아닙니다. 제 경우에는 다른 작업을 처리하는 다른 URL이 있습니다. 또한 Ajax 객체로 실행될 콜백 함수도 전달합니다.

var controller_wrapper = { 
    controller: { 
    domain: "MYDOMAIN.com", 
    assets: "/assets", 
    prefix: "", 
    api: { 
     domainer: "http://domai.nr/api/json/info", 
     tk_check: "https://api.domainshare.tk/availability_check" 
    }, 
    "perpage": "/listings/ajax", 
    "save_image": "/members/saveImage", 
    "update": "/members/update", 
    "check_domain": "/registrar/domaincheck", 
    "add_domain": "/registrar/domainadd", 
    "delete_listing": "/members/deactivateProfile", 
    "save_listing": "/members/saveProfile", 
    "get_images": "/images/get", 
    "delete_image": "/images/delete", 
    "load_listing": "/members/getProfile", 
    "load_listings": "/members/getListings", 
    "loggedin": "/members/loggedin", 
    "login": "/members/login", 
    "add_listing": "/members/add", 
    "remove": "/members/remove", 
    "get": "/members/get", 
    "add_comment": "/members/addComment", 
    "load_status": "/api/loadStatus" 
} 
} 

    var common = { 
    pager: 1, 
    page: 0, 
    data: { 
    saved: {}, 
    save: function (k, v) { 
     this.saved[k] = v; 
    } 
}, 
ajax: { 
    callback: '', 
    type: 'POST', 
    url: '', 
    dataType: '', 
    data: {}, 
    add: function (k, val) { 
     this.data[k] = val; 
    }, 
    clear: function() { 
     this.data = {}; 
    }, 
    send: function() { 
     var ret; 
     $.ajax({ 
      type: this.type, 
      url: this.url, 
      data: this.data, 
      dataType: this.dataType !== '' ? this.dataType : "json", 
      success: function (msg) { 
       if (common.ajax.callback !== '') { 
        ret = msg; 
        common.ajax.callback(ret); 
       } else { 
        ret = msg; 
        return ret; 
       } 
       return; 
      }, 
      error: function (response) { 
       console.log(response); 
       alert("Error"); 
      } 
     }) 
    } 
} 
    var callback = function (results) { 
    console.log(results 
    } 
    common.ajax.callback = callback; 
    common.ajax.type = "jsonp"; 
    common.ajax.type = "POST"; 
    common.ajax.url = controller_wrapper.controller.perpage; 
    common.ajax.add("offset", common.page); 
    common.ajax.add("type", $("select[name='query[type]']").val()); 
    common.ajax.add("max", $("select[name='query[max]']").val()); 
    common.ajax.add("min", $("select[name='query[min]']").val()); 
    common.ajax.add("bedrooms", $("select[name='query[bedrooms]']").val()); 
    common.ajax.add("sort", $("select[name='query[sort]']").val()); 
    common.ajax.send();