为什么不使用innerHTML_Why not use the innerHTML

记得上次被问过一个问题,为什么在给元素加入html代码的时候不使用innerHTML方法,而使用DOM操作,当时我的回答是,好像对支持有问题,似 乎只支持IE,但事实是真的目前所有浏览器都支持innerHTML方法,且HTML5的草案中也已经将其加入到DOM标准当中.但真的完美了吗,没有问 题了,一切OK?

DOM scripting当中有这样一段:
The innerHTML property can be quite useful when you want a quick and easy way to insert a chunk of HTML into a document. Unfortunately, innerHTML doesn’t return any references to the content you insert. If you want to manipulate the inserted content, you’ll need the precision offered by DOM methods.
You won’t be able to use it on any other kind of markup document. That means if you are serving up XHTML with the correct mime-type, innerHTML won’t work.
It’s also worth remembering that innerHTML is a proprietary method, not a web standard.

In any case, the standardized DOM can be used instead of innerHTML. It may take slightly more code to achieve the same results but, as you’ll see, it offers more precision and power.

不谈html代码过于难于精确控制的问题,也不谈其是不是标准的问题,由其最早是由ie使用可以得知,在非最高版本浏览器当中必定有对其不支持的问题存 在,而内容一定要完整呈现给用户,所以Backwards compatibility如果要做的话,必定要做方法可用性检测,所以对于innerHTML的使用我认为应该这样:
var testdiv = document.getElementById(“testdiv”);
if(testdiv.innerHTML){
testdiv.innerHTML = “html代码”;
}else{
var para = document.createElement(“p”);
testdiv.appendChild(para);
var txt = document.createTextNode(“Hello world”);
para.appendChild(txt);
}
由此可以达到最基本的向之前版本兼容的要求,且innerText,outHTML,outText同样适用。

seam中如何进行多页面注册

需要俩个action,在第一个action中将注册的entity A进行@In和@Out

并且将action中的A设置scope为session或conversation

在第二个action中对剩余属性进行验证

并存入数据库

大话西游中的程序思想_Think in 'A Chinese Odyssey'

大话西游结局是这样的,孙悟空看到至尊宝和紫霞的化身在城楼上,帮助他们紧紧相拥在一起后,转身离开,西天取经去了。这时候紫霞说了句,哪个人样子好怪 哦。至尊宝化身说,我也看到了,他好像条狗诶。如果说孙悟空是至尊宝的原型,那么上次至尊宝死了的时候,原型就脱离了至尊宝,至尊宝就投胎成了现在的夕阳 武士(至尊宝的化身),而夕阳武士现在说,他好像一条狗,是不是在说:自己就像一条狗,只不过他自己不知道他前世是至尊宝?

大话西游看似在讲一个荒诞的爱情故事,但其中有很深刻的程序思想在里面,可以说整部电影就是一个完整的程序原理的实现。

结局的程序结构示意如下:

var zzb = new Object();
var wukong = new Object();
wukong.name = “一条狗”;
zzb.prototype = wukong;
zzb.name = “夕阳武士”;

而第一部《月光宝盒》的程序实现如下:
/*

  • er dangjia created
  • 二当家(吴孟达饰)
    */
    var dangjia = new Object();
    dangjia.name = “二当家”;

/ the chunshisan created
女客春三十娘,春三十娘是蜘蛛精 /
var chunSanshiNiang = new Object();
chunSanshiNiang.name = “春三十娘”;
chunSanshiNiang.prototype = “蜘蛛精”;
//春三十娘勒令群匪找一个脚底有三颗痣的人
chunSanshiNiang.findAManWithThreePointsAtFoot = function(person){
if(person.footHasThreePoints){
return true;
}
return false;
}
//春三十娘欲用迷情大法对付至尊宝,又错用在二当家身上。
chunSanshiNiang.puzzlePerson = function(person){
person.love = this;
}

var finda = chunSanshiNiang.findAManWithThreePointsAtFoot(lightSister);
chunSanshiNiang.puzzlePerson(dangjia);
alert(finda);
alert(dangjia.love.name);

/ tang sanzhuang created
春三十娘错将迷情大法用在二当家身上,生下唐三藏 /
var sanzang = function(man,woman){
var t = new Object();
t.name = “唐三藏”;
return t;
}

/ zhi zhu bao created
孙悟空护送唐三藏去西天取经,半路却和牛魔王合谋要杀害唐三藏,并偷走了月光宝盒。观音大士闻讯赶到,欲除掉孙悟空免得危害苍生。唐三藏慈悲为怀,愿以命相换,观音遂令悟空五百年后投胎作人,赎其罪孽。 /
var zhizunbao = new Object();
zhizunbao.prototype = “孙悟空”;
zhizunbao.name = “至尊宝”;
//紫霞宣布山上的所有东西都归她所有,包括至尊宝在内,并给他盖上记号——三颗痣,宝发觉自己原来真是孙悟空转世。
zhizunbao.getThreePointsByAPerson = function(personName){
if(personName==”紫霞”){
zhizunbao.footHasThreePoints=true;
zhizunbao.name = zhizunbao.prototype;
return zhizunbao.footHasThreePoints;
}
return false;
}

//白晶晶以为春三十娘和二当家生下的孩子是她和至尊宝所生,愤而自刎。至尊宝为了救白晶晶,使用月光宝盒使时光倒流,几次后产生故障,竟将其带回五百年前
zhizunbao.findWhoKillJingjing = function(){
var sawWhoKillJingjing = getBackToBefore(“至尊宝”,”月光宝盒”,2)
if(sawWhoKillJingjing){
return true;
}else{
return false;
}
}

function getBackToBefore(personName,hasPandoraBox,timeline){
var t = parseFloat(Math.random(10)+1);
if(personName&&hasPandoraBox){
if(t==timeline){
return true;
}else{
if(t>timeline){
getBackToBefore(personName,hasPandoraBox,500);
}
if(t<timeline){
return false;
}
}
}
return false;
}

var a = zhizunbao.findWhoKillJingjing();
alert(a);

这里有一个问题是: 至尊宝使用月光宝盒可以回到任意一个之前的时间点,但出现故障无意中会回到500年前,前一个问题可以用数学的理论解释x无限接近一个值,但无法到达,所 以结果无限接近一个值,但无法等于。但回到500年前,似乎完全脱离当前程序结构,而进入另外一个程序体?而当前没有一种语言提倡使用这种做法来改变程序 自己的执行时间点,从而进入另一个方法体。但这种逻辑可以实现吗?

第二部《仙履奇缘》的程序实现如下:
/*

  • the girls zixia and qingxia created
  • 紫霞与青霞本是如来佛祖座前日月神灯的灯芯,白天是紫霞,晚上是青霞
    */
    var lightSister = new Object();
    lightSister.prototype = “灯芯”;
    lightSister.getGirlObject = function(body,day){
    if(day){
    body.name=”紫霞”;
    //紫霞有一誓言,只要谁能拔出她手中的紫青宝剑,就是她的意中人
    body.findLover = function(person){
    if(person.takeSwordOut){
    body.lover = person;
    }
    }
    //紫霞势将水帘洞改为盘丝洞,自封为盘丝大仙
    body.changeHoolName = function(hool){
    if(hool.name==”水帘洞”){
    hool.name =”盘丝洞”;
    }
    }
    }else{
    body.name=”青霞”;
    }
    return body;
    }
    lightSister.getGirlObject(lightSister,true);
    //alert(lightSister.name);

/*

  • 牛魔王的妹妹香香恼恨宝移情别恋,用移形大法将紫霞和猪八戒转换,失误之下又错将自己和沙僧转换。其实紫霞在晚上是青霞,因此和猪八戒转换身体的是青霞
    */
    var xiangxiang = new Object();
    xiangxiang.changeSoulKongfu =function(a,b){
    var t = a.prototype;
    a.prototype = b.prototype;
    b.prototype = t;
    }

//至尊宝变回悟空
zhizunbao.killedByOne = function(){
zhizunbao.name = zhizunbao.prototype;
var wukong = zhizunbao;
wukong.knowWhoIsHisLove= function(){
var trueLove = true;
wukong.takeTrueLove = false;
wukong.regretIt = true;
if(wukong.hasAOpptiunite==true){
wukong.love = sayToGirlLoveHer(“紫霞”);
}
wukong.needloveEndline=true;
setATimeExpiredToLove(wukong.love);

}
return wukong;
}

function sayToGirlLoveHer(girlname){
return “i love you”+girlname;
}
function setATimeExpiredToLove(love){
love.ExpiredTime = 10000;
}

很容易看出大话西游中整体结构是,为一段已有的爱情而回到之前来寻找(发现)另一个爱情,即用爱情创造爱情。而程序中如果要实现的话,则是:执行当前程序并在一定跳出当前程序段,创建并执行另一段程序,即:用程序来创建程序

从行为中分离结构_separate behavior from structure

DOM Scripting封面有一句:Separate behavior from structure using unobtrusive Javascript,简单的一句话,却没有人提出异议试问结构中有行为存在吗?在其第五章,best practice中有关于这句的一些细节。

The problem lies with inline event handlers.

其中有讲到使用hook而不使用标签的js属性,并将其称为结构和行为分离,但我认为其可以认为是html结构和脚本事件的分离,因为behavior意思是

  1. 行为,举止;态度
  2. (机器等的)运转状态,性能
  3. (事物的)反应,变化;作用
    且把一个onclick事件称作行为,我认为是不准确的。

从原型量创建对象到对动态语言的一点认知

Nicholas的Professional JavaScript For Web Developers里面有这样一段:You can also define an Array object by using the literal representation ,which is indicated by using square brackets([])and separating the values with commas…Note that ,in this case,the Array class is never mentioned explicitly.The square brackets imply that the enclosed values are to be made into an Array object.Arrays declared in this way are exactly equal to arrays declared in the more traditional manner.大致意思是讲,array对象可以使用原义的描述符”[ ]”,array的类没有明确提及,双方括号被做成一个array对象,这种方式和传统方式完全相同。

但是他只是讲到了这用的写法是一种简写方式,并没有谈到两者效率之分,国内有很多人用直接量来解释:JavaScript支持使用 [param,param,param,…]来直接表达一个数组,以往我们都使用new Array(param,param,…),使用前者是引擎直接解释的,后者要调用一个Array内部构造器,所以要略微快一点点。

事实真的是这样的吗?ECMAscript 262上有这样一段描述:
Objects are created by using constructors in new expressions; for example, new String(“A String”) creates a new String object. Invoking a constructor without using new has consequences that depend on the constructor. For example,String(“A String”) produces a primitive string, not an object.
对象使用构造器进行创建并使用new表达式,例如new String(“A String”)创建一个string 对象,调用一个构造器不使用new有个后果,例如String””A String”)创建的是一个原始的string,不是一个对象。

由此可以推论出,js中的原始量与对象类似java存在原始数据类型和封装类。所以定义一个数组对象用”[ ]”写法上类似java中的int i[] = {}; 不同的是js借助这种写法创建数组对象而java借助这种写法初始化数组对象。

递归中的概率问题_some probability issues in recursion

本身递归就大量使用栈操作,如果是处理已知规模的问题,其运算效率就可以预估,但是如果递归的条件为随机(结果确定),怎样优化才能提高效率呢?

以下是我对一个js生成5组4位数问题递归效率的分析:
function genRamdomBox4Result(){
nums = genBox4RandomNumber();
nums2 = genBox4RandomNumber();
nums3 = genBox4RandomNumber();
nums4 = genBox4RandomNumber();
nums5 = genBox4RandomNumber();
var temp =’’;
//任意两组数不等的概率为:1-1/(81*81),五组数都不等的概率为:1-1/(9^12),及进行递归的概率为1/(9^12)几乎为0?
if(checkTwoBox4NumDifferent(nums,nums2)&&checkTwoBox4NumDifferent(nums,nums3)
&&checkTwoBox4NumDifferent(nums,nums4)&&checkTwoBox4NumDifferent(nums,nums5)
&&checkTwoBox4NumDifferent(nums2,nums3)&&checkTwoBox4NumDifferent(nums2,nums4)
&&checkTwoBox4NumDifferent(nums3,nums4)&&checkTwoBox4NumDifferent(nums4,nums5) ){
temp = nums+”,”+nums2+”,”+nums3+”,”+nums4+”,”+nums5;
return temp;
}else{
genRamdomBox4Result();
}
}

function checkTwoBox4NumDifferent(a,b){
if(a.length > 3 && b.length > 3){
if(a==b){
return false;
}
return true;
}
return false;
}

function genRandomNumber(numAmount){
if(numAmount>0){
var temp=’’;
for(var i=0;i<numAmount;i++){
temp = temp + String(Math.floor(Math.random()*10));
}
return temp;
}
}

function genBox4RandomNumber(){
var result = ‘’;
var temp1 = String(Math.floor(Math.random()10));
var temp2 = String(Math.floor(Math.random()
10));

//这里temp1<temp2的概率为1/3,所以每次有2/3的可能会重新进行递归,可以修正其为
/if(temp1<temp2){…}else if(temp1>temp2){…}{
result = genBox4RandomNumber();
}
/这样每次运算进行递归的概率为1/3
if(temp1<temp2){
var judge = Math.floor(Math.random()*10);
if(judge>5){
result = temp1+temp1+temp1+temp2;
}else{
result = temp1+temp2+temp2+temp2;
}
}else{
result = genBox4RandomNumber();
}
return result;
}

所以可以得出,控制概率的值,可以控制递归事件发生的频率,本质上减少了递归的发生。

javascript内存回收浅析

我对JavaScript在内存管理上有一个很大的疑问,JavaScript有预解析这一步,所以在执行前,变量可以被缓存,但方法被执行后,方法体内 的变量(无论是引用栈还是引用堆)会被废弃,并等待回收。那么是不是表示被缓存的变量被废弃,并被回收?换句话说:方法执行后,变量的引用值被释放?

并且在js中,变量若为基本类型变量,其调用都发生在栈中,所以其是被及时使用及时回收。例如:
var t = 0;
for(var i =0;i<9;i++){ //变量i在预解析阶段被赋值0,在方法执行过程中,进行累加
t = t+i; //在方法体中i值被t用来进行累加
} //方法体结束后i出栈(被废弃),t得到运算后的新值

但若方法体中存在的是一个对象,情况似乎变得复杂了很多,例如:
function sayName(){
var a ={
name:”rain”,
age:11
}//预解析时,对象被缓存起来(或者被创建?)
alert(a.name);
}//方法结束后,对象由浏览器进行处理,自动被回收

sayName();

所以很多人讲到对象被使用后,立即赋值为null,如:
function sayName(){
var a ={
name:”rain”,
age:11
}
alert(a.name);
a =null;
}
这样做实际上是把与a关联的对象废弃(并不是马上回收),且避免了经常所讲的内存泄露问题。

理想情况下,是否内存被回收后,浏览器对内存的使用反而比网页刚加载完成时更少了?

seam 中如何对记录更新操作

这里的update不使用到entityHome组件。

方法大致如下:

@In
Dog d;
public void edit(){
Dog b = (Dog) em.createQuery(“from Dog as d where d.id=#{d.Id}”).getSingleResult();
b.setName(d.getName());
em.merge(b);
}

javascript功能职责之我见

写这篇文章是因为对前端分离的概念有一点疑惑,大部分观点都偏向于:内容,表现和行为分离。并且js的作用被划分到表现那一块,而我个人更倾向于结构,表现相互分离,因为js所涉及的领域非常的广泛。

首先,js可以自己创建dom节点,可以认为是生成html结构代码

其次,js可以自由设定html元素的样式,可以认为其在改变页面的表现。

而且,js在概率和统计等算法问题上可以解决部分问题。

其三,js可以提供数据的校验,可以异步接收数据,可以认为其负责了部分后端功能是实现

再者,js提供丰富的交互效果,在用户体验上有巨大的作用,当然这一部分可以纳入到表现,也可以认为是行为??

最后,js可以用来构建客户端脚本应用,所以其功能又被提升到应用程序的位子。

所以js被单纯的认为是提供表现,我认为是不确切的。

以下是js功能的示意图:

[caption id=”” align=”alignnone” width=”500”]javascript功能职责图 javascript功能职责图[/caption]

js,css,html的关系图

[caption id=”” align=”alignnone” width=”366”]js,html和css关系图 js,html和css关系图[/caption]

seam中s:link标签rendered属性的作用

可以根据另一个值确定那个s:link 被显示,并使用不同的action
如:
<s:link view=”/aa.xhtml”
value=”add”
propagation=”begin”
id=”Edit”
rendered=”#{_temp==1}”>
<f:param name=”id” value=”#{_temp.id}”/>
</s:link>

<s:link view=”/bb.xhtml”
value=”add”
propagation=”none”
id=”Edit”
rendered=”#{_temp==2}”>
<f:param name=”id” value=”#{_temp.id}”/>
</s:link>
这样间接的实现了根据参数不同跳转到不同页面的效果