作为一名开发者,大家应该都知道在浏览器中存在一些内置的控件: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.alert 和 delete window.confirm ,这样写的目的是保证在自定义组件销毁后,将Alert、Confirm控件恢复到浏览器内置效果
  • 组件最后如果加上 window.Winpop = Winpop ,就可以将对象全局化供其他类调用了

最后

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

作者博客:百码山庄

开发一个完整的JavaScript组件的更多相关文章

  1. php怎么做网站?如何用PHP开发一个完整的网站?

    1.PHPer应具备的知识 (1)PHP知识: 熟练掌握基础函数,PHP语句(条件.循环),数组(排序.读取),函数(内部 构造),运算(数学 逻辑),面向对象(继承 接口 封装 多态静态属性)等. ...

  2. 【如何快速的开发一个完整的iOS直播app】(美颜篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...

  3. 【如何快速的开发一个完整的iOS直播app】(采集篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,首先需要采集主 ...

  4. 【如何快速的开发一个完整的iOS直播app】(播放篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看上篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,集成ijkpl ...

  5. 【如何快速的开发一个完整的iOS直播app】(原理篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的 ...

  6. 【如何快速的开发一个完整的iOS直播app】(推流篇)

    前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,肯定需要流媒体服务器,本篇主要讲解直播中流媒体服务器搭建,并且讲解了如 ...

  7. 【如何快速的开发一个完整的 iOS 直播 app】(美颜篇)

    来源:袁峥Seemygo 链接:http://www.jianshu.com/p/4646894245ba 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播 ...

  8. 如何快速的开发一个完整的iOS直播app(原理篇)

    目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的iOS直播app](采集篇) 前言 大半年没写博客了,但 ...

  9. 如何快速的开发一个完整的iOS直播app(美颜篇)

    前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重要的,如果没有美颜功能,可能分分钟钟掉粉千万,本篇主要讲 ...

随机推荐

  1. Cocos2d-x获取随机数

    计算机是无法产生真正的随机数的,都是伪随机.获取随机数的方式和算法多种多样,这里只给出一种方法,基于最新的C++11. 1 2 3 4 5 #include <random> std::u ...

  2. Hadoop HDFS的常用命令

    1.将目录/root/data/下的item.txt复制到HDFS下的/user/root下: hadoop fs -copyFromLocal /root/data/item.txt itemdat ...

  3. 【HTML】Beginner4:Heading

    1.Headings h1 h2 h3 h4 h5 h6     h1 being the almighty emperor of headings     h6 being the lowest p ...

  4. 2015美团网 哈工大 第k个排列

    leetcode 上的Permutation Sequence 下面是可执行代码 1 2 3 1 3 2 2 1 3 2 3 1 3 1 2 3 2 1 以1 开头 123,132,共2!个数 2 开 ...

  5. nyoj 904 hashmap

    这个题目是个水题目,现在我只管做出来,效率不考虑了. 题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=904 我用hashmap 很爽,很 ...

  6. extjs Cannot read property 'dom' of null

    如果你的EXTJS报错: Cannot read property 'dom' of null,那就有可能是因为你的HTML或者JSP文件中的BODY标签里面少了个东西比如代码是: <html& ...

  7. 数据中心基础设施自动化运维之puppet专项

    http://forge.puppetlabs.com/treydock/yum_cron  [puppet功能扩展forge] http://docs.puppetlabs.com/referenc ...

  8. 安卓开发20:动画之Animation 详细使用-主要通过java代码实现动画效果

    AlphaAnimation 透明效果实现: activity_main.xml中仅仅是一个简单的图片,下面的例子都会使用这个xml: <RelativeLayout xmlns:android ...

  9. celery expires 让celery任务具有时效性

    起因:有的时候.我们希望任务具有时效性.比方定时每5分钟去抓取某个状态,由于celery队列中的任务可能非常多,等到这个任务被运行时.已经超过了5分钟,那么这个任务的运行已经没有意义.由于下一次抓取已 ...

  10. android113 自定义进度条

    MainActivity: package com.itheima.monitor; import android.os.Bundle; import android.app.Activity; im ...