JSカプセル化プラグインの場合

今回は JS カプセル化プラグインの事例をお届けします。 JS カプセル化プラグインの 注意事項 は何ですか? 以下は実際的な事例です。

プロジェクトの都合により、私は 1 年以上 js でプラグインを書いていませんでした。プロジェクトが成熟しすぎているため、通常はパッケージ化された関数型プラグインを使用しています。とても気分が落ち込んでいます...過去 2 日間、統計グラフや割引グラフを描画するための canvas プラグインを作成するのに時間をかけたかったので、パッケージ化する方法を学ぶためにオンラインにアクセスしました...ソースコードを読む前にたくさん読んだことがありますが、理解できても、まだ突飛なアイデアだと感じます...

カプセル化とは何ですか?

私の理解は 関数を別のコンポーネントに作成することは、かつては餃子を作るのに似ています。餃子を作るには、まず小麦粉で餃子の皮を作り、次に餃子の餡を作り、それから餃子を手作りする必要がありました。しかし今では、餃子を自動で作る方法が発明されています。機械の内部 各工程は餃子を作るのと同じですが、実はここでやるべきことは材料を入れることだけです。ここでのマシンはパッケージ化されたプラグインであり、原材料は渡したいパラメーターです

なぜ js 関数をプラグインにカプセル化する必要があるのでしょうか?以下の点があると思います

1. コードの再利用を促進する

2. 同じ機能を持つコンポーネント間の干渉を避ける スコープに問題がある可能性があります

。 3. メンテナンスが容易でプロジェクトの蓄積が容易

4. ずっとコピペってレベル低いと思いませんか…

ネットで見たカプセル化には2種類あるようで、1つはjsのネイティブカプセル化、もう1つはjqueryのカプセル化です。まずネイティブカプセル化について話しましょう。

カプセル化するとき、変数の競合を防ぐために、js コードを自己実行関数 に入れます。 りー

次に、

コンストラクター

(function(){
  ......
  ......
}()}

を作成します この関数を外部に公開してグローバルに呼び出せるようにします

(function(){
  var demo = function(options){
    ......
  }
}())

実際、関数は実装されていませんが、カプセル化されており、直接呼び出すことができるようになりました

(function(){
  var demo = function(options){
    ......
  }
  window.demo = demo;
}())

それとも

りー

では、どのようにパラメータを渡すのでしょうか? 通常、プラグインの 1 つは必須パラメータまたはオプションのパラメータを持っています。私の意見では、オプションのパラメータはプラグインで与えられる単なるデフォルト値です。渡すパラメーターはプラグインのデフォルトのパラメーターをオーバーライドします。これは $.extend({}) でオーバーライドできます

var ss = new demo({
  x:1,
  y:2
})；

その後、コンストラクターを初期化するときにいくつかの操作を実行できます

new demo({
  x:2,
  y:3
})；

ここで質問がありますが、extend は jquery にのみ存在しますか? js

object の代替となるものはありますか?後で調べてみます…

もう 1 つ言及する必要があるのは、js をカプセル化するときは、パフォーマンスだけでなく、スケーラビリティや互換性などすべてを考慮する必要があるということです。必要がなければカプセル化する必要はありません。

インターネット上には完成されたプラグインが無数にあり、その機能は非常に強力ですが、大きなプラグインのほんの一部しか使用しない場合があるため、修正が必要になることがあります。また、一部のプロジェクトのスタイルは現在のプラグインのスタイルとは異なるため、自分のプロジェクトに合わせることが重要です。 この記事を読む方法はもうマスターされたと思います。さらに興味をそそられる場合は、PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

Vuejs によるページの地域化の操作方法

webpack2+React の使用の詳細な説明

JQUERY は現在のタグ名を通じて属性の値を取得します

以上がJSカプセル化プラグインの場合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。