你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
MrZheng

开发一个完整的JavaScript组件 21个回复 专栏 @ Javascript

MrZheng 发布于 2 年前

作为一名开发者,大家应该都知道在浏览器中存在一些内置的控件:Alert,Confirm等,但是这些控件通常根据浏览器产商的不同而形态各异,视觉效果往往达不到UI设计师的要求。更重要的是,这类内置控件的风格很难与形形色色的各种风格迥异的互联网产品的设计风格统一。因此,优秀的前端开发者们各自开发自己的个性化控件来替代浏览器内置的这些控件。当然,这类组件在网络上已经有不计其数相当优秀的,写这篇文章的目的不是为了说明我开发的这个组件有多优秀,也不是为了炫耀什么,只是希望通过这种方式,与更多的开发者互相交流,互相学习,共同进步。好,废话不多说,言归正传。

功能介绍

  • 取代浏览器自带的Alert、Confirm控件
  • 自定义界面样式
  • 使用方式与内置控件基本保持一致

效果预览

1、Alert控件

2、Confirm控件

3、完整代码,在线预览(见底部,提供压缩包下载)

开发过程

1. 组件结构设计

首先,我们来看下内置组件的基本使用方法:

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

为了保证我们的组件使用方式和内置控件保持一致,所以我们必须考虑覆盖内置控件。考虑到组件开发的风格统一,易用,易维护,以及面向对象等特性,我计划将自定义的alert和confirm方法作为一个类(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); };

需要注意的是,由于浏览器内置的控件可以阻止浏览器的其他行为,而我们自定义的组件并不能具备这种能力,为了尽可能的做到统一,正如预览图上看到的,我们在弹出自定义组件的时候使用了一个全屏半透明遮罩层。也正是由于上述原因,confirm组件的使用方式也做了一些细微的调整,由内置返回布尔值的方式,改为使用回调函数的方式,以确保可以正确的添加“确定”和“取消”的逻辑。因此,自定义组件的使用方式就变成了下面这种形式:

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

使用一个自执行的匿名函数将我们的组件代码包裹起来,尽可能的减少全局污染,最后再将我们的类附到全局window对象上,这是一种比较推荐的做法。

构造函数中的get、set方法不是必须的,只是笔者的个人习惯而已,觉得这样写可以将配置参数和其他组件内部全局变量缓存和读取的调用方式统一,似乎也更具有面向对象的型。欢迎读者们说说各自的想法,说说这样写到底好不好。

接下来我们一起看下Winpop组件的完整代码:

(function(window, jQuery, undefined) {

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

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 === 'string' ? 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 === 'string' ? 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、点遮罩层隐藏组件功能
  • 注意:虽然本例中未用到destory方法,但读者朋友可以注意一下该方法中的delete window.alertdelete window.confirm,这样写的目的是保证在自定义组件销毁后,将Alert、Confirm控件恢复到浏览器内置效果
  • 组件最后如果加上window.Winpop = Winpop,就可以将对象全局化供其他类调用了

最后

作为一个前端开发工程师,个人觉得Javascript组件开发是一件很有意思的事情,其中乐趣只有自己亲自动手尝试了才会体会得到。前端组件开发往往需要Javascript、CSS和html相互配合,才能事半功倍,上面提到的Winpop也不例外,这里给大家提供一个完整的demo压缩包,有兴趣的读者朋友,欢迎传播。

作者博客:百码山庄

  • whilefor

    挺好的文章

    #1
  • thonatos

    赞一个。

    #2
  • ggbond

    代码风格很好,学习了

    #3
  • pigerla

    好文,学习了,但有点点瑕疵

    confirm("关闭自定义Confirm组件?", function(flag){ // 我觉得 flag是一个含糊,语义不清的词

    #4
  • huke

    好文,mark

    #5
  • zasqw2222

    不错 好文

    #6
  • yunfour

    我觉得alert方法应该作为Winpop类的一个静态方法就可以了,即通过:Winpop.alert()访问,不用每次调用此都去生命一个Winpop实例

    #7
  • cation

    赞一个
    组件是否应该考虑组件的通信问题可以提高维护和易扩展性

    #8
  • arkia123

    Winpop.prototype = { ... constructor=Winpop; }
    使用prototype指向 {}对象时,要添加 constructor=Winpop ,防止报错

    #9
  • xiaohuangji

    慕课网上有一个组件开发的视频,可以对比着理解。

    #10
  • tonyc726

    简单易懂,赞一个

    #11
  • jing2si
    (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);
    
    #12
  • Jeremial

    为angular写过一个 ios7+ 风格的 alert confirm prompt.

    http://github.com/Treri/tnotify

    #13
  • 小天同学

    赞一个。

    #14
  • backpack

    挺好 赞一个!

    #15
  • SamMFFL

    赞一个,学习了

    #16
  • sky000

    覆盖原生的可不是个好想法,既然你都已经定成类了,就直接在实例上调用alert就行了,不需要刻意覆盖原生的

    #17
  • isRambo

    代码风格挺不错的!

    #18
  • PeakFish

    学习

    #19
  • shiyue

    完成了一个功能性的插件

    #20
  • Aresn

    @PeakFish zan

    #21
登录后回复,如无账号,请使用邀请码注册