前端 javascript
文章平均质量分 85
菜鸟丶攻城狮
喜欢和热爱前端,编程是一门艺术,让我如此着迷
展开
-
前端明水印到隐水印你了解了吗
水印的目的是为了防止信息泄漏,保护版权,在很多网站里都有用到了水印,水印真的只是看到的这么简单吗?原创 2022-01-23 11:09:33 · 5015 阅读 · 0 评论 -
前端常用布局大全——细致讲解
作为一名前端开发者,每天都在和浏览器打交道,而浏览器中展示的网页需要做的很美观,并且可以吸引住用户浏览网页,提升用户体验是很重要的,所以不可避免的就要用到各种各样的布局。今天就来列举一下各种常用布局以及实现方法。...原创 2022-01-07 20:19:38 · 3660 阅读 · 0 评论 -
前端安全——XSS攻击与防御原理详解
前端开发人员必备安全防范知识——XSS攻击与防御,希望大家可以认识到xss攻击的危害原创 2021-12-13 20:06:06 · 5642 阅读 · 0 评论 -
canvas绘制文字位置偏移
前言今天在做一个小功能,也就是给图片添加水印时发现,我用canvas绘制水印文字时,水印的位置总是和理想中的不一样,总是会发生偏移。解决方法遇到这个问题其实可以有两种解决方法:根据偏移的距离找出一个合适的反向移动的距离。是不是不太理解这句话的意思,没关系,大家可以看我的另一篇文章拖拽水印插件这里有讲到距离怎么实现,以及源码。也可以通过canvas的原生API:textBaseLine这个来实现,canvas在绘制文字的时候会有一个对齐的标准,同时也会受到字体的影响,我的解决方式是通过设置text原创 2021-08-10 11:13:08 · 3292 阅读 · 0 评论 -
webpack学习之编译结果分析
什么是webpack当开发一个具有规模的程序,将会遇到非常多的非业务问题,这些问题包括:执行效率、兼容性、代码的可维护性、可扩展性、团队协作、测试等等、我们将这些问题称之为工程问题。工程问题与业务无关,但它深刻影响哦开发难度,如果没有一个好的工具解决这些问题,将使得开发难度变得极其缓慢,同时也让开发者陷入技术的泥潭。在浏览器端,开发时态和运行时态的侧重点不一样。开发时态:模块划分越细越好支持多种模块化标准支持npm或者其他包管理器下载的模块能够解决其他工程化的问题运行时态:文件越少越原创 2020-09-04 21:02:31 · 289 阅读 · 0 评论 -
简单易懂——手动实现事件模型
前言这几天准备加深一下自己对Vue的理解,所以决定开始看Vue的源码,看到了事件模型,觉得可以很好地锻炼自己的思维能力,所以就手写下来了,现在分享给大家,希望有所帮助。功能事件模型有包括三个功能函数:on、off、emit。on事件函数负责注册各种事件,off事件函数负责注销已经注册的函数,emit事件函数负责触发已经注册的函数。这些功能是很常用的。代码把这个代码写在一个立即执行函数中,这样可以防止变量污染,虽然写这个功能也没啥可以污染的,但是也要养成良好的编码习惯不是_。var event =原创 2020-07-27 15:52:49 · 269 阅读 · 0 评论 -
前端存储——Cookie的基本概念
学习cookie笔记,作为复习使用一个不大不小的问题假设服务器有一个接口,通过请求这个接口,可以添加一个管理员但是,不是任何人都有权力做这种操作的那么服务器如何知道请求接口的人是有权力的呢?答案是:只有登录过的管理员才能做这种操作可问题是,客户端和服务器的传输使用的是http协议,http协议是无状态的,什么叫无状态,就是服务器不知道这一次请求的人,跟之前登录请求成功的人是不是同一个人由于http协议的无状态,服务器忘记了之前的所有请求,它无法确定这一次请求的客户端,就是之前登录成功的那个原创 2020-06-10 14:09:08 · 1097 阅读 · 0 评论 -
CORS原理详解
JSONP并不是一个好的跨域解决方案,它至少有着下面两个严重问题:会打乱服务器的消息格式:JSONP要求服务器响应一段JS代码,但在非跨域的情况下,服务器又需要响应一个正常的JSON格式只能完成GET请求:JSONP的原理会要求浏览器端生成一个script元素,而script元素发出的请求只能是get请求所以,CORS是一种更好的跨域解决方案。概述CORS是基于http1.1的一种跨域解决方案,它的全称是Cross-Origin Resource Sharing,跨域资源共享。它的总体思路是原创 2020-05-31 13:44:21 · 4905 阅读 · 4 评论 -
原生JS实现三级联动
效果展示在我们使用某个APP或者网站的时候,需要注册,那么会有地区选择,选择某个省,会自动列出这个省的所有城市,选择城市,会自动列出所有村镇,我们要实现的就是这个效果,在这里村镇就用每个省的学校来替代,完整代码已经上传到github:https://github.com/caohongyu-crypto/Three-level-,所有的省市信息我放在一个js文件里,省会是一个数组,城市和学校是对象(下面是部分信息截图):所有不需要向后台请求数据,效果如下:是不是感觉很简单,没错,就是很简单HTM原创 2020-05-21 21:47:08 · 1056 阅读 · 0 评论 -
vue---剖析vue响应式原理
1. 前言在vue中,只要数据变化,页面就会重新渲染,这个是怎么做到的呢?在创建vue实例时,vue会将data中的成员代理给vue实例,目的就是实现响应式,监控数据变化,然后执行某个事件函数。在vue2.0中使用的是Object.defineProperty来实现数据的劫持,配合发布-订阅者模式来实现。2. Object.defineProperty首先我们来看一下怎么使用Object.defineProperty,其实使用方法很简单。这个函数接收三个参数:1.需要监控的对象2.需要监控的对象原创 2020-05-08 17:52:45 · 180 阅读 · 0 评论 -
vue-----手写实习vue基本功能
现在用来手写实现vue的简单功能,主要就是可以和Vue一样渲染页面,这个是很简单的一个,没有实现指令操作,想看指令操作的可以看一下我的github:github地址这是html代码 <div id="app"> <p>姓名:{{name}}</p> <p>年龄:{{age}}</p><button...原创 2020-05-03 16:23:00 · 985 阅读 · 7 评论 -
JS进阶---事件循环
事件循环//输出结果是多少呢,先输出'abc'还是先交叉输出//还是先输出i呢setTimeout(function func1() { console.log("abc") }, 0); for (var i = 0; i < 10000; i++) { console.log(i); }概念ps:最后有面试题哦浏览器、JS、执行引擎的关系JS:一...原创 2020-04-16 18:47:02 · 227 阅读 · 0 评论 -
js原型和原型链学习笔记详解
首先做到题看看对原型和原型链的理解如何//第一题var F = function () {}Object.prototype.a = function () {}Function.prototype.b = function () {}var f = new F();console.log(f.a, f.b, F.a, F.b);//第二题function A() {}fu...原创 2020-04-10 17:38:30 · 333 阅读 · 0 评论 -
js小记----数组方法sort
在js中数组的用处很大,在很多地方都会用到数组,因为数组用起来比较方便,在数组中有的方法比较简单,有的比较复杂,今天介绍一个很常用但是又容易记混的方法:sort()方法。这个方法可以直接使用: var arr = [5,1,3,6,4,8,7,9]; var newArr = arr.sort();//[1,3,4,5,6,7,8,9]会按照从小到大的顺序返回,是不是觉得很简单呢,...原创 2020-01-16 19:25:10 · 175 阅读 · 0 评论 -
js学习小记----递归
在js的学习过程中我认识到了闭包的重要性,而且在我们平时编写代码的过程中有意无意的就用到了闭包,可能我们没有发现吧。什么是闭包呢? 用汉语解释一下就是一个函数内部定义了一个函数,但是把它拿到了全局中使用,并且父级的函数作用域没有成功销毁,而是被抛出来的函数给拿着,还可以继续访问父级函数作用域的变量,这就是闭包。可能语言形容的比较抽象,毕竟我不善表达。 下面请看一个例子在这里插入代码片:func...原创 2019-12-28 17:31:45 · 146 阅读 · 2 评论 -
js中关于this的一个小问题
我们平时在写代码的时候肯定少不了和this打交道,我们都认为this是指向自己,但是这句话其实是不完全正确的,可以看下面的代码:function show(){ var a = 10; console.log(this.a); } show();这段代码并不会像大家想象中那样输出一个10,而是输出undefined,这是为什么呢,推翻了大家心中的this指向自己这个说法。...原创 2019-12-08 14:10:24 · 85 阅读 · 0 评论 -
js简易轮播图,二十行代码搞定
今天给大家写一款简易轮播图,这个轮播图的实现方式很简单,通过切换图片的src就可以实现,话不多说开始干代码。首先我们在html中插入一张图片给它取一个id名称,在这里我就叫它focusImg:<img src="img/nr2.jpg" width="100%" height="100%" id="focusImg"/>图片插入好之后可以自己设置想要的css样式,这里就不为...原创 2019-12-07 12:51:40 · 3597 阅读 · 8 评论