- 博客(59)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 解决火狐下输入框记住密码有黄色背景的问题
起初使用autoComplete="new-password"解决了在谷歌上设置成off没用的问题，发现这个设置在火狐上不起作用，要彻底不让记住密码在网上看了下解决方案大概是不使用密码框，自己模拟一个，实现起来比较麻烦，测试提的问题是记住密码后有颜色，所以问题转变成解决这个背景颜色，网上的设置filter: none!important;也没作用，估计是版本问题，最后实验出这个css可以设置这个背景颜色，但是也不能设置成透明。
2024-08-13 13:57:54
218
原创 在vue3+vite中使用svg-sprite-loader，antdv修改菜单icon
查看html，在body的后面生成了svg symbol元素，菜单使用的svg记得去色，不然没法继承菜单设置的color。在main的ts中引入index.ts，用app.use注册，引入virtual:svg-icons-register。svgIcon全局组件，index.ts。
2024-01-11 10:02:28
837
原创 实现一个基于vue的简易icon库
实现一个通过页面批量上传svg源文件，进行转换后发布到npm仓库，前端按需引用，可以作为团队内部的一个icon库使用，ui在界面上上传，各个项目可以更新使用。
2022-07-18 14:28:43
787
1
原创 动态设置css变量和实现less中的darken函数
功能：读取pageConfig.json中的配色，刷新页面后修改元素的配色实现思路：用webpack的copyPlugin插件将pageConfig.json输出到项目根目录，在html模板中加载一个js，这个js需要实现在body上设置css变量，例如--base-color: #ff0000，并且将这份json文件保存在localstorage中，然后在less中在引用变量的地方设置成var(--base-color)遇到的问题：1. 如果之前的样式中包含rgba，就无法直接使用十六进制的色
2022-05-22 23:12:37
2118
原创 Ngnix学习笔记
介绍Nginx是一款轻量级的HTTP服务器，采用事件驱动的异步非阻塞处理方式框架，让其具有极好的IO性能，时常用于服务端的反向代理和负载均衡优点 支持海量高并发，采用IO多路复用epoll，实际生产环境可支撑2-4w并发连接数 内存消耗少、成本低 配置文件简单、跨平台 主要功能 正向、反向代理 负载均衡、分流 虚拟主机（绑定host） nginx.conf文件结构# 全局块# 配置影响nginx全局的指令，比如：# 1.允许n
2021-11-16 16:33:22
162
原创 node开发物料市场总结
功能介绍：用户通过登陆注册，可在物料市场上传elementUI组件，其他用户可预览效果和代码，达到共享组件的目的。技术栈框架：koa2数据库：MongoDB中间件、插件token验证：basic-auth、jsonwebtoken处理post请求：koa-body处理路由：koa-router解决跨域：koa2-cors设置module别名：module-alias数据库操作：mongoose校验器：validator给文件生成唯一id：uuid
2021-09-29 17:34:02
242
原创 异步循环生成器
项目中遇到上传多张图片或者切片文件上传，如果需要上传完成后再继续上传下一部分，可以用异步循环生成器完成，简易demo如下：class GenCmp { async *generator(total) { let order = 0; while (order < total) { const data = await this.requestSomething(order); order++;
2021-03-16 17:20:59
191
原创 react项目总结
本文章主要是源自实际项目开发项目的总结，一些思考是参考了看过的文章，做了一篇总结，demo是跑过的，可以放心食用。目录 一.组件通信1.父组件向子组件通信2.子组件向父组件通信3.跨级组件通信4.兄弟组件通信5.无嵌套关系的组件通信二、避免重复渲染1.隔离独立渲染的子组件2.与渲染无关的变量不用state来管理数据3.批量更新state、合并state4.class组件中使用shouldComponentUpdate5.绑定事件尽量不使用箭头函...
2021-01-08 17:11:32
1421
原创 vue插槽slot的使用
vue的slot是子组件向父组件提供html自定义模版，具体做法是子组件中定义slot模版，然后在父组件中使用template去填充子组件的slot部分，子组件可以通过在slot上添加属性给父组件传递数据。主要使用在拓展组件上，比如表格组件，让父组件可以自定义每一行的不同情况下的按钮，而子组件只需要关心一些通用的功能、布局和样式，业务逻辑部分在父组件处理，常用于一些vue的ui组件库。具体写法可以参考例子，v-slot:slotName是vue2.6以上的写法，旧写法是slot=“slotName”
2020-07-15 09:48:29
472
原创 围观“33行代码的React”
在奇舞周刊的公众号上看到文章，学习了一下外国工程师的用33行实现的React，他实现的React主要涉及虚拟DOM生成、差异比较、真实DOM的渲染，主要可使用m()函数，用于创建虚拟DOM，m.render()，用于DOM挂载与渲染。以下为学习注解，可先看如何调用，再反过来看实现：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="robots" content
2020-05-26 17:44:34
213
原创 小程序问题记录Taro版
1.修改TaroUI组件内的样式需要在class里定义（2.2.3以上支持）：static options = { addGlobalClass: true,};2.真机canvas无法显示，滑动卡顿问题：canvas上绘制的图片地址的域名要配在小程序的downloadFile里，必须是https的；动画本身不卡顿，但是canvas直接滑动会卡顿，解决方法：在ctx.dra...
2020-05-07 11:58:53
871
2
原创 typescript复杂用法举例
1.实现一个从对象上取出指定属性的pick函数： 用到索引类型查询操作符keyof、索引访问操作符[]const user = { username: 'lee', id: 46093049239239, role: 'vip'}const pick = <T, K extends keyof T>(o: T, names: K[]): T[K][] =&g...
2020-04-13 11:40:55
550
原创 react之context、portals、HOC、render props
1.Context定义： 一种可以在组件之间共享值的方式，不必显示通过组件树逐层传递props。用法： 使用React.createContext创建一个context，再使用Provider将值传递给子组件，在子组件中指定contextType=创建的context，React 会往上找到最近的 theme Provider，使用时通过this.context即可获取...
2019-11-12 15:56:13
310
原创 数组迭代方法polyfill
参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayArray.prototype.forEach描述：为数组中的每个元素执行一次回调函数。特点：不直接改变原数组返回 undefined不可链式调用不可中止或跳出循环，除非抛出异常使用：// c...
2019-09-11 10:50:37
307
原创 在vuepress中使用vue组件和highlight
vuepress 中使用 vue 组件 在 vuepress 中一般会直接写 md 文件，但是有时需要做一些自定义的东西，比如展示一些前端效果，点击切换样式等等，就可以结合 vue 组件来实现。1.在.vuepress 文件夹中建立 components 文件夹，添加一个例如名为 my-demo.vue 的文件<template>...
2019-06-28 15:14:31
9500
1
原创 vue-cli+ts+iview单多页面的配置实践
简介实现效果：常见的后台管理系统的 demo。地址：https://github.com/MaTonna/vue-cli-ts-ivew项目启动安装依赖npm i项目启动npm run servehttp://127.0.0.1:3000/page1/index1/contentCenter2 是单页面的类似后台管理的页面，同时这个系统配置了多页面的http://127.0....
2019-06-17 19:51:18
2474
1
原创 JavaScript设计模式与开发实践笔记（1）
单例模式定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。应用：只存在一个的浮窗（登录浮窗）、只绑定一次的事件、创建唯一实例对象。实现原理：用变量标志当前是否为某个类创建过对象，如果有，在下一次获取该类的实例时，返回之前创建的对象。实现 :把全局变量当做单例来使用，但是要减少全局变量的使用，相对降低全局变量带来的命名污染。使用命名空间对象字面量const name...
2019-06-12 11:12:18
180
原创 webpack打包后z-index设置无效默认为1的解决方案
在webpack打包后z-index以及带有-webkit-这样前缀的css属性无法正确打包，按照网上的说法是以下这样配置，但是依旧不行。new OptimizeCssAssetsPlugin({ cssProcessor: require("cssnano"), cssProcessorOptions: { discardComments: { remo...
2019-04-15 17:56:17
874
原创 H5的rem适配方案
在公共的js中加上一下代码，动态计算根节点的font-size，以便rem计算倍数。(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //750 为设计稿宽度 适配...
2019-03-21 10:19:17
2170
原创 封装调用接口的函数，返回接口的返回值
封装公共函数的 js：publicFunc.jsconst getData = () => { return new Promise((resolve) => { axios.get(url,param) .then((req) => { const data = req; //接口返回值做处理 resolve(da...
2019-03-01 15:19:06
4205
2
原创 redux简易demo
demo 简介通过组件的事件改变 store 中的 state 值，进而改变视图，同时通过调用接口来渲染数据。地址：https://github.com/MaTonna/demoForRedux使用的依赖react-redux：管理 react 当中的 state，创建一个集中管理的 storeredux-thunk： redux 的中间件，使 action 返回一个函数，组件派发事件时...
2018-11-22 15:26:08
1859
原创 node试水——express+mlab登录注册
express+mlab登录注册简介和思路使用express作为node框架，mlab作线上数据库，postman作为调试接口工具；注册时匹配唯一邮箱，录入用户名、密码（用bcrypt加密过）、邮箱、头像（获取gravatar公认头像），保存数据库成功后返回用户信息；登录时匹配用户名和密码，匹配成功后返回Bearer token令牌；访问一个接口，校验传入的authorization...
2018-11-07 14:29:25
2655
原创 用fiddle+vconsole.js对APP内嵌的H5进行调试
背景：测试机与电脑在同一个局域网内1.配置fiddle，设置完成后重启fiddle2.设置手机wifi主机名为电脑IP，代理服务器端口为刚刚fiddle设置的端口号3.在测试的H5中加入vconsole.min.js，h5底部出现绿色按钮，可以在页面上console.log信息...
2018-03-13 12:18:26
1944
转载 【读书笔记】《高性能JavaScript》
第一章-加载和执行js的阻塞特性：当浏览器在执行js代码的时候，不能同时做其他事情。（界面ui线程和js线程用的是同一进程，所以js执行越久，网页的响应时间越长。）脚本的位置如果把脚本放在中，页面会等js文件全部下载并执行完成后才开始渲染，在这些文件下载和执行的过程中：会导致访问网站的时候有明显的延迟，表现为：页面空白。性能提升：推荐将所有的标签尽可能的放到标签的底部，优先渲染页面，减少页面空白时
2018-01-19 11:01:15
186
原创 SVG精髓-笔记与实践
笔记链接：http://f5528907.wiz03.com/share/s/3RkEA70XbA2d2jbjQh1dHWIp3APUr93rFQYZ2srCaU2YDjgc在网页中使用svg1.当做图像使用：在元素中使用：img src="./person.svg" alt="" ti
2017-12-21 18:16:05
1119
转载 移动端点击300ms延迟问题和解决
一、移动端300ms点击延迟一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。在移动WEB兴起的初期，用户对300ms的延迟感觉不明显。但是，随着用户对交互体验的要求越来越高，现今，移动端300ms的点击延迟逐渐变得明显而无法忍受。
2017-12-13 18:29:31
592
原创 js-循环的方法
概念区别循环（loop），指的是在满足条件的情况下，重复执行同一段代码。比如，while语句。（循环能对应集合，列表，数组等，也能对执行代码进行操作。）迭代（iterate），指的是按照某种顺序逐个访问列表中的每一项。比如，for语句。（迭代只能对应集合，列表，数组等。不能对执行代码进行迭代。）遍历（traversal），指的是按照一定的规则访问树形结构中的每个节点，而且每个节点都只访问一
2017-09-22 15:42:54
694
原创 react笔记-数据载体state/props/context
1.state state应该称为内部状态或局部状态，react组件可以在构造函数中初始化内部状态，可以通过this.setState方法更新内部状态，还可以使用this.state获取内部状态，内部状态的操作与react事件系统配合可以实现用户交互的功能。 import React, { Compone
2017-09-13 17:57:58
523
转载 CSS十问——好奇心+刨根问底=CSSer
第一问：当margin的值为百分比形式时，为什么浏览器会根据父容器宽度得出计算值？假如有一个父容器宽度400px，高度600px，其子元素设置margin:20% 20%后的计算值应该为“margin:120px 80px”还是“margin:80px 80px”呢？按照那篇博客中的理论，第二个是正确答案。但是在今天这篇文章中，我给出的答案是第一个肯定错，第二个也不一定对。一个符合W3C标
2017-08-24 10:07:00
330
转载 移动端布局方法
响应式布局这种感觉是最好理解了，利用@media进行断点，在每个断点中编写css。@media (max-width:768px){ //css}上面这段代码，在浏览器的宽度低于768时有效。同理，如果把max换成min，就会变成高于768时有效。可以设置宽度，也可以设置高度，也可以同时设置多个值。
2017-08-02 09:52:46
582
原创 0630工作tips
1.兼容IE问题 解决办法一：加入兼容性的head，在需要做兼容的地方加上对应的class，如需要改变某个div的颜色：.ie7 .changeBg{background:red}//在ie7下改变元素的背景色1DOCTYPE html>2[if lte IE 6]>html class="ie6 oldie" lang="zh-cmn-Hans">[en
2017-07-17 15:56:15
343
原创 react生命周期小demo
/* 生命周期三个状态： Mounting：组件挂载，已插入真实DOM Updating：组件更新，正在被重新渲染 Unmounting：组件移出，已移出真实DOM 生命周期四个阶段： 创建、实例化、更新、销毁 */ var Demo = React.createClass({/*--------------------------------
2017-06-23 14:54:28
568
原创 react基础学习小demo汇总
react demo .pstyle{ font-size:20px; } /*-----------------------------------------------------------------------------*//*传递prop
2017-06-23 11:57:34
468
原创 Set和Map数据结构
1.Set基本用法 Set是一个构造函数，用来生成Set数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值，接收一个数组（或类似数组的对象）作为参数，用来初始化。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(
2017-06-12 11:43:43
523
原创 变量的解构赋值
解构：按照一定模式，从数组和对象中提取值，对变量进行赋值。1.数组的解构赋值基本用法 之前的赋值形式为直接指定值，例如let a = 1。ES6允许写成let [a,b,c] = [1,2,3]，从数组中提取值，按照对应的位置，对变量赋值，只要等号两边的模式相同，左边的变量就会被赋予相应的值。如果解构不成功，变量的值就会等于undefined等号左边的
2017-06-07 15:23:38
362
原创 let和const命令
1.let命令基本用法： let命令用来声明变量，只在let命令所在的代码块中有效for(let i = 0; i 10; i++) {}console.log(i);//not defined 以上代码i只在for循环中有效。 与var声明变量作比较：var a = [];for (var i = 0; i 1
2017-06-06 10:22:39
1481
原创 ES6学习开始
ECMAScript和javascript的关系： ECMAScript是javascript的规格，javascript是ECMAScript的其中一种实现，使用ECMAScript规范的还有Jscript和ActionScript。兼容ES6： 使用babel，jsx，traceur，es6-shim等转码器。使用Babel：1.全局
2017-06-05 15:11:59
754
转载 Socket.io在线聊天室
转载自：http://blog.fens.me/nodejs-socketio-chat/由于项目需要一个群组聊天室，遂找到一个非常好的demo，以下为转载全文：目录socket.io介绍服务器端和客户端通信设计服务器端实现客户端实现完整案例代码1. socket.io介绍socket.io一个是基于Nodejs架构体系的，支持webso
2017-04-28 12:20:46
1300
原创 sea.js的初次尝试
sea.js文档地址：http://seajs.org/docs/#docssea.js是一个模块加载器，一个文件就是一个模块。sea.js主要解决的问题是：模块化编程（针对js）、异步加载、无需考虑命名空间初次尝试：1.加载模块sea.use加载一个或多个模块define用来定义模块目录结构：--test.html--a |--a.js
2017-03-22 19:59:10
1129
转载 排序算法-C语言版本
概述排序有内部排序和外部排序，内部排序是数据记录在内存中进行排序，而外部排序是因排序的数据很大，一次不能容纳全部的排序记录，在排序过程中需要访问外存。我们这里说说八大排序就是内部排序。 当n较大，则应采用时间复杂度为O(nlog2n)的排序方法：快速排序、堆排序或归并排序序。 快速排序：是目前基于比较的内部排序中被认为是最好的方法，
2017-03-10 15:55:17
406
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人