J2EE社区

苟有恒,何必三更起五更眠;
最无益,只怕一日曝十日寒.
posts - 241, comments - 318, trackbacks - 0, articles - 16

Javascript设计模式学习系列 一

Posted on 2009-05-16 22:27 xcp 阅读(266) 评论(1)  编辑  收藏 所属分类: Javascript
首先介绍一个网站,我很多书本都是在上面下载的,很好。http://www.freebookspot.in/
我现在学习的书本是:Pro Javascript Design Pattern

首先简单地为优雅的Javascript代码开个头
1.随意的Javascript,有表现力的Javascript
常用Javascript代码:
 1var isIE = (document.all) ? true : false;
 2
 3var $ = function (id) {
 4    return "string" == typeof id ? document.getElementById(id) : id;
 5}
;
 6
 7var Class = {
 8  create: function() {
 9    return function() {
10      this.initialize.apply(this, arguments);
11    }

12  }

13}

14
15var Extend = function(destination, source) {
16    for (var property in source) {
17        destination[property] = source[property];
18    }

19}

20
21var Bind = function(object, fun) {
22    return function() {
23        return fun.apply(object, arguments);
24    }

25}

26
27var Each = function(list, fun){
28    for (var i = 0, len = list.length; i < len; i++{ fun(list[i], i); }
29}
;

我喜欢的定义类的方法:
var MyClass = Class.create();

MyClass.prototype 
=
{
    
//construction function
    initialize : function(para1, para2)
    
{
        
this.property1 = para1;
        
this.property2 = para2;
        
    }
,
    
//public  function
    fun1 : function()
    
{
    }
,
    
    
//private function
    fun2 : function()
    
{
    }

}
;

//call 和 apply的意义与用法

//<input type="text" id="myText"   value="input text">
function Obj(){this.value="对象!";}
var value="global 变量";
function Fun1(){alert(this.value);}

window.Fun1();                                   
//global 变量
Fun1.call(window);                              //global 变量
Fun1.call(document.getElementById('myText'));      //input text
Fun1.call(new Obj());                           //对象!

//call函数和apply方法的第一个参数都是要传入给当前对象的对象,及函数内部的this。后面的参数都是传递给当前对象的参数。
var func=new function(){this.a="func"}
 
var myfunc=function(x){
     
var a="myfunc";
     alert(
this.a);
     alert(x);
 }

 myfunc.call(func,
"var");
 
/*可见分别弹出了func和var。到这里就对call的每个参数的意义有所了解了。

对于apply和call两者在作用上是相同的,但两者在参数上有区别的。
对于第一个参数意义都一样,但对第二个参数:
apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])

同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入
*/


        随意、宽松的表现1:Javascript的弱类型:null, undefined, boolean, number, String, Object, 特别的对象Array
        随意、宽松的表现2:匿名函数
//匿名函数的调用方法
(function(para1,para2)
{
    
return para1 + para2;
}
)(1,3);

        Javascript对象类型的不定性、可变性,即建造的类可以动态改变,即使已经声明的对象也能随改变的类而改变,如下:
/* Class Person. */
function Person(name, age) {
this.name = name;
this.age = age;
}

Person.prototype 
= {
getName: 
function() {
return this.name;
}
,
getAge: 
function() {
return this.age;
}

}

/* Instantiate the class. */
var alice = new Person('Alice', 93);
var bill = new Person('Bill', 30);

/* Modify the class. */
Person.prototype.getGreeting 
= function() {
return 'Hi ' + this.getName() + '!';
}
;

/* Modify a specific instance. */
alice.displayGreeting 
= function() {
alert(
this.getGreeting());
}
与类的不定性相关的是,Javascript语言的另一特点,反射机制,即可以在运行时检测类所具有的属性和方法。

运用设计模式的三大原因:
可维护性
沟通交流性
性能追求
不使用设计模式的两大原因:
复杂性
性能追求



名称: ♪4C.ESL | .↗Evon
口号: 遇到新问题♪先要寻找一个方案乄而不是创造一个方案こ
mail: 联系我


Feedback

# re: Javascript设计模式学习系列 一  回复  更多评论   

2009-05-30 18:11 by famingyuan
哥们儿,只能说你是个强人!佩服!

只有注册用户登录后才能发表评论。


网站导航: