这篇文章主要介绍了使用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. golang 重构博客统计服务

    欢迎关注楼主与他的小伙伴们的小站,每周分享一些技术文章,让我们在技术上一起成长------> 戳这里,欢迎光临小站 -_- 作为一个后端开发,在docker,etcd,k8s等新技术不断涌现的今 ...

  2. javascript framework vue.js

    vue.js 参考: http://cn.vuejs.org/guide/installation.html   不管使用何框架,首先都是要创建它的实例: var vue = new Vue({//参 ...

  3. NSLocale 本地化信息

    前言 NSLocale 类返回本地化信息,主要体现在"语言"和"区域格式"这两个设置项. 1.NSLocale 本地化信息的创建 // 用标示符创建 NSLoc ...

  4. 第七篇 Python面向对象

    类是对一群具有相同特征或者行为的事物的一个统称,是抽象的,不能直接使用,特征被称为属性,行为被称为方法,类就相当于制造飞机时的图纸,是一个模板,是负责创建对象的. 对象是由类创建出来的一个具体存在,可 ...

  5. shell和python之间的参数传递

        我们在使用shell调用其他语言的程序的时候,希望能够便捷的从shell中输入参数,然后由目标程序接收参数并运行,这样就省去了每次需要在原程序进行修改带来的麻烦,这里介绍一下如何从shell中 ...

  6. Java程序员修炼之路

    作者简介:王成委,CSDN知识库特邀编辑,Java高级工程师,熟悉Java编程语言和Oracle数据库.专注于高并发架构设计和大数据存储方向的研究. 我们为什么选择Java 大多数人选择Java可能只 ...

  7. 【bzoj3998】弦论 后缀自动机

    Description 对于一个给定长度为N的字符串,求它的第K小子串是什么. Input 第一行是一个仅由小写英文字母构成的字符串S 第二行为两个整数T和K,T为0则表示不同位置的相同子串算作一个. ...

  8. centos7用docker安装kafka

    参考之前的文章安装zookeeper集群  https://www.cnblogs.com/xiaohanlin/p/10124674.html 如果是测试环境也可以简单安装单节点的zookeeper ...

  9. JDBC_ResultSet结果集用法_游标原理_关闭连接问题

    依次关闭使用对象及连接 ResultSet---Statement--Connectionimport java.sql.Connection;import java.sql.DriverManage ...

  10. upsource代码审查

    upsource 从零搭建代码审查平台,需要的不仅是把代码审查的工具搭起来,还要结合公司情况制定一系列的代码审查规范.下面是对选择的upsource web端代码审查工具的安装及介绍.详细的请看这篇文 ...