- 博客(93)
- 问答 (2)
- 收藏
- 关注
RSS订阅
原创 用Redux做数据隔离
【背景】在react组件中我们常常要写很多请求的模板代码，即使在拿到数据之后不做任何业务逻辑。import getListData from '...'this.setState({loading:true})getListData(params).then(res => { if(res && res.retcode == 0){ let data = res.result_rows.list || [] this.setState(...)
2020-09-29 16:07:33
405
原创 CSS
Transformtransform各种样式演示perspective MDNperspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视。img{ transform: perspective(800px) translateZ(200px);}当我们使用translateZ时带上perspective，可以看到元素是变大的，因为从观察者的角度看，元素是朝着观察者移动了200px的。而仅仅使用translateZ的话，我们会发现元素大小没有变化。同理，我们使
2020-08-20 16:12:49
145
原创 React | Hook
前言:为什么用Hook?在一些需求和业务变得复杂的情况下,传统的class component 的几个缺陷:组件变得复杂和难以维护：满天class导致的热重载和性能问题：class自身具有的复杂度和组件嵌套过深props层级传递Hook 基础 APIuseStateuseEffect使用useEffectuseContext...
2020-07-21 15:22:36
199
原创 React | Hook 妙用
壹import React from "react";import useRandomColor from "./useRandomColor";const Hook = () => { const [color, changeColor] = useRandomColor(["red", "blue", "green"], "red"); return ( <> <h1 style={{ color: color }}>try to cha
2021-01-23 12:01:20
153
1
原创 Git
远程多出一个project1分支本地git checkout -b project1 origin/project1git pull origin project1如果提示fatal:‘XXX’ is not a commit and a branch ‘XXX’ cannot be created from it 说明远程的分支是新增的 还没关联到本地 先执行git fetch origingit remote update origin --prune...
2020-11-27 16:59:25
114
原创 重温Vue数据绑定原理(幼儿园版)
<head></head><body> <div id="app"> <input id="editName" type="text"> <br /> name:<span id="name"></span> <div>------------------------------</div> age:<span id="age"></spa
2020-10-15 16:41:14
133
1
原创 TypeScript | 集合
实现函数返回的传参类型控制let fn = ref<null|undefined>()fn(null) // okfn('1111') // errorfn(1) // error// 先定义一个函数类型，定义泛型U，并规定传参为该泛型interface ref_rf<U>{ (x:U):any;}// 定义function ref ，返回值为函数ref_rf类型function ref<T>(): ref_rf<T>{ // 内
2020-10-03 15:57:13
1018
原创 缓动函数
参考文章https://aaronbird.github.io/2019/03/30/%E7%BC%93%E5%8A%A8%E5%87%BD%E6%95%B0(easing%20function)/https://www.zhangxinxu.com/wordpress/2016/12/how-use-tween-js-animation-easing/缓动函数匀速运动首先我们来认识一个缓动函数的核心。先以一个匀速运动的函数为例子function fn(currentTime, startV
2020-09-27 19:21:13
865
原创 SVG组件封装
SVG组件封装SvgIcon/index.vue<template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName"></use> </svg></template> <script> export default { name: 'SvgIcon', pr
2020-09-25 15:52:54
330
原创 Immutable
参考链接：https://segmentfault.com/a/1190000017294051Object.assign实现Object.assign可以实现不可变性 const objA = { a:{}, b:{} } const objB = Object.assign({}, objA, { c: 4 }) // objB：{a:{},b{},c:4} console.log(objA === objB) // flase console.log(objA.a === ob
2020-09-25 13:54:31
136
原创 Vue 妙用渲染函数 & JSX
官方例子FlexiableSlot.jsexport default { render: function (createElement) { return createElement( 'h' + this.level, // 标签名称 this.$slots.default, // 子节点数组 ) }, props: { level: { type: Number, required: true, },
2020-09-23 17:07:59
222
原创 webpack 注入变量
背景在脚手架项目中，我们经常能看到前端利用process.env.NODE_ENV来判断当前处于dev还是product环境，但其实process是node中独有的对象，那么如何在前端判断当前环境呢。实现首先在package.json需要配置环境变量 "scripts": { "dev": "node webpack.js dev", },我们在运行的时候输入的是npm run dev。 那么在node中，我们读取一下process并打印。可以发现是一个数组，并且和"node we
2020-08-19 13:08:40
2684
1
原创 Vue3 + TS 项目总结
项目搭建：1.安装/升级vue-cli (要求 version > 4)npm install -g @vue/cli2.创建项目注：vue-cli3 项目，创建时可选择tsvue create vue-next-test 3.添加vue3依赖 (可在vue2项目中无破坏性的引入)vue add vue-next自定义loadervue-cli3隐藏了webpack配置，如果要查看可执行命令导出npx vue-cli-service inspect --mode develo
2020-08-15 17:16:54
4181
1
原创 JS | 一些优化罢了
动画被JS阻塞了怎么办参考 https://juejin.im/post/6844903971295854600#heading-71.webworker <div id="box"></div> #box { width: 100px; height: 100px; background: green; position: absolute; animation: myfirst 5s; } @keyframes myfirst {
2020-08-05 18:37:43
120
原创 Vue3 | 初体验
项目搭建：1.安装/升级vue-cli (要求 version > 4)npm install -g @vue/cli2.创建项目vue create vue-next-test3.添加vue3依赖 (可在vue2项目中无破坏性的引入)vue add vue-nextAPI参考文档 ：vue-composition-api-rfc代码设计逻辑复用在项目中我们经常需要复用一些逻辑，官方给出了一个经典**「鼠标追踪」的案例。这个组合函数仅依赖它的「参数」**和 「Vue 全局导出的 A
2020-07-31 13:09:46
325
原创 React | 高阶组件
从0学习React高阶组件[定义]简单的说,高阶组件就是一个函数接受一个组件作为参数, 然后放回一个新的组件。在高阶组件中,我们常常会编写一些可复用的state和function, 将这些可复用的东西赋予传进来的组件。[需求背景]现有登录和注册两个页面, 两个页面含有很多相同的成分和逻辑,比如账号密码的输入框、监听输入的逻辑、点击提交的逻辑等等. 按照普通组件的写法, 会有大量重复代码,不利于维护。[组件设计]首先看一下高阶组件form.js。可以看到组件内封装了username等state,
2020-07-21 18:22:03
196
原创 手写Promise
1. 无链式then // 先定义三个常量表示状态 var PENDING = 'pending'; var FULFILLED = 'fulfilled'; var REJECTED = 'rejected'; function MyPromise(fn) { this.status = PENDING; // 初始状态为pending this.value = null; // 初始化value this.err = null; // 初始化e
2020-07-16 17:45:00
108
原创 Redux
Redux的特点统一的状态管理，一个应用中只有一个仓库（store）仓库中管理了一个状态树（statetree）仓库不能直接修改，修改只能通过派发器（dispatch）派发一个动作（action）更新state的逻辑封装到reducer中Redux的作用随着JavaScript单页应用开发日趋复杂，管理不断变化的state非常困难，Redux的出现就是为了解决state里的数据问题...
2020-01-03 17:41:35
137
原创 小程序梳理
获取登录态写在前面对用户来说，可以看作有两个登录态小程序端： 用户的基本信息，昵称，电话，头像等等，原先在小程序端用getUserInfo可获取，但目前api已经不支持首次就用该方法获取，需要引导用户点击。首次授权后即可直接调用getUserInfo获取。<button open-type="getUserInfo" bindgetuserinfo="bindGetUserI...
2019-12-20 21:34:23
98
原创 CSS 伪类应用
基本应用：伪元素多用于修饰。如实现以下列表Java / JavaScript / PHP / C++<ul> <li>Java</li> <li>JavaScript</li> <li>PHP</li> <li>C++</li></ul>li{ displa...
2019-12-16 00:21:03
108
原创 Vue | 文字无缝滚动效果
触发过渡效果后：由于div设置了overflow:hidden，因此li1和li3的区域都会被隐藏，只显示li2过渡效果结束后又变回：数据部分，存放li数据的数组初始为[1,2,3]触发滚动： this.animateUp = true setTimeout(() => { this.listData.push(this.listData[0]) ...
2019-12-09 01:20:35
369
原创 Vue | 自定义指令 + Vuex 实现鉴权
需求：要求实现一个自定义指令，按钮使用了该指令后，点击时检查是否登录/是否有权限，从而决定下一步操作。自定义组件可以全局定义或组件内定义局部定义<el-button v-permission-click="goKeepAlive">keep-alive</el-button>directives:{ 'permission-click':{ ...
2019-12-04 17:52:50
1656
原创 Vue | 自定义组件数据双向流动
现有一个查询页面 index.vue ，组成架构如下需求：在表单组件中新增一个下拉框选项,对地区(area)进行选择，并做到数据能双向流动, 由于提交表单是在query，而下拉框数据放在A中，因此A中下拉框数据变化要更新到父组件的表单数据中。实现表单组件query.vue：<el-form :model="queryForm" :rules="rules" ref="queryFo...
2019-12-03 17:42:30
139
原创 ES6 | Class Mixin实现多继承
Mixin译为 “混入” “混合”早期这个概念经常用于两个对象的拷贝、合并 let a = { name: 'a' } let b = { age:19, // name : 'b' 会覆盖a的name } let obj = { ...a, ...b };实现// 拷贝属性// target为子类 source为继承类function copyPro...
2019-11-22 16:29:05
1044
原创 Javascript | ES6
记录之前学es6一些没有细看的部分解构赋值基本使用let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3let [ , , third] = ["foo", "bar", "baz"];third // "baz"let [x, , y] = [1, 2, 3];x // 1y // 3let ...
2019-11-20 14:59:36
138
原创 Vue 2.6.x | 插槽
v-slotvue 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 ：v-slot 指令。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍有用的特性。但是将会在vue 3 中，这两个指令将会被废弃Example子组件：<template> <div class="my-card"> <!--...
2019-11-18 13:56:58
261
转载 Vue中视图层的拆分
一、组件的划分思路: 将可共用的视图组件剥离出去，如常见的header、footer、nav等，这些剥离复用的组件甚至可以带有完整的业务逻辑，这种方法比较常用，具体不同业务有不同做法。二、剥离业务逻辑代码的部分通常包含有交互逻辑，业务逻辑，数据转换以及**DOM操作，**过多的业务逻辑代码显得杂糅。如： export default{ name:'XXX', ...
2019-11-13 18:39:01
1482
原创 JS | AOP编程
AOPAOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后， 再通过“动态织入”的方式掺入业务逻辑模块中。AOP的好处AOP的好处首先是可以保持业务逻辑模块的纯净和高内聚性，其次是可以很方便地复用日志统计等功能模块。例子 // 定义before 和 after Func...
2019-11-11 18:12:30
108
原创 ES6 & ES7 - Module
ES6 - Module不用default导出// A.jsexport function a(){ console.log('aaaa')}export function b(){ console.log('bbb')}export const c = 10;或：function a(){ console.log('aaaa')}function b(){...
2019-11-10 13:17:18
123
原创 处理二进制流图片
有时从服务器拉出来的图片是二进制流的，直接打印发现是一篇乱码，如下：需要在请求的时候加上希望的相应类型 axios.get('http://localhost:8080/getImage',{responseType:'blob'}).then(res=>{ let img = document.createElement('img'); img.src...
2019-11-07 15:11:03
690
原创 Javascript | Object.freeze
概念freeze 顾名思义是一个冻结对象的方法，对于一个冻结的对象，其成员不能被手动再次修改。Examplelet obj = { a:1,}Object.freeze(obj);obj.a = 2;console.log(obj) // a:1 However...
2019-11-02 14:04:52
162
原创 JavaScript | 函数柯里化
概念柯里化(Currying)又称部分求值。一个Currying的函数首先会接受一些参数，接受了这些参数之后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。Example// 普通写法function cal(x,y){ return x * y;}// 柯里化fu...
2019-10-25 01:21:05
150
原创 尾递归和尾递归的优化
概念首先有一个概念是尾调用，就是指某个函数的最后一步是调用另一个函数，如下function f(x){ return g(x);}而下面几种情况都不属于调用1.function f(x){ let y = g(x); return y;}2.function f(x){ return g(x) + 1;}3.function f(x){ g(x);...
2019-10-16 17:01:36
148
原创 服务器向客户端推送信息
WebSockethtml5提供的模块，支持全双工通信服务端：let WebSocket = require('ws');let wss = new WebSocket.Server({port:9000});// 建立连接wss.on('connection',function(ws){ // 发送信息给客户端 ws.send('server say hello t...
2019-10-10 00:19:04
239
原创 设计模式 | 观察者模式 & 发布者订阅者模式
观察者模式 let publisher = { // 订阅者列表 list:[], // 新增订阅者 listen:function(user,type){ if(!this.list[type]){ this.list[type] = [] } this.list[type].push(user) }, // 通知某一主题的信息 not...
2019-10-09 00:21:14
110
原创 设计模式 | 装饰者模式
ES7中提供了一个装饰器注解Descriptor：安装npm i babel-plugin-transform-decorators-legacy babel-register --save-dev在.babelrc文件中添加插件信息"plugins": ["transform-decorators-legacy"],修饰类给修饰的类添加上blood属性和set/get方法，装饰...
2019-10-08 21:14:01
211
原创 设计模式 | 代理模式
代理模式代理对象角色内部含有对真实对象的引用，从而可以操作真实对象，同时代理对象提供与真实对象相同的接口以便在任何时刻都能代替真实对象。在我的理解中，es6中的Proxy可以很好的诠释这一设计理念，当然从名称也可以看出来了。代理模式共有三种：保护代理、虚拟代理、缓存代理应用场景保护代理即代理类对操作进行拦截，对操作进行过滤或处理后，调用真正得实体类进行操作。例: 每个User类有多...
2019-09-26 23:35:17
83
空空如也
关于推荐算法训练集和测试集的问题
2020-03-17
TA创建的收藏夹 TA关注的收藏夹
TA关注的人