requireJS模块化
1. JavaScript里面js代码的写法:目标是解决冲突和依赖
函数式编程,全局函数和变量--很容易覆盖
对象的写法--也会从外面改变
命名空间:利用名称不同缓冲js代码的冲突---名称太长,不方便维护
闭包--变量一直存在,垃圾回收机制失效,内存泄漏
模块化开发
函数式编程---->面向对象编码---->模块化编程(面向对象可以理解成深度的模块化)
2.COMMONJS规范、AMD规范、CMD规范
CommonJS 最开始是 Mozilla 的工程师于 2009 年开始的一个项目,它的目的是让浏览器之外的 JavaScript
能够通过模块化的方式来开发和协作---Node.js(服务器端)
CommonJS是最早的规范。
CommonJS 的规范中,每个 JavaScript 文件就是一个独立的模块.
CommonJS 规范的主要适用场景是服务器端编程,所以采用同步加载模块的策略。
定义模块
调用模块
配置模块
AMD 是 Asynchronous Module Definition 的简称,即“异步模块定义”,是从 CommonJS 讨论中诞生的。
AMD 优先照顾浏览器的模块加载场景,使用了异步加载和回调的方式。浏览器端异步加载库Require.js实
现的就是AMD规范。
CMD规范,全称”Common Module Definition”,称为 通用模块加载规范 。一般也是用在浏览器端。浏览器
端异步加载库Sea.js实现的就是CMD规范。
3.RequireJS模块化开发
模块化的思想和意义--冲突和依赖
可以更方便地使用别人的代码,想要什么功能,就加载什么模块(每个 JavaScript 文件就是一个独立的模块)
团队开发大家必须以同样的方式编写模块,否则达不到预想的效果.
模块化思想就是指将页面根据内容的关联性分解成不同的且相互独立的模块进行开发,每个模块之间没有必然的联系,互不影响。
4.requireJS模块化开发步骤
下载并引入requirejs文件
async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持 defer,所以把defer也写上。
data-main属性的作用是,指定网页程序的主模块,意思是整个网页的入口代码,所有代码都从这儿开始运行,文件名自定义
define 定义模块,接收二个参数。
第1个参数,必须是一个数组,指明该模块的依赖性
第2个参数是一个回调函数。
require 调用模块,接收二个参数。
第1个参数是一个数组,表示所依赖的模块
第2个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。
require.config({ }) 配置模块 第三方的公共模块
5.ES6 模块化讲解 (import export)
ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。
export命令用于规定模块的对外接口。
import命令用于输入其他模块提供的功能。
定义模块/导入模块/引入模块文件
requireJS模块化的更多相关文章
- RequireJS模块化后JS压缩合并
使用RequireJS模块化后代码被拆分成多个JS文件了,在部署生产环境需要压缩合并,RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩.r.js非常强大,不但可以压缩js,css, ...
- angularjs backbone 集成requirejs 模块化
首先认识requirejs requirejs是个包加载器,核心功能是模块化管理,可以实现按需加载. 重点是明白 模块化不是按需加载. 模块化的意义: 是通过代码逻辑表明模块之间的依赖关系和执行顺序, ...
- RequireJS 模块化加载框架使用
RequireJS 是一个遵循 AMD 规范的模块化加载框架 与上文seajs一样,这里简单介绍其相关用法 同样的,首先是下载好 require.js --> http://requirejs. ...
- [工具配置]使用requirejs模块化开发多页面一个入口js的使用方式
描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...
- RequireJS模块化编程详解
1.模块的写法 模块化编程一般都有这么几个过渡过程,如下描述. 原始方法 function m1(){ //... } function m2(){ //... } 上面的函数m1()和m2(),组成 ...
- seaj和requirejs模块化的简单案例
如今,webpack.gulp等构件工具流行,有人说seajs.requirejs等纯前端的模块化工具已经被淘汰了,我不这么认为,毕竟纯前端领域想要实现模块化就官方来讲,还是有一段路要走的.也因此纯前 ...
- 使用requirejs模块化开发多页面一个入口js的使用方式
描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...
- RequireJS模块化之循环依赖
如果你定义一个循环依赖关系 (a 依赖b 并且 b 依赖 a),那么当b的模块构造函数被调用的时候,传递给他的a会是undefined. 但是b可以在a模块在被引入之后通过require(‘a’)来获 ...
- requirejs模块化框架用法分享
我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一 ...
随机推荐
- struts2 全局拦截器,显示请求方法和参数
后台系统中应该需要一个功能那就是将每个请求的url地址和请求的参数log出来,方便系统调试和bug追踪,使用struts2时可以使用struts2的全局拦截器实现此功能: import java.ut ...
- 分布式文件存储库MinIO可还行?
在传统的单体应用架构中,一个应用程序对应一台服务器,提供单进程服务. 但是随着业务的升级,技术的更新迭代,分布式.集群架构.微服务等现已俨然成为主流. 几乎所有的项目都会与文件挂钩,例如OA系统的报表 ...
- 00002-layui 右侧呼出页面,PopupLayer
我这里的功能是弹出 右侧搜索 的页面: top.layui.admin.popupRight({ id: 'LAY_business_PopupLayer' ,area: '350px' ,succe ...
- MyEclipse安装后的配置
一.Window-->Preferences-->General --> Workspace --> UTF-8 作用:从此以后,你创建的任何项目编码都是UTF-8,一次解决所 ...
- lonic常用组件之五------按钮
一.Ionic常用组件之五------按钮 <ion-button color="主题色" size="small/large" expand=& ...
- xshell使用技巧
XShell是一款Windows下的一款远程连接Linux主机的工具,类似的软件还有SecureCRT,putty等,但是个人感觉XShell好用,功能强大.. 一.复制和粘贴 linux的Shell ...
- PHP设计模式(一)
1)工厂模式 工厂模式是用工厂方法生成对象,而不是直接new一个对象.假设我们在Config命名空间下有一个名叫Db的数据库操作类,用普通的方法,如果我们想去创建一个Db的对象,我们会直接new一个出 ...
- Verilog代码和FPGA硬件的映射关系(一)
代码和硬件之间的映射关系是一个很奇妙的过程,也展现出人类的智慧.单片机内部的硬件结构都是固定的,无法改变,我们通过代码操作着寄存器的读写,来执行各种复杂的任务.FPGA的硬件结构并不像单片机一样是固定 ...
- React Router简单Demo
简介 react router是使用react的时候首选的一个路由工具. 安装 react router包含react-router,react-router-dom和react-router-nat ...
- 【Ubuntu】快捷键
版本:Ubuntu18.04 1. 终端(terminal ) alt + ctrl + t # 打开终端 shift + shift + t # 新建终端标签页 ctrl + c # 强制停止程序运 ...