模块化开发RequireJS之路径解析
1、requirejs遵循AMD规范,将需要的都加载好(前置加载)。注:cmd是就近加载。
define(['jQuery','dialog'],function($,d){
// 业务逻辑
})
(1)AMD采用异步加载,模块的加载不影响它后面语句的执行。
(2)所有依赖这个模块的语句,都定义在一个回调函数中,等前面需要加载的模块加载完成后这个回调函数才运行,解决了依赖性的问题。
2、requirejs路径解析
代码结构为:
示例代码:
index.html
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>Document</title>
</head> <body>
<!--data-main 是入口文件js/main.js js/main都行-->
<script src="js/require.js" type="text/javascript" charset="utf-8" data-main="js/main"></script>
</body> </html>
main.js为
//配置文件
requirejs.config({
baseUrl:'js/',//默认是main.js所在的文件夹为基准。
paths:{
jquery:'jquery-1.12.4.min'//起个别名
}
}); //加载入口模块
requirejs(['index']);//从基准路径js下开始查找,谨记不能写为index.js
baseUrl
指定了一个目录,然后requirejs基于这个目录来寻找依赖的模块。
baseUrl默认为main.js的路径
baseUrl+paths配置路径,如上面的main.js的代码:
jquery的路径为:js/jquery-1.12.4.min baseURl设置方式有三种:
(1)用requirejs.config显示指定baseUrl;
(2)如果指定了Entry Point(data-main)文件,则baseUrl为Entry Point所在目录;
(3)如果上述均未指定,则baseUrl为运行RequireJS的HTML文件所在目录。
模块化开发RequireJS之路径解析的更多相关文章
- 模块化开发RequireJS之shim配置
一.shim requirejs使用AMD规范开发,若开发过程中加载非AMD规范js,需要使用requirejs的shim进行配置. shim配置语法为: //配置文件 requirejs.confi ...
- 模块化开发(requireJS)
模块化 在前端使用模块化开发,可以将代码根据功能实施模块的划分,每个模块功能(职责)单一,在需要更改对应的功能的时候,只需要对指定的模块进行修改,其他模块不受任何影响. 为什么要进行前端模块化? 达到 ...
- Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- 【模块化开发】------requireJS的基本使用------【巷子】
前言 为了提高代码的复用度,开发人员会按照功能把大量的js代码分成若干文件,这样在多个页面就可以使用同一个文件了.,下面是某个网站的js引用情况 虽然代码的复用度提升了,但是缺点也体现了出来 缺点: ...
- Angular 结合RequireJs实现模块化开发
angular的指令是模块化很好的一个体现,下面我将只使用指令(不用控制器),结合requirejs,实现模块化开发. 模块化关系图:
- requirejs:让人迷惑的路径解析
接触过requirejs的童鞋可能都知道,无论是通过define来定义模块,还是通过require来加载模块,模块依赖声明都是很重要的一步.而其中涉及到的模块路径解析,对于新手来说,有的时候会让人觉得 ...
- 在Html中使用Requirejs进行模块化开发
在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理.这里就介绍下如何通过requirejs,实现html代码的模块化开发. 如何使用requirejs加载html Re ...
- 转:requirejs:让人迷惑的路径解析(~~不错)
接触过requirejs的童鞋可能都知道,无论是通过define来定义模块,还是通过require来加载模块,模块依赖声明都是很重要的一步.而其中涉及到的模块路径解析,对于新手来说,有的时候会让人觉得 ...
- [工具配置]使用requirejs模块化开发多页面一个入口js的使用方式
描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...
随机推荐
- Spring 概念详解
一.Spring的IoC(Inversion of Control). 这是Spring中得有特点的一部份.IoC又被翻译成“控制反转”,也不知道是谁翻译得这么别扭,感觉很深奥的词.其实,原理很简单, ...
- luogu P1012 拼数
题目描述 设有n个正整数(n≤20),将它们联接成一排,组成一个最大的多位整数. 例如:n=3时,3个整数13,312,343联接成的最大整数为:34331213 又如:n=4时,4个整数7,13,4 ...
- bzoj 1483: [HNOI2009]梦幻布丁
1483: [HNOI2009]梦幻布丁 Description N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为1,2,2,1 ...
- 详解React的生命周期
React生命周期 之前自己在学习React的时候,只是简单的理解了生命周期有这么一些,但是不知道大概的一个流程是怎么样的.那天在面试的时候,问到了.自己也有点懵,也没提前看,不过还是答上来了一些,这 ...
- spring的@Async异步使用
pring的@Async功能,用的时候一定要注意: 1.异步方法和调用类不要在同一个类中. 2.xml里需要加入这一行 <task:annotation-driven/> 下面的可以直接粘 ...
- 【mysql】mysql中varcher属性最大值能存多长
1.首先理解varchar(n),n表示什么 MySQL5.0.3之前varchar(n)这里的n表示字节数 MySQL5.0.3之后varchar(n)这里的n表示字符数,比如varchar(200 ...
- 轻量级web服务器lighttpd的编译及配置(for x86-linux)
转自:http://blog.163.com/ljf_gzhu/blog/static/131553440201211522317367/ 备注: PC Linux:Ubuntu-10.10 Linu ...
- Android 自己收集的开源项目集合(持续更新 2018.2.5)
2017.12.21 1.仿QQ说说发图片选择框架 https://github.com/yaozs/ImageShowPicker 2.炫酷开屏动画框架 https://github.com/Jos ...
- C++中try_catch_throw的做异常处理
C++中try_catch_throw的做异常处理 选择异常处理的编程方法的具体原因如下: . 把错误处理和真正的工作分开来: . 代码更易组织,更清晰,复杂的工作任务更容易实现: . 毫无疑问,更安 ...
- tensorflow c++ API加载.pb模型文件并预测图片
tensorflow python创建模型,训练模型,得到.pb模型文件后,用c++ api进行预测 #include <iostream> #include <map> # ...