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 ...
随机推荐
- Linux中ext2文件系统的结构
1.ext2产生的历史 最早的Linux内核是从MINIX系统过渡发展而来的.Linux最早的文件系统就是MINIX文件系统.MINIX文件系统几乎到处都是bug,采用的是16bit偏移量,最大容量为 ...
- Windows下使用nvm管理多个Node.js 版本
下载 https://github.com/coreybutler/nvm-windows/releases 安装 配置 使用 # nvm install 版本号 # nvm list ...
- java+elipse安装及部分问题
1. elipse下载.安装.jdk环境配置教程: https://www.cnblogs.com/ForestDeer/p/6647402.html 2.eclipse使用教程: https://j ...
- JavaSE之Java基础(4)
16.String.StringBuilder和StringBuffer的区别 String类是final的,不可变,StringBuilder和StringBuffer可变: 大部分情况下的执行效率 ...
- 7天学完Java基础之0/7
笔记-7天学完Java基础之0/7 1.常用命令提示符(cmd) 启动:Win+R,输入cmd
- tomcat7 开机自启动(转)
转自 http://blog.csdn.net/rainyspring4540/article/details/51861079 环境:win7 tomcat7 开机自启动: 使用管理员打开命令提示 ...
- 《C++面向对象程序设计》之变量的生存期
<C++面向对象程序设计>之变量的生存期 静态生存期 (1)全局静态生存期:在函数体外声明,作用域从声明处开始到文件结尾处结束,称其有文件作用域,相当于全局变量 . (2)局部静态生存期: ...
- [转]Jetson TX1 开发教程(1)配置与刷机
开箱 Jetson TX1是英伟达公司新出的GPU开发板,拥有世界上先进的嵌入式视觉计算系统,提供高性能.新技术和极佳的开发平台.在进行配置和刷机工作之前,先来一张全家福: 可以看到,Jetson T ...
- Cocos2d-x v3.1 坐标系统(五)
Cocos2d-x v3.1 坐标系统(五) 为了能够更好的布局以及了解对象所在的位置,我们必须对Cocos2d-x中的坐标有详细的了解,本篇文章主要就是了解Cocos中用到的坐标系统.学过数学的人都 ...
- RStudio Server-0.99.902 (OpenLogic CentOS 7.2)
RStudio Server-0.99.902 (OpenLogic CentOS 7.2) 0 评论 平台: CentOS 类型: 虚拟机镜像 软件包: r-3.2.3 rstudio-server ...