require.js(浅聊)
一、require
了解requirejs之前首先明白什么是模块化;
1、什么是模块化?
模块化设计是指在对一定范围内的不同功能或相同功能不同性能、不同规格的产品进行功能分析的基础上,划分并设计出一系列功能模块,通过模块的选择和组合可以构成不同的产品,以满足市场的不同需求的设计方法。
我的理解就是根据不同的功能和不同的产品属性分成不同的模块,然后模块之间相互关联,构成项目(粗浅实用);
2、模块化的优点?
①、.相对独立性,可以对模块单独进行设计、制造、调试、修改和存储,这便于由不同的专业化企业分别进行生产;
②、性能稳定、结构简单、成本低廉;
③、便于维护,有利于团队开发;
3、js中模块化有哪些产品?
①、sea.js
②、require.js
4、require.js
RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。
require中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义,
requir API的第二个参数是callback,一个function,是用来处理加载完毕后的逻辑。
5、加载文件
①、通过define函数定义了一个模块,然后再页面中使用:

②、加载模块
require.config是用来配置模块加载位置;
通过paths的配置会使我们的模块名字更精炼,paths还有一个重要的功能,就是可以配置多个路径;
shim配置非AMD模块输出,没有用define来申明的模块;


③、requirejs提供了一种叫"主数据"的功能,我们首先创建一个main.js:
然后再页面中使用下面的方式来使用requirejs:

加载requirejs脚本的script标签加入了data-main属性,这个属性指定的js将在加载完reuqire.js后处理,我们把require.config的配置加入到data-main后,就可以使每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短模块名,data-main还有一个重要的功能,当script标签指定data-main属性时,require会默认的将data-main指定的js为根路径,是什么意思呢?如上面的data-main="js/main"设定后,我们在使用require(['jquery'])后(不配置jquery的paths),require会自动加载js/jquery.js这个文件,而不是jquery.js,相当于默认配置了:
④、main的设置

require.js(浅聊)的更多相关文章
- 记录:sea.js和require.js配置 与 性能对比
最近有点忙,很久无写博客,记录一下之前的配置require.js和sea.js的配置.(有误有望提出 require.js 文件目录 /app(项目使用js) /lib(require.js jq存放 ...
- Javascript模块化编程(三):require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- javascript模块化编程(三):require.js用法
本文来自阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require ...
- require.js工作原理(初始)
详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...
- Javascript模块化编程(三):require.js的用法(转)
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...
- require.js源码分析
写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...
- Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块
传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...
- require.js
日期: 2012年11月 7日 http://www.ruanyifeng.com/blog/2012/11/require_js.html 这个系列的第一部分和第二部分,介绍了Javascript模 ...
- require.js 入门笔记
网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 HTML的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高. 而且长长的JS代码 ...
随机推荐
- 机器学习:Python实现聚类算法(一)之K-Means
1.简介 K-means算法是最为经典的基于划分的聚类方法,是十大经典数据挖掘算法之一.K-means算法的基本思想是:以空间中k个点为中心进行聚类,对最靠近他们的对象归类.通过迭代的方法,逐次更新各 ...
- Kotlin入门第二课:集合操作
测试项目Github地址: KotlinForJava 前文传送: Kotlin入门第一课:从对比Java开始 初次尝试用Kotlin实现Android项目 1. 介绍 作为Kotlin入门的第二课, ...
- SVN如何迁移到Git?
最近在使用华为软件开发云进行开发项目管理,目前华为软件开发云支持500M的免费项目空间,而且还可以在线编译和构建,不用担心开发环境和生产环境的不同,很好的体现了DevOps的开发理念. 之前一直是用s ...
- PHP编码规范建议学习
###php编码规范 -------* sql过长 ```$sql = <<<SQLSELECT delivery_idFROM d_testWHERE delivery_idIN ...
- css 中的背景图片小技巧和存在的坑
body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...
- NOSQL基础概念
NoSql是一个很老的概念了,但对自己来说,仍然是一个短板,果断补上. 首先通过几个简单的例子来了解NOSQL在国内的情况(2013年左右的数据,有些过时),比如新浪微博,其就有200多台物理机运行着 ...
- Gradle入门学习---认识buildeTypes和dependencies
Gradle是Android Studio默认的构建工具,如果是基本的APP开发,不会涉及到Gradle太多内容,毕竟它的诞生就不是专为Android服务的. 日常开发需要涉及到使用Gradle的场景 ...
- Windows7 安装完成mysql dos启动服务出现服务名称无效
错误提示: WIN 7 cmd命令行下,net start mysql,出现 服务名无效提示: 错误分析: Mysql服务未安装 解决方案:在mysql 安装目录下bin文件夹 安装Shift+鼠 ...
- Java代码编写规范(不是标准规范,自行整理,无须纠结)
最近回过头来给以前的项目增加功能,发现之前写的注释非常不全,代码也非常的不整洁,有些地方写的''窝七八烂的,看着很不舒服:又恰好经理最近也经常跟我提起代码规范,我们就讨论了一下代码规范的重要性和必要性 ...
- 抓包工具 - Fiddler(详细介绍)
Fiddler的详细介绍 一.Fiddler与其他抓包工具的区别 1.Firebug虽然可以抓包,但是对于分析http请求的详细信息,不够强大.模拟http请求的功能也不够,且firebug常常是需要 ...