- 博客(48)
- 收藏
- 关注
RSS订阅原创 ts转js
在线编译，进入typescript官网http://www.typescriptlang.org/，点击里面的playground就可以直接写代码了。在本地编译运行Typescript需要使用npm下载typescript npm install -g typescript tsc Hello.ts 运行后就会发现在同一文件夹下生成了Hello.js。webstorm编辑器可以自动生成相...
2019-06-28 14:54:56
3207
转载 HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后...
2019-04-12 19:38:33
229
转载 使用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
2295
转载 axios
axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API 拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF引入方式：$ npm install axi...
2019-04-12 16:49:56
193
转载 web移动端页面性能优化方案
众所周知，在互联网行业里，移动端占有的比例越来越高了，尤其实在电商领域，用户购物大部分在移动端。比如淘宝双11，在移动端支付的接近7成。这就要求我们产品质量越来越高，那对于我们前端工程师来说也是一个挑战，如何让我们所开发的页面能有更好的体验，就是我们今天讨论的话题：移动端页面性能优化。Html5的出现对于移动端影响挺大，HTML5框架可以提升网站的访问速度，通过优化前端将响应时间加快，使用户的等...
2019-04-08 15:44:34
1258
转载 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
3292
原创 纯CSS写三角形-伪类法
HTML：<span></span>CSS：span:after { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #555555; content: ""; position: re...
2019-04-05 15:26:20
1293
转载 纯CSS写三角形-border法
HTML：<!-- 向上的三角形 --> <div class="triangle_border_up"> <span></span> </div> <!-- 向下的三角形 --> <div class="triangle_border_down"> <span>&l...
2019-04-05 15:08:34
201
原创 JavaScript算法笔试题
判断一个字符串出现次数最多的字符，统计这个次数1、var str = 'asdfssaaasasasaa';function test(str) { var json = {}; for (var i = 0; i < str.length; i ++) { if (!json[str.charAt(i)]) { json[str...
2019-04-04 19:53:15
626
1
原创 前端项目中加入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
840
原创 如何使用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
281
1
原创 hybrid
hybrid 是什么，为何用 hybrid？hybrid 是客户端和前端的混合开发hybrid 存在的核心意义在于快速迭代，无需审核 hybrid实现流程（图），以及webview 和 file 协议前端做好静态页面（html js css），将文件交给客户端客户端拿到前端静态页面，以文件形式存储在 app 中客户端在一个 webview 中使用 file 协议加载静态页面介绍...
2019-03-31 12:59:58
888
原创 React vs vue
1、两者的本质区别vue - 本质是 MVVM 框架，由 MVC 发展而来React - 本质是前端组件化框架，由后端组件化发展而来但这并不妨碍他们两者都能实现相同的功能2、模板和组件化的区别1）模板的区别vue - 使用模板（最初由 angular 提出）React - 使用 JSX 模板语法上，我更加倾向于 JSX模板分离上，我更加倾向于 vue2）组件化的区别...
2019-03-31 12:46:52
150
原创 setState
setState 为何需要异步？可能会一次执行多次 setState你无法规定、限制用户如何使用 setState没必要每次 setState 都重新渲染，考虑性能即便是每次重新渲染，用户也看不到中间的效果只看到最后的结果即可setState 的过程每个组件实例，都有 renderComponent 方法执行 renderComponent 会重新执行实例的 render...
2019-03-31 12:41:40
140
原创 jsx和vdom
说一下对组件化的理解什么是组件：组件的定义和引用组件的封装：封装视图、数据、变化逻辑组件的复用：props 传递、复用JSXJSX 语法（标签、JS 表达式、判断、循环、事件绑定）JSX 是语法糖，需被解析成 JS 才能运行 JSX是独立的标准，可被其他项目使用JSX 是 React 引入的，但不是 React 独有的，React 已经将它作为一个独立标准开放，其他项目也可用...
2019-03-31 12:28:34
271
原创 vue 的整个实现流程
vue 中如何解析模板模板：字符串，有逻辑，嵌入 JS 变量……模板必须转换为 JS 代码（有逻辑、渲染 html、JS 变量）render函数是什么样子的render 函数执行是返回 vnodeupdateComponentvue 的整个实现流程第一步：解析模板成 render 函数with 的用法模板中的所有信息都被 render 函数包含模板中用到的 data 中的...
2019-03-31 12:09:01
690
原创 VUE双向数据绑定
什么是响应式修改 data 属性之后，vue 立刻监听到data 属性被代理到 vm 上vue 中如何实现响应式关键是理解 Object.defineProperty将 data 的属性代理到 vm 上VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的，它接收三个...
2019-03-31 11:56:49
170
原创 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
801
原创 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
168
原创 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
149
转载 JavaScript实现继承的几种方式总结
虽然在ES6中有了继承，使用extends关键字就能实现。本篇讲的不是这种，而是ES6之前的几种实现继承的方式。（一）原型链ECMAScript中将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。（不理解原型链的童鞋们可以翻阅一下我之前的博客，里面有详细的说明）实现原型链的一种基本模式function SuperType(){ t...
2019-03-29 19:15:36
133
原创 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
101
转载 箭头函数和普通函数的区别
首先知道一下什么是箭头函数，箭头函数就是没有function关键字，而是一个类似箭头的函数：var a = ()=>{ return 1;}相当于function a(){ return 1;}那么就来看一下他们的区别箭头函数作为匿名函数,是不能作为构造函数的,不能使用newvar B = ()=>{ value:1;}var b = new B(...
2019-03-29 18:23:35
581
转载 为什么vue中data必须是一个函数
vue组件中的data必须是函数类比引用数据类型Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响举个例...
2019-03-29 17:57:37
4668
原创 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
926
转载 HTTP请求头和响应头部包括的信息有哪些？
HTTP请求头部信息：每个HTTP请求和响应都会带有相应的头部信息。默认情况下，在发送XHR请求的同时，还会发送下列头部信息：Accept:浏览器能够处理的内容类型Accept-Charset:浏览器能够显示的字符集Accept-Encoding：浏览器能够处理的压缩编码Accept-Language：浏览器当前设置的语言Connection：浏览器与服务器之间连接的类型Cooki...
2019-03-28 23:09:44
2073
转载 CSS权重及优先级
权重的概念权重，是一个相对的概念，是针对某一指标而言。某一指标的权重是指该指标在整体评价中的相对重要程度。权重系数，是表示某一指标项在指标项系统中的重要程度，它表示在其它指标项不变的情况下，这一指标项的变化，对结果的影响。css样式优先级！important>行间样式>id选择器>class选择器 属性选择器>标签选择器>通配符css样式的权重值上一部分是...
2019-03-28 20:59:34
360
原创 addEventListener-捕获阶段-冒泡阶段
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>addEventListener-捕获阶段-冒泡阶段</title> </head> <body> <div id="div2">...
2019-03-28 20:45:40
732
转载 经典的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
2962
转载 匿名函数、自执行函数、闭包
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
259
原创 对网站重构的理解
网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变 UI 的情况下，对网站进行优化，在扩展的同时保持一致的 UI。对于传统的网站来说重构通常是：表格(table)布局改为 DIV + CSS使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对 IE6 有效的)对于移动平台的优化针对于 SEO 进行优化深层次的网站重构应该考虑的...
2019-03-27 23:00:33
323
原创 GET和POST的区别，何时使用POST？
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符。POST：一般用于修改服务器上的资源，对所发送的信息没有限制。GET方式需要使用 Request.QueryString 来取得变量的值。POST方式通过 Request.Form 来获取变量的值。也就是说 Get 是通过地址栏来传值，而 Post 是通过提交表单来传值。在以下情况中，请使用 ...
2019-03-27 22:58:35
531
转载 对象的引用、浅拷贝、深拷贝
对象的引用除了基本类型跟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
230
转载 原型、原型链、作用域链
什么是原型？js每声明一个function，都有prototype原型，prototype原型是函数的一个默认属性，在函数的创建过程中由js编译器自动添加。也就是说：当生产一个function对象的时候，就有一个原型prototype。prototype的属性值是一个对象，是属性的集合。function Person(name,age){ this.name=name; t...
2019-03-27 16:45:25
251
转载 前端安全知识
XSSxss: 跨站脚本攻击（Cross Site Scripting）是最常见和基本的攻击 WEB 网站方法，攻击者通过注入非法的 html 标签或者 javascript 代码，从而当用户浏览该网页时，控制用户浏览器。xss 主要分为三类：DOM xss :DOM即文本对象模型，DOM通常代表在html、xhtml和xml中的对象，使用DOM可以允许程序和脚本动态的访问和更新文档的内...
2019-03-27 14:57:12
503
转载 前端解决跨域的九种方法
什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：资源跳转：A链接、重定向、表单提交。资源嵌入：link、script、img、frame等dom标签，还有样式中background:url()、@font-face()等文件外链。脚本请求： js发起的ajax请求、dom和js对象的跨域操作等。其实我们通常所说的跨域是狭义的，是由浏...
2019-03-27 13:24:04
420
原创 如何让高度不确定的div水平垂直居中
html结构如下：<div class="parent"> <div class="child"></div></div>不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行：.parent { position:relative;}.child { position: absolute; t...
2019-03-27 12:55:13
1736
原创 HTTP常见状态码
HTTP状态码200 & OK: 请求成功；204 & No Content: 请求处理成功，但没有资源可以返回；206 & Partial Content: 对资源某一部分进行请求(比如对于只加载了一般的图片剩余部分的请求)；301 & Move Permanently: 永久性重定向；302 & Found： 临时性重定向；303 &...
2019-03-27 12:35:15
120
原创 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
258
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人