- 博客(59)
- 收藏
- 关注
RSS订阅原创 什么是 PWA
什么是 PWA先说一下全名，progressive web app： 渐进式网页应用。这是谷歌推出的，我是这样理解的： 我们一般写 web 应用，在 pc 上是没有缓存的，打开页面的时去请求数据。 第二个也没有像 app 一样的小图标放在桌面，一点开就进入了应用，而是通过打开浏览器输入网址， 第三个就是，不能像 app 一样给用户推送消息，像微博会跟你推送说有谁评论了...
2019-10-12 10:24:36
441
原创 js什么是迭代器、可迭代对象、生成器
什么是迭代器(Iterator)？满足迭代器协议的对象。迭代器协议: 对象的next方法是一个无参函数，它返回一个对象，该对象拥有done和value两个属性：done(boolean): 如果迭代器已经经过了被迭代序列时为true。这时value可能描述了该迭代器的返回值。 如果迭代器可以产生序列中的下一个值，则为false。这等效于连同done属性也不指定。 valu...
2019-10-10 14:13:30
1383
1
原创 伪类与伪元素的区别
伪类与伪元素，傻傻分不清楚。伪类(pseudo-classes)官方定义:The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the...
2019-10-09 16:17:25
199
原创 浏览器跨标签页通讯
不同标签页间的通讯，本质原理就是去运用一些可以 共享的中间介质，因此比较常用的有以下方法: 通过父页面window.open()和子页面postMessage 异步下，通过 window.open('about: blank') 和 tab.location.href = '*' 设置同域下共享的localStorage与监听window.onstorage 重复写入相同的...
2019-10-09 16:01:18
815
原创 Javascript 寄生组合式继承
寄生组合式继承，是集寄生式继承和组合继承的有点与一身，主要是通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。 先看一个例子： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 functioninheritPrototype(...
2019-10-09 11:24:16
160
原创 闭包的问题
闭包属于一种特殊的作用域，称为 静态作用域。它的定义可以理解为: 父函数被销毁 的情况下，返回出的子函数的[[scope]]中仍然保留着父级的单变量对象和作用域链，因此可以继续访问到父级的变量对象，这样的函数称为闭包。 闭包会产生一个很经典的问题: 多个子函数的[[scope]]都是同时指向父级，是完全共享的。因此当父级的变量对象被修改时，所有子函数都受到影响。 解决: 变...
2019-10-08 21:10:27
635
原创 另一种方式实现vue的响应式原理
Proxy在目标对象之前架设一层“拦截”，外界对该对象的访问都必须先通过这层拦截，因此提供一种机制，可以对外界的访问进行过滤和改写。<input type="text" id="txt" /><div id="show"></div><script type="text/javascript"> // proxy的实现 const ...
2019-10-06 22:12:35
86
原创 vue中如何缓存你想缓存的路由
<keep-alive> <router-view v-if="$route.meta.keepAlive"> <!--这里是会被缓存的路由--> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"...
2019-10-05 21:40:16
1085
原创 vue中axios的封装
一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。如果还对axios不了解的，可以移步axios文...
2019-10-04 09:08:35
297
1
原创 前端路由的实现
前言前端路由是现代SPA应用必备的功能,每个现代前端框架都有对应的实现,例如vue-router、react-router。我们不想探究vue-router或者react-router们的实现，因为不管是哪种路由无外乎用兼容性更好的hash实现或者是H5 History实现，与框架几个只需要做相应的封装即可。提前声明: 我们没有对传入的参数进行及时判断而规避错误,也没有考虑兼容性问题...
2019-09-30 10:58:03
124
原创 key在Vue列表渲染时究竟起到了什么作用
key的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。最常见的用例是结合...
2019-09-29 17:35:59
228
原创 Vue的组件通信之Provide与Inject机制
Vue中父组件到子组件的通信主要由子组件的props属性实现。但是在一些情况下，父组件无法直接向子组件的props传值。比如子组件通过父组件的slot进入父组件，父组件根本不知道子组件是谁，更不用说用子组件的props了。这时应该怎么办呢？Vue在2.2.0版本引入了provide与inject，正好适合处理这一情况。什么是provide与inject用文档的话说：provide...
2019-09-29 10:32:26
1309
1
原创 Vue 父子组件数据传递( inheritAttrs + $attrs + $listeners)
Vue组件如何通信？Vue组件通信的方法如下:props/$emit+v-on: 通过props将数据自上而下传递，而通过$emit和v-on来向上传递信息。 EventBus: 通过EventBus进行信息的发布与订阅 vuex: 是全局数据管理库，可以通过vuex管理全局的数据流 $attrs/$listeners: Vue2.4中加入的$attrs/$listeners可以...
2019-09-29 10:23:54
330
原创 Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法，很少讲实际的应用场景和用例，以致于即便明白了怎么写，也不知道怎么用。本文不讲语法，就讲自定义指令的用法。 自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。 比如谷歌图片的加载做得非常优雅，在图片未完成加...
2019-09-28 18:27:15
146
原创 React16时代生命周期 ?
新的生命周期函数是怎样的React生命周期分为三个阶段：挂载、更新、卸载，React16后又多了一个异常，我们一一看下。[更新图片，此处特别感谢 @wuzhengyan2015 指正]挂载生命周期的执行顺序constructor static getDerivedStateFromProps render componentDidMountrend...
2019-09-28 18:25:53
127
原创 Vue 服务器端渲染 SSR
引言最近笔者和小伙伴在研究Vue SSR，但是市面上充斥了太多的从0到1的文章，对大家理解这其中的原理帮助并不是很大，因此，本文将从Vue SSR的构建流程、运行流程、SSR的特点和利弊这几方面对Vue SSR有一个较为详细的介绍。最后还将附上一个笔者实现的去除Vue全家桶的Demo案例。剖析构建流程首先我们镇上一张官网给出的构建图：Vue SSR构建流程app.js入口文...
2019-09-24 10:08:40
183
原创 url schema 协议：web端调用native，输出返回值，调用web回调
场景：混合开发,web调用原生登录页面，API如图：web端代码：// 以7、调用原生登录页面为例子function jumpCallbackHandler(result){ // 拿到result，做接下来的事情}// 给native端传递的参数var params = { "category":"jump", "des":"login", "params"...
2019-09-23 14:30:37
811
原创 实现一个简单的JavaScript模板引擎
var TemplateEngine = function(tpl, data) { // magic here ...}var template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>';console.log(TemplateEngine(temp...
2019-09-21 11:37:58
571
原创 手动实现Array.prototype.reduce
Array.prototype.selfReduce = function () { const ary = this const { length } = ary const callback = arguments[0] // 如果有初始值，从数组的第0项开始循环，如果没有初始值，...
2019-09-20 11:20:25
308
原创 js各种继承方式和优缺点的介绍
1.原型链继承 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 functionParent () { this.name ='kevin'; } Parent.protot...
2019-09-20 11:09:26
79
原创 React 组件生命周期
组件的生命周期可分成三个状态：Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM生命周期的方法有： componentWillMount在渲染前调用,在客户端也在服务端。 componentDidMount: 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOM...
2019-09-18 16:14:07
73
原创 Vue和React到底选哪个？
Vue和React都是前端UI框架，那么到底该选哪个用于开发项目呢？主要区别Vue与react有很多的相似之处，但他们也有完全不一致的地方。模板 vs JSXReact与Vue最大的不同是模板的编写。Vue鼓励你去写近似常规HTML的模板。写起来很接近标准HTML元素，只是多了一些属性。<ul> <template v-for="item in it...
2019-09-18 16:02:38
1189
原创 react-redux到底是什么
1. 目录redux简介 案例 react-redux核心介绍2. redux简介 redux是react全家桶的一员，它试图为 React 应用提供「可预测化的状态管理」机制。 Redux是将整个应用状态存储到到一个地方，称为store 里面保存一棵状态树(state tree) 组件可以派发(dispatch)行为(action)给store,而不...
2019-09-18 14:25:50
102
原创 跨域
本文主要涉及三种跨域方法：JSONP、CORS、postMessage。Q：为什么会出现跨域问题？A：出于浏览器的同源策略限制，浏览器会拒绝跨域请求。*注：严格的说，浏览器并不是拒绝所有的跨域请求，实际上拒绝的是跨域的读操作。浏览器的同源限制策略是这样执行的：通常浏览器允许进行跨域写操作（Cross-origin writes），如链接，重定向； 通常浏览器允许跨域资源嵌入（Cro...
2019-09-18 10:13:55
100
原创 解决fixed布局里内容不滚动问题
//注意给父级加上(1)横向滚动left:0;right:0;然后想要横向滚动的话overflow-x:scroll;overflow-y:hidden;（2）竖直方向滚动top:0;bottom:0;position:fixed;overflow-y:scroll;overflow-x:hidden;...
2019-09-17 17:29:08
1704
原创 React中容器组件和展示组件
Redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想。明智的做法是只在最顶层组件（如路由操作）里使用 Redux。其余内部组件仅仅是展示性的，所有数据都通过 props 传入。那么为什么需要容器组件和展示组件相分离呢？这里有个基本原则：容器组件仅仅做数据提取，然后渲染对应的子组件，记住这个点，Trust me！看下面这个展示列表的例子，不区分容器和展示组件...
2019-09-13 16:05:32
948
原创 Redux数据范式化
前言现代web应用的飞速发展，特别是数据驱动思想指导下的React、vue等框架的出现，让我们越来越需要关注数据的组织管理。随着应用复杂度的提升，如果不对数据进行有效合理的设计拆分，那么从性能、可维护性等方面来看会逐渐成为一种阻碍。所以我们需要关注前端数据设计。其实没有一种很明确的规范告诉我们具体到前端的数据结构应该如何去设计。关系数据库设计有很多范式，借鉴而不照搬结合前端自身特点，才是好...
2019-09-13 15:36:56
215
原创 react通用组件的设计
1.前端组件库的设计原则1.1 细粒度的考量我们在学习设计模式的时候会遇到很多种设计原则,其中一个设计原则就是单一职责原则,在组件库的开发中同样适用,我们原则上一个组件只专注一件事情,单一职责的组件的好处很明显,由于职责单一就可以最大可能性地复用组件,但是这也带来一个问题,过度单一职责的组件也可能会导致过度抽象,造成组件库的碎片化。举个例子，一个自动完成组件(AutoComplete)...
2019-09-07 18:51:03
653
原创 用 GitLab CI 进行持续集成
简介从 GitLab 8.0 开始，GitLab CI 就已经集成在 GitLab 中，我们只要在项目中添加一个.gitlab-ci.yml文件，然后添加一个 Runner，即可进行持续集成。 而且随着 GitLab 的升级，GitLab CI 变得越来越强大，本文将介绍如何使用 GitLab CI 进行持续集成。一些概念在介绍 GitLab CI 之前，我们先看看一些持续集成相关...
2019-09-04 18:33:02
184
原创 Promise常用API
Promise 的常用 API 如下：Promise.resolve(value)类方法，该方法返回一个以 value 值解析后的 Promise 对象 1、如果这个值是个 thenable（即带有 then 方法），返回的 Promise 对象会“跟随”这个 thenable 的对象，采用它的最终状态（指 resolved/rejected/pending/settled）2、如果传入...
2019-09-04 15:02:35
1574
原创 彻底弄懂函数柯里化
什么是柯里化（ curry）在数学和计算机科学中，柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。举例来说，一个接收3个参数的普通函数，在进行柯里化后， 柯里化版本的函数接收一个参数并返回接收下一个参数的函数， 该函数返回一个接收第三个参数的函数。 最后一个函数在接收第三个参数后， 将之前接收到的三个参数应用于原普通函数中，并返回最终结果。// 数学和计算科...
2019-09-03 16:29:02
504
原创 Vue 四行代码实现无感知上拉加载更多
话不多说，直接上代码：//可滚动容器的高度let innerHeight = document.querySelector('#app').clientHeight;//屏幕尺寸高度let outerHeight = document.documentElement.clientHeight;//可滚动容器超出当前窗口显示范围的高度let scrollTop = document....
2019-09-02 14:48:52
261
原创 赚钱能力总结篇
1. 在社会上生存下来和实现自己的个人梦想，赚钱能力都极其重要（强调赚钱能力而非赚钱，因为能力是可以学习来的）。2. 否认“阶层已经固话，寒门难出贵子”，越年轻，越动态，财富层级之间容易发生转变；3. 努力在财富阶层转换中至关重要，改变阶层先从努力开始；4. 绝大数学生学习不好不是因为智商，而是因为自己不够努力，没有足够重视学习这件事，没有培养出自己的学习能力；5. 父母对后代的影...
2019-08-18 20:42:12
120
原创 webpack 热更新原理
Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。例如，在开发 Web 页面过程中，当你点击按钮，出现一个弹窗的时候，发现弹窗标题没有对齐，这时候你修改 CS...
2019-08-14 22:15:58
1338
原创 Babel 是如何把 ES6 转成 ES5
将代码字符串解析成抽象语法树，即所谓的 AST 对 AST 进行处理，在这个阶段可以对 ES6 代码进行相应转换，即转成 ES5 代码 根据处理后的 AST 再生成代码字符串...
2019-08-14 11:20:24
199
原创 抽象语法树（AST）
Javascript就像一台精妙运作的机器，我们可以用它来完成一切天马行空的构思。我们对javascript生态了如指掌，却常忽视javascript本身。这台机器，究竟是哪些零部件在支持着它运行？AST在日常业务中也许很难涉及到，但当你不止于想做一个工程师，而想做工程师的工程师，写出vue、react之类的大型框架，或类似webpack、vue-cli前端自动化的工具，或者有批量修改源码...
2019-08-14 11:16:40
363
原创 如何实现 token 加密
身份认证服务端提供资源给客户端，但是某些资源是有条件的。所以服务端要能够识别请求者的身份，然后再判断所请求的资源是否可以给请求者。token是一种身份验证的机制，初始时用户提交账号数据给服务端，服务端采用一定的策略生成一个字符串（token），token字符串中包含了少量的用户信息，并且有一定的期限。服务端会把token字符串传给客户端，客户端保存token字符串，并在接下来的请求中带上这...
2019-08-13 20:43:35
7891
1
原创 浏览器的缓存机制
一、前言缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据...
2019-08-12 17:13:39
75
原创 深入理解document.referrer的用法
前言在JavaScript中，document对象有很多属性，其中有3个与对网页的请求有关的属性，它们分别是URL、domain和referrer。URL属性包含页面完整的URL，domain属性中只包含页面的域名，而referrer属性中则保存着链接到当前页面的那个页面的URL。前面两个很好理解，而referrer属性简单来说就是上一个页面的URL。那么这个属性具体有什么用处呢？在H5页...
2019-08-12 17:10:31
520
原创 vue中利用索引直接设置一个数组项，不能触发视图更新的问题
由于 JavaScript 的限制，Vue不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength举个例子：var vm = new Vue({ data: { items: ['a', 'b', 'c'] }...
2019-07-29 15:40:59
884
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人