使用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 学习点滴记录
Apr 24 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
javascript实用方法总结
Feb 06 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
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-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
php swoft框架实例用法
2020/12/22 PHP
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
Python学习小技巧之列表项的排序
2017/05/20 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python 批量修改/替换数据的实例
2018/07/25 Python
通过shell+python实现企业微信预警
2019/03/07 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
医院总经理职责
2013/12/26 职场文书
给民警的表扬信
2014/01/08 职场文书
国际会议邀请函范文
2014/01/16 职场文书
推荐信格式范文
2014/05/09 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
领导干部考核评语
2015/01/04 职场文书