dojo工作中用到的相关代码讲解笔记

最新推荐文章于 2023-02-22 10:03:52 发布

DemoImpl

最新推荐文章于 2023-02-22 10:03:52 发布

阅读量357

点赞数

分类专栏： # dojo 文章标签： dojo

本文链接：https://blog.csdn.net/u013205428/article/details/102636688

版权

dojo 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

xxx.js开头部分

举例：任意一模块功能的js、html等文件内容

// xxx.js
define("widgets/xxx",[
    "widgets/_Widget",
    "widgets/LevelButton",
    "widgets/Table",
    "dijit/form/CheckBox",
    "dijit/form/FilteringSelect",
    "dojo/_base/declare",
    "dojo/dom-class",
    "dojo/_base/array",
    "dojo/_base/lang",
    "dijit/Dialog",
    "dojo/request/script",
    "dojo/dom-style",
    "dojo/dom-construct",
    "dojo/i18n!./nls/xxx",
    "dojo/query",
    "dojo/on",
    "dojo/topic",
    "dojo/store/Memory",
    "dojo/text!./templates/xxx.html",
    "dojo/json",
    "dojo/text!./../widgets/assets/FunctionPermission.json"
], function (
    _Widget,
    LevelButton,
    Table,
    CheckBox,
    FilteringSelect,
    declare,
    domClass,
    array,
    lang,
    Dialog,
    script,
    domStyle,
    domConstruct,
    xxx,
    query,
    on,
    topic,
    Memory,
    template,
    json,
    FunctionPermission
) {
	var aaa = .....
});

这里的widgets指的是项目下的一个文件夹名称。
_Widget.js这里是把它当成了基类，里面引入的都是最基本的dojo组件
dijit/与dojo/路径下面的组件都是dojo自带的组件
i18n的写法：dojo/i18n!./nls/xxx，其中nls是文件夹名称，xxx是xxx.js文件
如果是引入html文件，dojo/text!./templates/xxx.html，需要在dojo/text后面加！，然后后面再加路径地址，这里框架是应用了templates模板样式，templates底下放的是对应主要展示的html页面。不光templates文件夹下有html文件，在views文件夹下也有同名称的html文件，但是views底下的xxx.html是引入的xxx.js这个文件，而在xxx.js中是引入的templates下的xxx.html这个页面，所以得区分好。附代码片段。
json文件引入的话，要先引入dojo/json这个组件，再引入相关文件dojo/text!./…/widgets/assets/FunctionPermission.json，这里json文件的引入方法同html文件的引入
以上组件与文件在define的第一个参数里引入完毕后，再在第二个参数function的参数里面为每一个引入赋名，一定要按顺序对应好，少一个多一个都会直接报错。在function的函数体里面写相关的js内容。

//_Widget.js
define([
    "dojo/_base/declare",
    "dijit/_Widget",
    "dojo/cookie",
    "dijit/Dialog",
    "dojo/dom-construct",
    "dojo/dom-style",
    "dojo/on",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/json",
    "dojo/text!./../widgets/assets/Config.json"
],function(
    declare,
    _Widget,
    cookie,
    Dialog,
    domConstruct,
    domStyle,
    on,
    _TemplatedMixin,
    _WidgetsInTemplateMixin,
    json,
    Config
){
});

//i18n里的 nls/xxx.js
define({
    'edit' : '编辑',
    'delete' : '删除',
    'right' : '确定',
    'cancel' : '取消',
    'wrong' : '查询出错了',
    "add" : "添加",
    "find":'搜索'
});

在views/xxx.html里面是直接用require来引入的相关js组件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- views/xxx.html代码 -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        var selfUrl = document.location.href.substring(0, document.location.href.lastIndexOf("/"));
        selfUrl = selfUrl.substring(0, selfUrl.lastIndexOf("/"));
        var dojoConfig = {
            isDebug: true,
            async: true,
            parseOnLoad: true,
            packages: [
                {name: "widgets", location: selfUrl}
            ]
        }
    </script>

    <link rel="stylesheet" href="../themes/claro/claro.css"/>
    <script type="text/javascript" src="../../Configuration/xxxConfig.js"></script>
    <script type="text/javascript">
        require([
            "widgets/xxx"
        ], function (xxx) {
            var xXX= new xxx({}, "xxx");
        });
    </script>
</head>
<body class="claro">
<div id="xXX">
</div>
</body>
</html>

在templates/xxx.html里面的data-dojo-attach-point属性是dojo自带的id属性

<!-- templates/xxx.html -->
<div data-dojo-attach-point="xxxNode" class="xxx">
    <div data-dojo-attach-point="headNode" class="head">
    	<!-- 头部信息 -->
        <div data-dojo-attach-point="myHeadNode" class="myHead">				  
        </div>
    </div>
    <div data-dojo-attach-point="yyyBoxNode" class="yyyBox" style="display:none">
        <div class="search">
            <form data-dojo-type="dijit/form/Form" data-dojo-attach-point="searchFormNode" class="searchForm" enctype="multipart/form-data">
                <div data-dojo-attach-point="xxxOneNode" class="xxxOne">
                    <!--表格循环的后端数据内容-->
                    <div data-dojo-attach-point="ItemIdNode" class="ItemIdName"></div>
                    <div name="itemId" data-dojo-attach-point="textItemIdNode" data-dojo-type="dijit/form/ValidationTextBox" class="txtItemIdName"></div>
                </div>
            </form>
        </div>
    </div>
</div>

Setup.js里面有后面代码部分里面的订阅发布函数内容，Setup.js是登录进去之后的index页面加载的js。
… …表示的是省略

//Setup.js 控制全部功能模块的跳转js
//筛选相关部分

define("widgets/Setup", [
	......	  
	"dojo/dom-construct",
	"dojo/request/script",
	"dojo/on",
	"widgets/Xxx",
	......
], function (
	......,
	domConstruct,
	script,
	on,
	Xxx,
	......
){
	......
	/*这里做的是判断点击的xxx这个功能模块之后的逻辑*/
	 case TabNav.xxx:
	      // 模块点击事件
	      self._createXxx();
	      break;
	......
	
	_createXxx: function (data) {
	    var self = this;
	    // 清空containerNode这个节点标签里面的内容
	    domConstruct.empty(this.containerNode);
	    // 在containerNode节点底下创建一个div标签
	    var c = domConstruct.create("div",null, self.containerNode);
	    // 拼接url地址
	    var url = self._databaseIp + "XxxController/getXxx";
	    // dojo自带的请求后端方式
	    script.get(url, {
	        handleAs: "json",
	        jsonp: 'jsonpcallback'
	    }).then(function (data) {
	        var species = self.permissionData.species;
	        // 创建Xxx组件
	        var xxx = new Xxx({
	            species: species,
	            data: data,
	            // 添加函数变量
	            onAddOne: function () {
	                //添加
	                self._createXxxDetail();
	            },
	            // 编辑函数变量
	            onTableClick: function (data) {
	                //编辑
	                self._createXxxDetail(data);
	            }
	        }, c);
	        //删除  dojo自带on事件
	        on(xxx, "buttonDelClick", function (data) {
	            var url = self._databaseIp + "XxxController/deleteXxx";
	            script.get(url, {
	                handleAs: "json",
	                jsonp: 'jsonpcallback',
	                query: {"itemId": data[0]}
	            }).then(function (data) {
	                if (data.retCode === "1") {
	                    self.dialogShow("提示", data.retMsg, 1000);
	                    self._createXxx();
	                } else {
	                    self.dialogShow("提示", data.retMsg, 1000);
	                }
	            }, function (err) {
	                self.dialogShow("提示", "服务器响应失败！");
	            });
	        });
	    }, function (err) {
	        self.dialogShow("提示", "服务器响应失败！");
	    });
	},
	
	_createXxxDetail:function(data){
	    var self = this;
	    //undefined 走添加; !undefined走编辑
	    if(data === null || data === undefined){
	        domConstruct.empty(this.containerNode);
	        var c = domConstruct.create("div", null, self.containerNode);
	        var species = self.permissionData.species;
	        // 这里就是添加/编辑的组件了,组件添加与使用方式同Xxx
	        var xxxDetail = new XxxDetail({
	            data: data,
	            personData: self.personData,
	            species: species,
	            // 取消按钮
	            onCancelClick: function () {
	                self._createXxx();
	            },
	            // 保存按钮
	            onSaveClick: function () {
	                self._createXxx();
	            }
	        }, c);
	    }else {
	        var url = self._databaseIp + "XxxController/getXxxById";
	        script.get(url, {
	            handleAs: "json",
	            jsonp: 'jsonpcallback',
	            query: {
	                itemId: data[0]
	            }
	        }).then(function (data1) {
	            domConstruct.empty(self.containerNode);
	            var c = domConstruct.create("div", null, self.containerNode);
	            var species = self.permissionData.species;
	            var xxxDetail = new XxxDetail({
	                data: data1.itemId,
	                personData: self.personData,
	                species: species,
	                // 取消按钮
	                onCancelClick: function () {
	                    self._createXxx();
	                },
	                // 保存按钮
	                onSaveClick: function () {
	                    self._createXxx();
	                }
	            }, c);
	        }, function (err) {
	            self.dialogShow("提示", "服务器响应失败！");
	        });
	    }
	},
	......
}

xxx.js中间部分

接上面提到的var aaa = … 这一块的部分

//xxx.js

// 使用dojo自带的declare来声明这一组件
var xxx = new declare("widgets.Xxx",[_Widget],{
	// 使用dojo的模板组件
    templateString : template,
    data:null,
    species:null,
    // 构造器
    constructor : function () {
    	// 调用父类的方法
        this.inherited(arguments);
    },
    // 创建该组件的内容
    postCreate : function () {
        this.inherited(arguments);
        var self = this;
        // 订阅一个this.domNode.id + "addOne"主题,在发布的时候执行onAddOne()这个函数
        topic.subscribe(this.domNode.id + "addOne" ,lang.hitch(this,"onAddOne"));
        topic.subscribe(this.domNode.id + "tableClick",lang.hitch(this,"onTableClick"));
        /*查询条件*/
        this.ItemIdNode.innerText = Xxx.itemId;
//            this.ItemNameNode.innerText = Xxx.itemName;
//            this.ItemCodeNode.innerText = Xxx.itemCode;

        var xxxAdd = 0;
        var xxxEdit = 0;
        var xxxDel = 0;
        // FunctionPermission这个json里面其实内容就是各种功能权限的值,1表示有某功能的权限,0表示没有某功能的权限
        var functionPermission=json.parse(FunctionPermission);
        // dojo自带的array循环方式
        // species如果子类找不到,应该是父类里面声明的变量,在Setup.js里面赋值的
        array.forEach( this.species , function (item) {
            if(item.permissionspecies == functionPermission.xxxAdd.id){
                xxxAdd = 1;
            }else if(item.permissionspecies == functionPermission.xxxDel.id){
                xxxDel = 1;
            }else if(item.permissionspecies == functionPermission.xxxEdit.id){
                xxxEdit = 1;
            }
        });

        if(xxxAdd == 1){
        	// dojo自带on事件
            on(this.btnAddNode,"click", function () {
            	// self.domNode.id + "addOne"主题的消息发布,点击btnAddNode这个按钮的时候会走该主题的订阅中的函数,也就是onAddOne()这个方法,不同的主题id值走它们相对应的id值的订阅中的函数
                topic.publish(self.domNode.id + "addOne");
            });
        }else{
        	// dojo自带的domStyle样式动态赋值
            domStyle.set(self.btnAddNode,{"display":"none"});
        }
        var btns=[];
        if(xxxEdit == 1){
            btns.push(Xxx.edit)
        }
        if(xxxDel == 1){
            btns.push(Xxx.delete)
        }
        this.btns = btns;
        //搜索
        on(this.expandNode,"click",lang.hitch(this,function(){
            if(this.yyyBoxNode.style.display == 'none'){
                domStyle.set(this.yyyBoxNode,{"display":"block"});
            }else{
                domStyle.set(this.yyyBoxNode,{"display":"none"});
            }
        }));
        on(this.imgNode,"click", function () {
        	// getValues()方法来获取表单值
            var formData=self.searchFormNode.getValues();
            var url=self._databaseIp + "XxxController/getXxx";//查询接口列表数据
            script.get(url, {
                handleAs: "json",
                jsonp: 'jsonpcallback',
                query:formData
            }).then(function(data) {
                self._createGrid(data,1);
            });
        });
		// 同上
        topic.subscribe(this.domNode.id + "buttonClick",lang.hitch(this,"onButtonClick"));
        // 同上
        topic.subscribe(this.domNode.id + "buttonDelClick",lang.hitch(this,"onButtonDelClick"));
        this.myHeadNode.innerText = Xxx.head ;
        this._createGrid(this.data,1);
    },
    _createGrid: function (data,index) {
        domConstruct.empty(this.gridNode);
        var self = this;
        var height = domStyle.get(this.xxxNode,"height");
        height = height - 39;
        var a = domConstruct.create("div");
        // place是替换标签方法
        domConstruct.place(a,this.gridNode);
		
		// Table是dojo自带的Table
        var table = new Table({
            data:data,
            showSet:1,
            upData:1,
            page:10,
            index:index,
            allCheck:0,
            button:self.btns,
            hideItem:[0],
            tableName:"自定义这个table的名称"
        },a);
        //编辑
        on(table,"trClick",lang.hitch(this, function (data) {
            var diaBox = domConstruct.create("div");
            var myContent = domConstruct.create("div",{class : "myContent"});
            var btnNo = domConstruct.create("div",{class : "btnNode"});
            var btnYes = domConstruct.create("div",{class : "btnYes"});
            // domStyle.set()的第一个变量可以是一个标签
            domStyle.set(myContent,{
                "height" : "74px",
                "line-height" : "50px"
            });
            domStyle.set(btnYes,{
                "background-color": "#4787ed",
                "border-color": "#3079ed",
                "color" : "#fff",
                "border": "1px solid #3079ed",
                "border-radius": "2px",
                "cursor": "pointer",
                "font-family": "Microsoft yahei, Arial",
                "float": "right",
                "font-size": "12px",
                "padding":" 0 12px",
                "height":" 22px",
                "line-height": "22px",
                "margin-bottom": "10px"
            });
            domStyle.set(btnNo,{
                "background-color": "#ececec",
                "border-color": "#3079ed",
                "color" : "#333",
                "border": "1px solid #c3c3c3",
                "border-radius": "2px",
                "cursor": "pointer",
                "font-family": "Microsoft yahei, Arial",
                "float": "right",
                "font-size": "12px",
                "padding":" 0 12px",
                "height":" 22px",
                "line-height": "22px",
                "margin-bottom": "10px",
                "margin-left" : "10px"
            });
            domConstruct.place(myContent,diaBox);
            domConstruct.place(btnNo,diaBox);
            domConstruct.place(btnYes,diaBox);
            myContent.innerText = Xxx.ifEdit + "？";
            btnYes.innerText = Xxx.right;
            btnNo.innerText = Xxx.cancel;

			// dojo自带的Dialog弹框
            var checkDialog = new Dialog({
                title : Xxx.tip,
                content : diaBox,
                style:"width:326px;height:145px;background-color : #fff"
            });
            checkDialog.show();
            on(btnYes,"click",function(data1){
            	// 同上
                topic.publish(self.domNode.id+"tableClick", data);
                checkDialog.hide();
            });
            on(btnNo,"click",function(){
                checkDialog.hide();
            });

        }));
        // 删除
        // lang.hitch指定上下文来执行方法
        on(table,"buttonClick",lang.hitch(this , function (btnName,j,item,index,i) {
            switch (btnName){
                case Xxx.edit :
                    var diaBox = domConstruct.create("div");
                    var myContent = domConstruct.create("div",{class : "myContent"});
                    var btnNo = domConstruct.create("div",{class : "btnNode"});
                    var btnYes = domConstruct.create("div",{class : "btnYes"});
                    domStyle.set(myContent,{
                        "height" : "74px",
                        "line-height" : "50px"
                    });
                    domStyle.set(btnYes,{
                        "margin-bottom": "10px"
                    });
                    domStyle.set(btnNo,{
                        "margin-bottom": "10px",
                        "margin-left" : "10px"
                    });
                    domConstruct.place(myContent,diaBox);
                    domConstruct.place(btnNo,diaBox);
                    domConstruct.place(btnYes,diaBox);
                    myContent.innerText = Xxx.ifEdit + "？";
                    btnYes.innerText = Xxx.right;
                    btnNo.innerText = Xxx.cancel;

                    var checkDialog = new Dialog({
                        title : Xxx.tip,
                        content : diaBox,
                        style:"width:326px;height:145px;background-color : #fff"
                    });
                    checkDialog.show();
                    on(btnYes,"click",function(){
                    	// 同上
                        topic.publish(self.domNode.id+"tableClick", item);
                        checkDialog.hide();
                    });
                    on(btnNo,"click",function(){
                        checkDialog.hide();
                    });
                    break;
                case Xxx.delete :
                    var diaBox = domConstruct.create("div");
                    var myContent = domConstruct.create("div",{class : "myContent"});
                    var btnNo = domConstruct.create("div",{class : "btnNode"});
                    var btnYes = domConstruct.create("div",{class : "btnYes"});
                    domStyle.set(myContent,{
                        "height" : "74px",
                        "line-height" : "50px"
                    });
                    domStyle.set(btnYes,{
                        "margin-bottom": "10px"
                    });
                    domStyle.set(btnNo,{
                        "margin-bottom": "10px",
                        "margin-left" : "10px"
                    });
                    domConstruct.place(myContent,diaBox);
                    domConstruct.place(btnNo,diaBox);
                    domConstruct.place(btnYes,diaBox);
                    myContent.innerText = Xxx.ifDelete + "？";
                    btnYes.innerText = Xxx.right;
                    btnNo.innerText = Xxx.cancel;

                    var checkDialog = new Dialog({
                        title : Xxx.tip,
                        content : diaBox,
                        style:"width:326px;height:145px;background-color : #fff"
                    });
                    checkDialog.show();
                    on(btnYes,"click",function(){
                        topic.publish(self.domNode.id+"buttonDelClick", item);
                        checkDialog.hide();
                    });
                    on(btnNo,"click",function(){
                        checkDialog.hide();
                    });
                    break;
            }
        }))
    },

    onAddOne : function () {},
    onTableClick : function (data) {},
    onButtonDelClick : function (data) {},
    onButtonClick : function (data) {}
});
// 一定要返回它本身,因为这部分js是在declare的function里面的
return xxx;

比较不容易理解的一部分就是订阅发布那里了，比如：onAddOne()这个函数，这里本身什么内容都没有，为什么它就是能走到后台呢，答案在Setup.js这个文件里面，这个文件里面也有onAddOne()这个方法，Setup.js里面的该方法是有内容的。（这里的思想大致和java的继承思想类似）

总结： dojo框架使用起来如果有一定的java基础的话，会比较轻松入手。只不过国内的小白文档还是太少，对于英文不过关的人来说，感觉入手还是挺吃力的。

DemoImpl

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
dojo工作中用到的相关代码讲解笔记

开头部分define("widgets/xxx",[ "widgets/_Widget", "widgets/LevelButton", "widgets/Table", "dijit/form/CheckBox", "dijit/form/FilteringSelect", "dojo/_base/declare", "dojo/dom-...
复制链接

扫一扫

专栏目录