dojo工作中用到的相關代碼講解筆記

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基礎的話，會比較輕鬆入手。只不過國內的小白文檔還是太少，對於英文不過關的人來說，感覺入手還是挺吃力的。

dojo工作中用到的相關代碼講解筆記

xxx.js開頭部分

xxx.js中間部分

vue項目獲取富文本編輯器wangEditor內容導出爲word（html轉word格式並下載）

dotnet C# 創建 X11 應用時設置窗口背景顏色

Navicat安裝與激活教程

TDengine docker安裝方法

vue3組件通信與props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的發佈時間

工作中用到的腳本合集

合併代碼時Beyond Compare設置

java微信公衆號URL訪問時替換關鍵字所使用的通用方法

關於Navicat創建mysql表結構的時候datetime不支持默認值的解決方案

關於阿里開源的fastjson不支持null的解決方案

全棧工程師面試要求

springboot不怎麼太支持httpResponse.getWriter()這個方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結