JS开发前台代码架构设计

1、说明

该框架主要是用于将表单子窗口化。传统.net或strut等MVC开发出的网站涉及到大量的界面跳转，各个数据表单之间（比如用户表单与文章表单）的切换避免不了打开一个新的页面。与B/S架构及富客户端（如flex/silverlight）的用户体验差不少，但也有着本身的优势如跨平台、无需安装等。这里根据我自己根据学习到的东西试着将两者的优点结合一下。

Ajax技术可以让我们不刷新页面的情况下处理表单，这听上去不错，不过一个小小的文章管理系统固件也得10个8个的维护表单，在一个页面下集成所有的表单的话。对一个系统来说是灾难性的。一个页面上千行上万行的代码给开发带来很大挑战不说。一个页面承载太多东西对用户的耐性也是一个很大的挑战。因为使用过silverlight与MVC的一些框架，我试着按表单将系统管理代码起来。将每个表单的布局样式描述（css/html）、表单处理验证、事件注册（js）单独放到一个文件里，每次我用到它才调用。

开始

1、动态加载HTML。在主页面加上如下代码

    function getTestForm(event) {
        var files = typeof event.data.file == "string" ? [event.data.file] : event.data.file;
        for (var i = 0; i < files.length; i++) {
            var name = files[i].replace(/^\s|\s$/g, "");
            var link = event.data.filepath + name;
            $.ajax({
                url: link,
                success: function (data) {
                    $("#form1").html(data);
                },
                error: function (xhr) { alert("失败！"); }
            });
        }
    }

页面调用，主页面定义一个名为test2的按钮，然后加上下边的代码进行测试

    $("#test2").bind("click", { file: "test.txt", filepath: "Report/" }, getTestForm);

test.txt内容

<input type="button" id="test3"  value="test3" />
<div id="div1">sssssssssssss</div>

动态加载HTML成功。

可以看到刚刚加载进来的表单并没有任何的动作，这儿表单里元素的事件注册及表单数据验证、提交等JS动作我们放到一个独立JS文件，加载完表单我们再动态加载它，实现如下。

2、动态加载JS文件。

//动态加载文件代码
    $.extend({
        includePath: '',
        include: function (file) {
            var files = typeof file == "string" ? [file] : file;
            for (var i = 0; i < files.length; i++) {
                var name = files[i].replace(/^\s|\s$/g, "");
                var att = name.split('.');
                var ext = att[att.length - 1].toLowerCase();
                var isCSS = ext == "css";
                var tag = isCSS ? "link" : "script";
                var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' ";
                var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'";
                if ($(tag + "[" + link + "]").length == 0) {
                    $("head").html($("head").html() + "<" + tag + attr + link + "></" + tag + ">");
                }
            }
        }

    });
    //使用方法
    $.includePath = 'Scripts/WorkSpace/';
    $.include(['GetVehicleGroup.js']);

注：代码为转载，不过经过修改。可以直接使用

GetVehicleGroup.js文件代码

//表单动作要用的的一些代码
function GetVehicleGroup() {
    $.ajax({
        url: "****/GetVehicleGroup.ashx",
        type: 'post',
        dataType: "html",
        success: function (data) {
            》》》处理代码
        },
        error: function (xhr) { alert("失败！"); }
    });
}
//注册表单事件
$("#test3").bind("click", _GetVehicleGroup);
//判断代码是否已经载入完
var GetVehicleGroupIsOk = "enable";

主页面调用GetVehicleGroup.js方法

function _GetVehicleGroup() {
    
    if ("undefined" == typeof (GetVehicleGroupIsOk)) {
        setTimeout("_GetVehicleGroup()", 200);
        return;
    }
    GetVehicleGroup();
}