プラグインをネイティブ JS でカプセル化する方法

今回は、ネイティブ js でプラグインをカプセル化する方法を説明します。ネイティブ js でプラグインをカプセル化する際の 注意事項 は何ですか。実際のケースを見てみましょう。

今日は、独自のプラグインの作成方法を紹介します。読む前に復習することをお勧めします。

オブジェクト指向; 早速、スタイルをリセットするための簡単なプラグインを作成します。コード付き;

//SetStyles.js
(function(win, doc) {
    var defaultSettings = {
        color: "red",
        background: "blue",
        border: "2px solid #000",
        fontSize:"30px",
        textAlign:"center",
        width:"200px",
        borderRadius:"5px"
    };
    function SetStyles(options) {
        var self = this;
        //没传配置项自己丢错
        if(!options) {
            throw new Error("请传入配置参数");
        }
        self = Object.assign(self, defaultSettings, options);
        self.container = doc.querySelector(self.container) || doc.querySelectorAll(self.container);
        self._changeStyles();
    }
    SetStyles.prototype = {
        _changeStyles: function() {
            var self = this;
            for(var pro in self) {
                if(pro == "container") {
                    continue;
                }
                if(pro == 'text' && typeof self[pro]== 'string') {
                    self.container.innerText = self[pro];
                    continue;
                }else if(pro == 'text' && typeof self[pro]== 'function'){
                    self.container.innerText = self[pro]();
                    continue;
                }
                self.container.style[pro] = self[pro];
            }
        }
    }
    win.SetStyles = SetStyles;
})(window, document)
  //调用
    var a = new SetStyles({
            container:"#test",
            background:"#fff",
            textAlign:"center",
            text:function(){
                return "我是文本";
            }
        });    //text参数格式字符串或者函数
    //container用的querySelectAll方法，参数一致
    //其他css参数为字符串

これは私のものです。説明が理解できない場合は、十分ではありません。問題がある場合は、自分で console.log に記録してください。

最初に次のデフォルトパラメータdefaultSettingsを定義します

次に、オブジェクトをマージするためにObject.assignを使用する必要があるのはなぜですか? デフォルト設定にすべてのデフォルトパラメータを記述する必要がないからです。作成したパラメータを選択するだけで、オプションが最後に配置されます。最後に、プロトタイプにメソッドを記述します。
通常、メソッドはプロトタイプに記述され、プロパティはコンストラクターに記述されます。
このコードの機能は誰でも理解できるはずです。CSS スタイルをリセットします。これは jquery の css() 関数に似ています。 しかし、私はこれを使用することをお勧めしません。結局のところ、この原則に従って、dom を操作するために js を使用しないようにしてください。結局のところ、このコストは非常に高いので、皆さんにその方法を知らせるためにこれを書いています。プラグインをカプセル化して CSS スタイルを変更するには、さらにいくつかのクラスを作成することをお勧めします。スタイルを使用したい場合は、クラス名を変更するだけです。
これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

一般的に使用される HTML 要素の構造は何ですか?

Google Chrome のラベルと入力間の間隔の問題を解決するには?

ページのキャッシュを無効にする方法は何ですか?代わりにbase64エンコーディングを使用してください

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