使用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
有一段都在重构之前文章<我和我的广告前端代码(三):一次重来的机会,必要的技术选型>中提到的广告前台展示项目,原有的基于页面的请求,改成了单广告位请求在这个过程中经历了好几次架构变更以及项 ...
随机推荐
- golang 重构博客统计服务
欢迎关注楼主与他的小伙伴们的小站,每周分享一些技术文章,让我们在技术上一起成长------> 戳这里,欢迎光临小站 -_- 作为一个后端开发,在docker,etcd,k8s等新技术不断涌现的今 ...
- javascript framework vue.js
vue.js 参考: http://cn.vuejs.org/guide/installation.html 不管使用何框架,首先都是要创建它的实例: var vue = new Vue({//参 ...
- NSLocale 本地化信息
前言 NSLocale 类返回本地化信息,主要体现在"语言"和"区域格式"这两个设置项. 1.NSLocale 本地化信息的创建 // 用标示符创建 NSLoc ...
- 第七篇 Python面向对象
类是对一群具有相同特征或者行为的事物的一个统称,是抽象的,不能直接使用,特征被称为属性,行为被称为方法,类就相当于制造飞机时的图纸,是一个模板,是负责创建对象的. 对象是由类创建出来的一个具体存在,可 ...
- shell和python之间的参数传递
我们在使用shell调用其他语言的程序的时候,希望能够便捷的从shell中输入参数,然后由目标程序接收参数并运行,这样就省去了每次需要在原程序进行修改带来的麻烦,这里介绍一下如何从shell中 ...
- Java程序员修炼之路
作者简介:王成委,CSDN知识库特邀编辑,Java高级工程师,熟悉Java编程语言和Oracle数据库.专注于高并发架构设计和大数据存储方向的研究. 我们为什么选择Java 大多数人选择Java可能只 ...
- 【bzoj3998】弦论 后缀自动机
Description 对于一个给定长度为N的字符串,求它的第K小子串是什么. Input 第一行是一个仅由小写英文字母构成的字符串S 第二行为两个整数T和K,T为0则表示不同位置的相同子串算作一个. ...
- centos7用docker安装kafka
参考之前的文章安装zookeeper集群 https://www.cnblogs.com/xiaohanlin/p/10124674.html 如果是测试环境也可以简单安装单节点的zookeeper ...
- JDBC_ResultSet结果集用法_游标原理_关闭连接问题
依次关闭使用对象及连接 ResultSet---Statement--Connectionimport java.sql.Connection;import java.sql.DriverManage ...
- upsource代码审查
upsource 从零搭建代码审查平台,需要的不仅是把代码审查的工具搭起来,还要结合公司情况制定一系列的代码审查规范.下面是对选择的upsource web端代码审查工具的安装及介绍.详细的请看这篇文 ...