獨釣寒江雪

前端ARTS打卡计划（一）

2020/04/11 ARTS 本文共6972字,阅读全文约需27分钟 本文总阅读量 次

  最初看到 ARTS，是在极客时间， 是左耳朵耗子发起的一个高效的、需要持续坚持的学习方法。不过在此之前，我一期也没有参加过，一则，自己每天是有自己的学习规划和打卡途径的；二则，英文阅读确实是一个让我头疼的存在；三则，记得当时的 ARTS 打卡计划报名要收钱（完成打卡计划后会退回）。总之，因为各种原因，没有参加过，哈哈。

什么是 ARTS

ARTS打卡计划

ARTS 打卡计划规划

  • Algorithm 部分：记得决定转行前端那会儿，主要是通过 W3Cschool 完成FreeCodeCamp 挑战来找回编程的感觉，开始用 LeetCode 也是去年底的时候了，借着此次 ARTS 打卡计划，可以更多的完成相关算法题目；
  • Review 部分：最头疼的部分了，还是要努力去克服下，主要通过InfoQ、Medium等渠道吧；
  • Tip 部分：主要还是按照以前的规划，以极客时间专栏为主，同步更新前端学习之路【学习途径、资料、书籍等】；也会积累一些工作、阅读中的收获；
  • Share 部分：争取每月能有一到两篇技术总结，主要集中于本博客中，外发地址，可能还是和以前一样，以个人SegmentFault 思否专栏为主；

ARTS 打卡计划

第一周(2020.04.06-2020.04.12)

第二周(2020.04.13-2020.04.19)

  • Algorithm：
  • Review: Simplify your JavaScript – Use .map(), .reduce(), and .filter()
  • Tip：
    • 可以使用 localeCompare() 方法来实现中文按照拼音排序 
      var array = ["白鸽", "麻雀", "大象", "狗", "猫", "鸡"];
array = array.sort((item1, item2) => item1.localeCompare(item2));
//["白鸽", "大象", "狗", "鸡", "麻雀", "猫"]
    • 一个对象数组按照另一个数组排序 
      sortFunc = (propName, referArr) => (prev, next) => referArr.indexOf(prev[propName]) - referArr.indexOf(next[propName])
// 按照年龄age的顺序给person排序
const age = [33, 11, 55, 22, 66];
const person = [
 {age: 55, weight: 50},
 {age: 22, weight: 42},
 {age: 11, weight: 15},
 {age: 66, weight: 56},
 {age: 33, weight: 68}]
person.sort(sortFunc('age', age))
<!-- 结果： -->
[
 {"age": 33,"weight": 68},
 {"age": 11,"weight": 15},
 {"age": 55,"weight": 50},
 {"age": 22,"weight": 42},
 {"age": 66,"weight": 56}
]

第三周(2020.04.20-2020.04.26)

第四周(2020.04.27-2020.05.03)

  • Algorithm：
  • Review: Node.js 14.0 Improves Diagnostics and Internationalization, Adds Web Assembly System Interface

  • Tip：

    • Docker 基础使用
    • wrappedComponentRef：antd form 组件，经过 Form.create 之后，获取到的 ref，无法调用自定义组件的内部方法的问题（自定义组件貌似还必须是 Component 组件）
    //EditCreateForm调用及ref创建
refEditCreateForm = React.createRef()
this.refEditCreateForm.current.open(id)
<EditCreateForm wrappedComponentRef={this.refEditCreateForm}/>

// EditCreateForm组件
import React, { Component } from 'react';
import { Modal, Form, Input } from 'antd';
class EditCreateForm extends Component {
   state = { visible: false, id: ''}
   open = (id) => {
      this.setState({ visible: true, id })
   }
   render() {
      return (
            <Modal
               visible={this.state.visible}
               title="编辑"
               okText="保存"
               destroyOnClose
            >
               <Form layout="vertical">
                  // ...
               </Form>
            </Modal>
      );
   }
};
export default Form.create()(EditCreateForm);

第五周(2020.05.04-2020.05.10)

第六周(2020.05.11-2020.05.17)

第七周(2020.05.18-2020.05.24)

第八周(2020.05.25-2020.05.31)

第九周(2020.06.01-2020.06.07)

第十周(2020.06.08-2020.06.14)

  • Algorithm：

  • Tip：

    • 让你纵横 GitHub 的五大神器：Octotree（项目的目录结构树）、Sourcegraph（查看变量引用情况和方法的定义）、Enhanced GitHub（单文件下载）、Widescreen for GitHub（充分利用屏幕，以 100％的宽度显示代码）、GitHub Dark Theme（暗色风格的 GitHub）
    • 2020 年 MacBook 选购指南 | 2020 款 13 寸 MacBook Pro 性能实测
    • API 测试工具：Postman、API Tester（Chrome 插件）、REST Client（VSCode 插件）、curl 的用法指南
    • Fetch问题
      • 开发前后端分离项目，并且前后端服务器需要跨域来交互，直接用fetch会出问题，提示让使用mode: ‘no-corss’，但是使用该mode后，虽然不再报错，但是后端无法获取数据：fetch 跨域请求 mode 为 cors 则报错 值为 no-cors 则感觉没有发送，甚至出现Content-Type: application/json;charset=utf-8 无法设置成功的问题。
      • fetch中mode - 是否允许跨域请求，以及哪些响应的属性是可读的。
      • 可选值：cors：（默认, 允许跨域请求，将遵守 CORS 协议）；
      • no-cors：该模式允许来自 CDN 的脚本、其他域的图片和其他一些跨域资源。前提条件是请求的 method 只能是 HEAD、GET 或 POST。而且 js 不能访问 Response 对象中的任何属性（no-cors需要服务端特别配置，一般在目标是CDN资源时可用）。
      • Fetch 使用教程 | 使用 Fetch | webpack开发配置API代理解决跨域问题-devServer
      • 解决：参考下一条【express 设置允许跨域访问】，前端不设置mode: 'no-corss'，后端nodejs允许跨域访问。

    • express 设置允许跨域访问

      //demo
const express = require("express");
const app = express();

//设置允许跨域访问该服务.
app.all("*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "*");
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

app.get("/hello", function (req, res) {
  res.json({});
});

const server = app.listen(8082, function () {
  console.log(
    "Express app server listening on port %d",
    server.address().port
  );
});
    • express-cors：Simple middleware for adding CORS functionality to your expressjs app。 
        const cors = require('express-cors')
      
  app.use(cors({
     allowedOrigins: [
        'github.com', 'google.com'
     ]
  }))
    • Promise.all接口调用 
          const creditEnumConfig = [
        "applyType",
        "attrValueType",
        "execState",
        "fileType",
        "oaRequestState",
        "orderState",
        "signedState",
        "signedType",
        "taskState",
    ]
    const creditMdmConfig = [
        "brandInfluence",
        "creditApplyReason",
        "creditSystemRecord",
        "custType",
        "historicalRepaymentRecord",
        "limitType",
        "monthConsumption",
        "other",
        "paidInCapital"
    ]
    let p1 = new Promise(function (resolve, reject) {
        // action, params = {}, callback
        ToolsMixin.ssoApi(
            'Sleeve.CreditEnumConfig',
            { TypeArr: creditEnumConfig },
            result => {
                resolve({ ...result.Data || {} })
            }
        );
    });
    let p2 = new Promise(function (resolve, reject) {
        let arr = []
        creditMdmConfig.map(item => {
            arr.push(
                new Promise(function (resolve, reject) {
                    ToolsMixin.ssoApi(
                        'Sleeve.CreditMdmConfig',
                        { Type: item },
                        result => {
                            result.Data.map(item => {
                                item.label = item.brName
                                item.value = item.brCode
                            })
                            resolve({ [item]: result.Data || [] })
                        }
                    );
                }))
        })
        Promise.all(arr).then((result) => {
            let res = {}
            result.map(item => {
                res[Object.keys(item)[0]] = item[Object.keys(item)[0]]
            })
            resolve(res)
        })
    });
    Promise.all([p1, p2]).then((result) => {
        this.setState({ CreditEnumConfig: { ...result[0]}, CreditMdmConfig: { ...result[1] } })
    })
    • VSCode配置同步 ：Settings Sync

Search

    欢迎与我交流

    江南逰子

    Table of Contents