- 博客(167)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 同事：这个页面的逻辑没什么能复用的，不抽组件也没什么影响吧？
最近在维护同事的一个项目时，发现有不少单个vue文件一千余行，同一个文件上有倒计时、有输入信息的表单；当时我就在想：是不是策划经常改需求或者排期紧急，所以没抽组件呢。
2022-11-16 01:14:57
724
4
原创 jsonp请求拦截
前言：最近遇到的一个问题，可以通过拦截修改jsonp请求去解决；搜了下关键字“拦截jsonp请求”，没有找到想要的答案，都是搜到一些跨域的文章…所以自己实现记录了下，希望帮助到正在搜的伙伴。思路理解jsonp原理的话，实现起来很简单，就直接贴代码啦（监听dom创建，识别script标签，修改src）代码 (function () { var originalCreateElement = document.createElement function changeReqLink (scr
2021-10-17 17:29:47
1285
1
原创 Node + ts + puppeteer e2e前端自动化测试
前言：此文先在其他平台发表，如有雷同，有可能那个也是我~先了解一下概念自动化测试的类型及工具都有挺多：单元测试、集成测试、UI测试、e2e测试等等，相关概念网上有挺多文章介绍了，就不多聊，比如这篇就不错：试试前端自动化测试！（基础篇），概念比较模糊的话可以先看看~单元测试相信大部分人都写过，接下来主要谈谈平时做得比较少的e2e测试e2e实战小项目本文将以百度首页为测试对象，有三个测试目标：打开是否正常搜索功能是否正常初始化请求是否正常&&参数是否有缺失涉及技术/工
2021-04-18 14:52:27
953
1
原创 年后来广州第一天，写篇水文
2019：1、很忙的一年，主要是忙工作，一个月写几篇文章已成为过去2、技术上有进步，但不算是太明显；主要是通过工作积累经验，缺乏去自学和总结的时间~2020：1、不怎么好的开局，新型冠状病毒、老科坠机2、希望越来越好吧
2020-02-03 15:32:33
902
5
原创 Ajax跨域post请求后端无法获取登录态原因及解决办法
遇到个小坑，印象中不是第一次遇到了，记录一下：前后端分离时前端、后端不在同一个子域，跨域post请求后端无法获取登录态。原因后端通过cookie验证用户是否登录，跨域post不会自动携带上cookie，因此验证失败。解决办法手动设置请求带上cookie即可，支持版本：jQuery 1.5.1+：$.ajax({ url:'//xxx.37games.com/xxx', typ...
2019-10-25 21:29:58
1195
1
原创 [Vue源码分析]谷歌翻译后，Vue双向数据绑定失效了？
最近运营反馈了一个问题：谷歌浏览器打开第三方储值平台，使用谷歌浏览器自带的翻译功能后，选择商品没有计算总额。首先可以肯定的是这不是bug，这个平台已经兼容了13种语言，只是运营没有通过语言栏切换语言，而是通过谷歌翻译。当初想到的方法禁止谷歌浏览器翻译当前页面...
2019-09-29 20:39:48
2608
5
原创 ES6公用花瓣飘落插件的封装及使用，支持npm安装
前言此组件为本人使用ES6封装的花瓣飘落插件，已应用于多个活动，以下只分享组件的实现及使用方法，不涉及活动相关代码，插件已上传npm，可通过npm安装使用。github地址：https://github.com/XieTongXue/flower-fly安装$ npm install flower-fly -S使用方法
2019-07-31 22:53:29
781
2
原创 ES6公用跑马灯抽奖组件的封装及使用
ES6公用抽奖组件的封装及使用此组件为本人使用ES6封装的抽奖组件，以下只分享组件的实现及使用方法，不涉及业务相关代码。
2019-06-30 17:35:13
954
5
原创 关于mpvue音乐小程序github仓库设置私有的声明
最近业务繁多，晚上没时间更新github；由于某音乐平台的API发生变更，导致小部分歌曲已无法播放，有人在issue区发表了很多谩骂性的言语，甚至发到我的邮箱逼迫我去更新。这已影响到我的工作及生活，目前仓库已设置私有，数据记录：star：122，fork：30。原仓库链接：https://github.com/xietongxue/mpvue-music这次开源经历发现开源并维护一个项目并没有想象中那么简单，github开发者上百万，无奇不有~等工作上没有这么忙再考虑开源的事啦 ~
2019-05-26 15:39:55
638
4
原创 [Vue源码分析]Vue.use实现原理
最近小组有个关于vue源码分析的分享会，提前准备一下…前言：插件通常会为 Vue 添加全局功能，这个官网文档有说过了，如果对插件不了解，建议先阅读一下官网文档：https://cn.vuejs.org/v2/guide/plugins.html#使用插件使用插件插件的使用很简单，使用Vue.use注册后即可全局使用，比如项目中需要用到vue-router这个插件，如图引用即可：接下来分...
2019-03-22 23:26:03
7544
8
原创 [Vue源码分析] 模板的编译
最近小组有个关于vue源码分析的分享会，提前准备一下…前言：Vue有两个版本：Runtime + Compiler 、 Runtime only ，前者是包含编译代码的版本，后者不包含编译代码，编译过程需要借助webpack的vue-loader，接下来分析的是Runtime + Compiler版本，编译过程感觉挺复杂的，所以下边只是大概分析一下整个流程，源码理解直接写在源码中。### 模板的编译 之前分析Virtual DOM的时候我们分析过模板到真实 DOM 渲染的过程，中间有一个环节把模板编
2019-02-26 00:08:55
2970
7
原创 [Vue源码分析]自定义事件原理及事件总线的实现
最近小组有个关于vue源码分析的分享会，提前准备一下…前言:我们都知道Vue中父组件可以通过 props 向下传数据给子组件；子组件可以通过向$emit触发一个事件，在父组件中执行回调函数，从而实现子组件与父组件的通信，如下图：从图可以看到，这种机制兄弟组件之间是通信不了的，假如不借助vuex等库，如何实现兄弟组件之间的通信？接下来说说事件总线。事件总线的实现举个例子，如图，建个vue...
2019-02-24 23:21:00
4683
7
原创 解决Adobe Animate CC 中文版非中文的BUG
最近在使用CreateJS开发h5小游戏，使用到 Adobe Animate cc这个软件，安装Adobe Animate CC 时选择的是中文，安装之后打开显示的是英文版的界面，并非中文版。原因：经排查，发现问题在于安装包内的中文语言包zh-CN内的文件是英文的，写的是中文语言包，但实现上是英文语言包，所以用户根本无法使 用中文版，这是Adobe Animate CC 的一个...
2019-02-15 23:20:08
10664
12
原创 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
2878
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
3414
8
原创 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
2640
原创 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
10162
13
原创 ES6公用立体轮播组件的封装及使用
ES6公用立体轮播组件的封装及使用源码github链接：https://github.com/XieTongXue/how-to/tree/master/carousel-3d1、效果展示2、容易产生bug的点当前图片需要一个背景框，如上图所见白色框，白色框为漂浮于当前轮播图片上方；轮播图可以点击跳转到其他网页，但是由于存在层级关系，白色款会挡住轮播图，导致无法跳转2.1解决思路将白...
2019-01-07 00:30:47
4213
7
原创 优快云2018博客之星评选——期待各位大佬的投票
我的序号是NO.165，谢谢各位！！投票入口：https://bss.youkuaiyun.com/m/topic/blog_star2018无端端就入选了，我只是专业切图的，很菜很菜的，志在参与，哈哈哈哈哈哈哈哈…
2019-01-03 00:02:33
2763
9
原创 [Vue源码分析] v-model实现原理
[Vue源码分析] v-model实现原理最近小组有个关于vue源码分析的分享会，提前准备一下…前言:我们都知道使用v-model可以实现数据的双向绑定，及实现数据的变化驱动dom的更新，dom的更新影响数据的变化。那么v-model是怎么实现这一原理的呢？接下来探索一下这部分的源码。
2018-12-28 23:55:06
4353
11
原创 Node快速切换版本、版本回退(降级)、版本更新(升级)
Node快速切换版本、版本回退(降级)、版本更新(升级)场景最近遇到一些node的坑，比如6.3.0版的node用不了公司最新的工作流，升级到10.x版的node后，又用不了另一套工作流。问题怎么实现node版本降级、升级？是否可以安装多个版本按需要进行切换？
2018-12-17 00:07:02
133220
22
原创 JavaScript判断设备类型加载对应网页并设置两端通用事件
JavaScript如何判断设备类型加载对应网页并设置通用事件基本思路：在网页入口添加判断逻辑，如下：首先获取当前navigator对象的userAgent，通过userAgent判断当前设备类型。①：如果符合移动端判断逻辑，则加载移动端入口；否则加载pc端入口②：通用事件的设置，比如点击事件，PC端为click，但是移动端也用click的话分不清是长按还是点击；根据平台类型设置通...
2018-12-16 22:17:30
1318
1
原创 使用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
5429
原创 浏览器指纹实现方案：Cookie、Flash Cookies、帆布指纹识别
浏览器指纹实现方案及对比，Cookie、Flash Cookies、帆布指纹识别浏览器指纹指什么？是一个能够唯一标识当前浏览器的字符串实现方法1、Cookie2、Cookie替代方案——Flash Cookies3、帆布指纹识别（使用canvas实现）
2018-11-19 22:57:14
12382
11
原创 使用mpvue开发微信小程序——音乐小程序项目源码分享
前言：最近小组有个微信小程序分享的环节，于是在业余时间使用mpvue框架写了个音乐小程序，时间有限，项目暂时只是demo级别，之后有时间会继续完善。此小程序使用mpvue框架开发，样式使用stylus编写，歌手、音乐数据抓取自QQ音乐，项目运行方法请看仓库中的readme。源码地址github链接：https://github.com/XieTongXue/mpvue-music
2018-11-14 02:10:53
5364
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
1734
14
原创 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
1914
3
原创 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
969
原创 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
1901
原创 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
526
原创 JavaScript函数节流(throttle)与函数去抖(debounce)解析与应用举例
概念函数防抖（debounce）： 事件响应函数在一段时间后才会执行，如果在这段时间内再次调用，则重新计算执行时间；当预定时间内没有再次调用该函数，则执行响应逻辑。函数节流（throttle）： 可以理解为在函数防抖上多加了一个功能：函数节流会预定一个自动执行时间，到时自动执行一次。共同点： 函数节流与函数防抖都是为了限制函数的执行频次，是一种性能优化的方案，比如应用于windo...
2018-08-24 11:17:28
728
原创 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
22437
10
原创 Mpvue微信小程序时间消耗进度条组件的实现
实现效果：组件源码：组件主要涉及时间的计算、闰年的判断，比较简单，因此注释比较少。 &amp;lt;progress&amp;gt;&amp;lt;/progress&amp;gt;组件为微信小程序官方的进度条。&amp;lt;template&amp;gt; &amp;lt;div class=&quot;year-progess&quo
2018-06-27 01:05:21
1770
2
原创 Vue2.x通用条件搜索组件的封装及应用
效果 组件源码&lt;template&gt; &lt;div class="search"&gt; &lt;el-select v-model="type" @change="changeType" class="select"&gt;
2018-06-27 00:41:27
4580
原创 Mpvue+koa开发微信小程序——腾讯云开发环境的搭建及部署实现真机测试
为什么写这篇文章？之前写过一篇文章：mpvue+koa开发微信小程序——上传测试代码到腾讯云以及腾讯云后台本地开发环境的搭建 有的伙伴在这篇文章中评论为什么手机发不了请求，因此写这篇文章解释一下。 之前文章介绍了如何部署过代码到腾讯云，也搭建过本地开发环境，当时我们的小程序前端请求的都是我们本地后端的接口，因此，真机无法获取用户信息等。因为真机的请求，没法转发到电脑上，想真机预览，需要测试...
2018-06-26 00:22:04
1711
原创 Vue2.x通用编辑组件的封装及应用
效果 组件源码&amp;lt;template&amp;gt; &amp;lt;div class=&quot;edit-input&quot;&amp;gt; &amp;lt;div class=&quot;editBox&quot;&amp;gt; &amp;lt;div&am
2018-06-25 19:56:45
636
原创 微信小程序开发错误：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
6816
5
原创 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
2235
1
原创 Mpvue+koa开发微信小程序——上传测试代码到腾讯云以及腾讯云后台本地开发环境的搭建
一、微信开发者工具 如何使用微信开发者工具上传测试代码到腾讯云？可通过以下设置实现。（1）登录小程序后台进入https://mp.weixin.qq.com/使用注册小程序时的邮箱登录（勿使用公众号的邮箱登录），点击开发者工具如下，点击开通。 （2）下载nodejs demo随后会进去腾讯云，绑定账号后，点击下载nodejs demo。 解压缩后看到文件目录结构如...
2018-06-03 02:46:00
4809
1
原创 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
1386
1
mpvue音乐小程序项目源码/mpvue微信小程序demo
2018-11-14
vue2.0实现外卖APP商家模块，vue2.0实战项目例子
2018-01-02
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人