一、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. Spring学习的切入点

    spring是个顶级的框架,这话没毛病.很多人想把它征服,想去阅读它的源码,弄懂它的设计思想,从中学到精粹. 但是很多次打开后,看到庞大的体系结构,就懵逼了,不知从何入手. 我在这里总结下学习spri ...

  2. D - Matrix Multiplication ZOJ - 2316 规律题

    Let us consider undirected graph G = which has N vertices and M edges. Incidence matrix of this grap ...

  3. css-移动&缩放元素

    transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 用法:object.style.transform="rotate(7deg)&q ...

  4. [POJ3728]The merchant

    题目大意: 给你一棵n个结点的带权树,有q组询问,问你从u到v的路径上最大值与最小值的差(最大值在最小值后面). 思路: 首先考虑路径上合并两个子路径u->t和t->v时的情况. 假设我们 ...

  5. Unity3D 粒子系统

    我们先来看看Particle System在Inspector视窗中的属性: 1.Transform:可以控制粒子在世界或者本地坐标的改变.但是有点注意的是,如果你改变Scale属性值是不会影响粒子的 ...

  6. PHP温故知新(一)

    前言 开发PHP也有几年的时间了,记得第一次接触PHP那时候还是PHP4,现在PHP版本已经是7了,虽然本人也算是一个PHP老手了,但是总觉得有些基础知识掌握的不是很好.学PHP之初只是为了混口饭吃, ...

  7. 虚拟PDF打印机

    doPDF虚拟打印机 doPDF 是一个免费的PDF转换器,可同时运用于商业和个人,它把自己安装为一个打印机驱动,允许从任意一个有打印输出的Windows程序中打印,还包含缩放,质量定义和页面大小定义 ...

  8. 一劳永逸的搞定 flex 布局

    一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...

  9. 如何在sublime3项目设置中设置python模块的搜索路径?ImportError: No module named *的解决办法

    问题:之前使用pycharm,用的挺溜,但是电脑配置实在不争气,pycharm启动久了,耗去大量内存,导致运行起来越来越慢,于是转向使用sublime text. 把项目从pycharm切换到subl ...

  10. sql 改动表以及表字段

    用SQL语句加入删除改动字段 1.添加字段      alter table docdsp    add dspcode char(200)      alter table tbl add meet ...