WEB前端html、css、js分离开发简谈

在WEB 0 时代 ，除了W3C自己的网站，页面基本上只有一堆杂乱的混合的代码，他们是HTML 3- 、CSS 1- 、JAVASCRIPT 1- 的大盛宴。以大部分网站的登录表单和无尽的链接为例，大部分代码就像下面这个样子：

1. 
   
2. <form method="" action="">
   
3. 
   
4. <table width="320px" height="240px" cellpadding="0" cellspacing="0" align="center" valign="top">
   
5.    <tr>
   
6.         <td align="right">用户名：</td><td><input type="text" name="username" οnfοcus=" javascript:this.value='' " οnblur=" javascript:{if(this.value==''){this.value='请输入'}return false}  value='请输入' " /></td>
   
7.     </tr>
   
8.    <tr>
   
9.       <td align="right">密码：</td><td><input type="password"  /></td>
   
10.    </tr>
    
11.    <tr>
    
12.       <td align="right" colspan="2"><input type="submit"  value="登录邮箱" />                  </td>
    
13.    </tr>
    
14. </table>
    
15. </form>
    
16. 
    

复制代码

这代码在以前看来是很酷的，因为它里面加入了在”用户名“那个控件中的焦点获得时清空文本框的动作和焦点移出时检测该控件是否为空的动作。

但是，维护起来，相当麻烦，于 是web 1 时代 ，大部分网站重新改版，调成了这个样子,层叠样式表 CSS 开始深入人心，开始实现前端的第一部分离即HTML和CSS的分离：

1. 
   
2. table {width:320px; height:240px ;  text-align:center;vertical-align:top;border-collapse:collapse;border:1px solid red}
   
3. 
   
4. table .rightalign {text-align:right}
   
5. 
   

复制代码

1. 
   
2. 
   
3. <form method="" action="">
   
4. <table >
   
5.    <tr>
   
6.       <td class="rightalign">用户名：</td><td><input type="text" name="username" οnfοcus=" javascript:this.value='' " οnblur=" javascript:{if(this.value==''){this.value='请输入'}return false}  value='请输入' " /></td>
   
7.    </tr>
   
8.    <tr>
   
9.       <td class="rightalign">密码：</td><td><input type="password"  /></td>
   
10.    </tr>
    
11.    <tr>
    
12.       <td class="rightalign" colspan="2"><input type="submit"  value"登录邮箱" />                  </td>
    
13.    </tr>
    
14. </table>
    
15. </form>
    
16. 
    

复制代码

这个时候，大多数人对html标签和CSS的理解逐渐由迷茫到清晰，再到迷茫。

必然如说，HTML 4- 中，直接用<b>和<strong>来标记粗体字，然而CSS却可以用下面的代码来同样做到粗体：

1. 
   
2. 
   
3. .bold_font{font-weight:bold}
   
4. 
   
5. i {font-style:normal ; font-style:normal;}
   
6. 
   

复制代码

1. 
   
2.    <span class="bold_font">我是粗体</span>
   
3. 
   
4.    <i>我靠，我也是粗体！</i>
   
5. 
   

复制代码

懂行的人，开始疯了。

   真疯了吧！本来预定义为斜体的<i>标签可以通过修改其CSS的font-style也变成粗体，那还预定义个屁啊！OMG！ 好混乱。

   然后W3C跳出来了，在4.0.1中指定了一批即将被干掉的标签：i  b   font  等等。

   事实上，这是正确的，在实现了HTML和CSS的分离后，我们要考虑的更多的是DIV和SPAN如何层叠分布，而不是像使用word一样用所有预定义的标签来定义内容显示形式和效果。

   在上面的例子中，HTML和CSS的分离有利于在HTML代码成型后尽量不去改动整体框架而能通过修改外部文件来UPDATE其样式和各个模块的位置。然而，JS依然没有实现分离。

   在2002年以前，大多数人喜欢通过在HTML代码的任何地方直接嵌入JS代码，就像上面那样：

1. 
   
2. 
   
3.    <input type="text" name="username" οnfοcus=" javascript:this.value='' " οnblur=" javascript:{if(this.value==''){this.value='请输入'}return false}  value='请输入' " />
   
4. 
   

复制代码

JS和HTML如何分离？这是当时大多数人所不理解的问题。当然，到现在，依然没有人很理解。但是记住，JAVASCRIPT是世界上最强大最复杂的前端开发语言， 它提供了两个东西给我们，一个叫<span style="color: #ff0000;">面向对象</span>，一个叫<span style="color: #ff0000;">DOM</span>。前面的是思想，后面的是实现手段。

为什么现在我们能看到那么多的体验感良好交互良好的网站？为什么我们在页面上做点跟后台相关的读取数据的事情能够被实时的交互出来？

这都是DOM的功劳。关于DOM的运行原理，不在这里讨论，现在只讨论如何用JAVASCRIPT原生代码实现JS和HTML的分离。

在JS原生代码界，是这样实现JS和HTML的分离的：

1. 
   
2. document.onReady = function (){
   
3. 
   
4.    var text_input = document.getElementById("username"); //获取id为username的文本输入框控件对象
   
5. 
   
6.    text_input .οnfοcus= function() {
   
7. 
   
8.          this.value='';
   
9. 
   
10.    }
    
11. 
    
12.    text_input .οnblur= function() {
    
13. 
    
14.    if(this.value=='')
    
15. 
    
16.    {
    
17. 
    
18.          this.value='请输入'
    
19. 
    
20.    }else{
    
21. 
    
22.          return false
    
23. 
    
24.    }
    
25. 
    
26. }
    
27. 
    
28. }
    

复制代码

1. 
   
2.   
   
3. <form method="" action=""> 
   
4. <table > 
   
5.     <tr> 
   
6.           <td class="rightalign">用户名：</td><td><input type="text" name="username" id="username"  value="请输入"  /></td> 
   
7.     </tr> 
   
8.     <tr> 
   
9.           <td class="rightalign">密码：</td><td><input type="password"  /></td> 
   
10.           <td class="rightalign" colspan="2"><input type="submit"  value='登录邮箱' />                  </td> 
    
11.     </tr> 
    
12. </table> 
    
13. </form> 
    

复制代码

但是，但是……由于各种浏览器版本问题，你还需要为一些JS做兼容…… 
很麻烦，是不是？ 幸好，我们有框架：Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx 
以我最喜欢的Jquery框架为例，要实现以上JS代码简直太简单了！

1. 
   
2. 
   
3. $(document).ready( 
   
4. $("#username").bind("focus", 
   
5.          function(){ 
   
6.                  this.value=''; 
   
7.          }); 
   
8. $("#username").bind("blur", 
   
9.          function(){ 
   
10.                  if(this.value=='') 
    
11.                  { 
    
12.                          this.value='请输入'; 
    
13.                  }else{ 
    
14.                          return false; 
    
15.                  } 
    
16.          }); 
    
17. ); 
    

复制代码

为什么说我们很幸运的拥有了JS框架呢？请允许我举一个例子：

在上面的代码中，如果我们要实现是在第一次点击ID为username的输入框时清空里面的默认数据，而以后再将焦点移入该框则不触发这个清空动作，那该如何？

如果用原生代码，我们的思路应该是：绑定动作 - > 等待焦点移入 ->移入后再触发一个卸载动作的操作。

麻烦吧？

JQUERY可以这样实现：

1. 
   
2. $("#username").one("focus", 
   
3.     function(){ 
   
4.              this.value=''; 
   
5.     }); 
   

复制代码

对！ONE！  为什么不用这个函数！

记住，控件的name和ID属性是连接HTML、CSS和JS的最直接通道，HTML来布局、创建页面对象，CSS来操控对象的样式，JS来赋予对象动作，这个在三大巨头一开始合作的那一刻起就存在的真理，现在只是越来越真而已。

总而言之，在带宽越来越大和网民对页面交互体验要求越来越高的今天，富前端的开发理念逐渐深入人心，前端的三大巨头：HTML、CSS、JAVASCRIPT必须更加专业的各司其职才能胜任种种复杂的操作。要更加专业的各司其职，就一定会遇到前端三巨头在形式上彼此分离的情况，希望本文能带你进入前端分离的美妙境界。