使用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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
Javascript玩转继承(一)
May 08 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
JS继承用法实例分析
Feb 05 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
QML实现圆环颜色选择器
Sep 25 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
js控制table合并具体实现
2014/02/20 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
JS实现页面打印功能
2017/03/16 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
使用PDB简单调试Python程序简明指南
2015/04/25 Python
Python映射拆分操作符用法实例
2015/05/19 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
学习python的前途 python挣钱
2019/02/27 Python
Python callable内置函数原理解析
2020/03/05 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
python调用摄像头的示例代码
2020/09/28 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
2014年工程部工作总结
2014/11/25 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript