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代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一 ...
随机推荐
- 缓冲 buffer 和缓存 cache 的区别
缓存(cache)是在读取硬盘中的数据时,把最常用的数据保存在内存的缓存区中,再次读取该数据时,就不去硬盘中读取了,而在缓存中读取. 缓冲(buffer)是在向硬盘写入数据时,先把数据放入缓冲区,然后 ...
- mybatis 自定义缓存 cache
缓存不管哪个框架都是显得特别的重要,今天自己测试实现了mybatis自定义缓存,从而理解mybatis缓存的工作原理. 首先缓存类要实现Cache接口:具体实现如下package com.ibatis ...
- chmod指令用法
指令名称 : chmod 使用权限 : 所有使用者 使用方式 : chmod [-cfvR] [--help] [--version] mode file... 说明 : Linux/Unix 的档案 ...
- pytest——pycharm中右击运行(run)没有问题,在terminal中运行pytest报错:E ModuleNotFoundError: No module named
参考了这个解决办法:https://blog.csdn.net/qq_36829091/article/details/82180866 我的是Windows,linux的和Windows的解决办法有 ...
- HTML5新特性-- -定时器
一.定时器:一次性定时器/周期性定时器 #requestAnimationFrame 智能定时器 #此定时器主要使用范围:动画和游戏中 特点: setTimeout(fn,500); setInter ...
- python3.x 基础一:str字符串方法
*字符串不能更改值 数据类型字符串str | capitalize(...) 返回字符串中第一个字母大写 | S.capitalize() -> str | | ...
- Oracle分页查询语句的写法
分页查询是我们在使用数据库系统时经常要使用到的,下文对Oracle数据库系统中的分页查询语句作了详细的介绍,供您参考. AD:2013云计算架构师峰会精彩课程曝光 Oracle分页查询语句使我们最常用 ...
- OC 面向对象的特性
面向对象的编程语言有封装.继承 .抽象.多态4个主要的特征. 面向对象编程有三大特性:封装.继承.多态. 1. 封装: 封装是保证软件部件具有优良的模块性的基础,封装的目标就是要实现软件部件的“高 ...
- UVA10480 Sabotage
题目链接:https://cn.vjudge.net/problem/UVA-10480 知识点: 最小割 题目大意: 求最小割并打印出最小割必须割掉的边. 解题思路: 在跑完 \(sap\) 后的残 ...
- vue2.0 axios前后端数据处理
目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据. 前言: 使用 cnpm 安装 axios cnpm install axios -S ...