- 博客(28)
- 收藏
- 关注
RSS订阅原创 webapck配置
### webpack配置module.exports = { // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制) 原本属性名为baseUrl【已废除】 publicPath: process.env.NODE_ENV === 'development' ? 'dzfd-web/' : '/', // 运行时...
2020-11-16 13:24:03
156
原创 Web Workers API
Web Workers API一个worker是使用一个构造函数创建的一个对象(e.g. Worker()) 运行一个命名的JavaScript文件 – 这个文件包含将在工作线程中运行的代码; workers 运行在另一个全局上下文中,不同于当前的window. 因此，在 Worker 内通过 window获取全局作用域 (而不是self) 将返回错误在专用w...
2020-11-16 11:41:28
292
原创 webScoket
webScoketimport store from '../store';import Cookies from 'js-cookie';let socket = null;let timer = null;const time = 56000; // nginx 默认60s,所以心跳时间需要 < 60000function in...
2020-11-16 11:40:54
81
原创 在线与离线状态
navigator.onLine(转载mdn)[https://developer.mozilla.org/zh-CN/docs/Web/API/NavigatorOnLine/Online_and_offline_events]navigator.onLine 是一个值为 true/false (true 表示在线， false 表示离线) 的属性。当用...
2020-11-16 11:33:29
636
原创 Canvas vs Svg
Canvas画布<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>标签通常需要指定一个id属性 (脚本中经常引用),width 和 height 属性定义的画布的大小使用 style 属性来添加...
2020-11-16 11:31:09
83
原创 全屏Api
全屏Apilet browser = ['fullscreenchange', 'mozfullscreenchange', 'webkitfullscreenchange', 'msfullscreenchange'] // 屏幕变化,用于监听esc、F11browser.forEach(eventName => { document.addEve...
2020-11-16 11:29:55
58
原创 h5 语义化标签
h5语义化标签标签描述hrader定义了文档的头部区域footer定义了文档的尾部区域nav定义文档的导航section定义页面独立的内容区域article定义页面独立的内容区域aside定义页面的侧边栏内容summary标签包含 details 元素的标题detailes用于描述文档...
2020-11-16 11:29:22
106
原创 h5拖动drag
解释了什么是源对象和目标对象后，回归前端中的拖拽API，由上面的操作我们可以得出几个函数被拖动的源对象可以触发的事件：(1)ondragstart：源对象开始被拖动(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)(3)ondragend：源对象被拖动结束拖动源对象可以进入到上方的目标对象可以触发的事件：(1)ondragenter...
2020-11-16 11:26:24
134
原创 js经典题型
1. 手写Promise、介绍Promise的特性// 简易版function myPromis(callback) { this.state = 'padding'; // 初始状态值 this.value = undefined; // resolve状态 this.reason = undefine...
2020-11-11 17:30:44
150
原创 css面试题
css面试题1. 盒模型IE盒模型 w/h = padding + border + contentW3C盒模型 w/h = content2. ::before 和 :after 中双冒号和单冒号的区别 及 伪类和伪元素的区别1. 定义不同 伪类是class类型 伪元素是Html的类型(脱离文档流)2. css2 伪类和伪元...
2020-11-11 17:26:33
80
原创 ts + redux
ts + reduxredux的三大核心{state， action， reducers}state: 整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。action: 唯一改变state的方法就是出发 activestore.dispatch({type: 'COMPL...
2020-10-30 17:46:53
432
原创 手写Promise
// 简易版function myPromis(callback) { this.state = 'padding'; // 初始状态值 this.value = undefined; // resolve状态 this.reason = undefined; // reject状态 let resolve = value => { // 保证转...
2020-10-29 20:16:50
47
原创 vue3.0变更API（持续更新中）
vue3 API 变化全局API变更和// vue3.x的main.jsimport { createApp } from 'vue'import App from './App.vue'const app = createApp(App)app.mount('#app')引入”tree-shaking”(是一种通过清除多余代码方式来...
2020-10-10 17:26:14
142
原创 java基础学习笔记
class// .java 文件会被编译器编译成.class文件执行public class name { // calss入口 public static void main(String[], args) { // 输出 System.out.println("hello word!"); ...
2020-08-06 17:18:05
65
原创 Canvas转图片解决占用前端内存问题
背景介绍公司一个项目是按省份加载数据(百度地图覆盖物–专业术语：电子围栏)，一个省份是一章Canvas图(可修改、编辑)，全国状态下加载全部数据图因为全国数据量太大(几万数据)，前端拿到数据后生成Canvas放在前端项目太浪费资源造成系统特卡。解决办法接收后台数据生成Canvas并且Canvas隐藏(隐藏是为了消除切换图片的过程，优化用户体验)将Canva...
2020-08-06 17:12:33
1221
原创 git建立自己的网站
一直想做一个人主页，有人因为购买服务器、域名、以及一系列认证维护外麻烦，所以一直未能实现。gitHub替我们解决我们这一问题，下面简单介绍一下如何创建。一：新建一个git目录，进入setting(设置页面)二：选择主页三：选择主题四：查看网址五：查看网站六：编辑主页1.将代码 git clone2. git会默认识别 .ht...
2020-04-28 16:06:05
306
原创 webpack转换成.vue文件
研究将.md文件在浏览器展示 是因为在做笔记时希望只做一份笔记 既可以自己看又可以展示在自己看又可以发布到自己的网站上 项目是 webpack + vuemarkdown-it中文网下载包cnpm install markdown-it --savecnpm install highlight.js --save解析.md文件{ ...
2020-04-28 15:27:40
162
原创 面试题
1function f() {}const a = f.prototype, b = Object.getPrototypeOf(f);console.log(a === b) // false// 解析Object.getPrototypeOf(f) // 是获取 f 函数的 原型 ===》 b === Functionf...
2020-04-17 10:28:30
48
原创 Vue Router 源码分析
Vue Router源码分析Vue Router 是一个插件 需要用到 vue.use() 挂载 首先分析一下 vue.use源码位置：vue/src/core/global-api/use.jsexport function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function...
2020-04-13 17:11:51
149
原创 统一处理连续点击按钮重复http请求问题
axios 拦截重复请求一直被连续点击一个按钮触发多次Http请求而困扰，想要统一处理这类问题通过 new axios.CancelToken() 来注销重复请求思路1. 在axios拦截器中拦截发出的每条http请求并缓存起来， 判断是否重复2. 在axios拦截器中拦截响应后的http请求，清除缓存，保证发出的请求不会去缓存数据重复3. 【重点...
2020-01-03 15:47:31
429
原创 vueCli3 vue.config.js 配置
vueCli3 vue.config.js 配置const CompressionWebpackPlugin = require('compression-webpack-plugin');const compress = new CompressionWebpackPlugin({ filename: info => { ...
2019-12-31 17:02:52
82
原创 createElement （创建Vnode）
createElementVue.js 利用 createElement 方法创建 VNode，它定义在 src/core/vdom/create-elemenet.js 中：export function createElement ( context: Component, tag: any, data: any, childre...
2019-11-05 11:41:52
1563
原创 new vue（）发生了什么
一：this._init()合并配置，初始化生命周，初始化事件中心，初始化渲染，初始化data、props、computed、watcher 等等二：$mount() 挂载> vue 不能挂载在 body html 上> 判断有无 render 没有将 el template 转化成 render 利用compileToFunctions [...
2019-11-05 10:41:10
78
原创 computed 和 watch
computed计算属性的初始化是发生在 Vue 实例初始化阶段的initState函数中它的源码定义在src/core/instance/state.js中执行了if (opts.computed) initComputed(vm, opts.computed)核心方法 在渲染Computed watch 所在模板时会渲染到 计算属性会触发c...
2019-09-30 10:44:00
63
原创 nextTick 解析
nextTick是 Vue 的一个核心实现，在开发过程中会遇到在声明周期中没有获取到及时更新的值或Dom,我们会使用nextTick，将nextTick(callBack)放到异步任务队列中在下主线程任务执行完成后再去执行。主要涉及以下知识点1. JS 的运行机制。2. 宏观任务 macro task3. 微观任务micro task一：J...
2019-08-28 15:17:21
199
原创 压缩图片工具
本文转载：https://blog.csdn.net/qq_41761551/article/details/81026184第一：Tinypng地址：https://tinypng.com/这款工具我实在是太喜欢了，经常用到，最大限度的做到对画质无损的进行压缩这个工具他同时支持对Jpg和Png的压缩。Tinypng也支持Wordpress和mage...
2019-08-15 15:35:25
93
原创 Vue 响应式对象
分析Vue响应式原理一：响应监听我们在 new Vue() 时会进入 init()中这里分别对 props (数据监听)methods (判断 方法名 是否符合规则 将方法挂载到 实例vm上)data (数据监听)computed 和 watch (涉及的东西比较多 下一章在进行分析)props(数据监听)关键点有三1. const ...
2019-08-15 14:21:10
396
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人