JS模块化知识总结
背景
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
...........
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
modele.exports = {
getFormatDate: function(date,type) {
........
}
} .......
AMD 和 CommonJS 的使用场景
构建工具
webpack
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模块化知识总结的更多相关文章
- JS模块化工具require.js教程(二):基本知识
前一篇:JS模块化工具我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等 基本API require会定义三个变量:define,r ...
- 【转】JS模块化工具requirejs教程(二):基本知识
前一篇:JS模块化工具requirejs教程(一):初识requirejs 我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等. 基 ...
- 探索javascript----浅析js模块化
引言: 鸭子类型: 面向对象的编程思想里,有一个有趣的概念,叫鸭子类型:“一只鸟走起来像鸭子.游起泳来像鸭子.叫起来也像鸭子,那它就可以被当做鸭子.也就是说,它不关注对象的类型,而是关注对象具有的行为 ...
- 【转】JS模块化工具requirejs教程(一):初识requirejs
随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求 ...
- Node.js 模块化你所需要知道的事
一.前言 我们知道,Node.js是基于CommonJS规范进行模块化管理的,模块化是面对复杂的业务场景不可或缺的工具,或许你经常使用它,但却从没有系统的了解过,所以今天我们来聊一聊Node.js模块 ...
- JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
- 从273二手车的M站点初探js模块化编程
前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...
- ReactJS webpack实现JS模块化使用的坑
从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack ...
- JS 模块化和打包方案收集
1.这里想讨论的是拆分规则,不是在问哪个工具怎么使用.2.这里没有在想找正确答案,因为感觉这个问题要结合具体业务场景. 随着项目开发越来越大,一开始代码全打包到一个文件的方式,让文件越来越大,接下来要 ...
随机推荐
- vs文件属性(复制到输出目录)是什么意思
右击项目里的文件,选择属性(F4)会有复制到输出目录的选项. 它提供三项选择,如图: 如果选择始终复制或如果较新则复制会在该程序集的bin目录下生成该文件,如图:
- C#学习笔记12
1.在使用反射时,反射可以绕过安全访问级别(private.protected)修饰的类或属性,来获取需要的信息. 2.泛型的反射:可以使用Type.ContainsGenericParameters ...
- haproxy学习——简介、基本配置(二)
官网:http://www.haproxy.org/ 个人感觉haproxy学习的重点在于配置上,把配置文档搞懂了就明白大部分套路了.不过本篇内容属于入门学习:1.使用haproxy简单的实现负载均衡 ...
- 使用mysql5.7新特性解决前通配符查询性能问题
众所周知,在mysql里的后通配符可以使用索引查找,前通配查询却无法使用到索引,即使是使用到了索引,也是使用了索引全扫描,效率依然不高,再MySQL5.7之前,一直都没有好的办法解决,但是到了MySQ ...
- Struts2学习-拦截器
1.新建项目user4,建立好和user3一样的目录,与之相比只是添加几个类,主要是struts.xml和action类的改变,其结果没有太大的变化 struts,xml <?xml versi ...
- java--内存管理的几点小技巧
今天看一本书,书上提到了内存泄露,后面也提到了内存管理的小技巧,在这里记下来,以免以后忘记. 1.尽量使用直接量.比如:String str = "I can play!";而不是 ...
- python 提取字符串中的数字组成新的字符串
方法一 # 有一个字符串text = "aAsmr3idd4bgs7Dlsf9eAF" # 请将text字符串中的数字取出,并输出成一个新的字符串 import re text = ...
- linux命令有用
uptime 命令用来输出系统任务队列信息 last 列出目前与过去登入系统的用户相关信息 free 用来显示系统内存状态 ps 相應的選項組合為ps -ef.ps aux,可以通過這些組合準確定位系 ...
- iOS UI(布局)约束是什么?view1.attr1 = view2.attr2 * multiplier + constant
/* Create constraints explicitly. Constraints are of the form "view1.attr1 = view2.attr2 * mul ...
- POSIX多线程—线程基本概念
http://blog.csdn.net/livelylittlefish/article/details/7957007 作者:阿波链接:http://blog.csdn.net/livelylit ...