- 博客(42)
- 收藏
- 关注
RSS订阅转载 前端安全编码规范
来源：待你如初 https://segmentfault.com/a/1190000037657222前言随着互联网高速的发展，信息安全已经成为企业重点关注焦点之一，而前端又是引发安全问题的高危据点，所以，作为一个前端开发人员，需要了解前端的安全问题，以及如何去预防、修复安全漏洞。下面就以前端可能受到的攻击方式为起点，讲解web中可能存在的安全漏洞以及如何去检测这些安全漏洞，如何去防范潜在的恶意攻击。1. 跨站脚本攻击（Cross Sites Script）跨站脚本攻击，Cross Site Sc
2020-12-20 17:00:17
805
转载 别只用 console.log() 调试 js 代码了
JavaScript中的 console 对象可用于访问浏览器调试控制台，可以用它在控制台中输出代码中变量的值。不过大多数人都只过 console.log() 在浏览器控制台中进行输出调试。log 只是 console 对象的一种方法，除了它还有很多非常有用的方法。1. console.log()这个方法主要用于将传给它的值输出到控制台。可以给 log() 传递任何类型：可以是字符串，数组，对象，布尔值等。console.log('JavaScript');console.log(7);console.lo
2020-12-20 15:52:43
319
转载 【译】改善 CSS 的 10 个最佳实践
CSS 看起来是一种非常直接且不易犯错的语言。只需要添加规则以对网站进行样式设置就可以了，对吗？对于只需要几个 CSS 文件的小型站点，可能是这种情况。但是在大型程序中，这样可能会使样式迅速失控。如何让它们更可控？事实是，就像其他任何语言一样，CSS的细微差别可以使你的设计有天壤之别。这是 CSS 的 10 条技巧 —— 可以帮助你从样式中获得最大收益的最佳实践。1. 你真的需要框架吗？首先，确定你是否真的需要使用 CSS 框架。现在有许多轻量级的方法可以替代繁重的框架。通常，你不会使用框架中的每个选择器，
2020-12-20 14:32:27
327
转载 如何正确接收 GitHub 的消息邮件
我厂的开发流程通常都是基于 GitHub 的。在 GitHub 上 review 代码，也是我日常工作的重要组成部分。对我来说，在 code review 过程中最讨厌的莫过于，我在 pull request 或 commit 下面评论或 @ 人，往往石沉大海，没有回音。我事后追问当事人，他们的回复往往是 “不知道你 @ 我了呀～”。这让我非常恼火。所以，我决定写篇文档给所有人看，避免他们漏看重要的 GitHub 消息。此后在 GitHub 不回复我的人，差不多也可以绝交了罢！GitHub 的通知机制
2020-12-04 21:06:04
854
1
转载 这样写的 JS 代码看着就很舒服
如何提高代码的可读性、复用性、扩展性。我们将从以下四个方面讨论：变量函数类异步一、变量用有意义且常用的单词命名// Bad:const yyyymmdstr = moment().format('YYYY/MM/DD');// Good:const currentDate = moment().format('YYYY/MM/DD');保持统一对同一类型的变量使用相同的命名保持统一：// Bad:getUserInfo
2020-11-28 10:39:16
78
转载 前端日常调试:Chrome浏览器Network面板http请求时间分析
Chrome浏览器开发者工具Network窗口下，可以查看下载各组件所需的具体时间根据上表进行简要分析——Stalled（阻塞） 浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载； 优化措施： 1、将资源合理分布到多台主机上，可以提高并发数，但是增加并行下载数量也会增大开销，这取决于带宽和CPU速度，过多的并行下载会降低性能； 2、脚本置于页面底部； DNS Lo...
2020-10-23 14:32:54
1637
转载 前端面试--性能,js实现图片懒加载原理
有时候一个网页会包含很多的图片，例如淘宝京东这些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片，并发情况下，达到1000并发，即同时有1000个人访问，就会产生1个G的带宽。为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。vue项目中的打包，是把html、css、js进行打包，还有图片压缩。但是打包时把css和js都分成了几部
2020-10-23 13:57:56
500
转载 迈向 Grid 二维布局时代
CSS Grid 布局是一种强大并且富有创意的的布局方案这篇文章专门为不了解 Grid 的 web 开发人员来介绍它，我将从以下几个方面来介绍它为什么需要 Grid。Grid Line 在生产环境中怎么安全的使用 Grid介绍 Gird 基本概念。开始学习使用 Gird。在生产环境中怎么安全的使用 Grid。为什么需要 Grid目前我们有很多种布局方案，比如最初我们使用表格布局，后面使用 float, position 和 inline-block 来进行布局, 由于这些方法在设计之初上并不是用于布局的，而
2020-09-08 22:21:53
208
转载 2020年中大厂前端面试总结
前言本次面试面试了很多家公司，包括 360，美团，猿辅导，小米，腾讯地图，头条，新东方，快手，知乎等几家公司，刚开始去面试的时候那段时间状态不是很好（基本每天都加班到很晚，周六日也没有休息的那种，而且当时心态真的是差到爆，很多平时自己很会的东西，被问到居然答不上来），基本一面就挂的那种（360，美团，猿辅导），越面越失望，后来就直接不面试了，调整自己的状态，请假休息，好好睡了两天两夜之后，调整自己的心态，开始准备面试，接下来的面试就顺利的很多。本篇面试题总结并没有按照公司那样分类而是按照知识点进行简单分类，
2020-09-06 11:16:40
762
转载 前端面试--avaScript函数参数，传值还是传址？
首先，十万以及万分肯定的说一句， JavaScript 函数传递参数时，是值传递。虽然您可能不信，因为 ECMAScript 变量可能包含两种不同数据类型的值：基本数据类型，和引用数据类型。难道引用数据类型传递的时候难道也是值传递吗？答，没错。 引用类型的值是什么东西？当一个变量向另一个变量复制引用类型的值时，会将存储在栈中的值（栈中存放的值是对应堆...
2020-08-27 23:17:12
994
转载 web前端跨域的一些解决方案
没有归纳之前对跨域的一些说法是模糊的，什么jsonp啊，跨域原理啊，心里只有一个大概的说法，知道这个东西，然后用的时候直接百度Ctrl+C，后来闲下来决定整理一波这些知识点，需知其所以然。模糊状态什么是跨域域名相同端口号相同协议相同那么以上条件只要有一个不同，都被当作是不同的源，会出现跨域的问题。为什么会出现这个问题呢？因为浏览器的同源策略。简单来说：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。这个安全机制
2020-07-17 16:54:31
146
转载 前端面试--彻底理解js中this的指向
首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。 为什么要学习this？如果你学过面向对象编程，那你肯定知道干什么用的，如果你没有学过，那么暂时可以不用看这...
2020-07-17 16:44:32
185
1
转载 JavaScript中call,apply,bind方法的总结
why？call,apply,bind干什么的？为什么要学这个？ 一般用来指定this的环境，在没有学之前，通常会有这些问题。var a = { user:"追梦子", fn:function(){ console.log(this.user); }}var b = a.fn;b(); //undefined我们是想打印对象a里面的user却打印出来undefined是怎么回事呢？如果我们直接执行a.fn()是可以的。var a = {...
2020-07-17 16:40:41
84
转载 前端面试--HTTP常用的14种状态码
状态码的职责是当客户端向服务器发送请求时，描述返回的请求结果。借助状态码，用户可以知道服务器端是正常处理了请求还是出现了错误。状态码的类别： 类别 原因短语 1XX Informational（信息性状态码）...
2020-06-27 22:32:07
548
转载 前端面试--react-router的实现原理
目前，react的生态越来越丰富，像flux redux react-router已经被越来越多的使用，本文就react-router的内部实现进行分析。文章主要包含两大部分: 一是对react-router赖以依存的history进行研究；二是分析react-router是如何实...
2020-06-24 23:50:22
910
转载 前端面试--从路由原理出发，深入阅读理解react-router 4.0的源码
react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。通过前端路由可以实现单页(SPA)应用,本文首先从前端路由的原理出发，详细介绍了前端路由原理的变迁。接着从react-router4.0的源码出发，深入理解react-router4.0是如何实现前端路由的。通过Hash实现前端路由 通过H5的history实现前端路由 React-router4.0的使用 R
2020-06-24 23:34:10
218
转载 前端面试---var、let、const声明变量的区别
let和var声明变量的区别：1.let所声明的变量只在let命令所在的代码块内有效。（块级作用域）for(let i=0;i<10;i++){// ... }console.log(i);// ReferenceError: i is not defined当前的i只在for循环中有效，当在全局环境中去寻找时是找不到的，所以程序报错var a = [];for (var i = 0; i < 10; i++) {a[i] = function () {...
2020-06-22 22:59:40
240
转载 前端面试--聊聊JavaScript异步中的macrotask和microtask
前言首先来看一个JavaScript的代码片段:console.log(1);setTimeout(() => {console.log(2);Promise.resolve().then(() => {console.log(3)});}, 0);new Promise((resolve, reject) => {console.log(4)resolve(5)}).then((data) => {console.log(data);})se...
2020-06-22 22:04:47
250
原创 安装 antd 报错: There appears to be trouble with your network connection. Retrying...
原因: yarn 超时解决办法,执行命令:yarn config set registry https://registry.npm.taobao.org然后 yarn install
2020-06-21 16:04:46
584
转载 前端面试篇--JS的深拷贝和浅拷贝,看这篇差不多够了,其他的不用看了
面试回答: 浅拷贝是拷贝了对象的引用，当原对象发生变化的时候，拷贝对象也跟着变化；深拷贝是另外申请了一块内存，内容和原对象一样，更改原对象，拷贝对象不会发生变化；面试官给我说：浅拷贝是拷贝一层，深层次的对象级别的就拷贝引用；深拷贝是拷贝多层，每一级别的数据都会拷贝出来；回来查了一下资料，并没有发现面试官说的这种关于深拷贝浅拷贝的说法，看了几篇文章，终于理解了其实总结来看，浅拷贝的时候如果数据是基本数据类型，那么就如同直接赋值那种，会拷贝其本身，如果除了基本数据类型之外还有一层对象，那么对于...
2020-06-18 13:13:43
300
转载 浏览器是如何渲染页面的
浏览器页面渲染流程浏览器从HTTP服务器获取html文档，到呈现页面给用户，会经过以下几个步骤：1、解析文档构建DOM树浏览器的解析内容可以分为三个部分：HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree）CSS：解析样式表，生成CSS规则树（CSS Rule Tree）JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与用户进行交互。以上三类文件的执行顺序会根据其在文档中的位置及其标签属性
2020-06-12 11:46:20
447
转载 跟我学习javascript的垃圾回收机制与内存管理
一、垃圾回收机制—GCJavascript具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。不再使用的变量也就是生命周期结束的变量，当然只可能是局部变量，全局变量的生命周
2020-06-11 16:25:54
102
转载 让一个小div在另一个大div里面 垂直居中的四种方法
https://www.cnblogs.com/caobiin/p/7323797.html
2020-04-09 00:35:14
248
原创 字体参考
font-family : PingFang SC, "\5FAE\8F6F\96C5\9ED1", Arial;-webkit-font-smoothing : antialiased;-moz-osx-font-smoothing: grayscale;
2020-03-18 11:16:15
102
转载 鼠标事件-拖拽3（磁性吸附）
鼠标事件-拖拽3（磁性吸附）<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style> #div2 { width: 150px; height: 150px; ...
2020-02-28 16:29:14
131
转载 特殊字符和图标
Content:"\2715",特殊字符和图标项目中用到的一些特殊字符和图标html代码<div class="cross"></div>css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
2020-02-20 21:21:32
841
转载 react-router之onEnter和onLeave
在之前介绍过react-router的使用，在这里我们介绍一下路由的onEnter和onLeave，顾名思义，分别是路由进入之前和路由离开之前，我们可以在这段时间内做一些处理。比如下面这个例子<Route path="/home" component={App} onEnter={(nexState,replace)=>{ if(nexState.location.p...
2020-01-10 20:37:24
4320
转载 CSS实现单行、多行文本溢出显示省略号（…）
单行如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;效果如图但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢...
2019-11-22 09:35:19
110
转载 typescript编写react的时候，props的interface和react本身的proptypes有什么关系
使用typescript编写react的时候，props的interface和react本身的proptypes有什么关系通常我们使用typescript来编写一个react组件的时候，都会定义一个props的接口类似于这样的export interface AffixProps { /** * 距离窗口顶部达到指定偏移量后触发 */ offsetTop?: nu...
2019-11-11 14:19:16
2240
转载 React-classnames库
转载文章下面废话不多说，我们直接来看文章吧首先我们我们来看这个名字classnames一看就知道是跟className类名有关的，实际上也确实是这样，那我们为什么要用这个呢由于react原生动态添加多个className会报错import style from './style.css'<div className={style.class1 style.class...
2019-11-11 11:53:39
138
转载 精读前后端渲染之争
文中概要介绍了spa遇到的问题,推荐了解决办法--再回到前端渲染遇到首屏渲染问题，除了同构就没有其它解法了吗？总结以下可以通过以下三步解决:1。分拆打包 现在流行的路由库如 react-router 对分拆打包都有很好的支持。可以按照页面对包进行分拆，并在页面切换时加上一些 loading 和 transition 效果。2。交互优化 首次渲染的问题可...
2019-07-14 11:43:51
89
转载 单页应用SPA做SEO的一种清奇的方案
网上有好几种单页应用转seo的方案，有服务端渲染ssr、有预渲染prerender、google抓AJAX、静态化。。。这些方案都各有优劣，开发者可以根据不同的业务场景和环境决定用哪一种方案。本文将介绍另一种思路比较清奇的SEO方案，这个方案也是有优有劣，就看读者觉得适不适合了。项目分析我的项目是用react+ts+dva技术栈搭建的单页应用...
2019-07-14 07:27:30
513
转载 [译]React 在服务端渲染的实现
阅读目录(Content)React 在服务端渲染的实现 服务端渲染的优势 入门 增加服务器端渲染 在渲染之前获取数据 更进一步原文地址：Server-Side React Rendering 原文作者：Roger Jin回到顶部(go to top)React 在服务端渲染的实现React是最受欢迎的客户端 JavaScript 框架，但你知道吗(可以试试)，你...
2019-05-09 11:50:56
117
转载 Mac必备:SVN常用命令
首先推荐大家一个应该是国内外最好的SVN仓库，不限私有，不限成员：http://svnbucket.com# checkout代码svn co svn://svnbucket.com/xxx/xxx# 更新代码svn up# 添加新文件到版本库svn add filename# 添加当前目录下所有php文件svn add *.php# 递归添加当前目录下的所有新文件s...
2019-05-08 11:06:42
193
转载 javascript中的return、return true、return false、continue区别
1、语法为：return 表达式;2、w3c中的解释： 语句结束函数执行，返回调用函数，而且把表达式的值作为函数的结果 也就是：当代码执行到return语句时，函数返回一个结果就结束运行了，return后面的语句根本不会执行。举个栗子：function myFun() { console.log("Hello"); return "World"; ...
2019-05-05 15:17:25
296
转载 360浏览器window.open被拦截
window.open是javascript函数，该函数的作用是打开一个新窗口或这改变原来的窗口,如果你直接在js中调用window.open()函数去打开一个新窗口，浏览器会拦截你,那么如何避免呢。注意，只有直接使用js调用 window.open(url); 打开新窗口时，才会被拦截，如果是改变原理额窗口：window.open(url,'_self'); 则不会被拦截。那么 js调用...
2019-04-04 18:01:25
2240
原创 setState异步
richTextChange=()=>{ this.setState((preState, props) => { console.log('旧的--1',preState.data) return {data: `${preState.data}${this.state.refObj.state....
2019-01-10 15:13:25
195
转载 带着三个问题深入浅出React高阶组件
前言"高阶"二字听起来非常唬人，因为大学高数课上的高阶方程让人抓狂，从而让第一次接触"高阶组件"概念的人们误以为又是什么高深的思想和复杂的逻辑。但相信在你学习完成后和生产环境大量使用过程中，就会发现这个所谓"高阶组件"真的一点也不高阶，非常简单易懂。本文通过回答三个问题带你深入浅出React高阶组件。1.为什么需要高阶组件？2.高阶组件是什么？3.如何实现高阶组件？ 1.为...
2019-01-03 22:50:19
108
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人