面向对象js--原型模式实例解析
首先原型模式是设计模式的一种，它的定义是：用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。Prototype原型模式是一种创建型设计模式，Prototype模式允许一个对象再创建另外一个可定制的对象，根本无需知道任何如何创建的细节,工作原理是:通过将一个原型对象传给那个要发动创建的对象，这个要发动创建的对象通过请求原型对象拷贝它们自己来实施创建，javascript中的原型模式个人总结现在主要有3种，1、基础原型模式、2、构造函数+基础原型模式（混合模式）、3、动态原型模式，在这里把这3种的优缺点简单介绍一下：模式1优点是共享实例，缺点也是因为共享引起的，例如属性，实例1中改变了属性值，实例2中发现也改变了；模式2就弥补了模式1的缺点；模式3的优点是把构造函数和原型封装到了一起，我这个例子用的是模式2混合原型模式，这个现在用的比较普及。
这里用一个通知公告的例子来演示一下，首先我们看一下运行界面，见下图:
主要是用div+css+js实现了一个通知框，可以动态切换标签，界面代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabChange.aspx.cs" Inherits="BSTest.CommonControls.TabChange.TabChange" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>标签切换通用页面</title> <script src="http://www.cnblogs.com/FieldVarify/jquery-1.4.2.js" type="text/javascript"></script> <link href="http://www.cnblogs.com/css/Common.css" rel="stylesheet" type="text/css" /> <link href="http://www.cnblogs.com/css/Global.css" rel="stylesheet" type="text/css" /> <script src="TabChange.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> // 在DOM加载完成时运行 $(document).ready(function() { // 调用TabChange var nc = new TabChange.NConstructor("tab-hd"); TabChange.tab_class = "tab-hd"; TabChange.content_class = "tab-pal"; // 执行初始化 nc.InitTab(); }) </script> </head> <body> <form id="form1" runat="server"> <div id="J_TabChange" class="notice"> <div class="tab-hd" id="tab-hd"> <ul> <li class="tab-cur"><a href="#">通知</a> </li> <li><a href="#">公示</a> </li> <li><a href="#">新闻</a> </li> </ul> </div> <div class="tab-bd" > <div class="tab-pal"> <ul> <li><a class="h" href="http://bbs.taobao.com/catalog/thread/508895-258173759.htm?spm=1.187232.221027.1"> 人民日报:电商助成长</a> </li> <li><a href="http://bbs.taobao.com/catalog/thread/508895-258182536.htm?spm=1.187232.221027.2"> 网店为拉顾客写"情书"</a> </li> <li><a href="http://bbs.taobao.com/catalog/thread/508895-258180776.htm?spm=1.187232.221027.3"> 探访中国淘宝第一村</a> </li> <li><a href="http://bbs.taobao.com/catalog/thread/508895-258139005.htm?spm=1.187232.221027.4"> 阿里反腐交出首份答卷</a> </li> </ul> <!--end--> </div> <div style="display: none" class="tab-pal"> <ul> <li><span>[<a href="http://info.rule.taobao.com/list/1602/1.php?spm=1.187233.221032.1">公告</a>]</span> <a href="http://info.rule.taobao.com/detail/2012/06/25/629157/1.php?spm=1.187233.221032.2"> 如何进聚划算</a> </li> <li><span>[<a href="http://bbs.taobao.com/catalog/11396510.htm?spm=1.187233.221032.3">论坛</a>]</span> <a href="http://bbs.taobao.com/catalog/thread/15296510-257804147.htm?spm=1.187233.221032.4"> 天猫商家发票</a> </li> <li><span>[<a href="http://bbs.taobao.com/catalog/11396510.htm?spm=1.187233.221032.5">论坛</a>]</span> <a href="http://bbs.taobao.com/catalog/thread/15296510-257384594.htm?spm=1.187233.221032.6"> 商品发布规则</a> </li> <li><span>[<a href="http://bbs.taobao.com/catalog/11396510.htm?spm=1.187233.221032.7">论坛</a>]</span> <a class="h" href="http://bbs.taobao.com/catalog/thread/15296510-257963810.htm?spm=1.187233.221032.8"> 如何设置运费</a> </li> </ul> <!--end--> </div> <div style="display: none" class="tab-pal"> <ul> <li><span>[<a href="http://info.rule.taobao.com/list/1602/1.php?spm=1.187233.221032.1">公告</a>]</span> <a href="http://info.rule.taobao.com/detail/2012/06/25/629157/1.php?spm=1.187233.221032.2"> 如何进聚划算3</a> </li> <li><span>[<a href="http://bbs.taobao.com/catalog/11396510.htm?spm=1.187233.221032.3">论坛</a>]</span> <a href="http://bbs.taobao.com/catalog/thread/15296510-257804147.htm?spm=1.187233.221032.4"> 天猫商家发票3</a> </li> <li><span>[<a href="http://bbs.taobao.com/catalog/11396510.htm?spm=1.187233.221032.5">论坛</a>]</span> <a href="http://bbs.taobao.com/catalog/thread/15296510-257384594.htm?spm=1.187233.221032.6"> 商品发布规则3</a> </li> <li><span>[<a href="http://bbs.taobao.com/catalog/11396510.htm?spm=1.187233.221032.7">论坛</a>]</span> <a class="h" href="http://bbs.taobao.com/catalog/thread/15296510-257963810.htm?spm=1.187233.221032.8"> 如何设置运费3</a> </li> </ul> <!--end--> </div> </div> </div> </form> </body> </html>
脚本文件如下：
/*功能：面向对象标签切换 * 调用方式： * // 在DOM加载完成时运行 $(document).ready(function() { // 调用TabChange var nc = new TabChange.NConstructor("tab-hd"); TabChange.tab_class = "tab-hd"; // 标签选中样式 TabChange.content_class = "tab-pal"; // div内容样式 // 执行初始化 nc.InitTab(); }) * 作者：limq * 日期：2012.07.10 */ var TabChange = new Object(); // 构造函数 TabChange.NConstructor = function(className) { this.className = className; } TabChange.tab_class = "tab-hd"; // 切换标签样式名称 TabChange.content_class = "tab-pal"; // 切换内容样式名称 // 原型方法 TabChange.NConstructor.prototype = { // 改变li样式 ChangeTab: function(val) { $("." + TabChange.tab_class + " li").each( function(i, vaul) { vaul.className = ""; }); val.className = "tab-cur"; }, // 改变标签内显示内容 ChangeContent: function(val) { $("." + TabChange.content_class + "").each(function(i, vaul) { vaul.style.display = "none"; }); val.style.display = "block"; }, // 初始化标签 InitTab: function() { // 得到样式名称为tab-hd集合并循环 var tabs = $("." + TabChange.content_class); $("." + this.className + " li").each( function(i, val) { // 给每一个li加入mouseover事件 $(val).bind({ mouseover: function() { TabChange.NConstructor.prototype.ChangeTab(val); TabChange.NConstructor.prototype.ChangeContent(tabs[i]); } } ); } ); } }
