面向对象js--原型模式实例解析

最新推荐文章于 2023-12-09 17:54:22 发布

dicongtan5700

最新推荐文章于 2023-12-09 17:54:22 发布

阅读量66

点赞数

原文链接：http://www.cnblogs.com/limengqiang/archive/2012/07/11/jsprototype.html

版权

首先原型模式是设计模式的一种，它的定义是：用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。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]);
                            }
                        }
                        );
                    }
                 );
     }

 }