WangXiaoGang

# 安全问题：CSRF和XSS ## 前言 前端开发可能不太重视相关知识的补充，但多数时候安全问题也是能从前端角度防范。对于前端可以不会，但大致得了解。熟知的SQL注入，这个其实跟前端的关系不是很大。很少有做接口的人会笨到直接接收参数不做任何处理入库。 ## CSRF ### CSRF的攻击原理 > CSRF（Cross-site request forgery）：跨站请求伪造。 用户是网站A的注册用户，且登录进去，于是网站A就给用户下发cookie。要完成一次CSRF攻击，受害者必须满足两个必要的条件： - 登录受信任网站A，并在本地生成Cookie。（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api接口时，会提示你登录） - 在不登出A的情况下，访问危险网站B（其实是利用了网站A的漏洞）。 温馨提示一下，cookie保证了用户可以处于登录状态，但网站B其实拿不到 cookie。 ### CSRF如何防御 #### 方法一、Token 验证：（用的最多） - 服务器发送给客户端一个token； - 客户端提交的表单中带着这个token。 -...

## State Hook React JS 在16.8 版本中增加了这一特性，主要用于解决Class声明方式带来的语言理解障碍和为后续Compiler as Framework铺路。它的有点主要有下面几个： - 代码逻辑聚合，逻辑复用 - HOC嵌套地狱 - 代替class ## 如何使用 > 在类定义中，我们可以使用到许多 React 特性，例如 state、 各种组件生命周期钩子等，但是在函数定义中，我们却无能为力，因此 React 16.8 版本推出了一个新功能 (React Hooks)，通过它，可以更好的在函数定义组件中使用 React 特性。...

缓存对于前端性能优化来说是个很重要的点，良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度，本质上在缓存上前端能出的力比较有限，主要是通过服务器实现的。通常浏览器缓存策略分为两种：强缓存和协商缓存 ## 强缓存 > 实现强缓存可以通过两种响应头实现：Expires和 Cache-Control 。强缓存表示在缓存期间不需要请求，state code为 200 ``` Expires: Wed, 22 Oct 2018 08:41:00 GMT ``` >Expires 是 HTTP / 1.0 的产物，表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT...

# 要不要养一条NodeJS爬虫玩玩 爬虫？不是用 python 写的吗？ 谁告诉你非得用 python 写。nodejs也可以啊。不信我给你写一个。 > 知识点 ``` # nodejs # https 和 http # DOM Query ```  ## 实例 ### 第一步 ```js //先写个简单的。 let cheerio...

# 原厂开发之如何在ucf-web中实施多语言 # 前言 本文主要介绍在项目中如何加入多语言的环境和开发规范，主要依赖 `react-intl` 这个包，外部打包依赖 `babel-plugin-react-intl` 抽取 id 来实现高效注入和便携开发。 # 第一章 快速开始 ## 1.1 准备多语环境 安装 `react-intl` 后在项目页面的主入口注入多语对象，如下示例编写通用多语组件，该组件可放在 `common` 目录中。 ```javascript import React from 'react'; import ReactDOM from...

# 原厂开发之ucf-web使用规范 # 前言 本文主要针对一般ucf-web框架下的开发实战做约束以及具体场景代码写法的描述。 # 目录描述 ``` . ├── LICENSE # 开源协议 ├── README.md # 项目脚手架说明 ├── package.json # npm packages 依赖包 ├── ucf-apps # 【目录名不可修改】微服务应用根目录，用于加载微服务 ├── ucf-common #...

# 原厂开发之tinper-bee和ucf-web ## 前言 钉耙是用友大前端团队打造的企业级大前端基础设施平台，为数字化企业实现多终端快速开发及产品极致体验提供一站式解决方案，其中tinper-bee是用友大前端团队打造的一款面向企业数字化的开源组件，ucf-web是统一能力框架是IUAP平台5.0核心框架，是一套实现企业服务的微服务化、平台化、中台化的最佳实践方案。两者是如何在实际应用中结合的呢，下面就为大家揭晓。 本文主要对 IUAP 应用平台开发中构建前端工程中的实践做简单说明，基于 ucf-web 微服务框架构建前端工程，会描述一般场景的**前端项目结构**、**脚手架搭建配置**、**依赖包的管理方式**、和**公共组件的维护办法**。 ## 第一章 构建前端工程 ### 1.1 脚手架 现行的项目脚手架我们推荐使用 ucf-web 微前端框架，详细内容请查看使用手册 之 [快速上手](https://www.yuque.com/ucf-web/book/use) 目录下内容。 通常情况下 `ucf-cli` 会自动生成配置文件，详细的 API 在次不做累赘，不过我们需要更具实际情况做一些调整，同时有一些比较实用的插件。 - babel-plugin-import-bee：如果使用了 `tinper-bee` ...

# JS 开发模式之函数式编程 ## 前言 开发模式是高效程序开发的很重要的一环，针对于开发模式有很多，时下的主流开发模式是面向对象开发（OOP），JS 开发在 ES6+ 或者 TS 的加持下，也能有较为作风优雅的面向对象开发模式，但大多前端开发人员没有强类型语言基础，或者是直接从事的前端开发，所以并没有开发模式这个概念。本文主要介绍一种简单直接的开发模式--函数式编程。 ## 什么是函数式编程 回归课本上的概念函数（或方法），就是一个代码块，传入变量返回结果，函数式编程就是这个意思（好像有点白痴）。直接一点就是写函数时参数使用传值方式，***不要用传引用***，内部操作变量，不要操作引用。这里我更喜欢纯函数这个概念，即没有副作用的函数，。 如下是非函数式编程： ```js let data = []; const addElement = (name) => { data.push(name); } ``` 上述过程描述的就是一段很常见的编程实例，我们通常会设置一个持久变量，通过其他方法操作这个变量，但这种写法会导致...

## 场景 自建的开发环境，今天清了一下包后遇到了一个错误，如下  主要提示： ```sh Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible...