使用mini-define实现前端代码的模块化管理


Posted in Javascript onDecember 25, 2014

mini-define

依据require实现的简易的前端模块化框架。如果你不想花时间学习require.js,也不想翻看长篇的cmd/amd规范,那么这个mini-define就是你不错的选择。如果你之前用过sea.js或require.js那么mini-define更加高效,更加轻量,更加易用。项目地址:github

用法

首先定义模块

定义模块

一:定义模块用define函数

1.1 根据是否有依赖,有两种情况:

1.1.1:没有依赖的模块

        define('id',function(){

            // put your code here

        });

1.1.2:有依赖的模块

        define('id',['modeA','modeB'],function(A,B){

            // put your code here

        });

1.2 根据是否需要返回处理结果给外部使用,又可以分两种情况:

1.2.1有返回对象:

            define('id',function(){

                return {

                    // put your code here

                }

            });

1.2.2 没有返回对象

            define('id',function(){

                // put your code here

            });

二: 调用模块用require()函数

2.1 根据请求的模块数,可以有两情况:

    2.1.1.调用单个模块

        require('modeId')

    2.1.2.调用多个模块
            require(['modeA','modeB']);
2.2 根据是否有回调处理,又可以分为两种情况:

    2.2.1 有回调处理函数

            require('modeId',function(mode){

                //put your code here

            });
            require(['modeA','modeB'],function(A,B){

                //put your code here

            });

    2.2.2 没有回调处理
            require('modeId');
然后在index.html页面依次引用所需模块

<!--核心模块-->

<script src="lib/core/require.js"></script>

<!--用于演示的模块-->

<script src="lib/main.js"></script>

<script src="lib/config.js"></script>

<script src="lib/init.js"></script>

最后就是用你喜欢的方式对lib目录进行合并压缩,生成一个min.js文件。 在发布应用的时候,相应的index.html也需要调整一下:

<script src="lib/min.js"></script>

优点:

相对于seajs.js或原版的require.js来说,加注释才一百来行的代码用轻量来形容都显胖,完全是骨感。
完全没有什么高深的内容,也没有复杂的技巧,几乎是零学习成本。

Javascript 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
js直接编辑当前cookie的脚本
Sep 14 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
jQuery中html()方法用法实例
Dec 25 #Javascript
jQuery中val()方法用法实例
Dec 25 #Javascript
24款热门实用的jQuery插件推荐
Dec 24 #Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 #Javascript
Javascript 多物体运动的实现
Dec 24 #Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 #Javascript
jQuery中height()方法用法实例
Dec 24 #Javascript
You might like
php 文章调用类代码
2011/08/11 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
python属于哪种语言
2020/08/16 Python
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
模具数控专业自荐信
2014/01/27 职场文书
《识字五》教学反思
2014/03/01 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
个人委托书范本汇总
2014/10/01 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
公积金具结保证书
2015/05/11 职场文书
民事上诉状范文
2015/05/22 职场文书
清明节主题班会
2015/08/14 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
如何利用python实现列表嵌套字典取值
2022/06/10 Python