一、shim
requirejs使用AMD规范开发,若开发过程中加载非AMD规范js,需要使用requirejs的shim进行配置。

shim配置语法为:

//配置文件
requirejs.config({
baseUrl: 'js', //默认是main.js所在的文件夹为基准。
paths: {
jquery: 'jquery-1.12.4.min' //起个别名
},
//关键配置
shim: {
//配置方式一:jQuery.CateNav为模块名称,jquery为依赖的js模块
//'jQuery.CateNav': ['jquery'] //配置方式二:jQuery.CateNav为模块名称,deps为配置依赖的js模块,deps数组,表明该模块的依赖性
'jQuery.CateNav': {
deps: ['jquery'],
exports: "CateNav"
}
}
}); //加载入口模块
requirejs(['index']); //从基准路径js下开始查找index.js

二、示例

具体代码示例参考我的github地址:https://github.com/MengFangui/require-shim/tree/master

示例代码为基于jquery的锚点滚动效果的插件,这个插件是我基于jQuery开发(未采用AMD规范),组件地址为:http://www.cnblogs.com/mengfangui/p/7428500.html

示例代码实现了模块化开发中非AMD规范的js的加载。

模块化开发RequireJS之shim配置的更多相关文章

  1. 模块化开发(requireJS)

    模块化 在前端使用模块化开发,可以将代码根据功能实施模块的划分,每个模块功能(职责)单一,在需要更改对应的功能的时候,只需要对指定的模块进行修改,其他模块不受任何影响. 为什么要进行前端模块化? 达到 ...

  2. 模块化开发RequireJS之路径解析

    1.requirejs遵循AMD规范,将需要的都加载好(前置加载).注:cmd是就近加载. define(['jQuery','dialog'],function($,d){ // 业务逻辑 }) ( ...

  3. Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套

    vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...

  4. [工具配置]使用requirejs模块化开发多页面一个入口js的使用方式

    描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...

  5. 在Html中使用Requirejs进行模块化开发

    在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理.这里就介绍下如何通过requirejs,实现html代码的模块化开发. 如何使用requirejs加载html Re ...

  6. 【模块化开发】------requireJS的基本使用------【巷子】

    前言 为了提高代码的复用度,开发人员会按照功能把大量的js代码分成若干文件,这样在多个页面就可以使用同一个文件了.,下面是某个网站的js引用情况 虽然代码的复用度提升了,但是缺点也体现了出来 缺点: ...

  7. 使用requirejs模块化开发多页面一个入口js的使用方式

    描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...

  8. Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

  9. Angular 结合RequireJs实现模块化开发

    angular的指令是模块化很好的一个体现,下面我将只使用指令(不用控制器),结合requirejs,实现模块化开发. 模块化关系图:

随机推荐

  1. Java Eclipse插件

    EasyExplore 快速打开文件所在目录1 http://sourceforge.net/projects/easystruts/ OpenExplorer 快速打开文件所在目录2 https:/ ...

  2. Polynomial Problem(hdu 1296 表达式求值)

    We have learned how to obtain the value of a polynomial when we were a middle school student. If f(x ...

  3. 【51Nod 1239】欧拉函数之和

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1239 还是模板题. 杜教筛:\[S(n)=\frac{n(n+1)}{2 ...

  4. Hiho----拓扑排序

    拓扑排序·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 由于今天上课的老师讲的特别无聊,小Hi和小Ho偷偷地聊了起来. 小Ho:小Hi,你这学期有选什么课么? 小H ...

  5. java多线程处理导入数据拆分List集合 同步处理插入数据

    原文:https://www.2cto.com/kf/201612/581174.html import org.apache.log4j.Logger; import org.apache.poi. ...

  6. 【Tomcat MyEcplise】MyEcplise添加一个新的Server,Tomcat8.5报错

    添加新的Tomcat添加不进去,报错: The Apache Tomcat installation at this directory is version 8.5.11.  A Tomcat 8. ...

  7. matlab的输出流控制

    Matlab之print,fprint,fscanf,disp函数 print: print函数可以把函数图形保存成图片: minbnd = -4*pi; maxbnd = 4*pi; t = min ...

  8. 关于使用Android新版Camera即Camera2的使用介绍 暨解决Camera.PreviewCallback和MediaRecorder无法同时进行

    新的相机API也就是Camera2是在Android 5.0引进的.通常情况下,我们都是使用Android旧的相机API,纵然在Android Studio里老是提示已经废弃,但是只要都能用,也就没必 ...

  9. 十三.spring-boot使用spring-boot-thymeleaf

    thymeleaf 比如freemaker的要高,thymeleaf是一个支持html原型的自然引擎,它在html 标签增加额外的属性来达到模板+数据的展示方式,由于 浏览器解释html时,忽略未定义 ...

  10. 三.rocketmq-console

    ⦁    rocketmq-console来源于https://github.com/rocketmq/rocketmq-console 1.配置IP 2.启动运行:出现此信息则表示成功  访问:in ...