javascript模块化---requirejs
requirejs是异步执行
为什么会出现模块化
1.不定什么时候,自己就将全局变量改变了
2.函数名的冲突
3.依赖关系不好管理
如果b.js依赖a.js那么b必须放在a的下面
解决的办法
1.自执行函数来包装代码
mod=function(){
var a,b;
return {
add:function(){
a+b+s;
},
form:function(){
}
}
}();
2.jquery风格的匿名自执行函数
(function(window){
})(window);
最后模块化形成是
AMD
a.js
define(function(){
});
b.js
define(function(){
});
main.js
require(['a','b'],function(a,b){
这种执行转态会将b提前预加载一遍,当前提有多个js文件的时候,就都要全部预加载一遍,所以这个的效率不是很好。
解决的办法是:
define(function(){
require(['a',function(a){
a.hello();
}]);
$("#b").click(function(){
require(['b'],function(b){
b.hello();
});
});
});
AMD叫做异步模块定义
require.js语法
define(id,dependencies,factory);
id可选的参数 用来定于模块的标识
dependencies当前模块依赖的模块名称数组
factory模块化初始化要执行函数或者对象
在页面中使用require函数加载模块
require([dependencies],function(){})
AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块
1.定义无依赖的模块
define(function(){
});
require.config({//定义路径
baseurl:"script/lib",
paths:{
}
});
require(["app/"],function(){
});
2.定义有依赖的模块
define(['a'],function(a){})
require.config({
});
require(["app/"],function(){
});
一些总结和一个demo地址:https://github.com/GainLoss/summary/tree/master/%E5%81%8F%E5%83%BB%E7%9A%84%E7%9F%A5%E8%AF%86/%E6%A8%A1%E5%9D%97%E5%8C%96
javascript模块化---requirejs的更多相关文章
- JavaScript模块化-RequireJs实现AMD规范的简单例子
AMD规范简介 AMD(异步模块定义),是实现JavaScript模块化规范之一,它采用异步方式加载模块,模块的加载不影响后面语句的运行.require.js和curl.js都是实现AMD规范的优秀加 ...
- Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- JavaScript模块化编程之AMD - requireJS基础使用
JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...
- Javascript模块化规范
Javascript模块化规范 一.前端js模块化由来与演变 CommonJS 原来叫 ServerJS,推出 Modules/1.0 规范后,在 Node.js 等环境下取得了很不错的实践.09年下 ...
- Javascript 模块化开发上线解决方案
最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...
- 该如何理解AMD ,CMD,CommonJS规范--javascript模块化加载学习总结
是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...
- JavaScript模块化---AMD规范
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
- 实现一个JavaScript模块化加载器
对任何程序,都存在一个规模的问题,起初我们使用函数来组织不同的模块,但是随着应用规模的不断变大,简单的重构函数并不能顺利的解决问题.尤其对JavaScript程序而言,模块化有助于解决我们在前端开发中 ...
- JavaScript模块化开发&&模块规范
在做项目的过程中通常会有一些可复用的通用性功能,之前的做法是把这个功能抽取出来独立为一个函数统一放到commonFunctions.js里面(捂脸),实现类似于snippets的代码片段收集. fun ...
随机推荐
- 《Linux内核设计与实现》读书笔记(一)-内核简介
本篇简单介绍内核相关的基本概念. 主要内容: 单内核和微内核 内核版本号 1. 单内核和微内核 原理 优势 劣势 单内核 整个内核都在一个大内核地址空间上运行. 1. 简单.2. 高效:所有内核都 ...
- RedisUtil(未完,持续更新中....)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 【并发编程】Future模式添加Callback及Promise 模式
Future Future是Java5增加的类,它用来描述一个异步计算的结果.你可以使用 isDone 方法检查计算是否完成,或者使用 get 方法阻塞住调用线程,直到计算完成返回结果.你也可以使用 ...
- 2019前端面试之html5
html5新增特性 语义化标签 表单新特性 视频和音频canva画布 svg画图 地理位置 为鼠标提供的拖放api webwroker storage websocker 常见块级标签 div,p,h ...
- MySql中存储过程的理解
到底什么是存储过程,又为什么需要使用存储过程? 存储过程简单来说,就是为以后的使用而保存的一条或多条MySQL语句的集合,可将其视为批文件,虽然它们的作用不仅限与批处理. 使用存储过程有3个主要的好处 ...
- 基于XML的AOP配置
创建spring的配置文件并导入约束 此处要导入aop的约束 <?xml version="1.0" encoding="UTF-8"?> < ...
- hdu6070(分数规划/二分+线段树区间更新,区间最值)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=6070 题意: 给出一个题目提交序列, 从中选出一个正确率最小的子串. 选中的子串中每个题目当且仅当最 ...
- Centos下搭建nginx反向代理
上一节已经用编译的方式搭建好了一个nginx,链接在下面 https://www.toutiao.com/i6693130510777975300/ 然后这次我们把上次搭建好的nginx作为反向代理的 ...
- 低价购买 dp
题目描述 “低价购买”这条建议是在奶牛股票市场取得成功的一半规则.要想被认为是伟大的投资者,你必须遵循以下的问题建议:“低价购买:再低价购买”.每次你购买一支股票,你必须用低于你上次购买它的价格购买它 ...
- 如何使用JMETER从JSON响应中提取数据
如果你在这里,可能是因为你需要使用JMeter从Json响应中提取变量. 好消息!您正在掌握掌握JMeter Json Extractor的权威指南.作为Rest API测试指南的补充,您将学习掌握J ...