背景

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
...........
 
js 文件之间相互依赖,变量会造成全局的污染,而且js之间的依赖顺序也会容易出错,容易造成混乱

AMD

定义:异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行

RequireJs

  • util.js
define(function(){
var util ={
getFormatDate: function(date,type) {
if(type ===1){
return '2017-06-21';
}else{
return '2017年06月21日';
}
}
}
return util;
})
  • a_util.js

define(['./util.js'],function(util){
var aUtil={
aGetFormatDate: function(date) {
return util.getFormatDate(date,2)
}
}
})
  • a.js

define(['./a_util.js'],function(aUtil){
var a={
printFormatDate: function(date) {
console.log(aUtil.aGetFormatDate(date));
}
}
return a;
})
  • main.js

require(['./a.js'],function(a) { //require 异步加载的模块必须定义为define
var date =new Date();
a.printDate(date);
})
  • 入口文件(app.html)

<script data-main="./main.js" src ="....引用require.js">

CommonJS

nodejs 模块化规范,现在被大量用于前端开发:前端开发依赖的库和插件,都可以从 NPM 服务器中获取,构建工具的高度自动化,使之npm 成本非常低,CommonJS 不会异步加载JS,而是同步一次性加载出来,
modele.exports = {
getFormatDate: function(date,type) {
........
}
} .......  

AMD 和 CommonJS 的使用场景

需要异步加载JS,使用AMD
使用了NPM ,建议使用CommonJS

构建工具

webpack

webpack 是根据webpack.config.js构建出bundle.js 文件:
import path from 'path'
module.exports = {
context :path.resolve(__dirname, './src') . //入口文件所在目录路径拼接
entry: './app', //入口文件
output: { //webpack 构建出的文件
path: path.resolve(__dirname,'dist')
filename: 'bundle.js'
},
module: {
loaders: [ //module.loaders分配加载程序
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: { presets: ['es2015', 'react'] } . //需要babel-preset-es2015和babel-preset-react转义
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin() //压缩
]
...........
};

  

JS模块化知识总结的更多相关文章

  1. JS模块化工具require.js教程(二):基本知识

    前一篇:JS模块化工具我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等 基本API require会定义三个变量:define,r ...

  2. 【转】JS模块化工具requirejs教程(二):基本知识

    前一篇:JS模块化工具requirejs教程(一):初识requirejs 我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等. 基 ...

  3. 探索javascript----浅析js模块化

    引言: 鸭子类型: 面向对象的编程思想里,有一个有趣的概念,叫鸭子类型:“一只鸟走起来像鸭子.游起泳来像鸭子.叫起来也像鸭子,那它就可以被当做鸭子.也就是说,它不关注对象的类型,而是关注对象具有的行为 ...

  4. 【转】JS模块化工具requirejs教程(一):初识requirejs

    随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求 ...

  5. Node.js 模块化你所需要知道的事

    一.前言 我们知道,Node.js是基于CommonJS规范进行模块化管理的,模块化是面对复杂的业务场景不可或缺的工具,或许你经常使用它,但却从没有系统的了解过,所以今天我们来聊一聊Node.js模块 ...

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

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

  7. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  8. ReactJS webpack实现JS模块化使用的坑

    从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack ...

  9. JS 模块化和打包方案收集

    1.这里想讨论的是拆分规则,不是在问哪个工具怎么使用.2.这里没有在想找正确答案,因为感觉这个问题要结合具体业务场景. 随着项目开发越来越大,一开始代码全打包到一个文件的方式,让文件越来越大,接下来要 ...

随机推荐

  1. vs文件属性(复制到输出目录)是什么意思

    右击项目里的文件,选择属性(F4)会有复制到输出目录的选项. 它提供三项选择,如图: 如果选择始终复制或如果较新则复制会在该程序集的bin目录下生成该文件,如图:

  2. C#学习笔记12

    1.在使用反射时,反射可以绕过安全访问级别(private.protected)修饰的类或属性,来获取需要的信息. 2.泛型的反射:可以使用Type.ContainsGenericParameters ...

  3. haproxy学习——简介、基本配置(二)

    官网:http://www.haproxy.org/ 个人感觉haproxy学习的重点在于配置上,把配置文档搞懂了就明白大部分套路了.不过本篇内容属于入门学习:1.使用haproxy简单的实现负载均衡 ...

  4. 使用mysql5.7新特性解决前通配符查询性能问题

    众所周知,在mysql里的后通配符可以使用索引查找,前通配查询却无法使用到索引,即使是使用到了索引,也是使用了索引全扫描,效率依然不高,再MySQL5.7之前,一直都没有好的办法解决,但是到了MySQ ...

  5. Struts2学习-拦截器

    1.新建项目user4,建立好和user3一样的目录,与之相比只是添加几个类,主要是struts.xml和action类的改变,其结果没有太大的变化 struts,xml <?xml versi ...

  6. java--内存管理的几点小技巧

    今天看一本书,书上提到了内存泄露,后面也提到了内存管理的小技巧,在这里记下来,以免以后忘记. 1.尽量使用直接量.比如:String str = "I can play!";而不是 ...

  7. python 提取字符串中的数字组成新的字符串

    方法一 # 有一个字符串text = "aAsmr3idd4bgs7Dlsf9eAF" # 请将text字符串中的数字取出,并输出成一个新的字符串 import re text = ...

  8. linux命令有用

    uptime 命令用来输出系统任务队列信息 last 列出目前与过去登入系统的用户相关信息 free 用来显示系统内存状态 ps 相應的選項組合為ps -ef.ps aux,可以通過這些組合準確定位系 ...

  9. iOS UI(布局)约束是什么?view1.attr1 = view2.attr2 * multiplier + constant

    /* Create constraints explicitly.  Constraints are of the form "view1.attr1 = view2.attr2 * mul ...

  10. POSIX多线程—线程基本概念

    http://blog.csdn.net/livelylittlefish/article/details/7957007 作者:阿波链接:http://blog.csdn.net/livelylit ...