自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

XGQ

js随笔,希望能帮助到有需要的伙伴

原创 年后来广州第一天,写篇水文

2019: 1、很忙的一年,主要是忙工作,一个月写几篇文章已成为过去 2、技术上有进步,但不算是太明显;主要是通过工作积累经验,缺乏去自学和总结的时间~ 2020: 1、不怎么好的开局,新型冠状病毒、老科坠机 2、希望越来越好吧

2020-02-03 15:32:33 209 4

原创 关于mpvue音乐小程序github仓库设置私有的声明

最近业务繁多,日常十一点多下班,晚上没时间更新github; 由于某音乐平台的API发生变更,导致小部分歌曲已无法播放,有人在issue区发表了很多谩骂性的言语,甚至发到我的邮箱逼迫我去更新。这已影响到我的工作及生活,目前仓库已设置私有,数据记录:star:122,fork:30。原仓库链接:ht...

2019-05-26 15:39:55 210 3

原创 Ajax跨域post请求后端无法获取登录态原因及解决办法

遇到个小坑,印象中不是第一次遇到了,记录一下:前后端分离时前端、后端不在同一个子域,跨域post请求后端无法获取登录态。 原因 后端通过cookie验证用户是否登录,跨域post不会自动携带上cookie,因此验证失败。 解决办法 手动设置请求带上cookie即可,支持版本:jQuery 1.5....

2019-10-25 21:29:58 125 0

原创 [Vue源码分析]谷歌翻译后,Vue双向数据绑定失效了?

最近运营反馈了一个问题:谷歌浏览器打开第三方储值平台,使用谷歌浏览器自带的翻译功能后,选择商品没有计算总额。首先可以肯定的是这不是bug,这个平台已经兼容了13种语言,只是运营没有通过语言栏切换语言,而是通过谷歌翻译。当初想到的方法禁止谷歌浏览器翻译当前页面...

2019-09-29 20:39:48 311 4

原创 ES6公用花瓣飘落插件的封装及使用,支持npm安装

前言 此组件为本人使用ES6封装的花瓣飘落插件,已应用于多个活动,以下只分享组件的实现及使用方法,不涉及活动相关代码,插件已上传npm,可通过npm安装使用。 github地址:https://github.com/XieTongXue/flower-fly 安装 $ npm install f...

2019-07-31 22:53:29 209 1

原创 ES6公用跑马灯抽奖组件的封装及使用

ES6公用抽奖组件的封装及使用 此组件为本人使用ES6封装的抽奖组件,以下只分享组件的实现及使用方法,不涉及业务相关代码。

2019-06-30 17:35:13 394 5

原创 [Vue源码分析]Vue.use实现原理

最近小组有个关于vue源码分析的分享会,提前准备一下… 前言: 插件通常会为 Vue 添加全局功能,这个官网文档有说过了,如果对插件不了解,建议先阅读一下官网文档:https://cn.vuejs.org/v2/guide/plugins.html#使用插件 使用插件 插件的使用很简单,使用Vue...

2019-03-22 23:26:03 3621 8

原创 [Vue源码分析] 模板的编译

最近小组有个关于vue源码分析的分享会,提前准备一下… 前言: Vue有两个版本:Runtime + Compiler 、 Runtime only ,前者是包含编译代码的版本,后者不包含编译代码,编译过程需要借助webpack的vue-loader,接下来分析的是Runtime + Compil...

2019-02-26 00:08:55 2229 7

原创 [Vue源码分析]自定义事件原理及事件总线的实现

最近小组有个关于vue源码分析的分享会,提前准备一下… 前言: 我们都知道Vue中父组件可以通过 props 向下传数据给子组件;子组件可以通过向$emit触发一个事件,在父组件中执行回调函数,从而实现子组件与父组件的通信,如下图: 从图可以看到,这种机制兄弟组件之间是通信不了的,假如不借助vu...

2019-02-24 23:21:00 2973 7

原创 解决Adobe Animate CC 中文版非中文的BUG

最近在使用CreateJS开发h5小游戏,使用到 Adobe Animate cc这个软件,安装Adobe Animate CC 时选择的是中文,安装之后打开显示的是英文版的界面,并非中文版。 原因: 经排查,发现问题在于安装包内的中文语言包zh-CN内的文件是英文的,写的是中文语言包,但实现上是...

2019-02-15 23:20:08 4185 8

原创 Weex Project (npm run android)->Error: Error: Command failed

问题描述: weex项目在运行npm run android跑安卓端时出现以下错误,尝试了网上的很多方法,包括Stack Overflow上的大神的建议依然没有解决,问题如下: Error: Error: Command failed: ./gradlew  assembleDebug is...

2019-01-28 23:27:06 1477 4

原创 Node项目部署到阿里云服务器(ECS),以Nuxt.js服务端渲染项目为例

Nuxt.js项目如何部署到阿里云?Node.js项目如何部署到到阿里云服务器(ECS)?以Nuxt.js服务端渲染项目为例讲解 1、前言 最近打算业余时间搭个网站玩玩,选择的技术栈为node+mongodb+Nuxt.js(基于vue,用于创建服务端渲染 (SSR) 应用) 2、阿里云部署 (1...

2019-01-15 02:37:21 2008 7

原创 Weex Project(npm run ios)-> Error:Error: Command failed: pod update

Question Weex project run npm run ios(weex run ios)error: Error:Error: Command failed: pod update Answer (1)update openssl, then ruby, then cocoapod...

2019-01-15 00:36:49 1645 0

原创 Nuxt.js项目不识别import原因及解决方法

1、问题 使用npx create-nuxt-app创建Nuxt.js项目,项目默认使用require引入依赖,如下: 平时习惯使用import,改为import Koa from 'koa'会报SyntaxError: Unexpected identifier,即不识别i...

2019-01-07 01:17:56 5265 13

原创 ES6公用立体轮播组件的封装及使用

ES6公用立体轮播组件的封装及使用 源码github链接:https://github.com/XieTongXue/how-to/tree/master/carousel-3d 1、效果展示 2、容易产生bug的点 当前图片需要一个背景框,如上图所见白色框,白色框为漂浮于当前轮播图片上方;轮播...

2019-01-07 00:30:47 2445 6

原创 CSDN2018博客之星评选——期待各位大佬的投票

我的序号是NO.165,谢谢各位!!投票入口:https://bss.csdn.net/m/topic/blog_star2018 无端端就入选了,我只是专业切图的,很菜很菜的,志在参与,哈哈哈哈哈哈哈哈…

2019-01-03 00:02:33 2296 9

原创 [Vue源码分析] v-model实现原理

[Vue源码分析] v-model实现原理 最近小组有个关于vue源码分析的分享会,提前准备一下… 前言: 我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化。那么v-model是怎么实现这一原理的呢?接下来探索一下这部分的源码。

2018-12-28 23:55:06 2769 11

原创 Node快速切换版本、版本回退(降级)、版本更新(升级)

Node快速切换版本、版本回退(降级)、版本更新(升级) 场景 最近遇到一些node的坑,比如6.3.0版的node用不了公司最新的工作流,升级到10.x版的node后,又用不了另一套工作流。 问题 怎么实现node版本降级、升级?是否可以安装多个版本按需要进行切换?

2018-12-17 00:07:02 42460 16

原创 JavaScript判断设备类型加载对应网页并设置两端通用事件

JavaScript如何判断设备类型加载对应网页并设置通用事件 基本思路: 在网页入口添加判断逻辑,如下:首先获取当前navigator对象的userAgent,通过userAgent判断当前设备类型。 ①:如果符合移动端判断逻辑,则加载移动端入口;否则加载pc端入口 ②:通用事件的设置,...

2018-12-16 22:17:30 882 2

原创 使用mpvue开发微信小程序——原生微信小程序、mpvue、wepy对比

mpvue是什么?为什么使用它? 目前小程序开发主要有三种形式:原生、wepy、mpvue,其中wepy是腾讯的开源项目;mpvue是美团开源的一个开发小程序的框架,全称mini program vue(基于vue.js的小程序),vue开发者使用了这个框架后,开发小程序的效率将得到很大的提升。 ...

2018-11-20 23:14:32 3593 0

原创 浏览器指纹实现方案:Cookie、Flash Cookies、帆布指纹识别

浏览器指纹实现方案及对比,Cookie、Flash Cookies、帆布指纹识别 浏览器指纹指什么? 是一个能够唯一标识当前浏览器的字符串 实现方法 1、Cookie 2、Cookie替代方案——Flash Cookies 3、帆布指纹识别(使用canvas实现)

2018-11-19 22:57:14 6594 7

原创 使用mpvue开发微信小程序——音乐小程序项目源码分享

前言: 最近小组有个微信小程序分享的环节,于是在业余时间使用mpvue框架写了个音乐小程序,时间有限,项目暂时只是demo级别,之后有时间会继续完善。此小程序使用mpvue框架开发,样式使用stylus编写,歌手、音乐数据抓取自QQ音乐,项目运行方法请看仓库中的readme。 源码地址 gith...

2018-11-14 02:10:53 2860 10

原创 [Vue源码分析] Virtual DOM

最近小组有个关于vue virtual dom的分享会,提前准备一下...... [Vue源码分析]Virtual DOM 本文章涉及源码版本为Vue 2.5.2 为什么使用virtual dom 做一件事一般都先问问为什么,那么为什么使用virtual dom?真正的 DOM 元素是非常庞大的,...

2018-10-25 02:11:45 1334 15

原创 ES6公用分页组件的封装及应用举例

es6公用分页组件的封装及应用举例,以下源码使用到JQuery、Sass,但重要的是方法,用什么其实不重要,不合适改改就行。 分页类 以下为pagination.js源码 import './pagination.scss' import $ from '.....

2018-09-19 20:42:21 1149 5

原创 Sass mixin与extends、%placeholder、function

一、Sass mixin与extend的区别及适用场景 @mixin用于定义复用样式片段,使用@include引用mixin。与其类似,@extend命令让一个选择器继承其它选择器样式实现复用样式片段。 那么什么时候使用mixin,什么时候使用extend?下面做个分析对比。 1、@mixi...

2018-09-14 19:51:58 417 2

原创 Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化

一:require.js 1、require.js是什么?为什么要用它? require.js是一个JavaScript模块载入框架,实现的是AMD规范。使用require.js有以下优点: ① 异步加载,防止js加载阻塞页面渲染,提高了性能。 ② 使用程序调用的...

2018-09-12 20:40:24 767 0

原创 SASS+Compass基本使用,结合JavaScript实现随机点名小系统

SASS、Compass基本使用,以一个随机点名demo为例 demo 源码:https://github.com/XieTongXue/call-over 1)SASS、Compass是什么?为什么要用它? SASS是一种“CSS预处理器”,是一款强化CSS的辅助工具,在CSS语法基础上增...

2018-09-11 19:57:02 197 0

原创 腾讯、今日头条、欢聚时代(YY)等前端工程师面试记录及题目分享(2018.08社招)

腾讯、今日头条、欢聚时代(YY)等前端工程师面试记录及题目分享(2018.08社招);本文适合拥有一年/以上实际开发经验的朋友阅读,也欢迎经验不够但对前端有兴趣的朋友阅读以确立自己的方向。 面试过的公司: 腾讯、欢聚时代、今日头条、三七互娱、多益网络、CVTE、荔枝FM、深信服、平安科技、平安好...

2018-09-03 17:44:58 6495 30

原创 JavaScript函数节流(throttle)与函数去抖(debounce)解析与应用举例

概念 函数防抖(debounce): 事件响应函数在一段时间后才会执行,如果在这段时间内再次调用,则重新计算执行时间;当预定时间内没有再次调用该函数,则执行响应逻辑。 函数节流(throttle): 可以理解为在函数防抖上多加了一个功能:函数节流会预定一个自动执行时间,到时自动执行一次。 ...

2018-08-24 11:17:28 353 0

原创 Vue项目使用百度地图——经纬度地图组件的封装及使用

1 前言 要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map.baidu.com/api?v=3.0&ak=你的百度地...

2018-07-04 20:18:14 17438 12

原创 Mpvue微信小程序时间消耗进度条组件的实现

实现效果: 组件源码: 组件主要涉及时间的计算、闰年的判断,比较简单,因此注释比较少。 <progress></progress>组件为微信小程序官方的进度条。 ...

2018-06-27 01:05:21 1233 5

原创 Vue2.x通用条件搜索组件的封装及应用

效果 组件源码 <template> <div class="search"> <el-select v-model=&am...

2018-06-27 00:41:27 2968 0

原创 Mpvue+koa开发微信小程序——腾讯云开发环境的搭建及部署实现真机测试

为什么写这篇文章? 之前写过一篇文章:mpvue+koa开发微信小程序——上传测试代码到腾讯云以及腾讯云后台本地开发环境的搭建 有的伙伴在这篇文章中评论为什么手机发不了请求,因此写这篇文章解释一下。 之前文章介绍了如何部署过代码到腾讯云,也搭建过本地开发环境,当时我们的小程序前端请求的都是我...

2018-06-26 00:22:04 992 0

原创 Vue2.x通用编辑组件的封装及应用

效果 组件源码 <template> <div class="edit-input"> &am...

2018-06-25 19:56:45 364 0

原创 微信小程序开发错误:LoginError {type: "ERR_WX_GET_USER_INFO"}解决方法

错误内容 微信小程序登录接口报以下错误: LoginError {type: “ERR_WX_GET_USER_INFO”, message: “获取微信用户信息失败,请检查网络状态”, detail: {errMsg: “getUserInfo:fail scope unauthorize...

2018-06-07 00:34:32 4240 14

原创 Mpvue+koa开发微信小程序——wx.request()的封装及应用

以下封装方法仅供mpvue+koa开发小程序入门参考,具体应用请根据实际更改。 config.js // 配置项 const host = 'http://localhost:5757' const config = { host } export default ...

2018-06-04 01:16:03 1845 2

原创 Mpvue+koa开发微信小程序——上传测试代码到腾讯云以及腾讯云后台本地开发环境的搭建

一、微信开发者工具 如何使用微信开发者工具上传测试代码到腾讯云?可通过以下设置实现。 (1)登录小程序后台 进入https://mp.weixin.qq.com/使用注册小程序时的邮箱登录(勿使用公众号的邮箱登录),点击开发者工具如下,点击开通。 (2)下载nodejs dem...

2018-06-03 02:46:00 3598 2

原创 Koa入门——关键知识点总结

概念: Koa是基于nodejs平台的下一代web开发框架 - Express原班人马打造 - Async+await处理异步 - 中间件机制 HelloWorld node环境安装好的前提下,新建一个文件夹,进入该文件夹,使用npm init使其支持npm随后使用npm ...

2018-06-02 20:13:46 801 1

原创 原生JS基于window.scrollTo()封装垂直滚动动画工具函数

封装原因: 在vue项目中,遇到需要实现垂直滚动效果的需求,初步想到的方法有两个: 1:使用window.scrollTo()方法,但是这个方法是没有动画效果的,需要手动封装一下。 2:使用JQuery的动画函数,缺点比较明显:需要引入JQuery。 显然,选择第一种好很多。 以下为封装...

2018-05-30 00:42:35 2210 8

原创 Node+Express+Vue2.x+Mongodb结合muse-ui、less、rem等实现简易博客

源码地址:https://github.com/XieTongXue/node-blog 请先阅读项目中的readme文件,按步骤启动,避免运行出错。 写此demo的缘由 最近在看学习express,想找个demo了解一下,发现找到的资源不多,有的难度比较大,不适合新手入门,于是花了几个空闲...

2018-05-26 02:16:31 678 7

提示
确定要删除当前文章?
取消 删除