- 博客(31)
- 收藏
- 关注
RSS订阅原创 前端责任链设计模式案例分享
责任链模式是一种行为型设计模式，它可以将请求沿着一条处理链进行传递，直到有一个处理器能够处理该请求为止。在前端开发中，责任链模式通常用于处理用户输入事件，例如点击、滚动等。下面是一个简单的前端责任链模式案例，假设有一个页面上有三个按钮，分别对应“保存”、“提交”和“取消”操作。当用户点击某个按钮时，我们需要依次执行一些操作，例如数据验证、数据保存、数据提交等。首先，我们需要定义一个处理器接口，该接口包含一个处理方法和一个指向下一个处理器的指针：class Handler { constructor
2023-02-24 11:56:27
452
原创 webpack专精00
这个系列的主题是关于webpack的，希望能通过对webpack的深入学习，更进一步提升自己的前端能力。先从babel讲起babel 的原理,大致的原理如下:parse: 把代码 code 变成 ASTtraverse: 遍历 AST 进行修改generate: 把 AST 变成代码 code2即 code --(1)-> ast --(2)-> ast2 --(3)-> code2什么是ast,ast就是将代码转变成一个对象，接下来我们会通过手动把 let 变成 var来
2021-03-30 18:28:41
130
原创 高级前端养成40js专精08之继承和组合
为什么要有类不同对象的属性重复了，就有了类为什么要有继承不同的类的属性重复了，就有了继承大部分编程技巧都是为了解决重复两个对象的属性重复了let person1 = { name: "ories", age: 18, sayHi() {},};let person2 = { name: "jack", age: 23, sayHi() {},};于是就有了类和构造函数class Person { n.
2020-09-16 22:12:18
196
原创 (React全解)Class组件详解
一. class 组件创建方式import React from 'react';class B extends React.Component { constructor(props){ super(props); } render(){ return ( <div>hi</div> ) }}二....
2020-03-18 16:09:33
1971
原创 Mac系统下wow自动钓鱼python实现
一. 缘起因为最近疫情的原因，待在家里实在无聊就又玩起了wow怀旧服，wow是一款非常经典的游戏，里面有一个专业技能叫做钓鱼。因为钓鱼本身比较枯燥，且重复度很高，所以作为一名资深程序员，我决定用代码的方式来解决这个问题。二. 历程最开始的时候，在b站上找了一个wow钓鱼的介绍视频，看了一下大概思路，但是没什么用，里面用的是按键精灵且系统为windows. https://www.bili...
2020-02-29 10:45:42
2678
原创 (旺财记账项目)Vue 全局数据管理（下）之Vuex
1. Vuex 就是一个数据读写工具2. 引用了之后就可以读3. 大概使用方法const store = new Vuex.Store({ state: { // data,也就是数据 count: 0 }, mutations: { increment(state, n: number) { // methods,也就是对数据的改动 state...
2020-02-26 13:11:48
870
原创 番茄闹钟三(登录注册页面)
一. axios 配置需求axios 文档配置 axios配置 appid 和 appsecret配置 gwt 验证的 gwt token二. 安装 axios yarn add axios三. 配置 axiosimport axios from 'axios'const appID = "PzutokfofqknrEzTaJUBkmJA"const ...
2020-02-16 15:34:49
1035
原创 番茄闹钟四(todoList 模块搭建及封装)
一. 调试接口二.webstorm 最大化的增加代码区域View-Enter Distraction Free Mode三. 添加新建菜单https://blog.csdn.net/asing1elife/article/details/82820628四. 配置路径https://blog.csdn.net/weixin_33804990/article/detail...
2020-02-16 15:32:37
1349
原创 番茄闹钟二(引入react-router)
1. 安装 react-routeryarn add react-router-domyarn add @types/react-router-dom // 引入声明类型文件2. 引入 react-router import React from 'react' import './App.css' import {BrowserRouter as Rou...
2020-02-13 18:17:42
874
原创 番茄闹钟一(React-Antd-Typescript 框架搭建)
一. 主要文档ReactReact RouterAnt designTypeScriptRedux二. 开始使用,体验 react 脚手架npx create-react-app react-app-democd react-app-demoyarn start三. 跟着文档做渲染一个元素ReactDOM.render(<h1>Hell...
2020-02-12 13:18:18
1361
1
原创 旺财记事本(数据保存至LocalStorage)
1. 获取用户最新选择的 Tags// Tags.Vuethis.$emit('xxx', this.selectedTags)//Money.Vue<Tags :data-source.sync="tags" @xxx="yyy"/>yyy(zzz:string[]){ console.log(zzz);}改名:// Tags.Vuethis.$e...
2020-02-08 16:29:29
989
原创 旺财记账项目-Money.vue组件实现(下)
1. 实现TypeScript的Vue组件。以Types组件为例改写JS写法 <template> <div> <ul class="types"> <li :class="type === '-' && 'selected'" @click="selectTyp...
2020-02-07 19:27:22
1153
原创 旺财记账项目-Money.vue组件实现(上)
1. 小技巧:快速包裹每一行选中，按两下 shift，输入 surround ,选择 surround with emit,输入 li*,意思就是 n 个 li 包住行数2. input,label 的写法新手<label for="xxx"></label><input id = 'xxx' type="text">老手...
2020-02-06 19:23:17
1228
原创 svg的两个坑
1. WebStorm 按两下空格输入 soft wrap 进行换行2. 第一个坑: svg 中的 fill 属性处理svg 里面如果有 fill="",就会有颜色，可以手动去除,但是如果有很多个 svg 那么一个个去很麻烦用 svgo-loader 解决这个问题，在 vue.config.js 中配置config.module.use('svgo-loader').loa...
2020-02-05 11:21:04
1367
原创 Vue造轮子简易版(阶段性总结)
1. 课前水平自测要对 JS,CSS,SVG 非常了解才能造 UI 轮子2. 没有需求就不要写代码,没有设计稿也不要写代码没有设计稿就问设计要，不给就闹，把事情闹的越大越好，只要不写代码做什么都是对的3. 单元测试是重构的前提单元测试能保证大概率没有 Bug4. 对于工具的使用,学 ES/SCSS/Webpack 能用就行5. 设计模式发布订阅模...
2020-02-02 13:11:57
1225
原创 Vue造轮子-手风琴组件
一. 大致的使用方法<div id="app" style="padding-left: 100px"> <g-collpase> <g-collapse-item title="标题1">内容1</g-collapse-item> <g-collapse-item title="标题2">内容2</g-co...
2020-02-01 15:13:22
916
原创 popover组件测试用例
1. 解决小三角形引起的抖动问题。 // 以一个为例 &.position-bottom { margin-top: 10px; &::before, &::after{ left: 10px; } &::before { border-top: none; border-bottom-color: black;...
2020-01-31 16:30:28
956
原创 Vue造轮子-popover组件(下)
1. 上一次的问题总结。overflow:hidden -> body.appendChild关闭重复 -> 分开,document 只管外面,popover 只管里面忘了取消监听 document -> 收拢 close2. 可以把一个函数哟没有五行作为一个优化的标准,简称为五行定律3. 接下来把样式改好点 .content-wrapper { // 如果写了scop...
2020-01-31 12:01:09
807
原创 Vue造轮子-popover组件(中)
1. 现在遇到的问题如果在popover外面包了个div写上overflow:hidden就会出bug,所以要把弹出的div放到按钮的同一个层级关于click事件的,之前解决的方式是写click.stop,但是其实还是会有bug,会打断用户的事件链，用户在外面写@click,点击按钮没有用，但是点击按钮周围空白区域会有,那么就会导致别人用了组件无法自己添加click事件,所以不能用stop解...
2020-01-30 13:56:19
580
原创 Vue造轮子-popover组件(上)
1. popover是什么以及难点在哪点一下出现一个卡片,也叫气泡卡片难点在于css的样式2. 用户会怎么去用 // 第一种做法，用插槽做 <g-popover> <template slot="content"> <div></div> </template> <templ...
2020-01-29 13:53:18
1705
原创 Vue造轮子-Tabs测试(下)
1. 如果g-tabs里面不是g-tabs-head，g-tabs-body期望会报错。 // 目前没有报错，所以先改 // tabs.vue if(this.$children.length===0){ // 这个$children是看子组件，不是子元素 throw new Error('tabs的子组件应该是tabs-head和tabs-pane,...
2020-01-28 21:52:04
874
原创 Vue造轮子-Tabs测试(上)
1. 点击出现下划线的问题 // tabs-item.vue methods: { xxx() { this.eventBus.$emit('update:selected', this.name, this) } } // tabs.vue mounted(){ this.eventBus.$emit(...
2020-01-28 20:01:31
890
原创 Vue造轮子-tab组件(下)
1. 为什么一个 new Vue 可以构造出一个 eventBus// 当我们定义了new Vue之后,可以这样用var app = new Vue({ created(){ this.$emit() this.$on() }})// 也可以这样用app.$emit()app.$on()app.$off()// 那么归根结底，只...
2020-01-28 13:11:34
509
原创 Vue造轮子-tab组件(中)
1. 如果给一个标签一个class,标签本身又有class,vue是默认会合并的。只有两个属性是这样一个是class,一个是style。这样就比较好改样式。 <g-tabs-head class="red"></g-tabs>2. 组件的结构以及selected的传递过程，见下图。没有点击的图发生了点击操作的图，两个item兄弟之间是没有关系的，发生了点击...
2020-01-27 23:21:35
139
原创 造轮子-tab组件(中)
1. 如果给一个标签一个class,标签本身又有class,vue是默认会合并的。只有两个属性是这样一个是class,一个是style。这样就比较好改样式。 <g-tabs-head class="red"></g-tabs>2. 组件的结构以及selected的传递过程，见下图。没有点击的图发生了点击操作的图，两个item兄弟之间是没有关系的，发生了点击...
2020-01-27 23:03:47
129
原创 造轮子-tab组件(上)
1. 如何解决之前遗留的bug根据错误提示大概确定原因，toast.test.js .style 造成。用二分法找bug到底是哪一个用例出错。log 分析代码,mounted和$nextTick是有时间间隙的，得到原因测试用例中mount完了之后立刻click,click之后再$nextTick设置高度,所以可能是click太快了，此时s当$nextTick的时候，已经toast已经被我们...
2020-01-27 19:42:01
874
原创 toast组件单元测试
先看是否存在 describe('Toast', () => { it('存在.', () => { expect(Toast).to.be.exist }) });看属性,我们要测 ToastVue 和 plugin.js describe('Toast', () => { ...
2020-01-27 14:17:42
1053
原创 造轮子-toast组件的实现(下)
1.解决 toast 中传入 html 的问题，通过假的 slot 来实现// plugins.jstoast.$slots.default = [message]// toast.vue <div v-html="$slots.default[0]"></div>// 使用created() { this.$toast('<p>我是<...
2020-01-26 21:48:35
925
原创 python 多线程知识
import threadingdef foo(): Print(‘ok’)t1 = threading.Thread(target = foo) #参数为 #args=元组t.start()t1.join() #控制主进程的执行 不加的话主进程直接执行 加了主进程必须等这个线程执行完了才执行t1.setDaemon()#写在start前 主进程执行完了之后 子...
2018-07-29 20:57:34
113
原创 something about Git and Github
Actually Git is a kind version control tool and it is used for controlling version.Not only code programmer can use it,but also writer and any job that need use word. Also, you can use git as a team ...
2018-07-27 22:19:21
99
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人