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

来源：互联网发布：linux怎么备份文件夹编辑：程序博客网时间：2024/04/29 04:38

　　蒙娜丽莎为什么笑？这个问题，如果达·芬奇自己都没有交代过，那么就没有人知道答案了，后来所有的答案都是推测的，答案众说纷纭，这里就不做评论了。作为计算机运行的代码，答案只能是一个，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里面描述的那样出现海水倒灌，至少我们还有力气游泳，对吧：）