2011年终总结:为了娜娜的微笑

原创 2011年12月29日 15:07:33


  蒙娜丽莎为什么笑?这个问题,如果达·芬奇自己都没有交代过,那么就没有人知道答案了,后来所有的答案都是推测的,答案众说纷纭,这里就不做评论了。作为计算机运行的代码,答案只能是一个,1就是1,2就是2。
  2011年马上就快过去,按照国际惯例,到了年底,总要进行下总结,以记录过去,憧憬未来。养成良好的习惯,可以避免在工作中少出现问题,可以使项目提早完成,可以提早下班,提早拿到RMB。这样,客户会微笑,老板会微笑,自己会微笑,当然,娜娜也会微笑了。为了娜娜的微笑,下面就对CSDN上出现的一些问题,结合具体的案例,进行下分析和总结,希望对大家有所帮助。
1,meta 标签捣乱
  有一个CSDN上的问题,为了便于重现问题和测试,贴出完整的代码如下:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  protected void Page_Load(object sender, EventArgs e)
  {
    Page.MetaKeywords = "孟子E章";
    Page.MetaDescription = "http://dotnet.aspx.cc";
  }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
</head>
<body>
  <form id="form1">  
  请输入关键字:<input id="keywords" /><br />
  请输入其描述:<input id="description" /><br />
  <input type="button" value="得到输入的关键字" onclick="alert(document.getElementById('keywords').value)" />
  <input type="button" value="得到输入的描述" onclick="alert(document.getElementById('description').value)" />
  </form>
</body>
</html>
  上面的代码有问题吗?按道理说,不应该出现问题。但是,却有人遇到了问题,该用户问的是使用document.getElementById('keywords').value为何得不到<input id="keywords" />的?当时他的贴的代码并不全,所以,很难说明是什么原因。经过分析,原来,他页面的前面加了<meta name="keywords">导致name和id的不能正确的区分。IE浏览器的一个Bug就是不区分ID和Name属性,就连meta里面的name也不放过。
  当我们在低版本的IE中点击按钮时,得到的undefined,但是,在IE9下点击,能够得到正确的结果(注意:兼容模式下是不能得到的),这段代码生成了下面的html
<meta name="description" content="http://dotnet.aspx.cc" />
<meta name="keywords" content="孟子E章" />
  所以,一个好的习惯就是不要使用有可能是关键字的标识符。当我们出现问题的时候,也应该想想,如果keywords换成 UserKeywords试试能否得到,就可以很快的解决问题了。
2,天生缺陷,button 行为的改变
  不知道html元素中有input元素,为何还要造出一个button元素,就是这个button元素导致了问题的产生。下面是一段ASP.NET MVC中产生的大致代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
  <script type="text/javascript">
    function checkForm(oF) {
      if (oF.UserName.value == "") {
        alert("请输入用户名。")
      }
      else {
        //ajax提交
      }
    }
  </script>
</head>
<body>
  <form action="/SaveData" method="post">
  <input type="text" name="UserName" value="net_lover" />
  <button onclick="checkForm(this.form)">保存数据</button>
  </form>
</body>
</html>
  代码执行的结果是,在数据库中老是同时添加2条相同的记录,按照以前IE的做法,这样写是没有任何问题的,<button>就相当于<input type="button">,button的默认类型是button。但是从IE8之后,这种默认的行为改变了,button的默认类型变成了submit,所以,上面的代码其实是提交了2次。MSDN上对这种行为的改变也做了很多的解释,http://msdn.microsoft.com/en-us/library/ms535211%28v=vs.85%29.aspx
  另外,在非IE浏览器和W3C的定义中,button的默认类型都是submit的。
  我从来都不使用button元素的,一致使用input来解决问题。作为一种好的习惯,出现莫名问题的时候,应该试着做一些改变。
3,id标识符和函数定义冲突
  上面说了IE中的问题,下面说一个非IE中也令人奇怪的现象。这个问题也是论坛上出现的。为了说明问题,先贴上完整的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
  function changebg() {
    document.getElementById("bg").style.backgroundImage = "url(http://dotnet.aspx.cc/Images/logoSite.gif)";
  }
  function changebg2() {
    document.getElementById("bg2").style.backgroundImage = "url(http://dotnet.aspx.cc/Images/logoSite.gif)";
  }  
</script>
</head>
<body>
<div id="bg" style="height:60px;background:url(http://dotnet.aspx.cc/Images/meng.gif)"></div>
<img id="changebg" src="http://dotnet.aspx.cc/Images/logoSite.gif" alt="" /><br />
<input type="button" value="改变背景1" onclick="changebg()" />

<div id="bg2" style="height:60px;background:url(http://dotnet.aspx.cc/Images/meng.gif)"></div>
<div id="changebg2">测试</div>
<input type="button" value="改变背景2" onclick="changebg2()" />
</body>
</html>
  在Firefox、Chrome、Oprea中,上面的代码“改变背景1”按钮是无法改变背景的,会提示 changebg is not a function ,但是“改变背景2”则是可以的,这个问题比较奇怪,出现问题的原因是函数定义和id标识符名称相同。但更奇怪的是,为何img的id和div的id都与函数名称相同,为何执行的行为却不一样?当然,解决问题的方法很简单,就是改一下名字就可以了。
  采用不同的标识名称永远都是一个好的习惯。是放之四海而皆准的真理。
4,保证DOM结构的完整正确
  下面,再说一个非 IE 中的问题。为了便于测试,也先贴出完整的测试代码:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  protected void Page_Load(object sender, EventArgs e)
  {
    if (Request.HttpMethod.Equals("POST"))
    {
      int RowCount = Int32.Parse(Request.Form["RowCount"]);
      for (int i = 0; i < RowCount; i++)
      {
        Response.Write("<li>你输入了:" + Request.Form["txt" + i]);
      }
    }
  }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title></title>
  <script type="text/javascript">
    var count = 1;
    function addRow() {
      oTable = document.getElementById("table1");
      oRow1 = oTable.insertRow(oTable.rows.length);
      oCell1 = oRow1.insertCell(0);
      oCell1.innerHTML = "输入名称:";
      oCell2 = oRow1.insertCell(1);
      oCell2.innerHTML = "<input name='txt" + count + "'/>";
      count++;
      document.forms[0].RowCount.value = count;
    }
  </script>
</head>
<body>
  <table>
  <tbody>
    <form id="form1" runat="server">
    <input type="hidden" name="RowCount" value="1" />
    <tr>
      <td>
      <table border="1" id="table1">
      <tr>
      <td>输入名称:</td><td><input name="txt0" /></td>
      </tr>
      </table>
      </td>
    </tr>
    </form>
    </tbody>
  </table>
  <input type="button" value="添加" onclick="addRow()" />
  <input type="button" value="提交" onclick="document.forms[0].submit()" />
</body>
</html>
  上面的代码,在IE执行,可以正确得到所输入的内容,但是在非IE中,只能得到txt0的内容。这个问题也确实比较奇怪的,按理说,js生成的和原来的html应该是相同的,但是在非IE中,确是无法得到这些输入的内容的。当然,解决方法很简单,就是把form移到table之外即可解决。
  还有其他的例子,这里就不再写了,以后再集中写吧。
  所以,好的习惯是保持DOM Tree的正确性,比如不要在span中写div,p之类的标签元素,因为span是行内元素,div,p 都是块级元素,非IE浏览器对文档结构的要求都是很严格的。我们要养成良好的习惯。

  不管怎么样,2011年马上就要过去,2012年是否真的是世界末日,还需要拭目以待。不过,如果我们养成了良好的习惯,以最少的时间来完成我们的工作,把剩下的时间用来锻炼下自己的身体,即使像2012里面描述的那样出现海水倒灌,至少我们还有力气游泳,对吧:)






2011年终总结——思路

——By Alpha. G wu 又是一年的尽头,对于本人来说,不是老了一岁,而是又长大了一岁。每一天的自己都是一个fresh的自己,更别说一年的变化有多大,大到甚至连你自己都察觉不出来。 ...
  • AlfaCuton
  • AlfaCuton
  • 2011年12月31日 16:53
  • 5622

2011年终工作总结与思考

2011年已到尾声,在这最后的几天里,我需要的是认真思考、总结一下今年的工作。     今年的事情比较专一,我一直在开发,其实很喜欢这种从头到尾做一件事情的感觉,比起东跑西颠,至少能在某一方面,有一...
  • BeyondHaven
  • BeyondHaven
  • 2011年12月20日 17:18
  • 5913

2011年终总结

又是年终岁尾,这个时候总是要对这一年有个总结,:) 今年中值得一提的三件事儿: 1. 组织了三次大连程序员的社区活动,两次是QClub,一次是QClub与敏捷之旅合办,效果还好,但是也有不少不满意...
  • lingyun2005
  • lingyun2005
  • 2011年12月21日 08:53
  • 1336

linux下查看IP地址

. ifconfig Linux下查看IP地址的命令--ifconfig ifconfig命令用于查看和更改网络接口的地址和参数  $ifconfig -a   lo0: flags=849 ...
  • happygongzhuo
  • happygongzhuo
  • 2011年10月21日 21:15
  • 450

我的2011年终总结

老当益壮,继续热衷技术, 2011一如既往地搞技术,商业上不成功。 技术上做了: 1.sip协议栈和高性能媒体库。提供SDK方式和平台方式。 2.sip和三汇卡的结合。提供SDK方式和平台方...
  • bluesen
  • bluesen
  • 2011年12月31日 17:55
  • 1045

迟到的2011’ 年终总结

前几天微胖说是不是要写一个年终总结,我当时权当笑话一笑而过,这两天细细想想,还是有必要总结一下,微胖说得还是有点道理的,哈哈 第一章 生活篇 2011年生活有了明显的改善,主要原因有两个,一是bo...
  • yu422560654
  • yu422560654
  • 2012年01月08日 21:36
  • 965

刚做的,觉得有点意思,mark一下

for(i=0;i{for(k=0;kif(kelse //kdocument.write("* ") }document.write("") } for(i=0;i{for(k=0;kif(kels...
  • cxzhq2002
  • cxzhq2002
  • 2006年03月22日 14:03
  • 544

今天起,我在CSDN安家了

 这是一个开放交流的技术平台,给有求知欲的人更多的互动空间! 
  • BB8220
  • BB8220
  • 2010年09月30日 08:41
  • 147

微笑2011/(^o^)/~

      好长时间了没有来CSDN,好像总有那么多的理由和自我安慰,就像对我的android一样!  要不得啊!      我只能说我在酝酿,因为我怕了,甚至是记恨2010年发生的事,真的,我只是个...
  • F1216424
  • F1216424
  • 2011年01月24日 21:38
  • 246

人际关系从微笑开始

兑卦:人际关系从微笑开始《兑卦》初九爻辞:“和兑,吉。”意思是:能以平和喜悦的态度对待别人,就能够获得吉祥。《象》这样分析本爻:“和兑之吉,行未疑也。”这里指出:用平和喜悦的态度待人,从而获得吉祥,是...
  • maqingqing1992
  • maqingqing1992
  • 2015年09月08日 15:42
  • 249
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:2011年终总结:为了娜娜的微笑
举报原因:
原因补充:

(最多只允许输入30个字)