Javascript单例模式
ExtJS 设计模式 之一 (单例)
Extjs 发展至今,传承了YUI的伟大精髓, YUI得到了Douglas Crockford(任职于 Yahoo! 的一名 JavaScript 传道者和架构师,他是全球最有造诣的 JavaScript 语言专家之一,Blog:http://www.crockford.com/) 大师的赞同,而ExtJS也是将YUI的模式脚本编程学习使用的淋漓尽致,并且还给它做了几套华丽的CSS嫁衣…., 而在ExtJS越发耀眼的同时,我等初学者在使用ExtJs的时候也是晕呼其呼。(好在2.0 推出之后,官方的文档,像雨后春笋一样,开始覆盖到方方面面。)
其实,拨开ExtJS华丽的外衣,翻阅其体内精致的代码,不难发现一些我们耳熟能详的设计模式。
在早期1.0,1.1的好多例子中,我们会看到这样风格的代码。
var Oo= function(){
var x;
var y;
return{
a:function(){
...
},
b:function(){
...
}
}
}();
咂一看,不是我们能理解的方式, function(){}(), 是何意?。
//()在这里,意味着方法已经执行,并且return里面的已经产生, 这样可能很难理解,那等同与执行 function oo(){},这样是否好理解些了?
BTW :这里要引入JavaScript的一个高级概念,“闭包”。(具体内容参考《JavaScript The Definitve Guid,5th Eddion》Section 8.8 –Function Scope and Closures ,也是被Douglas Crockford推荐的为数不多的两本书籍之一。), 当然不急着去翻,先把我的废话看完。
好了,看这种使用别扭的使用方式, 而这种方式,在我们的页面,或者其他类中, 调用Oo的a方法的时候,形式如下
Ext.onReady(Oo.a); 对,正是这样的一种JS编程方式,被Douglas Crockford作为JS的一种单例的实现, 大师还把它叫做“Module Pattern”,
好,如果我们不用所谓单例呢?, 就看看传统的对象方式,同学们肯定在Pototype盛行的时代,已经弄的一清二楚。
0o = function(){
this.x;
this.y;
}
Oo.prototype = {
a:function(){
this.x = 100;
},
b:function(){
this.y = 200;
}
}
//调用方式
Ext.onReady(function(){
var o = new Oo();
0.a();
});
再来,假使是个初学
相关文档:
Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器):
[注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后边附录。]
1、在DOM中,直接用onXXX="fun();"进行绑定
2、在Javascript代码中用 DOM对象.onXXX=fun 进行绑定
3、用 DOM对象.attach ......
// <!CDATA[
//define
var xmlhttp;
var value=new Array();
var variable=new Array();
//Show Response MSG.
function handleStateChange()
{
var h=document.getElementById("Label1");
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
alert(xmlhttp. ......
引言
我们已经探讨过了必要的程序设计核心概念。现在是时候从细节中退出来,并高瞻远瞩地来看看你可以利用 JavaScript 来做些什么了——为什么你要花时间来学习这样一门复杂的功课,以及如何将其用到你的网页上?
过去的几年对我来说是一段有趣的时间,因为在这段时间里 JavaScript 的使用从一种边缘知识成为了 ......
• 小写金额与大写金额联动
<mce:script language="JavaScript"><!--
function daxie()
{
this.values = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
this.digits = ["", "拾", "佰", "仟"];
}
function daxie.prototype.getdx(num)
{
if(isNaN(num)) return "";
var number = ......
/*样式*/
<style type="text/css">
td{font-size:12px;}
.item{text-decoration:none;width:100%;height:100%; line-height:22px;cursor:default;color:Black;vertical-align:middle}
.staticTab{cursor:default;height:22px}
  ......