- 博客(21)
- 收藏
- 关注
RSS订阅原创 通过前端方法实现水印加密
为了防止信息泄露或知识产权被侵犯，在web的世界里，对于页面和图片等增加水印处理是十分有必要的，水印的添加根据环境可以分为两大类，前端浏览器环境添加和后端服务环境添加，简单对比一下这两种方式的特点：前端浏览器加水印：减轻服务端的压力，快速反应安全系数较低，对于掌握一定前端知识的人来说可以通过各种骚操作跳过水印获取到源文件适用场景：资源不跟某一个单独的用户绑定，而是一份资源，多个用户查看，需要在每一个用户查看的时候添加用户特有的水印，多用于某些机密文档或者展示机密信息的页面，水印的目的在于文档外流的
2021-05-22 20:34:09
894
原创 关于前端实现录制功能
本文可以说是一篇调研学习文，是我自己感觉可行的一套方案，后续会去读读已经开源的一些类似的代码库，补足自己遗漏的一些细节，所以大家可以当作学习文，生产环境慎用。录屏重现错误场景如果你的应用有接入到web apm系统中，那么你可能就知道apm系统能帮你捕获到页面发生的未捕获错误，给出错误栈，帮助你定位到BUG。但是，有些时候，当你不知道用户的具体操作时，是没有办法重现这个错误的，这时候，如果有操作录屏，你就可以清楚地了解到用户的操作路径，从而复现这个BUG并且修复。（本次先录制，下次再回放）一、先来看看音
2021-04-24 18:28:03
1317
原创 我想做主接口请求
近期开发任务严峻，在疯狂写代码、改 BUG的同时还得抽出时间跟后端对接，并且后端的接口给的字段很难对的上，于是就有了这样的场景：我： 这个页面一共包含name，id，time，address， data五个字段，你们谁提供接口啊！小明： 我提供一个接口，给你返回id, name， time字段。小红：我也提供一个接口，我返给你address字段。小张：我也是，我给你data字段。我：你们是在为难我胖虎嘛？？？就五个字段我得请求三个接口，你们不能聚合一下嘛！三位异口同声：我们现在是微服务只.
2021-03-27 21:59:20
164
原创 怎样统计用户在当前页面停留的时间
页面停留时间（Time on Page）简称 Tp，是网站分析中很常见的一个指标，用于反映用户在某些页面上停留时间的长短，传统的Tp统计方法会存在一定的统计盲区，比如无法监控单页应用，没有考虑用户切换Tab、最小化窗口等操作场景。基于上述背景，重新调研和实现了精确统计页面停留时长的方案，需要 兼容单页应用和多页应用，并且不耦合或入侵业务代码。虽然百度统计之类的也可以记录用户的浏览行为，但是这类统计是全部跟踪用户，而无法精确的跟踪到注册的用户之前一系列的行为，而我们只需要针对注册用户进行有目的性的行为分析。
2021-03-13 14:49:46
4911
原创 遇到前端异常不要慌
按键点击无反应、页面元素不展示、页面白屏、接口请求失败，这些都是我们前端不想看到的场景。在计算机程序运行的过程中，也总是会出现各种各样的异常。概念什么是异常，异常就是预料之外的事件，往往影响了程序的正确运行。例如下面几种场景：页面元素异常（例如按钮点击没反应、元素不展示）页面卡顿页面白屏接口请求失败这些情况都是极其影响用户体验的。对于前端来说，异常虽然不会导致计算机宕机，但是往往会导致用户的操作被阻塞。虽然异常不可完全杜绝，但是我们有充分的理由去理解异常、学习处理异常。异常处理的重要性是
2021-02-25 16:56:42
426
1
原创 聊一聊cropper.js
最近的项目中有一个纯前端实现的功能困扰了我好久，就是用户上传图片以后需要用户进入图片裁剪页并完成上传的功能，一开始我是打算自己去用canvas去写这样一个页面的，但是项目开发周期短，任务紧，所以我就在网上各种扒资源，还真让我找到了这么一款神仙插件——cropper.js。cropper.jsjQuery.cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。官方地址：http://fe
2021-01-30 15:40:40
1614
原创 事件监听addEventListener的使用
近期在做的项目中有这样一个交互功能，用户在A页面通过点击按钮跳到B页面，在B页面执行完一个倒计时以后跳到C页面，但是在B页面点击返回按钮以后会弹出一个挽留弹窗，点击确定按钮退出当前页面，回到A页面之前的页面，在C页面点击返回也回到A之前的页面，就是这样的一个交互，刚开始我感觉还是挺简单的，从A页面跳B页面要实现B返回回到A之前的页面，所以我在点击按钮的时候使用了replace去跳到B页面，B页面跳C页面的时候也要实现点击返回按钮回到A之前的页面，我也用了replace，然后为了实现在B页面点击返回回到A之前
2021-01-02 14:42:56
3756
原创 学习使用H5的Canvas
canvas简介<canvas> 是HTML5新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使
2020-12-18 23:57:14
369
1
原创 从这里去净化你的代码
写出整洁的代码，是每个程序员的追求。最近，我使用了我们公司内部研发的H5编辑平台去开发日常的需求，平台是用React去开发的，相应的用到的一些组件也是用React去实现的，对于我来说，我对React的熟悉度并不高，所以在开发的时候会去熟悉之前组件的代码，但是从熟悉代码中我发现了有的小伙伴的代码并没有标注释，就让我很头疼。。。。往往不清楚这个命名是什么意思 这个方法是用来干嘛的，所以，我想记录一下怎样写出整洁规范的代码，用于共勉进步。对于什么是整洁的代码，书中给出了大师们的总结：Bjarne S.
2020-11-21 18:46:18
182
2
原创 ‘new‘一下？
为了更好的理解后面的内容，我们先来了解一些前置知识吧！构造函数和普通函数的区别构造函数：使用一个函数来初始化对象，并配合new使用，则我们称这个函数为构造函数普通函数作为一个函数，除了构造函数之外就是普通函数了，详细大家用的比我熟练构造函数和普通函数的区别语法上没有区别！！！唯一的区别就是使用上的区别，使用上如何区别二者呢？使用了函数前面有一个new关键字，那就是构造函数，只要记住这一点就行了！普通函数怎么使用呢？我就不在关公面前耍大刀了进行分析new的过程，主要有以下几点创建一个
2020-11-07 16:43:10
216
1
原创 关于闭包的变量存储的问题
前段时间和朋友在探讨闭包内的变量存储的问题时，发现我们对闭包内的变量存储模糊不清，所以近段时间看了一些关于闭包存储的文章，在这里打算记录一下。闭包，这个概念对于每位JSer而言都不陌生，它几乎伴随着每个前端入门者的初学阶段，重要到几乎每家公司面试都会问。关于闭包究竟是什么，闭包干嘛用的，网上各种回答也是五花八门，动不动就扯到隐匿变量、内存泄漏这些概念，让没有点基础的初学者越看越晕，我不能说那些是错的，不过显然对新手不太友好。//变量（内存）销毁看过红宝书的都见过这个词，不过大神的例子我觉得还是有.
2020-10-24 17:20:28
802
原创 Node之Event
一、重点事件循环Events二、内容1.node事件循环（看之前需先自行了解下 线程、进程）这里先说下node.js运行机制，node.js采用v8作为js的解析引擎，而在I/O处理方面采用了libuv。libuv库负责node api的执行，它将不同的任务分给不同的线程，形成一个Event Loop。以异步的方式将执行的结果返回给V8引擎。下面直接上图：整体流程其实就是，V8引擎解析js代码传输给libuv库负责，libuv通过调用nodeApi去处理对应的事件,最后把处理完的事件再返回
2020-10-10 15:00:15
515
原创 关于Node的学习之Buffer\Stream
简单理解：我们可以把整个流(stream)和 buffer 的配合过程看作公交站。在一些公交站，公车在没有装满乘客前是不会发车的，或者在特定的时刻才会发车。当然，乘客也可能在不同的时间，人流量大小也会有所不同，有人多的时候，有人少的时候，乘客或公交站都无法控制人流量。不论何时，早到的乘客都必须等待，直到公车接到指令可以发车。当乘客到站，发现公车已经装满，或者已经开走，他就必须等待下一班车次。典型的例子：就是你在线看视频的时候。如果你的网络足够快，数据流(stream)就可以足够快，可以让 buffer
2020-09-25 17:04:02
368
原创 H5之唤起微信功能
最近在做项目中总能遇到H5需要调起微信公众号、调起微信小程序、调起微信分享等等的有关微信的一些需求。今天，我们就着重来谈谈H5之调起微信分享功能的实现。使用微信分享，可以获得更好的传播效果。步骤一. 用户信息获取1. 注册测试公众号我们在 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 可以申请一个测试账号，在测试号管理的页面中能够看到我们appId等信息，这里有个接口配置信息修改的选项需要我们去填写这里就要麻烦后端的
2020-08-29 12:05:48
6764
1
原创 来聊聊webpack吧！
在前端开发中，往往会用到一些构建工具，构建工具有很多，比如NpmScript任务执行者、Grunt也是任务执行者、Gulp基于流的自动化构建工具、Fis3百度构建工具、Webpack打包模块化JavaScript工具和Rollup模块打包工具。今天，我们来聊聊最耳熟能详的webpack构建工具。一、全面理解webpack1、什么是webpack？webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块.
2020-08-14 23:20:55
342
原创 JS中的this指向问题
有关this的指向问题应该很多人都会深有感触，this的指向是前端面试中的一个经典问题！因为我一直对this的指向问题理解不深，所以今天记录下来方便以后参考。this的概述解析器在每次调用函数的时候都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this；this指向的是一个对象，函数执行的上下文对象；根据函数的调用方式的不同,this会指向不同的对象；要想理解this可以先记住这两点：this永远指向一个对象；this的指向完全取决于函数调用的位置；第一点挺好理解的，不管在什
2020-07-30 20:29:29
173
原创 聊聊JS中的深浅拷贝
说在文章前我们在日常工作中经常遇到操作数组、对象的情况。我们一般会将原数组和对象进行“备份”，但是当真正对其操作时发现备份的也发生改变。此时我就会抛出一个疑问：这到底是因为什么呢？我不是已经进行备份了么，怎么备份的数组、对象也会发生变化？这个时候就引出了我们对拷贝原理的理解程度了！一、先说说javascript中的数据类型在JavaScript中我们常遇见的数据类型分为基本数据类型和引用类型：基本数据类型string、number、null、undefined、boolean、symbol(E
2020-07-17 22:25:08
153
原创 理解async和await
一、先简单的介绍一下async和awaitES7 提出的async 函数，终于让 JavaScript 对于异步操作有了终极解决方案。async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示，在函数内部使用 await 来表示异步。async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。async/await 是建立在promise 的基础上async/await 像 promise 一样，也是非阻塞的。async/await
2020-07-03 22:45:41
459
原创 Promise的笔记
promise我相信在前端的学习过程中“promise”的问题一直“拿捏”着大部分人的痛点。首先，让我们回顾一下这些年遇到的Promise 常见面试问法：1、了解 Promise 吗？2、Promise 解决的痛点是什么？3、Promise 解决的痛点还有其他方法可以解决吗？如果有，请列举。4、Promise 如何使用？5、Promise 常用的方法有哪些？它们的作用是什么？6、Promise 在事件循环中的执行过程是怎样的？7、Promise 的业界实现都有哪些？8、能不能手写一个
2020-06-19 23:35:14
324
原创 进入微信小程序
关于微信小程序的那些事*第一课：与小程序的初次相识**概念开发前的准备工作快速开始第一课：与小程序的初次相识*不知道大家是否还记得智能手机刚问世的时候，并不怎么轻巧的机身；加上各式各样的操作系统；还有不怎么耐用的机身内存；霎时间，各大APP都想在新科技上初露锋芒。随着各种新功能、新版本的迭代，我们发现手机的内存对这些新版本APP并不怎么友好，每天都在想着怎样让手机的内存出现一个奇迹。“我删除了一个微信好友，手机多了2个G”然鹅！在16年的某一天，终于有行业的大佬站出来发声了，2016年1月
2020-06-06 22:18:41
352
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人