Tag Archives: javascript

Hello World

js类如何自动加载组件

2011 年 08 月 31 日 – 下午 3:17

当前端js代码越来越多越来越复杂时，按逻辑分层就会变得势在必行，否则代码会逐渐变乱，维护成本就会越来越高。之前曾做个一个复杂的模块，大部分逻辑都是在前端实现的，其中有一个两千多行的js文件，ajax数据访问、业务逻辑、html生成全都搅在一起…..每次改动都是一场噩梦…..往事不堪回首呀

扯远了，当对代码分层后，各层之间的互相调用也会是一个问题，本文介绍的方法，仿照cakephp的方式，提供了一种为controller层自动添加component组件的思路

首先，是Controller的抽象类，供所有的Controller继承，它的主要功能是为controller的实现类添加它们所需要的component等组件

controller = {};
controller.AbstractController = function(){
	function AbstractController(){
		if(this.components.length > 0){
			for(var i = 0; i < this.components.length; i++){
				var compName = this.components[i];
				if(component[compName]){
					this[compName] = new component[compName]();
				}
			}
		}
	}
	return AbstractController;
}();

下面视一个controller的一个实现，通过this.components定义自己需要加载的component,然后通过call方式继承AbstractController,让AbstractController完成component的加载。然后在下面的方法中，通过this.xxxComponent的方式调用该component

controller.ListController = function(){
	function ListController(){
		this.components = ['newsComponent'];
		controller.AbstractController.call(this);
	}
	ListController.prototype = {
		listNews : function(){
			var news = this.newsComponent.getNewsList();
			//TODO:...
		}
	}
 
	return ListController;
}();

newsComponent

component = {};
component.newsComponent = function(){
	function NewsComponent(){
 
	}
	NewsComponent.prototype = {
		getNewsList : function(){
			alert('call function : newsComponent.getNewsList()');
		}
	}
	return NewsComponent;
}();

测试

var listCont = new controller.ListController();
listCont.listNews();//alert

另外，对于比较大的前端应用，可以构造一个组件池，在实例化一个component后，将其放到组件池内，下次其它controller再要使用这个component时，直接从组件池中拿出来用就行了，可以省去很多资源

Tags , | Permalink | Comment (1)
Hello World

使用call方法实现多继承

2011 年 08 月 23 日 – 上午 11:37

call方法是将一个对象的方法在另一个对象的上下文环境中执行，用它可以实现javascript的多继承：

function C1(){
    this.sub = function(a,b){
        alert(a-b);
    }
}
function C2(){
    this.add = function(a,b){
        alert(a+b);
    }
}
function C12(){
	C1.call(this);
	C2.call(this);
}

这样，C12就具有了sub和add方法。

Tags | Permalink | Comment (0)
Hello World

js类，构造函数内添加方法，与prototype添加方法的时序差异

2011 年 05 月 19 日 – 下午 12:35

看下面的例子：

	$('button.b').click(function(){
		var d = new O1();
		d.ooo();
		d.oo();
		function O1(){
			this.ooo = function(){
				alert('sss');
			}
		}
		O1.prototype.oo = function(){
			alert('ss');
		}
	});

点击按钮，首先会弹出“sss”，标识ooo()执行了，但是，之后会报错：”d.oo is not a function“
具体原因，我猜是这样：
再new O1的对象的时候，回去找O1的构造函数“function O1()”，然后执行这个构造函数的时候，将ooo()方法添加给O1类，但这时并不会执行构造函数之外的东西
而“O1.prototype.oo”会按照顺序，执行完前面的代码后，再添加oo()

Tags | Permalink | Comment (1)
Hello World

Javascript 的private, public 属性和方法

2011 年 04 月 20 日 – 上午 1:58
         function Base() {
                // private attribute
                var i = 2;
 
                // public attribute
                this.k = 3;
 
                // private method
                function setI(j) {
                    i = j;
                }
 
                // public method
                this.resetI = function() {
                    setI(0);
                };
 
 
                // public method
                this.getI = function() {
                    return i;
                }
            }
 
            // public attribute
            Base.prototype.j = 1;
 
            // static attribute
            Base.l = 4;
 
            // public method
            Base.prototype.getJ = function() {
                return this.j;
            };
 
            // static method
            Base.setL = function(m) {
                Base.l = m;
            }

转自：http://sinkiangcai.blog.163.com/blog/static/77664420084702020485/

Tags | Permalink | Comment (0)
Hello World

js取数组并集

2011 年 04 月 13 日 – 上午 9:50
/**
 * a1/a2为要合并的两个数组
 */
function arrIntersection(a1, a2){
    var ao = {};
    for(var i = a1.length - 1; i &gt;= 0 ; i--){
        ao[a1[i]] = true;
    }
    var ai = a1.concat([]);//防止a1被改变
    for(i = 0; i &lt; a2.length; i++){
        if(!ao[a2[i]]){
            ai.push(a2[i]);
        }
    }
    return ai;
}

Tags | Permalink | Comment (1)
Hello World

javascript，少写“var”造成的面向对象的bug

2011 年 03 月 27 日 – 下午 1:30

下面这段代码，如果按照纯面向对象习惯的理解，当点击test按钮时，应该会alert一个“pp11”，和一个“pp22”，然而，实际情况时，会连续alert两个“pp22”～～

$(document).ready(function(){
  var t1 = new TST('pp11');
  var t2 = new TST('pp22');
});
//类
function TST(pars){
  this.p1 = pars;
  this_ = this;
  $('button.test').click(function(){
    alert(this_.p1);
  });
}

出现这种情况的原因，我想应该是出在this的中间变量“this_”上：创建t1，t2对象时，test按钮被绑定了两次click事件，传入的参数都是this_，但创建t2时的this_覆盖了t1的this_，所以，再点击按钮时，实际传入的是两个t2

var this_ = this;

上面的一个小小的改动，证实了我的猜测：this_前面加了var以后，this_便不会相互覆盖，程序正常了！

Tags | Permalink | Comments (2)
Hello World 他山石

javascript 刷新页面的方法

2011 年 03 月 22 日 – 下午 3:06

1. window.location.reload

<script language=”JavaScript”>
function myrefresh(){
window.location.reload();
}
setTimeout(‘myrefresh()’,1000); //指定1秒刷新一次
</script>

2. 刷新包含该框架的页面用
<script language=JavaScript>
parent.location.reload();
</script>

3. 子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
</script>
(　或　<a href=”javascript:opener.location.reload()”>刷新</a>   )

4.  刷新另一个框架的页面用
<script language=JavaScript>
parent.otherFrameID.location.reload();
</script>

5. 使用meta，自动定时刷新
<meta http-equiv=”refresh” content=”20″>
其中20指每隔20秒刷新一次页面.

参考：http://www.cnblogs.com/lmjob/archive/2008/08/11/1265164.html

Tags | Permalink | Comment (0)
Hello World

javascript对象如何删除属性和方法

2011 年 02 月 23 日 – 上午 2:45

通过下面的代码，可以给user对象添加／修改属性和方法

user.name=”tom”;
user.alert=function(){
alert(“hello,”+this.name);
}

如果要删除，只需将其设为undefined：

user.name=undefined;
user.alert=undefined;

－－－－－－－－－自由的js

Tags | Permalink | Comment (0)

« 上一页

« 上一页