zhichaosong的博客

线上无小事，出现线上事故轻则影响用户体验，重则造成资损，这都是我们不愿意看到的现象。但又有一个著名的墨菲定律：可能出错的事，就一定会出错。那么我们应该如何减少错误、降低影响呢？

在多人开发时经常冲突，该如何解决才能保证线上质量？如何定义才能符合我们的预期？本文通过实验来探究包版本管理最佳实践。

schema 以国际标准的 JSON schema为基础，同时能够方便使用任何 antd 的 props通过bind字段，允许数据的双向绑定使用{{...}}书写表达式来完成简单的联动

维护常量枚举值是一个常见的场景，手工维护的成本高而且团队风格不统一，如何处理更好呢？使用常量的 4 个场景​：① 代码常量，避免魔法数字​；② 常量转中文，一般在列表展示等场景使用​；③ 下拉选项，例如 select 的 option​；④ TS 声明​；.........

在 Form 中使用子组件的过程中发现，每次 resetFields 都会导致子组件销毁重建，而子组件由于要请求接口加载数据，所以会导致重复请求。本文记录相关 Issues 的查找过程和和相关源码分析一、现象说明如下代码所示，每次子组件 FormChild 都会打 2 次 log，分析发现是 form.resetFields() 导致子组件重新加载了，而 form.setFieldsValue() 则不会导致组件重新加载import React from "react";import React.

解析 URL 参数是一个常用的场景，一般有 2 种处理方式：① 正则获取；② split 自行处理；本文写了 2 个常用的场景示例：① 获取所有参数；② 获取单个参数；一. 获取所有参数的 <key, value> 对象1. 正则方式/*** 获取当前 URL 所有 GET 查询参数* 入参：要解析的 URL，不传则默认为当前 URL* 返回：一个<key, value>参数对象*/function getUrlQueryParams(url = locatio.

本文不借助其他库，可以兼容各大浏览器实现文字复制，原理就是利用浏览器机制，在复制的时候创建一个 textarea，复制完再销毁掉，document.execCommand("Copy") 命令只有在输入区域才能生效，而且不能隐藏，因此灵活性欠缺

背景：Chrome浏览器自带谷歌翻译，这个翻译还是挺实用的，但如果前端代码设置不当，再加上用户操作失误就容易造成很多莫名其妙问题，下面详述问题现象、排查过程及解决方案文章目录一、问题现象二、排查过程1. Table 主键2. 观察现象三、解决方案1. 方案一：手动禁用翻译2. 方案二：代码禁用翻译3. 方案三：代码设置语言一、问题现象有台客服电脑查数据怎么都查不对，地址、价格都对不上，但是别的电脑没问题、后端返回数据没问题，这个数据也不是随机的，每次查出来很固定，但是不对二、排查过程1. .

ESLint 作为一种代码规范，可以帮我们检查代码的格式和风格，大家能保持一种统一的风格有助于团队协作。ESLint 中文官网1. 驼峰校验提示因为后台接口使用下划线的方式，所以前端代码中也对应起来，但是这样驼峰校验就通过不了，场面一度十分尴尬前端代码：2. 临时解决方案：段落忽略校验根据控制台编译错误提示，查询官网说明 http://eslint.cn/docs/rules/camelcaseFailed to compile../src/pages/goodspackage/tag.

研究即时通信的过程中需要调用摄像头，发现报错，原来是谷歌弃用了这个方法，根据官方提示修改即可1. 报错信息Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided. a...

BootStrap的栅格系统对于响应式的网页开发非常方便，在使用栅格系统的时候可以非常方便的时候row和col-*-来控制布局。但是col--*默认会带15像素的左右padding，这个会比较困扰。解决方案可以在内部标签的class上添加row，这样会去掉表格的默认padding。示例如下：<div class="col-lg-12"> <div class="row"&gt...

//防止页面后退history.pushState(null, null, document.URL);window.addEventListener('popstate', function () { history.pushState(null, null, document.URL);});

前端控制打印有些细节需要注意：分页、隐藏打印按钮、页面边距、页面方向等，本文一一道来文章目录一、JS 调用示例1. 打印整个页面2. jQuery 打印局部二、Bootstrap 打印类三、CSS 打印属性1. page-break-before2. page-break-after3. page-break-inside4. orphans5. widows6. 控制边距四、参考手册一、...

现象JS 中运行 new Date('2019-10-01 10:00:00')， Android 和 微信开发工具都可以正常使用，但是 iOS 真机上报无效参数原因iOS 格式化的日期使用了不同于其他设备的格式，即2019/10/01 12:30:00解决措施将字符串中的横线 -替换为 /即可new Date(Date.parse('2019-10-01 10:00:00'.re...

location / { index index.html; try_files $uri $uri/ /index.html;}

在路径为 platforms/android/res/values/ 下新建styles.xml，编辑如下：<resources> <style name="Theme.AppStartLoadTranslucent" parent="android:Theme"> <item name="android:windowBackground...

所谓正向代理就是本地代理，反向代理就是服务端代理，只配置一种即可，具体配置方法如下：文章目录一、正向代理二、反向代理一、正向代理本地修改 ionic 项目就能实现跨域访问了修改 config.xml 文件server address替换成自己的服务器地址，粗暴一点可以直接写 *<content src="server address" /><access o...

由于 Angular 是自己管理路由，所以如果使用 Nginx 默认配置，就会出现 404问题，通过配置 Nginx 转发规则就可以解决此问题，实现两者共生1.下载 Nginx根据自己的版本下载Nginx，关于Nginx配置，请看https://www.cnblogs.com/MBirds/p/6605366.html2. 将 Angular 项目打包并将生成的dist文件夹发布到服...

打包应用的时候，无论 Android 还是 iOS，都要为不同设备分辨率准备不同尺寸的图标和启动页图片，非常费时费力，现在有一键生成工具那岂不快哉安装：npm i -g cordova-res使用：ionic cordova resources ios --force参考https://www.cnblogs.com/a418120186/p/5856371.html...

github.io 可以帮我们免费托管和展示静态资源网站，非常方便，github 上分享的例子可以在这里搭建演示方便查看，自己以往的项目也可以放在这里展示，还可以自定义域名文章目录1. 新建一个 repository2. 上传演示代码3. 开启 GitHub Pages3. 查看网页4. 编辑主页4. 我的主页1. 新建一个 repository勾选 Initialize this re...

官方给的例子有点复杂，项目中一般就引一个 JS 文件然后调用好了，简单粗暴，网上很少有想要的效果，而且都没有源码，这里分享一个文章目录一、源码地址二、实现效果1. 电脑端2. 手机端三、源码一、源码地址官方地址：https://github.com/VincentGarreau/particles.jsdemo地址：https://github.com/zhichaosong/par...

Bootstrap 的 Navbar 在手机端时会自动折叠，但是点击下层菜单后没有自动收起，我们用最简单的方式就是模拟再点击一次，这样做的好处就是可以有折叠动画，其他方式手动控制 CSS 样式则没有渐变效果了var a = document.querySelector(".navbar-toggle"); $(".navbar-nav li a").on("click",functi...

大部分场景下使用这个就够了，原生 JS 适应性好，判断准确if(navigator.userAgent.match(/mobile/i)) { top.location='http://m.baidu.com/'; isMobile = true;}

一、修改 Angular 标记var app = angular.module('myApp', []);app.config(['$interpolateProvider', function($interpolateProvider) { $interpolateProvider.startSymbol('{['); $interpolateProvider.endSymbol(...

通过 file://调试,需要在浏览器启动时添加 --allow-file-access-from-files标记，否则就会报错：

背景：项目采用 Ionic3 开发，打包成 Web 项目作为移动端、小程序访问，发现奇慢无比，可能需要 10s+ 才能打开网页，这个速度是不能忍的，分析了一下网络请求发现，时间主要耽误在 vendor.js 上，竟然有 4MB 多，所以必须要压缩了文章目录一、问题分析二、查阅官网三、实验验证1. 命令行用法2. 访问测试四、其他优化1. Nginx 开启 gzip 压缩2. Apache 开...

1. 70ans.inra.fr链接：http://70ans.inra.fr/en/为了纪念法国国家农业科学研究院 (简称 INRA ) 在食品，农业和环境领域70年的研究界面是一个双螺旋的 DNA 结构，横坐标就是时间轴，上面每段 DNA 上是标志性事件，可以鼠标滚轮放大缩小放大后的界面底部出现时间轴点击某个事件进入详细介绍左右翻页动画也很酷炫...

Angular1 中语法都是 ng- 开头的比较好记忆，2以上就变的奇奇怪怪没这么规则了，很令人费解一、ng1和ng2之间一些差异Angular2 不是从 Angular1 升级过来的，Angular2 是重写的，所以他们之间的差别比较大，不是你用过1就能直接上手2的，计划可以认为是一个新的框架；Angular2 使用了 Javascript 的超集 ‘Typescript’，所以 A...

ionic 的 tabs 组件默认图标更换方式可以通过自定义图标样式来替换。自定义图标可以是图标字体库，也可以是png图标等。文章目录一、编写样式二、资源文件三、更换前和更换后对比一、编写样式在 tabs.scss 文件（组件作用域），或者全局app.scss覆盖都行。下边是菜单覆盖代码：page-tabs { .tabbar > .tab-button { min-...

1. checkbox 类型的 input 中本身有 onchange 事件，但是 onchange 事件里放 angular 的方法是不识别的，这就要用到一个方法：angular.element(this).scope()，这样就可以随时随地调起 angular 方法啦，就是这么酸爽！2. 示例代码也包含了 file 类型的 input 选中文件后响应事件

npm 源在国内网络有时不稳定，因此使用 cnpm 更为稳妥，官方地址：http://npm.taobao.org文章目录一、配置镜像1. by config command2. 命令行指定3.编辑 ~/.npmrc 加入下面内容二、设置代理1. 设置代理2. 如果需要认证的话可以这样设置：3. 如果代理不支持https的话需要修改npm存放package的网站地址。4. 删除代理三、使用n...

postman中form-data、x-www-form-urlencoded、raw、binary的区别在日常开发中，通常会因为提交数据的方式不同而导致各种各样的问题，归根结底是因为未能正确认识到POST方式上传数据的几种方式的区别。所以很有必要研究一下这几种提交方式的区别。form-data方式：表示http请求中的multipart/form-data方式，会将表单的数据处理为一条消息...

最近前端届多端框架频出，相信很多有代码多端运行需求的开发者都会产生一些疑惑：这些框架都有什么优缺点？到底应该用哪个？作为 Taro 开发团队一员，笔者想在本文尽量站在一个客观公正的角度去评价各个框架的选型和优劣。但宥于利益相关，本文的观点很可能是带有偏向性的，大家可以带着批判的眼光去看待，权当抛砖引玉。那么，当我们在讨论多端框架时，我们在谈论什么：多端笔者以为，现在流行的多端框架可...

文章目录一、冲突复现1. 新建项目2. 新增页面3. 故障复现二、原因分析1. 浏览器 Debug2. 对比两次页面3. 修改 tabs.html 测试三、源码解析四、解决措施摘要：运行 ionic1 的官方 tab 示例 Demo，新添加一个子页面一切正常，但是当把新页面的 URL 改成与任一 tab 名字相似却不显示页面了。反复尝试发现是 $ionicTab 源码的原因，详细解析如下。...

作者：张楠，Chameleon技术团队负责人，前百度资深工程师责编：可可 |来源：开源中国背景研发同学在端内既追求h5的灵活性，也要追求性能趋近于原生。 面对入口扩张，主端、独立端、微信小程序、支付宝小程序、百度小程序、Android厂商联盟快应用，单一功能在各平台都要重复实现，开发和维护成本成倍增加。迫切需要维护一套代码可以构建多入口的解决方案，历经近2...

There are lots of command lines which can be used with the Google Chrome browser. Some change behavior of features, others are for debugging or experimenting. This page lists the available switches in...

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I...