完全な JavaScript コンポーネントを開発する

開発者としては、ブラウザーにアラート、確認などの組み込みコントロールがあることを誰もが知っておくべきです。ただし、これらのコントロールは通常、ブラウザーのメーカーごとに形状が異なり、視覚効果が UI を満たしていないことがよくあります。デザイン教師の要件。さらに重要なことは、そのような組み込みコントロールのスタイルは、スタイルが異なるさまざまなインターネット製品のデザイン スタイルと統一することが難しいことです。したがって、優秀なフロントエンド開発者は、これらの組み込みブラウザ コントロールを置き換える独自のパーソナライズされたコントロールを開発します。もちろん、この種の優れたコンポーネントはインターネット上にすでに無数にありますが、この記事を書く目的は、私が開発したコンポーネントがどれほど優れているかを説明することではなく、このようにして相互作用できることを願っているだけです。多くの開発者は互いにコミュニケーションを取り、学び合い、一緒に進歩していきます。さて、早速、本題に入りましょう。

機能紹介

• ブラウザに付属のアラートと確認コントロールを置き換えます

• カスタマイズされたインターフェイススタイル

• 使い方は基本的に組み込みコントロールと同じです

効果プレビュー

1. アラート制御

2. 制御の確認

3. 完全なコード、オンライン プレビュー (下部を参照、圧縮パッケージのダウンロードが提供されます)

開発プロセス

1. コンポーネント構造の設計

まず、組み込みコンポーネントの基本的な使用法を見てみましょう:

 alert("内置Alert控件");
 if (confirm("关闭内置Confirm控件？")) {
     alert("True");
 } else {
     alert("False");
 }

コンポーネントの使用法が組み込みコントロールと一貫していることを確認するには、組み込みコントロールのオーバーライドを考慮する必要があります。コンポーネント開発の統一スタイル、使いやすさ、メンテナンスの容易さ、オブジェクト指向機能を考慮して、カスタマイズしたアラート メソッドと確認メソッドをクラス (Winpop) のインスタンス メソッドとして使用し、最終的にインスタンス メソッドを使用して、システムの組み込みコントロールをオーバーライドします。目標を達成するための私の基本的なアプローチは次のとおりです:

var obj = new Winpop(); // 创建一个Winpop的实例对象
// 覆盖alert控件
window.alert = function(str) {
    obj.alert.call(obj, str);
};
// 覆盖confirm控件
window.confirm = function(str, cb) {
    obj.confirm.call(obj, str, cb);
};

ブラウザの組み込みコントロールはブラウザの他の動作を妨げる可能性があるため、カスタム コンポーネントにはこの機能がないことに注意してください。統一するために、プレビューでわかるように、カスタム コンポーネントをポップアップするときに全画面半透明のマスク レイヤーを使用します。上記の理由により、ブール値を返す組み込みメソッドから、「OK」と「キャンセル」ロジックを正しく追加できました。したがって、カスタム コンポーネントの使用方法は次の形式になります:

alert("自定义Alert组件");
confirm("关闭自定义Confirm组件？", function(flag){
    if (flag) {
        alert("True");
    } else {
        alert("False");
    }
});

2. コンポーネント コードの設計

Winpop コンポーネントのコードを正式に紹介する前に、JavaScript コンポーネントの基本構造を見てみましょう:

(function(window, undefined) {
    function JsClassName(cfg) {
        var config = cfg || {};
        this.get = function(n) {
            return config[n];
        }
        this.set = function(n, v) {
            config[n] = v;
        }
        this.init();
    }
    JsClassName.prototype = {
        init: function(){},
        otherMethod: function(){}
    };
    window.JsClassName = window.JsClassName || JsClassName;
})(window);

自己実行の匿名関数を使用してコンポーネント コードをラップし、グローバルな汚染を可能な限り軽減し、最後にクラスをグローバル ウィンドウ オブジェクトにアタッチします。これは推奨されるアプローチです。

コンストラクター内のgetメソッドとsetメソッドは必須ではなく、単に作者の個人的な癖なので、こう書くことで設定パラメータや他のコンポーネントの内部グローバル変数のキャッシュや読み込みの呼び出し方法を統一できる気がします。オブジェクト指向型のようです。読者の皆様は、このように書くのが良いかどうか、ご意見を共有していただければ幸いです。

次に、Winpop コンポーネントの完全なコードを見てみましょう:

(function(window, jQuery, undefined) {

    var HTMLS = {
        ovl: &#39;<p class="J_WinpopMask winpop-mask" id="J_WinpopMask"></p>&#39; + &#39;<p class="J_WinpopBox winpop-box" id="J_WinpopBox">&#39; + 
        &#39;<p class="J_WinpopMain winpop-main"></p>&#39; + &#39;<p class="J_WinpopBtns winpop-btns"></p>&#39; + &#39;</p>&#39;,
        alert: &#39;<input type="button" class="J_AltBtn pop-btn alert-button" value="确定">&#39;,
        confirm: &#39;<input type="button" class="J_CfmFalse pop-btn confirm-false" value="取消">&#39; + &#39;
        <input type="button" class="J_CfmTrue pop-btn confirm-true" value="确定">&#39;
    }

    function Winpop() {
        var config = {};
        this.get = function(n) {
            return config[n];
        }

        this.set = function(n, v) {
            config[n] = v;
        }
        this.init();
    }

    Winpop.prototype = {
        init: function() {
            this.createDom();
            this.bindEvent();
        },
        createDom: function() {
            var body = jQuery("body"),
                ovl = jQuery("#J_WinpopBox");

            if (ovl.length === 0) {
                body.append(HTMLS.ovl);
            }

            this.set("ovl", jQuery("#J_WinpopBox"));
            this.set("mask", jQuery("#J_WinpopMask"));
        },
        bindEvent: function() {
            var _this = this,
                ovl = _this.get("ovl"),
                mask = _this.get("mask");
            ovl.on("click", ".J_AltBtn", function(e) {
                _this.hide();
            });
            ovl.on("click", ".J_CfmTrue", function(e) {
                var cb = _this.get("confirmBack");
                _this.hide();
                cb && cb(true);
            });
            ovl.on("click", ".J_CfmFalse", function(e) {
                var cb = _this.get("confirmBack");
                _this.hide();
                cb && cb(false);
            });
            mask.on("click", function(e) {
                _this.hide();
            });
            jQuery(document).on("keyup", function(e) {
                var kc = e.keyCode,
                    cb = _this.get("confirmBack");;
                if (kc === 27) {
                    _this.hide();
                } else if (kc === 13) {
                    _this.hide();
                    if (_this.get("type") === "confirm") {
                        cb && cb(true);
                    }
                }
            });
        },
        alert: function(str, btnstr) {
            var str = typeof str === &#39;string&#39; ? str : str.toString(),
                ovl = this.get("ovl");
            this.set("type", "alert");
            ovl.find(".J_WinpopMain").html(str);
            if (typeof btnstr == "undefined") {
                ovl.find(".J_WinpopBtns").html(HTMLS.alert);
            } else {
                ovl.find(".J_WinpopBtns").html(btnstr);
            }
            this.show();
        },
        confirm: function(str, callback) {
            var str = typeof str === &#39;string&#39; ? str : str.toString(),
                ovl = this.get("ovl");
            this.set("type", "confirm");
            ovl.find(".J_WinpopMain").html(str);
            ovl.find(".J_WinpopBtns").html(HTMLS.confirm);
            this.set("confirmBack", (callback || function() {}));
            this.show();
        },
        show: function() {
            this.get("ovl").show();
            this.get("mask").show();
        },
        hide: function() {
            var ovl = this.get("ovl");
            ovl.find(".J_WinpopMain").html("");
            ovl.find(".J_WinpopBtns").html("");
            ovl.hide();
            this.get("mask").hide();
        },
        destory: function() {
            this.get("ovl").remove();
            this.get("mask").remove();
            delete window.alert;
            delete window.confirm;
        }
    };

    var obj = new Winpop();
    window.alert = function(str) {
        obj.alert.call(obj, str);
    };
    window.confirm = function(str, cb) {
        obj.confirm.call(obj, str, cb);
    };
})(window, jQuery);

コードは少し多すぎますが、重要な点は次のとおりです:

• 作者は怠惰で jQuery を使用していることを確認してください。 jQueryを導入してから使用します

• カスタムコンポーネントの構造は最終的にbodyに追加されるので、上記のjsを導入する前にドキュメントがロードされていることを確認してください

• コンポーネントは、を押す機能を追加します。 ESC キーを押しながらマスクレイヤーをクリックしてコンポーネントを非表示にします

• 注: この例では destroy メソッドは使用されていませんが、読者はこのメソッドの delete window.alert と delete window.confirm に注意してください。カスタム コンポーネントが破棄された後に、コントロールがブラウザーの組み込み効果に戻るようにするためです

• 最終的に、コンポーネントに window.Winpop = Winpop を追加すると、オブジェクトが削除されます。他のクラスが呼び出せるようにグローバル化できます

最後に

フロントエンド開発エンジニアとして、Javascript コンポーネント開発は非常に面白いものであり、その面白さは実際にやってみないと体感できないと個人的に感じています。フロントエンド コンポーネントの開発では、半分の労力で 2 倍の結果を達成するために、JavaScript、CSS、および HTML の連携が必要になることがよくあります。ここでは、完全なデモの圧縮パッケージを提供します。言葉。

上記は完全な JavaScript コンポーネントの開発の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。