- 博客(220)
- 收藏
- 关注
RSS订阅
转载 李开复针对马加爵事件写给中国学生的一封信
李开复针对马加爵事件写给中国学生的一封信(2004.06.03)成功 自信 快乐 ――给中国青年学生的一封信微软全球副总裁 微软亚洲研究院首任院长 李开复 此前，我和中国学生的多次交流都是围绕如何达到优秀和卓越，如何成为领导人才而展开的。最近，在新浪网的聊天室和我收到的许多电子邮件中，我发现更多的中国学生需要知道的不是如何从优秀到卓越，而是如何从迷茫到积极、...
2020-01-20 11:07:31
542
原创 重构-改善既有代码的设计
重构的原因：需求通常不来则已 一来便会接踵而至 规则的变化以及需求的变化使重构变得必要重构的第一步：重构前先检查自己是否有一套可靠的测试集 这些测试必须有自我检验能力
2021-07-07 23:44:01
294
原创 4.React全家桶及原理解析
课堂目标掌握redux 掌握redux中间件 实现redux、react-redux及其中间件原理资源redux react-redux起步什么是Reducerreducer：就是⼀个纯函数，接收旧的 state 和 action，返回新的 state。
2021-06-16 22:52:53
344
1
原创 3.React组件化2
课堂目标掌握第三⽅组件正确使⽤⽅式 能设计并实现⾃⼰的组件 了解常⻅组件优化技术知识要点使⽤antd 设计并实现表单控件 实现弹窗类组件 实现树组件 使⽤PureComponent、memo资源umi ant design快速开始Create React App 中文文档npx create-react-app my-appcd my-appnpm start使⽤第三⽅组件不必eject，直接安装： npm install antd --save
2021-06-16 22:47:14
400
原创 2.React组件化
课堂目标掌握组件化开发中多种实现技术 了解组件化概念，能设计并实现⾃⼰需要的组件 掌握使⽤跨层级通信-Context（新API在v>=16.3） 组件复合 - Composition ⾼阶组件 - HOC Hooks（>=16.8） 掌握第三⽅组件的使⽤知识要点运⽤Context 运⽤组件复合 - Composition 运⽤⾼阶组件 - HOC Hooks使⽤ 使⽤umi antD资源Context参考 HOC参考 Hooks参考 antD参考ant...
2021-06-16 22:08:34
327
原创 1.React核心入门
课堂目标create-react-app使用[创建react的应用] 掌握组件使用 掌握JSX语法 掌握setState 理解事件处理 组件生命周期 掌握组件通信各种方式资源react create-react-app：https://facebook.github.io/create-react-app.dev/docs/getting-started前期准备给vscode安装：Auto Import插件安装官方脚手架全局安装npm install -g create-re
2021-06-16 21:56:14
532
5
原创 react 引入外部js文件
react 引入外部js文件var script = document.createElement('script');script.type = 'text/javascript';script.async = true;script.src = 'https://sdk.canva.cn/v2/beta/api.js';document.head.appendChild(script);
2021-04-07 16:43:45
3729
1
原创 vscode格式化校验配置
ESLint is disabled since its execution has not been approved or denied yet：ESLint被禁用，因为它的执行尚未被批准或拒绝。使用“灯泡”菜单打开“批准”对话框。VSCode代码格式化快捷键及保存时自动格式化vs code 代码格式化整理vsCode格式化插件...
2021-04-06 14:48:16
709
原创 vue安装npm时遇到 npm ERR! syscall rename npm ERR!错误解决办法
vue项目，安装npm时遇到了错误解决方案执行命令 ：npm uninstall再重新执行：npm install即可
2021-03-30 10:47:46
6453
1
原创 nrm的安装与配置及问题修复
nrmnrm(npm registry manager )是npm的镜像源管理工具，有时候国外资源太慢，使用这个就可以快速地在npm源间切换安装nrm在命令行执行命令，npm install -g nrm，全局安装nrm。使用执行命令nrm ls查看可选的源。报错1：nrm : 无法加载文件 C:\Users\TANG\AppData\Roaming\npm\nrm.ps1，因为在此系统上禁止运行脚本win+s 搜索powershell 以管理身份运行使用set-Exe..
2021-03-30 10:28:53
1113
2
原创 vue post application/x-www-form-urlencoded传参的解决方案
在使用axios进行参数获取时，始终获取不到，但是调用postman是正常的，所以初步估计是参数格式不正确，那么正确的应该怎么写呢？一般按照正常的逻辑，我们在传递application/x-www-form-urlencoded时，参数应该这样写，但实际操作中发现一只获取不到参数。axios .create({ baseURL: 'url', timeout: 10000, headers: { 'Content-Type': 'application/json' },
2021-03-23 10:42:58
17614
原创 创建一个新的react项⽬时报错
执行命令 创建一个新的react项⽬时报错create-react-app lessonnpm ERR! Response timeout while trying to fetch http://registry.npmjs.org/@typescript-eslint%2feslint-plugin (over 30000ms)处理方案：运行Clean npm cache清除npm缓存Clean npm cache再重新执行npm install -g create-.
2021-03-23 00:59:22
521
转载 移动端H5界面 前端html app 自动清除引入的css js缓存方法
笔者近期在开发移动端h5界面,发现每次改完样式 js都需要强制清除下手机浏览器的缓存,才显示效果,但是通过微信浏览器进行查看时没找到清除缓存的按钮,于是乎,自己上网上找了写方法,又在学习群里交流了下,总结出以下方法1.添加版本号或者标识号在引用的css 跟js 后面,添加一个版本号,至于怎么使用规则,可以跟组内小伙伴约定好,这样子升级到正式环境的时候,就不用用户自己清理缓存了.（原理：增加了一个参数，且该参数是一个随机数，每次都不一样，所以每次的请求参数都不一样，服务器会将其作为一个新的请求，重新返
2021-03-16 16:07:11
1364
原创 移动端兼容安卓456实现0.5像素边框
项目中会遇到UI指定边框用0.5像素的，但实际单纯的border:0.5px solid #ddd;在很多移动端设备上会出现显示异常甚至直接消失，这是不同设备对像素处理的问题。像是很多android识别不了0.5像素就会直接不显示。这里提供一种我用的有效的解决方案：取消按钮的边框，并设置按钮定位 position: relative; 为按钮添加 before伪元素，并设置 position: absolute; 利用before模拟边框，并且先设置足够能被设备识别的边款，然后进行缩放到想要的边
2021-03-12 17:54:46
250
原创 安卓上按钮文字偏上的问题
安卓4-6机型按钮文字偏上 无法垂直方向居中显示处理方案flex布局：外层div 里层p p里span 外层div flex 且flex-wrap:wrap 外层P设置高 不设置行高 里层span不设置高与行高<div class="portfolio_codetype"> <p class="portfolio_code"><span class="">3000751</span></p> <p c..
2021-03-12 11:02:09
413
原创 抓包工具使用&移动端调试
Charles —— 一款Web调试代理应用程序，适用于Windows / Mac OS / Linux下载地址： https://www.charlesproxy.com/download/下载完成后，根据系统需要勾选proxy菜单下的• macOS proxy• Windows proxyHTTPS抓包配置选择add，输入*:*，表示全部抓取证书安装（PC）在钥匙串中找到Charles，双击，选择始终信任(Windows用户...
2021-03-10 14:07:12
404
原创 vw 弹性布局解决方案
postcss-px-to-viewport将px单位转换为视口单位的(vw,vh,vmin,vmax)的PostCSS插件。简介如果你的样式需要做根据视口大小来调整宽度，这个插件可以将你CSS中的px单位转化为vw，vw本质上还是一种百分比单位，100vw即等于100%，1vw等于1/100视口宽度。安装$ npm install postcss-px-to-viewport --save-dev$ yarn add -D postcss-px-to-viewpo...
2021-03-10 13:57:16
493
原创 Vue3.0
teleportTeleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。<teleport to="#modals"> <div>A</div></teleport><teleport to="body"> <div>A</div></teleport>eg:当前modal组件一般挂载在父组件下，想让
2021-03-10 13:51:58
209
原创 lang=“scss“动态拼接变量 设置背景图
HTML<div :class="['header', `header${num}`]"></div>data() { return { num: this.$route.query.num % 3 || 1, }},CSS<style lang="scss" scoped>$imgName: 1, 2, 3;%bgr { background-repeat: no-repeat; background-size: 10..
2021-03-03 16:05:05
5357
1
原创 VUE实现吸底
<template> <div id="test"> <ul class="list-box"> <li v-for="(item, key) in 50" :key="key"> {{ item }} </li> </ul> <p :class="['go', { isFixed: headerFixed }]"> 吸底按钮 <.
2021-03-01 14:10:06
1605
3
原创 van-swipe初始高度异常留白BUG处理
v-lazy 会导致van-swipe初始高度异常<van-swipe :autoplay="3000"> <van-swipe-item v-for="(image, index) in images" :key="index"> <img v-lazy="image" /> </van-swipe-item></van-swipe>van-swipe初始高度异常BUG处理 方案一：不使用懒加载模式 具体应用如下：.
2021-02-23 17:06:50
1765
原创 vue mint-ui中swipe高度自适应
动态设置图片高度<div class="aaa"> <mt-swipe :auto="4000" :style="{'height': imgSize + 'px'}"> <mt-swipe-item><img src="../imgs/banner3_img.png" ref="imgSize"></mt-swipe-item> <mt-swipe-item><img src="../imgs/ba.
2021-02-02 16:47:42
514
原创 VUE手写实现移动端el-table组件
最近用vue+vant进行开发，因为涉及到了表格，但vant里没有这个组件，自己就简单的封装了一下 未添加自定义CSS效果图：使用组件：src/components/layout/table/index.vue<template> <div> <f-table :data="tableData"> <f-table-col prop="name" label="姓名"></f-table-col>
2021-02-02 10:38:29
4628
2
原创 JavaScript：switch-case语句中不区分大小写匹配
JavaScript中switch case语句大小写都可匹配：.toLowerCase()toIntro(param) { switch (param.method.toLowerCase()) { case 'h5': this.$router.push({ path: param.url, }) break case 'outside': window.location.href = param.url
2021-01-22 14:09:54
1432
转载 VUE防止路由重复点击报错
在router/index.js中添加如下代码import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)//防止路由重复点击报错const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch.
2021-01-22 10:52:27
838
原创 CSS:父元素使用了Flex布局 导致子元素高度未撑开
在使用van-swipe时发现swipe的高度不能被图片撑开，排查发现给swipe父元素设置了#test { height: 100%; display: flex; flex-direction: column;}解决方法：给子元素swipe增加属性flex-shrink:0，确保父元素不够大时子元素也不会被压缩。#test { height: 100%; display: flex; flex-direction: column; .banner-box
2021-01-21 17:32:22
5887
原创 ajax请求超时判断并处理
超时结果：JQ中 timeout设置请求超时时间。如果服务器响应时间超过了 设置的时间，则进入 ERROR （错误处理）超时解决方案：1.默认的timeout为0，代表永不超时2.尽量把timeout设置的大一点。坏处：使数据的加载变慢（貌似。呵呵）。3.在ERROR回调函数中写 有关于 超时 处理 的函数:例如，可以在超时的情况下再次调用取数据函数。ajax请求自定义超时时间，并处理相应的超时事件对jQuery 来说，超时可以直接设置timeout参数，并在error事件中捕获
2021-01-19 11:25:39
6226
2
转载 vue中父组件传值给子组件，父组件值改变，子组件不能重新渲染
在子组件中用watch()监听值的改变，不同的类型的要用不同的监听方法props: { echartStyle: { type: Object, default() { return {} }}, titleText: { type: String, default: '' }, tooltipFormatter: { type: String, default: '' },
2021-01-18 10:32:44
2695
1
原创 vue组件实现全屏倍速视频播放功能
组件设计：src/components/video/index.vue<template> <div class="video"> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" > </video-play
2021-01-05 16:22:27
2013
3
原创 VUE报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent及解决方案
VUE报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "topActive"大概意思是：避免直接改变属性，因为每当父组件重新渲染
2021-01-05 15:42:41
156066
17
原创 Mac环境配置Tomcat
官网下载Tomcat配置包：下载地址下载之后，将解压后的的整个文件夹重新命名：ApacheTomcat（这个名字随便起），然后放在一个文件目录下，我把它放在了:/Users/电脑用户名/Library下；打开终端进入ApacheTomcat文件里的bin文件夹目录；然后启动Tomcat，终端输入：./startup.sh如果出现提示：-bash: ./startup.sh: Permission denied，则启动失败，需要授权，终端输入：chmod u+x *.sh.
2021-01-05 09:38:35
211
2
原创 JavaScript技术总结10：等待所有 promise 完成
这个算不上是代码解决方案，更多是对 Promise API 的强化。这个 API 在不断进化，以前还为“allSettled”“race”和“any”做了代码实现，现在直接用 API 的就好了。
2021-01-04 16:34:36
1145
1
原创 JavaScript技术总结9：轮询数据
如果需要持续检查数据更新，但系统中没有 WebSocket，则可以使用这个工具来执行操作。它非常适合上传文件时，想要持续检查文件是否已完成处理的情况，或者使用第三方 API（例如 dropbox 或 uber）并且想要持续检查过程是否完成或骑手是否到达目的地的情况。async function poll(fn, validate, interval = 2500) { const resolver = async (resolve, reject) => { try { // cat
2021-01-04 16:33:45
637
1
原创 JavaScript技术总结8：顺序执行 promise
如果有一堆异步或普通函数都返回 promise，要求一个接一个地执行，这个工具就会很有用。它会获取函数或 promise 列表，并使用数组 reduce 方法按顺序解析它们。const asyncSequentializer = (() => { const toPromise = (x) => { if(x instanceof Promise) { // if promise just return it return x; } if(type
2021-01-04 16:32:55
392
1
原创 JavaScript技术总结7：格式化 JSON 字符串，stringify 任何内容
在使用 NodeJs 将对象记录到控制台时经常使用这种方法。JSON.stringify 方法需要第三个参数，该参数必须有多个空格以缩进行。第二个参数可以为 null，但你可以用它来处理 function、Set、Map、Symbol 之类 JSON.stringify 方法无法处理或完全忽略的内容。const stringify = (() => { const replacer = (key, val) => { if(typeof val === 'symbol')
2021-01-04 16:32:05
155
1
原创 JavaScript技术总结6：创建一个范围内的数字
Python的一个功能是 range 函数，而在 JavaScript 里经常需要自己写这个功能。下面是一个简单的实现，非常适合 for…of 循环以及需要特定范围内数字的情况。function range(maxOrStart, end = null, step = null) { if(!end) { return Array.from({length: maxOrStart}, (_, i) => i) } if(end <= maxOrStart) {
2021-01-04 16:30:37
169
原创 JavaScript技术总结5：随机 ID 生成器
有时你只是需要一些 ID？除非你要的是更复杂的 ID 生成器（例如 UUID），否则用不着为此安装什么新库，下面这个选项足够了。你可以从当前时间（以毫秒为单位）或特定的整数和增量开始生成，也可以从字母生成 ID。// create unique id starting from current time in milliseconds// incrementing it by 1 everytime requestedconst uniqueId = (() => { const id
2021-01-04 16:29:28
2135
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人