1

WinJS の概念のいくつかを使用する JS で記述された Windows 8 アプリケーションがあります。

  • ページ
  • 名前空間

一方、バックボーン モデルとコレクション、jquery、アンダースコア、およびその他の一般的なライブラリを使用します。

「Models」WinJS スタイルの名前空間 (例: WinJS.Namespace.define("Models", {mymodel: //stuff})) で定義されたすべてのバックボーン モデルと、「Collections」名前空間のすべてのコレクション。コレクションとモデルのインスタンスは、"App" 名前空間に格納されます。

すべてのページは WinJS スタイルのページです (例: WinJS.UI.Pages.define("/pages/somepage/somepage.html", {//stuff}))。各ページには、html、css、および js ファイルを含む独自のフォルダーがあります。

そのため、相互に依存する多数の JS ファイルがあり、エントリ ポイントである default.html には<script>、正しい読み込み順序で手動で並べられたタグの巨大なスタックがあり、時間とともに維持するのは非常に困難です。

質問: 最近、require.js について聞いたことがありますが、これで問題が解決するようです。依存関係を考慮してモジュールを正しい順序でロードします。しかし問題は、自分のコードをリファクタリングする方法がわからないこと、WinJS.pages と WinJS.namespaces が require.js のモジュラー スタイルと互換性があるように見えないことです。ここで最善のアプローチは何でしょうか？ベストプラクティスとは?

私の default.html ヘッドの例:

<head>
<meta charset="utf-8" />
<title>CollectionsWinJS</title>

<!-- Javascript libraries -->
<script src="/js/libs/jquery.js"></script>
<script src="/js/libs/underscore.js"></script>
<script src="/js/libs/backbone.js"></script>
<script src="/js/libs/js-yaml.js"></script>

<script src="/js/libs/jquery.ui.position.js"></script>
<script src="/js/libs/moment.js"></script>

<script src="/js/libs/metrobone.js"></script>

<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<!-- CollectionsWinJS references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/conf.js"></script>
<script src="/js/default.js"></script>
<script src="/js/navigator.js"></script>

<script src="/js/data.js"></script>

<!-- Javascript namespaces -->
<script src="/js/clns.js"></script>
<script src="/js/converters.js"></script>

<!-- Sources -->
<script src="/js/Models/User.js"></script>
<script src="/js/Models/ExternalItem.js"></script>
<script src="/js/Collections/ExternalItems.js"></script>
<script src="/js/Models/Service.js"></script>
<script src="/js/Models/ServiceProvider.js"></script>
<script src="/js/Collections/Services.js"></script>
<script src="/js/Collections/ServiceProviders.js"></script>

<script src="/js/main.js"></script>
</head>
4

1 に答える 1

3

例を見てみましょう。

script1.js
(function()
{
    'use strict';
    var A = WinJS.Class.define( 
        function A_ctor() {}, 
        {
            property1: { .. }
            func1: ..
        });

    WinJS.Namespace.define('Models.A', { A: A });
}();
script2.js
(function()
{
    'use strict';
    var B = WinJS.Class.define( 
        function B_ctor() {}, 
        {
            property1: { .. }
            func1: function func1()
            {
                var a = new Models.A();
            }
        });

    WinJS.Namespace.define('Models.B', { B: B });
}();

B.func1上記のシナリオでは、クラスへのランタイム依存関係が存在しますA。ただし、初期化フローであるか、最初に実行されるscript1かは問題ではありません。script2これは、初期化フローがクラスを定義するだけであり、まだ実行されていないためです。

すべてのスクリプトが適切にクラスにモジュール化され、名前空間自体を介して公開されている場合、初期化コード フローはアプリのアクティベーション フローにある必要があり、default.html の最後に配置できる default.js のいくつかのグローバル変数のインスタンス化である可能性があります。

于 2013-04-13T02:54:09.450 に答える