使用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 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 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 Image Resize图片大小调整的函数代码
2011/01/17 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
python 接收处理外带的参数方法
2018/12/03 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
店长岗位职责
2013/11/21 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
会议开场欢迎词
2014/01/15 职场文书
药店主任岗位责任制
2014/02/10 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
《老山界》教学反思
2014/04/08 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
Python turtle实现贪吃蛇游戏
2021/06/18 Python