学习真香

CSS @Media 媒体查询基础为什么需要媒体查询某些样式只想在特定的设备或者特定的情况下生效.常常用于响应式布局.媒体查询语法具体的说明见: css3-mediaqueries@media media-type and (media-feature-rule) { /* CSS rules go here */}它由以下部分组成：媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试；CSS 规

Cross-Origin Read Blocking (CORB)背景有一天, 打开浏览器看到控制台报错:Cross-Origin Read Blocking (CORB) 已屏蔽 MIME 类型为 text/html 的跨域响应 https://xx.xxxx.com/stat/record?it=0&lshowp=2560x1440&0.1996155506933639 如需了解详情，请参阅 https://www.chromestatus.com/feature/56297098

javascript 可以获取计算机上任意数据吗?对于这个问题, 答案: 通过 spectre 和 meltdown 攻击或许可以想要探寻这个问题的答案, 需要先了解一下计算机的基础知识.然后, 再给大家介绍一下 spectre 和 meltdown计算机的组成计算机组成主要分为五个部分：控制器，运算器，存储器，输入设备，输出设备。对应我们现实中的计算机则为cpu: 控制器 + 运算器主板: I/O 总线，输入输出系统存储器: 内存+硬盘I/O 设备：键盘,鼠标，打印机等等程序是

布局中的盒模型与 display在页面布局中, 有一个很重要的概念 盒模型;同时也有一个很重要的属性display;利用盒模型我们可以更好地理解页面元素的几何展示.同时, 通过设置 display 属性进行页面布局;那么, 下面我们就一起看一下盒模型与 display;什么是盒模型在 CSS 中所有的元素都可以看成一个个小盒子. 这些被我们抽象出来的小盒子就是盒模型.如上图所示, 用红色框标出的内容, 都可以看成一个个盒子.盒子里面可以套盒子. 一个个盒子组成了页面.在 CSS 中，

浏览器事件在前端浏览器事件, 我们经常地用到. 例如, onclick 注册一个点击事件. 或者使用 vue @click 去注册等等.但是, 对于一些浏览器事件的细节, 可能只有到了遇到具体的问题, 才会去了解.近日, 出现了一个线上的小 bug, 用户在富文本中, 鼠标无法选中.最后, 发现是 mousedown 冒泡导致的.也是借着这个 bug, 我总结了一下.什么是浏览器的事件Web events are not part of the core JavaScript languag

前端安全: 如何防止 XSS 攻击?分享简介今天想分享给大家的是 如何防止 XSS 攻击.为什么想分享的原因是: 感觉大家对前端安全了解不够, 重视不够.内容是:什么是 xss, 常见 xss 的类型. 并且通过小游戏来实践.如何去防止 xss 攻击如何利用 XSS 进行攻击什么是 XSS 攻击Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信

css border-image 图片边框效果通过 css中的 border-image, 我们可以实现漂亮的边框效果.先上效果图:效果 1:效果 2:如何实现border-image 样式的实现过程就是将我们提供的图片切分,然后按照一定规则展示在 dom 元素.下面的例子, 会用到下面的图片, 大家可以自取.效果 1 的实现#box { font-size: 16px; border: 3px solid; border-image-source: url(./b

浏览器的同源策略与跨源问题背景近期处理新项目调用老项目的接口时, 遇到了跨域的问题;花费了些时间才处理好, 发现之前学得还是不够全面;因此, 写下本篇文章进行总结;本文内容摘要什么是跨域, 讲述浏览器对跨域的定义为什么有跨域, 讲述浏览器为什么要限制跨域怎么能获取跨域的资源, 讲述如何规避浏览器的跨域限制什么是跨域说到跨域, 就需要先说一下 同源策略同源策略是一个重要的安全策略，它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档

css 文字换行和超出部分省略号文字空格与换行当文本溢出父级 block 元素时, 文本会换行;这个特性是通过 while-space 控制的;它影响浏览器处理空格, 换行和 tab 的处理;它有下面几种值normal, 默认值, 连续的空白符会被合并，换行符会被当作空白符来处理。会受到父级 block 的宽度影响, 而换行;nowrap, 连续的空白符会被合并，换行符会被当作空白符来处理, 但文本不换行; 且不受父级影响;pre, 连续的空白符会被保留。在遇到换行符或者<br&gt

CSS 中的像素(px)px 是一个我们经常在开发中使用的一个单元;它表示在屏幕上展示的最小单元;但是, 在 CSS 中像素可能和我们想象的不太一样.CSS 中的 px 是逻辑距离还是物理距离答: 是逻辑距离;像素(pixel)在浏览器中是一个表示距离的绝对单位(absolute unit);同时, 在 CSS 中它是一个相对像素 (reference pixel);浏览器会根据设备像素比(devicePixelRatio), 来展示图像;所以, 在 CSS 中 1px 可不一定对应真实在

CSS 选择器 与 CSS 特异性,继承,层叠CSS 选择器是 CSS 的基础知识,它能够给浏览器声明样式应该作用于哪些元素;而元素具体要使用哪些样式, 就离不开 CSS 的三个特性:特异性 Specificity 也可以翻译成优先级继承 Inheritance层叠 Cascade本文通过三个问题讲述上面的知识如何给特定的元素加上样式, 讲述 CSS 选择器的使用以及 CSS 的特异性元素是如何继承样式的, 讲述 CSS 的继承多个样式作用到同一个元素使用哪个, 讲述 CSS 的层

// 参考链接// https://stackoverflow.com/questions/10655202/detect-multiple-keys-on-single-keypress-event-in-jqueryconst map = { 17: false, 90: false };// 当前页面监视键盘输入document.onkeydown = (e) => { if (e.keyCode in map) { map[e.keyCode] = true; if

如何设计vue组件react的哲学 这篇文章中讲述了如何设计一个react组件.受到这篇文章的启发, 我写下了本篇文章.原型与组件拆分根据原型(设计稿), 来初步划分组件.下图是我们接下来要做的内容确定功能页面的功能, 往往需要产品在需求文档中写清楚.如果有不确定的内容, 要及时沟通.这里, 这一项不是本文的重点. 但却是工作中非常重要的内容.筛选项 默认不勾选 只展示在售商品筛选器 点击搜索时 根据筛选项搜索内容表格内容展示和原型一致拆分组件我们根据原型和功能先初步将

vue npm run build 探索vue-cli 是一个很好的工具. 它帮助我们集成了babel和webpack, 以及一些常用的插件.让我们不用过多的关心配置, 专心业务.但是, 秉承着一个对技术的好奇.还是驱使我去看了看vue-cli的代码.想要知道 npm run build 到底为我们做了什么前言文章涉及到一些常用的库, 大家可以先简单了解一下, 再看文章可能会更好理解.webpack这里只做一些简单的介绍, 具体可以看官网 .webpack 是一个现代JavaScript

vue iview 浏览器兼容问题(支持IE9)支持到IE9如果遇到问题, 可以给我留言. 说明具体的问题.js我们根据浏览器的用户代理字符串, 来区别出是哪种浏览器的哪个版本.然后, 我们就要根据版本来进行兼容了.vue 浏览器兼容 中说明了一些兼容性的处理.但是, 真正做起来还有一些不明确的地方.我在下面的文章中, 做了一些我自己的说明.下面是可能你需要安装的npm包# 兼容iviewnpm install -D babel-loader @babel/core @babel/pr

前端处理现有的pdf近期, 业务方希望能有一个工具能够给图片或者pdf加入水印.方便用户的使用.分析一下需要的功能上传的 png, jpg 图片自动转换成pdf, 并加入水印上传的 pdf, 加入水印功能上, 主要是对现有的pdf进行加入水印. 也就是修改pdf.解决方案awesome-javascript 在里面有常用的PDF处理库.但是, 仅供参考. 还有一些优秀库, 它里面没有包含.通过一番搜索和对比有3个库可能满足需求jsPDF 生成pdf有许多方便的方法, 但是不支持修改

Vue 高亮文本我为了方便和简单处理, 想着使用 Vue自带的自定义指令进行文本高亮Vue custom-directive代码function highlightText(binding){ let context = binding.value[0] let lightText = binding.value[1] let className = binding.value[2] if(className){ context = context.replace(light

JS Object TypeJS中的对象(Object)是比较复杂的. 在ECMA中的定义还是比较清晰的;这里翻译一下, 分享给大家.因为本节内容有许多的表格, 我有翻译, 但也给了大家链接, 原版的可以自己查阅.原文地址: ECMAScript Object TypeThe Object Type对象(Object) 是属性的逻辑上的集合(collection).每个一个属性(property) 不是 数据属性(data property) 就是 访问器属性 (accessor proper

前端学习资料重学前端 极客时间,付费专栏作者winter, 阿里P8.比较系统讲解了前端的HTML,CSS,JS, 浏览器等知识. 比较深入. 看完之后决定对前端知识是一个查漏补缺.同时, 也让我了解到一些有趣的知识. JS的设计缺陷, 历史包袱等等.浏览器工作原理与实践 极客时间, 付费专栏作者非常地深入了讲解了浏览器的相关知识. 让你站在另外一个高度看待前端. 学习浏览器的工作原理，掌握前端知识的本源，以不变应万变。里面讲解许多相当深入的知识; 例如, JS的变量的声明, var,

ECMAScript Overview JS综述原文地址 www.ecma-international.orgECMAScript 前端的同学应该比较熟悉, 是制定JS规范的 Specification. 下文中的 ECMAScript 可以当作JS.今天, 简单读了一下 Overview 一节, 有一些收获, 这里翻译并加上了一定自己的理解(有增减), 分享给大家.之后, 想着翻译一下 6.1.7 The Object Type (如果有时间, 且想的起来的话…)Overview这一节包含了

探究 Promise这篇文章后续肯定要完善的;现在勉强算是个初稿. 算是先上线, 后迭代吧 ????第一次写于: 2020年6月7日宏任务与微任务我们知道, 浏览器页面中有一个主线程, 它去分配浏览器消息队列中传来的任务, 依次执行.其中包括JS的解析和执行.这个就是, 为什么我们讲js是单线程的.JS代码执行时, 异步的处理往往会以事件循环的方式, 在某一个时间插入消息队列.每一个 Task 都是一个宏任务. 在一个宏任务中可以触发多个微任务, 只有在这些微任务都执行完后,才会进行下一