JavaScriptダイナミックローディング実装方法1_JavaScriptスキル

In.js など、JS 動的読み込みフレームワークも多数あります。しかし、これは私が書きたいことではないので、私の考えを述べさせてください。

最初に Java コードが来ます

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

import Biz.User;
User u = new User();
u.show();

このプロセスは、パッケージのインポート、インスタンス化、および呼び出しです。

JS を使用してパッケージをインポートすることはできません。また、コードの意味では、通常はページにスクリプト タグを導入するだけです。
次に、次のように記述する必要があるとします。

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

Using(" User");
var u = new User();

それでは JS で実装できるのでしょうか？

一文ずつ分析してみましょう。もちろん、ページが script タグを使用して user.js を読み込まないことが前提です。そうしないと意味がありません。

最初の文

Using("User");

なぜ using を使うのか もちろん、これは C# を考えて using を使用することもできます。借りたばかりです。

Using に書かれているのは、もちろん私が必要とするオブジェクト、User です。名前のとおり、もちろん、Using("User") と書きました。内部でどのように実装されているかについては話さないようにしましょう。少なくともこれがアイデアです。
Using User を書いてキーワードをシミュレートすることはできないので、少なくともこれはできません。
2 番目と 3 番目の文

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

var u = new User();
u.show();

これは通常のインスタンス化と関数の呼び出しだけです。もちろん、最初の文でパッケージをインポートするときにインポートされます。


まさにそのようなプロセスなので、実現できるかどうかの鍵は最初の一文にあります。つまり、パッケージをうまく誘導できるかどうか、そしてパッケージをどのように誘導するかということです。

スクリプト タグからインスピレーションを引き出し、必要な js ファイルを非同期で読み込みます。
つまり

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

Using( "ユーザー") ;

は、

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

今見てみると、次のようになります。これをする意味はありますか？ scriptタグをJSで書いて動的に導入するだけ？それとも、単に数文字を保存するためですか?

もちろんだめです、それではどうすればいいでしょうか？
効率から始めましょう。
ページで N 個の複数の js ファイルをロードする必要がある場合は、次のようにします

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

なんとかなんとかなんとか。

怖くないですか? かなり怖いです。ページ数が多ければ、いくつかのページを修正する必要があるかもしれません。では、ページにいくつかの主要な js ファイルのみが紹介され、他のすべてのファイルが動的に読み込まれる場合はどうなるでしょうか?
たとえば、jquery ファイルをロードして、

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

$.getScript("user.js",function(){});

このように、

を導入するだけで済みます。

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

以上です。
それでは、この書き方の欠点は何でしょうか?コードの一部を見てください

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

$。 getScript("user.js" ,function(){
$.getScript("order.js",function(){
$.getScript("type.js",function(){
$ .getScript("validate.js ",function(){
// など..
})
});

追記: この状況は、In.js の watch 関数を使用することで回避できます。これはこのブログ投稿の範囲を超えています。

目障りですか？コードを調整してもよろしいですか?書式設定ツールを使用したとしても、対応する $.getScript の右括弧を一致させたいと思いますか?もちろん違います。
すると、Java風のガイドパッケージのフォームが出てきます。

コードをコピーします コードは次のとおりです。 Using("User"); >Using( "Order");

Using("Validate");

コードをコピー

コードは次のとおりです: Using("User" ,"Type","Order","Validate",...); 書き方の問題は関係ありません。もちろん、最初の方法であるクリアを使用することをお勧めします。

パッケージをインポートした後は、すべての使用法でネストする必要がなく、通常どおり使用できます。

コードをコピーします

コードは次のとおりです。 var u = new User(); 🎜>var o = new Order(); // など..

しかし、疑問が生じます。 using("XXX") 中に非同期ロードが実行される場合、

コードをコピー

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

Using("User"); Using("Type"); Using("Validate"); ..

このセクションでは、4つのファイルを非同期でロードする必要があります。非同期とはいえ、少し面倒ですか？そして 4 つのリンクを作成する必要があります。 JS をマージしたい場合は、マージできます。また、使用するときにオブジェクトを使用する必要はありません。これはリソースの無駄ですか?

この問題に関して、私の解決策は、休止状態、遅延読み込み、およびオンデマンド読み込みを学ぶことです。
それではどうすればよいでしょうか?

コードをコピーします


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

Using("User"); > 現時点では明らかに読み込まれていません。読み込まれていない場合はどうすればよいですか?もちろん、シミュレーション オブジェクトであるモックを返します。最初にユーザーに使用させ、ユーザーが本当にこのオブジェクトを使用する必要がある場合にのみ、必要な js をロードします。つまり、

コードをコピー

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

Using("User" ); // この文が実行されると、User オブジェクトが作成されますが、これはその時点では単なるモックです

var u = new User(); // この時点で必要なのは実際の User オブジェクトですこの時点で JS ファイルが動的にロードされ、インスタンス化された User オブジェクトが返されます ご存知のとおり、非同期ロードは現在の実行状態と競合しません。

コードをコピーします


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

var u = new User(); 🎜>

After this sentence is executed, u is a variable with no actual meaning, nothing more. So, how to solve this problem, the only way I can think of for the time being is to use a synchronization strategy. Only when the js is loaded, the subsequent js statements are executed. This is a bit regretful, and the possible browser suspension caused by synchronization is also a serious problem. I will ignore these problems for the time being and hope that there will be a better solution in the future. .

Then the question arises, are there any advantages to synchronizing like this?
I don’t know what the advantages are. At least compared to asynchronous loading, there should be no disadvantages. For example, normal asynchronous loading is

Copy code The code is as follows:

$.getScript("user .js",function(){
var u = new User();
});

By simply executing this statement, to execute the function, you are essentially waiting for the user. js will not be executed until it is loaded, then compare

copy code The code is as follows:

var u = new User();

Theoretically the time should be the same, because they are all executed after user.js is loaded.

At least the second one looks more like Java-style code, so don’t bother with other non-business-related codes.

So, how do you know where the required object is and how to load it? All I can think of is simulating a configuration file. Why use a configuration file instead of using the add function like In.js or the register-like function of other frameworks? Maybe I just want to use the configuration file, which is more like Java, and can be modified later. It will also be more decoupled.

Copy code The code is as follows:

Using.Config = {
"User" : "/js/user" // You can hide .js because the JS file must be loaded
}

The whole idea is roughly like this, and I have made some constraints on it. For example, after adding the namespace

copy the code the code is as follows:

var u = new Using.Modules .User();

This can reduce some global variables, and if necessary, you can insert some commonalities that all objects may have, reducing repeated coding when creating classes.

Of course, not using namespaces is still supported.

In order to solve the effectiveness of this constraint, the Class.create function is added to create class constraints.

Copy code The code is as follows:

Using.Class.create("User",function( ){
}).property({
}).static({
}).namespace(Using.Modules);

The general meaning here is

create (class name, constructor)
property (property of the class)
static (static property of the class)
namespace (namespace)

Extensions to this, why not Add MVC form?
Later I found out that if I want MVC, it requires dynamic maintenance between several classes, or automatic maintenance by the Using class when it is created. I haven’t thought of a good solution yet, so I haven’t joined it. , you can only create the class yourself and maintain it yourself.

Through the above text, you finally get a Using.js
, and then you only need to introduce a

Copy code The code is as follows:

Then you can write

Copy the code The code is as follows:

Using("jquery");
Using("User");

$("#ID").click(function(){
var user = new User ();
user.name = "xx";
user.show();
});