happyqyt的专栏

原创 商城多语言改造方案

商城多语言改造方案，nuxt+element+vant+i18n

原创 当产品说elementUI的datepicker要加上时区……

文章目录背景看我Step1 自定义`DatePicker`组件的引入和使用Step2 超过“今天”的日期都置灰Step3 “今天”高亮Step4 传递timezone属性值Step5 “今天”高亮Step6 设置组件所使用的语言结语背景背景：ElementUI的DatePicker组件是不能设置时区的，组件显示的时间所使用的时区是打开页面的客户端所在的系统所使用的时区。需求：我在本地打开页面，使用DatePicker组件筛选日志，组件中超过今天的时间置灰不可选。这个“今天”所使用的时区是特定的时区（比

原创 带你认识和理解Promise

文章目录Promise是什么？有什么用？Promise 基本用法Promise 的一些特性我的Promisethencatch_resolve_rejectPromise 的精髓Promise的其它方法Promise是什么？promise，承诺的意思。意思就是，JS执行线程 承诺 在将来的某个时刻执行某一块代码。也就是说，你可以把一段将来才需要执行的代码，通过promise，把它放进异步任务队列中，在将来的某个时刻执行。So，promise就是用来写Javascript异步代码的。有什么用？这就要

原创 终于看明白cookie了

文章目录cookie的介绍cookie的作用cookie的分类cookie的特性后端通过http头设置请求时通过http头传给后端前端可读写遵守同源策略Cookie 的属性Expires，Max-AgeDomainPathSecureHttpOnlySameSiteSameSite 的作用SameSite 的值跨站的判断cookie的介绍我们都知道HTTP协议是无状态的，这种无状态意味着程序需要验证每一次请求，从而辨别客户端的身份。Cookie，就是为了辨别客户端身份而储存在客户端本地的数据。Coo

原创 第一次发布vue组件到npm

开发vue组件本地测试组件是否可用Step 1：在项目中执行如下命令npm run lib // 生成可供import的文件npm pack // 本地生成一个 et-vcode-0.1.0.tgz的包这里需要注意一下，你在 package.json 中 main 属性设置的值。该字段指定了程序的主入口文件（最好写 dist 文件夹内已经压缩后的文件）main 定义了包的入口文件，在 NodeJS 环境中，语句 import [pkg] from '[package]' 时，其实导入的

原创 for in & for of 的区别

对于纯对象的遍历，for..in要厉害一些；Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {};var arr = [3, 5, 7];arr.foo = 'hello';for (var i in arr) { // 如果不需要输出原型上的属性，可以用 arr.hasOwnProperty(i) 判断，返回false的则是原型上的属性 console.log

原创 JS中的descriptor

JS中的descriptor，属性描述对象，在Object.defineProperty()中会用到，其值如下：{ value: 属性值, enumerable: false, // 是否可枚举 configurable: true, // 是否可配置 writable: true // 是否可写}...

原创 FireFox中的Flex兼容性问题

在项目中使用elementUI的datePicker，代码如下： <el-date-picker type="daterange" :clearable="false" start-placeholder="Begin Date" end-placeholder="End Date" ...

原创 Webpack 按需打包 Loadsh

Loadsh 是一个一致性、模块化、高性能的 JavaScript 实用工具库。在数据操作时，我们经常会用的 loadsh 封装好的一些工具方法，但是并不想把整个包打包进项目里面。以下提供几个按需打包 lodash 的方法。使用方法：import {isEmpty, isObject, cloneDeep} from 'lodash';存在问题：当我们仅使用 lodas...

原创 webpack-bundle-analyzer 打包文件可视化分析工具的安装使用

1 安装依赖首先安装webpack-bundle-analyzernpm install --save-dev webpack-bundle-analyzer大多数情况下，在windows平台下使用类似于: NODE_ENV=production的命令行指令会卡住。cross-env能跨平台地设置及使用环境变量npm install --save-dev cross-env...

原创 echarts中在地图上显示label时的阴影问题

先来贴一张最终效果图：对应的option是这样的option = { backgroundColor: 'rgb(55, 105, 0, .2)', title: [{ text: '测试', left: 'center', top: '2%', textStyle: { font...

原创 技术备忘本

1、JS中，通过var,const或let关键字声明的变量无法用delete操作符来删除，delete操作符只能删除对象的属性。2、import命令是编译阶段执行的，在代码运行之前。因此这意味着被导入的模块会先运行，而导入模块的文件会后执行。这是CommonJS中require（）和import之间的区别。使用require()，您可以在运行代码时根据需要加载依赖项。3、np...

转载 解决tomcat服务器跨域请求问题

在tomcat的 web.xml 配置文件中加入如下配置过滤器(如web.xml中有多个filter时要把下面配置放在最前端)<filter><filter-name>CorsFilter</filter-name><filter-class>org.apache.catalina.filters.CorsFilter</fi...

转载 CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）

CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果，该属性几乎可以让你完成你想要的任何阴影效果。然而 box-shadow 属性语法和取值非常灵活，对于新手有点不容易理解。今天总结一下语法和 box-shadow 属性各种阴影效果。语法CSS 代码：/* offset-x | offset-y | color */box-shadow: 60px -...

原创 卸载vue-cli后重新安装出现安装失败

卸载vue-cli后想重新安装vue-cli，结果出现如下错误：在网上几度搜寻，找到以下解决办法：m./package-lock.jsonrm-r./node_modulesnpmcacheclear--force我的解决办法是：直接运行npm cache clear --force，然后就可以重新安装vue-cli了...

原创 Object.create()和JS继承

Object.create()介绍语法：Object.create(proto [, propertiesObject])参数：proto：必须。表示新建对象的原型对象，即该参数会被赋值到目标对象(即新对象，或说是最后返回的对象)的原型上。该参数可以是null（创建空的对象时需传null），对象， 函数的prototype属性 , 否则会抛出TypeError异常。 prope...

原创 JavaScript任务队列的顺序机制（事件循环）

同步与异步模式简介我们知道，Javascript语言的执行环境是单线程（single thread）的。所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就...

转载 Reflect.ownKeys()与Object.keys()区别 以及 JS中的可枚举属性与不可枚举属性

代码test1:var obj = {}Object.defineProperty(obj, 'method1', { value: function () { alert("Non enumerable property"); }, enumerable: false})console.log(Object.keys(obj)) // []...

转载 JS使用in和hasOwnProperty获取对象属性的区别

in判断的是对象的所有属性，包括对象自身及其原型的属性；而hasOwnProperty则是判断对象自身是否具有某个属性。 function Person(){} Person.prototype.name = "allen"; var person = new Person(); console.log(person.has...

转载 深拷贝与浅拷贝的区别，实现深拷贝的几种方法

如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。此篇文章中也会简单阐述到栈堆，基本数据类型与引用数据类型，因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子：let a=[0,1,2,3,4], b=a; console.log(a=...

原创 关于JS字面量及其相关的一些小知识点

字面量：用来为变量赋值时的常数量。对象字面量对象字面值是封闭在花括号对({})中的一个对象的零个或多个"属性名:值"列表。var person={ "name":"Jack", "age":29, 5:true // 这里的数值属性，不能使用传统的点访问符，需要使用数组访问符}console.log(person.name) // Jackco...

转载 NaN 是什么？如何测试一个值是否等于 NaN ？

NaN 这个知识点的问题在《趣味ES6》的系列很多人留言说觉得很绕，不好理解，的确，NaN 也成为面试官喜欢考察的一个知识点。NaN 属性代表一个“不是数字”的值。这个特殊的值是因为运算不能执行而导致的，不能执行的原因要么是因为其中的运算对象之一非数字。例如： "abc" / 4，是因为运算的结果非数字。例如：除数为零。虽然这看上去很简单，但 NaN 有一些令人惊讶的特点，如果你不知道它们...

转载 RESTful API 最佳实践

RESTful是目前最流行的 API 设计规范，用于 Web 数据接口的设计。它的大原则容易把握，但是细节不容易做对。本文总结 RESTful 的设计细节，介绍如何设计出易于理解和使用的 API。一、URL 设计1.1 动词 + 宾语RESTful 的核心思想就是，客户端发出的数据操作指令都是"动词 + 宾语"的结构。比如，GET /articles这个命令，GET是动词，/...

转载 https加解密过程详解和TLS证书验证

定义HTTPS是HTTP over SSL的简称，即工作在SSL上的HTTP，也就是加密通信的HTTP。工作原理HTTPS在通信过程中使用的是对称加密，当然，它的密钥是无法直接获取的，因为它的密钥是通过非对称加密进行传输的，中间还有很多复杂的过程，保证密钥是绝对安全的。先简单看下https的加密过程，如下图：文字描述一下这个过程，就是：　　1.客户端访问 http...

原创 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

背景环境：1、并没有全局安装webpack和webpack-cli 2、项目没有安装其他模块1、运行“npm install webpack webpack-cli -D”安装webpack和webpack-cli包到项目。版本如下：2、项目根目录下创建webpack.config.js// 向外暴露一个打包的配置对象// 因为 webpa...

转载 10分钟彻底搞懂Http的强制缓存和协商缓存

一 强制缓存强制缓存整体流程比较简单，就是在第一次访问服务器取到数据之后，在过期时间之内不会再去重复请求。实现这个流程的核心就是如何知道当前时间是否超过了过期时间。强制缓存的过期时间通过第一次访问服务器时返回的响应头获取。在http 1.0和http 1.1版本中通过不同的响应头字段实现。http 1.0在http 1.0版本中，强制缓存通过Expires响应头来实...

原创 ES6中 import 和 export 的一些小总结

ES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。CommonJS主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。...

原创 ES6项目构建

ES6项目主要按以下几大步骤走：基础架构 任务自动化 编译工具 代码实现1、基础架构主要分以下三大块：业务逻辑：包括页面和交互 自动构建：包括编译和辅助，辅助包括自动刷新、文件合并、资源压缩 任务自动化gulp 编译工具（babel、webpack）服务接口：包括数据和接口2、开始架构（创建目录） 1）项目根目录下创建pack...

原创 Javascript原型小结

实例上的__proto__指向原型上的prototype，prototype和__proto__的区别：实例.__proto__ === 原型.prototype 凡是通过new Function()创建的对象都是函数对象，其他的都是普通对象 每个对象都有__proto__属性，但只有函数对象才有 prototype 属性，这都是js解释器自动加上的 所有函数对象的__proto__都指向 ...

原创 外边距折叠（margin collapse）

一、定义两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开 这些 margin 都处于普通流中注意一点，在没有被分隔开的情况下，一个元素的 margin-top 会和它普通流中的第一个子元素（非浮动元素等）的 margin-top 相邻；只有在一个元素的 height 是 "auto" 的...

原创 说说BFC（Block Formatting Contexts，块级格式化上下文）

一、BFC是什么？BFC是容器的一种属性，从样式上看，具有BFC的元素与普通的容器没有什么区别，但从功能上，具有BFC的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器没有的一些特性。二、BFC的特性1、BFC会阻止外边距折叠即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。2、BFC可以包含浮动的...

原创 IE6的双边距Bug以及解决办法

bug描述：就是你明明设置margin-left为10px，但是在IE6下显示的左边距却是20px。bug出现的条件：当浮动元素的浮动方向和外边距的设置方向一致且浮动元素靠近浮动边界时才会出现。比如元素向左浮动时设置左边距，并且为一行中的第一个浮动元素时会出现这个bug，同样，向右浮动时设置右边距，且为一行中的最后一个浮动元素时也会出现这个bug。bug的解决办法：给浮动元素块加上disp...

转载 解决IE6中PNG透明显示灰底的8种方法

方案一 - 滤镜解决方案介绍：滤镜从IE4.0被微软正式引入，所以我们可以使用滤镜解决IE6的PNG透明问题，滤镜不仅可以实现目前CSS3的一些旋转效果而且还可以引入图片。注意：此方法在部分版本的IETest中无效，建议使用标准的IE6来进行测试！思路：1、书写正常的CSS代码，通过background导入图片，这样所有的浏览器均使用了此PNG图片；background:url(....

转载 未来必热：SVG Sprite技术介绍（转自张鑫旭-鑫空间-鑫生活）

一、Sprite技术这里所说的Sprite技术，没错，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。另，本文图片甚多，爪机党继续浏览需慎重。二、SVG Sprite与symbol元素目前，SVG Sprite最佳实践是使用symbol元素。symbol元素是什么呢？单纯翻译的话，是“符号”的意思。然，这个释义并不符合这里的场景。不知大家有没有...

转载 关于小程序

转载 关于布局

转载 Flex 布局教程：实例篇

一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。如果不加说明，本节的HTML模板一律如下。&lt;div class="box"&gt; &lt;span class="item"&gt;&lt;/span&gt;&lt;/div&gt;上面代码中，div元素（代表...

转载 微信小程序笔记

微信小程序账号与工具在线文档：https://mp.weixin.qq.com/debug/wxadoc/dev/小程序开发者账号注册微信公众平台：https://mp.weixin.qq.com/小程序开发者账号注册：https://mp.weixin.qq.com/wxopen/waregister?action=step1微信开发者工具微信开发者工具：https://mp.wei...

转载 Flex 布局教程：语法篇

网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地...

原创 微信登录失败，redirect_uri域名与后台配置不一致，错误代码10003

打开公众号页面出现“微信登录失败，redirect_uri域名与后台配置不一致，错误代码10003”1.先检查网页的授权域名  不要带http://。（打开 设置 〉公众号设置 〉功能设置 〉网页授权域名，修改之。）2. 检查下自己的appid是否正确...