使用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 相关文章推荐
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
如何在php中正确的使用json
2013/08/06 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
python连接mysql调用存储过程示例
2014/03/05 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python优先队列实现方法示例
2017/09/21 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
Series和DataFrame使用简单入门
2019/11/13 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
python math模块的基本使用教程
2021/01/16 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
幼儿园美术教学反思
2014/01/31 职场文书
表彰大会新闻稿
2015/07/17 职场文书
银行培训心得体会范文
2016/01/09 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
Golang ort 中的sortInts 方法
2022/04/24 Golang
win sever 2022如何占用操作主机角色
2022/06/25 Servers