javascript modle模式的多种方式应用

sdouara

2014-01-12

// jquery-eq.js
一、
var YAHOO = (function($, my){
   	my.privateAddTopic = function (data) {
       	$('ul > li').live('mousedown', function() {
			console.log($(this).html() + " down");
		})
		$('ul > li').live('mouseup', function() {
			console.log($(this).html() + " up");
		});
		alert(data);
   	};
   	my.Name = function (privateName) {
   		return privateName;
   	};
   	my.privateV = 'private';
   	return my;
})(jQuery, YAHOO || {});

二、
var YAHOO = (function($, YAHOO){
	return {
    	privateAddTopic: function (data) {
	       	$('ul > li').live('mousedown', function() {
				console.log($(this).html() + " down");
			})
			$('ul > li').live('mouseup', function() {
				console.log($(this).html() + " up");
			});
			alert(data);
    	},
    	Name: function (privateName) {
    		return privateName;
    	},
    	privateV: 'private'
   }
})(jQuery, YAHOO);

三、
var YAHOO = (function($, YAHOO){
	var my = {}, privateName = "博客园";

    function privateAddTopic(data) {
       	$('ul > li').live('mousedown', function() {
			console.log($(this).html() + " down");
		})
		$('ul > li').live('mouseup', function() {
			console.log($(this).html() + " up");
		});
		
		$('ul > li').live('click', function() {
			var ts = $(this);
			var index = ts.index();
			var html = ts.html();
			if (0 == index) {
				ts.addClass('ts')
			} else if (1 == index) {
				ts.addClass('ts')
			} else if (2 == index) {
				ts.addClass('ts')
			} else if (3 == index) {
				ts.addClass('ts')
			}
		});
		$('ul > li').live('mouseout', function() {
			var ts = $(this);
			var index = ts.index();
			var html = ts.html();
			if (0 == index) {
				ts.removeClass('ts')
			} else if (1 == index) {
				ts.removeClass('ts')
			} else if (2 == index) {
				ts.removeClass('ts')
			} else if (3 == index) {
				ts.removeClass('ts')
			}
		});
    }

    my.Name = privateName;
    my.AddTopic = function (data) {
        privateAddTopic(data);
    };

    return my;
})(jQuery, YAHOO);

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'jquery-eq.jsp' starting page</title>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
		ul > li {
		    background-color: #FCFEFC;
		    border: 1px solid #F5F5F5;
		    float: left;
		    list-style: none outside none;
		    margin: 10px;
		    padding: 5px;
		}
		ul > li:hover {
		    border: 1px solid gray;
		    border-radius: 5px;
		}
		
		.ts {
		 	-moz-transform: rotate(45deg);
		    -webkit-transform: rotate(45deg);
		    -o-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		    transform: rotate(45deg);
		 }
	
	</style>
	<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="js/jquery-eq.js"></script>
	<script type="text/javascript">
		YAHOO.privateAddTopic(YAHOO.Name('private verial'));
		alert(YAHOO.privateV);
	</script>
  </head>
  <body>
    <ul>
    	<li>basketball</li>
    	<li>football</li>
    	<li>one</li>
    	<li>two</li>
    </ul>
    <div id="eee"></div>
  </body>
</html>

javascript