使用mini-define实现前端代码的模块化管理
这篇文章主要介绍了使用mini-define实现前端代码的模块化管理,十分不错的一篇文章,这里推荐给有需要的小伙伴。
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 没有回调处理
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>
使用mini-define实现前端代码的模块化管理的更多相关文章
- 模块化管理工具兼打包工具 webpack
webpack 是一个[模块化管理工具]兼[打包工具] 是一个工具(和seajs,requirejs管理前端模块的方式是不一样) 在webpack一个文件就是一个模块! seajs,requirejs ...
- 前端工程之模块化(来自百度FEX)
模块化 是一种处理复杂系统分解成为更好的可管理模块的方式,它可以把系统代码划分为一系列职责单一,高度解耦且可替换的模块,系统中某一部分的变化将如何影响其它部分就会变得显而易见,系统的可维护性更加简单易 ...
- Effective前端5:减少前端代码耦合
什么是代码耦合?代码耦合的表现是改了一点毛发而牵动了全身,或者是想要改点东西,需要在一堆代码里面找半天.由于前端需要组织js/css/html,耦合的问题可能会更加明显,下面按照耦合的情况分别说明: ...
- Webpack:前端资源模块化管理和打包工具
一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...
- 前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总
内容精简 资源这么多,多看看多学习再总结肯定是好的.多读读就算看重了不算浪费时间,毕竟一千个读者就有一千个林黛玉,还有温故而知新,说不定多读一些内容,就发现惊喜了呢.不过,在此也精简一些内容,就1~2 ...
- 《前端之路》之 Javascript 模块化管理的来世今生
目录 第二章 - 04: Javascript 模块化管理的来世今生 一.什么是模块化开发 1-1.模块化第一阶段 1-2.封装到对象 1-3. 对象的优化 二.模块化管理的发展历程 2-1.Comm ...
- 【Web前端开发最佳实践系列】前端代码推荐和建议
一.常用的前端文件的组织结构: 1.js (放置JavaScript代码) lib(放置框架JavaScript文件) custom.js 2.css(放置CSS样式代码) lib(放置框架CSS文件 ...
- Web前端开发最佳实践(2):前端代码重构
前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...
- 我和我的广告前端代码(四):后台系统中,初尝vue、vue-cli
有一段都在重构之前文章<我和我的广告前端代码(三):一次重来的机会,必要的技术选型>中提到的广告前台展示项目,原有的基于页面的请求,改成了单广告位请求在这个过程中经历了好几次架构变更以及项 ...
随机推荐
- 死磕Java之聊聊ThreadLocal源码(基于JDK1.8)
记得在一次面试中被问到ThreadLocal,答得马马虎虎,所以打算研究一下ThreadLocal的源码 面试官 : 用过ThreadLocal吗? 楼主答 : 用过,当时使用ThreadLocal的 ...
- [译] 关于 SPA,你需要掌握的 4 层 (2)
此文已由作者张威授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 视图层 现在我们有了一个可执行且不依赖于框架的应用程序,React 已经准备投入使用. 视图层由 presen ...
- [Violet]樱花
题目链接 洛谷 狗粮版 前置技能 初中基础的因式分解 线性筛 \(O(nlog)\)的分解质因数 唯一分解定理 题解 首先来分解一下式子 \[\frac{1}{x}+\frac{1}{y}=\frac ...
- Linux解压工具
指令 yum install lrzsz
- c编译错误[Error] ld returned 1 exit status 解决
[Error] ld returned exit status 编译的过程中出现这个错误极有可能是因为函数名错误引起的,因此回到源码中观察函数名,尤其是那些库函数中的函数.
- Android--Apache HttpClient 的一些问题
1,对于Android4.0之上的环境下,不能在主线程中访问网络 http://www.cnblogs.com/plokmju/p/Android_apacheHttpClient.html ...
- SQL中删除重复的行(重复数据),只保留一行 转
方法一:使用在T-SQL的编程中 分配一个列号码,以COL1,COL2组合来分区排序,删除DATABASE重复的行(重复数据),只保留一行 // COL1,COL2是数据库DATABASE的栏位 de ...
- Optimizing and caching browser bundles...
扎心了,老铁!!! 他妈的,弄了几天都是卡在这里!!上网查了一下.说是我的内存不够,好吧.我慢慢等,然而让我等了好几天都没什么反应..两天了,一直卡在这里.今天在虚拟机也是发狠了. 我直接把虚拟机的内 ...
- Modular Inverse (拓展欧几里得求逆元)
The modular modular multiplicative inverse of an integer a modulo m is an integer xsuch that a-1≡x ( ...
- [转] JavaScript中的Truthy和Falsy介绍
[From] http://www.jb51.net/article/59285.htm 与大多数编程语言一样,JavaScript中存在boolean类型,以供逻辑判断使用.不过,和很多其它编程语言 ...