AMD原理等在这里就不进行说明了，作者也是菜鸟一枚，只是对自己的一个实例进行说明，如有错误，望指出。

首先，先推荐一篇AMD方面的文章，有兴趣的可以参考：

 

接下来便是我自己的实例了：

1.模块化编程，则需要先有个模块了，而模块便是由HTML与js结合成的，在widget目录下，定义一个待编辑模块目录：

HTML内容如下：

1 
     
       2     
      
        3         
       
         4             
        
          5                 
         
显示收藏点
 6             
        
 
        地图
       
 7         
       
         8             
        
          9                 
         
开启路网
10             
        
 
        卫星
       
11         
       
 
        全景
       
12     
      
13 
     

data-dojo-attach-point="mapTypeDom"为该标签指定实践时使用。 接下来是js中的内容，使用dojo/text!将js与html结合，并加载样式（css）和添加鼠标移入移除事件：

1 /** 2  * Created by lenovo on 2016/12/18. 3  */ 4  5 define([ 6     "dojo/_base/declare", 7     "dojo/text!/scada/app/widget/viewchoose/templates/viewchoose.html", 8     "dijit/_WidgetBase", 9     "dojo/dom",10     "dojo/on",11     "dijit/_TemplatedMixin",12 13 14 ], function (declare, template, _WidgetBase, dom, on, _TemplatedMixin) {15 16     return declare([_WidgetBase, _TemplatedMixin], {17 18         templateString: template,// 设置模板页19         baseClass: "viewchoose",// 基础样式名称20 21         /**22          * 控件销毁时的处理。23          */24         uninitialize: function () {25 26         },27 28         /**29          * 控件在渲染到页面上显示时的处理。30          */31         startup: function () {32 33         },34 35         /**36          * 控件加载到页面DOM上，浏览器渲染显示之前的处理。37          */38         postCreate: function () {39             alert("1");40             this._initRes();// 初始化资源41             this._initEvent();// 初始化内部事件42 43 44 45         },46 47         /**48          * 初始化本控件内部的事件处理。49          *50          * @private51          */52         _initEvent: function () {53             this.initEvent();54         },55 56 57         /**58          * 初始化本控件内部的资源（样式、脚本、数据等）。59          *60          * @private61          */62         _initRes: function () {63             //加载样式64             dynamicLoad.resource([require.toUrl("/scada/app/widget/viewchoose/css/viewchoose.css")]);65         },66         initEvent: function () {67             this.own(68                 on(this.mapTypeDom, "mouseover", function () {69                     // $('#dijit__TemplatedMixin_0').removeClass('viewchoose');70                     $('.viewchoose').addClass('expand');71                 }),72                 on(this.mapTypeDom, "mouseout", function () {73                     $('.expand').removeClass('expand');74                 })75             );76         },77 78     });79 });

js中均有注释，就不在做说明。

2.接下来便是如何引用该模块。

创建测试的HTML，以及js：

 

 test.html中，需引入jquery、dojo相关包，以及test.js

1  2  3  4     
      5     
      7     
      8     
      9     
     10     11     12     13     14 15     16     17 18 19 20 
     
21 22 33     34 

test.js中引入模块化的对象，放入需使用的地方：

1 /** 2  * Created by lenovo on 2016/12/21. 3  */ 4  5 require([ 6     "viewchoose/ViewChooseWidget.js","dojo/dom","dojo/domReady!" 7  8 ],function (widget,dom) { 9     var viewchooseObj = new widget();10     var contDom = dom.byId('testamd');11 12     viewchooseObj.placeAt(contDom);13 })

 

以上。