- 博客(110)
- 收藏
- 关注
RSS订阅原创 前端之路由篇
一. 路由的前世今生前端开发的同学们，在日常工作中或多或少的会使用到页面的路由。尤其是今年来前端路由框架层出不群，React, Vue 等主流前端框架也都有各自标配。更多的是在单页面应用中，通过路由实现局部刷新，按需加载等都可以通过其关联来实现。那么路由的基本原理怎样？一个路由库是如何实现？解析来我们简要的分析并实践它。二. 路由的基本原理1. 常见路由分类HASH 路由hash 路由通常在url中会携带 # 字符， 其后部分对应为hash值。hash值的改变会触发onhashchange事件
2020-07-09 18:41:57
867
原创 CSS3 & SCSS 样式简洁之道
CSS3 & SCSS 样式简洁之道SCSS 代码*{ html, body { width: 100%; height: 100%; background-color:#fff; margin:0; display: flex; // flex 弹性盒子布局 flex-wrap: wrap; // 换行 }}// 定义一个方法@mixin present($size:100px,$bodyColor:#ff5151, $re
2020-05-08 18:46:50
721
原创 Require 与 Import 区别
在ES6之前， 社区制定了一些模块加载方案， 主要有CommonJS 和 AMD 两种。 前者用于服务器，后者用于浏览器。 ES6在语言标准俺的层面上，实现了模块功能，而且实现得相当简单，完全可以取代CommonJS 和 AMD 规范， 成为浏览器和服务器通用的模块解决方案。ES6模块的设计思想是尽量的静态化，是得编译时就能确定模块的依赖关系，以及输入和输出的变量。 CommoJS和AMD模块，...
2020-02-11 22:06:07
391
原创 关于 HTTP 与 HTTPS 的详解
目录一. 计算机通信原理TCP 应用程序之间的通信IP: 计算机之间的通信二. HTTPHTTP概念HTTP协议层HTTP请求响应模型HTTP工作过程涉及的概念HTTPSHTTPS概念一. 计算机通信原理计算机之间的通信是通过TCP/IP协议在因特网上进行的。该协议也是互联网关键技术。实际上TCP/IP是两个协议：TPC： Transmission Control Protocol 传输...
2020-02-08 19:13:50
1999
原创 React16.x 生命周期
挂载卸载过程相关生命周期constructor()通常情况在组件实例化时，首先执行该生命周函数用来初始化组件的state, props 等信息。同时由于ES6与ES5 在继承机制上有多不同：ES5的继承， 实质实现构建子类的实例对象this, 然后在将父类的可继承属性及方法添加到这个this上面(Parent.apply(this))。ES6的继承， 实质是先创建父类的实例对象th...
2020-02-07 17:03:05
444
原创 React 之 jest 前端自动化测试
一. 自动化测试简介为什么要前端自动化测试：自动化测试可以间接的提供代码的测试，多人协作时相互之间未知逻辑的改动等产生的未知或新问题的预警。有效避免一些未考虑到及低级的错误。自动化测试需要工作：自动化测试需要我们手动编写测试代码，当部分逻辑发生改变时，也需要同步更新我们的测试代码。重一定的角度上它也间接的提高了开发及维护成本。这点在实际开发运用中，大家根据实际项目情况来衡量。...
2020-02-06 13:57:46
7223
原创 React Hooks 常用钩子及基本原理
一. 简述在以往的react16.8前， 我们React组件创建方式基本包含两种方式： 类组件， 纯函数组件。 React 团队希望组件最佳写法应该是函数，而不是类。然而常规的纯函数组件有以下特点：没有状态没有生命周期没有 this因存在如上特点，使得纯函数组件只能做UI展示的功能， 涉及到状态的管理与切换就不得不用到类组件或这redux。 但因为简单的页面也是用类组件，同时要继承...
2020-02-04 11:57:49
10206
原创 React 之常用组件类型
无状态组件主要用于内部没有状态更新操作的组件。 同构props进行基本的数据渲染或常量展示。 该类组件职责单一，有利于组件的高复用。例：const PureComponent = (props) => ( <div> { props.list.map((txt, index) => { r...
2020-02-03 11:48:29
1452
原创 Js 正则表达式常用梳理
一. 正则声明1. 构造函数方式var reg = new RegExp('\d', 'gi');通过 new 构造正则表达式对象， 第一个参数为正则内容， 第二个参数为修饰符。 这的参数匀为字符串修饰符的作用是对匹配进行限定修饰符有三种：** i, g, m, ** 可以同时出现， 没有顺序(在正则解析上 gi == ig)(1) i : 忽略大小写匹配(2) g:...
2019-12-26 16:07:18
503
原创 ESLint 之个人配置传送门
ESLint 项目中的个人配置文件 .eslintrc.jsmodule.exports = { // 解析ES6 'parser': 'babel-eslint', 'parserOptions': { // 启用ES8语法支持 'ecmaVersion': 2017, // module表示ECMAScript模块 '...
2019-12-14 18:11:52
343
原创 关于前端工程化实践
目录一. 前端工程化实践1. 项目构建之WebPack2. 多人协作开发规范ESLint一. 前端工程化实践1. 项目构建之WebPack2. 多人协作开发规范ESLint关于ESLintESLint属于一种QA工具， 是一个ESCMAScript/JavaScript语法规则和代码风格的检查工具，可以用来保证书写出语法正确，风格统一的代码。ESList 旨在完全可配置，它的目标是提...
2019-12-03 20:02:48
552
原创 RN 开发流程简述
目录一. RN简介1. RN背景及由来一. RN简介1. RN背景及由来 早期开发一款Android, IOS App 需要Android, ios 两个团队。同时两个平台/终端需要两套代码，复用率及成本比较高。传统方式开发的Android, ios 无法实现动态更新， 每次更新都需要响应APP应用市场上传，过程复杂还需要等待app审核。如果审核还没通过，新的版本需求来了就造成了非常尴...
2019-12-01 12:48:42
4733
原创 js基础手写Demo知识点总结
/* 知识点1： 变量声明提升，但是赋值不不会提升 var a = 1; if(true) { console.log(a); // 1 var a = 2; var b = 3; } console.log(a); //2 console.log(...
2019-11-19 17:37:43
247
原创 Css 常用知识总结
目录一. CSS 之单位篇CSS 之 px, em, rem一. CSS 之单位篇CSS 之 px, em, rem背景简介PX 为单位*px 比较精准和固定。 只要页面某个元素设置了px字体大小，其子元素/子孙元素未设置字体大小或者设置字体大小对应的CSS优先级没有父元素高，该子元素/子孙元素会继承其父原始px设置的大小；*这种方式存在一个问题，当用户通过滚动鼠标改变浏览器...
2019-11-17 15:14:00
207
原创 Vue 原理学习总结
Vue 如何实现双向绑定Vue 将MVVM做为数据绑定的入口。几个Vue源码关键核心概念：Observer 数据的观察者，监听自己的
2019-11-07 22:52:38
365
原创 前端基础原理知识汇总
目录一. 手写原理实现类1. 防抖和节流一. 手写原理实现类1. 防抖和节流控制一些持续触发的事件执行的时机的一种方法。 比如： resize, scroll, mousemove等。防抖(debounce)防抖： 触发事件后指定时间内其函数只执行一次， 若在指定的时间内又触发了事件，则会重新计算函数的执行时间。（防抖函数也可分为：立即执行和非立即执行两种类型）非立即执行：fun...
2019-10-26 20:37:41
1833
原创 Vue SSR之 服务端渲染
序言SSR 是解决目前一些对SEO, 首屏渲染速度问题的优选方案。 目前VUE SSR 的实现由两种： 一种是基于官方Vue SSR 指南文档的官方方案；一种是vue.js 通过应用框架–NUXT。 其中官方方案能更直接的控制应用程序的结构， 更深入底层，更加灵活。 而NUXT 提供了平滑的开箱即用的体验，它建立在同等的Vue技术栈之上， 但抽象出很多模板，并提供了一些额外的功能。 例如： 静...
2019-10-20 16:56:12
341
原创 KOA 之 原理及流程简介
序言KOA 由Express 架构的原班人马打造的新型架构。 其特点:代码少，使用方便， 支持异步Async. 目前其2.x版本支持ES7的语法。在编程中会显得更加简洁明了。本章将通过个人学习总结的相关知识与大家分享，如有错误往指出。KOA 思路流程图首先来看看下面的流程图，有个主观的认识：KOA 原理及流程分解未完待续…...
2019-10-19 11:55:23
1068
原创 Web开发 之 回流和重绘
序言回流和重绘的了解，对Web开发者进一步了解页面渲染基本流程及页面性能优化都有帮助。本文将对这两步具体做了些什么，以及在整个页面渲染中的所在位置进行一些分享。浏览器渲染过程了解先从浏览器渲染过程来了解回流重绘，有一个整体的概念。...
2019-10-17 16:46:10
271
原创 Vue-Router源码分析及实现流程梳理
序言Web 开发的同学们都知道单页应用如此盛行的年代， 路由在我们的日常开发项目中以成为必不可少的一门功课。目前市面上号称三足鼎立的前端框架 React, Vue， Angular，都会有对应的强大路由支持。 Vue.js 具有性能， 通用，易用，体积，学习成本低等特点。目前比较受到前端同学们的喜爱，其对应的路由Vue-Router 也是设计的简单且功能强大。 本文我们从Vue-Router 源...
2019-10-10 23:46:00
453
原创 Web开发之性能优化
背景Web开发的普及，访问量的不断增大。 对web 站点的要求也越来越高。 页面相应速度， 加载文件大小控制，异步加载，按需加载等优化页面性能的方式大家或多或少都会关注。本章将结合实际开发过程中用到的一些比较实用的技术/方法/第三方库/插件等来做一个分享及讨论。目的通过本文章，一方面是知识的积累，另一方面希望能帮助到阅读者在开发工作中也能得到收益。页面性能优化页面性能优化之 文件加载...
2019-10-08 17:24:19
841
原创 骨架屏之 Webpack插件篇
背景我们会遇到一些情况， 当前的项目不需要服务端渲染， 那么我们又当如何快速自动化生成骨架屏呢？带着这个问题，本章将带大家一起使用另一个美到粗暴的方式： 通过webpack 插件来实现骨架屏效果。设计思想这里假设你的项目是通过webpack 构建生成的静态部署资源。 并且你的构建过程中...
2019-10-06 17:39:20
1087
原创 PM2 自动化部署项目 之 （Vue SSR）
背景常规部署项目比较传统的方式通过上传工具直接上传文件替换服务器文件， 也可以通过Xftp 方式来更新/发布指定站点。随着项目复杂度的增强，开发技术等手段增多。一些部署方式显得有点力不从心，且操作过程，失误率很难把控。本章将基于现在比较流行的一套开发模式（如： VUE + SSR） 输出的项目来了解如何通过PM2 来实现自动化部署我们的站点项目。== 必须说的一点是：本章重点不在PM2 相关...
2019-10-05 23:29:49
2041
1
原创 骨架屏 之 Vue SSR（快捷简易版本解决方案）
一. 骨架屏简介 简单来说， 骨架屏就是填充了背景等特效的真实页面手稿轮廓图。 它可以是精确/粗略的描述了页面各个元素大小，形状，位置占位的一种页面真实数据渲染加载前的排版。 目的是加载页面过程中给用户一种较好体验的过渡效果，降低用户的焦灼情绪。避免页面过大/网络过慢长时间白屏或者闪烁。二. 骨架屏的实现方案目前生成骨架屏的技术方案大概有三种：使用图片，svg 或者手动编写骨架屏代码：...
2019-10-05 11:33:19
990
原创 Promise 原理解析 (渐进实例详解)
前言Promise 前端开发或多或少都有了解或使用到。 抽空梳理了一下，阅读本章希望能帮助了解Promise到底是怎么实现的。 我们采用渐进法，通过Demo 逐步实现Promise来体会Promise的用法。Promise 规范有很多， 如 Promise/A, Promise/B, Promise/D == 以及 Promise/A 的升级 Promise/A+ , 有兴趣可以去了解下。...
2019-10-01 20:53:42
412
原创 Vue原理解析(十一) 之 extend 和$mount 原理及示例
上一篇： Vue 原理解析（十）:之 事件API 原理及组件库的使用之前在网上看到一个精美的确认弹框组件。 不过使用起来并不是很方便， 如果每个使用的地方需要引入该组件，需要注册， 需要给组件加ref 引用， 需要调用事件来控制状态。 其实这个组件相对来说比较独立的， 我们在使用组件库的时候， 相信都有调用过命令式弹框组件的经历， 今天我们来搞懂命令式组件的实现原理， 以及将这个精美的弹窗组...
2019-09-29 22:39:46
1548
原创 Vue 原理解析(十) 之 事件API原理及组件库中的使用
上一篇： vue 原理解析 之 computed 和 watch 原理在vue 内部初始化时会为每个组件实例挂载一个this._events 私有的空对象属性：vm._events = object.create(null) // 没有___proto__ 属性这个里面存放的就是当前实例上的自定义事件集合， 也就是自定义事件中心， 它存放着当前组件所有的自定义事件。 和自定义事件相...
2019-09-29 21:51:51
474
原创 Vue 原理解析（九）之 computed 和watch 原理
上一篇： Vue 原理解析（八） 之 diff 算法之前的章节， 我们按照流程介绍了vue的初始化， 虚拟Dom生成， 虚拟Dom转为真实Dom, 深入理解响应式以及diff 算法等这些核心概念。 对它内部的实现做了分析， 这些首饰篇底层的原理。 下面我们将介绍日常开发中经常使用的API的原理， 进一步丰富vue 的认识， 主要包括如下API：响应式相关API： this.watch,t...
2019-09-28 22:14:09
5826
1
原创 Vue源码解析（八） 之 diff 算法
上一篇 Vue 源码解析(七) 之 响应式原理： 数组之前章节介绍了VNode 如何生成真实Dom, 这只是patch 内首次渲染做的事， 完成了一小部分功能而已， 而它做的最重要的事情是当响应式触发时，让页面的重现渲染这一过程能高效完成。 其实页面的重新渲染完全可以使用新生成的Dom去整个替换掉旧的Dom, 然而这么做比较低效， 所以借助接下来将要介绍的diff比较算法来完成。diff...
2019-09-27 23:20:58
714
1
原创 Vue原理解析(七)： 理解响应式-数组
上一篇: Vue 原理解析（六）: 全面深入理解响应式原理-对象数组更新首先看下改变数组的两种方式：export default { data() { list: [1, 2, 3] }, methods: { changeArr1() { // 重新赋值 this.list = [4, 5, 6] }, changeArr2()...
2019-09-26 23:33:48
1649
1
原创 Vue原理解析(六)：理解响应式原理-对象
上一篇 Vue 原理解析(五)： 虚拟Dom到真实Dom的生成过程vue 之所以能数据驱动视图发生变更的关键就是：依赖它的响应式系统了。 响应式系统如果根据数据类型区分： 对象和数组两者的实现会有所不同。 解释响应式原理，需要从整体流程出发， 不在vue 组件化的整体流程中找到响应式原理的位置，对深刻理解响应式原理不太好。 接下来我们从整体流程出发， 试着站在巨人的肩膀上分别说明对象和数组...
2019-09-25 23:39:47
1047
1
原创 Vue 原理解析（五）之 虚拟Dom 到真实Dom的转换过程
上一篇 vue 原理解析(四)： 虚拟Dom 是怎么生成的再有一颗树形结构的Javascript对象后， 我们需要做的就是讲这棵树跟真实Dom树形成映射关系。我们先回顾之前的mountComponnet 方法：export function mountComponent(vm, el) { vm.$el = el ... callHook(vm, 'beforeMount')...
2019-09-24 21:04:00
11881
2
原创 Vue 原理解析(四)： 虚拟Dom是怎么生成的
在经过初始化阶段之后，即将开始组件的挂载，在挂载之前有必要了解下虚拟Dom 的概念。我们知道[email protected] 开始引入了虚拟dom， 主要解决的问题是， 大部分情况下可以降低使用Javascript 去操作跨线程的庞大dom所需要的昂贵性能，让dom 操作的性能更高效； 以及虚拟Dom可以用于SSR以及跨端使用。虚拟Dom, 顾明思议并不是真实的Dom, 而是使用javascript 的对象来对真...
2019-09-23 14:57:03
3434
原创 vue 原理解析（三）：初始化时created之前做了什么
上一篇 Vue解析原理（二）： 初始化时beforeCreate之前做了什么？我们继续this._init() 的初始化相关操作， 接着又会执行如下三个初始化方法：initInjections(vm)initState(vm)initProvide(vm)5. initInjections(vm): 主要作用是初始化inject, 可以访问到对应的依赖。inject 和 prov...
2019-09-22 15:50:21
3279
1
原创 Vue 原理解析（二）：初始化时beforeCreate之前做了什么
上一篇： Vue原理解析（一） Vue到底是什么上一章我们知道在 new Vue() 时， 内部会执行一个this._init() 方法， 这个方法是在initMixin(Vue) 内定义的：export function initMixin(Vue) { Vue.prototype._init = function(options) { ... }}当执行new ...
2019-09-22 11:51:05
8545
2
原创 Vue原理解(一): Vue 是什么？
Vue, 现阶段受热指数上升比较块的前端架构。有必要从源码的角度，对它的功能的实现原理一窥究竟。看源码一般主要看两样东西， 从宏观角度是它的设计思想和实现原理； 微观上则是编程技巧。 这里我们侧重点是实现原理上。vue 是什么？我们在使用vue时，初始化操作都会使用new Vue({…})，不难发现 vue 其实是一个类。 不过ES6普及的今天，vue 的定义任是普通构造函数。 为什么不用 ...
2019-09-21 21:35:07
2182
1
原创 H5 EChart 左右滑动加载实践
H5 EChart 左右滑动加载实践快速实现一个支持左右滑动的EChart h5 实践：滑动前：滑动后：源码：<template><div class="box1"> <div class="wrap">...
2019-09-18 17:12:47
1286
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人