- 博客(35)
- 收藏
- 关注
RSS订阅
原创 数据可视化平台 vue+node+webpack+echarts+d3
前言随着公司的发展和进步，数据大屏的业务日益增长，公司目前的做法大致可以分为两种 人肉 or 第三方工具平台 .人肉：很简单，一个前端配备，熟练的 html + css + js 技能就完事了 ；优点：开发灵活多变不足：效率低，页面复用度不高（几乎为0复用度），大量重复性工作，占用前端开发时间 等当然，也有人会说，目前比较主流的前端框架，像 Vue ,React 都是组件化，模块儿化的工...
2020-03-11 10:14:15
7131
6
原创 Vue3 分分钟上手不叫事儿
前言Vue3 自2020年9月份发布之后，截至目前也有半年的时间了，一直以来，刷过文档，看过文章，窥过视频，就是没有撸过代码 ~ 那么 ~ 今天 ~ 现在 ~ 在这里 ~ 撸一把针对 Vue3 和 Vue2 的差异，我就不过多的言语了，官网也给到了一些说明，最直接能体现的就是编码的风格上，把Vue2中的零散逻辑改成新提供的CompositionAPI组合在一起来维护，并且还可以将单独的逻辑的功能拆分成单独的文件，完美的解决了Vue2中mixin混入的缺点（命名冲突，逻辑重用等问题）进入正题 ： Co
2021-03-27 17:29:57
326
3
原创 Vue模板编译
前言前边有分享过 React 的工作原理，那么 Vue 又是怎样的编译原理呢，经过几天的翻阅，视频，现在来分享给大家，共勉 。参考在分享 Vue 响应式原理的时候，我们有看到一张图，很详细的体现了Vue实例的整个生命周期，那么今天我们就从这张图来作为入口从图上来看，结合我们之前分享的响应式原理，可以知道，new Vue(options) 主要执行了 this._init(options) 初始化方法，而这个方法就定义在 init.js 中 ，下方简约代码详解// 入口文件 src/core/in
2020-12-04 00:42:39
337
原创 Vue原理 【 Vue.extends 】
前言首先：我们引用官方的案例，先来认识一下 vue.extends Api 的介绍和用法Vue.extends(options)使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数<div id="mount-point"></div>// 创建构造器var Profile = Vue.extend({ template: '<p>{{firstName}
2020-12-01 16:45:39
1938
原创 React Hook 真的香嘛
前言时隔两年，又一次回到 React 的怀抱，这是一种久违且又怀念的味道，为什么这么说呢 ？2018年6，7月的时候，我曾经在一位IOS同事的带领下，使用了 React Native 为公司做了一款数据分析相关的App ，而后又相继使用了 React 写了一个后台应用，在此期间深受那位同事的开发模式启发，对模块化，组件化，组件高度复用 … 等都有了新的理解与认识；与此同时，也深深的喜欢上了 React 。其实，我怀念的是 …而后，我跳槽了，从 React 又回到了 Vue （原因也简单，新的公司统
2020-11-17 23:38:11
214
原创 React 【 工作原理浅析】
前言什么是虚拟 Dom ?什么是 Jsx ？React 又是怎么工作的 ?… …今天，我们来根据上边的三个问题，来对 React 进行一次浅度剖析 ！什么是虚拟 Dom ?Virtual DOM (虚拟Dom) 是一种编程概念 ，在这个概念里 ，UI 是以一种虚拟的结构形式保存在内存中，然后通过编译转换，变成真实Dom的一种技术。那它到底是什么呢 ?对象 ，yes ，就是一个 Javascript 对象 ， 用这个 Javascript 对象来表示Dom信息和结构，当状态变更的时候，重新渲染
2020-11-06 22:14:03
842
2
原创 手写代码之 【发布订阅】
前言在目前比较火热的前端主流框架中，相信大家都已经默认是三大家族 Vue , React , Angular 了 ，谈到它们呢，无疑离不开一个关键词 组件 ；为什么这么说：因为在它们的设计模式中，都希望是以一个个细小的组件来组成一个大的组件，而这个大的组件就是我们要写的前端页面了， 说到这里，也许已经有童鞋知道我要表达什么意思了，其实我就是想说：在一个前端工程中，存在着很多这样的组件，那么这些组件都有着复杂的关系 ，如 嵌套，相邻，不相关 等 ， 他们如何通信呢 ? okey ，我们通过 Vue ,
2020-11-05 23:52:07
514
原创 手写代码之 【New 运算符】
前言先来看一段 MDN 上的一个例子function Car(make, model, year) { this.make = make; this.model = model; this.year = year;}const car1 = new Car('Eagle', 'Talon TSi', 1993);console.log(car1.make); // Eagle new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例 。从上边例子中可以看
2020-09-25 16:01:32
287
原创 Js工具方法
包含 Array，Json，Function的对象如何转成字符串// obj 要转的对象function obj2Str(obj){ switch(typeof(obj)){ case 'object': var ret = []; if (obj instanceof Array){ for (var i = 0, len = obj.length; i < len; i++){ ret.push(obj2Str(obj[i]));
2020-09-08 10:41:57
117
原创 浅析vue-router路由实现原理
前言通过B站视频和一些童鞋的文章结合GitHub源码阅读来理解路由的实现原理看过前章vuex状态管理的分享之后，相信对路由这块也是非常感兴趣的，同样的模式，同样的方式，我们走进GitHub之vue-router同样直接走进 srccomponents：route-link 组件 和 router-view 组件 实现history：关于浏览器相关，包含 hash模式 , basic...
2020-04-17 01:11:14
2507
原创 浅析vuex状态管理实现原理
前言通过B站视频和一些童鞋的文章结合Git源码阅读来理解vuex的实现原理话不多说，我们直接上源码首先来看一下vuex的源码目录，众所周知，主要工程一般都在 src 下，所以我们直接从这里开始module：模块构造函数和模块集合管理plugins：插件，调试 dvtools 日志记录吧 loggerhelpers：集成语法糖 mapState, mapMutations, ma...
2020-04-14 23:29:30
988
原创 数据响应式之Proxy受虐式
前言通过珠峰课程的学习来理解computed计算属性的原理那首先呢，先回顾一下vue的响应式数据原理Vue 在初始化数据时，会给 data 中的所有属性使用 Object.defineProperty 重新定义 setter 和 getter , 当页面获取到对应属性时，会触发 get 方法并进行依赖收集（收集当前组件的watcher） 如果属性发生变化会通知相关依赖进行更新操作 。其实呢...
2020-04-12 23:45:16
272
原创 Vue原理 【 组件为何采用异步渲染 - nextTick的实现原理 】
前言有人说：是为了提高性能，对，根本上也是这么个道理 ；那到底是如何做的呢 ?其实在vue中，响应式数据是组件级的，也就是说，每一次的更新都是渲染整个组件，如果是同步的话，根据我们前边理解的响应式数据原理，一旦修改了data属性，便会触发对应的 watcher，然后调用对应 watcher 下的 update 方法更新视图，那么结果显而易见，太频繁了 ！如下代码：// 省略多余模板语法d...
2020-03-17 15:10:48
1321
原创 Vue是如何检测数组变化的
前言通过上一篇文章，我们知道了Vue初始化data的响应式原理，只讲到了对象是如何通过defineReactive 方法对data属性创建监测的，而数组则只是略带过，下边我们就通过源码来捋一下首先看回这个判断 src/core/observer/index.js Observer 类构造函数// 我们看回这段代码 if (Array.isArray(value)) { // 是数组 ...
2020-03-12 23:02:40
1064
原创 Vue原理【响应式数据】
前言通过珠峰课程的学习来理解 Vue 源码的响应式原理 。响应式原理1.核心点: Object.defineProperty2.默认 Vue 在初始化数据时，会给 data 中的属性使用 Object.defineProperty 重新定义所有属性,当页面获取到对应属性时。会进行依赖收集（收集当前组件的watcher） 如果属性发生变化会通知相关依赖进行更新操作。什么叫依赖收集 ？通过...
2020-03-12 11:58:52
947
1
原创 前端必不可少的性能优化
前言说到前端性能优化，绝对是对一个前端攻城狮的综合考量 ~ 作为一个前端，在功能ok的前提下，最重要的应该就是体验了，有人说：正常打开一个页面超过3 ~ 5秒等待，还没有打开，我就不会等了 《首屏加载》这个活动也太low了，体验一点都不好 《Js编码》每次新打开同一个页面都好慢 《浏览器缓存》还有 《DNS解析》《页面重排与回流》《静态资源文件与图片加载》《网络请求》等等 … …...
2019-12-28 11:59:04
4932
10
原创 前端必须要知道的跨域
前言什么是跨域通俗一点来讲跨域是指一个域下的文档或脚本试图去请求另外一个域下的资源，这样就产生了跨域，域: 是指计算机网络中的一种形式， 在域中使用计算机的每个人都会收到一个唯一的用户帐户，然后可以为该帐户分配对该域内资源的访问权限。常见跨域场景做为一个前端，我们最常遇到的跨域应该就是浏览器请求资源跨域，专业一点来讲就是受到了浏览器同源策略的限制；所谓同源是指"协议+域名+端口"三者相...
2019-12-22 17:41:05
1153
2
原创 NodeJs 之文件模块
前言Node.js 文件系统（fs 模块）, 为我们提供了目录和文件的创建,删除,以及读写操作 .模块中的方法均有异步和同步，例，读取文件内容函数 ：异步的 fs.readFile()同步的 fs.readFileSync()。异步的方法函数最后一个参数为回调函数，回调函数的第一个参数是 error ，第二个是成功返回 res ，建议大家使用异步方法，比起同步，异步方法性能更高，速度更快...
2019-12-21 14:41:36
831
原创 Node 之路由
前言在NodeJs中，路由提供请求的 URL 和其他需要的 GET 及 POST 参数，随后路由需要根据这些数据来执行相应的代码，通俗点说：通过 NodeJs路由可以拿到 地址栏 url 和 http 模块 get post 参数 ， 通过一个实例来实践一下创建一个 router.js 实现一个简单的服务，内容如下：var http = require("http"); // 引入http...
2019-12-16 14:36:03
771
原创 NodeJs 之模块系统
前言随着前端的发展，工程模块儿化已经是必不可少的一部分了，为了让NodeJs的文件可以相互调用，NodeJs提供了一个简单的模块系统；简单点说：一个 nodeJs 文件就是一个模块儿 。通过代码来实践认识一下，创建一个模块儿，上边我们说到一个nodeJs 文件就是一个模块儿，那么创建一个模块儿其实就是创建一个 NodeJs 文件，这里我们创建一个 hello.js 文件，内容如下：通过 ex...
2019-12-15 16:37:43
531
原创 NodeJs 之Stream(流)
前言流 - stream 是一个抽象接口，Node 中有很多对象实现了这个接口。在NodeJs中，Stream 有四种流类型：可读操作。可写操作。可读可写操作.操作被写入数据，然后读出结果。所有的 Stream 对象都是 EventEmitter 的实例。常用的事件有：data - 当有数据可读时触发，通俗点说就是读取或者写入数据时触发。end- 没有更多的数据可读时触发，通...
2019-12-12 21:45:53
430
原创 NodeJs 之Buffer(缓冲区)
前言JavaScript 语言自身只有字符串数据类型，没有二进制数据类型。但在处理像TCP流或文件流时，必须使用到二进制数据。因此在 Node.js中，定义了一个 Buffer 类，该类用来创建一个专门存放二进制数据的缓存区。在 Node.js 中，Buffer 类是随 Node 内核一起发布的核心库。Buffer 库为 Node.js 带来了一种存储原始数据的方法，可以让 Node.js ...
2019-12-12 21:07:47
636
原创 NodeJs 之事件循环 ( EventEmiter 类)
前言Node.js 是单进程单线程应用程序，但是因为 V8 引擎提供的异步执行回调接口，通过这些接口可以处理大量的并发，所以性能非常高。上一章我们说了NodeJs几乎每一个 API 都是支持回调函数的，并且也介绍了回调函数。Node.js 单线程类似进入一个 `while(true)` 的事件循环，直到没有事件观察者退出，每个异步事件都生成一个事件观察者，如果有事件发生就调用该回调函数.
2019-12-09 22:43:02
527
原创 NodeJs 之 回调函数
前言说到回调函数，可能大家都会想到异步编程的首选解决方案 9102，更多的异步编程方案层出不穷，典型的代表就是 promise ，async await 不扯远了，回到NodeJs 。Node.js 异步编程的直接体现就是回调，回调函数在完成任务后就会被调用，Node 使用了大量的回调函数，Node 所有 API 都支持回调函数。例如：我们可以一边读取文件，一边执行其他命令，在文件读取完成...
2019-12-09 16:04:11
628
2
原创 这是一篇你想要的文章
前言 计划与分享首先，很开心这位童鞋能够看到这篇文章，也证明了缘分这件事儿，既然 “相见” (博文相见) 何不 “相建” (相互建议学习一下) ，come on .当前分类专栏 - 目录VueReactJavascriptNodeWebpackEs6Web 前端后续准备追加 - 目录FlutterSQL数据库相关知识看到我博客的童鞋门可能已经很清楚了我的分类...
2019-12-09 13:38:37
585
2
原创 webpack 核心知识点探索与认识
## 前言 - 学习webpack阅读实践记录二#### 目录 - Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 - Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。 - Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。 - Loader：模块转换器，用于把模块原内容按照需求转换成新内容。 - Plugin：扩展插件，在 We
2019-12-05 14:48:17
284
原创 Hello Webpack
前言 - 学习webpack阅读实践记录一目录安装与使用LoaderPluginDevserver安装与使用# npm i -D 是 npm install --save-dev 的简写，--save 是指安装模块并保存到 package.json 的 devDependencies# 安装最新稳定版npm i -D webpack# 安装指定版本npm i -D ...
2019-12-05 11:02:26
330
原创 ES6 看这篇就够了
前言 ES6 核心知识点学习整理记录let , const解构赋值字符串，正则，数组，对象，函数的扩展 + SymbolSet , Map 数据结构、Proxy 代理 / 拦截 ， ReflectGenerator 函数async 函数Promise对象class 类module 模块儿let ， constES6新增了...
2019-11-29 14:40:39
552
原创 Javascript 【核心】
前言 - Javascript 工作中常用核心知识点汇总本章分享常用Js核心知识点 ，开发必会，面试必备，深拷贝 ，浅拷贝，作用域，作用域链，执行上下文，关键字 this，高阶函数 - 闭包，原型，原型链，Js 面向对象 - 封装 - 继承，执行机制 - 事件循环 - Event Loop，函数防抖与节流，函数柯里化一，深拷贝，浅拷贝如何理解深拷贝和浅拷贝呢深拷贝是创建一个新的内...
2019-11-21 19:55:01
947
2
原创 Javascript【 基础】
前言 - Javascript 工作中常用基础知识点汇总 - Javascript 数据类型 - Javascript 常用数组操作方法 - Javascript 常用对象操作方法 - Javascript 事件模型 - 冒泡 - 事件对象 - 事件委托 / 代理
2019-11-20 14:39:19
509
原创 手写Vue响应式 【Object.defineProperty】
前言 - 双向数据绑定的原理博主自叙 ，Demo 写于 2019 年初使用Vue技术栈也有3年了，对里边的各种API，属性，内置组件封装可以说是非常熟练了，一直知道双向数据绑定的原理是通过数据劫持，结合发布者-订阅者模式的方式来实现的；可理论始终是理论，忍不住还是动动小手撸了一把 ； 请大家尽管吐槽吧 。参考文章 简书：https://www.jianshu.com/p/23180880d3...
2019-11-19 18:31:00
520
原创 初识 React + Antd + webpack 简单实例 （可预览）
React 基础实践 - 前言这个Demo实践于 2018 年 5 月 ，当时是经过 React Native 的洗礼之后，写了这个 Demo 。React China 中文社区Github 源码React + Antd + webpack 预览 目录介绍相关页面最后呢，简单介绍一下React 和 React Native 的区别 ！React 是为了使前端的V层更具组件化...
2019-11-17 21:25:52
511
原创 Vue + VueRouter + Webpack 实例 （源码含备注）
首先说一下为什么要写这篇博文，都9102了，为什么还在写那些老掉牙的 vue 基础分享，听我细细道来：1，不管是 9102 还是 2020 ，技术的更新道路上都是万变不离其宗的，vue 也是一样，尽管3.0已然到来，可是还是有很多同学 2.x 全然不知2，通过我的一个简单实例，来帮助那些想学习vue技术栈的童鞋和即将入门前端的小白3，也是最重要的一点，2018年7月，基于某公司部分产品技术栈转型使用vue，部分同事需要学习一下，快速上手，那么我很荣幸的成为了给大家分享vue技术栈的 ‘导师‘ ；
2019-11-17 12:01:20
395
原创 说一说为什么要写博客这件事儿 ~
说一说为什么我要写博客" 像我这样优秀的人，本该灿烂过一生，怎么二十多年到头来，还在人海里浮沉 . . . . . . "有人会说：各种技术博客多如牛毛，为什么还要花时间去整理那些重复的东西 浪费时间，不如花点时间去学习学习新技术“我”又
2019-11-16 22:24:59
351
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人