hzxOnlineOk的博客

原创 不使用cli 自主搭建vue简单应用 学会webpack的应用场景

搭建教程：https://juejin.im/post/5a531f4c6fb9a01cb80f926f问题1:webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题解决方...

转载 使用nginx部署前端项目（请注意，不是作为反向代理，只是作为服务启动）

网上有很多教程写的一大堆东西，新手可能会有点看不懂，现在我写这篇文章是为了更好的帮助新手，如何将自己的前端项目部署到自己的服务器上。首先我们必须要有一台自己的ubuntu服务器，如果没有可以去阿里云官网去购买一台，趁现在阿里云搞活动。（ps:我并没有打广告）然后我们准备我们的前端项目不管你是vue项目还是普通的jquery写的项目都是一样的，本文的前端项目是vue。通过git把他克隆到...

原创 正向代理与nginx反向代理和请求转发

贴几个反向代理的好文链接????https://juejin.im/post/5ce6b9c9f265da1b7b31637chttps://juejin.im/post/5bacbd395188255c8d0fd4b2https://www.cnblogs.com/zengjielin/p/9134623.html什么是nginx反向代理？反向代理简单理解就是，客户端client发送请求到与...

转载 React.Fragment 以及它的语法糖

React.Fragment官方文档：React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。Fragments 看起来像空的 JSX 标签：render() { return ( <> <ChildA /> <ChildB /> ...

原创 前端知识一览--转载自掘金

https://juejin.im/post/5d387f696fb9a07eeb13ea60https://juejin.im/post/5d23e750f265da1b855c7bbehttps://juejin.im/post/5d8989296fb9a06b1f147070#heading-59https://juejin.im/post/5cab0c45f265da25137...

转载 vue生命周期图详解

原创 Webpack 性能(performance)优化篇

Webpack给出了performance属性提示用户包的体积过大，以此进行性能优化performanceobject配置如何展示性能提示。例如，如果一个资源超过 250kb，webpack 会对此输出一个警告来通知你。下面一一进行介绍performance.hints支持 false | "error" | "warning" 3种值打开/关闭提示...

原创 package-lock.json的作用

一句话形容：就是锁定安装时的包的版本号，并且需要将它上传到git仓库，以保证其他人在npm install时大家的依赖能保证一致。根据官方文档，这个package-lock.json 是在 `npm install`时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。它有什么用呢？因为npm是一个用于管理package之间依赖关系的管理器，它...

原创 前端开发规范（文档、UI、测试） 异常处理、监控 前后端协作

https://juejin.im/post/5d3a7134f265da1b5d57f1ed

转载 每日优鲜供应链 前端团队微前端改造

一、需求以及成果我所在团队是做toB业务的，技术栈是Vue，团队目前有十多个典型的toB业务（菜单+内容布局），这些业务都是服务于一个大平台的，因为历史原因，每个业务都是独立的，都有一个html入口，所以当用户在这个大平台上使用这十多个业务的时候，每当切换系统时，页面都会刷新，体验很差；在开发层面，这十多个业务又有太多共同之处，每次修改成本都很高。最近有一个很重要的需求X，内容是这样的：从...

转载 很好用的 UI 调试技巧

在业务开发过程中，想必大家经常会需要查看一个元素的位置及大小并修改它的 CSS，因此就会频繁使用到 DevTools 中的选择元素功能。其实我们可以使用一个 CSS 技巧给所有元素加上 outline，这样就能迅速了解自己所需的元素位置信息，无须再选择元素查看了。我们只需要添加以下 CSS 就能为任何网站添加这样的效果body * { ...

转载 Redux框架之combineReducers() 用法讲解

combineReducers()随着应用变得复杂，需要对 reducer 函数 进行拆分，拆分后的每一块独立负责管理 state 的一部分。combineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 createStore。合并后的 redu...

转载 React Native JSI 和 JSC 是什么

JSI背景由于Flutter.js的存在，和原生UI或者原生模块交互的性能问题成为了RN的弱点，为了弥补逐渐失去的地位，RN制作出了JSI来应对JSI 是什么在RN中，JSI是JavaScript Interface的缩写，JSI是一个轻量级的通用的API框架，可以应用于任意的JavaScript virtual machine，让各种平台可以方便的使用不同的JavaScr...

原创 最新移动端适配方案---来自掘金作者

https://juejin.im/post/5cddf289f265da038f77696c

转载 在浏览器运行dist中的模块时webpack 是如何运行的（Runtime + Manifest）

manifest在使用 webpack 构建的典型应用程序或站点中，有三种主要的代码类型：你或你的团队编写的源码。 你的源码会依赖的任何第三方的 library 或 "vendor" 代码。 webpack 的 runtime 和manifest，管理所有模块的交互。本文将重点介绍这三个部分中的最后部分，runtime 和 manifest。Runtime如上所述，...

转载 html-webpack-plugin详解

引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用： 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口 有了这种...

原创 webpack 提供的开箱即用的插件列表

Plugins查看原文|编辑此页webpack 有着丰富的插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。AggressiveSplittingPlugin// 将原来的 chunk 分成更小的 chunkBabelMinifyWebpackPlugin// 使用babel...

原创 【移动端适配】用vw、vh＋媒体查询打造最完美的移动端适配方案

一个插件 经过配置 自动将px转为vw、vh 这样就可以在移动端h5使用px了！ 需要注意的是排除第三方组件库的class前缀，如antd（配置"selectorBlackList": ["antd"]）https://juejin.im/post/5cf0d8fb6fb9a07ee9585681...

转载 js格式化 Thu Mar 07 2019 12:00:00 GMT+0800 (中国标准时间) 及相互转化

博主亲测有效：（1） Thu Mar 07 2019 12:00:00 GMT+0800 (中国标准时间) 转换为 2019-03-07 12:00:00代码如下 const d = new Date(Thu Mar 07 2019 12:00:00 GMT+0800 (中国标准时间)) const resDate = d.getFullYear() ...

转载 JavaScript 时间与日期处理实战:你肯定被坑过

本部分的知识图谱请参考编程语言知识图谱-时间与日期。本文JavaScript 时间与日期处理实战:你肯定被坑过从属于笔者的Web 前端入门与最佳实践中JavaScript 入门与最佳实践系列文章。JavaScript DateTime标准时间GMT即「格林威治标准时间」(Greenwich Mean Time，简称G.M.T.)，指位于英国伦敦郊区的皇家格林威治天文台的标准时...

原创 react+antd 引入moment之后，DatePicker显示出现英文

解决方案：在js前加上以下3句。 import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn');最终结果：

转载 roadhog 介绍

官方网站：https://www.npmjs.com/package/roadhog一:roadhogroadhog 是一个 cli 工具，提供server、build和test三个命令，分别用于本地调试和构建，并且提供了特别易用的mock 功能。命令行体验和 create-react-app 一致，配置略有不同，比如默认开启css modules，然后还提供了JS...

转载 【译】什么是CSS Modules ？我们为什么需要他们

转载文，博主通读了一遍，在我的理解里，CSS Modules我们使用它的主要目的是消除css样式class重名冲突原文地址：https://css-tricks.com/css-modules-part-1-need/最近我对CSS Modules比较好奇。如果你曾经听说过他们，那么这篇博客正适合你。我们将去探索它的目的和主旨。如果你同样很好奇，敬请关注，在下一篇博文中我们将介绍如何使用CS...

转载 componentWillMount 和 componentDidMount的区别

一、 调用时期不同转自：https://www.cnblogs.com/xyn0909/p/8516074.html1、componentWillMount将要装载，在render之前调用；componentDidMount，（装载完成），在render之后调用2、componentWillMount每一个组件render之前立即调用；comp...

原创 js中几种深度拷贝的方法

var arr1=[1,2,3];es5:方法一var arr2 = arr1.concat(); // 纯数组类型方法二var arr2 = JSON.parse(JSON.stringify(arr1));// 此方法适用于Oject的深度拷贝，因为Array属于Oject类型，所以也适用于此处；// 需要注意的是：作为Oject的深度拷贝时，要复制的function会...

原创 React Redux面试题

React 中 keys 的作用是什么？Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。render () { return ( <ul> {this.state.todoItems.map(({item, key}) => { return <li key={key}>{item}&...

转载 2019JS必看面试题

-1.你用过webpack的哪些插件呢？(https://segmentfault.com/a/1190000015355816)https://github.com/Jay-tian/webpack-scaffold可以例举常用的，如下：（1）copy-webpack-plugin //在webpack中拷贝单个文件或多个文件或整个目录, 可用于大型类库的拷贝（2）purify...

原创 css 实现相邻DIV等高

如下图所示，我们需要展示一个详情信息表（非Table组件，非table标签），这个时候，由于背景色的原因，如果不等高，在多行数据的情况下，左边的灰色背景只有下图的一半高度左右，剩下的都是空白，那么如何用css实现等高呢？思路是：1.父组件 overflow: hidden 2.子组件 对应元素padding-bottom: 500px; margin-bottom: -500px;...

原创 实现验证码的思路

1. 后端生成随机数字验证码 并保存到变量里方便对比2. 后端保存一张半透明的背景图3. 后端利用工具包 将图片和验证码合成一张新图片，编码为base644. 前端在登录界面通过接口请求验证码，后端将合成的base64图片编码通过接口返回给前端5. 前端在登录接口增加验证码字段传递给后端6. 后端根据前端传过来的验证码字段对比保存在后端随机生成的验证码...

原创 js 中 同名属性应该在 ...展开对象属性之后 因为属性将由后覆盖之前的属性

在以下代码中，custShortName是this.state.custBasicInfo的一个属性，但是我们需要额外赋值时，必须在...扩展符之上，因为对象默认不添加或者修改已存在的属性：custBaseInfo: {custShortName: this.state.custShortName,...this.state.cust...

原创 registerServiceWorker

目前的Vue脚手架默认会携带一个registerServiceWorker的东西，这个东西是做什么的呢？首先说明，registerServiceWorker可以运用于主流框架，它只是为了简化缓存机制产生的js包，以下的例子是在Vue中使用这个文件可以视情况用或者不用，它是用来做离线缓存等任务的，实际上就是为Vue项目注册了一个service worker。这样的话，如果在线上，只要访...

转载 js es6 Map和Set(也可以用来测试浏览器是否支持es6)

JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。但是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。为了解决这个问题，最新的ES6规范引入了新的数据类型Map。要测试你的浏览器是否支持ES6规范，请执行以下代码，如果浏览器报ReferenceError错误...

转载 React Native之二维码扫描

我们知道在android原生开发中，我们经常要用到二维码扫描的功能，在微信、QQ、浏览器、名片全能王、淘宝、支付宝等等软件里面，都会用到，android里面我们最常用的就是zxing，而在RN里面也有类似的组件，感谢作者ideacreation/react-native-barcodescanner，刚好我的原项目里面有个二维码扫描付款的功能，现在我用RN来大致演示下如何扫描二维码，并把扫描后的结...

原创 react-redux 重温

redux以公共组件的形式使用，去管理公共的状态，例如请求loading动画状态的控制等Login.js 其余的文件与此文件类似/** * 一些约定: * * 1. redux相关的action/reducer都放到redux文件夹中, 每个组件一个文件, 文件名和组件名相同 * 2. 在这个文件中, 要先定义action creator, 再定义组件的initStat...

原创 onChange(value) value的值是元素 怎么取值

现有Antd Form表单项：<FormItem {...formItemLayout} label={"客户简称"} validateStatus={validCustShortNameStatus ? "error" : "success"} help={validCustShortNameStatus ? "请输入客户简称" : ""}>...

原创 React 使用Fetch+Antd 实现 携带token 下载附件

使用a标签下载：render: (text, record) => { return <a onClick={() => window.open('http://111.111.11.11:7000/cms_service/common/download?[%22259b92fd-e6d9-4c3e-92cb-7ab189d9fe33%22]', '_...