Week3

MVC(Model-View-Controller)

MVC.png

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

MVP

MVP.png
  1. 各部分之间的通信, 都是双向的。
  2. View 与 Model 不发生联系, 都通过 Presenter 传递。
  3. 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 对象(只用于开发环境)


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

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")
        })
    ]
}

import ReactDOM from 'react-dom'
import React from 'react'

ReactDOM.render(
  

hello webpack

, 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元素外层需使用一个标签进行包裹,如

;第二个参数是插入该模板的目标位置。

你可能感兴趣的:(Week3)