有思俱乐部学习园地

类的规范


Javascript中的类

            
        /* 为了使得javascript支持多份实例,形如Java与Net,特制定此编写类的规范如下: 
        在前端开发中,经常需要定义JS类,而在云端开发中我们怎么才能规范的定义类呢,
        现在我们给大家编写一套云端定义多份和Java以及Net这样的面相对象的语言一样的类的案例
        首先我们的案例以谈多个对话框为例子,例子如下:*/

        Namespace.register("U.UF.UI"); //定义一个云端控件的命名空开关键 U.UF.UI

        /** 定义一个函数,做为对话框类,也相当与java或者net的构造函数
        * @param	string	title 对话框标题
        * @param	object	style 对话框样式
        * @param	function	closecb 关闭回调
        * @param	function	determinecb 确定回调
        * @param	string	content 窗体内容
        * @param	element	parentelement 窗体追加到的指定元素,默认是document.body 
        */
        U.UF.UI.dialog = function (title, style, closecb, determinecb, content, parentelement) {
            this.title = title; //对话框标题
            this.style = style; //对话框样式
            this.closecb = closecb; //关闭回调
            this.determinecb = determinecb; //确定回调
            this.content = content; //窗体内容
            this.parentelement = parentelement || document.body; //窗体追加到的指定元素,默认是document.body

            //创建
            this.create(); //控件全部用create创建,不使用init字母.
        }

        //全局变量一定要放在总函数的下面,不然会找不到U.UF.UI.dialog,导致报错.
        //上面的函数是创建类和构造,在类的命名空间(U.UF.UI.dialog)下创建可以创建全局变量和定量如下:
        U.UF.UI.dialog.NAME = "云端dialog"; //对话框的名字 全局定量
        U.UF.UI.dialog.number = 1; //对话框给调用的次数
        /** 说明U.M.apply函数的作用是把第二个参数回调函数设置在制定的第一个参数域下执行,
        *   原生的写法大致如下 U.UF.M.apply = function(scope, fun){ 
        *                                      return function(){ fun.call(scope); }
        *                                  }
        **/

        //定义函数
        U.UF.UI.dialog.prototype = {
            /** 定义一个创建的函数,作为创建对话框
            */
            create: function () {
                //创建一个对话框的弹框,设置弹框的样式
                var _form = U.UF.UI.form({
                    top: true, //设置每一次置顶
                    min: false, //不允许缩小窗体
                    max: false, //不允许放大窗体
                    style: this.style, //设置对话框的样式
                    title: this.title, //对话框的头部标题
                    content: this.content //对话框的内容
                });
                //创建对话框的按钮,放置到上面创建的窗体中
                var _bottomcontent = $$("div", {
                    "className": "U_UI_OBA"
                });
                //创建取消的的按钮
                var _closebottom = $$("div", {
                    //绑定关闭按钮取消的事件处理。 
                    /** 说明U.M.apply函数的作用是把第二个参数回调函数设置在制定的第一个参数域下执行,
                    *   如下的调用的处理方式是在onclick事件触发的时候把参数二的function内置到this域下执行执行
                    **/
                    "onclick": U.UF.M.apply(this, function () {
                        this.closecb(); //点击取消按钮后回调用户的取消按钮触发的函数
                        _form.close(); //删除form弹框处理
                    }),
                    "innerHTML": "取消",
                    "className": "U_UI_OBY"
                }, _bottomcontent);

                //创建确定的按钮
                var _determinebottom = $$("div", {
                    //绑定确定按钮取消的事件处理。
                    /** 说明U.M.apply函数的作用是把第二个参数回调函数设置在制定的第一个参数域下执行,
                    *   如下的调用的处理方式是在onclick事件触发的时候把参数二的function内置到this域下执行执行
                    **/
                    "onclick": U.UF.M.apply(this, function () {
                        this.determinecb(); //点击确定按钮的回调
                        _form.close(); //删除form弹框处理
                    }),
                    "innerHTML": "确定",
                    "className": "U_UI_OBY"
                }, _bottomcontent); //确定按钮

                //把按钮放在刚刚创建的窗体中
                _form.body.appendChild(_bottomcontent);

                //对话框给调用的次数+1,使用次数用全局变量累计,不能用this.number,会统计错误.
                U.UF.UI.dialog.number++;
            }
        }

        //window.onload处理
        window.onload = function () {
            //创建对话框
            var _dialog = new U.UF.UI.dialog(
                            "标题",
                            { width: "300px", "height": "300px" },
                            function () { alert("取消成功"); },
                            function () { alert("确定成功"); },
                            "请点击按钮",
                            document.body
                          );

        }