这篇文章主要介绍了使用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实现前端代码的模块化管理的更多相关文章

  1. 模块化管理工具兼打包工具 webpack

    webpack 是一个[模块化管理工具]兼[打包工具] 是一个工具(和seajs,requirejs管理前端模块的方式是不一样) 在webpack一个文件就是一个模块! seajs,requirejs ...

  2. 前端工程之模块化(来自百度FEX)

    模块化 是一种处理复杂系统分解成为更好的可管理模块的方式,它可以把系统代码划分为一系列职责单一,高度解耦且可替换的模块,系统中某一部分的变化将如何影响其它部分就会变得显而易见,系统的可维护性更加简单易 ...

  3. Effective前端5:减少前端代码耦合

    什么是代码耦合?代码耦合的表现是改了一点毛发而牵动了全身,或者是想要改点东西,需要在一堆代码里面找半天.由于前端需要组织js/css/html,耦合的问题可能会更加明显,下面按照耦合的情况分别说明: ...

  4. Webpack:前端资源模块化管理和打包工具

    一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...

  5. 前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总

    内容精简 资源这么多,多看看多学习再总结肯定是好的.多读读就算看重了不算浪费时间,毕竟一千个读者就有一千个林黛玉,还有温故而知新,说不定多读一些内容,就发现惊喜了呢.不过,在此也精简一些内容,就1~2 ...

  6. 《前端之路》之 Javascript 模块化管理的来世今生

    目录 第二章 - 04: Javascript 模块化管理的来世今生 一.什么是模块化开发 1-1.模块化第一阶段 1-2.封装到对象 1-3. 对象的优化 二.模块化管理的发展历程 2-1.Comm ...

  7. 【Web前端开发最佳实践系列】前端代码推荐和建议

    一.常用的前端文件的组织结构: 1.js (放置JavaScript代码) lib(放置框架JavaScript文件) custom.js 2.css(放置CSS样式代码) lib(放置框架CSS文件 ...

  8. Web前端开发最佳实践(2):前端代码重构

    前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...

  9. 我和我的广告前端代码(四):后台系统中,初尝vue、vue-cli

    有一段都在重构之前文章<我和我的广告前端代码(三):一次重来的机会,必要的技术选型>中提到的广告前台展示项目,原有的基于页面的请求,改成了单广告位请求在这个过程中经历了好几次架构变更以及项 ...

随机推荐

  1. 死磕Java之聊聊ThreadLocal源码(基于JDK1.8)

    记得在一次面试中被问到ThreadLocal,答得马马虎虎,所以打算研究一下ThreadLocal的源码 面试官 : 用过ThreadLocal吗? 楼主答 : 用过,当时使用ThreadLocal的 ...

  2. [译] 关于 SPA,你需要掌握的 4 层 (2)

    此文已由作者张威授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 视图层 现在我们有了一个可执行且不依赖于框架的应用程序,React 已经准备投入使用. 视图层由 presen ...

  3. [Violet]樱花

    题目链接 洛谷 狗粮版 前置技能 初中基础的因式分解 线性筛 \(O(nlog)\)的分解质因数 唯一分解定理 题解 首先来分解一下式子 \[\frac{1}{x}+\frac{1}{y}=\frac ...

  4. Linux解压工具

    指令 yum  install lrzsz

  5. c编译错误[Error] ld returned 1 exit status 解决

    [Error] ld returned exit status 编译的过程中出现这个错误极有可能是因为函数名错误引起的,因此回到源码中观察函数名,尤其是那些库函数中的函数.

  6. Android--Apache HttpClient 的一些问题

    1,对于Android4.0之上的环境下,不能在主线程中访问网络    http://www.cnblogs.com/plokmju/p/Android_apacheHttpClient.html   ...

  7. SQL中删除重复的行(重复数据),只保留一行 转

    方法一:使用在T-SQL的编程中 分配一个列号码,以COL1,COL2组合来分区排序,删除DATABASE重复的行(重复数据),只保留一行 // COL1,COL2是数据库DATABASE的栏位 de ...

  8. Optimizing and caching browser bundles...

    扎心了,老铁!!! 他妈的,弄了几天都是卡在这里!!上网查了一下.说是我的内存不够,好吧.我慢慢等,然而让我等了好几天都没什么反应..两天了,一直卡在这里.今天在虚拟机也是发狠了. 我直接把虚拟机的内 ...

  9. Modular Inverse (拓展欧几里得求逆元)

    The modular modular multiplicative inverse of an integer a modulo m is an integer xsuch that a-1≡x ( ...

  10. [转] JavaScript中的Truthy和Falsy介绍

    [From] http://www.jb51.net/article/59285.htm 与大多数编程语言一样,JavaScript中存在boolean类型,以供逻辑判断使用.不过,和很多其它编程语言 ...