模块化开发的原因:

1、引入的js过多然后在加载的过程中容易出现假死的状态,导致页面会发生白屏

2、变量名的问题 在多人协作开发的时候容易出现变量名的冲突 面向对象

3、引入优先级的问题

模块化开发分类:

(1).requireJS:

参考网址:http://www.requirejs.cn/

RequireJS 是基于 AMD 规范的模块加载器,它不依赖于任何 JavaScript 新语言特性,可以直接运行在浏览器环境中。这是个比较老、曾经非常流行的模块加载器,它主要提供的功能是:

  1. 提供了模块化得支持。
  2. 可以异步、按需加载模块,这样就可以在用到某个 JS 模块的时候再去加载它,能提高首屏加载速度。

ES6 的 Modules:

  1. 提供了模块化的支持。

但是 es6 Modules 是JavaScript新特性,目前浏览器还不支持,不能直接用,就算以后可以直接用了,如果希望做到按需、异步加载的话也需要配合相应的加载器来加载 JS 文件。

但是如果你用 webpack 的话,直接用 ES6 是最好的选择。因为:

  1. webpack 可以通过 babel-loader 来转义 ES6 为浏览器可以支持的方式。
  2. 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:第一个参数是模块名字  第二个参数是一个回调函数 
回调函数里面有(n:有多少个模块就有多少个参数)个参数
 */
//先去引入配置文件  当配置文件引入以后再去加载你需要的一些模块
require(["config"],function() {
require(["jquery","highcharts","layer","alert"],function($,his,layer,alert) {
alert.init();
console.log($,layer,alert)
})
})

步骤

1、引入require
2、引入入口文件
3、配置config文件
4、将config文件在appjs文件内进行引入  然后在去加载其他模块
5、书写自己的模块 必须遵循AMD规范 用define定义  定义完毕以后将当前函数return出去
6、配置当前模块的路径
7、在app.js中引入改模块 
8、调用该方法
 */

require.js模块化开发的更多相关文章

  1. JS模块化开发----require.js

    前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前 ...

  2. JS模块化开发:使用SeaJs高效构建页面

    一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...

  3. JS模块化开发(三)——seaJs+grunt

    1.seaJs直接构建存在的问题 由于模块之间的依赖require引用的是模块名,当多个js模块被合并成一个时,会由于找不到模块名而报错 2.seaJs+grunt开发 用到的插件:grunt-cmd ...

  4. 初步理解require.js模块化编程

    初步理解require.js模块化编程 一.Javascript模块化编程 目前,通行的Javascript模块规范共有两种:CommonJS和AMD. 1.commonjs 2009年,美国程序员R ...

  5. Js模块化开发的理解

    Js模块化开发的理解 模块化是一个语言发展的必经之路,其能够帮助开发者拆分和组织代码,随着前端技术的发展,前端编写的代码量也越来越大,就需要对代码有很好的管理,而模块化能够帮助开发者解决命名冲突.管理 ...

  6. require.js模块化

    require.js简单来说就是把js代码分装模块化了 模块化 模块就是实现特定功能的一组方法.只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. 我拿一个运动框架来解释一下req ...

  7. js模块化开发——require.js的用法详细介绍(含jsonp)

    RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签脚本加载步骤.可以用它回事.优化代码,但其主要的目的还是为了代码的模块化.它鼓励在使用脚本以moudle ...

  8. 前端模块化 | 解读JS模块化开发中的 require、import 和 export

    本篇分为两个部分 第一部分:总结了ES6出现之前,在当时现有的运行环境中,实现"模块"的方式: 第二部分:总结了ES6出现后,module成为ES6标准,客户端实现模块化的解决方案 ...

  9. js模块化开发——require.js学习总结

    1.为什么使用require.js 作为命名空间: 作为命名空间使用: 异步加载js,避免阻塞,提高性能: js通过require加载,不必写很多script 2.require.js的加载 requ ...

随机推荐

  1. 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. ...

  2. HTML 常用头部标签(meta)

    先来看下常用的标签列表,后文会一一介绍: <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang=&quo ...

  3. js千分位处理

    一.去掉千分位 function removeThousands(num) { var x = num.split(','); return parseFloat(x.join("" ...

  4. CSS(一)清除浮动

    问题1:关于清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. BestCoder Round #86 1003

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5806 题意:有多少个区间里的第 k 大的数不小于 m 解法:尺取法,首先我们用dp[i]保存到i的位置有多 ...

  6. django--权限(1)初识

    一.权限表结构设计 1.认识权限 生活中处处有权限,比如,腾讯视频开会员才有观看某个最新电影的权限,你有房间钥匙就有了进入这个房间的权限,等等.同样,程序开发过程中也有权限,我们今天说的权限指的是we ...

  7. myeclipse 上安装 Maven

    myeclipse 上安装 Maven3   环境准备: JDK 1.6 Maven 3.0.4 myeclipse 8.6.1 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Mav ...

  8. jvm 锁Lock

    自旋锁 线程想要获得一个对象的锁,如果没有得到,会继承占用CPU尝试获取锁, 线程不进入阻塞状态,仍然在Running 锁消除 public void lockTest() { String aa = ...

  9. py---------网络编程

    一.软件开发架构 我们了解的涉及到两个程序之间通讯的应用大致可以分为两种: 第一种是应用类:qq.微信.网盘.优酷这一类是属于需要安装的桌面应用 第二种是web类:比如百度.知乎.博客园等使用浏览器访 ...

  10. 剑指Offer——数组中只出现一次的数字(一个很帅的异或解法)

    题目: 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 看题目脑子里就出现做法了: 遍历,用个HashMap来记录出现的次数,然后再遍历HashMap返回 ...