Week3

MVC(Model-View-Controller)

MVC.png

视图（View）：用户界面.
控制器（controller）：业务逻辑
模型（Model）：数据保存
单向通信。也就是View与Model，必须通过Controller来承上启下。
MVP、MVVM源于MVC

MVP

MVP.png

各部分之间的通信，都是双向的。
View 与 Model 不发生联系，都通过 Presenter 传递。
View 非常薄，不部署任何业务逻辑，称为被动视图，Presenter 非常厚，所有逻辑都部署在那里。

MVVM

MVVM.png

双向数据绑定，(data-binding) ：
模型 => 视图，将后端传递的数据转化成所看到的页面(数据绑定)
视图 => 模型，将所看到的页面转化成后端的数据(DOM 事件监听)

Why MVVM

前端逐渐臃肿，仅靠controller完成前后端交互，工作量太大，响应速度也变慢。引出mvvm模式解决mvc中大量DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验的问题。View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

Locke Radar

mjml:简洁易开发的标记语言，帮助编写响应式电子邮件
BigQuery:Google的低成本分析数据仓库，内置内存BI引擎和机器学习，无需数据库管理员
kasada:用于企业web应用程序的Bot检测，识别真实用户与机器访问。

Webpack+Babel+React

完整配置

npm init 
npm i --save react react-dom  // react相关依赖包
npm i --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react  //webpack依赖包
npm i --save-dev webpack webpack-cli webpack-dev-server  //babel相关依赖包,把jsx转成js可识别的函数
npm i --save-dev html-webpack-plugin //安装复制文件插件

npm i --save-dev style-loader css-loader postcss-loader sass-loader  //识别sass、css
npm i --save-dev file-laoder   //识别文件
npm i --save-dev svg-inline-loader  //识别svg图像
npm i --save-dev react-hot-loader //热更新

others:
npm i module_name -S = > npm install module_name --save 写入到 dependencies 对象(需要发布到生产环境)
npm i module_name -D => npm install module_name --save-dev 写入到 devDependencies 对象(只用于开发环境)

<package.json>
    "scripts": {  //定义脚本命令
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --config config/webpack.config.dev.js"  //npm run dev即可运行开发服务器模式
    },

<webpack.config.js>
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const resolve = (dir) => path.join(__dirname, '../', dir)

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: { //入口文件
        app: resolve('src/index.jsx')
    },
    output: {
        filename: '[name].js',
        path: resolve('dist')
    },
    resolve: {  //指定可以被 import 的文件后缀
        extensions: ['.js', '.jsx', '.scss', '.css']
    },
    module: {  //通过正则表达式去匹配不同后缀的文件名，然后给它们定义不同的加载器
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    plugins: ['react-hot-loader/babel'],
                    presets: ['@babel/preset-env', '@babel/preset-react']  //babel插件集合的预设
                },
            },
            ...   //其他rules
            ]},
    devServer: {
        host: 'localhost',
        port: '8001',
        open: true
    },
    plugins: [   //使用插件，先require()它，然后把它添加到 plugins 数组中。
        new HtmlWebpackPlugin({
            filename: resolve('dist/index.html'),
            template: resolve("static/index.html")
        })
    ]
}

<react入口文件>
import ReactDOM from 'react-dom'
import React from 'react'

ReactDOM.render(
  <h1>hello webpack</h1>,
  document.getElementById('root')
)

migration

输入：用户名、密码
输出：将老用户的用户名及密码从DB1迁到DB2
1.用户登陆
2.在DB1中验证是否为已有用户，若用户已存在=》3，若为新用户=》4
3.验证用户名密码是否正确
4.拿到用户名及明文密码采用DB2的算法存入DB2

React

Why JSX

We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." ---React官方

若以组件为中心，把 HTML 模板直接嵌入到 JS 代码里面，这样就做到了模板和组件关联。 ==> JSX

JSX use：
HTML 里的 class 在 JSX 里要写成 className，因为 class 在 JS 里是保留关键字。同理某些属性比如 for 要写成 htmlFor。

ReactDOM.render(template,targetDOM),将模板转化为HTML语言，并插入指定的DOM节点。接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹，如<div>；第二个参数是插入该模板的目标位置。