Curry 3O-优快云博客

原创 Promise API 的手动实现

Promise API 的手动实现一、Promise 手写实现原理：其实就是一个发布订阅者模式构造函数接收一个 executor 函数，并会在 new Promise() 时立即执行该函数then 时收集依赖，将回调函数收集到成功/失败队列executor 函数中调用 resolve/reject 函数resolve/reject 函数被调用时会通知触发队列中的回调ES5写法(function(window) { const PENDING = "pending"; con

2021-05-18 20:19:15 598 5

原创 javascript的数组方法重写

push()方法：可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度Array.prototype.myPush = function () { var L = this.length; for (var i = L; i < L + arguments.length; i++) { this[i] = arguments[i - L]; } return ...

2019-12-17 18:02:55 807

原创 element-ui的时间格式处理

日期时间格式：显示的可能是正确的时间格式但是最后获取的那个model的值就不是显示的那个样子的。比如显示年月日时分秒。但是后台只需要年月日。这个时候就利用value-format和formatvalue-format绑定值的格式也就是最后后端接口需要我们传的数据格式formatformat的属性，是控制显示的格式的。最后选中以后显示在输入框中的格式value-for...

2019-12-15 14:42:16 2697 1

原创 Vue生命周期中的钩子函数及父子组件的执行顺序

vue的生命周期图在vue实例的整个生命周期的各个阶段，会提供不同的钩子函数以供我们进行不同的操作。先列出vue官网上对各个钩子函数的详细解析。生命周期钩子详细beforeCreate在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。created实例已经创建完成之后被调用。在这一步，实例已完成以下的配...

2019-12-15 14:24:58 360

原创 Vue路由全局守卫

一、路由守卫路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。对此，vue-route 提供的beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。---- 导航守卫文档地址二、全局前置守卫beforEach使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ .....

2019-12-15 13:57:42 2985

原创 Vue项目中使用keep-alive

一、需求背景项目主流程缓存优化，主流程页面（组件）切换时保持之前加载的状态，避免反复渲染影响页面性能，同时也可以很大程度上减少接口请求，减小服务器压力。二、概念和作用概念：keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不...

2019-12-14 11:39:16 564

原创 Vue项目登录及token验证

一、Vue实现token验证思路逻辑第一次登录的时候，前端调后端的登陆接口，发送用户名和密码后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面每次调后端接口，都要...

2019-12-14 10:15:34 739

原创 Web前端面试题汇总

1.说一下http和https- http和https的基本概念 http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。 https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL...

2019-09-10 20:42:00 556

原创 ES6和React笔试题

1、var、let、const之间的区别var声明变量可以重复声明，而let不可以重复声明var是不受限于块级的，而let是受限于块级var会与window相映射（会挂一个属性），而let不与window相映射var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错const声明之后必须赋值，否则会报错const定义不可变的量，改变了就会报错const和le...

2019-09-03 20:32:40 1897

原创 Axios与Ajax的区别

一、Axiosaxios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中特点：从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF二、AjaxAjax 是 Asynchronous J...

2019-09-02 13:13:44 3063

原创 Generator函数

一、Generator的基本概念1.定义Gernerator函数Generator是一种函数，这种函数是ES6提出的一种异步编程的解决方案，在它内部，使用 yield 关键字封装了一个个状态机。这个函数的执行结果，就是一个遍历器对象。function* next() { yield 1; yield 2+2; return 3;}var fun = next();co...

2019-09-01 12:52:21 313

原创 Ant Design Pro入门

一、Ant Design Pro 介绍Ant Design Pro 是一个企业级中后台前端/设计解决方案，秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。基于上述目标，并据此构建了一套基于 React 的中后台管理控制台的脚手架，它可以帮助...

2019-08-31 13:12:45 425

原创 DvaJS快速上手

一、DvaJS 介绍dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。特性易学易用仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 APIelm 概念通过 reducers, effects 和 ...

2019-08-31 12:17:36 1776

原创 Redux中间件与异步操作

一、中间件的概念与用法中间件就是一个函数，对 store.dispatch 方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。redux-logger模块import { applyMiddleware, createStore } from 'redux';import createLogger from 'redux-logger';const...

2019-08-30 11:31:32 332

原创浅谈 react-redux

一、react-redux 介绍react-redux 是 reactjs 一个衍生插件，在简单的一些应用中，采用 state，props 和 context 等就能解决。一旦在业务逻辑复杂时，系统复杂的情况，还是采用这三兄弟去开发，会使得代码很复杂，臃肿，维护显得捉襟见肘，很吃力。react-redux 的出现显得尤为必要，可以很好的系统业务逻辑和前端 ui 代码给分割开，采用函数式编程,以便...

2019-08-29 11:32:57 172

原创 Redux自述

一、Redux概念简述Redux 是 JavaScript 状态容器，提供可预测化的状态管理。简单来说，redux就是一个储存数据的仓库。Redux要求把数据放到公共存储区域Store里，组件中尽量少放数据。当蓝色组件修改公共数据时，Store中的值发生改变，其他使用到该数据的组件到Store中取修改后的值即可。Redux设计理念图安装$ yarn add redux//或者也...

2019-08-28 11:28:49 195

原创 Axios

一、axios的安装与配置1.介绍axios是使用promise机制封装的ajax，可以在浏览器和nodejs使用。相对比jquery来说axios是更加纯粹的ajax的框架。2.安装$ yarn add axios3.功能特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应...

2019-08-27 10:46:00 148

原创 WebStorage

一、Webstorage介绍HTML5中与本地存储相关的两个重要内容：WebStorage与本地数据库。其中，WebStorage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的WebStorage存储机制。本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须保存在服务器端数据库中...

2019-08-26 10:48:52 409

原创 JavaScript面试题

1. javascript 的 typeof 返回哪些数据类型答案: string、number、undefined、boolean、object 和 function2.例举几种强制类型转换和隐式类型转换答案: 强制类型转换: parseInt、parseFloat、Number()、String() 、Boolean()隐式类型转换: +、-、== 、===3. spli...

2019-08-25 20:27:11 625

原创 Ant Design of React

一、Ant Design of React介绍antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。特性提炼自企业级中后台产品的交互语言和视觉风格开箱即用的高质量 React 组件使用 TypeScript 构建，提供完整的类型定义文件全链路开发和设计工具体系支持环境现代浏览器和 IE9 及以上（需要 polyfill...

2019-08-24 13:39:01 363

原创 React中的路由机制

一、React路由机制react-router实现了路由的核心机制，Switch、Router、Route。react-router-dom基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使...

2019-08-23 10:34:25 735

原创 React中的表单

1.表单在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的 state。例如这个纯 HTML 表单只接受一个名称:<form> <label> 名字: <input type="text" name="name" /> </label> &lt...

2019-08-22 11:22:53 337

原创 React组件基础

一、组件的创建方式类组件可以通过ES6中的类来创建组件，该类继承React.Component，并且拥有一个render()函数，该函数的作用于函数组件的那个函数一样，用于返回一个JSX。class Clock extends React.Component { // render函数表示渲染，每次重新渲染都要调用该函数 render(){ return ( <div&gt...

2019-08-21 11:09:12 339

原创初学React

1.了解mvc模式与mvvm模式mvc后台主导开发的思想。这种思想一般应用在后端中的web层，m表示model数据模型，v表示view视图，c表示controller控制器。在 servlet、jsp 中主要应用的就是mvc思想。mvvm前后台分离开发中的前端思想。m表示model数据模型，v表示view视图，vm表示视图模型，负责把Model的数据同步到View显示出来，还负责把Vie...

2019-08-20 12:39:02 160

原创 es6的Promise对象

1.Promise介绍Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提...

2019-08-19 13:17:36 96

原创 ES6中数组、对象和函数的扩展

一、数组的扩展1.概念扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。扩展运算符与正常的函数参数可以结合使用，后面也可以放置表达式，但如果后面是一个空数组，则不产生任何效果。let arr = [];arr.push(...[1,2,3,4,5]);console.log(arr); //[1,2,3,4,5]conso...

2019-08-18 19:58:10 418

原创 ES5和ES6中继承的实现

一、ES5中的两种非常经典的继承1.组合继承指的是将原型链和构造函数的技术组合到一起来实现继承。其背后的思路就是使用原型链实现对原型属性和方法的继承，而通过构造函数来实现对实例属性的继承。示例//构造函数继承实例属性(当然也可以有方法，不过不建议这么做)function Phone(name){ this.name = name; this.label=["全面屏","5...

2019-08-17 13:20:14 198

原创 Npm包管理工具

一、介绍Npm包管理工具，JS开发者能够更方便的分享和复用以及更新代码，被复用的代码被称为包或者模块，一个模块中包含了一到多个js文件。在模块中一般还会包含一个package.json的文件，该文件中包含了该模块的配置信息。一个完整的项目，需要依赖很多个模块。一个完整的npm包含三部分npm网站-----用于预览npm管理的包注册机制-----用于上传包，使用数据库来维护包与上传者...

2019-08-16 11:30:40 205

原创 es6中的Iterator介绍

一、Iterator（遍历器）的概念JavaScript原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。遍历器（Iterator）就是这样一种机制。它是一种接口，为各种...

2019-08-15 11:46:26 282

原创 es6中数组的扩展

一、扩展运算符（…[ ]）的应用1.转成参数序列2.复制数组const a1 = [1, 2];const a2 = a1.concat(); //es5const a3 = [...a1]; //es6const [...a4] = a1;3.合并数组 [...arr1, ...arr2, ...arr3] （浅拷贝）4.解构赋值 const [first, ...r...

2019-08-14 11:33:22 102

原创 Javascript小题库

一、简答题1. Javascript的组成？ECMAScript 核心语法规则DOM 对文档节点的操作BOM 对浏览器的操作2. Javascript可以运行在什么地方？Node环境下或浏览器中。3. Javascript基本数据类型有哪些undefinednullnumberstringboolean在JS中除了以上基本数据类型，其他所有类型都可以归结为引用数据...

2019-08-13 20:42:09 1946

原创浅谈 ECMAScript 6 基本语法

一、相关背景介绍我们现在大多数人用的语法javascript 其实版本是ecmscript5,也是就es5。这个版本己经很多年了，且完美被各大浏览器所支持。所以很多学js的朋友可以一直分不清楚es5和javscript的关系。javascript是一门编程语言，那么它就会有版本，es5还是es6 就就是它的版本号。最新版es7己经在紧锣密布的进行中，它最新的语法会让我们写代码更新的行云流水。想了...

2019-08-12 12:43:14 344

原创 Bootstrap中的switch开关组件

一、简介Bootstrap Switch是一款通过复选框美化实现的一款开关控件，可以给选择框设置类似于开关的样式，它是依赖于Bootstrap的一款插件。二、下载官网地址 : https://www.bootcdn.cn/bootstrap-switch/GitHub下载地址 : https://github.com/Bttstrp/bootstrap-switch三、导入<li...

2019-08-11 18:49:47 14396

原创 jquery树形插件zTree使用

一、介绍zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。特点：1.zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载2.采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀3.兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器4.支持...

2019-08-10 12:27:46 1015 1

原创 jQuery分页插件使用

jquery.tabulation.js插件介绍jquery.tabulation.js是一款兼容bootstrap的jQuery分页插件。该插件可将一组同级元素转换为分页或tabs，提供回调函数，实现可分页功能。一、jquery.tabulation.js插件使用方法首先是引入一些基础的资源问价，包括jquery和jquery.tabulation.js文件。<script src...

2019-08-09 19:53:37 1025

原创简单介绍AJax

一、什么是Ajax?Ajax = 异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。二、Ajax特点Ajax应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。三、ajax的使用及实现步骤(1...

2019-08-08 23:02:09 114

原创七夕的小礼物

把这个送给你喜欢的人看，他/她会很开心的！示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>七夕的秘密</title> <style> canvas { position: absolute; t...

2019-08-07 12:35:28 318

原创 canvas制作动态太极图

用 canvas 画布绘制出一个会旋转的太极图方法一：运用css动画来实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态版太极图</title> <style> *{ margin: 0; ...

2019-08-06 13:40:48 1476

原创 Jquery实现点击图片后居中放大

在页面中，点击图片后图片在页面居中放大，并且背景虚化。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Jquery实现图片点击后居中放大</title> <style> *{ margin: 0; p...

2019-08-05 11:37:51 1488

原创数组的迭代方法

数组的迭代方法ECMAScript 5 为数组定义了 5 个迭代方法。每个方法都接收两个参数：要在每一项上运行的函数（可选的）运行该函数的作用域对象——影响 this 的值。传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。根据使用的方法不同，这个函数执行后的返回值可能会也可能不会影响方法的返回值。以下是这 5 个迭代方法的作用。一、不生成新数组的迭代器方法f...

2019-08-04 20:03:16 132

空空如也

空空如也