首页 > PHP资讯 > HTML5培训技术 > JS模块化编程

JS模块化编程

HTML5培训技术

在这之前的页面布局中,如果页面中要有

那么就要有和
有关的所有HTML标签,这就造成了一个页面中当有很多内容时,当你查看源文件时一大串的代码,编写及维护起来不方便,这个时候就可以想到把不同的功能项写在不同的JS文件中,在前台JS中时行组合,而这,就是本文要讲的JS功能模块编写。

建立项目

新建MVC项目,并新建一个Index.cshtml页

引入Newtonsoft.Json.dll并添加引用,引入json2.js及jquery-1.7.1.min.js

页面布局

使用JS模块化编程,不用每一个标签都手动添加到HTML页中,应该由另外的JS文件来动态的添加HTML标签,而前台页面只需做好页面布局即可,这个布局是指:只放置各版块DIV元素。前台页面完整代码如下:

        主页        <script src="../../Scripts/jquery-1.7.1.min.js">《script》    <script src="../../Scripts_Custom/IndexRight.js">《script》    <script src="../../Scripts_Custom/Index.js">《script》    
>

总结:

模块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》



本文由欣才IT学院整理发布,未经许可,禁止转载。