- 博客(31)
- 收藏
- 关注
RSS订阅
原创 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
1883
原创 react中setState的过程
setState是异步的，原因如下:1、可能会一次性执行多次的setState，因为你无法限制用户如何使用setState2、没必要没吃setState都重新渲染，考虑性能3、即便每次重新渲染，用户也不会看到中间效果，所以只需要看到最后的结果Vue的数据改变也是异步的，object.defineproperty中的set函数当数据改变的时候set中执行updateComponent(这个方法是异步的），set不是异步的setState过程：1、每个组件实例，都有rende..
2020-06-12 16:10:04
781
原创 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
427
原创 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
138
原创 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
1361
原创 浏览器的渲染机制
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
168
原创 js错误监控
监控错误的几种方式1、运行时的错误就是代码错误try...catch window.onerror2、资源加载的错误object.onerror（例如img.onerror事件） performance.getEntries（页面已经加载成功的资源，返回的是一个数组，加载失败的不在这个数组里面） error事件捕获，代码如下：<!DOCTYPE html>&l...
2020-03-05 19:05:09
197
原创 提升页面性能的方法
1、资源压缩合并，减少Http请求2、非核心代码异步加载动态脚本加载（动态创建script标签然后append到body中） defer（是在HTML解析完之后才会执行，如果是多个，按照价值的顺序依次执行） async（是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关）3、利用浏览器缓存强缓存就是直接从浏览器副本中读取出来（请求响应头会有：expiress、cache-...
2020-03-05 18:14:51
192
原创 跨域通信方式
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
213
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
941
原创 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
138
原创 自定义事件
代码如下： 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
369
原创 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
159
1
原创 页面布局的几种方法
高度固定，左右300px，中间自适应左 中 右 第一种: float浮动会脱离文档流，要清除浮动，兼容性比较好第二种: position定位会脱离文档流，所以子元素也会脱离文档流，写法比较便捷第三种: flex不兼容IE8，最常用，兼容性也好第四种: table操作繁琐，兼容性好，兼容IE8第五种: grid代码量少，新出的属性代码如下：...
2020-03-02 15:12:00
880
原创 原型和原型链（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
221
原创 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
120
原创 基础知识（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
184
原创 基础知识（作用域和闭包）
一、全局作用域（比如：window）二、函数作用域（比如：function内声明的变量只能function内使用）三、块级作用域（比如：if语句内声明的变量只能if内使用）自由变量：一个变量如果在当前作用域没有定义，但被使用了，就向上级作用域一层一层寻找，直到找到位置，如果到全局作用域都没有找到，则报错xx is no defined，如下：let a = 0;functio...
2019-11-18 10:57:21
124
原创 基础知识（原型和原型链）
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
110
原创 基础知识（变量类型和计算）
一、值类型常见的有：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
204
原创 前端常见面试题
让我们来看看有哪些常见的面试题，比如：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
302
原创 js面试知识点
本章节讲解js面试的知识点，共分为： 基础知识 1、原型、原型链 2、作用域、闭包 3、异步、单线程 Web API 1、DOM BOM 2、Ajax 跨域 3、事件 存储 开发环境 1、版本管理 2、调试、抓包 3、...
2019-11-13 15:18:07
128
原创 顶层对象
ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，还有另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。 顶层对象的属性顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。 global ...
2018-11-22 10:24:44
928
原创 const 命令
const声明一个只读的常量。一旦声明，常量的值就不能改变。 const的作用域与let命令相同：只在声明所在的块级作用域内有效。const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。const声明的常量，也与let一样不可重复声明。相关用法请查看上一篇文章let命令本质const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内...
2018-11-22 10:06:53
127
原创 let 命令
ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，如果在代码块外使用，会报错，如下图： 1、for循环的计数器，就很合适使用let命令，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，所以为10，如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6...
2018-11-22 09:20:15
193
原创 JS常见算法
1、冒泡排序排序后2个相等键值的顺序和排序之前它们的顺序相同什么时候最快（Best Cases）： 当输入的数据已经是正序时 什么时候最慢（Worst Cases）： 当输入的数据是反序时function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len; i++) { ...
2018-07-27 14:29:03
762
原创 JsBridge基本用法
前言现在流行Hybrid App，即混合开发,也就是半原生半Web的开发模式,有跨平台运行效果,当然了,实质最终发布的仍然是独立的原生APP(各种的平台有各种的SDK),但是相比原生APP，性能仍然有较大的损耗，不适合交互性强或者性能要求较高的APP（比如动画较多的），JSBridge是H5与Native通信的桥梁现有的库：https://github.com/marcuswestin/W...
2018-07-26 16:31:31
5482
原创 http 304响应的理解
我们经常会看到请求地址中状态存在304、200 如果客户端（浏览器）发送的是一个条件验证请求,则web服务器可能会返回304响应,这就表明了客户端中所请求资源的缓存仍然是有效的,也就是说该资源从上次缓存到现在没有被修改过，浏览器会自动识别并读取缓存中的文件来显示 在进行条件请求时，一般请求头会带上 If-Modified-Since、 If-None-Match，这两个值分别...
2018-07-11 16:07:24
9640
原创 window.open()被浏览器拦截问题
一、原因浏览器为了维护用户安全和体验，在JS中直接使用window.open(url，"_blank")来打开新的链接是会被拦截的，（window.open(url,”_self”)改变当前的窗口是可以生效的），通常项目需要在ajax异步请求完成后来打开新链接，下面提供几种解决方案二、解决方案方案一、创建一个a标签，利用a标签跳转，能解决大多数浏览器兼容问题，但是这种方法写在aja...
2018-07-11 11:16:59
6082
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人