- 博客(20)
- 收藏
- 关注
RSS订阅原创 WebPack 图片处理
WebPack 图片处理前言：在网页开发的过程中，经常需要处理各类图标。以前我们会使用png/jpg图片，压缩完转base64或直接使用。但是这样会出现一个重要的问题，就是我们的图标是模糊的，放大一定系数之后，这种缺陷会越发的明显。有鉴于此，取而代之的是 iconFont 以及 SVG 等技术。本文会比较各类图片处理技术，各自的使用场合，并说明如何结合 Webpack 使用它们进行网页开发。PNG / JPG 等像素图片格式使用webpack将切完的 PNG/JPG 等像素图片压缩后（tin
2020-10-22 11:38:21
1080
原创 深度解析 Vue 响应式原理(源码级)
vue中的响应式可以理解为：当你的状态改变时，状态是如何在整个系统的更新中反映出来的，在我们的特定上下文中，变化的状态如何反映到dom的变化中。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。
2020-06-14 15:24:01
500
原创 万字总结：Javascript垃圾回收机制
一、为什么要关注内存1、防止页面占用内存过大，引起客户端卡顿，甚至无响应2、Node使用的也是V8，内存对于后端服务的性能至关重要。因为服务的持久性，后端更同意造成内存溢出Chrome V8 简称 V8，是由谷歌开源的一个高性能 JavaScript 引擎。该引擎采用 C++ 编写，Google Chrome 浏览器用的就是这个引擎。V8 可以单独运行，也可以嵌入 C++ 应用当中。和其他...
2020-04-26 19:22:52
564
原创 webpack环境变量与vue-cli3设置环境变量
1、在业务代码中使用环境变量（DefinePlugin）DefinePlugin的正确用法DefinePlugin中的每个键，是一个标识符或者通过.作为多个标识符。如果value是一个字符串，它将会被当做code片段如果value不是字符串，它将会被stringify(包括函数)如果value是一个对象，则所有key的定义方式相同。如果key有typeof前缀，它只是对typeof...
2020-03-05 15:30:04
3056
原创 Safari调试iOS web页面
Safari调试iOS web页面前言：移动端web页面调试一直是前端的一大痛点，所幸的是，在iOS调试方面，可以利用mac safari去调试对应的web页面。本文将简要介绍如何使用mac safari调试iOS web页面。Safari设置打开Safari偏好者设置，选中“高级菜单”，在页面最下方选中“在菜单中显示开发菜单”的复选框，这样设置完毕就能在Safari菜单中看到开发菜单了...
2020-02-29 13:05:22
4727
原创 Chrome DevTools移动端调试
Chrome DevTools移动端调试本文介绍如何使用Chrome开发者工具来进行安卓移动端web页面调试，主要内容引自移动端Web开发调试之Chrome远程调试(Remote Debugging)。基础知识适用范围目前安卓远程调试支持在所有操作系统（Windows,Mac, Linux, and Chrome OS.）中调试。支持的调试功能点有：调试web站点的页面调试...
2020-02-29 13:04:44
2501
1
原创 移动端模拟开发者工具Eruda
移动端模拟开发者工具Eruda前言：Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。github地址： https://github.com/liriliri/eruda功能清单按钮拖拽，面板透明度大小设置Console面板：捕...
2020-02-29 13:03:41
962
原创 cookie浅谈
前言这段时间在学习关于web安全方面的东西，其中的CSRF（Cross-site request forgery）跨站请求伪造攻击的关键就在于恶意网站可以设法伪造带有正确 cookie 的 HTTP 请求，于是就产生了一个疑问，cookie不是有跨域限制吗？为什么攻击者可以跨域携带被攻击者网站的cookie呢 ？带着这个问题，我查找了一些资料，解决了我的疑惑。希望能带给大家一些帮助。一、coo...
2020-02-13 17:16:06
374
原创 JSBridge原理与实现分析
JSBridge原理与实现分析前言：本文讲述JSBridge相关原理以及实现方面的知识，主内容整理自网络。Hybrid App简介hybrid app是一种将native app和web app结合起来的一项app开发策略。众所周知，native app开发周期长，审核严格，同时更新较为繁琐，但用户体验非常好；而web app开发周期比较短，版本更新迭代都非常快速，但是用户体验较差。它们...
2020-02-09 11:48:06
4045
转载 领域驱动设计在前端中的应用
领域驱动设计在前端中的应用垃圾桶现象在开始本篇文章前，我给读者们分享一个很考验人性的有趣现象，在公司洗手间的洗漱台旁边，放置了一个垃圾桶，每次我洗完手，用纸巾擦干手后，将其扔进垃圾桶，但是偶尔扔不准会扔到垃圾桶外面。一般情况下，我会将其捡起，再放入垃圾桶，心里想着：“不能破坏这么干净的环境呀”。但是，当垃圾桶周边有很多别人没扔进去的餐巾纸时，我就不会那么愿意将自己没扔进去的餐巾纸再捡起来扔...
2019-07-29 09:55:34
492
原创 前端性能优化总结
文章目录一、常用网站性能优化指标1.1、网页的资源请求与加载阶段1.2、网页渲染阶段1.3、JavaScript脚本的执行速度性能卓越的网站，往往可以给访问者留下良好的印象，因此更容易积累庞大的用户和受众群体，这是关乎网站成败的关键因素之一。本文将从前端开发者的角度出发，审视和探讨一些基本的网站性能优化思想，以及在实战中的应用。一、常用网站性能优化指标1.1、网页的资源请求与加载阶段1...
2019-01-11 11:11:40
284
原创 移动端开发之px2rem
less实现@baseWidth: 720px; //设置标注图宽度.px2rem(@atr,@px,@base-width:0) when( @base-width > 0){ @{atr}: unit(@px*10/@base-width , rem);}.px2rem(@atr,@px,@base-width:0) when( @base-width = 0){ @...
2019-01-05 16:13:37
836
原创 移动端适配方案
方案一： /** * @desc 设置基准适配尺寸大小 */ function adp() { var width = docEl.clientWidth || win.innerWidth; width = width > 1000 ? 1000 : width; docEl.style.fontSize = width / 10 + "px";...
2019-01-05 16:03:59
140
原创 浅谈koa跨域问题及koa2-cors中间件
浅谈koa跨域问题及koa2-cors中间件什么是跨域跨域请求资源的方法koa中如何设置跨域koa2-cors应答跨域请求实现什么是跨域由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况：网络协议不同，如http协议访问https协议。端口不同，如80端口访问8080端口。域名不同，如qianduanblog.com访问ba...
2018-11-02 16:28:25
13429
原创 JSON Web Token实战篇——基于koa开发WEB后台认证机制
今天来说说JSON Web Token，JSON Web Token（缩写 JWT）是目前最流行的跨域认证解决方案。关于它的介绍，可以看阮一峰的这篇文章JSON Web Token 入门教程工作流程这里直接使用官网的图知道了JWT的原理后，我们来看一下如何基于koa开发web后台认证机制：这里，我们使用了jsonwebtoken模块，需要在项目中添加jsonwebtoken模块npm ...
2018-11-01 15:09:22
3748
原创 elementUI+koa实现图片上传功能
elementUI中的上传组件为：大家可以先在自己的项目中运行一下饿了么上传组件<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleR...
2018-10-31 16:31:11
2324
2
原创 JavaScript中的深拷贝和浅拷贝方法总结
在日常的代码书写中常常会遇到拷贝问题，今天我们就来总结一下常用的浅拷贝和深拷贝都有哪些实现方法。浅拷贝常用方法：slicevar arr1=[1,2],arr2=arr1.slice();console.log(arr1);//[1,2]console.log(arr2);//[1,2]concatvar arr1=[1,2],arr2=arr1.con...
2018-05-05 17:31:15
686
原创 移动端web开发调试工具——Vorlon.JS上手教程
问题提出：在移动端页面的日常开发中常常会碰到这样一个问题，页面在Chrome的Device模式下显示正常，但在移动端浏览器或者内嵌到APP里就会出现样式问题或者Js代码问题，但是移动端上没有类似Chrome的开发者调试工具，只能通过尝试修改，重复发布版本来检查问题，或者写一大堆alert弹窗来调试。这种方法不但繁琐，而且收效甚微。解决方案：Vorlon.js可以帮助开发者加载、检查...
2018-04-19 09:29:09
7378
原创 页面loading效果实现代码
有些页面加载起来比较慢，为了加强用户体验效果，所以一般都会做一个页面加载等待的提示，页面加载完成后消失。 下面提供一个可以拿来即用的方案。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document&l
2018-03-29 11:10:03
4397
转载 jquery双击事件
在开发过程中经常会遇到使用双击事件或者避免短时间内连续触发单击事件的逻辑。这里介绍一下对类似问题的处理方法。一、jquery的dblclick事件一个DOM元素，如：div，既绑定了 click 事件，又绑定了 dblclick 事件，这两个事件分别要做独立的事情。事件处理上没有冲突，都可以各自 完成各自的操作。双击的时候虽然是执行了 dblclick 事件，但是在这之前，也执行了 ...
2018-03-08 14:47:32
37118
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人