Monthly Archives: 八月 2011

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 javascript, 整站ajax | Permalink | Comment (1)

业界杂谈他山石

作为产品经理的你，洋洋洒洒的整理完产品的功能列表，长舒一口气，看，爷的产品多强大，规划了这么多牛掰闪闪的功能；作为交互设计师的你，头晕眼花的画完产品的原型和流程，暗自窃喜道，看，咱的流程多细致，梳理了那么多特殊情况和可能性；作为视觉设计师的你，设计了好多个华丽丽的界面，你为每一个页面进行了精心的雕琢，期待用户见到每一个页面都竖起大拇指说这个界面真漂亮；作为开发人员的你，搭建完框架之后，发现每个模块都有评审时漏掉的细节，一个模块一个模块的赶进度，导致你精疲力尽力不从心。

其实，在一个产品里，并不是所有的功能都那么重要的，如果产品经理只是交付一个功能列表，而不做需求优先级设定的话，产品可能沦为没有主心骨的产品，交互设计师设计的时候，不确定主要任务是什么；视觉设计师设计的的时候，不确定哪些界面和模块要提供更精致的设计；开发人员开发的时候，不知道哪些功能该设定更高的开发优先级，于是就会形成大家都在搅浆糊的状态，可能因为某些弱弱的分支流程的复杂性，导致开发人员花了大量的时间去攻克难题；可能因为某个不那么重要的设置界面中，UI增加了复杂的转场效果，导致开发人员搞到头破血流；可能因为开发人员捡着简单的功能先做，导致复杂的重要功能到最后才被草草攻克，一堆bug。别在抱怨各个角色不给力什么的了，想想自己的需求的分析是否到位，是否给你的需求排排等级，哪些对解决产品的商业价值+用户价值有最大的帮助，优先实现它，不重要的，不着急的，可以次优先级实现。

产品功能就像镜头里的花，如果你的镜头里，全是花，会因为全是亮点而变得没有亮点；如果你的镜头里，聚焦于一朵最娇艳的话，亮点就轻松浮现了。但有时候，说不做什么比说做什么还要难。必须每次改版，都上一些新功能，才能让用户知道我们在持续改进，才能让老板知道我们的团队充满战斗力。针对这些要上的功能（或来源于客户，或来源于老板，或来源于自己突发奇想），如果你经过了反复的调研，结论是做的意义不大，你甚至都不敢汇报，还是要硬着头皮上新功能。直到程序底层架构出了大问题，才不得不停下来做代码重构。

“People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying ‘no’ to 1,000 things. ——Steve Jobs

是的，不得不说，乔布斯是一个睿智的产品经理，他眼光独到，敢于取舍，会为了一个产品秘密研发几年，终于厚积薄发。国内环境不太一样，是非成败，瞬息万变，没有一个老板乐意让团队研发那么久，下那么大赌注在一款产品上。他们希望马上看到成绩，逼得团队甚至没有太多时间去深入调研，只能找到一些已经被证明可用的模式，Copy to China，虽说有些变态，可更多的是无奈。

即便如此，产品经理仍然可以讲清楚，产品的核心模块、核心功能是什么。就像这样一个金字塔，塔尖上的是最重要的需求，没有这些，就没有产品价值。

而一个交互设计师，则需要在了解清楚主要需求之后，对应分解到主要任务流程，你需要花80%的精力去设计那20%的重要任务流程，而这20%的重要任务流程，又足以解决80%的用户的核心需求。

有两个技巧让你不会劳心劳力又没成绩——1.抓大放小，要精心雕琢主要任务快速完成次要任务；2.从粗到精，不要上来就陷入到细节中去

其实花了这么多笔墨，只是讲了一个简单的道理，学会做减法，学会排优先级，学会抓主要矛盾。但这本身就是一件知易行难的事，还需要在实践中不断磨练。
———-
转自：http://ucdchina.com/snap/10368

Tags 产品设计 | Permalink | Comment (0)

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 javascript | Permalink | Comment (0)

Hello World 业界杂谈

百度技术沙龙

2011 年 08 月 21 日 – 下午 1:44

昨天下午跑去参加的百度技术沙龙，之所以回去，是因为这一期的主题是“全站式ajax应用”，正是自己近半年一直在做的东西—-闭门造车这么久，终于有机会看看别人是怎么做的了。
两场讲座，一个是百度的人在讲自己的一个前端框架，领一个是IBM的的人在讲Dojo。
百度董睿所讲的ER框架(这里)，用来做所谓整站式ajax应用，在前端实现了MVC的分离、url的前进后退、参数的传递、html模版等等，以及DOM操作～～～听他刚开始讲ER框架用途和亮点时，自己突然，第一次有了一种站在了技术最前沿的感觉—-几个月前为空间通讯录做的前端框架，实现的正是这套东西，MVC/url参数传递等的思想方式与ER很类似，不同的是DOM操作是基于jquery的，另外，为了应对页面灵活多变的显示方式，没有使用html模版。
不过听了ER的一些做法，自己还是受了一些启发的，比如url参数传递方式可以更精简，MVC分层可以更清晰，引入html模版降低使用难度和维护成本等等～～～四个小时的公车算是没白坐吧。
另一场关于Dojo的讲座(这里)—-本来主要式冲着这一场去的—-讲的有些泛泛，基本上就是在推广Dojo，感觉没有多少实质性的内容。
第一次参加这种行业内的技术讲座，本来以为会有更权威的人讲解怎么做 “全站式ajax应用”，但实际两位都只是在介绍、推广自己的东西，所以，刚听完的时候感觉有些失望。但后来想了想，这种技术分享，也只能做到什么程度～～～大家只是将自己的实践经验推广给别人，没有所谓的权威，没有绝对的对与错，大家都是探路者。。。