- 博客(39)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 REACT Hooks
官方介绍：Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。注意事项：1. 只能在函数最外层调用Hook,不要再循环、条件判断或者子函数中调用2. 只能在React的函数组件中调用Hook,不要在其他JS函数中调用useState通过在函数组件中调用它来给组件添加一些内部state,React会在重复渲染时保留这个stateuseState唯一的参数就是初始stateuseState会返回一对值.
2020-06-23 11:29:11
166
原创 Antd DatePicker 只允许选择当前时间之后的时间 包括时分秒
需求：选择当前时间之后的时间1.隐藏“此刻”按钮这里用的css隐藏，没找到更好的办法。。前提--设置日期组件的属性：dropdownClassName="hideNow" .hideNow{ .ant-picker-now-btn{ display:none !important; }}2.只允许选择当前时间5分钟之后的时间import moment from 'moment';let disabledDate = (current:a...
2020-06-06 17:05:17
7693
4
原创 高阶函数和高阶组件
如果一个函数操作其他函数，即将其他函数作为参数或将函数作为返回值，将其称为高阶函数。高阶组件(high-order component)类似于高阶函数，接收组件作为输入，输出一个新的组件。实现高阶组件的方法有如下两种。属性代理(props proxy)。属性组件通过被包裹的 React 组件来操作 props。 反向代理(inheritance inversion)。高阶组件继承于被...
2019-11-21 14:29:05
418
原创 react状态
state注意事项：不能直接this.state = xx修改，必须用this.setState({xx : xx}) 因为setState做了两件事：1.修改状态 2.重新renderthis.setState原理：this.setState({number:this.state.number+1})//等价于：Object.assign(this.state,{numb...
2019-11-07 17:25:55
108
原创 纯函数
纯函数的概念：不能改变入参 不能影响作用域之外的变量老规矩，举例子：let obj={name:'作用域之外的对象'}function test(param){ obj = '修改作用域之外的对象，不是纯函数'; param.name='改变了入参，不是纯函数';}function test1(param){ let obj1 = param; ...
2019-11-07 15:56:13
126
原创 react虚拟dom浅析
//说明/** * ReactDOM.render( * <h1>Hello, world!</h1>, * document.getElementById('root') * ); * babel转译之后 * ReactDOM.render(React.createElement("h1", null, "Hello, world!"), * do...
2019-11-07 14:57:04
162
原创 vue指令应用和过滤器
vue实例上常见属性和方法vm.$el 指代的是当前的元素 vm.$nextTick 延迟执行 dom操作必备 vm.$watch 监控数据变化 vm.$data 当前数据对象 vm.$options 所有的选项 vm.$set vm.$mount 挂载 单元测试 在内存中挂载vue实例 此时只能用$mount属性vue中的指令template vue自带的标签，能实现循...
2019-11-05 09:43:21
241
原创 vue的watch和computed
methods和computed的区别假设有这样一个场景，需要拼接data里的属性，如果直接{{first+second}}，不利于修改；我们会想到method获取，但是直接在{{}} 里放函数表达式，会消耗多余性能，不建议使用，举例说明：假设函数为getTegeter，如果用函数取值，其他的data属性修改时会重新render Dom，getTegeter函数会再执行一次，这不是我们...
2019-11-04 17:33:14
133
原创 桥接模式
将抽象部分与他的实现部分分离，这样抽象化与实现化解耦，使他们可以独立的变化 应用场景：实现系统可能有多个角度分类，每一种角度都可能变化 桥接双方可以通过实现桥接口进行单方面扩展，也可以继续抽象类而单方面扩展，而之间的调用就从桥接口来作为突破口，不会受到双方扩展的任何影响class A{ constructor(bridge){ this.bridge = bridge; }...
2019-10-31 17:50:39
114
原创 发布订阅模式
发布订阅模式-1//jQuery callbacks原理window.jQuery= { callbacks(){ let callbacks = []; function add(callback){ callbacks.push(callback) } function remove(cal...
2019-10-30 09:38:48
130
原创 外观模式和观察者模式
外观模式该模式就是把一些复杂的流程封装成一个接口提供给外部用户更简单的使用 门面角色：外观模式的核心，它倍客户角色调用，它熟悉子系统的共嗯那个，内部根据客户角色的需求预 子系统角色：实现了子系统的功能，它对客户角色和Facade是未知的 客户角色：通过调用Facede来完成要实现的功能class Sum{ sum(a,b){ return a+b; }...
2019-10-30 09:38:27
486
原创 原型模式
原型模式是一个创建型的模式 创建基类的时候，简单差异化的属性放在构造函数中，消耗资源相同的共嗯那个放在基类原型中对象都是由函数创建，函数也是对象，so，万物皆对象，so easy ！！！想哭。let obj = {name:'aaa'} //是下列代码的语法糖：let obj = new Object();obj.name = 'aaa'每个函数都有一个属性 叫 prototy...
2019-10-30 09:37:09
105
原创 状态和策略模式
当一个对象的内部状态发生改变时，会导致其行为的改变，这看起来相是改变了对象 对象有自己的状态 不同状态下执行的逻辑不一样 明确状态和每个状态下执行的动作 用来减少 if else子句//状态模式class SuccessState{ show(){ console.log('high'); }}class WarningState{ sho...
2019-10-30 09:28:58
122
原创 mousewheel DOMMouseScroll
mousewheel事件火狐不兼容，但是火狐支持DOMMouseScroll,解决方案：let courseCenterContainer = document.querySelector(".tab-content"); let srcollFn = function(e){ if(e.wheelDelta){ let v = -e.wheelDelt...
2019-10-24 17:20:01
208
原创 单例模式
透明单例有一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的 window对象等。function Window(name){ this.name = name;}Window.prototype.getName = function(){ console.log(this.name)}let CreateSingle = function(Const...
2019-10-16 14:45:00
184
原创 vue父组件调用子组件方法
方法一：使用$refs查找，$refs有些类似dom方法getElementById，可以这么理解//子组件<template> <div> child </div></template> <script> export default { name: "child", props: {...
2019-10-16 14:39:15
186
原创 vue 路由跳转，路由传参
1. router-link<router-link :to="{ path: 'pathName', params: { name: 'name', id: data }, query: { name: 'name', id: data } }"> </router-link><!--直接写路由路径--><router-link t...
2019-09-20 16:08:48
131
原创 Vue子组件调用父组件的方法
方法一：直接在子组件中通过this.$parent.event来调用父组件的方法//父组件<template> <div> <child></child> </div></template><script> import child from '~/components/child'...
2019-08-06 11:22:30
124
原创 使用node和express，搭建服务
场景：真实模拟前后端分离，使用express配置接口准备工作：1.安装node（官网下载）2.安装expressnpm install -g express3.安装express-generatornpm install -g express-generator命令行操作：//在想要存放服务的文件目录，打开命令行（怎么打开命令行不需要赘述喽）express --v...
2019-08-02 10:50:41
154
原创 将本地已有文件关联到github库
场景：已经提前在本地开发，github上正好有一个空的仓库//前提：记得住github账号和密码git init git remote add origin Github仓库地址 //https://github.com/xxx/xxxx.gitgit pull origin master //第一次拉取代码会出现fatal: couldn't find remote ref mas...
2019-08-02 10:04:02
349
原创 PC端静态html文件直接在手机上访问
没有服务器的情况下，纯静态的代码，webstrom等编辑器只能在电脑上临时启一个服务供电脑上的浏览器访问，尝试把地址在手机上访问，即使是同内网也不行，然后就有了下面这个方案，不知道弊端有多大，但是有效：安装node； 全局安装anywhere的npm包。（npm i -g anywhere） 在需要访问的目录下用命令行（cmd或者git bash都行）执行anywhere就可以；(-p 参...
2019-07-31 14:13:04
949
1
原创 根据url地址生成二维码，微信扫描二维码可直接打开网址
需求：根据url地址生成二维码，微信扫描二维码可直接打开网址html代码：<input id="text" type="text" value="http://www.runoob.com" onblur="makeCode();" onkeydown="keyEnter();"/><div id="qrcodeContent"> <div id...
2019-07-12 15:38:35
11393
原创 一行代码实现纯数据json对象的深度克隆
JSON.parse(JSON.stringify( dataObj ))补充：只支持纯对象的嵌套，对象里嵌套函数或者new Fn都不支持
2019-07-10 15:00:37
340
原创 ellipsis在table里失效
问题：display：table，或者table标签布局之后，设置td（table-cell）文字溢出隐藏ellipsis失效解决方法：在table（display：table）的css样式中设置:table-layout:fixed; 在table td 的css样式中设置：overflow:hidden;text-overflow:ellipsis;即可出现频率太高，遗忘太快。...
2019-07-05 10:14:34
2898
原创 JQuery自定义模态框
重点：基于jQuery ，也可改造成原生模态框功能：可以自定义模态框的宽高等等一系列css样式； 关闭、提交都可以执行自定义的回调函数； js和html分离，除了部分带了js功能的class不能遗漏之外，其他的都可自行增减html代码：<div class="dialog-tiya" id="voteModal"> <div class="modalB...
2019-07-03 11:11:42
559
1
原创 swiper 自定义左右箭头样式 将箭头移出容器
关键点：1.在".swiper-container"外层套一个父级容器“.swiper-father”，并让其position：relative；2.重点：箭头相关的两行代码，要从“.swiper-container”移出来，放在“.swiper-father”下css代码：.swiper-father { position: relative; padding:0 37px...
2019-07-02 10:20:34
5489
原创 日期格式化
Date.prototype.format = function (format) { var date = { "M+": this.getMonth() + 1, "d+": this.getDate(), "h+": this.getHours(), "m+": this.getMinutes(), "...
2019-06-19 09:39:02
77
原创 数组重分组
场景：有一个数组，希望将数组里的元素按照3个一组重新分组，返回一个新的数组regrouping(data){ let result = []; let chunk = 3; //每3个分一组 for (let i = 0, j = data.length; i < j; i += chunk) { result.push(data.slice(i...
2019-06-06 10:56:44
308
转载 Google Chrome 浏览器快捷键说明大全
标签页和窗口快捷键快捷键说明Ctrl + t打开新的标签页。（常用）Ctrl + Shift + Tab 或 Ctrl + Pgup跳转到上一个打开的标签页。（常用）Ctrl + 1 到 Ctrl + 8跳转到指定索引号的标签页。（常用）Alt + ←打开历史记录中的上一页。（常用）Alt + →打开历史记录中的下一页。（常用）Ctrl...
2019-05-03 13:02:14
271
原创 vue初学测试之webpack4.29.6集成vue-loader@15.7.0报错
报错Module Error (from ./node_modules/vue-loader/lib/index.js): vue-loader was used without the corresponding plugin. Make sure to include VueLo aderPlugin in your webpack config.百度找到了答案，原来Vue-loader在...
2019-04-01 11:07:19
1442
原创 iCheck插件使用
最近项目里正好用到这个插件，奈何记性不好 ，每次都得查资料，写在这里一劳永逸，欢迎大家提意见，共勉。好啦，上代码。1.引用对应文件首先需要去下载icheck插件必要的js和css文件，贴一个非唯一的下载地址：http://plugins.jquery.com/icheck/1.0.1/此插件是依赖jquery的，一定要先加载jquery.js。如何引用js和css我就不赘述了，差...
2018-07-10 15:27:52
2548
原创 正则表达式截取身份证号码加密
直接上代码：var idCard = '420119188404098978X';//保留前四位和后四位，中间用*号加密idCard = idCard.replace(/(\d{4})\d*([0-9a-zA-Z]{4})/,"$1******$2");//结果：4201******978X
2018-06-26 10:04:00
1286
原创 浏览器用户代理检测
用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。在每一次 HTTP 请求过程中，用户代理字符串是作为响应首部发送的，而且该字符串可以通过 JavaScript 的navigator.userAgent 属性访问。用户代理代理检测，主要通过navigator.userAgent 来获取用户代理字符串的，通过这组字符串，我们来获取当前浏览器的版本号、浏览器名称、系统名称。PS：在服务
2018-01-11 11:27:43
522
原创 浏览器检测
浏览器及版本号可以通过navigator对象来做判断，但是兼容性问题太大，具体怎么用大家去百度。这次要给大家推荐的是一个js小程序——浏览器嗅探器，有了它，浏览器检测就变得简单了。该js主要用于判断浏览器的名称、版本号及操作系统。戳这里 ——> browserdetect.js下载地址接下来说一下使用方法，超级简单，比自己判断要方便多了，希望能解决大家的问题。alert(Bro
2018-01-10 16:13:05
318
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人