- 博客(89)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 vue源码分析(八)实例分析组件的patch过程
一.组件渲染从前面的文章分析可以知道Vue.prototype._render函数生成的vnode有两种类型,这是根据传入的options.tag来判断。普通vnode : 也就是typeof tag===string组件vnode： options中的tag为对象在_update方法中传入生成的vnode，进而调用__patch__ 方法，在__patch__方法中，又会调用creat...
2020-02-23 23:00:15
652
1
原创 关于Vue子组件data选项某个属性引用子组件props定义的属性的几点思考
学过Vue的都知道Vue等MVVM框架相对于传统的JS库比如Jquery最大的区别在于数据驱动视图，重点在于数据，拿到数据后将数据通过模板{{}}语法或者v-html展示在页面上。我们也都知道在Vue父子组件可以通过Props实现父组件传递到子组件。在项目开发中，我们会遇到这种需求，页面初始化时，父组件通过接口拿到需要数据，然后拿到的数据通过props传递给子组件。在子组件会有些业务上的操作来...
2018-10-14 14:09:23
8849
2
原创 express做登录验证获取req.body为空对象问题
用express作登录验证，在代码里打印req.body为空对象，通过解决这个问题对http服务，数据提交到服务器，以及工具的使用有了更加深刻的认识。出现阻塞的原因对客户端和服务端通信没有深层次的理解初次工具使用不熟练注册登录思路分析使用express框架搭建web服务器使用const {Router} = require('express'); const rout...
2018-08-23 23:56:49
10233
6
原创 深入前端尾递归
本文主要讨论了以下几个问题1）前端中的尾递归，介绍了递归，尾调用，和尾递归三个基本概念。2） 说明了尾调用的优化需要在严格模式下才会生效，尾调用优化在safari浏览器中得到实现。3）递归可能造成调用栈溢出4）可以使用循环解决调用栈溢出问题5）封装了trampoline函数和tco函数，这两个函数中巧妙利用循环解决了调用栈溢出的问题。尾递归优化的实现。
2023-02-19 17:19:04
393
原创 Typescript泛型
定义使用<T>来定义类型，使用泛型，是Typescript中的类型定义更加灵活，相比于any也更加具有语义化。中的T可以是U也可以是其他合法的字母，建议大写。泛型可以理解为不确定单独类型，函数中使用泛型，可以约束函数的参数和返回值类型相同。function identity<T>(arg: T): T { return arg;}function identity<T>(arg: T): T { console.log(arg.length)
2020-06-18 22:51:47
308
原创 Typescript函数
函数定义的两种方式函数关键字function add(x: number, y: number): number { return x + y;}函数表达式let add = function (x: number, y: number): number { return x + y;}函数类型在ts中函数类型指的是函数参数及返回值的类型完整的函数类型let foo: (x: string, y:string) => string = function(a:
2020-06-18 22:09:34
294
原创 Typescript 类
前言原型prototype是javascript的一大特性,基于原型可以实现javascript中的继承。自从es6引入了class，我们可以在javascript使用类。但es6中的class只是prototype的语法糖。在typescript中我们基本可以向传统编程语言一样使用class来帮助我们实现面向对象编程。与#c相比，ts声明类的程序成员是默认为public,也可以显示声明public与es6相比，es6 class没有public，private等修饰符es6 class和ts
2020-06-17 14:52:27
393
原创 #接口
接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。在typescript中接口可以这样理解，只定义属性的类型或者方法的参数类型和返回值类型，至于具体的值是什么，接口不关心，只需要类型保持一致，符合接口的类型约定。接口定义使用关键字interfaceinterface interface_name { }interface Fb { foo:string, bar:s
2020-06-16 21:15:25
255
原创 typescript变量声明
在typescript中，变量声明可以使用var,let,const，三个关键字的特性在typescript和javascript保持一致。比如var声明的变量没有块级作用域，而let具有块级作用域，const和let声明的变量有暂时性死区，只有声明了变量才能使用变量。另外在typescript变量声明时支持解构赋值对象解构数组解构解构时属性重命名解构时设置默认值在typescrip支持...语法创建剩余变量...
2020-06-16 20:07:11
225
原创 typescript类型
基础类型类型和javascript一样，在typescript中，数据类型也分为原始类型（基础类型）和非原始类型。原始类型numberstringbooleansymbolnullundefined非原始类型object数组元组Tuple枚举特殊类型Anyvoidnever重点与javascript类型相比，在typescript中，我们需要重点需要了解新增的类型或者新的声明方式数组数组有以下两种声明方式元素类型后接上[],表示变量是一
2020-06-16 19:48:41
278
原创 在vue中使用jsx
安装快速搭建vue的webpack开发环境step 01yarn add tj-cli global// ornpm install tj-cli -gstep 02tj-cli create vue-jsx-demostep 03npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-propsstep 04.babelrc配置{ "presets": [["env", { "mo
2020-06-02 20:51:39
547
原创 十三.vue源码学习之响应式数据
date: 2020-04-15tag:sourcecodevueauthor: TyrionJYQtitle: 十三. 响应式数据响应式数据Object.defineProperty代理代理propsvue将配置项中的props属性代理到vm上const vm = new Vue({ props: ['msg']})通过this.msg能够访问到props...
2020-04-17 21:21:58
489
原创 Vue源码学习（十二）异步组件
本文主要讲述vue中的异步组件，如果你看完本文相信你应该对vue中的异步组件有着相对深刻的理解，如果你还不知道vue中异步组件是什么，请参考vue异步组件为什么要异步组件异步组件是vue性能优化的一种方式，主要目的是为了解决页面引入很多组件导致打包后的js体积过大，我们知道同样条件下，文件体积越大，请求耗时越长，因此vue提供了异步组件，当页面中通过异步方式来声明（全局）或者注册（局部）组...
2020-04-16 00:35:55
654
原创 区分开发和生产环境配置
配置合并或三元表达式webpack开发环境和生产环境配置文件有两种方式获取当前环境变量process.env.NODE_ENV，针对开发环境或者生产环境在配置文件中使用三元表达式使用相应的loader或者plugin.webpack-merge合并配置文件打包变量区分开发或生产环境需要安装cross-envyarn add cross-env -D在package.json件中...
2020-04-07 21:11:39
1116
原创 创建自己的cli
tj-cli以tj-cli为例，介绍如何搭建cli必备模块commander: 参数解析 --help就是借助于commanderinquirer: 交互式命令行工具，实现命令行的选择功能download-git-repo: 在git中下载模板chalk: 改变console输出内容的颜色metalsmith:读取所有we年，实现模板渲染consolidate: 统一模板引擎...
2020-03-29 21:24:00
539
原创 基于vue或react搭建的个人博客demo，适合练手
vue-blogdemo中只完成了注册，登录等页面，因为没有准备部署到服务器上，所以博客主体就不打算写了技术栈vuewebpack4vue-routervuexelementui源码react-blog基于react和antd搭建的个人博客技术栈reactreact-routerantd源码后台代码共用一份后台代码,后台使用koa写的技术栈koa...
2020-03-07 21:55:52
503
原创 简记webpack proxy实现跨域
前言本文不讲述webpack devServer proxy跨域原理，只说最简单的配置webpack配置...devServer: { contentBase: './dist', port: 1234, open: false, proxy: { '/api': 'http://localhost:9999' } } ...我...
2020-03-05 14:45:46
473
原创 Vue源码学习（十一）全局组件和局部组件的注册
注册在Vue中组件注册分为全局注册和局部注册全局注册Vue.component('my-component-name', { /* ... */ })组件名 'my-component-name'配置项 { /* ... */ }局部注册var ComponentA = { /* ... */ }var ComponentB = { /* ... */ }var Compo...
2020-02-25 11:19:29
455
原创 vue源码学习（十）从源码中看vue实例的生命周期
生命周期示意图我们看官网上vue实例的生命周期示意图示例代码// Lifecycle.vue<template> <div ref="app"> <button v-on:click="clear">销毁定时器</button> <span>{{count}}</span> ...
2020-02-25 02:22:57
278
1
原创 Vue源码学习(九) Vue中的options合并
配置合并vue是一个学习成本很低的前端框架,开发者实际上只需要关注new Vue(options)中的配置即可，页面渲染，响应式数据的实现，vue 在背后做了大量的工作，本文主要分析vue实例以及组件实例的options配置是如何合并的。vue中定义了自己的默认配置,然后将用户的配置和默认配置进行合并，这种代码设计方式在我们日常开发中野会用到，比如封装基础的ajax请求，默认请求方式是POS...
2020-02-24 15:05:40
773
原创 vue源码分析(七)createComponent方法
在上文中，我们分析了当tag对应普通html标签时是通过new VNode()方式来生成VNode的。本文主要分析当tag不是字符串时调用createComponent方法生成VNode. vnode = createComponent(tag, data, context, children)一. createComponent// src/core/vdom/create-compon...
2020-02-21 15:28:33
558
原创 vue源码分析(五) 关于虚拟DOM
一. 概念在vue中定义虚拟DOM为VNode类型,每个VNode都可以拥有自己的子节点children，每个子节点也是VNode类型。虚拟DOM就是用一个原生的js对象来描述DOM结构，虚拟DOM最终会被渲染成文档树的一部分。在vue中VNode是一个class 类，在src/core/vdom/vnode.js中定义了。export default class VNode { t...
2020-02-20 18:19:04
335
1
原创 vue源码分析(四) 深入源码了解Vue实例的挂载
在vue源码分析(三) new Vue背后的故事 中我们了解了options选项中如果存在el属性或者直接调用$mount方法都会执行$mount方法。一 $mount$mount 方法的实现与平台和构建方式有关,它是定义在Vue.prototype 上，// src/platform/weex/runtime/index.jsVue.prototype.$mount = functio...
2020-02-20 03:03:23
160
原创 vue源码分析(三) new Vue背后的故事
一. 前言本文主要分析new Vue()主要发生了什么，重点分析下new Vue(options) 中对象的的data 属性。以及vue对data 里面的数据所作的this绑定。然后仿照vue的思路对一个构造函数实现类似的功能。二. new Vue(options)Vue 构造函数定义在src/core/instance/index.js 文件下// src/core/instance/i...
2020-02-19 20:48:50
379
原创 vue源码分析（二）vue运行时版本和带编译的版本区别。
vue版本vue打包后的版本有很多，其中可以归结为三大类，运行时和带编译以及完整版。具体版本信息及版本差异请移步官网，本文主要是从源码分析两种版本之间的主要差异。源码分析查看源码文件src/platforms/web/entry-runtime-with-compiler.js 可以看到当前文件夹下的vue模块来自于'./runtime/index'运行时版本中的vue// src/pl...
2020-02-19 16:00:26
1613
1
原创 vue源码分析（一）初探vue
本系列文章是作者在学习vue源码时的学习笔记，在学习的过程中会参考其他的文章，并在文末注明相关的引用。如有错误，欢迎指证。vue源码版本: [email protected]一. 类型校验vue使用了flow进行语法校验，其中vue自定义了一些数据类型比如component或者Element 等.flow是facebook出品的代码检查工具，功能类似于typeScript,能够帮助...
2020-02-18 22:55:59
284
原创 js设计模式之迭代器模式
介绍迭代器模式是一种相对简单的模式，相对普通的for循环它隐藏了迭代的具体细节.伪代码betterFor(param,fn) { if(typeof fn === 'object') { for(let i in param ) { fn.call(i) } return } if(Array.isArray(param)) { for(let i = 0,le...
2020-02-18 14:46:54
116
1
原创 JS设计模式之工厂模式
工厂模式工厂模式是JS中很常见的一种模式，用来批量创建对象，使用工厂模式可以帮助我们避免创建同类对象时产生冗余代码。下面我们通过一个实例来看看工厂模式在实际开发中的应用。实例点击页面上以下按钮页面依次弹出以下提示信息代码实现const ICONS = { success: './assets/success.png', warn: './asset...
2020-02-18 14:26:08
235
原创 JavaScript设计模式之外观模式
外观模式外观模式，顾名思义，外表看起来相同，但实际可能不一致。在JS中外观模式通常用于处理兼容性问题。比如封装了一个bindEvent事件绑定方法，不同的浏览器会调用bindEvent内部封装的浏览器所支持的方法。外观模式封装示例 myEvent = { stop: function (e) { if (typeof e.preventDefault...
2020-02-17 22:15:12
138
原创 JavaScript设计模式之装饰器模式
装饰器模式装饰器模式(AOP)是一种常见的设计模式，React框架中的高阶函数就是使用了装饰器模式，比如一个高阶函数接受了一个基础组件，这个基础组件设计之初只是一个单纯的展示组件，并没有任何的数据处理。现在我们想在这个组件渲染后发送ajax请求。有两种实现方式在原来组件的componentDidMount函数中发送ajax请求，这样会破坏了原来的展示组件。编写一个高阶函数，返回一个新的组...
2020-02-17 21:52:25
219
原创 JavaScript设计模式之中介者模式
中介者模式当很多模块之间的耦合度或依赖度过高时，我们考虑使用中介者模式来实现，各个模块之间不相互通信，而是通过中介者来完成。通过下面的示例来体会使用中介者模式和不使用中介者模式之间的差异。示例 口罩购买原型图及分析没有选择口罩种类，按钮文本为：请选择口罩种类没有选择口罩数量，按钮文本为： 请选择口罩数量选择口罩种类和数量后需要进行以下校验库存校验，库存不足，按钮文本...
2020-02-17 16:01:36
127
原创 JavaScript设计模式之代理模式
代理模式设计模式的概念都是较为抽象的，下面通过几个实例展示代理模式的实际应用虚拟代理：常见保护代理保护代理比较少见，比如后台提供的上传图片接口uploadImg,后台接受请求后，在uploadImg中过滤gif格式的图片，如果是预期的图片格式，那么调用真正的保存图片方法saveImage这种可以理解为保护代理。代理模式的实际应用函数节流const throttle ...
2020-02-16 20:49:24
117
原创 js设计模式之策略模式
一.关于策略模式含义定义一系列算法，并使他们可以相互替换这里的替换是指在Context环境类中替换所引用的策略从而实现算法的替换目的将算法的使用和算法的实现分离开来基本组成策略模式至少需要两部分策略类（可变）：封装了具体的算法，并负责具体的计算过程，策略类中定义了不同的策略，不同的策略对应不同的具体算法（计算方式）。环境类Context（不变）：接受请求，并根据调用具体的策...
2020-02-16 16:48:37
212
原创 js设计模式之单例模式
一.什么是单例模式单例模式顾名思义是在该模式下，函数调用时如果实例没有创建就新创建一个实例，再次调用该函数返回已经创建的实例。二.单例模式的通用实现在实现单例的过程中，我们通常使用两个函数，第一个函数来实现单例控制逻辑，第二个函数用来创建实例// 管理单例function getSingleton(fn) { let instance; return function...
2020-02-15 21:57:54
169
原创 js设计模式之发布-订阅模式
一. 发布-订阅发布订阅模式又叫观察者模式，在某些文章中会阐述发布-订阅模式和观察者模式之间的区别，本文不阐述两者之间的具体差异，只阐述发布订阅模式的通用实现，以及如何借助该模式实现数据的变动到页面的更新。二. 基本实现 /** * 发布订阅（又叫观察者模式） * 实现发布订阅模式 **/ class Event { constructo...
2020-02-15 18:55:41
254
原创 常见web攻击
常见web攻击前端安全是前端体系的重要组成部分，本文列举了常见的web攻击方式，以及防御手段。xss什么是xssxss(Cross-Site Scripting) 跨站脚本攻击，由于网站自身存在漏洞，导致能运行非本站脚本，从而造成安全问题。比如服务端渲染使用了ejs,art-template等模板引擎对数据进行渲染时未对script 等脚本进行过滤，导致了加载外战脚本。// art-te...
2020-02-14 16:54:50
163
原创 闭包的实际应用之函数节流和函数防抖
闭包是个老生长谈的问题，本文不说什么是闭包，说说闭包在实际中的应用，我们可以使用闭包来实现函数节流和函数防抖函数节流const throttle = (fn, wait) => { let preTime = Date.now() return function() { if(Date.now() - pre > wait) { fn() preTime = ...
2020-02-09 18:42:25
352
原创 前端性能优化小结
前端性能优化借助各种工具和http相关原理使前端代码在运行时更快为什么要进行性能优化使页面运行更快，减少页面卡顿，提高用户体验;减少不必要的请求，节省用户带宽。如何进行性能优化前端性能优化基本可以归结于两个方面少加载文件加载的文件越小越好减少http请求使用雪碧图（多张图片合并成一张图片）打包css，js等静态资源避免使用@import(同步请求css样式文件)导入c...
2020-02-09 18:03:36
212
1
原创 深入JavaScript对象
对象在js中是一个重要组成部分，在实际的项目开发中关于对象我们可能会遇到以下但不局限于以下的使用场景创建一个或多个不同对象使用for-in 循环来遍历对象给已有对象添加新的属性或者删除已有属性进一步当我们在使用for-in 循环来遍历对象时，为了避免遍历原型链上的属性，会使用hasOwnProperty方法来过滤继承的属性。因为for-in 会遍历自身及原型链上所有可枚举的属性。进而言...
2020-01-04 13:19:02
114
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人