- 博客(55)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 vue随机校验码
验证码组件<template> <div class="canvas-box"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight" @click="refreshCode" ></canvas> </div></template><script>expor.
2020-09-01 14:30:21
323
原创 js File类型本地存储与读取
首先将File文件转为base64利用FileReader的读取功能，完成后会触发onload事件，result属性即为base64编码由于得到的base64编码基本会超过5M，所以需要对localStorage进行额外操作，可以用localforage：优先使用IndexedDB存储，如果不支持，使用WebSQL，浏览器还不支持，使用localStorage下载：https://github.com/localForage/localForage/releases// file为Fi
2020-08-04 09:08:42
5620
1
原创 浏览器缓存
缓存分为强缓存和协商缓存：一、强缓存对于强缓存，浏览器在第一次请求的时候会直接下载资源，并缓存在本地，接下来请求的时候，直接使用本地的缓存二、协商缓存对于协商缓存，浏览器在第一次请求的时候会直接下载资源，并缓存在本地，记录下缓存标识与时间。重复请求向服务器发送缓存标识与最后的缓存时间，服务器端进行校验，如果没有过期则使用缓存。协商缓存的几个属性：1、Expires：服务...
2020-02-21 09:35:24
259
原创 react生命周期
当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：constructor()：组件挂载之前，初始化props、state static getDerivedStateFromProps()：render之前调用，返回null或对象更新state render()：dom渲染时 componentDidMount()：组件挂载到页面之后，可以添加订阅当组件的 pro...
2019-11-04 22:31:38
196
原创 webpack优化
1、对于一些静态资源进行cdn加载externals: { echarts: 'echarts', vue: 'Vue', 'vue-router': 'VueRouter', 'vuex':'Vuex'}然后通过标签方式引入<script src="https://cdn.bootcss.com/vue/2.6.10/vue...
2019-09-30 13:53:26
366
原创 vue生命周期
vue在初始化过程中，会有生命周期钩子，允许在执行各个流程过程中，插入一些代码，来实现自己的逻辑initLifecycle(vm)initEvents(vm)initRender(vm)callHook(vm, 'beforeCreate')initInjections(vm) // resolve injections before data/propsinitState(vm)...
2019-08-26 08:27:40
169
原创 vue中使用typescript遇到的坑
1、在Vue原型或window上添加属性declare module 'vue/types/vue' { interface Vue { int: any }}declare global { interface Window { globalConfig: any }}2、调用$refs上的某个方法public $refs!: { ...
2019-08-16 16:25:21
4101
原创 JavaScript技巧
记录下工作中使用JavaScript的心得：1、Object.freeze可以冻结对象，移除setter和getter属性，只需单向绑定的时候可用 在vue中还可以通过在beforeCreate中给this添加属性实现单向绑定2、reduce可以按某种规则将数组转换成其他类型let list = [ { id: 1, name: 'A', parentId:...
2019-06-13 17:35:12
188
原创 css动画GPU硬件加速与will-change
最近在做可视化项目用到了大量动画，发现页面很卡，就想到用硬件加速来优化@keyframes testAnim { from { top: 0; //1 left: 0; //1 transform: translat...
2019-05-29 16:01:00
718
原创 柯里化、反柯里化
柯里化，可以理解为逐渐接收部分参数，最后再一起求值的过程。比如计算一些天一共工作的时间，可以每天将时间相加：var num = 0function addTime(val = 0) { return num += val}这样每次累加当然没问题，但数据量很大的话会耗费很多性能可以每天记录时间，最后再累加let addTime = (function addTim...
2019-04-11 16:30:31
229
原创 vue部分原理
vue数据双向绑定是数据劫持结合发布订阅模式的方式实现的。首先要对数据进行劫持监听，设置一个监听器observe用来监听所有属性。如果属性变化了，就通知订阅者watcher是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节...
2019-04-08 09:39:27
190
原创 JavaScript几个重要概念
1、执行上下文：JavaScript代码被解析和执行时所在环境。全局执行上下文：只有一个，this指向浏览器全局对象window函数执行上下文：无数个，只有在函数被调用后才会被创建，每调用一次函数都会创建一个新的变量对象：在函数被调用，但未执行的时刻被创建。定义了执行上下文的所有变量、函数、函数参数列表，函数执行后变量对象会变成活动对象AO2、变量：基本类型（Null、Undefi...
2019-04-04 15:08:13
313
原创 vue diff算法
一、virtual dom将真实dom数据结构通过js对象以树状图形式模拟出来<div> <p>123</p></div>var Vnode = { tag: 'div', children: [ { tag: 'p', text: '123' } ]};二、model发生变化时...
2019-04-02 16:19:53
353
原创 typescript
JavaScript由于自身的弱语言类型，使用起来比较灵活如果是大型项目并且多人协作开发的时候，一些公共方法或接口，对接起来十分麻烦1、参数类型没有校验，不清楚传什么类型的值2、接口文档不规范，要读代码才知道传什么值3、接口文档规范，但公共库里有大量处理类型的代码这种情况，就需要typescript来进行强校验typescript版axioshttps://github...
2019-04-02 09:49:02
122
原创 animation动画几种效果
1、圈无线向外扩散，难点是要补充最里层的圈，让其透明度为0时回到最初位置，再显现出来，达到视觉上的无缝链接标题@keyframes rotate1 { 0%{ transform: scale(1); opacity: 1; } 16.7%{ transform: scale(1.4); opacity: 0.8; } 33.3%{ ...
2018-10-19 16:09:02
5897
原创 js深拷贝，不包括原型链
1、利用JavaScript值和JSON字符串的相互转换const new = JSON.parse(JSON.stringify(old))2、利用递归来实现每一层都重新创建对象并赋值 function copy(val) { const result = Object.prototype.toString.call(val) === '[objec...
2018-10-19 15:48:02
815
原创 element修改源码
进入element文件夹，packages文件夹就是我们要修改源码的目录文件夹修改完执行npm run dist生成lib文件夹替换element-ui中的lib文件夹
2018-09-12 19:41:46
862
原创 vue proxyTable跨域
config/index.jsproxyTable: { '/api': { //使用"/api"来代替apiconfig target: 'http://baidu.com', //请求原地址 changeOrigin: true, //允许跨域 pathRewrite: { '^/api': '' //路径重写 } }...
2018-09-08 16:26:29
312
原创 基于类封装axios
import Router from 'vue-router'import Axios from 'axios'import { getToken, clearToken } from './auth'export default class MyInterface { static fetch = (url, method = 'get', data = {}, isMessa...
2018-09-08 16:20:47
499
原创 vue数据导出Excel
一、需要安装三个依赖： npm install -S file-saver xlsx npm install -D script-loader二、项目中新建一个文件夹：（vendor）里面放置两个文件Blob.js和 Export2Excel.js，下载http://xiazai.jb51.net/201708/yuanma/Ex...
2018-08-20 20:51:42
600
原创 vue动态改变数组中对象的属性，视图不刷新
vue官方的原文：由于 JavaScript 的限制， Vue 不能检测以下变动的数组：当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue当你修改数组的长度时，例如： vm.items.length = newLength而其实是由于性能问题，vue数组的变化没有完全变成响应式。this.data[index].isTrue= tr...
2018-08-14 20:45:15
4103
原创 ES6重要语法
① map遍历1、创建map实例var map = new Map([['one',1], ['two', 2], ['three', 3]]);2、map遍历var users = [ {name: "zhang", "email": "zhang@email.com"}, {name: "jiang", "email": "jiang@email.com"},
2018-07-04 11:14:24
200
原创 gulp监听页面及压缩
文件目录package.json{ "name": "test", "version": "1.0.0", "description": "This is for study gulp project !", "homepage": "", "devDependencies": { "del&
2018-06-28 15:59:31
392
原创 使用google地图与baidu地图
<div id="itemMap" style="width:100%;min-height: 412px; margin:30px 0px"></div><script type="text/javascript"> function initMap() { var uluru = {lat: 50.849981, lng: -113...
2018-06-22 10:37:49
377
原创 使用 superagent 与 cheerio 完成简单爬虫
app_new.jsvar express = require('express');var cheerio = require('cheerio');var superagent = require('superagent');var fs = require('fs');var request = require('request');var fileDir = "./data.j...
2018-06-15 13:35:33
353
原创 使用FormData对象添加字段方式上传文件
<input type="file" id="file">var formData = new FormData();formData.append('file',$('#file')[0].files[0]);$.ajax({ url: '', type: 'POST', cache: false, data: formData, proce...
2018-06-14 17:28:23
4956
1
原创 eclipse python爬虫环境配置
下载python安装JAVA JDK下载eclipse安装pydev插件配置解释器Window > Preferences > Pydev安装beautifulsouppip3 install beautifulsoup4
2018-06-08 15:18:51
887
原创 jquery lazyload
<script src="js/jquery-1.11.0.min.js"></script><script src="js/jquery.lazyload.js"></script><img class="lazy" data-original="img/1.jpg"><im
2018-06-05 16:42:08
121
原创 vue中引入vux
<1>. 在项目里安装vux?1npm install vux --save<2>. 安装vux-loader （这个vux文档似乎没介绍，当初没安装结果报了一堆错误） ?1npm install vux-loader --save<3>. 安装less-loader （这个是用以正确编译less源码，否则会出现 ' Cannot GET / '）1npm i...
2018-06-04 13:51:15
945
原创 js判断各种浏览器内核
var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') >...
2018-06-01 10:52:00
10085
原创 github项目开发步骤
fork 项目git clone fork后的项目git remote add masterOrigirn git@github.com:orientationsys/CANP.git 添加主仓库git fetch masterOrigirn 拉主仓库最新代码git merge masterOrigirn/master 合并主仓库master分支代git checkout master 切换到主分...
2018-05-24 16:45:02
259
原创 vue图片左右滑动及手势缩放
引入vue-awesome-swiperimport 'swiper/dist/css/swiper.css';import { swiper, swiperSlide } from 'vue-awesome-swiper';components: { swiper, swiperSlide,},data() { return { swiperOption: { ...
2018-05-07 08:26:40
8633
5
原创 vue图片拖拽
<img ref='btnImg' class="btn-move" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="slideEffect"> </img>data:function(){ return {isShow:false, sta...
2018-04-28 11:54:24
2648
原创 微信小程序实现底部加载
使用组件scroll-view<scroll-view scroll-y="true" bindscrolltolower="load" class="scroll-loading" style="height:{{windowHeight}}px;"> <view class="projectList" wx:for="{{projectList}
2018-04-18 16:06:19
6037
原创 微信小程序利用promise处理异步请求
小程序已经支持Promise了，可以直接使用不过，小程序的API的参数格式都比较统一，只接受一个object参数，回调都是在这个参数中设置，所以，这为了统一处理提供了便利，写一个工具方法，来完成这样的工作首先需要引用一个叫bluebird.js的文件；进入bluebird官网下载：然后再写一个JS，里面写工具方法：下面是prom.jsvar Promise = require('./bluebir...
2018-04-16 16:30:18
3741
原创 使用infinite-scroll-disabled在vue中下拉加载数据
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="80" infinite-scroll-throttle-delay="200">选项选项描述infinite-scroll-disabled如果该属性的值为true，则将禁用无限滚动。infinite-...
2018-04-15 10:23:23
9295
原创 微信小程序
WXML1、列表渲染<view wx:for="{{array}}"> {{item}} </view>2、条件渲染<view wx:if="{{condition== true}}"> WEBVIEW </view><view wx:elif="{{view == 'APP'}}"> APP <
2018-04-11 17:48:35
201
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人