vAgent开发--HTML和Javascript彻底分离
传统瘦客户端开发，HTML/CSS/Javascript，彻底分离？理想主义吧？对，就是有理想主义。没有理想，就不会尝试实践；不尝试实践，怎么能前进?日本人水都能发动汽车了，html/js分类算鸟？ 试试看吧：）
在vAgent项目中，需求的来源是客户认为我们的网页上javascript代码很多，影响SEO(国外客户对SEO都是有整理策略的，马上有一篇小文介绍ON-Site Seo)
而我们遇到的困难是：
1. 很多onclick事件充斥在html元素中
2. ROR程序员可能都遇到Helper问题，CakePHP采用类似的机制，比如GoogleApi就是借助了一个我们自己编写的Javascript Helper直接在页面中调用简化输出，结果导致传回浏览器时即时解析的javascript就混杂在页面当中
3. 有些javascript的变量是依赖于后台数据库输出结果的
下面看一个典型页面应用（该页面是澳洲的州介绍）
http://koda.iteye.com/upload/picture/pic/17970/77c75970-08ae-3cf7-9e73-f624dd4866dc.png
针对上面我们提到的困难，我们逐步重构.基本思路是，定义一个页面同名.js文件用<script>标签包含进来，该例子中js文件名为destination.js
1. 很多onclick事件充斥在html元素中
比如，页面右侧的+和-点击后分别展开和合并，那么起初我们的写法类似：
<a href="">+</a>
实际上前端开发经验丰富的人都知道如何剥离这段代码，特别是使用了prototype或者jquery框架之后。下面是使用prototype为例：
首先重新定义+，加入id属性
<a href="" id="state1" >+</a>
在destination.js中(伪代码)
Event.observe("state1", 'click' , function() { expand(this); show_left_of_page(this); });
2. ROR程序员可能都遇到Helper问题，CakePHP采用类似的机制，比如GoogleApi就是借助了一个我们自己编写的Javascript Helper直接在页面中调用简化输出，结果导致传回浏览器时即时解析的javascript就混杂在页面当中
这个问题经过我们反复分析得出结论：不使用javascript helper.
3. 有些javascript的变量是依赖于后台数据库输出结果的
其实这个问题才是困扰我们的最大问题，很多程序员不假思索地否定了该种情况的javascript代码剥离.
对于上面的页面例子，澳大利亚各州的数据（名称，介绍和图片）都是后台数据库取出的，每次load后，这些数据作为一个数组被存储到javascript变量中，以供+/-点击后切换叶面左边介绍。
原(伪)代码片断如下：
<script>// destination要用来存放后台州的数据，是javascript变量var destination = new Array();<?php $dests = array(); // $destinations存放的是数据库中取出来的数据，是php变量 foreach($destinations as $destination) { $dests[$destination['Destination']['id']] = '<h2>'.$destination['Destination']['name'].'</h2>'. '<p>'. $destination['Destination']['description'].'</p>'. '<p>'.$html->image('/files/destinations/area'.$destination['Destination']['id'].'.gif','</p>'; } foreach($dests as $key=>$value) { echo 'destination['.$key."]='". $value ."';" . "\r\n"; }?></script>
剥离思路:php 输出 json串存在html页面隐藏div中，然后javascript通过dom找到这个字符串用json库反解析
经过改进后，在html页面中
<div id="json_dests" style="display:none"><?php// $distionation是php数组存放的是澳大利亚州数据echo $javascript->Object($destinations));?></div>
在destination.js中：
function extract_destinations(){var json_dests = document.getElementById('json_dests').innerHTML;var destJsObj= JSON.parse(json_dests);// 接下来输出destJsObj对象到destination数组变量中}
经过以上三步，vAgent网站的网页"一干二净"。
---执拗于面向初学者写烂文的人于2008年7月 （进入我的博客看更多烂文）
页:
[1]