开发一个完整的JavaScript组件
- - 码农网作为一名开发者，大家应该都知道在浏览器中存在一些内置的控件：Alert，Confirm等，但是这些控件通常根据浏览器产商的不同而形态各异，视觉效果往往达不到UI设计师的要求. 更重要的是，这类内置控件的风格很难与形形色色的各种风格迥异的互联网产品的设计风格统一. 因此，优秀的前端开发者们各自开发自己的个性化控件来替代浏览器内置的这些控件.
开发一个完整的JavaScript组件
标签：
WEB
编程开发
Javascript
| 发表时间：2015-02-11 13:40 | 作者：codeceo
出处：http://www.codeceo.com
作为一名开发者，大家应该都知道在浏览器中存在一些内置的控件：Alert，Confirm等，但是这些控件通常根据浏览器产商的不同而形态各异，视觉效果往往达不到UI设计师的要求。更重要的是，这类内置控件的风格很难与形形色色的各种风格迥异的互联网产品的设计风格统一。因此，优秀的前端开发者们各自开发自己的个性化控件来替代浏览器内置的这些控件。当然，这类组件在网络上已经有不计其数相当优秀的，写这篇文章的目的不是为了说明我开发的这个组件有多优秀，也不是为了炫耀什么，只是希望通过这种方式，与更多的开发者互相交流，互相学习，共同进步。好，废话不多说，言归正传。
功能介绍
- 取代浏览器自带的Alert、Confirm控件
- 自定义界面样式
- 使用方式与内置控件基本保持一致
效果预览
1、Alert控件
2、Confirm控件
3、完整代码， 在线预览（见底部，提供压缩包下载）
开发过程
1. 组件结构设计
首先，我们来看下内置组件的基本使用方法：
1 alert("内置Alert控件");
2 if (confirm("关闭内置Confirm控件？")) {
3 alert("True");
4 } else {
5 alert("False");
6 }
为了保证我们的组件使用方式和内置控件保持一致，所以我们必须考虑覆盖内置控件。考虑到组件开发的风格统一，易用，易维护，以及面向对象等特性，我计划将自定义的alert和confirm方法作为一个类（Winpop）的实例方法，最后用实例方法去覆盖系统内置控件的方法。为了达到目的，我的基本做法如下：
1 var obj = new Winpop(); // 创建一个Winpop的实例对象
2 // 覆盖alert控件
3 window.alert = function(str) {
4 obj.alert.call(obj, str);
5 };
6 // 覆盖confirm控件
7 window.confirm = function(str, cb) {
8 obj.confirm.call(obj, str, cb);
9 };
需要注意的是，由于浏览器内置的控件可以阻止浏览器的其他行为，而我们自定义的组件并不能具备这种能力，为了尽可能的做到统一，正如预览图上看到的，我们在弹出自定义组件的时候使用了一个全屏半透明遮罩层。也正是由于上述原因，confirm组件的使用方式也做了一些细微的调整，由内置返回布尔值的方式，改为使用回调函数的方式，以确保可以正确的添加“确定”和“取消”的逻辑。因此，自定义组件的使用方式就变成了下面这种形式：
1 alert("自定义Alert组件");
2 confirm("关闭自定义Confirm组件？", function(flag){
3 if (flag) {
4 alert("True");
5 } else {
6 alert("False");
7 }
8 });
2. 组件代码设计
在正式介绍Winpop组件的代码之前，我们先来看一下一个Javascript组件的基本结构：
1 (function(window, undefined) {
2 function JsClassName(cfg) {
3 var config = cfg || {};
4 this.get = function(n) {
5 return config[n];
6 }
7 this.set = function(n, v) {
8 config[n] = v;
9 }
10 this.init();
11 }
12 JsClassName.prototype = {
13 init: function(){},
14 otherMethod: function(){}
15 };
16 window.JsClassName = window.JsClassName || JsClassName;
17 })(window);
使用一个自执行的匿名函数将我们的组件代码包裹起来，尽可能的减少全局污染，最后再将我们的类附到全局window对象上，这是一种比较推荐的做法。
构造函数中的get、set方法不是必须的，只是笔者的个人习惯而已，觉得这样写可以将配置参数和其他组件内部全局变量缓存和读取的调用方式统一，似乎也更具有面向对象的型。欢迎读者们说说各自的想法，说说这样写到底好不好。
接下来我们一起看下Winpop组件的完整代码：
1 (function(window, jQuery, undefined) {
2
3 var HTMLS = {
4 ovl: '<div id="J_WinpopMask"></div>' + '<div id="J_WinpopBox">' + '<div></div>' + '<div></div>' + '</div>',
5 alert: '<input type="button" value="确定">',
6 confirm: '<input type="button" value="取消">' + '<input type="button" value="确定">'
7 }
8
9 function Winpop() {
10 var config = {};
11 this.get = function(n) {
12 return config[n];
13 }
14
15 this.set = function(n, v) {
16 config[n] = v;
17 }
18 this.init();
19 }
20
21 Winpop.prototype = {
22 init: function() {
23 this.createDom();
24 this.bindEvent();
25 },
26 createDom: function() {
27 var body = jQuery("body"),
28 ovl = jQuery("#J_WinpopBox");
29
30 if (ovl.length === 0) {
31 body.append(HTMLS.ovl);
32 }
33
34 this.set("ovl", jQuery("#J_WinpopBox"));
35 this.set("mask", jQuery("#J_WinpopMask"));
36 },
37 bindEvent: function() {
38 var _this = this,
39 ovl = _this.get("ovl"),
40 mask = _this.get("mask");
41 ovl.on("click", ".J_AltBtn", function(e) {
42 _this.hide();
43 });
44 ovl.on("click", ".J_CfmTrue", function(e) {
45 var cb = _this.get("confirmBack");
46 _this.hide();
47 cb && cb(true);
48 });
49 ovl.on("click", ".J_CfmFalse", function(e) {
50 var cb = _this.get("confirmBack");
51 _this.hide();
52 cb && cb(false);
53 });
54 mask.on("click", function(e) {
55 _this.hide();
56 });
57 jQuery(document).on("keyup", function(e) {
58 var kc = e.keyCode,
59 cb = _this.get("confirmBack");;
60 if (kc === 27) {
61 _this.hide();
62 } else if (kc === 13) {
63 _this.hide();
64 if (_this.get("type") === "confirm") {
65 cb && cb(true);
66 }
67 }
68 });
69 },
70 alert: function(str, btnstr) {
71 var str = typeof str === 'string' ? str : str.toString(),
72 ovl = this.get("ovl");
73 this.set("type", "alert");
74 ovl.find(".J_WinpopMain").html(str);
75 if (typeof btnstr == "undefined") {
76 ovl.find(".J_WinpopBtns").html(HTMLS.alert);
77 } else {
78 ovl.find(".J_WinpopBtns").html(btnstr);
79 }
80 this.show();
81 },
82 confirm: function(str, callback) {
83 var str = typeof str === 'string' ? str : str.toString(),
84 ovl = this.get("ovl");
85 this.set("type", "confirm");
86 ovl.find(".J_WinpopMain").html(str);
87 ovl.find(".J_WinpopBtns").html(HTMLS.confirm);
88 this.set("confirmBack", (callback || function() {}));
89 this.show();
90 },
91 show: function() {
92 this.get("ovl").show();
93 this.get("mask").show();
94 },
95 hide: function() {
96 var ovl = this.get("ovl");
97 ovl.find(".J_WinpopMain").html("");
98 ovl.find(".J_WinpopBtns").html("");
99 ovl.hide();
100 this.get("mask").hide();
101 },
102 destory: function() {
103 this.get("ovl").remove();
104 this.get("mask").remove();
105 delete window.alert;
106 delete window.confirm;
107 }
108 };
109
110 var obj = new Winpop();
111 window.alert = function(str) {
112 obj.alert.call(obj, str);
113 };
114 window.confirm = function(str, cb) {
115 obj.confirm.call(obj, str, cb);
116 };
117 })(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] 推荐：
JavaScript开发规范要求
- - 博客 - 伯乐在线来源： webflash 的博客. 作为一名开发人员（WEB前端JavaScript开发），不规范的开发不仅使日后代码维护变的困难，同时也不利于团队的合作，通常还会带来代码安全以及执行效率上的问题. 本人在开发工作中就曾与不按规范来开发的同事合作过，与他合作就不能用“愉快”来形容了. 现在本人撰写此文的目的除了与大家分享一点点经验外，更多的是希望对未来的合作伙伴能够起到一定的借鉴作用.
使用JavaScript和Canvas开发游戏（一）
- iVane - 为之漫笔原文作者：Matthew Casperson • 编辑：Michele McDonough. 原文链接: Game Development with JavaScript and the Canvas element. 3、通过Canvas元素实现高级图像操作. 4、通过Canvas实现视差滚动. 8、JavaScript键盘输入.
15款很棒的 JavaScript 开发工具
- jiwei - cnBeta.COM在开发中，借助得力的工具可以事半功倍. 今天，这篇文章向大家分享最新收集的15款非常有用的 JavaScript 开发工具.
使用JavaScript和Canvas开发游戏（三）
- weslleywang - 为之漫笔原文作者：Matthew Casperson • 编辑：Michele McDonough. 原文链接: Game Development with JavaScript and the Canvas element. 3、通过Canvas元素实现高级图像操作. 6、通过Canvas实现视差滚动. 8、JavaScript键盘输入.
使用JavaScript和Canvas开发游戏（四）
- weslleywang - 为之漫笔原文作者：Matthew Casperson • 编辑：Michele McDonough. 原文链接: Game Development with JavaScript and the Canvas element. 3、通过Canvas元素实现高级图像操作. 6、通过Canvas实现视差滚动. 8、JavaScript键盘输入.
使用JavaScript和Canvas开发游戏（一）
- Alex - HTML5研究小组原文作者：Matthew Casperson • 编辑：Michele McDonough. 原文链接: http://www.brighthub.com/internet/web-development/articles/38364.aspx. 3、基于Canvas的高级图像操作. 4、通过Canvas实现视差滚动.
JavaScript最佳开发工具集合
- MAGI-CASPER/Peter Pan - 伯乐在线 -博客 注：此文由敏捷翻译 - 关关编译自 Joe Stagner 近日分享的博文. 本文只是JavaScript的工具集合，如需书籍资源，《你得学JavaScript》这篇文章已有推荐. 我最近做了很多客户端OG开发，也计划做更多. HTML5、JavaScript 和 CSS. 我正在做一个工作计时器，所以我在寻找一个JS测试框架，故我自己给不同的JavaScript工具做了一个列表.
用JavaScript+html来开发win8 app—Hello World
- - 博客园_首页在win8+vs2012环境下面，我们除了能用C#，C++来开发win8的app，还可以用js+html直接开发win8的app. 2.修改default.html. 在body里面用标准的html input控件添加了一个button. 新建完项目VS会自动引用default.js. 我们可以把绑定事件的js代码放到这里.