RequireJS-模块化开发框架

一、equireJS 和 SeaJS 都是很不错的模块加载器,两者区别如下

  1. 两者定位有差异。RequireJS 想成为浏览器端的模块加载器,同时也想成为 Rhino / Node 等环境的模块加载器。SeaJS 则专注于 Web 浏览器端,同时通过 Node 扩展的方式可以很方便跑在 Node 服务器端

  2. 两者遵循的标准有差异。RequireJS 遵循的是 AMD(异步模块定义)规范,SeaJS 遵循的是 CMD

RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系。也不会有阻塞(blocking)的情况发生

二、RequireJS的模块入口

  script标签上一个自定义属性:data-main="main",等号右边的main指的main.js。这个main指主模块或入口模块。

main.js中就两个函数调用require.config和require。

require.config用来配置一些参数,它将影响到requirejs库的一些行为。

require.config的参数是一个JS对象,常用的配置有baseUrl,paths等。

<script data-main="js/main" src="require.js.js"></script>

main.js

1 require.config({
2     paths: {
3         jquery: ‘jquery-1.7.2‘
4     }
5 });
6
7 require([‘jquery‘], function($) {
8     alert($().jquery);
9 });

paths参数,使用模块名“jquery”,其实际文件路径jquery-1.7.2.js(后缀.js可以省略)。

我们知道jQuery从1.7后开始支持AMD规范,即如果jQuery作为一个AMD模块运行时,它的模块名是“jquery”。注意“jquery”是固定的,不能写“jQuery”或其它。

注:如果文件名“jquery-1.7.2.js”改为“jquery.js”就不必配置paths参数了。

一、equireJS 和 SeaJS 都是很不错的模块加载器,两者区别如下

一、equireJS 和 SeaJS 都是很不错的模块加载器,两者区别如下

时间: 2024-08-10 19:18:54

RequireJS-模块化开发框架的相关文章

RequireJS模块化后JS压缩合并

使用RequireJS模块化后代码被拆分成多个JS文件了,在部署生产环境需要压缩合并,RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩.r.js非常强大,不但可以压缩js,css,甚至可以对整个项目进行打包. r.js的压缩工具使用UglifyJS或Closure Compiler.默认使用UglifyJS(jQuery也是使用它压缩).此外r.js需要node.js环境,当然它也可以运行在Java环境中如Rhino.JAVA环境使用Ant构建可以参考另外一篇RequireJ

requirejs 模块化编程

在介绍 require.js 之前,先介绍下 AMD ( Asynchronous Module Definition ), 意思是“异步模块定义”.它采用异步方式加载模块,模块的加载不影响它后面语句的运行.所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行.实现 AMD 规范的加载器其实很多,不过多数人还是使用 require.js . 所以,为避免以下问题而使用 require.js: 1)实现js文件的异步加载,避免网页失去响应: 2)管理模块之间的依赖

RequireJS 模块化加载框架使用

RequireJS 是一个遵循 AMD 规范的模块化加载框架 与上文seajs一样,这里简单介绍其相关用法 同样的,首先是下载好 require.js --> http://requirejs.org/docs/download.html#requirejs AMD规范是预加载,也就是说会马上将所有模块全加载. 写法跟seajs也类似,只不过 当需要包含模块时,一般会将模块名置入第一个参数.而不是直接require  详见 (新版本的也有CMD版require包含依赖的方式,但本质还是一样,下面

java springmvc +spring+ mybaits 模块化开发框架 HTML5+css3.0+bootstrap响应式开发界面

需要源码,请加QQ:858-048-581 系统模块 1.   权限管理:点开二级菜单进入三级菜单显示 角色(基础权限)和按钮权限 角色(基础权限): 分角色组和角色,独立分配菜单权限和增删改查权限. 按钮权限: 给角色分配按钮权限. 2.   按钮管理:自定义按钮管理,维护按钮权限标识等 3.   菜单管理:无限级别自定义菜单,自定义菜单图标,业务菜单和系统菜单分离,菜单状态显示隐藏(递归处理) 4.   数据字典:无限级别,支持多级别无限分类.内设编号,排序等 5.   组织机构:无限级别,

requirejs模块化框架用法分享

我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"></script> <script src="2.js"></script> <script src=&

JavaScript模块化开发框架ArchtJS(实现类、继承、包依赖管理)

1 //声明包信息 2 //声明中的目录都是以当前js文件为起点的相对路径(类似css文件中引用图片链接) 3 Archt.package({ 4 //常用工具类 5 'utils': ['lib/utils.js'], 6 //jquery核心 7 'lib.jquery.core': ['lib/jquery/jquery-1.10.2.js'], 8 //jqueryUI 9 'lib.jquery.ui': ['lib/jquery/jquery-ui-1.11.4.js'], 10 /

[H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现

// 还存在有问题的代码,问题在于processFile()中// 问题:在ipone 5c 下,某些图片压缩处理后,上传到服务器生成的文件size为0,即是空白 ;define(['mod/tool/formSubmit'] ,function(o_formSubmit) { return { init: function(id) { var self = this; self.sniff(id); var $img = ''; var $inputField = ''; }, sniff:

前端模块化开发的价值

本文发表在<程序员>杂志 2013 年 3 月刊,推荐购买. 前端模块化开发的价值 随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做项目时,常常会将一些通用的.底层的功能抽象出来,独立成一个个函数,比如 function each(arr) { // 实现代码 } function log(str) { // 实现代码 } 并像模像样地把这些函

模块化介绍

1. 为什么要学习模块化开发 1.1. 为什么要学习模块化 了解模块化思想 为后面的node学习打基础 1.2. 什么是模块化 生活中的模块化 组装电脑 google的模块化手机(流产了,moto继承了) 乐高积木 软件开发中的模块化 日期模块 数学计 算模块 日志模块 登录认证模块 报表展示模块 模块化的好处 生产效率高 方便维护 2. 模块化的演变过程 2.1. 非模块化带来的问题 命名冲突 文件依赖 2.2. 全局函数 问题:命名可能会冲突(变量污染) 代码 2.3. 对象封装 解决:解决