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

首先，先推荐一篇AMD方面的文章，有兴趣的可以参考：http://efe.baidu.com/blog/dissecting-amd-what/

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

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

HTML内容如下：

 <div id="mapType-wrapper" class="${baseClass}" data-dojo-attach-point="mapTypeDom">

     <div id="mapType">

         <div class="mapTypeCard normal active" data-name="normalMap">

             <div class="switch-box"><input type="checkbox" class="switch">

                 <p>显示收藏点</p>

             </div> <span>地图</span></div>

         <div class="mapTypeCard satellite" data-name="satellite">

             <div class="switch-box"><input type="checkbox" class="switch" checked="true">

                 <p>开启路网</p>

             </div> <span>卫星</span></div>

         <div class="mapTypeCard panorama choosedType" data-name="panorama"> <span>全景</span></div>

     </div>

 </div>
data-dojo-attach-point="mapTypeDom"为该标签指定实践时使用。

接下来是js中的内容，使用dojo/text!将js与html结合，并加载样式（css）和添加鼠标移入移除事件：
 /**

  * Created by lenovo on 2016/12/18.

  */

 define([

     "dojo/_base/declare",

     "dojo/text!/scada/app/widget/viewchoose/templates/viewchoose.html",

     "dijit/_WidgetBase",

     "dojo/dom",

     "dojo/on",

     "dijit/_TemplatedMixin",

 ], function (declare, template, _WidgetBase, dom, on, _TemplatedMixin) {

     return declare([_WidgetBase, _TemplatedMixin], {

         templateString: template,// 设置模板页

         baseClass: "viewchoose",// 基础样式名称

         /**

          * 控件销毁时的处理。

          */

         uninitialize: function () {

         },

         /**

          * 控件在渲染到页面上显示时的处理。

          */

         startup: function () {

         },

         /**

          * 控件加载到页面DOM上，浏览器渲染显示之前的处理。

          */

         postCreate: function () {

             alert("1");

             this._initRes();// 初始化资源

             this._initEvent();// 初始化内部事件

         },

         /**

          * 初始化本控件内部的事件处理。

          *

          * @private

          */

         _initEvent: function () {

             this.initEvent();

         },

         /**

          * 初始化本控件内部的资源（样式、脚本、数据等）。

          *

          * @private

          */

         _initRes: function () {

             //加载样式

             dynamicLoad.resource([require.toUrl("/scada/app/widget/viewchoose/css/viewchoose.css")]);

         },

         initEvent: function () {

             this.own(

                 on(this.mapTypeDom, "mouseover", function () {

                     // $('#dijit__TemplatedMixin_0').removeClass('viewchoose');

                     $('.viewchoose').addClass('expand');

                 }),

                 on(this.mapTypeDom, "mouseout", function () {

                     $('.expand').removeClass('expand');

                 })

             );

         },

     });

 });

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

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

创建测试的HTML，以及js：

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport"

           content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

     <meta name="format-detection" content="telephone=no">

     <meta name="screen-orientation" content="portrait">

     <meta name="x5-orientation" content="portrait">

     <title>测试AMD</title>

     <script type="text/javascript" src="../js/jquery.min.js"></script>

     <script type="text/javascript" src="../js/fastclick.js"></script>

     <script type="text/javascript" src="../js/resize.js"></script>

     <script type="text/javascript" src="../../conf/config.js"></script>

     <script type="text/javascript" src="../../lib/framework/core.js"></script>

 </head>

 <body>

 <div id="testamd"></div>

 <script type="text/javascript">

     $("html,body").addClass("full-body");

     // 加载需要导入的脚本和样式

     dynamicLoad.resource([

         baseConfig.resRoot + "/library/3.17/3.17/dijit/themes/tundra/tundra.css",

         baseConfig.resRoot + "/library/3.17/3.17/dojo/dojo.js",

         baseConfig.webRoot + "/app/widget/test.js"

     ], true, function () {

     });

 </script>

     </body>

 </html>

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

 /**

  * Created by lenovo on 2016/12/21.

  */

 require([

     "viewchoose/ViewChooseWidget.js","dojo/dom","dojo/domReady!"

 ],function (widget,dom) {

     var viewchooseObj = new widget();

     var contDom = dom.byId('testamd');

     viewchooseObj.placeAt(contDom);

 })

以上。

【原创】（AMD）JavaScript模块化开发（dojo）的更多相关文章

  1. Javascript模块化开发，使用模块化脚本加载工具RequireJS，提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

  2. Javascript 模块化开发上线解决方案

    最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...

  3. Javascript模块化开发－轻巧自制

    Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展 ...

  4. JavaScript模块化开发整理

    在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...

  5. JavaScript模块化开发的那些事

    模块化开发在编程开发中是一个非常重要的概念,一个优秀的模块化项目的后期维护成本可以大大降低.本文主要介绍了JavaScript模块化开发的那些事,文中通过一个小故事比较直观地阐述了模块化开发的过程. ...

  6. 详解JavaScript模块化开发

    什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...

  7. （转）详解JavaScript模块化开发

    https://segmentfault.com/a/1190000000733959 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来j ...

  8. JavaScript模块化开发&&模块规范

    在做项目的过程中通常会有一些可复用的通用性功能,之前的做法是把这个功能抽取出来独立为一个函数统一放到commonFunctions.js里面(捂脸),实现类似于snippets的代码片段收集. fun ...

  9. JavaScript进阶【一】JavaScript模块化开发的基础知识

    //模块化的最初写法 //1.最初写法 //下面的m1和m2就组成了一个模块 //缺点:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系. f ...

  10. javascript 模块化开发(一)

    什么是模块化 将一组模块(及其依赖项)以正确的顺序拼接到一个文件(或一组文件)中的过程. 传统的模块化做法. 模块是实现特定功能的一组属性和方法的封装. 将模块写成一个对象,所有的模块成员都放到这个对 ...

随机推荐

  1. html基本选择符的使用

    一.选择符在运用在CSS设计样式时对HTML的指定有至关重要的作用! 二.研究 普通选择符: 1.类型选择符:它可以选择同一个类型的元素! 例如:h1,h2 {              color: ...

  2. 关于type erasure

    哇,好久没有写blog了,再不写的话,blog的秘密都要忘记了,嘿嘿. 最近在试着参与一个开源项目,名字叫avim(A Vibrate IM),别想多了哟.地址是:https://github.com ...

  3. quicksort

    快排.... void quicksort(int *a,int left,int right){ if(left >= right){ return ; } int i = left; int ...

  4. ajax请求的封装

    前端的工作,免不了要用到交互,请求后端的数据,可能大多人一直选择用jq封装好的方法直接使用,要知道封装这个事我们自己也可以的,今天给大家介绍一种封装方法,而且连跨域问题都不在话下,有了这个函数,是不是 ...

  5. 启动Hive时出现的问题

    Caused by: org.apache.hadoop.hive.ql.metadata.HiveException: java.lang.RuntimeException: Unable to i ...

  6. 高级java必会系列一：多线程的简单使用

    众所周知,开启线程2种方法:第一是实现Runable接口,第二继承Thread类.(当然内部类也算...)常用的,这里就不再赘述.本章主要分析总结线程池和常用调度类. 一.线程池 1.newCache ...

  7. Python开发【十一章】：RabbitMQ队列

    RabbitMQ队列 rabbitMQ是消息队列:想想之前的我们学过队列queue:threading queue(线程queue,多个线程之间进行数据交互).进程queue(父进程与子进程进行交互或 ...

  8. DOS基础命令

    对服务(service)的操作 命令 功能 Net start 查看Windows开启的服务 Net stop [service name] 停止服务 net start [service name] ...

  9. Android 基于Android的手机邮件收发（JavaMail）之四（邮件的发送）

    上一个邮件的接受,因为不当操作,保存未完成,一切东西都得从头开始那就先从邮件发送来吧. 先下我们做一个较为简单的邮件发送 以下是源代码:相信看过上篇文章所给连接的人,对于javamail应该都有了一定 ...

  10. SLP测试记录

    个人感觉来说这个游戏对我没有什么吸引力...完全不知道用户需求在哪...是我最不喜欢的一个游戏 不过听制作团队之前的介绍,这应该不算是一个游戏,而是一个游戏练习器?所以从游戏的角度来评判的话感觉有很多 ...