自定义博客皮肤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 276 4

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

最近业务繁多,晚上没时间更新github;由于某音乐平台的API发生变更,导致小部分歌曲已无法播放,有人在issue区发表了很多谩骂性的言语,甚至发到我的邮箱逼迫我去更新。这已影响到我的工作及生活,目前仓库已设置私有,数据记录:star:122,fork:30。原仓库链接:https://github.com/xietongxue/mpvue-music这次开源经历发现开源并维护一个项目并没有想象中那么简单,github开发者上百万,无奇不有~等工作上没有这么忙再考虑开源的事啦 ~

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

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

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

2019-10-25 21:29:58 175

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

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

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

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

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

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

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

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

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

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

最近小组有个关于vue源码分析的分享会,提前准备一下…前言:插件通常会为 Vue 添加全局功能,这个官网文档有说过了,如果对插件不了解,建议先阅读一下官网文档:https://cn.vuejs.org/v2/guide/plugins.html#使用插件使用插件插件的使用很简单,使用Vue.use注册后即可全局使用,比如项目中需要用到vue-router这个插件,如图引用即可:接下来分...

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

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

最近小组有个关于vue源码分析的分享会,提前准备一下…前言:Vue有两个版本:Runtime + Compiler 、 Runtime only ,前者是包含编译代码的版本,后者不包含编译代码,编译过程需要借助webpack的vue-loader,接下来分析的是Runtime + Compiler版本,编译过程感觉挺复杂的,所以下边只是大概分析一下整个流程,源码理解直接写在源码中。### 模板的编译 之前分析Virtual DOM的时候我们分析过模板到真实 DOM 渲染的过程,中间有一个环节把模板编

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

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

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

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

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

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

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

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

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

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

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

Nuxt.js项目如何部署到阿里云?Node.js项目如何部署到到阿里云服务器(ECS)?以Nuxt.js服务端渲染项目为例讲解1、前言最近打算业余时间搭个网站玩玩,选择的技术栈为node+mongodb+Nuxt.js(基于vue,用于创建服务端渲染 (SSR) 应用)2、阿里云部署(1)须知:本人操作电脑为Mac,购买的是云服务器(阿里云ECS CentOS 版),购买成功后会有个密码,之后连接此服务器需要用到,此服务器公网ip可以在阿里云后台看到。(2)部署前准备

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

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

QuestionWeex project run npm run ios(weex run ios)error:Error:Error: Command failed: pod updateAnswer(1)update openssl, then ruby, then cocoapod.(Please select the operation according to your own...

2019-01-15 00:36:49 1969

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

1、问题使用npx create-nuxt-app创建Nuxt.js项目,项目默认使用require引入依赖,如下:平时习惯使用import,改为import Koa from 'koa'会报SyntaxError: Unexpected identifier,即不识别import错误。2、原因通过package.json可以看到,使用npx create-nuxt-app创建出来的Nu...

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

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

ES6公用立体轮播组件的封装及使用源码github链接:https://github.com/XieTongXue/how-to/tree/master/carousel-3d1、效果展示2、容易产生bug的点当前图片需要一个背景框,如上图所见白色框,白色框为漂浮于当前轮播图片上方;轮播图可以点击跳转到其他网页,但是由于存在层级关系,白色款会挡住轮播图,导致无法跳转2.1解决思路将白...

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

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

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

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

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

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

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

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

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

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

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

JavaScript如何判断设备类型加载对应网页并设置通用事件基本思路:在网页入口添加判断逻辑,如下:首先获取当前navigator对象的userAgent,通过userAgent判断当前设备类型。①:如果符合移动端判断逻辑,则加载移动端入口;否则加载pc端入口②:通用事件的设置,比如点击事件,PC端为click,但是移动端也用click的话分不清是长按还是点击;根据平台类型设置通...

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

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

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

2018-11-20 23:14:32 4068

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

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

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

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

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

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

原创 [Vue源码分析] Virtual DOM

最近小组有个关于vue virtual dom的分享会,提前准备一下......[Vue源码分析]Virtual DOM本文章涉及源码版本为Vue 2.5.2为什么使用virtual dom做一件事一般都先问问为什么,那么为什么使用virtual dom?真正的 DOM 元素是非常庞大的,因为浏览器的标准把 DOM 设计的很复杂。如果频繁地操作 DOM ,会产生一定的性能问题。举个例子:创建一个header标签,并打印dom的描述信息:

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

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

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

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

原创 Sass mixin与extends、%placeholder、function

一、Sass mixin与extend的区别及适用场景@mixin用于定义复用样式片段,使用@include引用mixin。与其类似,@extend命令让一个选择器继承其它选择器样式实现复用样式片段。那么什么时候使用mixin,什么时候使用extend?下面做个分析对比。1、@mixin的作用:(1)可以定义公用样式 编译出来的css如下: (2)可以接收代码片段m...

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

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

一:require.js1、require.js是什么?为什么要用它? require.js是一个JavaScript模块载入框架,实现的是AMD规范。使用require.js有以下优点: ① 异步加载,防止js加载阻塞页面渲染,提高了性能。 ② 使用程序调用的方式加载js,避免使用传统的标签引入方式。 ③ 模块化,便于代码的编写和维护。 ④ 按需加载...

2018-09-12 20:40:24 990

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

SASS、Compass基本使用,以一个随机点名demo为例 demo 源码:https://github.com/XieTongXue/call-over 1)SASS、Compass是什么?为什么要用它? SASS是一种“CSS预处理器”,是一款强化CSS的辅助工具,在CSS语法基础上增加了变量(variables)、嵌套(nested rules)、混合(mixins)等高级功能,使得...

2018-09-11 19:57:02 213

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

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

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

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

概念函数防抖(debounce): 事件响应函数在一段时间后才会执行,如果在这段时间内再次调用,则重新计算执行时间;当预定时间内没有再次调用该函数,则执行响应逻辑。函数节流(throttle): 可以理解为在函数防抖上多加了一个功能:函数节流会预定一个自动执行时间,到时自动执行一次。共同点: 函数节流与函数防抖都是为了限制函数的执行频次,是一种性能优化的方案,比如应用于windo...

2018-08-24 11:17:28 433

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

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

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

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

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

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

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

效果 组件源码<template> <div class="search"> <el-select v-model="type" @change="changeType" class="select">

2018-06-27 00:41:27 3268

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

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

2018-06-26 00:22:04 1124

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

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

2018-06-25 19:56:45 396

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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