原创（AMD）JavaScript模块化开发（dojo）
Posted sunnyny
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原创（AMD）JavaScript模块化开发（dojo）相关的知识，希望对你有一定的参考价值。
AMD原理等在这里就不进行说明了，作者也是菜鸟一枚，只是对自己的一个实例进行说明，如有错误，望指出。
首先，先推荐一篇AMD方面的文章，有兴趣的可以参考：http://efe.baidu.com/blog/dissecting-amd-what/
接下来便是我自己的实例了：
1.模块化编程，则需要先有个模块了，而模块便是由html与js结合成的，在widget目录下，定义一个待编辑模块目录：
HTML内容如下：
1 <div id="mapType-wrapper" class="${baseClass}" data-dojo-attach-point="mapTypeDom"> 2 <div id="mapType"> 3 <div class="mapTypeCard normal active" data-name="normalMap"> 4 <div class="switch-box"><input type="checkbox" class="switch"> 5 <p>显示收藏点</p> 6 </div> <span>地图</span></div> 7 <div class="mapTypeCard satellite" data-name="satellite"> 8 <div class="switch-box"><input type="checkbox" class="switch" checked="true"> 9 <p>开启路网</p> 10 </div> <span>卫星</span></div> 11 <div class="mapTypeCard panorama choosedType" data-name="panorama"> <span>全景</span></div> 12 </div> 13 </div>
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 * @private 51 */ 52 _initEvent: function () { 53 this.initEvent(); 54 }, 55 56 57 /** 58 * 初始化本控件内部的资源（样式、脚本、数据等）。 59 * 60 * @private 61 */ 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 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 7 <meta name="format-detection" content="telephone=no"> 8 <meta name="screen-orientation" content="portrait"> 9 <meta name="x5-orientation" content="portrait"> 10 <title>测试AMD</title> 11 <script type="text/javascript" src="../js/jquery.min.js"></script> 12 <script type="text/javascript" src="../js/fastclick.js"></script> 13 <script type="text/javascript" src="../js/resize.js"></script> 14 15 <script type="text/javascript" src="../../conf/config.js"></script> 16 <script type="text/javascript" src="../../lib/framework/core.js"></script> 17 18 </head> 19 <body> 20 <div id="testamd"></div> 21 22 <script type="text/javascript"> 23 $("html,body").addClass("full-body"); 24 // 加载需要导入的脚本和样式 25 dynamicLoad.resource([ 26 baseConfig.resRoot + "/library/3.17/3.17/dijit/themes/tundra/tundra.css", 27 baseConfig.resRoot + "/library/3.17/3.17/dojo/dojo.js", 28 baseConfig.webRoot + "/app/widget/test.js" 29 ], true, function () { 30 }); 31 32 </script> 33 </body> 34 </html>
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 })
以上。
以上是关于原创（AMD）JavaScript模块化开发（dojo）的主要内容，如果未能解决你的问题，请参考以下文章