Chad97的博客

Monorepo: 是指单一代码库那既然有 单一代码库与之对应的就是即：MultiReposMicroService： 微服务架构Monorepo LinkMonorepo 不是一个新的东西，在软件开发行业它已经存在很久了，许多开源项目已经成功使用了单一代码库 👇🏻Larave：一个用于Web开发的PHP框架。Babel：一个用户Web开发的流行的JavaScript编译器，其单一代码库包含了完整的项目及其所有插件。React、Ember、Meteor 等前端框架都使用单一代码库。可见性（Visibi..

新版 Chrome浏览器在 http协议下无法获取到摄像头、麦克风权限

记-react-connect中使用forwardRef 问题。最近在dvajs中使用onRef的过程中，需要给 绑定connect 的组件 透传 forwardRef类似这样的形式：import React, { forwardRef, useImperativeHandle, useState, useEffect } from 'react';import { connect } from 'dva'const C2 = forwardRef((props, ref) => {

缘起在每次 master bulid 后都要去阿里云 后台手动刷新｜预热，此文章旨在优化发包繁琐步骤流程实现1. pip install aliyun-python-sdk-cdnps：这个SDK 和 下面的 代码 是基于 python2 推荐2.7.16Mac 的话 默认版本就是 python2Refresh.py 实现阿里云官方文档#!/usr/bin/env python# coding=utf-8# __author__ = 'hanli.zyb''''Che

缘起vue-cli3 以来 是不会 暴露 webpack.config.js 的 需要我们手动来配置因为近期 接手的一个项目 我需要从 package.josn 拿参数 然后 在其他 js文件拿到配置大致步骤如下：项目根目录 创建文件 vue.config.js添加配置 =》 配置全局变量其他js 拿到全局变量配置大致和 webpack 差不多for example...

缘起在这个 find a job 地狱难度的时间，整理一份 React 核心指南，共勉之目录结构文章目录缘起目录结构壹、Contextfor example贰、Refs & DOMfor example叁、Refs转发 forwardRef肆、 Fragments伍、高阶组件（HOC）for example注意事项除了导出组件，另一个可行的方案是再额外导出这个静态方法。陆、Por...

缘起最近用Gatsby 写了一个个人blog，link => http://new.ruoduan.cn/Github ???????????? Star发现 build 后体积太大，FTP 发文件 都要10几分钟，挑选来下自动化部署工具????，本打算用jenkins 感觉有点重，而且学习成本较高。看了一下觉得 使用 github的webHooks 是最合适的Graph大致流程是这样的：????...

获取集合中的所有待办事项清单：因为有默认 limit 100 条的限制，因此很可能一个请求无法取出所有数据，需要分批次取：步骤定义最大条数也就是 下面????示????中的 MAX_LIMIT获取数据总条数 countResult.total总条数 / MAX_LIMIT 想上取整计算出 要取几次 batchTimes关键步骤：遍历batchTimes 利用skip() 向数据库取对应次...

在小程序开发过程中，我们通过 observers 监听处理 properties 组件数学列表的过程中，免不了对 当前数据进行处理在我们对监听的数据进行赋值时候，会造成死循环，其实这个问题在大多数框架中都有这个问题。小栗子????[错误示范] properties: { playlist: { type: Object } }, // 数据监听 ...

这个问题遇到很多次了 原因是 这里 toggleRowSelection(row, boolean) 这个方法，row是重绘数据让我们来看看 this.$nextTick()这个方法的 官方文档在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。解决方案在要改变的数据外层套上这个方法小栗子 // 回调 nextTic...

在webpack中配置.vue组件页面的解析运行cnpm i vue -S将vue安装为运行依赖；运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；运行cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；new VueLoaderP...

起步用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。详见 vue-router官方文档导入模块导入路由模块之前要保证 vue ...

移动端页面为了更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？使用 overflow:hidden 隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。由于只需要兼容移动浏览器（Chrome 和 Safari），于是想到了自定义滚动条的伪对象选择器::-webkit-scrollbar。关于这个选择器的介绍可以参考：Styling ScrollbarsCustom S...

多说无益 ，直接上配置vim nginx.conf参数gzip配置的常用参数gzip on|off; #是否开启gzipgzip_buffers 32 4K| 16 8K #缓冲(压缩在内存中缓冲几块? 每块多大?)gzip_comp_level [1-9] #推荐6 压缩级别(级别越高,压的越小,越浪费CPU计算资源)gzip_disable #正则匹配UA 什么样的Uri不...

error An unexpected error occurred: "EPERM: operation not permitted, unlink ‘xxxx’清除下缓存命令行输入 npm cache clean --force

>CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种，算做是一个备忘录吧。1 水平居中1.1 内联元素水平居中利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inl...

1. 生成签名秘钥keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000输入一些必要信息namepassword…1.1直接使用 Android studio 进行签名傻瓜式 next 不做赘述2、设置g...

在使用华为云CentOS 7.4 64bit 云服务器时，由于我的开发环境，公网IP一直在跳变，导致每隔一段时间，IP就被加入到host.deny文件中，导致ssh访问被拒绝。这边采取了一个应急方案，利用host.allow文件允许所有IP通过：打开host allow文件：vim /etc/hosts.allow在文末加入：sshd:ALL:allow...

官方文档上一下子没找到，这里记录一下element 提供了change方法 只能拿到value值我们可以通过 ref绑定一个namethis.$refs['name'].currentLabels 拿到这个数组 里面就是我们需要的label值了...

手风琴banner，先上效果图一些闲话当然，我知道像这种类型的的效果，我们通过C3来实现— animation: move 1s infinite;是比较方便的而且业比较简单，能才做的效果业比较多，而我这里通过ECMAJavaScript来实现是比较繁杂和老套的，在实际开发过程中我们是尽可能选择方便简单且符合需求的方法来实现的；而我这里缩做的比较符合那做兼容性代码来使用...

babel是什么？官方解释Babel 是一个 JavaScript 编译器Babel 是一个工具链，主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码小栗子：class Person { static info = {name: 'zs', age: '18'}}let p1 = new Person...

续上一篇blog使用html-webpack-plugin插件配置启动页面由于使用–contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面.运行cnpm i html-webpack-plugin --save-dev安装到开发依赖修改web...

效果图我们所看到的效果——鼠标放在小图上面有一个放大镜的效果其实这都是假象，这个效果是用2个相同比例的图片做出来的细则请看下文：HTML代码<body><div class="box" id="box"> <div class="small"><!--小层--> <i

效果图本篇将使用JavaScript 编写一个贪吃蛇的小游戏，采用OOP（面向对象）编程基本没有CSS样式和HTML结构，主要是体会js操作HTML代码<div class="map"></div><input type="button" id="btn" value="游戏开始" style="width: 80px

ASCII码表HTML转义符特殊字符转义符号 转义字符表 JS转义符 webstorm快捷键Ctrl+/ 或 Ctrl+Shift+/ 注释（// 或者/…/ ） Shift+F6 重构-重命名 Ctrl+X 删除行 Ctrl+D 复制行 Ctrl+G ...

旋转木马图片效果图，轮播图老规矩先上一张示例图： HTML代码：<div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#">

判断节点类型节点属性：（可以使用标签–元素.出来，可以使用属性节点.出来，文本节点.出来）可通过以下属性判断节点，元素的类型nodeType 节点类型： 1–标签 2–属性 3—文本nodeName 节点名字： 标签节点–大写的标签名字， 属性节点—小写的属性名字， 文本节点 —#textnodeValue 节点值：标签节点—null， 属性节点—属性值， 文本节点—文...

addEventListener，attachEvent，元素绑定多事件兼容有些时候我们需要对一个元素绑定多个事件或者一个元素多次事件绑定，通常会用addEventListener书写格式：对象.addEventListener（”事件类型”,”事件处理函数”,”false”）举个栗子 document.getElementById("dv").addEventListener...

banner轮播图（ECMAJavaScript写）**- 先上一张图片效果 - 纯JavaScript 写** 图片随着下标和左右的小方块移动HTML代码ol下面的li小标是通过js插入的HTML里面没有写入<div class="all" id='box'> <div class="screen"><!--相框-->...

JavaScript 节点兼容性代码我们在获取节点时或许会遇到这样的代码<ul id="uu"> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> &amp

原型附一点题外话：面向对象编程思想:根据需求,分析对象,找到对象有什么特征和行为,通过代码的方式来实现需求,要想实现这个需求,就要创建对象,要想创建对象,就应该显示有构造函数,然后通过构造函数来创建对象.,通过对象调用属性和方法来实现相应的功能及需求,即可首先JS不是一门面向对象的语言,JS是一门基于对象的语言,那么为什么学习js还要学习面向对象,因为面向对象的思想适合于人的想法,编程...

mouseenter 与mouseover 区别mouseenter与mouseover有什么不同，也许可以从两方面去讲。看他们是是否支持冒泡或者是否为事件的触发时机；   只有当鼠标指针在对象的边界之外，用户把鼠标移动到对象的边界内时，事件mouseenter才触发。如果鼠标当时正在边界内，用户想要触发该事件，需要把鼠标移动到对象边界外再移动到边界内。 因此，mouseenter不支持事件冒...

前端开发Sublime 3插件Sublime的大名已经无需我介绍了，首先先介绍如何启用插件安装功能：打开Sublime 3，然后按 ctrl+` 或者在View → Show Console在打开的窗口里黏贴这个网站上的代码（注意: Sublime 2和3所黏贴的代码不一样，注意选择）：在打开的窗口里黏贴这个网站上的代码（注意: Sublime 2和3所黏贴的代码不一样，注意选择）：ht...

什么是webpack?webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；webpack解决什么问题？合并、压缩、精灵图、图片的Base64编码可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系；…使用Webpack， 是基于整个项目进行构建的；借助于webpack这个前端自动化构建工具，...

canvas 穿透效果，canvas做网页背景无法选取后面的元素问题遇到这个问题这里记录一下，解决方案也非常简单在我们把 canvas 作为 网站的 body 背景的 时候，如果z-index 的层级没注意设计，默认情况下，canvas 会遮挡网站上的 a 链接 和一些按钮的遇到这个 问题 我们只需要在 canvas 背景中添加一个css 属性：pointer-events: none...

素材img代码 var Person = function (ctx) { /*绘制工具*/ this.ctx = ctx || document.querySelector('canvas').getContext('2d'); /*图片路径*/ this.src = 'image/04.png'; /*画布的...

话不多说直接上代码<canvas width="600" height="400"></canvas><script> var PieChart = function (ctx) { /*绘制工具*/ this.ctx = ctx || document.querySelector('canvas').getConte...

特性设置、读取方便容量较大，sessionStorage约5M、localStorage约20M只能存储字符串，可以将对象JSON.stringify() 编码后存储window.sessionStorage生命周期为关闭浏览器窗口在同一个窗口(页面)下数据可以共享window.localStorage永久生效，除非手动删除（服务器方式访问然后清除缓存）可以多窗口...

H5 api1. querySelector() 获取符合选择器的第一个元素2. querySelectorAll() 获取符合选择器的所有元素类选择器1. jquery操作类的方法：addClass() removeClass() toggleClass() hasClass()2. h5也有类似的api 基于一个对象classList的方法 add() remove...

效果页面结构<div class="box"> <ul class="imageBox"> <li> <span></span> <span></span> <