前端菜鸟
叶子10086
学习的本质,不在于记住哪些知识,而在于它触发了你的思考—— 迈克尔桑德尔
展开
-
前端布局笔记
前端入门一年多,项目全靠div解决,布局这块了解太少了,归纳下前端布局。归纳前端五大布局:静态布局、自适应布局、流式布局、响应式布局、弹性布局,及静态布局中两栏、三栏布局等。一、静态布局静态布局就是传统web,不管设备尺寸变化,网页布局不变。二、自适应布局自适应布局就是元素位置变化,大小尺寸不变。三、流式布局流式布局与自适应布局相反,元素大小变化,位置不变。四、响应...原创 2019-02-15 15:06:28 · 286 阅读 · 0 评论 -
vue-router进阶笔记
开发过程中只使用过vue-router的导航守卫做权限,路由元信息做导航激活,其他知识点没有接触过,写个笔记加深理解。1、导航守卫可以用router.beforeEach注册一个全局前置守卫,可以根据需求,根据权限拦截页面跳转,或跳转会指定页面,比如登录页面。router.beforeEach((to, from, next) => { // logic judgmen...原创 2019-04-11 00:30:56 · 199 阅读 · 0 评论 -
vue单元测试笔记
1、vue单元测试工具/框架概述vue test utilsvue test utils 通过将组件隔离挂载,然后模拟必要的输入 ( prop、注入、用户事件) 和对输出 (渲染结果、触发的自定义事件) 的断言来测试Vue组件。vue-test-utils 链接:https://vue-test-utils.vuejs.org/zhkarma 基于 node 的 js 测试...原创 2019-04-17 14:36:47 · 682 阅读 · 0 评论 -
vue e2e 测试
1、vue e2e测试概述e2e 测试端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期。典型 e2e 测试框架对比名称 断言 是否跨浏览器支持 实现 官网 是否开源 nightwatch assert和 chai expect 是 selenium http://ni...原创 2019-04-18 11:24:13 · 6325 阅读 · 0 评论 -
常见六大 Web 安全攻防解析
转载:https://mp.weixin.qq.com/s/qjsGvK1tQedR2qCv2triHQ前言在互联网时代,数据安全与个人隐私受到了前所未有的挑战,各种新奇的攻击技术层出不穷。如何才能更好地保护我们的数据?本文主要侧重于分析几种常见的攻击以及防御的方法。一、XSSXSS(Cross-Site Scripting),跨脚本攻击,因为缩写和css重叠,所以只能叫XSS。跨...转载 2019-05-16 19:34:57 · 1143 阅读 · 0 评论 -
event、dom 位置信息
本文所有属性信息,均在chrome环境下。一、测试dom<!DOCTYPE html><html lang="zh"><head> <style rel="stylesheet"> body{ margin: 0; } .event{ width: 200px; heigh...原创 2019-06-05 20:06:36 · 180 阅读 · 0 评论 -
深入理解浏览器的缓存机制
转载:深入理解浏览器的缓存机制作者:浪里行舟一、前言缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请...转载 2019-05-30 22:57:36 · 209 阅读 · 0 评论 -
Referrer策略与防盗链
碰到后端提供图片链接不可访问,添加<meta name="referrer" content="no-referrer">后可以显示。referrer:http请求header的报文头,指明http请求从哪个页面链接过来的。referrer策略:no referrer:任何情况都不发送Referrer信息;no referrer when downgrade:仅当...原创 2019-03-05 23:20:49 · 1165 阅读 · 0 评论 -
多屏适配笔记
关于前端屏幕适配方案这块,目前主要使用过以下6个方案:1、rem通过js根据当前设备屏幕宽度,动态计算元素长度单元。var html = document.getElementsByTagName('html')[0];var pageWidth = html.getBoundingClientRect().width;html.style.fontSize = pageWid...原创 2019-04-11 14:49:13 · 224 阅读 · 0 评论 -
Js 六种继承方式
/** js 继承方式 * 参考来源 JavaScript 高级程序设计(第3版) 6.3 继承 */// 父类function Father(name) { this.name = name; // 被所有子实例共享 this.firuts = [];}Father.prototype.sayName = function() { console.log...原创 2019-08-18 00:01:42 · 153 阅读 · 0 评论