Author Archives: jkl

锁定textarea

html的textarea标签,在火狐、safari等现代浏览器里,右下角会出现一个可拖动的标示,让用户可以修改编辑区域的大小,用起来很方便。但有些时候,我们并不希望用户可以改变这个textarea的大小,比如下图,textarea变大后,整个个页面布局都乱了:

这种时候,我们希望可以锁住这个textarea,如何锁住哪?

很简单,只需要一个css属性:resize:none;

——————–

查了一下文档,resize可以设置如下的属性:

none:UserAgent没提供尺寸调整机制,用户不能操纵机制调节元素的尺寸。
both:UserAgent提供双向尺寸调整机制,让用户可以调节元素的宽度和高度。
horizontal:UserAgent提供单向水平尺寸调整机制,让用户可以调节元素的宽度。
vertical:UserAgent提供单向垂直尺寸调整机制,让用户可以调节元素的高度。
inherit:默认继承。
 

一页一世界

一个多月前,去百度技术沙龙听了全站式ajax(er)框架的介绍后,曾觉得和自己之前做的东西差不多,还在日志里结尾处豪迈的说了一句“大家都是探路者”,可是,后来看了er框架的源码后,自己就只有自惭形秽了~~虽然基本的思路差不多,但是除了这个“基本思路”外,人家都要比咱完善的多,特别是在代码的写法上,完全是成熟的js的写法,可是回顾我自己之前做的东西,还处在用java的思路写js的水平上;另外就是mvc模式的应用上,层次分的也不清晰,和业务逻辑结合的太紧密,让别人只有在十分了解框架的原理后,才能使用他,这样用起来很费劲。

趁着十一假期的时间,结合这之前的思路,将这个框架再次整理了一遍,并给他去了一个名字:jLeaf。leaf,叶子,取“页”与“叶”的谐音。

目前框架基本功能已经整理完成,不过800多行代码(和er的十万行代码差远了),但已经是一个相对比较完善的前端mvc框架了:

1.  仿照cakephp,分成view/controller/component/db/util五种组件,使用者只要根据业务逻辑去实现这五种组件,不需要关注其他的部分

2.  仿照spring添加了bean池;组件内调用其他组件时,直接“this.xxx”就可以了

3.  添加了filter模块,使用这可以添加beforeFilter和afterFilter,框架本身和业务逻辑是完全分离的,使用filter完成之前使用header完成的功能

4.  添加了debug模块,可以将log和error显示到页面上

本来想利用它给wp做一个“单页模式”,但可惜时间有限,只做了分页,等以后做好了再拿给大家看吧~~

 

[转]吃货必知的入门级调料

葱蒜荤菜也,大蒜和大葱

蒜香排骨、蒜泥茄子、蒜薹炒肉、蒜蓉西兰花……没错,首先要介绍的入门级调料,正是纵贯大江南北,男女老少通吃的大蒜。

http://www.jiangkl.com/wp-content/uploads/2011/09/1.jpeg
【大蒜对食物的渗透力和在人群中的影响力,从“蒜你狠”的涨价风波中可见一斑。生吃、烤吃、煮着吃,有的人无蒜不欢,有的人却对大蒜的气味唯恐避之不及……】

在汇通八方的厨房调料清单中,蒜葱已盘踞中土庖厨数千年。尽管大蒜带着刺激性气味,辛辣中国两千年以上,但土里土气的它却是正宗的外来货,追溯原产地,还要来到中亚、西亚或欧洲一带。

虽然现在大蒜在我国的栽培几乎无处不可,但不管哪,最为人熟知的都是那个藏在地表之下的蒜头,也就是蒜的“鳞茎”。作为葱属植物的重要特征,要说清“鳞茎是变态了的茎”这件事儿还真有点儿困难。不妨这么想象:将草本植物的茎垂直压扁,其上的叶子必然会随着间距的极度缩小而紧紧包覆,再将这些包覆的叶子肉质化,一个典型的鳞茎就形成了,比如主要由层层变态叶组成的洋葱头。别看鳞茎是一种压扁的“变态茎”,但茎顶端的顶芽和茎叶结合处的腋芽可是样样俱全,而且每个芽都可能发育成为一个完整的植株——回到蒜头的身上,那一个个的蒜瓣,就正是鳞茎中肉质化的侧芽。

http://www.jiangkl.com/wp-content/uploads/2011/09/2.jpeg
【大蒜(Allium sativum),百合科Liliacea 葱属Allium,多年生草本,栽培历史悠久,幼苗、花葶和鳞茎均供蔬食。1.大蒜鳞茎 2. 蒜薹 3.大蒜植株】

除了鳞茎,大蒜的地上部分也还颇有几个常在厨房中出没的角色,比如,正常栽种得到的茎叶(青蒜)、黑暗条件下培育的黄化茎叶(蒜黄)以及将近花期时长出的花葶,也就是蒜薹(tái)。不过这几种食材的商品名在不同地区的称呼比较混乱,作为一个自然控,不妨尝试在交易的时候说“来半斤黄化大蒜”,或问“这捆大蒜花葶怎么卖?”嗯,绝对不会搞混。

《玉篇•艹部》:“葱,荤菜也。” 《闲居赋》:“菜则葱韭蒜芋,青笋紫姜。”

说完大蒜,另一种使用同样普遍的调味品大葱就该闪亮登场了。

http://www.jiangkl.com/wp-content/uploads/2011/09/3.jpeg
【大葱炒鸡蛋、大葱蘸酱,这应该是大葱最为耀眼的亮相方式吧。在大葱价格上扬的时候,由于很多店家舍不得放大葱,于是“大葱炒鸡蛋”就变成了“鸡蛋炒大葱”……】

也许有人注意到了,本文介绍葱蒜的时候用的都是“大葱”、“大蒜”的称呼,但这可不是为了突出与喝咖啡者不同的乡土味儿,而真的是为了避免混乱。葱属植物亲兄弟500余种,仅国内就有110余种,可食者更是难以统计,《闲居赋》中的葱、韭、蒜皆在其列,因此俗谓混淆之事在所难免。事实上,这也正说明了为每一种植物取唯一拉丁学名的重要性。大蒜由张骞自西域引入,本名为“葫”(hú),而中国本来也有原生的蒜,那就是小蒜(Allium macrostemon),估计是后来由于不够霸气,被夺走了名字。

而论及葱,则更加说不清了——“火葱(Allium cepiforme)在南方普遍栽培,常称‘小葱’以别大葱”;“野葱(Allium chrysanthum)广布于青藏高原至华中,葱岭或由之得名”;“北葱(Allium schoenoprasum)北方区广布,欧洲食用”……以至于《汉语大字典》中对于“葱”字的解释只能说是“葱类植物”,与此相对的是,蒜茴桂椒等却都有具体一至数种的描述。大葱本身的野生起源现已不可考,只能“推测”为仍野生于北亚的阿尔泰葱(Allium altaicum)。

http://www.jiangkl.com/wp-content/uploads/2011/09/4.jpeg
【大葱(Allium fistulosum),百合科Liliaceae 葱属Allium,多年生草本,全国各地广泛栽培,国外也有栽培,做蔬菜食用。】

不过,植物分类本就是参杂主观成分的一项工作,此“种”与彼“种”相比,其差别若按其他两种间的区别程度来看,也许足以归并成一种,或再拆为数种。但要知道,植物并非为人类而生存,所以也不会按照人的标准一种一种演化分明。这点还是古人想得明白,无论是《玉篇》中的葱还是《说文》中的蒜,一句话三个字就足以形容何为葱蒜了——不过“荤菜也”。

果作干与辣,胡椒和花椒

在当代煲汤界,胡椒虽然是作用举足轻重的香料,却也并非身价不菲之物。但在古代欧洲,这种可作为香料和调味料使用的物质,却由于罕见和极受欢迎变得异常昂贵,只有极富阶层才能够买到。

http://www.jiangkl.com/wp-content/uploads/2011/09/5.jpeg
【胡椒猪肚汤和黑椒牛柳,这两道胡椒作料的代表菜应该早已名声在外了吧!】

在调料植物里头,如果“洋气”将南洋雨林的湿热算在内的话,那么不管是名字还是身世,胡椒都绝对算得上“洋气”十足。别看“胡”本来是中土针对北方异族的称呼,但原产胡椒的地方却在南亚和东南亚热带地区,正好位于相反的国门之南。

http://www.jiangkl.com/wp-content/uploads/2011/09/6.jpeg【胡椒(Piper nigrum),胡椒科Piperaceae 胡椒属Piper,木质攀援藤本 1.胡椒调料粉末 2.捣鼓和研磨胡椒的传统武器 3.胡椒植物】

胡椒的分布区属于热带亚洲,全年都有着稳定的高温、充沛的降水,以及随即而来的、茂密且高大的植被——这里正是世界三大热带雨林区之一。为了适应雨林内的高度荫蔽,胡椒在这样的环境里进化成了善于取巧的攀援植物,通过依附更高更直的其他树木来获得更多的光照。所以我们如果去到胡椒的栽培区,就会见到取代沟沟垄垄的,是一排排木石之属所制成的桩桩柱柱,用以供胡椒的气根攀附。而在油亮的胡椒叶丛之中,那一串串的果实就是我们所食用的胡椒粉原料。

http://www.jiangkl.com/wp-content/uploads/2011/09/7.jpeg
【原料浆果是否成熟,是否去皮等制作工序的差异,使胡椒成品的颜色变得五花八门。】

与胡椒粉呛鼻的印象迥异,胡椒的果子们属于肉果大类中多汁的浆果类果实,而且成熟后会呈现浓艳纯正的鲜红色。我们所见到胡椒粉的“干燥”和“无彩”则是由于其制作过程中包括了干燥和去皮等过程,早已看不出胡椒果实的原样。但在亚洲部分地区,还是可以见到通过不同加工方法得到的绿胡椒和红胡椒。

《尔雅•释木》:“檓,大椒。”郭璞注:“今椒树丛生实大者,名为檓。” 《后汉书•第五伦传》:“伏见虎贲中郎将窦宪,椒房之亲……”

既然胡椒是“番邦之椒”的意思,那么必然有一种早就被利用的“土椒”与之对应了,难道是辣椒(Capsicum annuum)?不然,辣椒产于美洲,入驻中国的时间比胡椒还要晚得多。于是,答案明显地指向了辣椒的搭档——花椒。

http://www.jiangkl.com/wp-content/uploads/2011/09/8.jpeg
【不管是火锅,还是花椒鱼片、花椒鸡之类的菜品,在川菜中,花椒可是享有“川菜灵魂与幽物”的美誉。】

花椒不仅在当下凭借麻辣的口感辅助川菜横行全国,它的果实早在数千年前就已为民熟知和使用。然而尽管都是干巴巴的果实产物,花椒粒却和后天干燥的胡椒粉不同,生来就没有什么汁水,于是花椒所属的“蓇葖果”(一种每个果子仅由一枚心皮形成的果实类型)也就被归入了干果大类。

http://www.jiangkl.com/wp-content/uploads/2011/09/9.jpeg
【花椒(Zanthoxylum bungeanum),芸香科Rutaceae 花椒属Zanthoxylum,落叶小乔木 1.川菜中,花椒和辣椒可算是生死不离 2.花椒调料 3.花椒植物】

“花椒”一名最早的文字记载出自《诗•唐风•椒聊》:“椒聊之实,蕃衍盈升。”由于花椒每颗结实树上都缀满海量鲜红的果子,在擅长联想的国人眼中,花椒被解读成生殖能力旺盛的象征,加之还能“避邪”(估计是指驱虫防腐的功效),所以花椒在古时常被用来填垫墓室内棺或涂糊宫女住房的墙壁,以取“多子多孙”之意,后来宫中女眷的住房也因此被称为“椒房”。 据此,我们可以推断出开篇《后汉书》中“椒房之亲”的这位窦宪大人应当是一名外戚。

—————

转自:http://www.guokr.com/article/62322/

[转]yum安装LAMP

1. 安装Apahce, PHP, MySQL以及php连接mysql库组件。
#yum -y install httpd php mysql mysql-server php-mysql
yum会到指定的服务器(mirror:163.com服务器)下载对应的软件版本,并自动处理依赖关系,并进行安装。

2. 安装apache扩展
#yum -y install httpd-manual mod_ssl mod_perl mod_auth_mysql
让apache更好的支持其他的软件。

3. 安装php的扩展
#yum -y install php-gd php-xml php-mbstring php-ldap php-pear php-xmlrpc
apache本身并不支持php文件,要安装对应的php软件,然后进行http.conf配置;让apache能解析.php文件。

4. 安装MySQL的扩展
#yum -y install mysql-connector-odbc mysql-devel libdbi-dbd-mysql
跟好的实现mysql的功能。

5. 配置开机启动服务
#/sbin/chkconfig httpd on [设置apache服务器httpd服务开机启动]
#/sbin/service httpd start [启动httpd服务,与开机启动无关]
#/sbin/service mysqld start [启动mysqld服务,与开机启动无关]

6. 简单配置文件:
apache的配置文件是/etc/httpd/conf下
modules放在/usr/lib/httpd下
php的配置文件在/etc/php.d/下 和/etc/php.ini
php的modules放在/usr/lib/php/modules下

7. 安装Tomcat5
#yum -y install tomcat5 tomcat5-webapps tomcat5-admin-webapps
安装Tomcat5安装包和对应的依赖关系包

8. 启动Tomcat5
#service tomcat5 start
#chkconfig tomcat5 on

9. 在浏览器输入http://你的IP:8080/,可以看到Apache SoftWare Foundation页,如果看不到,请确认是否是防火墙问题
看到一个猫头 ——————>tomcat5安装成功

10. Apache与Tomcat整合
如果网站需同时整合Apache与Tomcat可以使用JK或者Proxy方式
使用VI编辑proxy_ajp.conf文件
#vi /etc/httpd/conf.d/proxy_ajp.conf
输入以下内容
ProxyPass /tomcat/ ajp://localhost:8009/
存储文件后,重启Apache

#service httpd restart

在浏览器输入http://你的IP/tomcat/,可以看到Apache SoftWare Foundation页
As you may have guessed by now, this is the default Tomcat home page. It can be found on the local filesystem at:

$CATALINA_HOME/webapps/ROOT/index.jsp

这样就可以解析 .jsp文件。

———
转自:http://www.linuxdiyf.com/viewarticle.php?id=202377
——–
前六步在centos-6.0下亲测可用

动态加载js脚本

function loadScript(url, callback){
	var script = document.createElement("script");        
	script.type = "text/javascript";  
	if (script.readyState){  //IE   
    	script.onreadystatechange = function(){          
    		if (script.readyState == "loaded"  script.readyState == "complete"){
    			script.onreadystatechange = null;
    			if(typeof callback == 'function') callback();
    		}
    	}
    }else{ //others
    	script.onload = function(){ 
    		if(typeof callback == 'function') callback();
    	}
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

js类如何自动加载组件

当前端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时,直接从组件池中拿出来用就行了,可以省去很多资源

[转]抓大放小,从粗到精

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

其实,在一个产品里,并不是所有的功能都那么重要的,如果产品经理只是交付一个功能列表,而不做需求优先级设定的话,产品可能沦为没有主心骨的产品,交互设计师设计的时候,不确定主要任务是什么;视觉设计师设计的的时候,不确定哪些界面和模块要提供更精致的设计;开发人员开发的时候,不知道哪些功能该设定更高的开发优先级,于是就会形成大家都在搅浆糊的状态,可能因为某些弱弱的分支流程的复杂性,导致开发人员花了大量的时间去攻克难题;可能因为某个不那么重要的设置界面中,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

使用call方法实现多继承

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方法。

百度技术沙龙

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

三亚.海

虽然已经是半个多月前的事了,但直到现在,一闭上眼睛,仍然能够看到海浪在拍击海岸…..