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 ファイルをロードする必要がある場合は、次のようにします

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

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

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

$。 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:

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

レポ：チームメイトを復活させる方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

4週間前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

4週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7366

15

Java チュートリアル

1628

14

CakePHP チュートリアル

1354

52

Laravel チュートリアル

1266

25

PHP チュートリアル

1214

29

もっと見る

Related knowledge

Python は、ヘッドレス ブラウザ コレクション アプリケーション向けに動的ページ読み込みと非同期リクエスト処理機能分析を実装します Aug 08, 2023 am 10:16 AM

Python は、ヘッドレス ブラウザ収集アプリケーションの動的読み込みおよび非同期リクエスト処理機能を実装しています。Web クローラーでは、動的読み込みまたは非同期リクエストを使用するページ コンテンツを収集する必要がある場合があります。従来のクローラー ツールには、このようなページの処理に一定の制限があり、ページ上の JavaScript によって生成されたコンテンツを正確に取得できません。ヘッドレス ブラウザを使用すると、この問題を解決できます。この記事では、Python を使用してヘッドレス ブラウザを実装し、動的読み込みと非同期リクエストを使用してページ コンテンツを収集する方法を紹介します。

Vue でコンポーネントの動的な読み込みと切り替えを処理する方法 Oct 15, 2023 pm 04:34 PM

Vue でのコンポーネントの動的な読み込みと切り替えの処理 Vue は、コンポーネントの動的な読み込みと切り替えを処理するためのさまざまな柔軟な関数を提供する人気のある JavaScript フレームワークです。この記事では、Vue でコンポーネントの動的な読み込みと切り替えを処理するいくつかの方法について説明し、具体的なコード例を示します。コンポーネントを動的にロードするとは、実行時に必要に応じてコンポーネントを動的にロードすることを意味します。これにより、関連するコンポーネントが必要な場合にのみ読み込まれるため、アプリケーションのパフォーマンスと読み込み速度が向上します。 Vue は async と awa を提供します

Golang のホット アップデートの原理を明らかにする: 動的ロードとリロードに関する内部説明 Jan 20, 2024 am 10:09 AM

Golang ホット アップデートの原理を探る: 動的ロードとリロードの謎 はじめに: ソフトウェア開発の分野では、プログラマーはアプリケーションを再起動せずにコードを変更および更新できることを望むことがよくあります。このような要件は、開発効率とシステム動作の信頼性の両方にとって非常に重要です。最新のプログラミング言語として、Golang はホット アップデートを実装するための多くの便利なメカニズムを開発者に提供します。この記事では、Golang ホット アップデートの原則、特に動的ロードとリロードの謎を詳しく掘り下げ、特定のコード例と組み合わせます。

Vue と Element-UI を使用してデータを動的にロードするテーブルを作成する方法 Jul 21, 2023 pm 11:49 PM

Vue と Element-UI を使用してデータを動的にロードするテーブルを作成する方法現代の Web 開発では、データ テーブルは一般的なインターフェイス コンポーネントの 1 つです。 Vue.js は現在非常に人気のあるフロントエンド フレームワークであり、Element-UI は Vue.js に基づいて開発されたコンポーネント ライブラリのセットであり、使用できる豊富な UI コンポーネントのセットを提供します。この記事では、Vue と Element-UI を使用してデータを動的にロードできるテーブルを作成する方法と、対応するコード例を紹介します。まず、インストールする必要があります

Vue エラーの解決: Vue Router を正しく使用して、ルーティング パラメータに基づいてコンポーネントを動的にロードできません Aug 20, 2023 am 08:09 AM

Vue エラーの解決: VueRouter を正しく使用してルーティング パラメータに基づいてコンポーネントを動的にロードできません VueRouter を使用してルーティング ジャンプを行うプロセスでは、ルーティング パラメータに基づいてコンポーネントを動的にロードする必要がある場合があります。ただし、場合によっては、VueRouter を正しく使用してルーティング パラメータに基づいてコンポーネントを動的にロードできないという一般的なエラーが発生することがあります。この記事では、このエラーを解決する方法とコード例を示します。まず、明確にする必要があります。VueRouter は次のことを通過できます。

phpSpider の実践的なヒント: Web コンテンツの動的読み込みにどう対処するか? Jul 22, 2023 am 08:33 AM

phpSpider の実践的なヒント: Web コンテンツの動的読み込みにどう対処するか? Web ページのデータをクロールするときに、動的に読み込まれるコンテンツをクローラーから直接取得できないという問題がよく発生します。これらの動的にロードされるコンテンツは、AJAX リクエストを通じて取得されたデータ、JavaScript を通じてレンダリングされた DOM 要素などです。この問題を解決するために、この記事では、phpSpider を使用する際の Web ページの動的読み込みの問題に対処するための実践的なヒントを紹介します。 1. ネットワーク デバッグ ツールを使用して、動的にロードされた URL を検索します

C# でリフレクションを使用し、アセンブリを動的に読み込む方法 Oct 08, 2023 pm 12:12 PM

C# でリフレクションを使用し、アセンブリを動的に読み込む方法 はじめに: C# では、リフレクション (Reflection) は、型情報、メンバー情報などを含むプログラムのメタデータを実行時に取得して操作できるようにする強力なメカニズムです。アセンブリの動的な読み込みは、リフレクションを通じて実装される一般的なアプリケーションであり、一部の特定のシナリオで非常に役立ちます。この記事では、C# でリフレクションを使用してアセンブリを動的に読み込む方法を詳しく紹介し、具体的なコード例を示します。リフレクションの基本概念 リフレクションは C# 言語の重要な機能です

PHP および WebDriver 拡張機能を使用して Web コンテンツを動的にロードする Jul 08, 2023 am 08:47 AM

PHP および WebDriver 拡張機能を使用した Web コンテンツの動的読み込みの概要: Web テクノロジーの継続的な開発に伴い、コンテンツの表示に動的読み込みを使用する Web ページがますます増えています。動的読み込みはユーザー エクスペリエンスを向上させますが、クローラや自動テストに一定の困難をもたらします。この記事では、PHP および WebDriver 拡張機能を使用して Web コンテンツを動的に読み込む方法を紹介します。 1. WebDriver とは何ですか? WebDriver は Web 自動化ツールです。

See all articles