2

外部ファイルと名前空間でJavaScriptを使用するベスト プラクティスについていくつか質問があります。

名前空間 MyCompany、グローバル構成要素、個々のページのコード、およびおそらくいくつかの「API」を用意しましょう。

var MyCompany = {};

HTML のグローバル構成 MyCompany.root = "/";

どのアプローチが優れているか

  • 初め

    MyCompany.Page = {};

(function(ns} { 
     ns.init = function() { 
         var root = MyCompany.root;
         ajax(root+"somepage.html"); 
     }; 
}(MyCompany.Page.Home = MyCompany.Page.Home || {});

    そしてhtmlの使用中

    <script>

$( function() {
     MyCompany.Page.Home.init();
});

</script>

  • 2 番目 (クラスとしてのページとそのインスタンス)

    MyCompany.Page.Home = function() {
     var root = MyCompany.root;
     this.init = function() {
          ajax(root + "somepage.html");
     };
};

    htmlで

    <script>
var page = new MyCompany.Page.Home();

$( function() {
     page.init();
});
</script>

サブモジュールと Mixing API with Page javascript

ホームページにいくつかのレビューがある場合。

 MyCompany.Page.Home.Reviews = function() {
       this.init = function() {
            load_stuff();
       }
 };

そして今、ページの初期化の使用の中で

 MyCompany.Home.Page = function(data) {
     var reviews = new MyCompany.Home.Page.Reviews();

     this.init = function() {
            reviews.init();
     };
 };

それはトラブルを引き起こす可能性がありますか？

Reviews が MyCompany.Home.Page を拡張していることは明らかですが、MyCompany.Home.Page には Reviews が必要です。

MyCompany.Home.Page.Reviews がロードされた後に MyCompany.Home.Page のインスタンスが作成されても、問題は発生しませんよね? レビューは実際には関数オブジェクトを拡張するので、そうですか?

これは最初の質問への回答に依存すると思います。

それもあり得る

(function(ns) {
     ns.init = function() { MyCompany.Page.Home.Reviews.init(); };
})(MyCompany.Page.Home = MyCompany.Page.Home || {} );

(function(ns) {
     ns.init = function() { load_stuff(); };
})(MyCompany.Page.Home.Reviews = MyCompany.Page.Home.Reviews || {});

また、どうにかして Page javascript の API を分離する必要がありますか?

そのような

 MyCompany.APIS.Maps = function(location) {
          /* Private variables */
          var _location = location; 

          /* Private functions */
          function search_address(address) { .. do search .. }

          /* Public interface */
          this.search = search_address; 

          do some initialization ...
 };

全部読んでコメントしてくれる人がいたら嬉しいです。

前もって感謝します。

4

1 に答える 1

0

どちらのアプローチが優れていますか? シングルトン モジュール (1 つ目) またはコンストラクター関数/クラスとそのインスタンス (2 つ目) を明らかにしますか?

ユースケースによって異なります。一度に複数のオブジェクトが存在することを期待していない場合page(そしてほとんどないように思われる場合) は、シングルトン (init関数を使用) で十分です。それ以外はすべて、間違っているか、少なくともやり過ぎと見なされる可能性があります。

MyCompany.Page.Home.Reviewsあなたの（または？）クラスモジュールにも同じことが当てはまり、MyCompany.Home.Page.Reviewsそのインスタンスは1つだけ必要なようです。

MyCompany.Home.Page.Reviews がロードされた後に MyCompany.Home.Page のインスタンスが作成されても、問題は発生しませんよね? レビューは実際には関数オブジェクトを拡張するので、そうですか?

はい。

(function(ns) {
    ns.init = function() { MyCompany.Page.Home.Reviews.init(); };
})(MyCompany.Page.Home = MyCompany.Page.Home || {} );

そのnsショートカットが利用できる場合は、それを使用する必要があります。

(function(ns) {
    ns.init = function() { ns.Reviews.init(); };
})(MyCompany.Page.Home = MyCompany.Page.Home || {} );

また、どうにかして Page javascript の API を分離する必要がありますか?

開発の場合: はい、どのような場合でも可能です。各モジュールには独自のファイルが必要です。展開するときは、読み込みを高速化するためにそれらを連結することもできますが、それは別の問題です。

于 2013-04-14T23:48:00.790 に答える