AMD
Asynchronous Module Definition规范其实主要一个主要接口define(id?,dependencies?,factory);它要在声明模块的时候指定所有的依赖dependencies,并且还要当做形参传到factory中，对于依赖的模块提前执行。
define("module",["dep1","dep2"],function(d1,d2){
return someExportedValue;
});
require(["module", "../file.js"],function(module,file){});
优点：
- 适合在浏览器环境中异步加载模块
- 可以并行加载多个模块
缺点：
- 提高了开发成本，代码的阅读和书写比较困难，模块定义方式的语义不畅
- 不符合通用的模块化思维方式，是一种妥协的实现。
实现：
- RequireJS
- curl
CMD
Commons Module Definition规范和AMD很相似，尽量保持简单，并与CommonsJS和NodeJS的Modules规范保持了很大的兼容性。
define(function(require, exports, module){
var $ = require("jquery");
var Spinning = require("./spinning");
exports.doSomething = ...;
module.exports = ...;
});
优点：
- 依赖就近，延迟执行
- 可以很容易在NodeJS中执行
缺点：
- 依赖SPM打包，模块的加载逻辑偏重
实现：
- Sea.js
- coolie
ES6模块
EcmaScript6标准增加了JavaScript语言层面的模块体系定义。ES6模块的设计思想，是尽量静态化，使编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonsJS和AMD模块，都只能在运行时确定这写东西。
import "jquery";
export function doStuff(){}
module "localModule"{}
优点：
- 容易进行静态分析
- 面向未来的EcmaScript标准
缺点：
- 原生浏览器端还没有实现该标准
- 全新的命令，新版的NodeJS才支持
实现：
- Babel
安装Webpack
WebPack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS图片等作为模块来处理和使用。
安装
npm install webpack -g
npm install webpack-cli -g
测试安装成功：
- webpack -v
- webpack-cli -v
配置
创建webpack.config.js配置文件
- entry:入口文件，指定WebPack用哪个文件作为项目的入口
- output:输出，指定WebPack把处理完成的文件放置到指定路径
- module:模块，用于处理各种类型的文件
- plugins:插件，如：热更新、代码重用等。
- resolve:设置路径指向
- watch:监听，用于设置文件改动后直接打包。
module.exports = {
entry:"",
output:{
path:"".
filename:""
},
module:{
loaders:[
{test:/\.js$,loader:""}
]
},
plugins:{},
resolve:{},
watch:true
}
直接运行webpack命令打包
使用webpack
1.创建项目
2.创建一个名为modules的目录，用于放置JS模块等资源文件
3.在modules下创建模块文件，如hello.js,用于编写JS模块的相关代码
//暴露一个方法
exports.sayHi = function () {
document.write("<h1>狂神说ES6</h1>");
};
4.在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性
//require导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();
5.在项目目录下创建webpack.config.js配置文件，使用webpack命令
module.exports = {
entry: './modules/main.js',
output:{
filename:"./js/boundle.js"
}
};
6.在项目目录下创建HTML页面，如index.html,导入WebPack打包后的JS文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--前端的模块化开发-->
<script src="dist/js/boundle.js"></script>
</body>
</html>
7在IDEA控制台中直接执行webpack;如果失败，就使用管理员权限运行即可
8.运行HTML看效果
说明：
# 参数 --watch 用于监听变化
webpack --watch
Vue: vue-router路由
说明
学习的时候，尽量的打开官方的文档
Vue Router 是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的，基于组件的路由配置
- 路由参数、查询、通配符等
- 基于Vue.js过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的CSS class的链接
- HTML5历史模式或hash模式，在IE9中自动降级。
- 自动定义的滚动条行为。
安装
基于第一个vue-cli 进行测试学习，先查看node_modules中是否存在vue-router
vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。
npm install vue-router --save-dev
我的在IDEA中输入这个没有成功，所以在命令行（以管理员身份）进行实现的：
如果在一个模块化工程中使用它，必须通过Vue.use()明确安装路由功能。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
重新安装webpack
因为我的webpack 的 src–>assets components里面不能删除文件也无法创建文件 所以我从新安装
重新安装的流程 把原来的文件删了 换了个路径创建新的：
如果IDEA中的Terminal不能运行命令去IDEA的属性配置里面修改就行 但是要重新启动IDEA
vue只有一个接口
扫一扫
1759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
