使用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 api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
javascript中检测变量的类型的代码
Dec 28 Javascript
分页栏的web标准实现
Nov 01 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 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
利用 window_onload 实现select默认选择
2006/10/09 PHP
收集的PHP中与数组相关的函数
2007/03/22 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
用Juery网页选项卡实现代码
2011/06/13 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
vue中使用腾讯云Im的示例
2020/10/23 Javascript
浅析Python编写函数装饰器
2016/03/18 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
实习单位推荐信范文
2013/11/27 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
优秀实习生感言
2014/03/01 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL