自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(31)
  • 收藏
  • 关注

原创 声明

博主的es6文章为观看阮一峰http://es6.ruanyifeng.com/#README的笔记,仅供个人学习使用

2018-11-22 10:44:30 90

原创 hybrid基础知识

hybrid存在的价值:1、可以快速迭代更新(无需APP审核,如果是APP的代码,更新版本是需要审核的)2、体验流畅(和native类似)3、减少开发成本,Android和iOS可以共用一套前端代码webview:1、是APP的一个组件,可以有也可以没有2、用于加载h5页面,即一个小型的浏览器内核file协议:1、就是类似于本地HTML文件,在文件夹直接打开这个文件也可以浏览2、就算把WiFi关了这个文件也是可以打开的,而且本地文件加载快,所以hybrid要加..

2020-06-12 17:43:29 1799

原创 react中setState的过程

setState是异步的,原因如下:1、可能会一次性执行多次的setState,因为你无法限制用户如何使用setState2、没必要没吃setState都重新渲染,考虑性能3、即便每次重新渲染,用户也不会看到中间效果,所以只需要看到最后的结果Vue的数据改变也是异步的,object.defineproperty中的set函数当数据改变的时候set中执行updateComponent(这个方法是异步的),set不是异步的setState过程:1、每个组件实例,都有rende..

2020-06-12 16:10:04 733

原创 vue的模板解析

Vue的模板本质是字符串,有逻辑,如v-if、v-for,模板最终会转换成JS代码(因为JS能实现逻辑并且JS能渲染HTML页面)先来看看with怎么用var data = { name: 'hhh', age: 18}function test() { console.log(data.name) console.log(data.age) with (data) { console.log(name) console

2020-06-08 15:35:55 382

原创 vue响应式

先来看看Object.defineProperty能干什么var obj = {}var name = 'zhangsan'Object.defineProperty(obj, 'name', { get: function () { console.log('get') return name }, set: function (v) { console.log('set') name = v ..

2020-06-05 14:14:24 113

原创 vdom(虚拟DOM)

vdom就是用JS模拟DOM结构,DOM变化的对比放在JS层来坐,提高重绘性能首先先来看下DOM节点body的属性,下图可以看出属性非常大,所以DOM的操作是“昂贵”的,js的运行效率高,我们要尽量减少DOM的操作,项目越复杂,DOM操作影响越严重如何用JS模拟DOM结构,如下<ul id='test'> <li class='item'>111</li></ul>//js模拟{ tag:'ul', ..

2020-06-02 17:09:47 1275

原创 浏览器的渲染机制

1、什么是DOCTYPEDTD是一系列的语法规则,用来定义XML或XHTML的文件类型。浏览器会使用它来判断文档类型,决定使用何种协议来解析以及切换浏览器模式。DOCTYPE是用来声明文档类型和DTD规范的。DOCTYPE的3种写法:HTML5 <!DOCTYPEhtml> HTML4.01 Strict (严格模式,包含所有的HTML元素和属性,不包括展示性和弃用的元素,如font) 和 HTML4.01 Transitional(传统模式,包含所有的HT...

2020-05-27 11:27:16 137

原创 js错误监控

监控错误的几种方式1、运行时的错误就是代码错误try...catch window.onerror2、资源加载的错误object.onerror(例如img.onerror事件) performance.getEntries(页面已经加载成功的资源,返回的是一个数组,加载失败的不在这个数组里面) error事件捕获,代码如下:<!DOCTYPE html>&l...

2020-03-05 19:05:09 145

原创 提升页面性能的方法

1、资源压缩合并,减少Http请求2、非核心代码异步加载动态脚本加载(动态创建script标签然后append到body中) defer(是在HTML解析完之后才会执行,如果是多个,按照价值的顺序依次执行) async(是在加载完之后立即执行,如果是多个,执行顺序和加载顺序无关)3、利用浏览器缓存强缓存就是直接从浏览器副本中读取出来(请求响应头会有:expiress、cache-...

2020-03-05 18:14:51 157

原创 跨域通信方式

1、jsonp:通过script,这里不详细说了2、hash:就是url#号后面的东西,hash的改变不会刷新页面(search就URL?号后面的东西,search的改变会刷新页面,不可以用来跨域通信)例子如下:A页面通过iframe或frame嵌入了跨域的页面B //A页面 var b = document.getElementsByClassName('left')...

2020-03-05 15:07:21 155 1

原创 函数的继承

构造函数的继承 function parent() { this.name = 1 this.play = [3,4] } parent.prototype.say = function () { console.log('say') } function children() { pare...

2020-03-03 16:51:58 887

原创 http协议类

HTTP主要的方法有GET、POST、PUT、DELETE、HEAD(获取报文头部)POST和GET的区别:1、GET在浏览器回退时是无害的,而POST会再次提交请求2、GET产生的URL地址可以被收藏,而POST不可以3、GET请求会被浏览器主动缓存,而POST不会,除非手动设置4、GET请求只能进行URL编码,而POST支持多种编码方式5、GET请求参数会被完整的保存在...

2020-03-03 10:27:48 102

原创 自定义事件

代码如下: var evc = new Event('custome') document.getElementsByClassName('left')[0].addEventListener('custome', function (e) { console.log(e) }) var event = new CustomEvent(...

2020-03-02 17:24:25 252

原创 css盒模型

css盒模型包括标准模型和IE模型盒模型包括:content、padding、border、margin这些属性标准模型的宽高指的是content的宽高IE模型的宽高是指content、padding、border加起来的宽高设置这两种模型的css属性:box-sizing: content-box(标准模型,浏览器默认),box-sizing: border-box(IE模型)...

2020-03-02 16:16:31 109 1

原创 页面布局的几种方法

高度固定,左右300px,中间自适应左 中 右 第一种: float浮动会脱离文档流,要清除浮动,兼容性比较好第二种: position定位会脱离文档流,所以子元素也会脱离文档流,写法比较便捷第三种: flex不兼容IE8,最常用,兼容性也好第四种: table操作繁琐,兼容性好,兼容IE8第五种: grid代码量少,新出的属性代码如下:...

2020-03-02 15:12:00 793

原创 原型和原型链(jquery为例子)

首先,我们先看下jQuery是怎么用的,如下:let a = $('p');a.css('color', 'red');a.html();a.value();简单实现zepto原型:var zepto = {};zepto.init = function (selector) { var slice = Array.prototype.slice; var...

2020-01-02 11:14:48 178

原创 git 常用命令

git add index.js //添加修改文件git add . //添加所有修改git commit -m 'demo' //提交代码git diff //对比当前修改git status //查看当前修改状态git branch //查看当前分支git checkout index.js //删掉index.js所有修改git c...

2019-12-16 15:00:45 90

原创 基础知识(js-web-api)

一、DOM(document object model)//获取元素var div1 = document.getElementById('div1')var div2 = document.getElementsByTagName('div')var div3 = document.getElementsByClassName('content')var div4 = docume...

2019-11-22 17:58:07 150

原创 基础知识(同步和异步)

查看前端常见面试题 13、14、15题

2019-11-22 15:52:48 131

原创 基础知识(作用域和闭包)

一、全局作用域(比如:window)二、函数作用域(比如:function内声明的变量只能function内使用)三、块级作用域(比如:if语句内声明的变量只能if内使用)自由变量:一个变量如果在当前作用域没有定义,但被使用了,就向上级作用域一层一层寻找,直到找到位置,如果到全局作用域都没有找到,则报错xx is no defined,如下:let a = 0;functio...

2019-11-18 10:57:21 88

原创 基础知识(原型和原型链)

1、classclass Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return `( ${this.x} , ${this.y} + )`; }}var a = new Point(1, 2);a.toString(); //打印"( 1 ,...

2019-11-14 10:13:10 84

原创 基础知识(变量类型和计算)

一、值类型常见的有:number、string、Boolean、undefined、Symbollet a = 100;let b = a;a = 200;console.log(b) //打印100二、引用类型常用的有:object、Array、null(指针指向为空)、functionlet a = {number: 10};let b = a;a.numb...

2019-11-13 16:22:37 167

原创 前端常见面试题

让我们来看看有哪些常见的面试题,比如:1、typeof能判断哪些类型?2、何时使用===何时使用==?3、window.onload和DomCententLoaded有什么区别?4、JS创建5个P标签,点击的时候弹出对应的序号?5、手写节流 throttle、防抖debounce?6、Promise解决了什么问题?7、值类型和引用类型的区别?8、手写深拷贝?9、...

2019-11-13 15:37:44 274

原创 js面试知识点

本章节讲解js面试的知识点,共分为: 基础知识 1、原型、原型链 2、作用域、闭包 3、异步、单线程 Web API 1、DOM BOM 2、Ajax 跨域 3、事件 存储 开发环境 1、版本管理 2、调试、抓包 3、...

2019-11-13 15:18:07 100

原创 顶层对象

ES5 只有两种声明变量的方法:var命令和function命令。ES6 除了添加let和const命令,还有另外两种声明变量的方法:import命令和class命令。所以,ES6 一共有 6 种声明变量的方法。 顶层对象的属性顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象。ES5 之中,顶层对象的属性与全局变量是等价的。 global ...

2018-11-22 10:24:44 891

原创 const 命令

const声明一个只读的常量。一旦声明,常量的值就不能改变。 const的作用域与let命令相同:只在声明所在的块级作用域内有效。const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。const声明的常量,也与let一样不可重复声明。相关用法请查看上一篇文章let命令本质const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内...

2018-11-22 10:06:53 101

原创 let 命令

ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,如果在代码块外使用,会报错,如下图:  1、for循环的计数器,就很合适使用let命令,变量i是var命令声明的,在全局范围内都有效,所以全局只有一个变量i。每一次循环,变量i的值都会发生改变,所以为10,如果使用let,声明的变量仅在块级作用域内有效,最后输出的是 6...

2018-11-22 09:20:15 161

原创 JS常见算法

1、冒泡排序排序后2个相等键值的顺序和排序之前它们的顺序相同什么时候最快(Best Cases):   当输入的数据已经是正序时 什么时候最慢(Worst Cases):   当输入的数据是反序时function bubbleSort(arr) { var len = arr.length; for (var i = 0; i &lt; len; i++) { ...

2018-07-27 14:29:03 719

原创 JsBridge基本用法

前言现在流行Hybrid App,即混合开发,也就是半原生半Web的开发模式,有跨平台运行效果,当然了,实质最终发布的仍然是独立的原生APP(各种的平台有各种的SDK),但是相比原生APP,性能仍然有较大的损耗,不适合交互性强或者性能要求较高的APP(比如动画较多的),JSBridge是H5与Native通信的桥梁现有的库:https://github.com/marcuswestin/W...

2018-07-26 16:31:31 5376

原创 http 304响应的理解

我们经常会看到请求地址中状态存在304、200 如果客户端(浏览器)发送的是一个条件验证请求,则web服务器可能会返回304响应,这就表明了客户端中所请求资源的缓存仍然是有效的,也就是说该资源从上次缓存到现在没有被修改过,浏览器会自动识别并读取缓存中的文件来显示 在进行条件请求时,一般请求头会带上  If-Modified-Since、 If-None-Match,这两个值分别...

2018-07-11 16:07:24 9439

原创 window.open()被浏览器拦截问题

一、原因浏览器为了维护用户安全和体验,在JS中直接使用window.open(url,"_blank")来打开新的链接是会被拦截的,(window.open(url,”_self”)改变当前的窗口是可以生效的),通常项目需要在ajax异步请求完成后来打开新链接,下面提供几种解决方案二、解决方案方案一、创建一个a标签,利用a标签跳转,能解决大多数浏览器兼容问题,但是这种方法写在aja...

2018-07-11 11:16:59 5960

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除