多晴丶-CSDN博客

原创函数柯里化

柯里化（Currying）柯里化（Currying）[1]是一种关于函数的高阶技术。它不仅被用于 JavaScript，还被用于其他编程语言。柯里化是一种函数的转换，它是指将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)( c )柯里化不会调用函数。它只是对函数进行转换。让我们先来看一个例子，以更好地理解我们正在讲的内容，然后再进行一个实际应用。我们将创建一个辅助函数 curry(f)，该函数将对两个参数的函数 f 执行柯里化。换句话说，对于两个参数的函数 f(a, b)

2020-12-25 10:54:25 174

原创 JavaScript 技巧

Replace All我们知道 string.Replace() 函数只会替换第一个项目。你可以在这个正则表达式的末尾添加 /g 来替换所有内容。var example = "potato potato";console.log(example.replace(/pot/, "tom")); // "tomato potato"console.log(example.replace(/pot/g, "tom")); // "tomato tomato"提取唯一值我们可以使用 Set.

2020-12-24 09:31:11 158

原创解决实际问题的ES6代码段

1、如何隐藏所有指定元素？ const hide = (...el) => [...el].forEach(e => (e.style.display = 'none')); // Example hide(document.querySelectorAll('img')); // 隐藏页面上的所有元素2、如何确认元素是否具有指定的类？const hasClass = (el, className) => el.classList.contains(c

2020-12-21 10:53:30 243

原创说说你对Vue生命周期的理解?

一、生命周期是什么生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程在Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作PS：在Vue生命周期钩子会自动绑定 this

2020-12-04 09:38:53 1127

原创 JavaScript简写技巧

声明变量//Longhand let x; let y = 20; //Shorthand let x, y = 20;给多个变量赋值我们可以使用数组解构来在一行中给多个变量赋值。//Longhand let a, b, c; a = 5; b = 8; c = 12;//Shorthand let [a, b, c] = [5, 8, 12];三元运算符我们可以使用三元（条件）运算符在这里节省 5 行代码。//Longhand let marks = .

2020-12-03 10:24:41 142

原创 jquery总结大纲

一：选择器基本选择器什么是#id，element，.class，*，selector1, selector2, selectorN？答：根据给定的id匹配一个元素，用于搜索，通过id的属性给定值。案例：查找id为da3的元素html代码：<div id="da1"></div><div id="da2"></div><div id="da3"></div>jquery代码：$("#da3");结果：[

2020-09-29 23:30:39 106

原创 Vue最全知识点

说说你对MVVM的理解Model-View-ViewModel的缩写，Model代表数据模型，View代表UI组件,ViewModel将Model和View关联起来数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据Vue2.x响应式数据/双向绑定原理Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。其中，View变化更新Data，可以通过事件监听的方式来实现，所以 Vue数据双向绑定的工作主要是如何根据Data变化更新V

2020-09-28 23:28:08 137

原创 CSS常见用的布局

display属性display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素、block块级元素： div、p、h1~h6、 header、section、footer 等等。特点：1.独占一行 2.可以设置宽和高3. 可以容纳行内块元素和其他元素inline行内元素： span、img

2020-09-27 14:36:21 161

原创前端优化

从客户端着手压缩代码(js/css),压缩图片合并一些小图片(css,sprite),使用雪碧图若是打包的代码尽可能切割成多个chunk,减少单一chunk过大HTTP的缓存头使用合理减少第三方库依赖对代码应该考虑性来编写,比如使用requsetAnimationFrame绘制动画,尽可能减少页面重绘(Dom改变)渐进升级,引入preload这些预加载资源看情况用 service worker来缓存资源从服务端着手宽带,域名解析,多域名解析页面做服务端渲染,减少对浏览器的依赖(不

2020-09-24 21:44:14 87

原创 JavaScript 字符串中的 pad 方法！

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全const string = 'hi';string.padStart(3, 'c'); // "chi"string.padEnd(4, 'l'); // "hill"语法string.padStart(<maxLength>, <padString>)string.padEnd(<maxLength&gt

2020-09-23 21:52:25 2530

原创缩减 SCSS 50%样式代码(上)

1.变量 $ 使用我们可以通过变量来复用属性值，比如颜色、边框大小、图片路径等，这样可以做到更改一处，从而进行全局更改，从而实现“换肤”的功能。实例1：我们的组件库，利用变量配置，进行统一更改组件的颜色、字体大小等（换肤）$color-primary: #3ecacb;$color-success: #4fc48d;$color-warning: #f3d93f;$color-danger: #f6588e;$color-info: #27c6fa;实例2：图片的配置及全局引入$comm

2020-09-22 21:52:46 118

转载详解微信小程序支付流程

首先先把小程序微信支付的图搬过来：相信会来查百度的同学们基本都是对文档的说明不是很理解。我下面大概总结一下整个业务逻辑的过程。微信小程序的商户系统一般是以接口的形式开发的，小程序通过调用与后端约定好的接口进行参数的传递以及数据的接收。在小程序支付这块，还需要跟微信服务器进行交互。过程大致是这样的：一.小程序调用登录接口获取code，传递给商户服务器用来获取用户的openID我们知道在微信平台中，同一个公众号的openID都是不同的，它是用户身份识别的id，也就是说，我们通过openID来区分不同的用

2020-09-21 19:50:18 4567

原创 vue中mixins的使用

vue中mixins(混入)的使用一、来自官网的描述混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二、项目中如何使用混入在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。你可以将一个对象作为混入的选项，在组件中复用。因为vue实例也是对象，所以你可以将vue实例作为混入选项传递进去。我们可以

2020-09-18 21:20:04 2183

原创数组扁平化

什么是数组扁平化？数组扁平化就是将一个多维数组转换为一个一维数组实现基本方式1、对数组的每一项进行遍历。2、判断该项是否是数组。3、如果该项不是数组则将其直接放进新数组。4、是数组则回到1，继续迭代。5、当数组遍历完成，返回这个新数组。1.常规方式递归处理Array.prototype.flatten = function () { var resultArr = []; var len = this.length; for (var i = 0; i < len; i

2020-09-16 20:43:19 308

原创 Vue Element UI 之富文本图片上传服务器 + 图片地址插入富文本

vue版本：vue cli3插件：vue-quill-editor插件增强模块：quill-image-extend-modulequill-image-extend-module功能:提供图片上传到服j务器的功能(复制插入,显示上传进度,显示上传成功或者失败)1:安装插件npm install vue-quill-editor --save-devnpm install quill-image-extend-module --save-dev2:引入import { quillEdito

2020-09-15 21:03:21 894 2

原创 58道Vue常见面试题集锦，涵盖入门到精通

1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；虚拟DOM：dom 操作是非常耗费性能的，不再使用原生的 d

2020-09-14 21:51:59 316

原创 vue中ECharts使用

第一步,下载echarts ,并导入npm install echarts --saveimport echarts from "echarts"; //导入echartsimport _ from "lodash";//导入数据合并第二部,在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。<body>  <div id="main" style="widt

2020-09-13 18:39:27 140

原创元素垂直水平居中的10中方法,建议收藏

**第一种：**通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高，给子元素设置top：50%；left：50%，但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了/*css*/ .wp { border: 1px solid red; width: 300

2020-09-09 23:07:11 560

原创使用FormData对form表单序列化

一、FormData作用将form表单元素的name与value进行组合，实现表单数据的序列化异步上传二进制文件二、创建formData对象<form id="form"> <input type="text" name="username"> <input type="password" name="password"> <!-- type 设置为button，不会触发form 提交 -

2020-09-08 22:27:27 807

原创解构赋值

解构赋值是一种表达式，允许您使用数组或对象，将可迭代对象的值或属性分配给变量。解构赋值能让我们用更简短的语法进行多个变量的赋值，大大的减少了代码量。解构表达式有两种：array和object。1)数组E6之前，我们可以这种形式将数组的内容赋值给多个变量：var Array = [1, 2, 3];var a = Array[0];var b = Array[1];var c = Array[2];ES6中，我们可以通过数组解构语法，在一行语句里完成上述操作。let Array = [1,

2020-09-07 23:57:12 195

原创搜索+防抖

搜索+防抖1.以每时每刻这个项目为例,很多页面都有搜索功能,而且跳转的时同一个搜索页面,在完成搜索功能后,在返回原页面,需要一个唯一标识来记载// 搜索goSearch() { this.$router.push({ path: "/search", query: { name: this.$route.name }}); //通过query传参,把每个页面的$route.name传递过去,因为在注册路由的时候,每个路由的name值都是唯一的}//路由注册表

2020-09-05 19:14:45 354

原创 Promise,async,await

什么是Promise？Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，promise是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。Promise的两个特点Promise对象的状态不受外界影响1）pending 初始状态2）fulfilled 成功状态3）rejecte

2020-09-04 00:05:55 77

原创闭包,原型链和继承

闭包,原型链和继承1.闭包定义:函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包。作用:内部函数总是可以访问其所在的外部函数中声明的参数和变量优缺点: 让外部访问函数内部变量成为可能；局部变量会常驻在内存中；可以避免使用全局变量，防止全局变量污染；会造成内存泄漏（有一块内存空间被长期占用，而不被释放）使用闭包的注

2020-09-03 01:10:41 156

原创上拉加载原理

实现思路之前写过一篇触底加载,经过一番苦学钻研,优化一下样式方面:滚动区域是给固定高度，设置 overflow-y: auto 来实现。接下来看看js方面的实现，其实也很简单，触发的条件是：可视高度 + 滚动距离 >= 实际高度。例子我会使用vue来实现，和原生实现是一样的。可视高度(offsetHeight)：通过 dom 的 offsetHeight 获得，表示区域固定的高度。通过 getBoundingClientRect() 来获取高度，因为使用前者会引起浏览器回流，造成一些性能问

2020-09-02 00:54:11 1185

原创 vue实现防抖和节流

防抖（debounce）所谓防抖，就是指触发事件后，就是把触发非常频繁的事件合并成一次去执行。即在指定时间内只执行一次回调函数，如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计算。用定时器实现防抖//用定时器实现防抖function debounce(func,wait) { var timer=null; return function() { //保存当前调用的dom对象 var _this=this; //保存事件对象

2020-08-31 21:38:47 3082

原创 vue实现省市区三级联动,借助vant-Area组件

vue实现省市区三级联动,借助vant-Area组件 <div> <van-area title="标题" :area-list="areaList" @change="change" @confirm="sure" @cancel="cancel"/></div>//首先要知道vant-Area组件的渲染数据格式如下{ province_list: { 110000: '北京市', 1200

2020-08-30 23:57:10 1265

原创 JS中常用的数组遍历方法

JS中常用的数组遍历方法1.for循环let arr=[1,2,3,4,5,6]for(let i=0;i<arr.length;i++) { console.log(arr[i])//1,2,3,4,5,6j}2.foreach循环//foreach没有返回值let arr=[1,2,3,4,5,6]arr.forEach((item,index)=>{ console.log(itme)//1,2,3,4,5,6 console.log(index)

2020-08-28 00:57:04 300

原创 vue组件通讯

vue组件通讯1父子通讯1-1.利用对象特性–浅拷贝1-2.利用vue中的sync和$emit实现1-3.把props接收的值处理成data变量或computed计算属性//1-1//在传递props时用Object.assign拷贝一份数据（这里数据是一个单层级对象），然后在子组件里面对其进行编辑//1-2this.$emit('向父级派发的事件名',传递的数据)//1-3props: ['num'],data: function () { return { num: t

2020-08-26 23:27:37 159

原创 cookie,localStorage,SessionStorage三者的区别,以及在vue中的用法

cookie,localStorage,SessionStorage三者的区别,以及在vue中的用法基本概念cookiecookie英文饼干，顾名思义，大小应该非常小，cookie非常小，它的大小限制在4kb左右.localStoragelocalStorage是HTML5标准中新加入的技术,如今localStorage被大多数浏览器所支持。sessionStoragesessionStorage与localStorage的接口类似，但保存数据的生命周期与localStorage不同。而ses

2020-08-24 23:20:54 1283

原创 VUEX各个模块的封装以及Router封装

一、各个模块的作用：state 用来数据共享数据存储mutation 用来注册改变数据状态（同步）getters 用来对共享数据进行过滤并计数操作action 解决异步改变共享数据（异步）二、创建文件：actions.jsgetters.jsmutations.jsmutationsFun.jsstate.js三、编辑文件//在store的文件下index.js引入import Vue from 'vue'import Vuex from 'vuex'imp

2020-08-21 23:43:49 320

原创 VUE中用原生JS实现触底加载数据

VUE中用原生JS实现触底加载数据在vue开发过程中使用第三方组件是不可避免的,但是第三方样式的css样式属实头痛,所以我选择原生JS的写法完成了触底加载1:定义datapage: 1, //页数limit: 10, //每页数据条数flag: true //开关,featureList:[]//渲染数据2:封装函数 mounted() { window.addEventListener("scroll", this.getMore);//监听滚动 },getMore()

2020-08-20 23:26:24 1136 1

原创 vue-cli3.0的项目上，配置多个环境

vue-cli3.0的项目上，配置多个环境一般情况下，我们会需要三个环境（开发环境、测试环境、生产环境），而3.0默认只支持两个环境（即测试环境、生产环境）创建测试环境1:在根目录下创建一个evn.test文件NODE_ENV = 'test'2在项目根目录添加 config.js文件,配置各环境的urllet BASE_URL = ""; //这里是一个默认的url，可以没有switch (process.env.NODE_ENV) { case 'development':

2020-08-20 00:14:14 760

原创基于webpack搭建vue的开发环境,手动搭建vue脚手架

基于webpack搭建vue的开发环境1:创建并初始化项目mkdir webpack-demo //从cmd命令行常见文件夹cd webpack-demo //进入目录npm init -y //初始化package.jsonnpm install webpack webpack-cli --save-dev //安装webpack和webpack-cli2:在根目录下常见src文件夹创建index.js和index.html文件 /- webpack-demo |- packag

2020-08-18 00:24:16 384

原创 VUE项目性能优化,v-if,v-for,props,computed,watch......

VUE项目性能优化,v-if,v-for,props,computed,watch…下个星期就要用vue开发了,就未雨绸缪的搜集了一些干货,整理出来1:解决v-for和v-if优先级问题,以及通过计算属性来做数据筛选<template v-for="item in 10"> <div v-if="item % 2 == 0" :key="item">{{item}}</div></template><ul> <li

2020-08-15 01:38:08 812

原创微信小程序动画效果,小程序animation动画

微信小程序动画效果最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡闲来无事写了一个小demo<view class="wrapper">  <view class="headerImage" catchtap="imageAnimation" animation

2020-08-14 01:10:42 3825

原创微信小程序中使用计算属性

微信小程序中使用计算属性在小程序开发中,它的基本原理和vue是大同小异,但是有的时候就是因为这小异造成很多不必要的麻烦.在小程序开发中,改变数据更新视图用的是Page.prototype.setData方法，遇到一些复杂数据逻辑判断时，代码会写的很繁琐，这个时候就让我想起了vue中的计算属性了,当然小程序自定义组件扩展 behavior，计算属性 computed 和监听器 watch 的实现。在 data 或者 properties 改变时，会重新计算 computed 字段并触发 watch 监听器

2020-08-13 00:06:36 14738 5

原创 !!!!解决小程序wx.navigateBack,wx.switchTab不能传参问题!!!!及小程序路由跳转

解决小程序wx.navigateBack,wx.switchTab传参问题!!!今天在小程序项目开发中,涉及到路由跳转传参,搞得我是一头雾水,查了查官方文档原来wx.navigateBack,wx.switchTab 不能传参,呵呵,规矩是死的,人是活的,我就是喜欢游走在法则的边缘,所以搜集了各种资料总结如下首先先介绍一下官方文档中小程序的路由跳转方法以及规定的传参方式//第一种:需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后

2020-08-11 23:59:59 1638

空空如也

空空如也