2013-01-08 100 views
6

我明顯錯過了一些概念/理解和絕對的JavaScript OO基礎知識!我可以擁有RequireJS模塊的多個實例嗎?

我喜歡使用RequireJS,現在我的web應用程序看起來更像是一個結構化的應用程序,而不是一堆瘋狂的代碼。

我只是努力瞭解如何/如果以下是可能的。

我有充當所謂dataservice_base作爲基礎DataService的模塊,一個模塊如下:

define(['dataservices/dataservice'], function (dataservice) { 

    // Private:  Route URL 
    this.route = '/api/route-not-set/'; 
    var setRoute = function (setRoute) { 
     this.route = setRoute; 
     return; 
    } 

    // Private: Return route with/without id 
    var routeUrl = function (route, id) { 
     console.log('** Setting route to: ' + route); 
     return route + (id || "") 
    } 

    // Private: Returns all entities for given route 
    getAllEntities = function (callbacks) { 
     return dataservice.ajaxRequest('get', routeUrl()) 
     .done(callbacks.success) 
     .fail(callbacks.error) 
    }; 

    getEntitiesById = function (id, callbacks) { 
     return dataservice.ajaxRequest('get', routeUrl(this.route, id)) 
     .done(callbacks.success) 
     .fail(callbacks.error) 
    }; 

    putEntity = function (id, data, callbacks) { 
     return dataservice.ajaxRequest('put', routeUrl(this.route, id), data) 
     .done(callbacks.success) 
     .fail(callbacks.error) 
    }; 

    postEntity = function (data, callbacks) { 
     return dataservice.ajaxRequest('post', routeUrl(this.route), data) 
     .done(callbacks.success) 
     .fail(callbacks.error) 
    }; 

    deleteEntity = function (id, data, callbacks) { 
     return dataservice.ajaxRequest('delete', routeUrl(this.route, id), data) 
     .done(callbacks.success) 
     .fail(callbacks.error) 
    }; 

    // Public:  Return public interface 
    return { 
     setRoute: setRoute, 
     getAllEntities: getAllEntities, 
     getEntitiesById: getEntitiesById, 
     putEntity: putEntity, 
     postEntity: postEntity, 
     deleteEntity: deleteEntity 
    }; 

}); 

正如你所看到的,我引用DataService的/ DataService的,這實際上是核心AJAX調用機制(沒有顯示,但真的只是基本的jQuery ajax調用包裝)。

我所試圖做的是讓此基礎DataService的模塊是「實例化」如下(在另一個模塊 - 唯一的代碼片段):

define(['dataservices/dataservice_base', 'dataservices/dataservice_base', 'dataservices/dataservice_base'], function (dataservice_profile, dataservice_qualifications, dataservice_subjects) { 

    // Set the service route(s) 
    dataservice_profile.setRoute('/api/profile/'); 
    dataservice_qualifications.setRoute('/api/qualification/'); 
    dataservice_subjects.setRoute('/api/subject/'); 

正如你所看到的,我想包括(以上定義)相同dataservice_base 3倍,但在功能的引用,我想通過一個名爲瓦爾指每個實例,即:

dataservice_profile,dataservice_qualifications,dataservice_subjects

..當然,我試圖能夠設置一個獨特的setRoute價值爲每個這些實例進一步在模塊中使用..同時利用普通的電話(get,puts,posts等)。

顯然我錯過了這裏的一些東西..但任何幫助指出我回到路上將非常感激地收到!

親切的問候, 大衛。

回答

6

我認爲你只需要包含你的依賴關係一次,並使用new關鍵字。可能你需要重構,以便通用函數在一個相關模塊中:

define(['dataservices/dataservice'], function (dataservice) { 
    var dataservice_profile = new dataservice(); 
    var dataservice_qualifications = new dataservice(); 
    var dataservice_subjects = new dataservice(); 

    // Set the service route(s) 
    dataservice_profile.setRoute('/api/profile/'); 
    dataservice_qualifications.setRoute('/api/qualification/'); 
    dataservice_subjects.setRoute('/api/subject/'); 

    // define needs to return something 
    return { 
     profile: dataservice_profile, 
     qualifications: dataservice_qualifications, 
     subjects: dataservice_subjects 
    }; 
}); 
3

是的,腦凍結或任何..有時獨自工作的問題!

所以,正如@asgoth提到的那樣,我非常清楚自己的想法並思考一些事情!

我結束了再分解dataservice_base模塊如下:

define(['dataservices/dataservice'], function (dataservice) { 

    // Set any class/static vars 

    // Set the instance function 
    function dataservice_base(setRoute) { 

     var self = this; 

     self.route = setRoute; 
     console.log('setting route: ' + self.route); 

     function routeUrl(route, id) { 
      console.log('** Setting route to: ' + route); 
      return route + (id || "") 
     } 

     self.getAllEntities = function (callbacks) { 
      return dataservice.ajaxRequest('get', routeUrl()) 
      .done(callbacks.success) 
      .fail(callbacks.error) 
     } 

     self.getEntitiesById = function (id, callbacks) { 
      return dataservice.ajaxRequest('get', routeUrl(self.route, id)) 
      .done(callbacks.success) 
      .fail(callbacks.error) 
     } 

     self.putEntity = function (id, data, callbacks) { 
      return dataservice.ajaxRequest('put', routeUrl(self.route, id), data) 
      .done(callbacks.success) 
      .fail(callbacks.error) 
     } 

     self.postEntity = function (data, callbacks) { 
      return dataservice.ajaxRequest('post', routeUrl(self.route), data) 
      .done(callbacks.success) 
      .fail(callbacks.error) 
     } 

     self.deleteEntity = function (id, data, callbacks) { 
      return dataservice.ajaxRequest('delete', routeUrl(self.route, id), data) 
      .done(callbacks.success) 
      .fail(callbacks.error) 
     } 

    } // eof instance 

    return dataservice_base; 
} 

,當然再次爲@asgoth提到的,我只需要當然包括一個參考dataservice_base模塊和實例它我的需求如下:

define(['dataservices/dataservice_base','viewmodels/viewmodel_profile', 'viewmodels/viewmodel_qualifications', 'viewmodels/viewmodel_subjects', 'app/common'], function (dataservice_base, viewmodel_profile, viewmodel_qualifications, viewmodel_subjects, common) { 

    var dataservice_profile = new dataservice_base('/api/profile/'); 
    var dataservice_qualifications = new dataservice_base('/api/qualification/'); 
    var dataservice_subjects = new dataservice_base('/api/subject/'); 

    // do whatever now with those instance objects... 
} 

因此,現在所有的工作!

我想我唯一需要做的其他事情是查找清理過程以確保這些對象被釋放..但是隻會有一些..但仍然..

再次感謝@asgoth

+2

我一直在爲這個概念而努力。這個答案很清楚! ......我想這裏的關鍵是理解RequireJS總是返回一個模塊的同一個實例,不管你「需要」多少次。但是,如果您的模塊返回構造函數而不是靜態對象,則可以使用客戶端模塊中的new關鍵字從構造函數創建實例。 RequireJS每次都返回相同的構造函數,但這就是我們想要的,因爲它是一個模板,一個類。客戶端模塊的工作是創建該類的實例。 –

+0

「」「我想這裏的關鍵是要了解RequireJS總是返回一個模塊的同一個實例,無論你」需要「多少次。」「」「 差不多。它確實緩存了第一個需要的實例,但只有在相同的確切路徑上具有相同的確切模塊。 這意味着如果你在2個不同的路徑(對於你的應用的不同部分)有相同的lib「xxx」,如:app/modules/foo/xxx和app/modules/bar/xxx,不同的實例。這可能發生,例如如果每個模塊都有不同的package.json,並且它們要求相同的庫。 – Hejazzman

1

只返回一個函數,而不是一個物體的像這樣

return function(){ 
    return { 
     // your public interface goes here 
    }; 
} 

現在你可以創建你的插件的新實例與new componentName()

相關問題