Some print.
Some print.
标签归档: js Page 1 of 3

javascript的面向对象

By19.Published on2009-01-7.

JS的面向对象.

所谓JS面向对象当然不会像JAVA，AS3那样的完全面向对象语言所具有继承、多态，以及接口这样的概念。这里的面向对象只是创建JS“对象”后，调用“对象”中的方法。比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<html> 
<head> 
<title>javascript_oop</title> 
<script type="text/javascript"> 
var Test = function() {
 
	// 私有属性
	var key;
 
	// 私有方法
	function private1() {
		alert ("测试私有方法private1");
	}
	//测试私有
	private1();
 
	return {
		// 公用属性
		p : 1,
		// 公用方法
		getkey : function() {
			return this.key;
		},
		setkey : function(key) {
			this.key = key;
		}
	};
};
 
// 测试公用
var t = new Test();
t.setkey(100);
alert('调用公用属性：' + t.p);
alert('调用公用方法：' + t.getkey());
 
function t1() {
t.private1();
}
</script> 
</head> 
<body> 
<a href="javascript:t1()">测试调用私有方法</a> 
</body> 
</html>

首先创建的var Test = function() 可以看做一个类似java的类，类名就是Test。之后创建对象var t = new Test();的时候就执行了Test = 后面的匿名函数function() {}（就像JAVA的构造函数一样），里面return以外的部分类似JAVA中private私有的方法和属性，至于return里面就是公用的public方法和属性。其实到这就很明白了，就是return回来一个json当做公用，从而来达到类似“对象”的效果。

其中上面的js在运行过程中,第一次alert就是在创建对象的时候执行了类似JAVA的构造函数的匿名函数function() {}，测试了私有方法的调用。之后的两次alert测试了公用属性和公用方法，如果你点击“测试调用私有方法”来调用对象“私有”的方法就会报错，因为这是不被允许的。

(全文 …)

{ 3 comments } { Tags: }

jQuery简单实现WordPress的Ajax留言

By19.Published on2007-11-2.

利用jQuery插件(jQueryForm)来超级简单实现WordPress的ajax留言.

也有很多类似的WordPress插件，以前也用过PHOTOTYPE的AJAX留言插件，但是根据自己站的情况来做的话会省去很多不必要的代码，而且安装太多插件站点变慢也是肯定的。

jQueryForm：http://www.malsup.com/jquery/form/

ajax留言用到jQueryForm插件，jQueryForm是jQuery提交整个表单最好用的插件之一，下面一个例子（拿WP的留言表单举例）：

1
2
3
4
5
6
7
8

<form action="***/***.php" method="post" id="commentform">
<input type="text" name="author" id="author" value="" tabindex="1"/>
<input type="text" name="email" id="email" value="" tabindex="2"/>
<input type="text" name="url" id="url" value="" tabindex="3" />
<textarea name="comment" id="comment" tabindex="4"></textarea>
<input name="submit" type="submit" id="submit" tabindex="5" value="(Submit comment)"/>
<input type="hidden" name="comment_post_ID" value="postid" />
</form>

之后下面加入这段JS：

1
2
3
4
5
6
7
8
9
10

$('#commentform #submit').click(function() {
   $('#commentform').ajaxForm(function() { 
   	success: function(result) {
    alert("Thank you for your comment!"); 
	},
	error : function(result) { 
	alert(result.responseText); 
	}
    }); 
}

则在SUBMIT的时候便会根据你FORM中的ACTION和METHOD来自动完成AJAX的操作，SUCCESS是提交成功后要做的，ERROR则是发生错误返回的错误页面，result.responseText得到错误信息（WP中的WP_DIE()）。

在WP中我具体是这样写的，commentform提交时会显示一个DIV提示“等待”或者“留言成功”以及“提交错误”，留言成功后便会在适当位置把留言的内容输出出来：

页面适当位置加入这段HTML，用来显示提交后的结果：

1
2
3
4
5
6
7
8
9
10
11
12
13

 
<!--提交成功后显示当前留言内容以及提交错误显示错误信息-->
<div class="entry-commentlist" id="comments-ajax-you" style="display:none">
<ol class="commentlist">
<li class="reply" onMouseOver="jQuery(this).css({background:' #FFFFFF ', border:'1px solid #ccd0d6'})"  onMouseOut="jQuery(this).css({background:' #ECEEF0 ', border:'1px solid #cdd1d1'})" id="comment-ajax-id">
<div class="commentcount">YOU.</div>
<cite id="output-commenttext-name"></cite>
<small class="commentmetadata">This...Your comment...</small>
<br />
<div id="output-commenttext-ajax"><p></p></div>
</li>
</ol>
</div>

页面适当位置加入这段，用来显示提交的过程：

1

<div id="output-comment-ajax"   class="output-this"></div>

下面的JS是调用jQueryForm插件的函数完成具体的AJAX提交了：

这里当提交发生错误时（比如未填写内容或者EMAIL格式错误，留言重复等等）返回的错误信息result.responseText由于WP的WP_DIE()返回的是一个页面，所以这里我用截字符串的方法取到的这个正确的返回信息（或者用别的方法，总之只要正确取到抛出的错误就行）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

jQuery.noConflict();
jQuery('#commentform #submit').click(function() {
jQuery('#output-comment-ajax').fadeTo(1,1).html("<b>Waiting</b> - <b>等待.提交中......</b> - GL`LL.").toggle("slow");
jQuery('#comments-ajax-you').hide("slow");
var commentauthor = jQuery('#commentform #author').val();
var commentvalue = jQuery('#commentform textarea').val();
jQuery("#commentform").ajaxForm({
success: function(result) {
 	jQuery('#output-comment-ajax').html("<b>Thank you for your comment!</b> - <b>提交成功.多谢留言......</b> - GL`LL.").fadeTo(1,1).fadeTo(4000,0, function(){jQuery('#output-comment-ajax').toggle("slow")}); 
	jQuery('#comments-ajax-you').slideDown("slow"); 
	jQuery('#comments-ajax-you .commentcount').empty().html("YOU!!");
	jQuery('#comments-ajax-you #output-commenttext-name').empty().html(commentauthor);
	jQuery('#comments-ajax-you #output-commenttext-ajax p').empty().html(commentvalue);
},
error : function(result) {
 	jQuery('#output-comment-ajax').html("<b>Error!</b> - <b>提交留言发生错误......</b> - GL`LL.").fadeTo(1,1).fadeTo(4000,0, function(){jQuery('#output-comment-ajax').toggle("slow")}); 
	jQuery('#comments-ajax-you').slideDown("slow"); 
	jQuery('#comments-ajax-you .commentcount').empty().html("ERROR!!");
	jQuery('#comments-ajax-you #output-commenttext-name').empty().html(commentauthor);
	jQuery('#comments-ajax-you #output-commenttext-ajax p').empty().text(result.responseText);
	var temp = jQuery('#comments-ajax-you #output-commenttext-ajax p').text();
	if (temp.indexOf("error-page") > -1) {
	temp = temp.split("<p>")[1].split("</p>")[0];
	jQuery('#comments-ajax-you #output-commenttext-ajax p').empty().html("<h2>"+temp+"</h2>");
	}
}
}); 
});

大体过程就是这样。这里提交成功后只是简单的把页面上的FORM相关内容再显示了一遍，很多插件都是写了一个类似wp-comments-post的PHP就是为了把留言的内容在从新ECHO出来，真觉得没这个必要，这内容页面上不都有么 – 。-。

(全文 …)

{ 51 comments } { Tags: , , , }
Page 1 of 3123