【杂记】
文章平均质量分 55
神以灵
渴望成为前端大神的一个noob~~~
(https://github.com/shenyiling)
展开
-
Cookie详解
cookiecookie是浏览器端的一种数据存储,常和localStorage、session一起比较,常被用来记录用户的身份信息状态,为无状态的http请求添加了访问用户的身份标志。只要满足了发送条件,就会自动添加到http请求头中。满足条件是根据cookie的几个可选属性决定的,首先cookie是以键值对的方式存储(name = value),每个键值对还有不同的可选属性,都可以在设置cookie时一并添加:path:可以访问cookie的页面路径,该路径及它的子路径都可以访问domain:可以原创 2020-12-19 21:31:14 · 698 阅读 · 2 评论 -
web component指南
web component什么是web component?web component是web原生提供的封装组件的方式,让开发者定义一些可重复使用的自定义元素。主要包含custom elements、shadow dom、html templates部分,分别用于注册自定义元素、提供shadow-dom接口,为自定义元素的样式和脚本提供一个隔离的环境、通过template和slot编写自定义元素的结构模板。如何开发一个web component?一个web component就是一个我们可以在正常d原创 2020-09-13 20:59:01 · 4511 阅读 · 0 评论 -
vscode设置选择补全快捷键为tab
使用了vim后,实在忍受不了通过方向键选择代码补全~~将下面的配置添加到keybindings.json中,可替换为tab和shift tab{ "key": "tab", "command": "selectNextSuggestion", "when": "editorTextFocus && suggestWidgetMultipleSuggestions && suggestWidgetVisible"},{原创 2020-06-15 01:08:48 · 5172 阅读 · 3 评论 -
SWR 与前端数据依赖请求
原文链接:https://zhuanlan.zhihu.com/p/90660704 作者:shud.in数据依赖关系其实是一个 DAG(有向无环图)。有些数据依赖于其他,有的则无依赖性:DAG:对数据的请求则是对这个有向无环图的遍历。最高效的请求方式一定是在拓扑序上尽可能地并行(每当一个数据的依赖都就绪时,立即发起请求)。仔细想想,大部分时候(请求并不复杂时),我们都用 Promi...转载 2020-03-01 21:32:52 · 1091 阅读 · 0 评论 -
钉钉小程序设置placeholder样式
照着微信小程序的方法写就ok了,尽管钉钉的文档里没写(还有一些其他的api也可以按着微信的方式写~~o _ o)1.placehoder-style2.placeholder-class对这个钉钉小程序只有一个形容词:shit...原创 2020-01-08 16:42:16 · 1633 阅读 · 0 评论 -
docker删除所有none镜像
删除所有none镜像docker rmi `docker images | grep "<none>" | awk '{print $3}'`$3指打印第三列的数据,也就是镜像的id。查找多个关键字(或)docker images | grep -E 'none|react-viz'查找多个关键字(与)docker images | grep 'none' | gre...原创 2019-12-27 11:41:12 · 1037 阅读 · 0 评论 -
Canvas 动画的性能优化实践
作者:方勤原文:https://blog.csdn.net/weixin_39843414/article/details/103502053前言去年圣诞节有一个下雪的背景动画的需求。在实现这个动画的过程中加深了对 canvas 动画的一些了解,在这里我仅是抛砖引玉的分享一下,欢迎各位大佬批评。代码已上传至 github 【https://github.com/wanqihua/blo...转载 2019-12-18 09:23:46 · 1284 阅读 · 1 评论 -
看在上帝的份上,不要使用 .npmignore
英文原文: medium.com.npmignore 是一个可以给Node.js项目造成严重危害的文件,你应该立即停止使用该文件(除了下面所列的一种情况)。npm中已经永久内置了一个更好的替代文件,并且更易用更安全。什么是 npmignore?比如我下载了一个名为 cli-ux 的npm包,这是一组常见的 CLI UX 工具函数。该项目的根目录下有一个名为 /test 的文件夹,里面放的...转载 2019-11-22 11:56:47 · 10566 阅读 · 2 评论 -
Macos:neovim配置前端开发环境
安装neovimbrew install neovim设置配置文件新建配置文件:cd ~/.configmkdir nvim && cd nvimtouch init.vim写入配置:" Specify a directory for pluginscall plug#begin('~/.vim/plugged')Plug 'neoclide/coc.nv...原创 2019-11-15 19:43:37 · 4827 阅读 · 0 评论 -
Performance使用教程:分析运行时性能
原文链接:https://developers.google.cn/web/tools/chrome-devtools/evaluate-performanceGet started在本教程中,你在一个在线的页面打开DevTools,使用Performance面板在页面上查找性能瓶颈。1.打开隐身模式下的chrome浏览器,确保chrome运行在一个干净的状态下。如果你安装了许多的拓展插...原创 2019-10-25 14:58:46 · 6609 阅读 · 0 评论 -
locust压力测试
安装python 2.7:python -m pip install locustiopython 3:python3 -m pip install locustio查看是否安装成功:locust --help编写脚本文件from locust import HttpLocust, TaskSet, taskclass UserBehavior(TaskSet): de...原创 2019-09-06 09:57:28 · 207 阅读 · 0 评论 -
你了解HTTP2.0吗?
前言作为一只前端开发????,HTTP是我们知识地图里面必不可少的一部分,也是面试必问知识点。HTTP2号称可以让我们的应用更快、更简单、更稳定,它完美解决了1.1版本的诸多问题,本文和大家一起聊聊HTTP2的改进点。HTTP发展史正式讲HTTP2之前我们先讲一下HTTP的发展史。HTTP/0.9 - 单行协议HTTP于1990年问世,那时候HTTP非常简单:只支持GET方法;没有首部;只...转载 2019-09-05 20:35:03 · 954 阅读 · 0 评论 -
requestAnimationFrame 知多少?
requestAnimationFrame 知多少?在Web应用中,实现动画效果的方法比较多,JavaScript 中可以通过定时器setTimeout来实现,css3 可以使用 transition 和 animation 来实现,html5 中的 canvas 也可以实现。除此之外,html5 还提供一个专门用于请求动画的 API,即 requestAnimationFrame(rAF),...转载 2019-08-12 22:13:25 · 426 阅读 · 0 评论 -
vscode调试nodejs代码
1.打开设置搜索deubg.node2.将debug.node:Auto Attach开关打开3.node --inspect启动项目,然后在代码里添加断点即可原创 2019-08-07 13:19:48 · 2038 阅读 · 0 评论 -
优秀的命令行工具整理 (一)
原文作者: Darren Burns翻译:weakish@LeanCloud原文链接:url.leanapp.cn/darren我打算写一系列文章,展示下近些年发现的一些很棒的非标准命令行工具,这是第一篇。如果你用命令行,那么这些工具中大概至少有一个能让你的生活更舒心。z 跳转现代浏览器地址栏可以智能模糊搜索,节省了大量时间。想要刷下推特?只需在地址栏输入「tw」然后回车。相比之下,在...转载 2019-07-25 20:55:46 · 274 阅读 · 0 评论 -
为什么视频网站的视频链接地址是blob?
自从HTML5提供了video标签,在网页中播放视频已经变成一个非常简单的事,只要一个video标签,src属性设置为视频的地址就完事了。由于src指向真实的视频网络地址,在早期一般网站资源文件不怎么通过referer设置防盗链,当我们拿到视频的地址后可以随意的下载或使用(每次放假回家,就会有亲戚找我帮忙从一些视频网站上下东西)。 目前的云存储服务商大部分都支持referer防盗链。其原理就是在...转载 2019-07-09 15:55:15 · 5496 阅读 · 1 评论 -
SheetJS/js-xlsx修改表头
SheetJS/js-xlsx修改表头我们经常使用到json_to_sheet方法将json数据转化到worksheet(表示excel文件中的一个表)中,最后导出excel表,但是列头会默认采用数据的键名。const data = [ { name: 'jzx', age: 17 }, { name: 'wmp', ...原创 2019-06-05 00:20:12 · 13695 阅读 · 1 评论 -
typescript高级技巧
用了一段时间的 typescript 之后,深感中大型项目中 typescript 的必要性,它能够提前在编译期避免许多 bug,如很恶心的拼写问题。而越来越多的 package 也开始使用 ts,学习 ts 已是势在必行。以下是我在工作中总结到的比较实用的 typescript 技巧。本文链接: shanyue.tech/post/ts-tip…01 keyofkeyof 与 Objec...转载 2019-06-12 21:17:11 · 2611 阅读 · 0 评论 -
js内存管理
内存生命周期1.分配内存2.内存使用3.内存回收js中的内存管理在很多底层语言中,分配内存和内存回收都是比较明确的,有提供方法直接操作,例如:c语言。在js中没有提供方法直接分配内存和释放内存,都是自动进行的,创建变量会为其分配内存,不再使用它们时会自动释放,也被称为垃圾回收(gc)。js的垃圾回收机制js中的垃圾回收机制主要有两种,不同的js引擎实现不同。引用计数垃圾回收界定一...原创 2019-05-31 16:08:07 · 143 阅读 · 0 评论 -
前端导出excel文件
用到xlsx和file-saver库,xslx用以转换数据对象到Blob对象中,file-saver用以在客户端保存文件。import { saveAs } from 'file-saver'import XLSX from 'xlsx'export const exportXlsx = (data, fields, fileName = 'excel') => { // b...原创 2019-05-28 13:45:41 · 1445 阅读 · 0 评论 -
https解读
http的缺点了解https之前需要先了解https产生的原因,https旨在提供更安全的http通信,众所周知,http有很多的问题。通信内容不加密通信使用明文进行通信,内容可能会被窃听:按照TCP/IP协议族的工作机制,所有的通信内容都有可能遭到窥视,即使,加密过的通信内容也是一样的,只是说加密过的通信内容,比较难的被人破解。无法验证通信方的身份http协议通信时,不会对通信方进行...原创 2019-02-16 22:52:15 · 155 阅读 · 0 评论 -
git项目commit message编写规范
feat: 新功能fix: 修补bugdocs: 文档style: 格式(不影响代码运行的变动)refactor: 重构test: 添加测试chore: 构建过程或辅助工具的变动 使用示例git commit -m 'feat: Test组件'...原创 2018-04-12 16:11:35 · 1393 阅读 · 0 评论 -
近期总结
暑假的时候的时候非常幸运的去往了一家小公司实习(本来面试过后感觉被接收的希望渺茫),公司是做react-native移动端开发的,面试全部问的都是js的一些问题,去了之后大概用了一周时间熟悉框架,慢慢的就跟着大家边做项目边学习。对于面试问的那些问题,一直感觉记得不清楚,觉得都见过,也基本用过,但是要说出完整概念啊或者完整用法就很困难,有一些就需要查阅下文档。后面空闲时间想了哈,还是应该跟熟能生巧这四原创 2017-09-09 15:42:05 · 268 阅读 · 0 评论 -
js瀑布流小demo
一:查询知识点offsetWidth,offsetHeight表示加上边框的宽度和高度offsetLeft,offsetTop表示到浏览器或者offsetParent设置的父对象的左边和上边的距离clientHeight,clientWidth表示去掉边框的高度和宽度clientLeft,clientTop表示左边框和上边框的宽度transition(css3属性): property d原创 2017-06-08 15:51:52 · 293 阅读 · 0 评论 -
js--整页滚动
一:查询事件onresize:改变窗口大小触发事件类数组对象:不是由Array构造函数所创建的,但是依然呈现出数组的行为document.getElementsByTagName()语句返回的就是一个类数组对象function代码内的arguments变量(保存传入的参数)也是一个类数组对象onwheel:元素上滚动鼠标滚轮时触发事件e.wheelDelta判断鼠标滚轮滚动方向onscro原创 2017-06-09 16:10:50 · 2030 阅读 · 3 评论 -
rem适配所有屏幕大小demo分享
前两天学习了rem的使用,下面是一个小demo,使页面能够根据屏幕大小自行增大和缩小,利用的就是rem的等比缩放~~~发现错误请告诉我,谢谢 方案一:利用css的calc函数对html元素的font-size大小进行计算,100vw是viewport视区的宽度(即浏览器内部的可视区域大小,window.innerWidth),然后可以自己设定一个全宽为多少,意味着将屏...原创 2017-09-30 18:01:18 · 2822 阅读 · 0 评论 -
js封装ajax
主要代码 用了两种方式封装,回调函数和Promise,实现都比较简单,太复杂了暂时还写不出来,知识储备还不够~~请看代码:/*回调函数解决方法*/const ajax = ( url,options={} ) => { const { data = {}, type = 'GET', success, async = true原创 2017-10-03 21:32:58 · 535 阅读 · 0 评论 -
webpack简单搭建
就计算机这些知识而言,光看是没用的,只有多动手写才能牢记,这两天又看了下webpack的配置,然后自己动手配置了下,用到的东西也不多,下面是具体的配置步骤:用到的插件和load“css-loader”,”style-loader”: 一起对css文件作处理, “extract-text-webpack-plugin”: 将css从js中分离出来,单独形成一个css文件, “html-webpa原创 2017-09-19 11:41:09 · 358 阅读 · 0 评论 -
回到顶部小demo
一:查询知识点这两个知识点以前就看过,又忘了,所以要多用啊~~box-shadow:1px 1px 1px 1px red;依次为:水平阴影的位置 垂直阴影的位置 模糊距离 阴影的尺寸 阴影的颜色text-shadow:1px 1px 1px red;依次为:水平阴影的位置 垂直阴影的位置 模糊距离 阴影的颜色二:代码<!DOCTYPE html><html> <head>原创 2017-06-11 20:22:59 · 205 阅读 · 0 评论 -
localStorage总结
前面刚刚总结了cookie的用法,这里再总结下h5的localStorage的用法。值得一提的是localStorage的存储没有时间限制。如果发现错误记得评论告诉我,谢谢~~~<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>localStorage</title> <s原创 2017-09-23 21:56:29 · 430 阅读 · 3 评论 -
前端代码规范
1.有复数结构时,要采用复数命名法;2.全部采用小写方式,以下划线分割;html3.在属性上,使用双引号,不要使用单引号;4.属性名全小写,用中划线做分隔符;5.不要在自动闭合标签结尾处使用斜线;6.列表中的条目总是放置于<ul>、<ol>、<dl>中,永远不要用一组<div>或<p>来表示;7.段落分隔符要使...原创 2017-04-18 21:19:23 · 314 阅读 · 0 评论 -
web响应式设计
首先需要加上meta标签:<meta name="viewport" content="width=device-width, initial-scale=1.0"> 用于控制视口宽度和设备宽度一样,初始缩放比例为1,如果设置其他比例,可以修改视口宽度,例如:initial-scale=.5视口宽度将变为原来的两倍 使用媒体查询media query来设置不同的屏幕应...原创 2017-07-04 19:21:02 · 378 阅读 · 0 评论 -
javaee期中考前简略只是总结(个人/很简陋)
1.JSP语法JSP标识:指令标识、动作标识1).指令标识:<%@ page 属性 %> :language、contentType、pageEncoding、import(常用)<%@ inclue file="path"%> 两个页面组合成一个页面后编译处理<%@ taglib prefix="" uri=""%>2).使用JSP脚本...原创 2017-04-15 15:37:32 · 413 阅读 · 0 评论 -
JavaScript中使用html音频对象audio
这几天模仿豆瓣音乐网页端,使用audio写了个一个网页播放器,所以将audio在js中的用法记录一下,这里是这个网页播放器的在线地址,大致功能有了,就是数据是自己手写的,功能后面再慢慢优化,可以的话再加个搜索功能,就完整了~~~现在技术还不到家首先是在js中声明一个audio对象,你可以把他添加到dom中,也可以直接设置src播放:var audio = new Audio();假如有添加到dom原创 2017-11-19 20:20:42 · 7508 阅读 · 0 评论 -
jq实现的tab小demo
一:体会虽然只是一个很小的demo,但途中却遇到很多问题,问题都很小但是却很难发现,解决过程很是恼火,偶尔灵光一闪却又想了起来,而且混淆了很多jq和原生js中的方法,分不清楚哪个是jq中的,哪个是原生js中的,有很多东西都看过,但是却又很多细节不清楚,做东西时很容易发生问题并且半天发现不了,要是有过目不忘的本领就好了~~二:查询知识点不是jq对象无法使用jq库中的方法,比如下列代码中的boxs原创 2017-06-05 13:32:24 · 1071 阅读 · 0 评论 -
JS秘技--焦点轮播图
一:查询知识点1.offset:****2.通过类名获取元素时,即getElementsByClassName(""),返回的是一个该类名元素的集合,即一个数组,即便只有一个元素拥有该类名,所有要想使用该元素,需要给数组加上索引,example:getElementsByClassName("")[0] ; (不了解很容易产生问题)3.通过 元素.style.left获取的是行内...原创 2017-06-01 15:41:19 · 351 阅读 · 0 评论 -
在wepy框架中使用echarts
echarts-for-wexin目前提供的方式是在原生小程序中的使用,直接将其中的ec-canvas作为组件在wepy的页面中使用可能会出现问题,并不能达到渲染的效果我最开始的使用方式是这样的:&amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;view class=&amp;amp;amp;amp;quot;原创 2018-08-18 11:29:11 · 4654 阅读 · 11 评论