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

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

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

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

代碼在這里

原始的組件寫(xiě)法

(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();

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

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

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

繼承

這時(shí)候面向?qū)ο蟮乃季S就出場(chǎng)了

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

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

        }
    };
    return BaseWindon;
})()

 在子類(lèi)中 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)比較巧妙。主要原理為：獲取方法的代碼字符串，通過(guò)正則檢測(cè)字符串中是否包含 supr，若包含，則改寫(xiě)該方法，在改寫(xiě)的方法中動(dòng)態(tài)的改變this.supr，使其指向父類(lèi)同名方法，以完成調(diào)用父類(lèi)方法的目的。具體的原理可看參考野生小技巧--繼承中的super()實(shí)現(xiàn)。

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

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

事件機(jī)制

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

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

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

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

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

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

最后記得提供一個(gè)銷(xiāo)毀組件的方法，一個(gè)簡(jiǎn)單的組件就完成了。
完整的代碼在這里

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

模板機(jī)制

雙向綁定

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86048.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Hanks10100

男|高級(jí)講師

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

TA的文章

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

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

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

閱讀 2604·2019-08-26 13:53
react入門(mén)筆記

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

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

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

閱讀 2530·2019-08-23 18:04
JS每日一題：Webpack有哪些常見(jiàn)的Loader？他們是解決什么問(wèn)題的？

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

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

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

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

發(fā)表評(píng)論

0條評(píng)論

Hanks10100

男|高級(jí)講師

TA的文章

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

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

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

react入門(mén)筆記

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

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

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

JS每日一題：Webpack有哪些常見(jiàn)的Loader？他們是解決什么問(wèn)題的？

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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