多くの人が知っているように、Googleは、単純な関数を呼び出すことで特定のモジュール/ライブラリをロードできるAPIを提供しています。

私は現在、自分のWebサイトに簡単かつ効率的に配布したいコードの独自のライブラリを開発中であり、上記の方法よりも優れた方法は考えられません。

ただし、このためのコードを作成するための最良の方法が何であるかはよくわかりません。明らかに私のライブラリはオブジェクトになるので、次のようなものから始めます（私が間違っている場合は、私を修正すると思います）：

上記の方法は正しい方法ですか？次に、別々のファイルからモジュールをロードするにはどうすればよいですか？

少し背景

フィールドをループし、ドロップダウン、オートコンプリート、テキストなどに応じてフィールドを設定するメソッドをjavascript/jQueryで作成しました...

この理由は、入力とテキストエリアを特別にスタイル設定しており、ページがロードされたら JavaScript で初期化する必要があるためです。このクラスのメソッドは、ページの各フィールドをループし、その内容に基づいてイベントを設定します。

現時点では、フィールドコンテナにクラスを与えることで各フィールドが何であるかを検出しています.jQueryはこのクラスを読み取り、それに応じてフィールドを次のように設定します:

jQuery は次のようになります。

上記のコードのほとんどは無視できますが、私が何をしているのかがわかるはずです...

質問

私は最近、HTML5 属性data-*に気付きました*。私の質問は次のとおりです。

1. クラスの代わりにHTML5data-*属性を使用する必要がありますか?
2. data-*属性またはクラスよりも優れた方法はありますか?
3. data-*属性は HTML5 ですが、正しくDOCTYPE定義されていれば初期のブラウザと互換性がありますか?

少し背景...

SineMaculaフォーム要素を作成し、これらのフォーム要素をページ上で実行させるための多くのメソッドを格納するというオブジェクトがあります。

まず、ページが読み込まれるとsetFields()、ページ上のすべてのフィールドをループして適切に設定するメソッドが呼び出されます。つまり、オートコンプリート、チェックボックスなど...

のコードはsetFields()次のようになります。

上記のコードのほとんどは無視できますが、私が何をしているのかを正確に確認できるように、すべて挿入しました。

私の質問

、...SineMaculaなど、オブジェクトのかなりの数のメソッドがあります。setCheckbox()setDropdown()

私が知りたいのは、これらのメソッド自体をオブジェクトとして扱うべきですか?

したがって、私のコードは次のようになります。

newメソッドを呼び出す前にキーワードに注意してくださいdropdown()。

これは物事を処理するためのより良い方法ですか？使用するメモリなどは少なくなりますか？

説明

constructorまず、jQueryと関数が混同されている可能性がありinitます。その場合は、以下の用語を無視してください。

と呼ばれるオブジェクトがありますSineMacula。これは、現時点では、メソッドのライブラリの名前空間として機能しているだけです。

ただし、SineMaculajQuery拡張機能のように動作させたいオブジェクトのメソッドをいくつか作成しようとしています。

ここで複雑さが発生します。jQueryエイリアスを使用する代わりに、オブジェクトを使用してjQueryコンストラクトを実行し$たいと思います。SineMaculaしたがって、事実上、私のコードは次のようになります。

それ以外の：

ただし、次のポイントがなければ、これはそれほど難しいことではないと思います。

jQuery全体にエイリアスを付けたくはありません。呼び出したときに、jQueryコンストラクターを実行しSineMacula('something')て、の結果にメソッドを適用するだけです。SineMacula('something')

私の質問

この質問をする最良の方法は、説明することです。以下は可能ですか？

ただし、これを実行できるようにはしたくありません（完全にエイリアスjQuery）。

私はこれがおそらく不可能であることを知っていますが、尋ねる価値があると感じました:-)

更新1

明確にするために、これは私が現在SineMaculaオブジェクトに使用しているコードの一部です。

オブジェクトは、次のSineMaculaように各ページの上部で開始されます。

---

更新2-上記を無視

そうです、私が達成したいことを説明するのは非常に難しいと感じています。上記の内容は無視して、以下の手順でこれを達成するために最善を尽くします。

ステップ1

私はというクラスを持っていSineMaculaます、これはあらゆる種類のことをする多くのメソッドを含んでいます。jQueryのようなライブラリと考えてください。

これは次のように定義されます。

ステップ2

クラスは、SineMacula各ページの上部で次のコードで開始されます。

ステップ3

次に、オブジェクトは、たとえばを呼び出しSineMaculaて、オブジェクトに必要なライブラリと拡張機能をロードします。これにより、拡張機能がWebページに動的に読み込まれます。SineMaculasm.load({package:'all'})

ステップ4

拡張機能は次のように定義されます。

ステップ5-これは物事がもう少し複雑になるところです

これまで、オブジェクトはなどSineMaculaのメソッドの名前空間として機能していました。doSomething()

ここで、関数として機能するだけではないメソッドを定義したいと思います。

と呼んでいた場所で、jQueryと同じように動作する場所を呼び出せるようSineMacula.doSomething()にしたいと思います。SineMacula('#test').doSomething()SineMacula('#test')$('#test')

したがって、次のように関数にアクセスできます。

あなたが呼び出すことができるのと同じ方法で：

したがって、引数がSineMaculaオブジェクトに渡されると、jQueryセレクター関数を使用して処理され、呼び出されるメソッドのサブジェクトとして渡されます。

例えば：

要約すると...

SineMacula('selector')供給されている$('selector')かのように動作し'selector'、これは子メソッドに渡されます。ただしSineMacula、jQueryの拡張ではありません。SineMaculaのエイリアスになりたくありません$。

私の現在のコード

PHPを使用してJavaScriptファイルをロード、最小化、および1つのファイルに返すAPIの作成を開始しました。scriptこれは、次のようにHMTLのタグからPHPファイルを指すことによって実現されます。

このjsapi.phpページでは、javascriptファイルを処理し、縮小されたjavascriptをヘッダー付きで出力します。

私の質問

これはjavascriptファイルをロードするための悪い方法ですか？属性内のファイルをポイントするだけで、JavaScriptファイルを個別にロードする方がはるかに高速で信頼性が高いでしょうか？.jssrc

完全なAPIの私のコードを見たい場合は、これを見てください。言及されたリンクはまた、私が何をしているのか、そしてその理由を詳細に説明しています。

問題と私の質問

私は現在、大量の縮小されたjavascriptを返すサイトのページを最適化しようとしています。

最適化とは、スピードアップを意味します:-)

このページを高速化しようとしている方法の1つは、ブラウザーによってサーバーに送信されるヘッダーを減らすことです。24時間前はこれが可能だとは思っていませんでしたが、それ以来、これを実行するページを見つけ、さらに調査する価値があるかどうかを知りたいと思います。

私のページはhttps://libraries.sinemaculammviii.com/にあります

私が比較しているページはhttps://www.google.com/jsapiです

私はhttp://tools.pingdom.comを使用して、これら両方のページの速度をテストしました。明確に示されていることの1つは、Googleページが送信するリクエストヘッダーがないことです。

彼らはこれをどのように行うのですか？私はそれをすべきですか？

このページをスピードアップする方法について他に何か提案はありますか？

私は現在使用しています：

1. ページを圧縮するgzip
2. JavaScriptを縮小するJSPacker
3. キャッシングヘッダーを適用します（まだこれを行っていません）
4. ページは静的ではないため、これはおそらく違いはありませんが、CloudFlareCDNを介してサイトをルーティングしました

ソリューションの証拠

次のリンクのヘッダー（展開された結果に表示）を比較すると、Googleページから送信されたリクエストヘッダーがないことがはっきりとわかります。

マイページ

Googleのページ

更新1

私は最初のステップ、または少なくとも可能な最初のステップを理解したかもしれないと思います。Apacheがヘッダーを削除している可能性はありますか？

更新2

説明

パラメータが渡される関数がありますoptions。このパラメーターは、オブジェクト、配列、または文字列のいずれかです。パラメータが何であるかに応じて、何をすべきかが決まります。

---

options更新:常に同じ構造のオブジェクトになる必要があることを忘れていました (つまり、常にデフォルト値が設定されている必要があります)。

私はデフォルト値を一度だけ定義したいので、あなたの何人かが提案したように手続き型ifステートメントを使用することは私の好ましい解決策ではありませんが、必要に応じてそれに頼ります.

私はこれをしたくありません（可能であれば）：

例

パラメータがオブジェクトの場合は、次のように拡張してデフォルトを設定します。

パラメータが文字列の場合options.bar、 を文字列と等しくなるように設定し、デフォルト値を拡張します (次のようなもの):

パラメータが配列の場合、options.bazを配列と等しくなるように設定し、デフォルト値を拡張します (次のようなもの):

質問

事実上、任意の形式でパラメーターを提供できるようにしたいと考えており、関数はoptions提供されたものから同じオブジェクトを構築します。値が指定されていない場合は、デフォルト値が使用されます。

申し訳ありませんが、これは非常に不明確です。説明するのは非常に困難です。

追加の例

私 (jQuery) が示すことができるもう 1 つの潜在的な方法は、animate()のような関数を見ることです。次のいずれかを指定できることに注意してください。

また

この追加の例は、まさに私が達成したいものではありませんが、正しい方向に沿っています

簡単な説明

これは思ったほど基本的ではないので、私がやろうとしていることを読んで理解する前に、答えにスキップしないでください:-)。

SineMacula私はそのようないくつかの基本関数を含むと呼ばれるオブジェクトを持っています（ready今のところ関数を無視してください）：

このload()関数は、ページのに関連するスクリプトタグを追加することにより、ページに関連するすべてのプラグイン/ライブラリをロードするだけheadです。

ロードされたページのすべてのスクリプトは、と呼ばれる関数へのコールバックとして実行されますrun。これにより、jQueryとSineMaculaが両方ともプラグインに渡されることが保証されます。

問題

SineMaculaライブラリがオブジェクトにロードされているため、ライブラリがロードされているかどうかを検出する方法がないため、ここに問題があります。

たとえば、ライブラリの1つに、という関数プラグインが含まれている場合、次のコマンドsetDate()を実行します。

setDate()関数がまだオブジェクトにロードされていない可能性があるため、これは必ずしも機能するとは限りませSineMaculaん。したがって、「UncaughtTypeError...」が返されます。

SineMacula.ready()ライブラリが存在するかどうかを検出するための関数への適切な適応について誰かがアドバイスできますか？

この機能については提案しないでくださいjQuery.load()。私はそれをよく知っています。

load()どうしても必要な場合を除いて、ソリューションを関数のコールバックにしたくありません。

私はこれが理にかなっていることを願っています、そうでなければ私に知らせてください、そして私はより多くの情報を投稿します。できるだけ短くしたかった。

前もって感謝します

アップデート

私がここにテストページを持っていることを言及するのを忘れました。そこでは、私が得ているエラーを見て、私がしていることをよりよく理解することができます:-)

これはおそらく不可能ですが、尋ねる価値があります。headページのセクションにスクリプト タグを動的に挿入しています。現時点では、document.write多くの人が眉をひそめているものを使用していますが、うまく機能します.

ただし、ここで概説した理由により、 に代わるものを見つけたいと思いますdocument.write。

したがって、これを行う関数が必要です。

ページに要素を挿入するだけでなく、これらの要件を満たすjQueryまたはプレーンなjavascriptを使用して何かを提案できますか?

1. 関数が呼び出されたポイントに要素を配置します。たとえば、script タグは、それを呼び出した script タグの後に配置されます。
2. スクリプトは同期的にロードされるため、完了するまで他のスクリプトをブロックします

Google は独自のGoogle.load()方法でこれを行いますが、document.write を使用していますか? きっとそうじゃない...

簡単な説明

現在、3 つの列を持つギャラリーを作成しています。各列には、幅が同じで高さが異なる画像が含まれています。

列の画像はディレクトリから収集され、PHPglob()関数を使用して配列に配置されます。これは簡単な部分です...

ギャラリーの例:

問題

これらの画像は列に動的に読み込まれて配置されるため、列の高さが大きく異なる可能性があります。

たとえば、2 つの縦向きの写真が列 1 に配置され、2 つの横向きの写真が列 2 に配置されている場合、列は次のように非常に不均一になります。

列の高さが一致する可能性は非常に低いですが、与えられた画像にできるだけ近づけたいので、取得した画像を見て列に配置するアルゴリズムを形成したいと考えています。高さができるだけ近い 3 つの列を返します。

したがって、たとえば、スクリプトは画像を再ソートして次のように配置することで、上記の問題を修正します。

正しいアルゴリズムがあれば、これを書くことができますが、これを行うための最良の手順が思い浮かびません。誰でも手順を提案できますか?

考えられる解決策

私が考えた方法の1つ（これには欠陥があると思うので、より良い方法があると思います）：

1. 結合されたすべての画像の高さを合計し、列の数 (3) で割ります。これにより、目指す高さが得られます
2. 画像を列配列に分散し、列の高さを超えると、次の列にオーバーフローします。
3. 残った画像を最初の列に配置し、次に 2 番目の列などに配置します...

前もって感謝します