在这之前的页面布局中,如果页面中要有<table />那么就要有和<table />有关的所有HTML标签,这就造成了一个页面中当有很多内容时,当你查看源文件时一大串的代码,编写及维护起来不方便,这个时候就可以想到把不同的功能项写在不同的JS文件中,在前台JS中时行组合,而这,就是本文要讲的JS功能模块编写。
建立项目
新建MVC项目,并新建一个Index.cshtml页
引入Newtonsoft.Json.dll并添加引用,引入json2.js及jquery-1.7.1.min.js
页面布局
使用JS模块化编程,不用每一个标签都手动添加到HTML页中,应该由另外的JS文件来动态的添加HTML标签,而前台页面只需做好页面布局即可,这个布局是指:只放置各版块DIV元素。前台页面完整代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>主页</title>
<link href="../../CSS/Index.css" rel="stylesheet" />
<script src="../../Scripts/jquery-1.7.1.min.js"></script>
<script src="../../Scripts_Custom/IndexRight.js"></script>
<script src="../../Scripts_Custom/Index.js"></script>
</head>
<body>
<div id="main">
<div id="div_Left"></div>
<div id="div_Right"></div>
<a id="getDate" href="javascript:void(0);">获取当前时间[向JS传入参数]</a>
</div>
</body>
</html>
后台CSS
body {
}
#main {
width: 950px;
background-color: #87cefa;
height: 500px;
margin-left: auto;
margin-right: auto;
}
#div_Left {
width: 100px;
height: 500px;
float: left;
background-color: #f4a460;
}
#div_Right {
width: 849px;
height: 500px;
float: left;
background-color: #ffe4c4;
margin-left: 1px;
}
#ub_table {
border: 1px solid #B1CDE3;
padding: 0;
margin: 0 auto;
border-collapse: collapse;
}
#ub_table td {
border: 1px solid #B1CDE3;
background: #fff;
font-size: 12px;
padding: 3px 3px 3px 8px;
color: #4f6b72;
}
由上面的JS和CSS引用中可以看到,我们需要建立 Index.js 、IndexRight.js、Index.css文件。
Index.js文件的建立
var main = function (selector) {
//selector:要填充的元素[DIV_Id]
//引用外部JS
var rightDivg = "";
rightDivg = new IndexRightHTML();//这里的IndexRightHTML是外部IndexRight.js文件中的函数,IndexRight.js要在前台.html文件中引入
//得到页面上要进行填充数据的DIV
var container = $(selector);
var leftDiv = container.find('#div_Left');
var rightDiv = container.find('#div_Right');
//生成表导航
ajaxRoot();
//生成表格
//请求 得到导航数据
function ajaxRoot() {
$.ajax({
url: "/Home/GetAllBu/",
type: "get",
dataType: "json",
beforeSend: function () {
$(leftDiv).html("Loading...");
},
success: function (d) {
generateRoot(d);//生成 导航
}
});
}
//生成 导航
function generateRoot(d) {
$(leftDiv).html("");
var ul = $("<ul></ul>");
ul.appendTo(leftDiv);
for (var i = 0; i <d.length; i++) {
var li = $("<li buid =" +d[i].Id + "></li>");
li.appendTo(ul);
$("<a></a>", {
"href": "javascript:void(0);"
}).bind("click", function () {
eClickRootAShow($(this).parent().attr("buid"));
}).html(d[i].BuName).appendTo(li);
}
}
//事件 单击左侧<a />显示其关联数据到右侧
function eClickRootAShow(statur) {
$.ajax({
url: "/Home/GetBuByBuid/",
type: "get",
dataType: "json",
data: { "buid": statur },
beforeSend: function () {
rightDiv.html("Loading...");
},
success: function (d) {
//调用外部JS【传出参数】
rightDivg.generateRigtDiv(d);//生成 部门详细信息
}, error: function () {
}
});
}
//加上 this 表示由外部调用
this.getCurrentDate = function () {
//返回当前的年月日
var d = new Date();
return d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
};
/*
对于事件的绑定,有两种方式:
1、在生成标签时绑定事件;
2、在生成标签完成后,再绑定事件。
第一种方式的特点是针对一个标签要实现功能的代码集中,第二种方式的特点是相同特性功能[生成HTML/绑定事件/请求数据等]的代码集中。究竟使用哪种方式,就由你所绑定的事件代码中,与当前所取得到的数据的关联性,关联性高,就使用第一种方式,否则使用第二种方式。
*/
/*
个人编码规范
1、尽量少用全局变量
2、变量定义在最前,值为null的定义在有指定值的变量之前
3、函数名以小写字母开头,之后每个单词首字母大写,作到见名知义,并以特定单词、字母做前缀以标识函数类型
*/
}
上面这个JS代码中,所有的内容由var main = function (selector){…}包了起来之后在里面定义了变量以及函数。大家用得最多的定义函数的方法是function a(){…},在这里的 var main…和前面的一样,但在此外,使用var main…方式定义的函数可以很方便的被外部进行调用,而调用的方法和C#、JAVA这些语言的创建对象一样用new关键字。
在Index.js文件中,所有的变量函数均不能被外部访问,如果要提供给外部访问的接口,应该使用this.getCurrentDate = function (){…}的方式。
rightDivg.generateRigtDiv(d);是向另一个JS文件传入参数
IndexRight.js文件
var IndexRightHTML = function (data) {
var rightDiv = "div_Right";
function generateTable(d) {
$("#" + rightDiv + "").html("");
var table = $("<table></table>", {
"id": "ub_table"
});
table.appendTo($("#" + rightDiv + ""));
$("<table></table>").appendTo(table);
var thead = $("<thead></thead>").html("").appendTo(table);
var thtr = $("<tr></tr>").html("");
thtr.appendTo(thead);
$("<th></th>").html("Number").appendTo(thtr);
$("<th></th>").html("BuName").appendTo(thtr);
$("<th></th>").html("CreateTime").appendTo(thtr);
$("<th></th>").html("UpaDateTime").appendTo(thtr);
$("<th></th>").html("IsActive").appendTo(thtr);
for (var i = 0; i <d.length; i++) {
var tr = $("<tr></tr>").html("");
tr.appendTo(table);
$("<td></td>").html(d[0].Id).appendTo(tr);
$("<td></td>").html(d[0].BuName).appendTo(tr);
$("<td></td>").html(d[0].CreateTime).appendTo(tr);
$("<td></td>").html(d[0].UpaDateTime).appendTo(tr);
$("<td></td>").html(d[0].IsActive).appendTo(tr);
}
}
//加上 this 表示以外部调用
this.generateRigtDiv = function(data) {
generateTable(data);
};
}
当Index.js文件中使用rightDivg.generateRigtDiv(d);时,就是调用IndexRight.js文件的generateRigtDiv( )函数的过程
完整的前台HTML代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>主页</title>
<link href="../../CSS/Index.css" rel="stylesheet" />
<script src="../../Scripts/jquery-1.7.1.min.js"></script>
<script src="../../Scripts_Custom/IndexRight.js"></script>
<script src="../../Scripts_Custom/Index.js"></script>
</head>
<body>
<div id="main">
<div id="div_Left"></div>
<div id="div_Right"></div>
<a id="getDate" href="javascript:void(0);">获取当前时间[向JS传入参数]</a>
</div>
<script type="text/javascript">
var table = null;
$(document).ready(function() {
table = new main("#main");
});
$("#getDate").bind("click", function () {
//getCurrentDate
alert(table.getCurrentDate());
});
</script>
</body>
</html>
总结:
模块JS文件书写方式:
Var moduleJS= function(){
Var a = null;//内部变量,外部不能使用
Function A(){
…//内部函数,外部不能使用
}
This.GetData =function() {
…//加this,表示将此函数开出去,向外部提供访问本JS文件数据的接口
Return a;
}
}
HTML页中调用模块JS文件
<script type="text/javascript">
var table = null;
$(document).ready(function() {
table = new main("#main");
});
$("#getDate").bind("click", function () {
//getCurrentDate
alert(table.getCurrentDate());
});
</script>