基础知识复习巩固
关注
分享
扫一扫
前端小生一枚
这个作者很懒，什么都没留下…
展开
-
HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后...转载 2019-04-12 19:38:33 · 271 阅读 · 0 评论 -
location.replace和location.href的区别
window.location.replace和window.location.href都可以实现页面的跳转，但是它们是有区别的，具体区别如下：假如有三个页面a b c按照页面的跳转顺序是 a => b => cb => c在从页面b跳转到页面c时，如果是通过window.location.href("…/c")此时b页面的路径会被c页面代替，但是点击回按钮后页面回退的...转载 2019-04-06 16:01:12 · 3347 阅读 · 0 评论 -
对网站重构的理解
网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变 UI 的情况下，对网站进行优化，在扩展的同时保持一致的 UI。对于传统的网站来说重构通常是：表格(table)布局改为 DIV + CSS使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对 IE6 有效的)对于移动平台的优化针对于 SEO 进行优化深层次的网站重构应该考虑的...原创 2019-03-27 23:00:33 · 334 阅读 · 0 评论 -
GET和POST的区别，何时使用POST？
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符。POST：一般用于修改服务器上的资源，对所发送的信息没有限制。GET方式需要使用 Request.QueryString 来取得变量的值。POST方式通过 Request.Form 来获取变量的值。也就是说 Get 是通过地址栏来传值，而 Post 是通过提交表单来传值。在以下情况中，请使用 ...原创 2019-03-27 22:58:35 · 557 阅读 · 0 评论 -
对象的引用、浅拷贝、深拷贝
对象的引用除了基本类型跟null,对象之间的赋值，只是将地址指向同一个，而不是真正意义上的拷贝。将一个对象赋值给另外一个对象。var a = [1,2,3];var b = a;b.push(4); // b中添加了一个4alert(a); // a变成了[1,2,3,4] 自定义对象var obj = {a:10};var obj2 = obj;obj2.a = 20; ...转载 2019-03-27 17:03:45 · 259 阅读 · 0 评论 -
原型、原型链、作用域链
什么是原型？js每声明一个function，都有prototype原型，prototype原型是函数的一个默认属性，在函数的创建过程中由js编译器自动添加。也就是说：当生产一个function对象的时候，就有一个原型prototype。prototype的属性值是一个对象，是属性的集合。function Person(name,age){ this.name=name; t...转载 2019-03-27 16:45:25 · 280 阅读 · 0 评论 -
前端安全知识
XSSxss: 跨站脚本攻击（Cross Site Scripting）是最常见和基本的攻击 WEB 网站方法，攻击者通过注入非法的 html 标签或者 javascript 代码，从而当用户浏览该网页时，控制用户浏览器。xss 主要分为三类：DOM xss :DOM即文本对象模型，DOM通常代表在html、xhtml和xml中的对象，使用DOM可以允许程序和脚本动态的访问和更新文档的内...转载 2019-03-27 14:57:12 · 549 阅读 · 0 评论 -
for循环 + setTimeout 结合一些示例(前端笔试题）
场景一：我们想按顺序输出对应的索引值，代码如下：for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000);}//5 5 5 5 5可是会连续输出5个5。解决办法一：匿名函数for(var i=0; i<5; i++) { (fu...原创 2019-03-29 00:10:47 · 973 阅读 · 0 评论 -
使用webpack-dev-server设置反向代理解决前端跨域问题
webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时.我们来看一下下面的配置文件(webpack.config.js)var path = require("path");module.exports = { ...转载 2019-04-12 17:08:02 · 2389 阅读 · 0 评论 -
axios
axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API 拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF引入方式：$ npm install axi...转载 2019-04-12 16:49:56 · 230 阅读 · 0 评论 -
如何使用rem
确定基数：一般10px，自己记住就行，不用写进代码里html {font-size:百分数;} 百分数=基数/16 (10/16 = 62.5%)px换算rem 公式=想要的px值/基数也就是说，当你设置 html {font-size:62.5%;}，你想给容器里的文字设置字号14px，换算成rem就是14px/10——1.4rem 这样子...原创 2019-04-02 20:25:42 · 316 阅读 · 1 评论 -
web移动端页面性能优化方案
众所周知，在互联网行业里，移动端占有的比例越来越高了，尤其实在电商领域，用户购物大部分在移动端。比如淘宝双11，在移动端支付的接近7成。这就要求我们产品质量越来越高，那对于我们前端工程师来说也是一个挑战，如何让我们所开发的页面能有更好的体验，就是我们今天讨论的话题：移动端页面性能优化。Html5的出现对于移动端影响挺大，HTML5框架可以提升网站的访问速度，通过优化前端将响应时间加快，使用户的等...转载 2019-04-08 15:44:34 · 1351 阅读 · 0 评论 -
HTTP请求头和响应头部包括的信息有哪些？
HTTP请求头部信息：每个HTTP请求和响应都会带有相应的头部信息。默认情况下，在发送XHR请求的同时，还会发送下列头部信息：Accept:浏览器能够处理的内容类型Accept-Charset:浏览器能够显示的字符集Accept-Encoding：浏览器能够处理的压缩编码Accept-Language：浏览器当前设置的语言Connection：浏览器与服务器之间连接的类型Cooki...转载 2019-03-28 23:09:44 · 2142 阅读 · 0 评论 -
CSS权重及优先级
权重的概念权重，是一个相对的概念，是针对某一指标而言。某一指标的权重是指该指标在整体评价中的相对重要程度。权重系数，是表示某一指标项在指标项系统中的重要程度，它表示在其它指标项不变的情况下，这一指标项的变化，对结果的影响。css样式优先级！important>行间样式>id选择器>class选择器 属性选择器>标签选择器>通配符css样式的权重值上一部分是...转载 2019-03-28 20:59:34 · 396 阅读 · 0 评论 -
addEventListener-捕获阶段-冒泡阶段
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>addEventListener-捕获阶段-冒泡阶段</title> </head> <body> <div id="div2">...原创 2019-03-28 20:45:40 · 773 阅读 · 0 评论 -
经典的JavaScript笔试题
function Foo() { getName = function () { alert (1); }; return this;}Foo.getName = function () { alert (2);};Foo.prototype.getName = function () { alert (3);};var getName = function () { a...转载 2019-03-28 19:28:49 · 3021 阅读 · 0 评论 -
匿名函数、自执行函数、闭包
1、匿名函数匿名函数，顾名思义就是没有名字的函数。匿名函数的调用方式：1）创建一个匿名函数，并将匿名函数赋值给变量add，用add来进行函数的调用，调用的方式就是在变量add后面加上一对括号()，如果有参数传入的话就是add(1,2)var add = function(x, y) { console.log(x+y);}add(1,2) // 32)将匿名函数用()括...转载 2019-03-28 19:04:34 · 298 阅读 · 0 评论 -
前端解决跨域的九种方法
什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：资源跳转：A链接、重定向、表单提交。资源嵌入：link、script、img、frame等dom标签，还有样式中background:url()、@font-face()等文件外链。脚本请求： js发起的ajax请求、dom和js对象的跨域操作等。其实我们通常所说的跨域是狭义的，是由浏...转载 2019-03-27 13:24:04 · 449 阅读 · 0 评论 -
如何让高度不确定的div水平垂直居中
html结构如下：<div class="parent"> <div class="child"></div></div>不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行：.parent { position:relative;}.child { position: absolute; t...原创 2019-03-27 12:55:13 · 1766 阅读 · 0 评论 -
js中的事件委托或是事件代理详解
起因：1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的；2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考；概述：那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同...转载 2019-03-26 19:59:44 · 199 阅读 · 0 评论 -
五大主流浏览器及四大内核
IE：Trident内核，也是俗称的IE内核；FireFox：Geckos；Chrome：以前是Webkit内核，现在是Blink内核；Safari：Webkit；opera：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；...原创 2019-03-26 17:11:07 · 230 阅读 · 0 评论 -
jquery 和 原生js获取输入框的值，下拉选择框选中的值
jquery获取输入框和下拉选择框选中的值$('#input“).val();$("#select").find("option:selected").val();javascript获取输入框和下拉选择框选中的值var mInput = document.getElementById("input");var mSelect = document.getElementById("se...原创 2019-03-26 16:43:10 · 1730 阅读 · 0 评论 -
前端项目中加入mockjs
安装Node (CommonJS)执行命令 npm install mockjs使用demo项目根目录下， 新建mockTest文件夹(与biz同级)，新增xxx.js，以下以 ‘我的’ 模块查询客户经理信息交易为例子，该交易请求的url为/pb-app-webapp/customer/getCustomerManagerByCustomerPhone module.exports...原创 2019-04-03 22:25:15 · 886 阅读 · 0 评论 -
zepto、jquery如何使用原型
zepto如何使用原型(function (window) { var zepto = {} function Z(dom, selector) { var i, len = dom ? dom.length : 0 for (i = 0; i < len; i++) { this[i] = dom[i] ...原创 2019-03-29 19:54:06 · 196 阅读 · 0 评论 -
Callback Hell、Promise 语法
Callback Hellfunction loadImg(src, callback, fail) { var img = document.creatElement('img') img.onload = function () { callback(img) } img.onerror = function () { fail() }...原创 2019-03-29 19:44:31 · 167 阅读 · 0 评论 -
JavaScript实现继承的几种方式总结
虽然在ES6中有了继承，使用extends关键字就能实现。本篇讲的不是这种，而是ES6之前的几种实现继承的方式。（一）原型链ECMAScript中将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。（不理解原型链的童鞋们可以翻阅一下我之前的博客，里面有详细的说明）实现原型链的一种基本模式function SuperType(){ t...转载 2019-03-29 19:15:36 · 155 阅读 · 0 评论 -
JavaScript 继承
继承 - JS// 动物function Animal() { this.eat = function () { console.log('animal eat') }}// 狗function Dog() { this.bark = function() { console.log('dog bark') }}Dog....原创 2019-03-29 19:11:04 · 119 阅读 · 0 评论 -
箭头函数和普通函数的区别
首先知道一下什么是箭头函数，箭头函数就是没有function关键字，而是一个类似箭头的函数：var a = ()=>{ return 1;}相当于function a(){ return 1;}那么就来看一下他们的区别箭头函数作为匿名函数,是不能作为构造函数的,不能使用newvar B = ()=>{ value:1;}var b = new B(...转载 2019-03-29 18:23:35 · 618 阅读 · 0 评论 -
JavaScript中常见的字符串操作函数及用法汇总
1、字符串转换字符串转换是最基础的要求和工作，你可以将任何类型的数据都转换为字符串，你可以用下面三种方法的任何一种：var num= 19; // 19var myStr = num.toString(); // "19"var num= 19; // 19var myStr = String(num); // "19"var num= 19; // 19var myStr = ...转载 2019-03-26 21:16:13 · 224 阅读 · 0 评论 -
AJAX
1、什么是 AJAX？异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。AJAX 是一种用于创建快速动态网页的技术。AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。抛开上面的介绍，ajax...转载 2019-03-26 22:44:13 · 231 阅读 · 0 评论 -
css--文字超出省略号
一行内文字超出显示省略号.p { overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}两行文字超出后显示省略号.p { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webki...原创 2019-03-26 22:55:14 · 179 阅读 · 0 评论 -
HTTP常见状态码
HTTP状态码200 & OK: 请求成功；204 & No Content: 请求处理成功，但没有资源可以返回；206 & Partial Content: 对资源某一部分进行请求(比如对于只加载了一般的图片剩余部分的请求)；301 & Move Permanently: 永久性重定向；302 & Found： 临时性重定向；303 &...原创 2019-03-27 12:35:15 · 139 阅读 · 0 评论 -
hybrid
hybrid 是什么，为何用 hybrid？hybrid 是客户端和前端的混合开发hybrid 存在的核心意义在于快速迭代，无需审核 hybrid实现流程（图），以及webview 和 file 协议前端做好静态页面（html js css），将文件交给客户端客户端拿到前端静态页面，以文件形式存储在 app 中客户端在一个 webview 中使用 file 协议加载静态页面介绍...原创 2019-03-31 12:59:58 · 933 阅读 · 0 评论 -
React vs vue
1、两者的本质区别vue - 本质是 MVVM 框架，由 MVC 发展而来React - 本质是前端组件化框架，由后端组件化发展而来但这并不妨碍他们两者都能实现相同的功能2、模板和组件化的区别1）模板的区别vue - 使用模板（最初由 angular 提出）React - 使用 JSX 模板语法上，我更加倾向于 JSX模板分离上，我更加倾向于 vue2）组件化的区别...原创 2019-03-31 12:46:52 · 177 阅读 · 0 评论 -
setState
setState 为何需要异步？可能会一次执行多次 setState你无法规定、限制用户如何使用 setState没必要每次 setState 都重新渲染，考虑性能即便是每次重新渲染，用户也看不到中间的效果只看到最后的结果即可setState 的过程每个组件实例，都有 renderComponent 方法执行 renderComponent 会重新执行实例的 render...原创 2019-03-31 12:41:40 · 161 阅读 · 0 评论 -
jsx和vdom
说一下对组件化的理解什么是组件：组件的定义和引用组件的封装：封装视图、数据、变化逻辑组件的复用：props 传递、复用JSXJSX 语法（标签、JS 表达式、判断、循环、事件绑定）JSX 是语法糖，需被解析成 JS 才能运行 JSX是独立的标准，可被其他项目使用JSX 是 React 引入的，但不是 React 独有的，React 已经将它作为一个独立标准开放，其他项目也可用...原创 2019-03-31 12:28:34 · 296 阅读 · 0 评论 -
vue 的整个实现流程
vue 中如何解析模板模板：字符串，有逻辑，嵌入 JS 变量……模板必须转换为 JS 代码（有逻辑、渲染 html、JS 变量）render函数是什么样子的render 函数执行是返回 vnodeupdateComponentvue 的整个实现流程第一步：解析模板成 render 函数with 的用法模板中的所有信息都被 render 函数包含模板中用到的 data 中的...原创 2019-03-31 12:09:01 · 723 阅读 · 0 评论 -
VUE双向数据绑定
什么是响应式修改 data 属性之后，vue 立刻监听到data 属性被代理到 vm 上vue 中如何实现响应式关键是理解 Object.defineProperty将 data 的属性代理到 vm 上VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的，它接收三个...原创 2019-03-31 11:56:49 · 202 阅读 · 0 评论 -
vdom
vdom 是什么？为何会存在 vdom？virtual dom ， 虚拟 DOM用 JS 模拟 DOM 结构DOM 操作非常“昂贵”将 DOM 对比操作放在 JS层，提高效率vdom 如何应用，核心 API 是什么如何使用？可用 snabbdom 的用法来举例核心 API：h 函数、patch 函数介绍一下 diff 算法知道什么是 diff 算法，是 linux 的基...原创 2019-03-31 11:42:46 · 830 阅读 · 0 评论 -
8种清除浮动的方法
8种清除浮动的方法：父级div定义 height父级div定义 display:table父级div 也一起浮动父级div定义 overflow:hidden父级div定义 overflow:auto父级div定义 伪类:after 和 zoom结尾处加空div标签 clear:both结尾处加 br标签 clear:bothafter伪类清楚浮动的写法：.clearfix...原创 2019-03-26 23:02:01 · 282 阅读 · 0 评论