使用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.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来说，加注释才一百来行的代码用轻量来形容都显胖，完全是骨感。
完全没有什么高深的内容，也没有复杂的技巧，几乎是零学习成本。

赞 (0)

相关推荐

  • 拥抱模块化的JavaScript

    我们再一次被计算机的名词,概念笼罩.backbone.emberjs.spinejs.batmanjs 等MVC框架侵袭而来.CommonJS.AMD.NodeJS.RequireJS.SeaJS.curljs等模块化的JavaScript扑面而来.模块化JavaScript的概念尤为强烈,似乎有赶超07年Ajax风潮之趋势.一.写函数(过程式) 2005年以前,JavaScript没人重视,只作为表单验证等少量应用.那时一个网页上写不了几行JS代码,1000行算很复杂了.这时组织代码的方式是过

  • Javascript模块化编程详解

    模块化编程是一种非常常见Javascript编程模式.它一般来说可以使得代码更易于理解,但是有许多优秀的实践还没有广为人知. 基础 我们首先简单地概述一下,自从三年前Eric Miraglia(YUI的开发者)第一次发表博客描述模块化模式以来的一些模块化模式.如果你已经对于这些模块化模式非常熟悉了,大可以直接跳过本节,从"进阶模式"开始阅读. 匿名闭包 这是一种让一切变为可能的基本结构,同时它也是Javascript最棒的特性.我们将简单地创建一个匿名函数并立即执行它.所有的代码将跑在

  • Javascript模块化编程(三)require.js的用法及功能介绍

    Javascript模块化编程(三)require.js的用法及功能介绍

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js.  一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. 复制代码 代码如下: <script src="1.js"></script> &l

  • javascript模块化是什么及其优缺点介绍

    如今backbone.emberjs.spinejs.batmanjs 等MVC框架侵袭而来.CommonJS.AMD.NodeJS.RequireJS.SeaJS.curljs等模块化的JavaScript扑面而来.web前端已经演变成大前端,web前端的发展速度之快. 1)我们来看看什么是模块化? 模块化是一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,严格定义模块接口.模块间具有透明性.javascript中的模块在一些C.PHP.java中比较常见: c中使用inclu

  • 关于Javascript模块化和命名空间管理的问题说明

    关于Javascript模块化和命名空间管理的问题说明

    [关于模块化以及为什么要模块化] 先说说我们为什么要模块化吧.其实这还是和编码思想和代码管理的便利度相关(没有提及名字空间污染的问题是因为我相信已经考虑到模块化思想的编码者应该至少有了一套自己的命名法则,在中小型的站点中,名字空间污染的概率已经很小了,但也不代表不存在,后面会说这个问题). 其实模块化思想还是和面向对象的思想如出一辙,只不过可能我们口中所谓的"模块"是比所谓的"对象"更大的对象而已.我们把致力完成同一个目的的功能函数通过良好的封装组合起来,并且保证其

  • Javascript模块化编程(一)模块的写法最佳实践

    Javascript模块化编程(一)模块的写法最佳实践

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂.  网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑. Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,它不支持"类"(class),更遑论"模块&

  • Javascript模块化编程(一)AMD规范(规范使用模块)

    Javascript模块化编程(一)AMD规范(规范使用模块)

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块.  (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!考虑到Javascript模块现在还没有官方规范,这一点就更重要了. 目前,通行的Javascript模块规范共有两种:CommonJS和AMD.我主要介绍AMD,

  • 使用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',f

  • 详解js前端代码异常监控

    详解js前端代码异常监控

    阅读目录 什么是前端代码异常 window.onerror 写一个js报错的上报库 注意点: 缺点: 在平时的工作,js报错是比较常见的一个情景,尤其是有一些错误可能我们在本地测试的时候测试不出来,当发布到线上之后才可以发现,如果抢救及时,那还好,假如很晚才发 现,那就可能造成很大的损失了.如果我们前端可以监控到这种报错,并及时上报的话,那我们的问题就比较好解决了.所以我们今天来聊聊前端代码的异常监控 什么是前端代码异常  一般语法错误以及运行时错误,浏览器都会在console里边体现出错误信息

  • jsp、struts、spring、mybatis实现前端页面功能模块化拆分的方案

    前端页面功能模块化拆分 当一个系统的功能很多时,不可能所有功能模块的页面都写在一个页面里面,这时就需要将不同功能模块的页面拆分出去,就像模板一样,需要哪块的功能就调用哪块的页面,然后加载相应数据并展示到相应的页面. 本应用的使用spring+struts+mybatis+jsp的方式,用两种方案来完成前端页面功能的拆分. 方案一: 在JSP页面中,利用EL表达式或者Java代码的方式,在后台完成页面数据的填充.然后在js中来完成页面的切换. jsp代码: 业务详情模块页面:riskDetailI

  • php实现网站顶踩功能的完整前端代码

    许多网站都支持顶.踩功能,以便于显示用户对当前网页内容的满意度反馈.下面我们给出本站使用的顶.踩功能的完整前台实现代码,以便于用户参考. 完整的前端代码包括html.css.js各部分的代码.使用下列前端代码,加上自行简单实现的后台代码,即可实现完整的顶踩功能. 前端html代码: <div id="vote" data_id="文章唯一key"> <span id="dig" class="vote-btn"

  • vue.js 微信支付前端代码分享

    实例如下所示: onBridgeReady: function () { const openId = localStorage.getItem('openId') payService.payment(this.$route.params.orderId, 1, openId).then(rt => { //1:支付类型,可不填 this.message = rt.t WeixinJSBridge.invoke( 'getBrandWCPayRequest', { 'appId': this.

  • bootstrap+spring boot实现面包屑导航功能(前端代码)

    面包屑导航介绍 一般的内容型网站,例如CMS都会有这种面包屑导航.总结起来它有以下优势: 让用户了解目前所在的位置,以及当前页面在整个网站中所在的位置: 体现了网站的架构层级:提高了用户体验: 减少返回到上一级页面的操作: 实现效果 那我们应该如何实现?我看网上多数都是只提供静态实现, 这里我结合bootstrap 和 spring boot以及mysql来做一个完整的例子. 表结构设计 图里面的菜单其实是分级维护上下级关系的.我这里用到了2级,表里有level字段标记. 点击第1级加载第2级分

  • 测试平台开发vue组件化重构前端代码

    测试平台开发vue组件化重构前端代码

    目录 基于 springboot+vue 的测试平台开发 一.为什么重构 二.如何拆分 1. 补充对应知识 2. 合理拆分 三.关于项目 基于 springboot+vue 的测试平台开发 继续更新(人在魔都 T_T). 这期其实并不是一个详细的开发过程记录,主要还是针对本次前端重构来聊聊几个关注点. 目前重构的总进度在80%,重构完的页面没什么变化,再回顾一下. 一.为什么重构 目前项目的功能开发重点还是在接口管理这一大块,内容多,任务重,可当我着手准备继续开发新功能的时候发现了个重大的问题.

  • 详解webpack模块化管理和打包工具

    本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的时候再异步加载.通过 loader  的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.

  • JavaScript前端图片加载管理器imagepool使用详解

    JavaScript前端图片加载管理器imagepool使用详解

    前言 imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数. 对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片url" />. 经过不断优化,出现了图片延迟加载方案,这回图片的URL不直接写在src属性中,而是写在某个属性中,比如:<img src="" data-src="图片url" />.这样浏览器就不会自动加载图片,等到一个恰当的时机需要加载

  • javascript中导出与导入实现模块化管理教程

    在理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块.但是,在ES6以前,JavaScript一直没有自己模块体系(module),无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.如果要想在前端做模块化开发,必须依赖第三方框架来实现,如:requireJS与seaJS. javascript中的导出和导入实现模块化管理 requireJS是AMD规范的起源,seaJS是CMD规范的起源,由于两者功能高度重合,后来seaJS不再维护,从此淡出人们的视野,于

随机推荐