require.js模块化开发
模块化开发的原因:
1、引入的js过多然后在加载的过程中容易出现假死的状态,导致页面会发生白屏
2、变量名的问题 在多人协作开发的时候容易出现变量名的冲突 面向对象
3、引入优先级的问题
模块化开发分类:
(1).requireJS:
RequireJS 是基于 AMD 规范的模块加载器,它不依赖于任何 JavaScript 新语言特性,可以直接运行在浏览器环境中。这是个比较老、曾经非常流行的模块加载器,它主要提供的功能是:
- 提供了模块化得支持。
- 可以异步、按需加载模块,这样就可以在用到某个 JS 模块的时候再去加载它,能提高首屏加载速度。
ES6 的 Modules:
- 提供了模块化的支持。
但是 es6 Modules 是JavaScript新特性,目前浏览器还不支持,不能直接用,就算以后可以直接用了,如果希望做到按需、异步加载的话也需要配合相应的加载器来加载 JS 文件。
但是如果你用 webpack 的话,直接用 ES6 是最好的选择。因为:
- webpack 可以通过 babel-loader 来转义 ES6 为浏览器可以支持的方式。
- webpack 的 code split 功能可以实现按需、异步加载。
是完全覆盖 RequireJS 的所有功能的。
(2).seaJs
(3).commonJS
(4).module
AMD CMD commonjs
模块化:将一个大的功能拆分成若干个小的功能 每一个功能都是一个模块
原则:高内聚 低耦合
require使用
0、require其实就是一个js模块加载器
1、引入requirejs
2、设置异步加载 defter async="true"
3、data-main:加载一个入口文件
4、遵循requirejs的规范AMD
不管AMD规范还是CMD规范还是COMMONJS规范
所谓的规范就是如果定义模块 如何接受模块
AMD如何定义模块
define()
步骤
require.js模块化开发的更多相关文章
- JS模块化开发----require.js
前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前 ...
- JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
- JS模块化开发(三)——seaJs+grunt
1.seaJs直接构建存在的问题 由于模块之间的依赖require引用的是模块名,当多个js模块被合并成一个时,会由于找不到模块名而报错 2.seaJs+grunt开发 用到的插件:grunt-cmd ...
- 初步理解require.js模块化编程
初步理解require.js模块化编程 一.Javascript模块化编程 目前,通行的Javascript模块规范共有两种:CommonJS和AMD. 1.commonjs 2009年,美国程序员R ...
- Js模块化开发的理解
Js模块化开发的理解 模块化是一个语言发展的必经之路,其能够帮助开发者拆分和组织代码,随着前端技术的发展,前端编写的代码量也越来越大,就需要对代码有很好的管理,而模块化能够帮助开发者解决命名冲突.管理 ...
- require.js模块化
require.js简单来说就是把js代码分装模块化了 模块化 模块就是实现特定功能的一组方法.只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. 我拿一个运动框架来解释一下req ...
- js模块化开发——require.js的用法详细介绍(含jsonp)
RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签脚本加载步骤.可以用它回事.优化代码,但其主要的目的还是为了代码的模块化.它鼓励在使用脚本以moudle ...
- 前端模块化 | 解读JS模块化开发中的 require、import 和 export
本篇分为两个部分 第一部分:总结了ES6出现之前,在当时现有的运行环境中,实现"模块"的方式: 第二部分:总结了ES6出现后,module成为ES6标准,客户端实现模块化的解决方案 ...
- js模块化开发——require.js学习总结
1.为什么使用require.js 作为命名空间: 作为命名空间使用: 异步加载js,避免阻塞,提高性能: js通过require加载,不必写很多script 2.require.js的加载 requ ...
随机推荐
- 11gR2 ASM RAC + ASM RAC dataguard配置
1.环境说明 --primary端配置 Primary RAC Node1 Node2 Public IP 192.168.56.120 192.168.56.122 Private IP 10.0. ...
- HTML 常用头部标签(meta)
先来看下常用的标签列表,后文会一一介绍: <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang=&quo ...
- js千分位处理
一.去掉千分位 function removeThousands(num) { var x = num.split(','); return parseFloat(x.join("" ...
- CSS(一)清除浮动
问题1:关于清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- BestCoder Round #86 1003
链接:http://acm.hdu.edu.cn/showproblem.php?pid=5806 题意:有多少个区间里的第 k 大的数不小于 m 解法:尺取法,首先我们用dp[i]保存到i的位置有多 ...
- django--权限(1)初识
一.权限表结构设计 1.认识权限 生活中处处有权限,比如,腾讯视频开会员才有观看某个最新电影的权限,你有房间钥匙就有了进入这个房间的权限,等等.同样,程序开发过程中也有权限,我们今天说的权限指的是we ...
- myeclipse 上安装 Maven
myeclipse 上安装 Maven3 环境准备: JDK 1.6 Maven 3.0.4 myeclipse 8.6.1 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Mav ...
- jvm 锁Lock
自旋锁 线程想要获得一个对象的锁,如果没有得到,会继承占用CPU尝试获取锁, 线程不进入阻塞状态,仍然在Running 锁消除 public void lockTest() { String aa = ...
- py---------网络编程
一.软件开发架构 我们了解的涉及到两个程序之间通讯的应用大致可以分为两种: 第一种是应用类:qq.微信.网盘.优酷这一类是属于需要安装的桌面应用 第二种是web类:比如百度.知乎.博客园等使用浏览器访 ...
- 剑指Offer——数组中只出现一次的数字(一个很帅的异或解法)
题目: 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 看题目脑子里就出现做法了: 遍历,用个HashMap来记录出现的次数,然后再遍历HashMap返回 ...