模块 (采用commonJS 模块化开发)
用户模块：数据安全处理；表单同步/异步验证；小型SPA开发；
商品模块：jQuery插件模块化；独立组件抽离技巧；多功能列表开发；
购物车模块：商品状态随时验证；模块内部方法调用方式；非form提交时的数据验证；
订单模块：modal式组件封装思想；城市级联操作；复杂表单回填；
支付模块: 对接支付宝；支付状态检测；支付成功回执处理；
注： 分层次：有 MVC 、 MVVM (M V VM ) 分层架构；分模块： commonJS ，ES6
（教学视频课会把一些基本的内容说的很高大上）
安装软件： NodeJs ； Git ；Sublime ；Chrome ；Charless/Fiddler(抓包工具)
sublime安装插件：ctrl +shift + p
subllime快捷键：
了解跨域问题： https://segmentfault.com/a/1190000015597029
fiddler入门： https://www.cnblogs.com/woaixuexi9999/p/9247705.html ; 拦截请求 https://www.cnblogs.com/GreenLeaves/p/6971452.html
webpack
其他人的配置过程：https://juejin.im/post/5c7f28056fb9a049bb7d169a
webpack 应该是官方中文文档：https://www.webpackjs.com/guides/installation/ 版本更新可能会和以前安装方式不一样，先看官方的文档，比较经常更新
webpack入门：https://zhaoda.net/webpack-handbook/preface.html
webpack 安装： https://segmentfault.com/a/1190000013699050 验证（要带上完全的路径）：node_modules/.bin/webpack -v
学习怎么配置 入口、出口文件：多个入口对应多个出口 js/[name].js
const path = require('path');
/*页面入口,配置多个入口*/
var config = {
mode: 'development',
entry: {
'index' : './src/page/index/index.js',
'login' : './src/page/login/index.js'
},
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist')
}
};
module.exports = config;
引入jQuery文件：
安装： npm install jquery --save
引入和使用：
方式1：以变量的方式安装jQuery（这个方式只是在js文件局部引入）
var $ = require('jquery')
$('body').html('hello jquery');
方式2： 在HTML全局引入
在HTML加入（cdn）：<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
然后：在js文件也可以使用 $('body').html('hello jquery');
提取公共模块 ： 共享一些文件，而不是每个都复制一份
使用commonschunkplugin插件：https://segmentfault.com/a/1190000016623314 https://blog.csdn.net/qq_16559905/article/details/79404173
处理CSS： https://juejin.im/post/5c7a7ba9f265da2da53ee725
使用插件： style-loader ; css-loader 对css进行单独打包。看这个-----》 https://www.jianshu.com/p/b230a69be59b
html-webpack-plugin插件：https://simplecodecx.github.io/blog/20190224/e9584fe7.html
提取头文件 ： npm install -D html-loader
引入代码：
<head>
<%= require('html-loader!./layout/html-head.html') %>
</head>
接下来是关于如何处理图片资源和文件处理：
安装 url-loader
介绍：https://www.jianshu.com/p/8ff8e71dcbc6
npm install url-loader --save-dev
安装webpack-dev-server （用于方便开发）：npm install webpack-dev-server --save-dev
介绍：https://segmentfault.com/a/1190000006670084
运行(两种模式)：
E:javaRoadcodecombatfront_endeshop-fe ode_modules/.bin/webpack-dev-server
webpack-dev-server --inline --port 8088 ( E:javaRoadcodecombatfront_endeshop-fe ode_modules/.bin/webpack-dev-server --inline --port 8088 )
webpack-dev-server --inline --content-base ./dist
打开后访问通过 http://localhost:8088/dist/view/index.html
命令：
运行局部webpack（完全的路径） E:javaRoadcodecombatfront_endeshop-fe ode_modules/.bin/webpack
注：
scripts 用于命令行输入 npm run 脚本名 ，则相当于在命令行 运行 脚本内容。我的是Windows10 ，mac下传参方式不一样
{
"name": "eshop-fe",
"version": "1.0.0",
"description": "eshop前端",
"main": "index.js",
"scripts": {
"dev" : "E:/javaRoad/code/combat/front_end/eshop-fe/node_modules/.bin/webpack-dev-server --inline --port 8088 && set WEBPACK_ENV=dev",
"dist" : "E:/javaRoad/code/combat/front_end/eshop-fe/node_modules/.bin/webpack && set WEBPACK_ENV=online"
},
"author": "anitano",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"dependencies": {}
}
...end