- 博客(62)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 【前端面试】Web安全
XSS跨网站指令码（cross-site scripting）是代码注入的一种通过修改html代码或者执行javaScript代码来攻击XSS攻击分为三种：反射型，存储型和DOM-based如何攻击XSS 通过修改 HTML 节点或者执行 JS 代码来攻击网站。例如通过 URL 获取某些参数<!-- http://www.domain.com?name=<script&g...
2019-02-27 10:07:13
508
原创 块级格式上下文
https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
2019-02-26 18:48:01
316
原创 CSS盒子模型
盒子模型包含：content,padding,border,margin标准盒子模型：IE盒子模型在标准盒子模型中：width指的是content的宽度，而在ie中width指的是border+padding+content的宽度background-color将填充所有border以内的区域。box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。例如，假如您需要...
2019-02-26 16:37:54
257
原创 【前端面经】网易有道一面面经（视频面试）
说说做的项目（问到我项目里的节流是怎么实现的）正则表达式 匹配手机号页面性能优化数组的api,两个数组合并的方法js修改伪元素说说闭包的了解，闭包有什么坏处说说作用域链的了解说说事件委托，事件委托的好处apply,bind，call的区别盒子模型，通常说的width指的是哪个部分，所有情况都是这样吗？box-sizing浏览器渲染原理，过程...
2019-02-26 15:12:00
1424
转载 【转】(面试复习)关于跨域问题的解决办法
什么是跨域？1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制内容有：Cookie、LocalStorage、IndexedDB 等存储性内容DOM 节点AJAX 请求发送后，结果被浏...
2019-02-25 22:48:51
1780
原创 什么是顶级域名、根域/二级域名、一级域名/子域名
根域名就是想XXX.com这样只有一个“.”的域名。子域名是像xxx.xxx.com这样有两个“.”以上的域名
2019-02-25 21:14:38
10463
3
原创 【前端面试】事件机制（事件冒泡，事件捕获，事件委托/事件代理）
事件机制事件触发三阶段window 往事件触发处传播，遇到注册的捕获事件会触发传播到事件触发处时触发注册的事件从事件触发处往 window 传播，遇到注册的冒泡事件会触发事件触发一般来说会按照上面的顺序进行，但是也有特例，如果给一个目标节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。// 以下会先打印冒泡然后是捕获node.addEventListener( 'cl...
2019-02-25 19:31:42
1991
原创 【前端面试准备】Vue和React的相同点和不同点
React 和 Vue 的相同点**1.使用Virtual DOM用JS模拟DOM结构，DOM变化的对比，放在JS层做，以提高重绘性能DOM操作昂贵，JS运行效率高，要减少DOM操作进一步了解为什么使用虚拟dom：可查看链接https://www.cnblogs.com/ziyoublog/p/9989797.html2. 提供了响应式(Reactive)和组件化（Composab...
2019-02-25 12:16:48
1501
原创 【前端面试vue】vue响应式(双向数据绑定)原理及实现简例
Vue如何追踪变化vue.js采用的是数据劫持结合发布和-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调。当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty (ES5...
2019-02-25 10:32:51
4768
原创 【前端面试】React生命周期函数以及V16新的Api引入
生命周期函数指在某一时刻调用的函数1.初始化这时候执行的其实就是constructor2.mount挂载componentWillMount – render – componentDidMount组件即将被挂载到页面上–挂载–组件被挂载到页面上之后执行componentWillMount， componentDidMount只会在第一次的时候执行3.update更新组件更新有两...
2019-02-24 00:21:46
353
转载 【转】JS面试复习--css布局
单列布局常见的单列布局有两种：header,content和footer等宽的单列布局header与footer等宽,content略窄的单列布局1.如何实现对于第一种，先通过对header,content,footer统一设置width：1000px;或者max-width：1000px(这两者的区别是当屏幕小于1000px时，前者会出现滚动条，后者则不会，显示出实际宽度);然后设...
2019-02-21 15:19:44
207
转载 es6复习之Promise详解以及相关的面试题
在我们开发的过程中，一般来说我们会碰到的回调嵌套都不会很多，一般就一到两级，但是某些情况下，回调嵌套很多时，代码就会非常繁琐，会给我们的编程带来很多的麻烦，这种情况俗称——回调地狱Promise的含义异步编程，回调地域的一种解决方案，比传统解决方案–回调函数和事件-更合理和更强大。Promise对象具有以下两个特点。1.对象的状态不受外界影响。Promise对象代表一个异步状态，有三种：p...
2019-02-21 00:33:18
1156
原创 es6复习let和const
块级作用域为什么需要块级作用域?ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。第一种场景，内层变量可能会覆盖外层变量。var tmp = new Date();function f() { console.log(tmp); if (false) { var tmp = 'hello world'; }}f(); // undef...
2019-02-20 15:33:48
197
原创 vue生命周期（面试题）
推荐一篇写的比较详细的文章https://segmentfault.com/a/1190000011381906?utm_source=tag-newest
2019-02-19 20:03:13
4483
原创 面试复习之Js实现继承
Js中继承的实现主要依靠原型链，但原型链虽然强大，也存在一些问题：1.最主要的问题来自包含引用类型的原型属性。（牵一发动全身）(这也是为什么定义属性我们写在构造函数中，而不写在原型对象中的原因)当我们通过原型去实现继承一个构造函数的时候，就把构造函数里的引用类型的属性给放到原型中去了。这时候我们继承得到的这个新对象它的原型中有引用类型属性，大家的属性的修改就是共享的看下面例子：fun...
2019-02-19 16:08:34
462
转载 面试准备Js复习之防抖，节流函数原理
窗口的resize、scroll、输入框内容校验等操作时，如果这些操作处理函数是较为复杂或页面频繁重渲染等操作时，在这种情况下如果事件触发的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少触发的频率，同时又不影响实际效果。防抖debounce（防抖），简单来说就是防止抖动。当持续触发事件时，debounce ...
2019-02-19 09:50:22
753
原创 面试复习之js理解闭包
什么是闭包在高级程序设计中对闭包定义是这样的：“闭包是指有权限访问另一个函数作用域中的变量的函数。“闭包的使用场景：经典例子1function box(){ var arr = []; for(var i=0;i<5;i++){ arr[i] = i; } return arr;}alert(box()) ...
2019-02-18 18:16:02
227
转载 面试复习之什么是作用域链，什么是原型链，它们的区别，在js中它们具体指什么？
作用域链作用域是一种规则，规定了变量与函数的可被访问的范围。全局变量拥有全局作用域，局部变量则拥有局部作用域。js是一种没有块级作用域的语言(包括if、for等语句的花括号代码块或者单独的花括号代码块都不能形成一个局部作用域)，所以js的局部作用域的形成有且只有函数的花括号内定义的代码块形成的，既函数作用域。通俗解释：作用域是针对变量的，比如我们创建了一个函数，函数里面又包含了一个函数，那么...
2019-02-18 14:19:19
487
转载 箭头函数、普通函数中的this指向
彻底理解js中this的指向，不必硬背。首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接...
2019-02-18 12:35:41
555
原创 面试复习js原型，原型链与new关键字原理
创建对象可以用1.object构造函数方法person=new Object();person.firstname=&amp;amp;amp;amp;quot;Bill&amp;amp;amp;amp;quot;;person.lastname=&amp;amp;amp;amp;quot;Gates&amp;amp;amp;amp;quot;;person.age=56;person.eyecolor=&amp;am
2019-02-18 00:46:44
480
原创 面试复习之js类型判断
1.typeof 对于基本类型，除了 null 都可以显示正确的类型typeof 对于对象，除了函数都会显示 object对于 null 来说，虽然它是基本类型，但是会显示 object，这是一个存在很久了的 Bug如果我们想获得一个变量的正确类型，可以通过 Object.prototype.toString.call(xx)。这样我们就可以获得类似 [object Type] 的字符...
2019-02-17 16:42:09
284
原创 面试复习之Js复习对象的深浅拷贝
对于基本类型来说，如果使用字面量的方式，那么这个变量只是个字面量，只有在必要的时候才会转换为对应的类型let a = 111 // 这只是字面量，不是 number 类型a.toString() // 使用时候才会转换为对象类型对象（Object）是引用类型，在使用过程中会遇到浅拷贝和深拷贝的问题。对象的浅拷贝（在复制值的时候复制的是指向堆内存的指针地方），而深拷贝在复制的时候在堆内存中...
2019-02-17 16:19:50
282
原创 面试准备之js操作cookie
1.创建和存储cookie1.设置cookie//函数中的参数分别为cookie的名称，值，过期时间（以下是按以秒为单位)function setCookie(name, value, expireseconds) { var expireTime = new Date(); expireTime.setTime(expireTime.getTime() + expiresecond...
2019-02-17 14:50:13
249
转载 【转】前端面试题（四）：cookie， session 和 localstorage 的区别
一、cookie详解（1）简介因为HTTP协议是无状态的，即服务器不知道用户上一次做了什么，这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两饮料。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么。为了做到这点，就需要使用到Cookie了。服务器可以设置或读取Cookies中包含信息，借此维护用户跟服务器会话...
2019-02-17 10:03:26
352
原创 react简书项目学习笔记39项目上线流程
1.打开xampp2.启动apache服务3.后端的json文件放在api目录下，api目录放在xampp/htdocs下这样之后通过路由http://localhost:8080/api/json名就可以访问到对应的文件4.前端代码文件删除public目录下的api文件夹运行命令npm run build把生成的build文件夹里的文件全部粘贴到htdocs目录下这样就相...
2019-02-15 20:25:41
276
原创 性能优化页面所有js不要在加载首页时一起加载的解决办法
使用react-loadable例如想要在加载首页时不要加载详情页的js,办法：在detail文件夹下新建loadable.js文件import React from 'react';import Loadable from 'react-loadable';const LoadableComponent = Loadable({ // 此处含义是要加载的是当前目录下的inde...
2019-02-15 19:54:39
682
原创 react简书项目学习笔记38如何拿到页面的输入值
通过ref属性把输入值存起来，然后在函数中传参 //存值 <Input placeholder='密码' type='password' ref={(input) => { this.password = input }}> </Input> //传参 <Button placeholder='登陆' onClick={() => this....
2019-02-15 12:39:26
265
原创 react简书项目学习笔记36页面路由参数的传递
<Link key={index} to={'/detail/' + item.get('id')}> <Route path='/detail/:id' exact component={Detail}></Route>路由是detail/id或者下面这种返回路由detail?id= <Route path='/detail' e...
2019-02-15 10:46:56
201
原创 react简书项目学习笔记36react传递标签时被转译
关于传值在html传入标签时被转译的解决方法在标签中通过dangerouslySetInnerHTML属性去传值<Content dangerouslySetInnerHTML={{ __html: this.props.content }}></Content>这样子用之后传过来的content的内容就不会被转译了...
2019-02-14 23:46:09
242
原创 react简书项目学习笔记34性能优化及路由跳转
因为每个页面都用connet与数据连接，当state发生变化时都会重新渲染页面，不够合理解决办法把所在这里插入代码片有用Componet的地方换成PureComponent，PureComponent自己在底层实现了shouldComponentUpdate注意PureComponent是要与immutable结合才是好用的，不然可能会遇到一些坑路由跳转1.不要在页面见跳转使用a标签去跳转...
2019-02-14 22:46:08
233
原创 数据结构学习之理解递归执行顺序
从下面代码的输出结果来理解递归执行的顺序function some(i){i++;if(i&lt;10){some(i);}console.log(i);return i;}i=5;i=some(i);执行结果递归函数执行到递归的时候则先不往下执行，而是开始新一轮的遍历，直到递归退出的条件成立，此时从本次开始依次往回执行刚才剩下的未执行的函数。...
2019-02-14 10:47:56
802
原创 react简书项目学习笔记34首页组件的拆分
src目录下新建pages文件夹，pages文件夹下新建相关组件文件夹(不同页面对应不同文件夹)2.同一个页面下，还要适当地把不同的板块拆成不同的组件
2019-02-14 00:06:59
315
原创 react简书项目学习笔记33react中实现路由功能
1.npm install react-router-dom2.在APP.js下加一个exact去请准匹配import { BrowserRouter,Route } from 'react-router-dom'; return ( <Fragment> <Provider store={store}> <di...
2019-02-13 20:47:03
236
原创 react简书项目学习笔记32在组件中调用action传参
react中调用action传参时要通过函数的形式例子如下： &amp;lt;div onClick={() =&amp;gt; { handleChangePage(page, totalPage) }}&amp;gt;换一批&amp;lt;/div&amp;gt;注意不能直接写onclick=handleChangePage(page, totalPage),要写在新函数中onClick={() =&am
2019-02-13 15:00:30
999
原创 react简书项目学习笔记30使用redux-immutabe统一数据格式
1.npm install redux-immutable --save2.把src/store/index中import { combineReducers } from 'redux';替换成 import { combineReducers } from 'redux-immutable';3.这样后项目文件调用数据格式可写成 const mapStateToProps ...
2019-02-13 14:51:05
232
原创 代码优化
1.components组件多次调用this.props const { list, focused, handleInputBlur, handleInputFocus } = this.props;可以在组件前统一先写好，这样在文中就不用多次调用this.props了2.actionsCreators，有大量的if语句可以换成switch语句...
2019-02-13 14:50:21
228
原创 react简书项目学习笔记31模拟数据渲染，在项目中使用redux-thunk请求ajax数据
1.使用了create-react-app创建的项目，可以在项目的Public文件夹下新建api文件夹2.在api中放json文件，把假数据放在json文件即可3.在上线前把api目录删除掉即可使用redux-thunk1.把异步逻辑要拆分到action-creators去，就要就action-creators返回的不仅是一个对象而是一个函数，这就要求我们使用redux-thunk2.获...
2019-02-13 13:41:50
231
原创 react简书项目学习笔记29使用immutble对象使得state不被直接更改
如果reducer中的state对象被我们不小心直接修改就会报错，而且错误比较难以排除，解决办法：可以使用immutable对象（immutable对象不可以被直接修改）github地址 https://github.com/facebook/immutable-jsimport * as constants from './constants';import { fromJS } fr...
2019-02-12 23:15:56
222
原创 react简书项目学习笔记28redux拆分redcer，action便于管理
1.当把所有数据以及对数据的操作都放在同一个文件中时，这个文件必须会变得非常大，这样的话设计就显得不够合理。（一般一个文件的代码别超过300行）const defaultState = { focused: false};export default (state = defaultState, action) =&amp;gt; { if (action.type === 'search...
2019-02-12 22:10:43
401
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人