簡單的JavaScript組件化實(shí)現(xiàn)

Hanks10100 發(fā)布于2019-08-21 10:42 / 2493人閱讀

摘要：作為一名前端菜鳥，最近看例子，根據(jù)理解自己也簡單實(shí)現(xiàn)了一下組件的繼承和事件機(jī)制。公共功能銷毀在子類中調(diào)用的組件自己的功能的實(shí)現(xiàn)有很多種，我用了，的實(shí)現(xiàn)比較巧妙。最后記得提供一個銷毀組件的方法，一個簡單的組件就完成了。

作為一名前端菜鳥，最近看react例子，根據(jù)理解自己也簡單實(shí)現(xiàn)了一下組件的繼承和事件機(jī)制。

代碼在這里

原始的組件寫法

(function($) {
    $.pluginName = function(element, options) {
        var defaults = {
            title: "",
            content: "",
            showOKBtn: 1, // 顯示確定按鈕
            showCCBtn: 1, // 顯示取消按鈕
            onFoo: function() {} // callback
        }

        var plugin = this;
        plugin.settings = {}

        var $element = $(element);

        plugin.init = function(options) {
            this.settings = $.extend({}, defaults, options);
            this.initNode(options);
        }

        // public method.
        plugin.show = function() {
            // ...
        }
        plugin.hide = function() {
            // ...    
        }

        plugin.initNode = function(options) {
            var $okBtn = $element.find(""),
                $content = $element.find("");
            // ....
            // 部分邏輯
            $content.text(plugin.settings.content);
            $okBtn.on("click", $.proxy(this.onOk, this));
        }

        plugin.onOk = function(){
            this.hide();
            plugin.settings.onFoo();
        }

        plugin.init();
    }

    $.fn.pluginName = function(options) {
        return this.each(function() {
            if (undefined == $(this).data("pluginName")) {
                var plugin = new $.pluginName(this, options);
                $(this).data("pluginName", plugin);
            }
        });
    }
})(jQuery);

// 使用
var template = "...彈框html...";
$(template).pluginName({
    content: "確定刪除該地址"
}).show();

一般我們寫得入門級jquery組件，基本就是這樣一個模板。
這里我們實(shí)現(xiàn)了一個基本的彈窗組件，也完成了需求方的要求，oh ye！

某天需求mm說我們要加一個confirm信息的彈框，只要一個確定按鈕??！還好還好。組件中本來就加了options.showCCBtn的配置，實(shí)例化的時候傳一個參數(shù)就可以了。分分鐘解決了mm的問題，還得到mm的贊許，想想都有點(diǎn)小激動呢。

處理一套風(fēng)格相似的組件的時候，通過傳遞不同的參數(shù)來控制不同的ui顯示和邏輯代碼執(zhí)行，確實(shí)可以解決問題，隨著功能的一步步增加，這個組件就變得越來越臃腫，代碼耦合成度變高，到最后自己都搞不清楚每個參數(shù)不同值代表的意思。況且在團(tuán)隊中都是多個人維護(hù)同一個組件，這簡直就是一場悲劇。從此mm的態(tài)度也變得不好，你還坑害了維護(hù)組件的好基友。

繼承

這時候面向?qū)ο蟮乃季S就出場了

我們發(fā)現(xiàn)設(shè)置titile，關(guān)閉窗體是大家共有的功能。這里可以抽象成一個基礎(chǔ)組件，新的組件繼承這個組件即可。

(function() {
    var BaseWindon = Kclass.extend({
        init: function(options){
           //公共功能 
            $titleElm.text(options.title);
            $closeElm.on("click", $.proxy(this.close, this));
        },
                    // 銷毀
        destroy: function(){
                    
        }
        close: function(){

        }
    };
    return BaseWindon;
})()

 在子類中 require("BaseWindon");

 (function() {
    var AddAddressWindon = BaseWindon.extend({
        init: function(options){
            // 調(diào)用parent的init
            this.supr();
        },
        validate: function(){

        },
        // 組件自己的功能
        submit: function(){

        }
    };
    return AddAddressWindon;
})()

javascript oo的實(shí)現(xiàn)有很多種，我用了ded/klass，supr的實(shí)現(xiàn)比較巧妙。主要原理為：獲取方法的代碼字符串，通過正則檢測字符串中是否包含 supr，若包含，則改寫該方法，在改寫的方法中動態(tài)的改變this.supr，使其指向父類同名方法，以完成調(diào)用父類方法的目的。具體的原理可看參考野生小技巧--繼承中的super()實(shí)現(xiàn)。

這時需求mm又來了，需求mm說當(dāng)用戶點(diǎn)擊確定之后要加一個其他功能，其實(shí)第一個例子中，我們也可以實(shí)現(xiàn)這樣的功能。我們可以傳遞一個callback onFoo。

我們需要引入一種更加優(yōu)雅的方式，參考node的事件機(jī)制。大家知道，Node.js能夠在眾多的后端JavaScript技術(shù)之中脫穎而出，正是因其基于事件的特點(diǎn)而受到歡迎。

事件機(jī)制

事件機(jī)制對應(yīng)著一種設(shè)計模式-觀察者模式。

(function() {
    var win = new BaseWindow();

    win.on("ok", function(){
        console.log("on ok!");
    });

    win.emit("ok");  
    // log  --- on ok!
})()

實(shí)現(xiàn)在這里

顯然事件驅(qū)動的方式更加優(yōu)雅，相比之下第一種手動觸發(fā)callback的方式顯得有點(diǎn)out。事件機(jī)制的方式，在監(jiān)聽on和觸發(fā)emit的時機(jī)上也顯得更加靈活，對于只需要觸發(fā)一次的callback，你只需要用once函數(shù)來監(jiān)聽。寫代碼好像突然變得好爽好舒服。

最后記得提供一個銷毀組件的方法，一個簡單的組件就完成了。
完整的代碼在這里

當(dāng)然要更好的組件還需要提供

模板機(jī)制

雙向綁定

云服務(wù)器 GPU云服務(wù)器簡單的javascript js實(shí)現(xiàn)的簡單特效用c實(shí)現(xiàn)簡單的shell java實(shí)現(xiàn)簡單的web服務(wù)器

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86048.html

發(fā)表評論

登陸后可評論

0條評論

Hanks10100

男|高級講師

我要關(guān)注我要私信

TA的文章

盲盒能夠持續(xù)火爆的原因

閱讀 895·2021-10-13 09:39
轉(zhuǎn)行測試的看過來！0基礎(chǔ)~自動化測試，我整理的超全學(xué)習(xí)指南...

閱讀 1485·2021-10-11 10:57
利用try catch跳出forEach循環(huán)

閱讀 2597·2019-08-26 13:53
react入門筆記

閱讀 2542·2019-08-26 12:23
WebGL 著色器偏導(dǎo)數(shù)dFdx和dFdy介紹

閱讀 3694·2019-08-23 18:30
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法-Sort-(leetcode原題)

閱讀 3754·2019-08-23 18:08
Echarts3.0 地圖自定義圖標(biāo)

閱讀 2527·2019-08-23 18:04
JS每日一題：Webpack有哪些常見的Loader？他們是解決什么問題的？

閱讀 2963·2019-08-23 16:28

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

簡單的JavaScript組件化實(shí)現(xiàn)

相關(guān)文章

JavaScript 是如何工作: Shadow DOM 的內(nèi)部結(jié)構(gòu)+如何編寫?yīng)毩?em>的組件！

【譯】怎樣創(chuàng)建定制表單組件

【譯】怎樣創(chuàng)建定制表單組件

【譯】怎樣創(chuàng)建定制表單組件

【譯】統(tǒng)一樣式語言

發(fā)表評論

0條評論

Hanks10100

男|高級講師

TA的文章

盲盒能夠持續(xù)火爆的原因

轉(zhuǎn)行測試的看過來！0基礎(chǔ)~自動化測試，我整理的超全學(xué)習(xí)指南...

利用try catch跳出forEach循環(huán)

react入門筆記

WebGL 著色器偏導(dǎo)數(shù)dFdx和dFdy介紹

JavaScript數(shù)據(jù)結(jié)構(gòu)與算法-Sort-(leetcode原題)

Echarts3.0 地圖自定義圖標(biāo)

JS每日一題：Webpack有哪些常見的Loader？他們是解決什么問題的？

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

簡單的JavaScript組件化實(shí)現(xiàn)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！