2011-06-22 9 views
15

jQueryといくつかのプラグイン、またはMooTools、またはもっと難解なライブラリが必要な、外部の.jsファイルに一連のコードを作成しています。明らかに、実際の「インクルード」は、各スクリプトにロードするときにHEADセクションのホストHTMLページで行われます。javascriptライブラリの依存関係を文書化するためのベストプラクティス

しかし、移植性のベストプラクティスとして、JavaScriptの.jsファイルにはどのような組み込み機能や広く採用されている規則が存在し、コードを使用する次のschmoeが他の必要なライブラリも含むことを忘れないようにします。

私は開発者コミュニティからいくつかのコンセンサスを探していますので、最も一般的に思われる、またはあなたが最もよく知っている答えに投票してください。

+1

依存関係を明示的にチェックして、条件が満たされていないと例外をスローすることはできませんか? – Pointy

+0

確かに、そしておそらくそうすべきです。しかし、私はまた、Perlでの "使用"、ActionScriptでの "インポート"、PHPでの "インクルード"または "必須"のような、より目立つものを求めています。これまでに公表されていないJavaScript指令を発見する予定はありませんが、多くの開発者が同意できる文書のベストプラクティスは少なくともあります。 –

+0

ああ。まあ、はい、JavaScriptの "モジュール"ソリューションの欠如は、多くの、多くの人が嘆くものです。 「ハーモニー」と呼ばれるES5を超えた将来の仕様では、この問題に対する解決策がいくつか導入される可能性があります。 – Pointy

答えて

7

jQueryのUIは、ファイルヘッダに自分のウィジェットの依存関係を追加します。今、残念ながらJavaScriptの依存関係の管理者は、彼らが必要以上の方法以下で使用されている

/* 
* jQuery UI Effects Bounce @VERSION 
* 
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) 
* Dual licensed under the MIT or GPL Version 2 licenses. 
* http://jquery.org/license 
* 
* http://docs.jquery.com/UI/Effects/Bounce 
* 
* Depends: 
* jquery.effects.core.js 
*/ 

が、あなたはあなたのライブラリを作ることができれば、ユーザーは1あなたがwouldnに切り替え「Tは、すべてのことを心配する必要があります。

特定のプラグインがあるか、例えば(利用できない場合は、動的に反応することができるので、明示的に、あまりにも、良い考えかもしれませんチェックjQueryのUIダイアログが見つからないか、または単に正常に低下し、シンプルなモーダルウィンドウが表示されていない場合)例外をスローし、次のいずれか

if(!$.isFunction($.fn.dialog)) { 
    throw "Could not find jQueryUI dialog. Please include jQuery UI"; 
} 

スクリプトは、オプションの依存性がない場合は、完全に壊れていなくてもその方法会ったそこのVisual Studio開発者にとって

+0

私は、jQueryのような一般的なフレームワークで使用されているのと同じドキュメント・プラクティスを採用する考えが好きです。依存マネージャーの場合は –

+0

+1です。私はそれらを使用したことはありませんが、コンセプトは素晴らしいです。 – Bosworth99

+0

特に大きなアプリケーションでは!私はStealJSを使用しており、devモードのすべてをロードするのは約200リクエストです。圧縮されてバンドルされて2つの要求になり、約70%小さく、信じられないほど高速です。 @Tom Augerドキュメントへの依存関係の記述は助けますが、依存関係を強制することはありません。 – Daff

3

私のJSヘッダは次のようになります。

//////////////////////////////////////////////////////////////////////////////// 
// 
// src:  www.someDomain.com/js/modules/etc 
// author:  someguy 
// date:  6-22-11 
// intent:  what is the purpose/use of this module 
// package: prototype parent 
// requires: jquery.1.4.js 
//    fancybox 
//    etc 
// 
//////////////////////////////////////////////////////////////////////////////// 

どれ依存関係はその後、私のチームの誰にも非常に明確であり、これはかなり信頼性が実証されています。 (うまくいけば)二次対策として、私は常に実行時にこれらの依存関係をテストし、スクリプトが含まれていなければ警告を投げます。

+0

かなりきれいに見えます! ASCIIアートをやろうと考えたことはありますか? :) –

6

これはあなたの依存関係を解決しませんが、あなたのヘッダ

/// <reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6-vsdoc.js" /> 
/// <reference path="thirdparty/ba-debug.js" /> 
/// <reference path="thirdparty/underscore.js" /> 

にこれらのようなブロックを試してみたいことがあり、それはそれらを文書化し、それがビジュアルでインテリセンスあなたを与えますメーカー...

(...申し訳ありませんが、に直接リンクしていない ID)、その後 参照ディレクティブを探し、http://msdn.microsoft.com/en-us/library/bb385682.aspxを参照してください。
+0

接線のコメント:これは私の最近お気に入りの外部vsdocファイルです: '/// <リファレンスパス=" https://raw.github.com/appendto/amplify/1.0.0/vsdoc/amplify-vsdoc.js " /> ' –

0

ソフトウェアエンジニアは常に、自分が何をしているのかを知っておくか、少なくとも思い出してください。彼らは、依存関係のリストを単独で保持し、なぜそれらが必要なのかを非常に明確にすべきです。とにかくページに含めるjsファイルはあまりありません。

ブラウザにjQueryとプラグインがあるといいと思うので、トラフィックを節約するためにページに含める必要はありません。

+0

あなたが正しくあなたを理解していれば、あなたのアプローチは「標準がなく、自分自身のために、コードを読んでそれを理解する」というアプローチですか? –

+0

しかし、あなたが理解する方法ほど悪くない。 50個以上のjsファイルを含める必要がある場合は、そのファイルを管理する方法を見つけ出す必要があります。しかし、わずか2 - 5の場合、私たちは自分自身でそれらを覚えている方が良いので、私たちは何をしているのか正確に知っています。しかし、いくつかのページに50以上のjsファイルが含まれている場合、ユーザーとして私のブラウザでjavascriptを無効にしようとします。 –

+0

私のプロジェクトでは、偶然にも正確に50のJSファイルがあります。デバッグ中。リリース時に、それらは少数のファイルに結合されます。依存関係の管理はまだ難しい作業です。 –