前端
关注
分享
扫一扫
渣渣前端
公众号：小码农的成长之路
展开
-
electron上传图片
使用elementui组件上传图片渲染进程<template> <div class="hello"> <el-upload class="avatar-uploader upload" action="" :show-file-list="false" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar原创 2020-10-19 17:32:41 · 1729 阅读 · 0 评论 -
vue3实现虚拟列表
vue3.0发布了，刚好学习一下，仿照网上案例写了一个虚拟列表<template> <div class='virtual' @scroll="scroll" :style="{height:400+'px'}"> {{itemHeight}} <div class="list" :style="{height:dataLengh*itemHeight+'px'}"> <ul :style="{'原创 2020-09-29 23:58:34 · 3272 阅读 · 0 评论 -
jest学习笔记
jest测试异步请求function fetchData(fn){ axios.get('/data').then(data=>{fn(data)}) }test('异步请求',(done)=>{ fetchData(data=>{ expect(data).toEqual({success:'xx'}) done() }) })//如果返回是promise对象，可以用catch或者thenfunction fn(){原创 2020-07-14 20:33:18 · 393 阅读 · 0 评论 -
自定义electron窗口
首先要在主进程中将窗口关闭，即在BrowserWindow中设置frame为false，然后在App.vue中添加对应的窗口图标<template> <div id="app"> <div class="titleBar"> <div class="title"> <div class="logo"> <img src="@/assets/logo.png">原创 2020-07-13 09:25:33 · 2168 阅读 · 0 评论 -
IndexedDB的一些操作
indexedDB是一个事务型数据库系统，同时也是基于javascript的面向对象的数据库，它可以存储大量结构化数据首先是打开数据库var request=window.indexedDB.open(this.name)//打开数据库request.onsuccess=function(event){ this.db=request.result }//获取数据库实例第一次创建数据库时会触发他的upgradeneeded方法request.onupgradeneeded =原创 2020-06-27 14:35:47 · 706 阅读 · 0 评论 -
websocket学习笔记
websocket是h5新出的支持全双工的，持久化的协议，它也支持服务器端推送。通常在客户端是通过new创建一个websocket对象var socket=new WebSocket(url,[protocols])不是所有的浏览器都支持websocket协议，它接收两个参数，第一个是通信的url，第二个是协议数组，协议可以是注册协议（已根据RFC6455，向注册协议的正式管理实体IANA正式注册的标准协议），开放协议（广泛使用的标准化协议，如XMPP ），自定义协议。ws协议有四种状态，通原创 2020-06-20 17:09:53 · 940 阅读 · 0 评论 -
graphql查询
首先下载express，express-graphql和graphqlvar express = require('express');var graphqlHTTP = require('express-graphql');var { buildSchema } = require('graphql');var schema = buildSchema(` type Account{ name:String } type Query {原创 2020-06-17 23:18:01 · 507 阅读 · 0 评论 -
js的caller和callee
js的callee是arguments的一个属性，指向这个函数本身function fs(){ console.log(arguments.callee) } fs()打印值/*ƒ fs(){ console.log(arguments.callee) }*/caller是指向调用此函数的外部函数function fs(){ fn() } function fn(){原创 2020-06-17 13:05:39 · 429 阅读 · 0 评论 -
移动端事件总结
1.触摸事件touchstart:当手指触摸屏幕时触发touchmove:当手指在屏幕上滑动触发touchend:当手指离开屏幕时触发touchcancel:当系统停止追踪触摸时触发事件触发时会传递给函数一个Event对象，事件相关信息都会存储在event，event包含的信息主要有：touches:表示当前跟踪的触摸操作touch对象的集合targetTouches:当前事件目标上touch对象的集合changeTouches：表示至上次触摸发生改变的touch对象的集合原创 2020-06-08 12:26:13 · 375 阅读 · 1 评论 -
vue使用require.context配置路由
使用require.context自动配置路由首先在components文件夹下新建一个pages文件夹，然后在pages下面新建两个vue文件mode.index.vue和mode.show.vue，在components文件夹下新建一个index.route.js文件//index.route.jsvar r=require.context('./pages',true,/.vue/)var arr=[]r.keys().forEach(element => { var k原创 2020-06-07 23:39:12 · 1097 阅读 · 0 评论 -
server sent event
h5提出的server sent event支持服务端数据发生改变时向客户端发送数据，而不用使用ajax长轮询来请求数据。Server sent event技术有几个优点：①轻量，相对简单②单向传送数据③支持http协议④默认支持断线重连⑤自定义发送数据类型来看个例子，首先新建一个see.html文件，然后创建一个EventSource对象，监听服务端发送的数据<!DOCTYPE html><html lang="en"><head> <met原创 2020-06-02 17:19:03 · 742 阅读 · 0 评论 -
react之ref
react中ref是为了获得组件或dom元素的引用，ref不能赋值给函数型组件，react16.3之前有两种使用ref的方式，一种是string，还有一种是回调函数的形式//string形式class Father extends Component{ constructor(){ super() } componentDidMount(){ console.log(this.refs) } render()原创 2020-05-12 09:39:11 · 348 阅读 · 0 评论 -
react插槽Protal
react新出的react.createProtal可以将子组件挂载到任意的dom元素下面，还可以通过子组件来修改父组件的状态，react.createProtal(child,container),child是任何可渲染的react子元素，container是任意的dom元素，下面就看看这个例子//父组件 class Head extends Component{ constructor(props){ super(props) this.state = {原创 2020-05-11 23:18:52 · 429 阅读 · 0 评论 -
vue路由
vue路由分为3种，有hash模式，history模式和abstract模式，可以在路由对象中设置mode改变模式，①abstract主要用在服务端。②hash模式url会携带一个#，请求的时候该#及其后面的字符串不会发送给服务器，改变hash不会重新加载页面，可以通过onhashchange监听路由的改变，hash变化会被浏览器记录，浏览器的前进和后退都能用。③history模式有几...原创 2020-05-03 23:52:35 · 281 阅读 · 0 评论 -
vue封装环形进度条组件
仿照elementui封装了一个环形进度条组件//progress.vue<template> <div> <canvas width="130" height="130" ref="canvas"></canvas> </div></template><script>export d...原创 2020-05-02 00:38:22 · 758 阅读 · 0 评论 -
vue父子组件传值
vue父子组件传值其实有挺多种方法的，下面就来介绍一下1.props传值//父组件<child text="xx">//子组件props:{text:{type:String,required:true,//是否必传default:"yy"//默认值}}//或者使用数组，不加类型校验props:['text']2.$emit传值//父组件<...原创 2020-04-20 21:41:26 · 254 阅读 · 0 评论 -
输入一个url发生了什么
这是一道常见的面试题，下面就来说一下：1.首先是dns的域名解析，浏览器会先查找自身的缓存记录，看有没有和url对应的ip地址，如果有返回，如果没有或者已经过期，则会去hosts文件中找，widows是在在C:\Windows\System32\drivers\etc下面，操作系统缓存可以通过ipconfig/displaydns命令查看。如果操作系统或者hosts文件都没有记录或者记录已经过...原创 2020-04-20 14:37:48 · 399 阅读 · 0 评论 -
localstorage引发的思考
首先来说一下localStorage是本地存储，容量大小为5m，缓存期限是无限久，即使浏览器关闭它也还存在，除非手动删除。下面用它来模拟cookie的功能，让它也具有过期时间 function save(id,data){ var date=new Date() var time=24*1000*60*60; localStorage.set...原创 2020-04-18 22:43:42 · 390 阅读 · 0 评论 -
css字体特效
css属性中有一个background-clip，用于设置绘图的背景，它的值可以是content-box,padding-box,border-box,text,其中text就是把颜色绘制到文字上，还有一个属性是text-fill-color，它也是设置对象中文字的填充颜色，和color作用一样，它的优先级比color大，还有就是他的兼容性不太好，只适用于谷歌。靠这两个属性我们就可以设置好看的字体...原创 2020-04-14 19:54:03 · 849 阅读 · 0 评论 -
移动端画1px线
移动端的像素比（devicePixelRatio）是指手机的物理像素和逻辑像素的比值，物理像素又称设备像素，一个物理像素是显示器（手机屏幕）上最小的物理显示单元。逻辑像素，也可以认为是计算机坐标系中的一个点，这个点代表一个可以由程序使用的虚拟像素（css像素），然后相关系统转换为物理像素。如果我们设置了边框为1px，那么在像素比为2的手机上边框就会显示为2px。下面来说一下如何处理首先可以使用...原创 2020-04-12 16:58:07 · 533 阅读 · 0 评论 -
半小时上手前端测试框架jest.js
首先初始化npm，然后安装jest.js，可以用npm install jest-cli,也可以是yarnaddjest-cli，我使用的是npm，然后编写测试函数。例如//sum.jsfunction sum(a,b){ return a+b;}module.exports=sum//sum.test.jsconst sum=require('./sum');...原创 2020-04-11 14:34:24 · 648 阅读 · 0 评论 -
react之dangerouslySetInnerHTML
在react中为了不让别人注入恶意的代码，它都不会自动识别带有标签的字符串，例如这样export default class Test extends Component{ constructor(props){ super(props) this.state={html:'<div>213</div>'} } ...原创 2020-04-11 00:17:53 · 788 阅读 · 0 评论 -
base64编码原理
我们知道在ascii码表中，对应的符号都有相应的ascii码值来表示，例如A是65，a是97，base64也有对应的编码表，它的符号是A-Z,a-z,0-9,+和/组成。加起来一共是64个。一个字节是8bit，base64编码时会先选择3个字节，把他们转成二进制码，就是24bit，然后它会把这三个字节分成四组，每组6bit，然后在每组前面加上两个0，再转成十进制数，然后在base64中寻找对应的符...原创 2020-04-10 23:41:43 · 300 阅读 · 0 评论 -
vue的keep-alive
vue的<keep-alive>主要是对组件进行缓存，在跳转到其他页面再跳回来时组件还是一样的状态，避免组件重新渲染，它是一个抽象组件，不会渲染到页面。下面来看下应用//index.jsexport default new Router({ routes: [ { path: '/', name: 'HelloWorld', co...原创 2020-04-09 00:48:52 · 531 阅读 · 0 评论 -
js装饰器
浏览器目前还不支持直接使用装饰器语法，需要下载几个包：@babel/core @babel/preset-env @babel/cli @babel/plugin-proposal-decorators,然后再新建一个.babelrc文件{ "presets": ["@babel/preset-env"], "plugins": [["@babel/plugin-propos...原创 2020-04-06 19:00:23 · 288 阅读 · 0 评论 -
手写JSON.stringify和JSON.parse
window.JSON={ parse:function(str){ return eval('('+str+')'); }, stringify:function(str){ if(typeof str=='number'){ return String(str) } ...原创 2020-04-03 16:19:12 · 725 阅读 · 0 评论 -
手写webpack的css-loader
.box{width:100px;height:100px;background-image:url('./public/img.jpg')}webpack无法直接找到public文件夹，需要将url里面的路径转为require引入的形式function loader(source){ let reg=/url\((.+?)\)/g let pos=0; ...原创 2020-03-24 09:17:56 · 537 阅读 · 0 评论 -
css画图形
<style> //等腰直角三角形 .tx{width:0; height:0; border-style:solid; border-width:20px; border-color: violet transparent transparent transparent; }//等边三角形...原创 2020-03-11 10:00:50 · 222 阅读 · 0 评论 -
react封装日历组件
import React, { Component } from 'react'import './calendar.css'export default class Form extends Component { constructor(props) { super(props) this.state = { year: [...原创 2020-03-07 22:39:33 · 2254 阅读 · 0 评论 -
canvas字母喷泉
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-02-23 00:24:18 · 303 阅读 · 0 评论 -
canvas压缩图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-02-15 20:05:39 · 221 阅读 · 0 评论 -
简易版redux实现
redux其实只有几个重要的api，getState，subscribe和dispatch，getState用来获取状态，subscribe监听状态的改变，dispatch派发事件改变状态，下面就来看下。首先是createStore，它接收三个参数，分别是reducer函数，初始状态值，还有就是中间件function createStore(reducer,[initialState],en...原创 2020-02-08 16:32:08 · 348 阅读 · 0 评论 -
useContext,useReducer构建redux
useContext和useReducer是react16.8之后新出的，用这两个可以构建一个redux，下面来看下import React,{createContext}from 'react'export default Context=createContext()//reducer函数function reducer(state=0,action){ switch(act...原创 2020-02-08 00:52:28 · 569 阅读 · 0 评论 -
js下载文件
download('文件下载','a.txt') function download(str,name){ var blob=new Blob([str],{type:'application/msword'}); var a=document.createElement('a');...原创 2020-02-07 23:28:12 · 365 阅读 · 0 评论 -
react实现淡入淡出
首先要下载一个库，即npm ireact-addons-css-transition-group,接下来看代码//Pic.jsimport React,{Component} from 'react'import Img1 from '../../image/1.jpg'import Img2 from '../../image/2.jpg'import Img3 from '....原创 2020-02-04 22:39:59 · 3225 阅读 · 0 评论 -
js实现无缝轮播
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-31 15:13:07 · 244 阅读 · 0 评论 -
h5离线缓存
所谓离线缓存，就是在断网的情况下，可以从缓存中获取资源，而不用再向服务器请求资源<!DOCTYPE html><html lang="en" manifest="demo.appcache"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...原创 2020-01-19 23:07:01 · 314 阅读 · 0 评论 -
vue封装日历组件
//根组件<template> <div class="hello"> <Time v-model="value"></Time> </div></template><script>import formate from '../utils/formate'import Time ...原创 2020-01-18 21:29:56 · 771 阅读 · 0 评论 -
cvte一面凉经
1.手写冒泡排序 for(var i=1;i<arr.length;i++){ for(var j=0;j<i;j++){ if(arr[i]<arr[j]){ var temp=arr[i] arr[i]=arr[j] ...原创 2020-01-15 00:19:41 · 297 阅读 · 0 评论 -
js手写call，apply，bind函数
首先是手写call函数，call函数第一个参数是this要指向的对象，第二及后面的参数就是原函数的参数Function.prototype.myCall=function(context,...args){ if(!typeof this==='function'){return;}//判断是否是函数调用 context=typeof context===...原创 2020-01-10 22:03:34 · 349 阅读 · 0 评论