- 博客(25)
- 收藏
- 关注
RSS订阅原创 element自定义表头slot=“header“，不显示问题
官方例子中自定义表头如下： <template slot="header" slot-scope="scope"> <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/> </template>改成： <template v-slot:header> <el-input
2021-07-22 16:39:16
3332
3
原创 npm的多脚本命令执行
npm的多脚本命令执行在package.json中可以设置自定义脚本命令。串行执行（series）：脚本之间使用 && ( 两个 & 符号 ) 连接，脚本会一个个按顺序执行，前一个脚本执行结束，才能后执行下一个脚本。并行执行（parallel）：脚本之间使用 & ( 一个 & 符号 ) 连接，脚本会同时执行，同时执行可以提高执行效率。在window或其他不支持&的时候，可以使用npm-run-all进行操作npm i npm-run-all-g
2021-05-25 16:52:20
617
原创 随笔-特殊运算符
1. 可选链操作符(?.)当不确定对象内深层是否有某个属性时可以使用const obj = {}console.log(obj.a.b)// 这个时候是会报错的// 一般情况下，我们会先判断obj内是否有a,再去获取bobj.a ? console.log(obj.a.b) : console.log('没有b属性')// ?. 可以替换上面的操作console.log(obj.a?.b)// 这个时候不会报错，而是会打印undefined?. 使用后，有这个属性会返回改属性，若无则
2021-05-24 17:10:29
99
原创 移动端点透问题的处理
1.1 移动端点透问题是啥？当一个元素放覆盖了另一个元素, 覆盖的元素监听touch事件, 如果被覆盖的元素监听click事件，touch事件触发后覆盖的元素就消失了, 那么就会出现点透问题。1.2 点透问题的出现原因① 当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click② touch事件先执行，执行完后从文档上消失③ click事件有100~300ms延迟，所以后执行④ 但touch事件执行的时候触发的元素已经消失了, 对应的位置现在是下面的元素, 所以就触发了下面元
2021-05-24 09:52:47
245
原创 react-router
react-router安装使用react-router特点使用步骤路由的传参取参一、声明式导航路由配置是配置路由参数（params传参）二、编程式导航传递参数与获取(state传参)三、query传参路由守卫的实现和使用安装使用react-routernpm install react-router-dom --save特点秉承react一切皆组件，路由也是组件。分布式的配置，分布在你的页面的每个角落。包含式配置，可匹配多个路由。使用步骤引入顶层路由组件包裹根组件，index.js
2020-08-06 22:05:05
109
原创 react-redux
react-redux例子end由于redux的写法太繁琐，还需要每次重新调用render，不符合react编程。所以出现了react-redux安装react-reduxnpm install react-redux --savereact-redux提供了两个apiProvider 顶级组件，功能为给我们提供数据connect 高阶组件，功能为提供数据和方法例子新建一个store.js文件，用于管理修改数据方法import { createStore } from '
2020-08-06 14:50:03
101
原创 Redux
强大的状态管理器Reduxactionsactionsreducers使用例子1actionsstore是整个应用的数据存储仓库，把我们全局管理的状态存储起来它actionsactions其实是描述操作的对象，我们调用dispatch时需要传入此对象。它就是我们的后勤保障，是我们打仗的政委，专门管理后勤数据。reducersreducers接收action并更新store。就是action和store交互的中间方。注意：redux是一个单独的数据流框架，跟react并没有直接
2020-08-05 22:58:28
99
原创 Vue的eslint配置
Vue的eslint配置安装依赖npm i eslint eslint-plugin-vue babel-eslint @vue/cli-plugin-eslint -d在项目根目录新增.eslintrc.js文件，具体配置看https://eslint.bootcss.com/docs/rules/在vue.config.js里配置lintOnSavemodule.exports = { lintOnSave: true //eslint-loader是否在保存的时候检查}针
2020-08-04 22:51:36
585
1
原创 Vue的前端移动端适配
前端移动端适配采用vw.vh方案配置 npm 安装依赖 npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano2.配置 .postcssrc.js 文件module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, // t
2020-08-04 22:28:20
425
原创 Vuex
Vuex一、Vuex概述Vuex是什么?使用Vuex统一管理状态的好处什么样的数据适合存储到vuex中Vuex的基本使用StateMutationActionGetter一、Vuex概述Vuex是什么?Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。使用Vuex统一管理状态的好处能够在vuex中集中管理共享的数据，易于开发和后期维护。能够高效的实现组件之间的数据共享，提高开发效率。存储在vuex中的数据都是响应式的，能够实时保存数据与页面的同步。什么样
2020-08-04 21:20:49
177
原创 webpack4学习笔记
webpack一、webpack是什么？二、webpack有什么用？一、webpack是什么？webpack其实就是一个JavaScript应用程序的静态打包器二、webpack有什么用？1.模块化打包webpack会将项目的资源文件当成一个一个模块，模块之间会有依赖关系，webpack将会对这些有依赖关系的文件进行处理，让浏览器能够识别，最后将应用程序需要的每个模块打包成一个或者多个bundle(包)。...
2020-08-02 18:30:29
170
原创 数组函数迭代执行
实现函数顺序执行，并用上一个函数的返回值作为参数传给下一个函数。const f1 = (name) => { console.log(name) return name + 'f1'}const f2 = (name) => { console.log(name) return name + 'f2'}const f3 = (name) => { console.log(name) return name + 'f3 '}const list = [f1,
2020-07-30 21:25:25
136
原创 Vue高阶组件、mixin、prop、hook
Vue高阶组件一、什么是高阶组件二、高阶组件有什么特性三、举个例子四、mixin 混入五、prop六、hook一、什么是高阶组件高阶组件(HOC)是 React 生态系统的常用词汇，React 中代码复用的主要方式就是使用高阶组件，并且这也是官方推荐的做法。而 Vue 中复用代码的主要方式是使用 mixins，并且在 Vue 中很少提到高阶组件的概念，这是因为在 Vue 中实现高阶组件并不像 React 中那样简单，原因在于 React 和 Vue 的设计思想不同，但并不是说在 Vue 中就不能使用高阶
2020-07-21 23:20:19
1317
原创 JavaScript设计模式-代理模式
JavaScript设计模式-代理模式概念例子保护代理虚拟代理缓存代理总结github仓库地址：点击 [设计模式例子](https://github.com/fanhualuoye/design) 查看概念代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。代理模式是一种非常有意义的模式，在生活中可以找到很多代理模式的场景。比如，明星都有经纪人作为代理。如果想请明星来办一场商业演出，只能联系他的经纪人。经纪人会把商业演出的细节和报酬都谈好之后，再把合同交给明星签。代理模式的关键是，当客
2020-07-21 23:07:00
97
原创 JavaScript设计模式-享元模式
JavaScript设计模式-享元模式概念例子内部状态与外部状态享元模式的通用结构例子总结github仓库地址：点击 [设计模式例子](https://github.com/fanhualuoye/design) 查看概念享元（flyweight）模式是一种用于性能优化的模式，“fly”在这里是苍蝇的意思，意为蝇量级。享元模式的核心是运用共享技术来有效支持大量细粒度的对象。如果系统中因为创建了大量类似的对象而导致内存占用过高，享元模式就非常有用了。在JavaScript 中，浏览器特别是移
2020-07-21 22:56:47
137
原创 JavaScript设计模式-装饰模式
JavaScript设计模式-装饰模式概念例子ES6的装饰器总结github仓库地址：点击 [设计模式例子](https://github.com/fanhualuoye/design) 查看概念在程序开发中，许多时候都并不希望某个类天生就非常庞大，一次性包含许多职责。那么我们就可以使用装饰者模式。装饰者模式可以动态地给某个对象添加一些额外的职责，而不会影响从这个类中派生的其他对象。在传统的面向对象语言中，给对象添加功能常常使用继承的方式，但是继承的方式并不灵活，还会带来许多问题:导致
2020-07-21 22:44:46
141
原创 JavaScript设计模式-适配器模式
JavaScript设计模式-适配器模式概念总结github仓库地址：点击 [设计模式例子](https://github.com/fanhualuoye/design) 查看概念适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后，原本 由于接口不兼容而不能工作的两个软件实体可以一起工作。适配器的别名是包装器（wrapper），这是一个相对简单的模式。在程序开发中有许多这样的 场景：当我们试图调用模块或者对象的某个接口时，却发现这个接口的格式并不符合目前的需求。 这时候
2020-07-21 22:40:41
158
原创 JavaScript设计模式-工厂模式
JavaScript设计模式-工厂模式概念简单工厂github仓库地址：点击 [设计模式例子](https://github.com/fanhualuoye/design) 查看概念什么是工厂模式?工厂模式是用来创建对象的一种最常用的设计模式。我们不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂。工厂模式根据抽象程度的不同可以分为：简单工厂，工厂方法和抽象工厂。简单工厂github仓库地址：点击 设计模式例子 查看...
2020-07-21 22:32:16
126
原创 JavaScript设计模式-命令模式
JavaScript设计模式-命令模式概念例子总结github仓库地址：点击 [设计模式例子](https://github.com/fanhualuoye/design) 查看概念命令模式的目标是将方法的调用,请求或者操作封装到一个单独的对象中,给我们酌情执行同时参数化和传递方法调用的能力.另外,它使得我们能将对象从实现了行为的对象对这些行为的调用进行解耦,为我们带来了换出具体的对象这一更深程度的整体灵活性。具体类是对基于类的编程语言的最好解释,并且同抽象类的理念联系紧密.抽象类定义了一个接口,但
2020-07-20 22:48:03
86
原创 JavaScript设计模式-中介者模式
JavaScript设计模式-中介者模式概念例子总结github仓库地址：点击 [设计模式例子](https://github.com/fanhualuoye/design) 查看概念中介者模式的作用就是解除对象与对象之间的紧耦合关系。增加一个中介者对象后，所有的相关对象都通过中介者对象来通信，而不是互相引用，所以当一个对象发生改变时，只需要通知中介者对象即可。中介者使各对象之间耦合松散，而且可以独立地改变它们之间的交互。中介者模式使网状的多对多关系变成了相对简单的一对多关系。例子// 1.定义
2020-07-20 22:27:04
137
1
原创 JavaScript设计模式-观察者模式
JavaScript设计模式-观察者模式概念例子变体：发布/订阅模式总结：github仓库地址：点击 [设计模式例子](https://github.com/fanhualuoye/design) 查看概念什么是观察者模式？观察者模式是这样一种设计模式。一个被称作被观察者的对象，维护一组被称为观察者的对象，这些对象依赖于被观察者，被观察者自动将自身的状态的任何变化通知给它们。当一个被观察者需要将一些变化通知给观察者的时候，它将采用广播的方式，这条广播可能包含特定于这条通知的一些数据。当特定的
2020-07-20 22:20:35
82
原创 JavaScript设计模式-策略模式
JavaScript设计模式-策略模式概念例子策略模式的优点策略模式的缺点总结github仓库地址：点击 [设计模式例子](https://github.com/fanhualuoye/design) 查看概念多种途径到达同一个目的地现实中的例子：如果没有时间但是不在乎钱，可以选择坐飞机。如果没有钱，可以选择坐大巴或者火车。如果再穷一点，可以选择骑自行车。在程序设计中，我们也常常遇到类似的情况，要实现某一个功能有多种方案可以选择。比如： 一个压缩文件的程序，既可以选择 zip 算法，
2020-07-20 22:14:47
69
原创 JavaScript设计模式-单例模式
JavaScript设计模式-单例模式概念例子单一职责原则惰性单例模式总结用处github仓库地址：点击 [设计模式例子](https://github.com/fanhualuoye/design) 查看概念什么是单例模式：单例模式之所以这么叫，是因为它限制一个类只能有一个实例化对象。经典的实现方式是，创建一个类，这个类包含一个方法，这个方法在没有对象存在的情况下，将会创建一个新的实例对象。如果对象存在，这个方法只是返回这个对象的引用。单例和静态类不同，因为我们可以退出单例的初始化时间。通常这样做
2020-07-20 22:02:07
93
原创 JavaScript设计模式-模块化模式
JavaScript设计模式-模块化模式概念例子ES6的模块化概念模块化模式最初被定义为一种对传统软件工程中的类提供私有和公共封装的方法。在JavaScript中，模块化模式用来进一步模拟类的概念，通过这样一种方式：我们可以在一个单一的 对象中包含公共/私有的方法和变量，从而从全局范围中屏蔽特定的部分。这个结果是可以减少我们的函数名称与在页面中其他脚本区域定义的函数名称冲突的可能性。例子第一步：定义一个闭包的模块。第二步：利用闭包的特性定义一个局部变量，这个局部变量就是这个模块的私有属
2020-07-19 22:36:51
134
原创 JavaScript设计模式-构造器模式
JavaScript设计模式-构造器模式概念例子ES6的构造器总结概念在面向对象编程中，构造器是一个当新建对象的内存被分配后，用来初始化该对象的一个特殊函数。在JavaScript中几乎所有的东西都是对象，我们经常会对对象的构造器十分感兴趣。对象构造器是被用来创建特殊类型的对象的，首先它要准备使用的对象，其次在对象初次被创建时，通过接收参数，构造器要用来对成员的属性和方法进行赋值。例子这是一个构成器的经典写法：第一步：定义一个对象，对象接受参数；第二步：给对象的this挂载属性，也就是传入
2020-07-19 21:53:54
168
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人