如何开发一个Form

背景

Form是前端开发中使用频率最高的元素之一，也是变化最复杂的组件之一。

Form虽然从结果上看，是表单内容的填写+验证+提交，但在此过程中还是有很多变化的。例如表单内容之间的联动，非常规表单内容的组合展示，复杂验证等等。

如何更快速的完成一个Form的编码是前端工程师不断关注和努力的方向之一。

最近工作中遇到一个较为复杂的Form，输入项有六七十个，联动极多。Form中还穿插着表格等其他组件的展示。

对如何写好这个form，做了一些思考，列在本文中。

more >>

阅读全文 >>

hash路由下，允许单路由跳过登录

背景

有个同事来问，在node层做sso登录验证的情况下，如果想让现有的一个路由绕过登录应该怎么做？

要解决这个问题，先看一下目前的结构：

  • 前端采用react全家桶构建SPA，使用hash路由。
  • 在node层用koa做http server，验证登录，和做service转发（解决跨域）

原先的方式中，koa的第一个中间件函数就是验证SSO，也就是所有路由都会经过SSO验证通过后才会继续向下走。

more >>

阅读全文 >>

React16 ReactRouter5特性

React.StrictMode

create-react-app建立的demo项目中，使用了React.StrictMode

1
2
3
4
5
6
ReactDOM.render(
  <React.StrictMode>
    <Basic />
  </React.StrictMode>,
  document.getElementById('root')
);

特性

  1. StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。
  2. 可以为应用程序的任何部分启用严格模式。

可以识别：

  1. 识别不安全的生命周期
  2. 关于使用过时字符串 ref API 的警告
  3. 关于使用废弃的 findDOMNode 方法的警告
  4. 检测意外的副作用
  5. 检测过时的 context API

可以看出，这是一个帮助你进行react升级的好工具。

Link

以前的v2/v3版本

1
import { Link } from 'react-router'

从V4之后

1
import { Link } from 'react-router-dom'

router

以前

1
2
3
import { hashHistory } from 'react-router'
const history = syncHistoryWithStore(hashHistory, store);
<Router history={history} routes={routes} />

现在

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import {
  HashRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Switch>
        <Route exact path="/">
          <Basic />
        </Route>
        <Route path="/about">
          <Food />
        </Route>
        <Route path="/dashboard">
          <Hotel />
        </Route>
      </Switch>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

webpack

clean-webpack-plugin

过去0.1.18/0.1.19

1
2
3
4
5
const CleanWebpackPlugin = require('clean-webpack-plugin');
new CleanWebpackPlugin(['*.*', 'js', 'scripts'], {
    root: path.resolve(__dirname, './dist'),
    verbose: true
})

现在^3.0.0

1
2
3
4
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
new CleanWebpackPlugin({
  cleanAfterEveryBuildPatterns: ['build/home']
})

css-loader

Webpacker only supports css-loader versions greater than 2.1.1, and less than 3.0.0.

持续补充中……

阅读全文 >>

微前端实践

微前端

微前端是2019年很火的一个话题，但是这个概念其实是2016年提出的。
主要解决前端巨石项目的问题。

  1. 技术栈升级
  2. 独立开发/维护/测试（沙盒）
  3. 增量打包/发布

主要问题

  1. 路由处理
  2. 状态处理
  3. 打包/部署
  4. CSS污染

框架

single-spa

qiankun

技术实践

步骤

采用不同子项目在同一个git仓库的方式

  1. react基础应用

React16 + ReactRouter5

  1. 切割应用
    待做：通过脚本实现分离

独立成单独项目，拥有自己的package.json，webpack

  • 创建3个子项目：npx create-react-app home/work/main
  • 去除项目中的无关项，public目录是共有的，也去除。
  • 为每个项目设置单独的webpack（你也可以使用不同的devserver方式和构建方式，推荐使用webpack）
  • webpack及其插件，可以安装在最外层
  1. 各个框架适配

single-spa

抛弃single-spa

挂载应用到不同的dom上

延伸

每一个独立组件或者说JS的模块就是一个应用，用调用service的方法使用组件

阅读全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

爱前端、爱小说、爱音乐、爱产品、爱游泳、爱动漫、爱家务、爱安静、爱萧萧。人生这么短，且行且努力。