作为一名开发者,大家应该都知道在浏览器中存在一些内置的控件: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. PLS-00306:错误解决思路 - OracleHelper 执行Oracle函数的坑

    如果你是像我一样初次使用Net+Oracle的结合,我想你会跟我一样,有很大的概率碰到这个问题 ==================================================== ...

  2. Javascript检测浏览器对CSS属性的支持 /* supports */

    //检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...

  3. Java笔记(二十七)……IO流中 File文件对象与Properties类

    File类 用来将文件或目录封装成对象 方便对文件或目录信息进行处理 File对象可以作为参数传递给流进行操作 File类常用方法 创建 booleancreateNewFile():创建新文件,如果 ...

  4. 枚举在c与c++中定义的不同

    众所周知的,枚举是在运行期才决定枚举变量的值的,而不是像宏一样在预编译的时候就进行值得替换. 而且c标准规定: size(int) <= size(enum)<=系统所能表示的最大范围的值 ...

  5. rand(7) 到rand(10)

    说有一个rand()函数,等概率生成1-7的随机数. 利用这个函数,构造一个能生成1-10的随机数的函数; //意思大家都懂就好,没说清的就按照想象的走 我想只要输出的10个数概率相同就好,从宏观上看 ...

  6. 教程-MessageBox 使用方法

    对应对象:TApplication 声明:function MessageBox(Text,Caption:PChar;Flags:Word):Integer; 功能:MessageBox方法可以显示 ...

  7. 问题-Delphi编译时提示缺少delphi自己的单元文件

    问题现象:在编译工程是,提示缺少DELPHI自己的很多单元. 问题原因:这可能是因为手动误删除,或是第三方控件安装时误删除DELPHI自己的目录引起的(如果说错了,希望高人指点). 问题处理: 方法一 ...

  8. hdoj 2802 F(N)【递推 规律】

    F(N) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  9. Redis常用数据类型

    Redis常用数据类型 转载自:http://blog.sina.com.cn/s/blog_7f37ddde0101021q.html     Redis最为常用的数据类型主要有以下五种: ●Str ...

  10. C# 连接SQL数据库 常用连接字符串

    一:C# 连接SQL数据库 Data Source=myServerAddress;Initial Catalog=myDataBase;User Id=myUsername;Password=myP ...