Package.js 最新の JavaScript プロジェクト make tool_javascript スキル

Package.js プロジェクト アドレス: http://code.google.com/p/package-js/

パッケージ.js は、非常に便利な JavaScript パッケージの依存関係管理および Make ツールです。その設計目標は、ブラウザ側の JavaScript コンポーネント/アプリ開発をよりモジュール化することです。小規模な Web サイトを開発しており、ユーザー エクスペリエンスを向上させるために HTML に数行の JS コードを組み込むだけの場合は、Package.js は適さない可能性があります。中規模から大規模の WebApp を開発している場合、数十、場合によっては数百、数千の JS ファイル、CSS ファイル、および HTML テンプレート ファイルが存在し、これらの JS モジュール間の依存関係の管理と読み込みに問題がある場合は、本番環境で公開してください。 JS ファイルのマージとパッケージ化を行うと、Makefile を作成するときにめまいがしてしまいます。それなら、Package.js が必要です。 Package.js について学び、使用してみませんか。

Package.js は主に 2 つの部分で構成されます

ブラウザで実行され、モジュールの定義とインポートに使用される JS ライブラリ API
すべてを統合するために、node.js 環境で実行されますJS パッケージとその依存 CSS および HTML ファイルをマージするための make ツール

Package.js ブラウザ側 API は CommonJS/AMD 仕様を参照し、この仕様の最も単純な形式と互換性があり、これに基づいていくつかの構文を拡張して、CSS や HTML テンプレートを含む JavaScript UI コンポーネントの開発を容易にします。

Package.js を使用して開発されたプロジェクトのディレクトリ構造を直接見てみましょう。それは単純明快です:

コードをコピー コードは次のとおりです:

テスト
§── dom
│ └── Style.js #名前空間を持つモジュール ファイルTest.dom.Style
§── init.js #Root 名前空間初期化ファイル
§── _nsconf_.js #Package.js は設定ファイルを読み取ります
├── ui
│ ├─ ─ ボタン
│ │ ├─ img
│ │ │ └─ bg.png
│ │ ├─ init.js #Test.ui.Button 名前空間モジュール ファイル
│ │ §─ ─ style .css #UI コンポーネントの CSS ファイル
│ │ └── tpl.html #UI コンポーネントの HTML テンプレート ファイル
│ └── フォーム
│ §── init.js
│ §─ ─ style.css
│ └─ tpl.html
§─ util
│ └─ Cookie.js #JS パッケージ (名前空間あり) Test.util.Cookie
└─ _xproxy_ .html -> ../Package/_xproxy_.html #このファイルは、Package.js ソース コード内の Package/_xproxy_.html を指すソフト リンクであり、ドメイン全体で HTML テンプレート ファイルをロードするために使用されます

Package.js、モジュール定義構文 -
Root/ui/Button/init.js コード:

コードをコピー コードは次のとおりです:

Package.define("Root.ui.Button",["Root.ui.Pane","Root.util.Tpl","Root.util) .Event"],
function (Pane,Tpl,Event) {
//ペインは Root.ui.Pane
//Tpl は Root.util.Tpl に対応します
// など
//. ....
});

CommonJS の AMD 仕様とは異なり、Package.js の構文では、JS モジュールは他のものに依存することはできません。 JS パッケージだけでなく、CSS および HTML テンプレート ファイル、その他の JSON データ ファイルにも依存し、実行時に他の依存ファイルのコンテンツを取得します。定義構文は次のとおりです。

コードをコピー コードは次のとおりです:

パッケージ。 define("NS.ui .Button",["MT.ui.Component"],
{
tpl:"tpl.html",
_style:"style.css"
}, function (コンポーネント) {
//this.assets.tpl
var bgImgUrl=this.path "img/bg.png",tpl=this.assets.tpl を通じて tpl.html コンテンツにアクセスします。 Button(opt) {
//現在の Package オブジェクトの _pkgMeta_ 属性を通じてアセットにアクセスすることもできます
this.tpl=String2Dom(opt.tpl || Button._pkgMeta_.assets.tpl); }
return Button;
})


ブラウザでは、次のメソッドを使用して JS モジュールをインポートできます。

インポート プロセス中に、Package.js が自動的にインポートします。ロジスティック作業: 1 、このモジュールの依存モジュールをロードします。 2. 依存する HTML および CSS ファイルをロードします。

コードをコピー コードは次のとおりです。

Package.imports(["Root.ui .Button" ],function (Button) {

var btn=new Button();
btn.renderTo(document.body);
});


開発中は、モジュール化のために JS を小さなモジュール ファイルに分割する必要がありますが、本番環境に公開する場合は、読み込み速度を向上させるために、これらの JS ファイルを 1 つの JS ファイルにマージし、同様に圧縮する必要があります。 , CSS ファイルはマージする必要があります。

コードをコピー コードは次のとおりです:

//パッケージング構成ファイル
// build-config.json ファイルの内容
{
"staticUrls": {"defaults":"http://statics.iwt.macrotarget.com/jslibs/"},
"nsconfs": [" http://www.cnblogs.com/statics/jslibs/XLib/_nsconf_.js"]、
"includes":["XLib.apps.MainApp","XLib.ui.*"]、
"compress":true //圧縮には UglifyJS と UglifyCSS を使用します
}

Package.js を使用すると、この関数を 3 行または 4 行記述するだけで済みます。 JSON 構成コードを入力してコマンドを実行すれば、すべて OK です。

コードをコピー コードは次のとおりです:

#コマンドを実行
build.js build-config .json js all.min.js
build.js build-config.json css all.min.css
#腰も痛くなくなり、足も痛くなりません！

引用

追記: build.js はちょっとしたこともやってくれます。CSS ファイル内のbackground:url() などの相対パスを絶対 URL に変換します。開発時、CSS の url() は常に相対パスを記述するだけで済みます。本番環境にデプロイすると、build.js によってマージされた CSS が自動的に絶対 URL に変換します。 IE6 Png AlphaImageLoader フィルターと wui4ie6 ローダーを使用する場合でも、開発中に src= に相対パスを記述することができます。また、Package.js は絶対 URL を使用して CSS ルールを自動的に生成します。AlphaImageLoader の src も変換されます。パッケージ化するときに CSS に絶対 URL を記述する必要はありません

他のモジュール ローダーや AMD 実装 (RequireJS、SeaJS...) と比較した Package.js の利点、または欠点は何ですか?

Package.js は、Web アプリ フレームワーク用に開発されています。定義構文とファイル ディレクトリ構造は、AMD 仕様の最も単純な定義構文のみを使用します。
Package.js JS。モジュールの CSS および HTML ファイルへの依存は、定義の記述方法において他の JS モジュールへの依存とは区別され、CSS、HTML、および JSON パッケージ化の処理も build.js
(TOT) に含まれます。特別な注意が含まれますIE6 CSS 用 (いいえ、私たち自身のプロジェクトに必要です)
PackageMeta を追加すると、JS モジュールは実行時に独自の URL を知ることができます
... 欠点があるとすれば: CommonJS AMD 仕様と完全に一致していない 互換性あり
ビルドでは、includes、deps、all の 3 つのエクスポート モードがサポートされています。
開発モードではさらに便利です。クロスドメインの読み込みには _xproxy_.html を使用します。プロキシは必要ありません。 _nsconf_.js を使用すると、パスを構成する必要はありません。

これらの簡単な紹介を聞いたら、Package.js を試してみたくなるかもしれません。使用する前に、
パッケージの詳細を参照してください。 .js ドキュメント:http://package-js.googlecode.com/hg/docs/Package.html。

わかりました! JavaScript アプリの開発に逆方向のメソッドを使用するのをやめ、アウトマンになるのをやめ、できるだけ早く Package.js を使用してください ^O^