花生酱与果酱-CSDN博客

原创 vue结合Element - ui实现行合并（看懂这个以后的行合并都不是问题）

今天客户提了个需求，要实现这样得数据展示。每个技术标中的供应商的评分要素是一定的，例如在这个数据中每个技术标供应商的评分要素就只有4个，底下还有一个商务标。话不多说上一下后端给我的假数据。这样的数据有63条，我让后端给我的是按评分要素作为最小单位的详细数据，因为要是按嵌套数组的方式给我的话，难度可能比较大。下面展示完整代码<template> <div> <el-button @click="aaa"></el-button>

2020-06-30 11:15:03 2690

原创 JavaScript异步编程---Generator异步方案、Async / Await语法糖

Generator异步解决方案借助于yield能够暂停生成器函数执行的特点，借助于生成器函数实现一个更优的异步编程体验。除此之外，还需要判断每个next方法返回值中的done属性来判断是否还有下个next。所以在此我们逸刻使用递归方式实现：Async / Await语法糖在ES2017中新增了该语法糖，提供了扁平化的异步编程体验，并且是语言层面标准的语法，使用起来更加的方便。Async 其实就是生成器函数的更方便的语法糖，所以使用方式上有些类似。该语法糖的好处是，不用再通过一个类似于hand

2020-06-12 11:17:38 326

原创 JavaScript异步编程---Promise详解

Promise概述在异步编程中直接使用传统回调的方式去完成复杂的异步流程，那就无法避免大量的回调函数嵌套，这就会导致回调地狱问题。举个例子：为了避免这个问题，CommonJS社区提出了Promise的规范，在ES2015中被纳入规范。Promise实际上就是一个对象用来表示异步任务在执行过后是成功还是失败。一开始这个承诺是待定的状态，在执行过后有两个结果，成功或者失败。不管是成功还是失败，都会有对应得反应方法。在结果产生后对应得方法都会自动执行，出自之外还有一个特性，就是这个结果一旦产生那就无法

2020-06-12 10:22:11 1362 5

原创 JavaScript异步编程---同步模式、异步模式、回调函数

概述众所周知，当前主流的JavaScript环境都是以单线程模式去执行代码的。其原因和当时设计该语言的初衷有关系，最早这门语言就是运行在浏览器上的脚本语言，目的是为了实现页面上的动态交互，其核心就是dom操作，该点决定了他必须要使用单线程模式，否则就会出现很复杂的线程同步问题。该种模式的有点很明显就是安全，但是缺点也很明显，万一遇到某个特别耗时的操作，后面的任务都需要排队等待前面执行完毕。这样就会导致出现假死的情况。为了解决上述的问题，将任务执行的模式分成了同步模式和异步模式。下面将要涉及到的内容

2020-06-10 16:05:34 445

原创 ES6新特性---ES2016概述、ES2017概述

ES2016概述ES2016只是一个小版本，包含两个小功能。数组实例对象的includes方法，这个方法让我们去检查数组中是否包含某个元素变得更加简单。在此之前我们需要去检查数组中是否存在某个元素我们需要使用数组对象的indexof方法。除此之外，还新加入了一个指数运算符，在此之前需要进行指数运算需要借助于Math方法中的pow方法。而新加的指数运算是语言本身的运算，所以更加方便和快捷。ES2017概述ES2017与2015相比，也是一个小版本，同时也带来了一些有用的新功能。...

2020-06-09 16:54:01 469

原创 ES6新特性---可迭代接口、迭代器模式、生成器、生成器应用

可迭代接口随着ES中有结构的数据类型越来越多，提供了一种能被for…of…遍历数据结构的标准。实现可迭代接口Iterable接口就是for…of…的前提。只要实现了该接口，就能被for…of…遍历访问。所以内部必须要去挂载一个iterator方法，方法需要返回一个带有next()方法的对象，不断调用这个方法就能实现遍历。实现可迭代接口以上述代码为例，一共包含了三层对象，第一层就是选中的部分，我们自定义的这个对象，这个对象实现了可迭代接口（iterable），这个接口的约定就是内部必须要有一个

2020-06-09 14:58:11 217

原创 ES6新特性---Symbol、for...of循环

SymbolSymbol是一种全新的原始数据类型，在此之前，对象的属性名都是以String来存储的，那么就可能出现重复。在Symbol出现之前，是通过约定来解决这个问题的。现如今大量使用第三方应用，我们需要去扩展第三方对象中的属性，这样就会出现问题。Symbol的作用就是创建一个独一无二的值。Symbol允许我们传入一个描述作为区分，并且在ES2015之后，我们可以Symbol作为对象的属性名此外借助于这个特性，我们还可以模拟实现对象的私有成员。如图，在外部文件中，因为无法创建一个完全相同

2020-06-09 10:44:01 548

原创 ES6新特性---Reflect、类、静态方法、Set、Map

ReflectReflect是ES2015中一个全新的内置对象，按照Java的说法， Reflect就是一个静态类，不能通过new的方式去构建一个实例对象，只能去调用这个静态类中的静态方法，这点与JavaScript中的Math是相同的。Reflect内部封装了一系列对对象的底层操作，一共有14个静态方法，其中又一个被废弃了。但是Reflect成员方法就是Proxy处理对象的默认实现。假如你没有写get和set方法的情况下，系统会默认加上图中所示的get方法。这个方法的意义在于统一提供了一套用于

2020-06-08 13:43:49 273

原创 ES6新特性---对象扩展方法Object.assign、Object.is、Proxy与Object.defineProperty

对象扩展方法Object.assign、Object.isES2015中为对象提供了一些扩展方法，我们来看几个最主要的方法。assign这个方法可以将多个源对象中的属性复制到一个目标对象中去如果对象之间存在相同的属性，源对象中的属性会覆盖目标对象中的属性我们是从源对象中取然后往目标对象里面放该方法常用来复制一个对象，除此之外assign方法用来为options去设置默认值也是一个非常常见的应用场景。isis方法用来判断两个值是否相等。之前我们常用==运算符和 ===严格相等运算符，==运算

2020-06-08 09:48:43 414

原创 ES6新特性---箭头函数、this、对象字面量的增强

箭头函数箭头函数实际上是简化了函数表达式的定义方式，允许我们使用=>来定义函数，一来简化了定义，二来对了一些新特性。以往我们定义函数需要用function 去定义函数，现在我们完全可以用箭头函数来定义一个相同的函数。箭头的左边为参数列表，右边则为函数体，在这里只有一句表达式，所以就会作为返回值返回，加入需要执行多条语句，同样可以使用花括号去包裹，这时候返回值则需要手动返回。箭头函数的存在使得回调函数的编写得到了简化。箭头函数与this如图所示，在箭头函数中并不能取到name的值，这是

2020-06-05 16:20:58 322 1

原创 ES6新特性---模板字符串、参数默认值

模板字符串传统定义字符串的方式有单引号和双引号，在ES2015中新增了反引号定义的模板字符串的方式该种方法与传统的定义字符串有两个个不同点支持换行可用 $ { } 的方式进行插值表达式的插入，减少了字符串的拼接过程。带标签的模板字符串在字符串前可以加一个标签，标签实际就是一个函数，添加标签即为调用这个函数。带标签的模板字符串的标签方法中，Strings是将模板中的静态字符串转化为字符数组输出，而插值表达式中的值也能在标签方法中通过对应的变量名拿到。实际应用场景可以实现文本的多语言化（

2020-06-05 14:29:22 626

原创 ES6新特性---数组、对象解构

数组解构解构是ES2015提供的一直从数组或者对象中获取元素的快速方式。例如有一个数组，以往需要通过索引去访问对应的值并且赋值给新的变量，现在则可以通过数组解构的方式获得值。获取特定位置的元素，需要将非该位置的元素处以逗号分隔，如图：如果要获得除了某一个元素外剩下的所有元素，可用 … 表示，注意 … 只能用于最后一个元素。当用来接收对象的变量名过少时，会按顺序分配，没有的则不分配。变量名过多是，无值可分配的，会显示undefined，当然也可以通过等号的方式给这种变量加上一个默认值。对象

2020-06-04 16:45:03 718

原创 ES6新特性---let与块级作用域、Const

let与块级作用域在ES2015之前,ES只有两种作用域即函数作用域和全局作用域，在ES2015中新增了一个作用域即块级作用域。块就是代码中我们用两个{ }包起来的内容。在此之前，块是没有作用域的，也就是说你在块内定义的变量在外部也可以访问到。如下图：这点对于今后项目组复杂的开发是非常不利的，并且也是不安全的。并且这种问题也会出现在嵌套循环计数器中，如下图：这里外层循环计数器中的i会被内层中的计数器声明所覆盖。并且此时的var时在全局作用域中的。在将var改成let后就将两个块内的计数器变

2020-06-04 14:30:50 180

原创再次遇见ECMAScript

ECMAScript—体系概念建立于在日常的开发工作中人多开发者并没有理解语言和平台之间的关系，以JavaScript为例，日常编写的代码到底哪些属于语言层面，那些属于平台层面，这一点很多人都是乱的。首先理清楚这些对于整体上的提高是极其必要的，其次是当前市面上对于ECMAScript的资料比较零散，且前端开发者对于ES的理解和掌握程度都不尽相同，所以系统化的学习ECMAScript和它的一些新特性很有必要。ECMAScript与JavaScriptECMAScript其实也是一门脚本语言一般缩写为ES

2020-06-04 10:40:00 128

原创 Tinymce富文本编辑器图片上传插件参数的修改

近日客户表示上传的图片过大，无法自动匹配展示区域由于使用的是Tinymce富文本编辑器自带的图片上传插件，选择图片后会读取对应图片的长和宽，客户又不愿意手动去修改长宽比去适应显示界面，希望自动适配，网上看了很多，有很多是重写一个图片上传插件，我这里并没有那么复杂，于是简单阅读了一下源码在此目录下，是图片上传的逻辑代码在此目录下修改如下代码即可图中img.width和img....

2020-04-28 11:13:08 2017 1

吾将上下而求索