小小程序猿第一篇博客之旅，关于增改查web页面以及js的封装之路。

首先，前后端分离的朋友可以忽略此文章，本人在项目中遇到了很多同一个查看页，同一个编辑页需要复用的需求。如何做到一个查看页，编辑页能在多个地方复用。并且保证此页面所绑定的js事件能正确执行。下面是我的一些思路。仅供参考。

<div id="123456" name="tableDeploy" class="form-inline G1-form" role="form"">
</div>

js代码

function initHelpDetail(id){
    id值为 123456 为上面div元素的id
    $('#' + id).find('xxx').on('click', function(){

    )
    1，对此页面所以的事件绑定，均基于此id来操作。这样确保在此页面多次复用时事件绑定不会出错。
    2，可确保在协同开发时js函数名不会冲突。因为你开发的页面的函数全包裹在了initHelpDetail里
}

initHelpDetail函数调用时机。

postPage('/detail/edit.view', {t}, function (result) {
    如 /detail/edit.view 此URL返回了一个页面。
    $('xxx').append(result);
    var id = $('xxx').find('.G1-form').attr('id');
    G1-form为上面html中含有唯一id属性的div的class
    initHelpDetail(id); //此方法则初始化了你页面所需要执行的所以js
}）

图上postPage为ajax的封装。也可用普通ajax来完成。dataType设置为html则可。

开发中。很多时候js需要用到返回到页面中。用于页面渲染的数据。
每个页面产生一个唯一ID的另一个好处。可以很容易的把request域中。返回到html页面中的参数传递到 js 中。分为2步：
1，在访问某个controller返回html页面时。把所以返回到html页面的数据。保存在session中。以上面的id为标识。
2，在initHelpDetail function中。通过此id 去后台取出session中的数据。
避免了要获取渲染页面数据还要发大量ajax请求。