JS模块化编程

最新推荐文章于 2023-08-07 15:06:35 发布

蓝色羽翼

最新推荐文章于 2023-08-07 15:06:35 发布

阅读量2k

点赞数

分类专栏： JS+HTML+CSS 文章标签： JS模块化编程

本文链接：https://blog.csdn.net/zhangquanok/article/details/17262877

版权

JS+HTML+CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在这之前的页面布局中，如果页面中要有<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>

蓝色羽翼

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS模块化编程

在这之前的页面布局中，如果页面中要有那么就要有和有关的所有HTML标签，这就造成了一个页面中当有很多内容时，当你查看源文件时一大串的代码，编写及维护起来不方便，这个时候就可以想到把不同的功能项写在不同的JS文件中，在前台JS中时行组合，而这，就是本文要讲的JS功能模块编写。建立项目新建MVC项目，并新建一个Index.cshtml页引入Newtonsoft.Json.dll并添加引用，
复制链接

扫一扫