前端
关注
分享
扫一扫
文章平均质量分 54
前端学习摘记
mus_木司
武理学生，正在学习前端知识orz
简历：https://mus-z.gitee.io/resume/
展开
-
在create-react-app中craco配置less及alias后路径跳转问题
首先是配置aliashttps://www.jianshu.com/p/7e1f1e535b8c介绍了如何配置cra的antd的less形式以及babel-plugin-import按需加载 yarn add antd @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D根目录下创建 craco.config.jsconst CracoLessPlugin = require('craco-原创 2021-04-02 18:16:35 · 2215 阅读 · 0 评论 -
【坑】在谷歌浏览器上运行使用了session却失效的坑(Session/cookies/Header-Samesite)
在node服务器上配置了但是通过谷歌浏览器每次的cookies都不对劲哦，然后服务器的session失效，不是同一个百度后发现是谷歌浏览器的防止csrf的措施，会有默认的配置SameSite头上图中的叹号会提示默认使用了Lax模式，即POST是不允许的chrome://flags/#site-isolation-trial-opt-out然后解决就是使用上边的配置地址，去像下图一样去废弃三个默认配置，重启谷歌浏览器...原创 2021-01-31 14:47:51 · 4698 阅读 · 5 评论 -
TypeScript-系统入门到项目实战
原课地址：https://coding.imooc.com/class/evaluation/412.html?page=9项目的话小demo基本上按照目录对应来看源码项目我基本上只有最终版本，nodemodules搞起来太慢了所以就是直接在原有改了小节的内容文章目录一、环境配置二、ts学习1.静态类型的深度理解2.基础类型和对象类型3.类型推断和类型注解4.函数相关类型5.Interface接口6.类的定义与继承7.类中的访问类型和构造器8.静态属性，setter和getter，单例模式9.抽象类、翻译 2020-12-14 19:59:05 · 1467 阅读 · 2 评论 -
css动画，圆周运动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @keyframes r{原创 2020-08-22 21:34:28 · 1106 阅读 · 0 评论 -
css硬币旋转和立方体旋转动画
主要是对于animation和transform的综合应用transform是基于图形变换animation是可以生成不间断的动画transform-style: preserve-3d;用来保证3d的背面效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid原创 2020-08-04 15:05:16 · 976 阅读 · 2 评论 -
webpack学习笔记实例
webpack-尚硅谷https://www.bilibili.com/video/BV1e7411j7T5?p=39可以去gitee看一下我里面有资料和demo文章目录webpack-尚硅谷概述五个核心概念看演示~如何打包样式：如何打包html：打包图片：打包其他资源：热加载devServer开发环境搭建生产环境的痛点cssjshtml生产环境配置webpack优化配置开发环境性能优化：优化打包构建速度-HRM优化代码**调试**-source-map生产环境性能优化优化打包构建速度-oneOf优化原创 2020-07-31 13:10:05 · 1081 阅读 · 0 评论 -
es模块的懒加载和预加载（import动态引入+webpack）
此懒加载是js文件的懒加载，不是图片资源的懒加载很明显test被提前加载了现在假如有一个需求，当我点击按钮，才想加载test.js这时候import动态加载就来啦初始情况为当我点击按钮这就实现了es6动态引入的懒加载，因为其实现了代码分割，并不需要担心会重复加载然后，还有一个东西叫预加载webpackPrefetchconsole.log('index.js被加载了')document.getElementById('btn').onclick=async function(原创 2020-07-30 19:59:30 · 3094 阅读 · 0 评论 -
webpack生产环境性能优化打包构建速度-babel缓存+服务资源缓存
对babel缓存、对资源缓存对于js代码的编译处理，我们每次构建之后，只想变动我们修改的文件模块，这时候不能依赖于HMR的dev-server，所以要对babel进行缓存操作只需要在babel-loader中的options中开启cacheDirectory:true想要看出区别要在根目录下新家server.js配置服务器代码const express = require("express");const app = express();app.use(express.static("bui.原创 2020-07-30 18:14:38 · 599 阅读 · 0 评论 -
webpack生产环境性能优化打包构建速度-oneOf
在加载loader时候，默认每个文件都会被所有的rules检查，但我们很多文件都只需要一条rules就可以解析完成，这无疑减慢了打包效率，因此可以考虑使用rules的oneOf规则，可以保证文件从oneOf里面的规则从上到下检查，满足一个rule之后就可以不进行下面的loader（需要做好顺序，而且不能同一个文件需要两个loader规则同时处理所以如果有两个文件都需要不同的rule处理的时候把其中一个loader提取到oneOf外面，就可以了比如对于js文件的eslint-loader和babelloa原创 2020-07-30 18:13:40 · 480 阅读 · 0 评论 -
webpack开发环境性能优化之优化代码调试-source-map
source-map是一种提供源代码到构建后代码的映射技术如果构建后代码出错，会通过映射关系追踪源代码错误在webpack.config.js中加入devtool:'source-map',重要的是source-map的构建参数[inlie-|hidden-|eval-][nosources-][cheap-[module-]]source-map前面有三个可选的参数位置source-map：会生成built.js.map的一个映射文件inline-source-map：内联，映射文件原创 2020-07-30 00:04:26 · 1130 阅读 · 0 评论 -
webpack开发环境性能优化之优化打包构建速度-HRM
修改部分文件的时候其他文件也会重新打包，肯定会影响打包速度因此就需要HRM热模块替换只会打包某一个模块而不是所有都重新打包样式文件在使用style-loader的情况下可以使用HRMjs文件默认不使用HRM，需要自动刷新：需要修改js文件实现热加载html不能随之热加载，也不会自动刷新（修改entry入口，改成数组引入html），pwa不做HRMconst path = require('path');const HtmlWebpackPlugin = require('html-webp原创 2020-07-30 00:01:23 · 437 阅读 · 0 评论 -
nodejs入门基础（复习）
https://study.163.com/course/courseLearn.htm?courseId=1210098848#/learn/video?lessonId=1281066155&courseId=1210098848nodejs基础学习文章目录nodejs基础学习node初识nodejs安装nodejs REPL交互解释器nodejs编辑器和npmnode的模块运行机制nodejs模块路径nodejs的包nodejs的文件系统同步写异步写文件流写异步读异步读写文件流读写文件使用原创 2020-07-27 17:44:21 · 321 阅读 · 0 评论 -
webpack入门速学笔记
老陈：https://www.bilibili.com/video/BV1gA411B7M2?from=search&seid=11762398641701819399文章目录webpack学习-老陈初始化使用webpack.config.js使用loader加载样式打包使用plugin插件打包图片资源热更新webpack学习-老陈官方文档https://www.webpackjs.com/concepts/webpack是我们必须了解的打包工具四个核心概念：入口(entry)输出原创 2020-07-27 00:21:44 · 164 阅读 · 0 评论 -
微信小程序学习（2）-云开发
微信小程序-云开发微信小程序学习（1）文章目录微信小程序-云开发初始化+云函数的坑云函数使用老陈段子小程序云存储小程序云数据库初始化插入简单查询更新数据删除数据Aggregate联合查询addFields派生/替换字段bucket分组bucketAuto自动分组granularity 详细说明count记录数geoNear地理位置索引group分组limit输出限制lookup联表查询(yun)match查询project操作字段replaceRoot换根节点simple 随机抽取skip跳过指定条数s原创 2020-07-26 14:42:12 · 1276 阅读 · 0 评论 -
【转载】egg.js的文件上传
https://eggjs.org/zh-cn/basics/controller.html#%E8%8E%B7%E5%8F%96%E4%B8%8A%E4%BC%A0%E7%9A%84%E6%96%87%E4%BB%B6获取上传的文件请求 body 除了可以带参数之外，还可以发送文件，一般来说，浏览器上都是通过 Multipart/form-data 格式发送文件的，框架通过内置 Multipart 插件来支持获取用户上传的文件，我们为你提供了两种方式：File 模式：如果你完全不知道 No转载 2020-07-24 23:02:53 · 1457 阅读 · 0 评论 -
微信小程序的上传图片或者其他文件的简单小例子
<button bindtap="uploadEvent" type="primary">上传</button><image src="{{imgSrc}}" style="width:100%" mode="widthFix"></image>uploadEvent(){ // //1.选择图片，本机相册 // wx.chooseImage({ // success:(res)=>{ // consol原创 2020-07-24 22:53:53 · 357 阅读 · 0 评论 -
小程序图片高度自适应等问题
主要是使用api的数据进行循环渲染，然后下拉到底部无限刷新增加数据小程序图片高度自适应这里踩了很多遍的坑，花了很多时间，以为像以前以前给他上级的盒子不给高度就行了，oh,no，这是一个坑，关键在于image标签的一个属性：mode="widthFix"，简单搞定<image src="{{item.cover}}" class='wedding_img' mode="widthFix" />1小程序中无法识别空格符这样用就可以啦！！！6666<text decode="{{t转载 2020-07-24 20:35:57 · 1839 阅读 · 0 评论 -
方便的接口平台
如果是比较松散的想测试或者联系使用一些数据而不是要很严谨的数据这个网站里面的api还不错，最起码用来自己写demo当测试是完全够用了https://api.apiopen.top/api.html大家妥善使用，看见好多都崩了，我也是为了码起来自己方便...转载 2020-07-24 17:04:58 · 185 阅读 · 1 评论 -
微信小程序学习（1）-基础开发
学习微信小程序文章目录学习微信小程序注册和初始化小程序配置tabbar导航栏模板插样与WXML循环渲染条件渲染模板微信小程序脚本WXSmodulerequiresrcdemo微信小程序常用组件事件绑定并阻止事件冒泡互斥事件绑定事件的捕获阶段API请求数据小程序项目-商城初始化引入vant使用组件下面引入一个Skeleton 骨架屏小程序的屏幕像素设置一个自定义navbar图片轮播图标列表使用Grid宫格滚动view和底部栏列表与下拉刷新新页面分类进入产品页面页面详情商品规格商品评论加购与购物车页面模拟模拟原创 2020-07-24 12:47:22 · 1523 阅读 · 0 评论 -
小程序富文本引入图片报错403的问题【使用跳板】
在学习小程序的时候发现音乐能scdn或者gitee的图片不行，是因为他们的服务器机制做了referer防盗链，但是又想偷懒就找了一个人用的跳板https://www.cnblogs.com/cjxblogs/p/6440779.html<img src='http://read.html5.qq.com/image?src=forum&imageUrl=图片地址'></img>就行了...翻译 2020-07-24 02:12:48 · 520 阅读 · 0 评论 -
antd pro学习入门笔记+todolist实例
AntD Pro零散笔记antd pro 4.0是一个集成了前后端服务、mock模拟接口、dva容器、typescript、less的一个解决方案，有助于快速的二次开发（不过感觉脚手架真的很大）文章目录AntD Pro零散笔记糟心的初始化记一下常用的目录和文件使用区块模板权限管理数据请求手动新建页面umi中mock怎么用？配合service文件数据请求后放到状态管理model页面内数据管理加个搜索功能登陆验证的修改todolist实战最后的代码结构，具体糟心的初始化安装初始化环境让我很头疼，弄了一下原创 2020-07-23 18:41:48 · 907 阅读 · 0 评论 -
typescript
1 什么是typescript增加可读性可维护性，包容js，执行时候需要编译成js理解接口、泛型、类、枚举类型等2 初始化npm install -g typescripttsc hello.ts //当前目录tsc --outFile ./dist/abc.js hello.ts//生成为相对路径下的文件出现函数重复warn根目录下使用tsconfig.json文件warn提示就会消失3 基础类型布尔值booleanlet isDone:boolean =fal翻译 2020-07-23 18:36:48 · 286 阅读 · 0 评论 -
react-app和next-app修改端口号
在package.jsonreact-appnext-app原创 2020-06-15 13:51:32 · 327 阅读 · 0 评论 -
antd的可伸缩列用hooks重构后难用的坑
自己不知道怎么改，看见了老哥的文章，绝了，正好解决orzhttps://blog.csdn.net/qq_34398777/article/details/106303169问题遇到的问题是官方可伸缩列拖动的时候太卡，究其原因是实时更新列宽，拖动的时候直接更新所有列宽，当列较多的时候更新的数据响应也会比较多，但做法是官方的延申{ "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/r翻译 2020-06-15 10:11:02 · 2266 阅读 · 2 评论 -
题目：实现一个对树型结构进行过滤的函数，其中树形结构的格式
题目：实现一个对树型结构进行过滤的函数，其中树形结构的格式如下： tree = [ {name: ‘A’}, {name: ‘B’,children: [ {name: ‘A’}, {name: ‘AA’, children: […]} ]}, {name: ‘C’}]假设我输入的 str 为 A 则过滤后返回的结果为 [ {name: ‘A’}, {name: ‘B’, children: [ {name: ‘A’} ]} ]假设我输入的 str 为 AA 则过滤后返回的结果为 [ .原创 2020-06-10 12:21:08 · 713 阅读 · 0 评论 -
canvas+requestAnimationFrame渲染时钟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <Style> #timetext{ position: absolute; top:10; left:20; }原创 2020-05-19 22:31:24 · 522 阅读 · 0 评论 -
【续】echarts疫情地图的单跨域proxy代理方法获取外部url的json
续react实现echarts的疫情地图实现实时获取外部json参考：react axios 跨域访问一个或多个域名问题react+axios用node代理解决跨域首先package.json加一句proxy "proxy":"https://c.m.163.com"然后spider.js中写一个异步函数（返回的是promis）axios是需要用npm install axios下载的let axios = require('axios');exports.getf= async f原创 2020-05-09 21:12:26 · 443 阅读 · 0 评论 -
react实现echarts的疫情地图
视频https://www.bilibili.com/video/BV1T7411W72T?p=12需要运用react-app和安装echats的插件json文件是视频中提供的链接复制到本地的https://c.m.163.com/ug/api/wuhan/app/index/feiyan-data-list（也希望大佬能教我一下react跨域获取怎么做，教程里面的axios不会引入，网上找的jsonp方法又不能满足引用格式下面是做了一个表单两个echarts图（柱状图、map地图import原创 2020-05-09 13:50:00 · 1487 阅读 · 0 评论 -
【转载】ES6系列之Promise, Generator, Async比较
https://segmentfault.com/a/1190000017256709比较Promise, Generator, Async写法：function takeLongTime(n) { return new Promise(resolve => { setTimeout(() => resolve(n + 200), n); });}...转载 2020-04-19 22:16:40 · 135 阅读 · 0 评论 -
【转载】css两列等高布局
转载：https://blog.csdn.net/weixin_34008805/article/details/86111307两列等高布局方案等高布局有几种不同的方法，但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容...转载 2020-04-19 17:00:06 · 200 阅读 · 0 评论 -
js深拷贝（递归实现）【完美版解决包装对象Number，String ， Boolean，Date，RegExp】
const deepClone =(initalObj) => { if (typeof initalObj !== 'object') {//如果是基本类型直接返回值 return initalObj } const obj = Array.isArray(initalObj)?[]:{};//可能是对象或者数...原创 2020-04-19 16:12:28 · 1811 阅读 · 0 评论 -
css的文本省略号（单行和多行）
https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc1）单行文本溢出显示省略号当我们在编写网页代码的时候，肯定会遇到过文字列表中的文字太多超出了我们所写的宽度，导致文本换行或者文本超出了界限，这时有人就会说了，让后台限制一下调用的文字个数不就行了吗，但是我们在做响应式的时候由于是百分比布局，...转载 2020-04-19 11:26:58 · 9103 阅读 · 0 评论 -
模拟Object.creat
https://www.jianshu.com/p/6c8cdad567f7Object.myCreate = function (obj) { function F () {}; F.prototype = obj; return new F(); }转载 2020-04-19 09:56:09 · 266 阅读 · 0 评论 -
模拟new
转载：https://www.jianshu.com/p/8aeef6b08560new功能是要生成一个构造函数的实例，所以在实现过程中需要我们手动创建一个空对象，对象的原型继承自构造函数。如果调用构造函数无返回结果，则返回结果，否则返回创建的对象。function new2(...rest){ let obj = {}; let [context,...args] = res...转载 2020-04-19 09:52:46 · 163 阅读 · 0 评论 -
4种通过iframe跨域与其他页面通信的方式
转载：https://www.cnblogs.com/happy-8090/p/11570998.html4种通过iframe跨域与其他页面通信的方式不同域下的iframe不能进行操作。1、location.hash：在url中，http://www.baidu.com#helloword的#helloworad就是location.hash，改变hash值不会导致页面刷新，所以可以利用h...转载 2020-04-18 20:43:00 · 7686 阅读 · 0 评论 -
web socket and web worker 基础原理及使用
转载：https://my.oschina.net/u/2274721/blog/419772个人认为HTML5最吸引人的两大功能， web socket 和 worker为构建高效能的web应用提供了新的参考方案。大体来说，web socket提供更高效的传输协议，web worker提供多线程提高web应用计算效率。最近项目有用到，对应两个问题的解决，目前运行效果来看还是很不错。这里主要...转载 2020-04-18 19:57:25 · 302 阅读 · 0 评论 -
HTML5--拖拽API(含超经典例子)
转载：https://blog.csdn.net/paullinjie/article/details/80691193一、关于拖拽API拖拽API是HTML5的新特性，相对于其他新特性来说，重要程度占到6成，实际开发中使用比例占到3成，学习要求个人认为是达到掌握即可的程度。二、什么是拖拽和释放？拖拽：Drag释放：Drop拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了...转载 2020-04-18 18:10:20 · 1274 阅读 · 1 评论 -
flex的骰子练习
flex讲解：https://www.jianshu.com/p/59b88ba4e579阮一峰flex实战篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html在线骰子练习：https://codepen.io/elsonzhang/pen/aaaLQw?cf_chl_jschl_tk=bd5eb4e93b46d0ef613bb...原创 2020-03-30 15:41:50 · 424 阅读 · 0 评论 -
vscode第一次babel+修饰器+浏览器应用
今天第一次本地配置了babel在vscode上首先保证自己有node.js因为全都是npm命令详情可以参考菜鸟教程的nodejs部分阮一峰的babel教程：http://www.ruanyifeng.com/blog/2016/01/babel.html这个bulid是对src文件夹的整体命令修饰器加装修饰器的过程我是按照vscode终端给的提示下载了babel-core和bab...原创 2020-03-28 16:49:36 · 393 阅读 · 0 评论 -
npm出现UNMET DEPENDENCY的一种情况
先用-save-dev方法添加express的框架依赖之后（详情看菜鸟https://www.runoob.com/nodejs/nodejs-express-framework.html）使用 npm list查看项目包列表类似出现这样的错误，但是很奇怪我刚才的express框架文件能够正常运行。（我全局方式安装过）然后试了试用 npm install xxx再安装本地就消除他的UNME...原创 2020-03-26 17:30:56 · 5019 阅读 · 0 评论