- 博客(49)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 如何在轻松的在前端项目中mock数据
在前端项目中，我们经常会有需要mock数据的需求，这样我们后端的接口就不会影响我们的开发进度，大大提高开发效率。但是很多时候，mock需要的配置项都比较繁琐，我又是一个很怕麻烦的人，所以我写了一个小插件，基于webpack和webpack-dev-server的。只要几行代码，你就可以在你的项目中轻松实现数据的mock。该插件目前只支持GET请求。插件项目地址：happy-mock-webp...
2019-12-13 10:25:51
1193
原创 Vue源码学习系列04——Vue构造函数解析(二): 选项合并策略(optionMergeStrategies)
上一节可以看成是merge数据前期准备，下面就介绍到了我们的mergeOption的重头戏啦——merge。先看代码（仍然是mergeOptions里面的代码）：const options = {}let keyfor (key in parent) { mergeField(key)}for (key in child) { if (!hasOwn(parent, key)) ...
2019-03-07 16:40:11
3700
1
原创 Vue源码学习系列03——Vue构造函数解析(一): 选项规范化(normalize)
在上一节分析了，Vue的构造函数中，只有一句this._init(options)，可见这行代码的重要性。今天我们就来详细的看看这个函数主要干了什么事。为了不那么抽象，我会用一个简单的例子来贯穿整个讲解。这个例子非常简单。var app = new Vue({ el: '#app', data(){ return { name: 'hello' } }...
2019-03-07 16:31:01
1709
1
原创 Vue源码学习系列02——Vue的初始化都做了什么
开始之前，我们先看看src目录的结构目录结构compiler编译器corevue的核心部分，包含响应式原理、vdom，内部组件等platforms因为vue是跨平台的(web 与 weex)，在不同平台的编译、运行等行为有所不同，所以这里是给这两个平台量身定制的server服务端渲染相关sfc单文件组件的解析shared全局共享的工具函数(util.js)和常量(con...
2019-02-28 12:34:57
1253
原创 Vue源码学习系列01——全局工具函数解析
本文是vue2系列源码的第一篇，主要是介绍了vue全局工具方法，并且深入的剖析了一些比较重要的方法。总的来说，这些工具方法还是比较容易理解的，但是对JavaScript基础有一定的要求，比如函数、闭包、对象等基本重要的概念要理解。
2018-12-12 20:59:59
2134
7
原创 JavaScript三行代码实现base64的编码和解码
好吧，做了回标题党==但是，说的的确也没错。不需要使用其他的js库，也可以轻松的实现base64的编码和解码，不信你可以往下看。基本方法编码: btoa()你可以使用window.btoa(str)来将一个字符串编码成base64的字符串。解码: atob()window.atob(str)可以将一个base64编码后的字符串解码。参数如果不是正确的base64编码后的话，该方...
2018-11-12 14:57:45
395
原创 微信小程序开发笔记5—— IntersectionObserver应用之实现元素随着页面滚动吸附在顶部的效果
本文主要介绍了两种方法来实现某元素随着页面的滚动，吸附在顶部的效果。一个是使用上一片博客所说的 IntersectionObserver ，一个是使用page的onPageScroll监听函数。欢迎围观。
2018-11-03 18:05:37
4650
5
原创 微信小程序开发笔记4—— IntersectionObserver 用法详解
看微信文档时看到这个很有趣的api，但是官方的文档和例子关于这个api的介绍都是很让人失望的，所以花了点时间了解了以下这个方法，做个记录，供参考。简介首先，我的理解是，这是一个观察器（废话），它用来监测目标对象与某个参照物的相交情况。什么是相交情况？通俗的说，就是两个区域有重叠（公共区域）了，类似与数学中的交集，不过这个是平面上的。我们用官方给的一个简单的例子进行讲解：https://dev...
2018-11-03 17:04:08
25951
4
原创 微信小程序开发笔记2——自定义导航栏组件
本文主要是熟悉微信小程序自定义组件的开发，以一个常见的导航栏（Tabbar）需求为例。官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/首先我们先看一下最终实现的效果：这是一个非常简单的例子，就用这个例子敲开自定义组件的大门。如果你对vue的组件很熟的话，那么你应该会轻松上手...
2018-11-03 14:57:58
2011
原创 微信小程序开发笔记1——使用npm脚本实现自动化切换环境配置
有过小程序开发经验的都知道，在小程序的生态环境中，是很难做到像其他项目那样完全的CI的，因为我们的上传代码是只能在IDE中操作且代码是提交到微信服务器的，微信并没有提供接口让我们可以自动化部署代码。一个我们项目中比较常见的问题是，我们本地开发好后，如果想上传代码到腾讯服务器上，需要将本地的一些配置项修改成线上的版本，比如我们的接口地址，项目配置信息等。当然你可以手动去维护，但是不提倡，因为...
2018-10-21 15:07:51
3394
1
原创 在chrome中屏蔽CSDN的广告
背景：这几天事情比较少，看了下谷歌的插件开发（chrome extension），入了个门csdn广告太让我烦了，就不能像博客园那样干净点吗所以我就趁热打铁，撸了个helloworld版的chrome extension，用来屏蔽csdn博客的详情页的广告。项目地址github：https://github.com/JerryYuanJ/demos ，其中的 02-sim...
2018-09-10 21:04:21
2608
4
翻译 nightwatch系列教程05——Nightwatch配置详解
本文主要详细介绍了nightwatch的各项配置，包括基础配置，selenium的配置，各个环境的配置，全局变量等，欢迎围观。
2018-08-27 21:20:02
1212
翻译 nightwatch系列教程04——开发者指南：在测试中使用Page Object
本文介绍了在nightwatch中使用page object的方法，包括：url属性的作用，elements的配置，sections的用法以及command的写法，欢迎围观。
2018-08-25 16:15:00
932
翻译 nightwatch系列教程03——开发者指南：运行你的测试脚本
本文介绍了nightwatch测试文件是如何运行的，包括：不同环境下的运行方式，命令行选项设置，按分组测试，按标签测试，多环境并行测试等，欢迎围观。
2018-08-25 13:45:36
1210
翻译 nightwatch系列教程02——开发者指南：使用Nightwatch
本文介绍了nightwatch测试文件的基本写法，比如：选择器的切换，钩子函数的用法，全局变量的使用等，欢迎围观。
2018-08-25 13:02:49
1617
翻译 nightwatch系列教程01——Hello Nightwatch
本文主要介绍了流行的端到端测试框架nightwatch的基本知识，并且介绍了安装步骤，最后实现了一个小的测试用例并且运行成功。欢迎围观。
2018-08-23 23:55:04
2693
1
原创 vue项目开发心得和一些最佳实践
本文记录了一些vue项目中的一些经验，包括项目结构，路由管理，路由使用技巧，公有组件抽取，公有方法抽取，样式管理等，欢迎围观。
2018-07-28 20:58:19
9189
2
原创 webpack系列学习01——hello webpack
本文主要介绍了webpack的安装和基本使用，并且使用webpack进行项目的打包。
2018-07-25 23:11:47
253
3
原创 工作笔记八——vue项目的多语言/国际化插件vue-i18n详解
今天介绍vue开发中用的最多的国际化插件：vue-i18n。本文主要参考官网文档，并且结合项目实际需要做了些改进。欢迎围观。
2018-06-24 11:50:58
40078
10
原创 sqlserver存储过程获取包含标识列（自增列）的所有表名
直接上代码吧，主要包含两个重要的对象或方法，一个是SYS.TABLES，一个是OBJECTPROPERTY。具体用法不做展开。/*** 检查数据库中表是否有标识列** 以打印的方式输出**/ALTER PROCEDURE [dbo].[YJ_CHECK_TABLE_PK]ASBEGIN --存储表名 DECLARE @TABLE_NAME VARCHAR(100) = ''; -...
2018-05-15 18:17:31
951
原创 工作笔记七——vue项目中使用ref属性刷新当前子路由
最近项目上有这样一个需求，做统计图表的展示，但是要在一个页面实现图表的切换和按日期条件的查询。类似这样的。点击图标选择器会弹出一个列表供用户选择要看的图表类型，图表选定后，点击右上角的选择日期会查询数据刷新当前的图表。其实，这种需求最简单的做法，就是将所有的图表写在一个界面中。但是每个图表的配置项不同，图表一多的话，界面代码将会非常臃肿且难以维护。所以我没有使用这种方法。我采取了子路由的方式。首先...
2018-04-17 13:55:48
6162
原创 工作笔记六——mint-ui的loadmore和mt-cell-swipe结合使用问题
现在下拉刷新和上拉加载更多是很常见的需求，并且在列表上的用户交互（比如删除当前列表项，标记当前列表项为收藏等）也是非常常见的需求，mint-ui提供了Loadmore组件和CellSwipe组件分别实现了上述两种功能。关于两个组件的详细使用，这里不废话了，官网的例子跑一边基本上就掌握了。这里主要介绍两者结合使用，完成常见的用户操作
2018-04-17 08:09:42
2335
3
原创 细说javascript（二）—— 函数基础
函数，对于js来说，应该是最重要的部分之一了。它本身也是一个对象。本文将介绍函数的基础部分相关知识。（ES6函数新特性请戳阮老师的链接http://es6.ruanyifeng.com/#docs/function,本文不涉及）1.定义函数首先要明确的一点是，函数也是一个对象，所以函数名可以看做一个指向这个对象的指针。js中的函数定义是不需要定义返回值的。定义一个函数有如下三种方式。它们各有不同。...
2018-04-14 00:33:17
555
原创 细探javascript（一）—— 对象
本文主要介绍了javascript中关于对象的相关知识，包括定义数据属性和访问器属性，防篡改对象的三个级别等。
2018-04-10 21:19:31
487
原创 工作笔记五——自己实现一个Vue的下拉刷新组件
概要下拉刷新是很常见的应用需求，也是目前很主流的一种交互手段，之前一直使用的是mint-ui的load-more组件，但是要配置的项太多，比较复杂，今天有空自己写了一个下拉刷新的组件，主要是自己体会一下这种组件的实现机制和编写的难点，折腾了一个小时，终于写出了一版像样一点的，也算是小有收获吧，这边文章记录了写该组件时遇到的一些问题及解决办法。首先，你需要会的知识点有：1.H5的touch事件2.父...
2018-03-17 14:59:23
5948
2
原创 工作笔记四——vueJS在移动端使用富文本编辑器
本文主要介绍vue移动端使用富文本编辑器的使用及常见问题处理。参考组件vue-html5-editor。本例主要基于vue-cli脚手架创建。更多vue相关应用请参考：https://github.com/JerryYuanJ/a-vue-app-template1.项目创建与初始化创建一个vue-cli项目，建议在安装的时候不要使用ESLINT做代码检查，练习的项目不需要这种检查机...
2018-01-25 14:11:26
17497
36
原创 工作笔记三——使用pdf.js实现pdf文件的在线预览
最近做移动项目（H5）时遇到一个需求，就是在线预览pdf文件。其实本来使用window.open()就可以实现了，但是这个API在IOS上是正常的打开Safari浏览器进行预览，在安卓上打开是则是下载预览，客户不满意；而且在将该应用嵌入到钉钉微应用时，这个API在安卓设备上根本不起效果。于是在网上找到了这个插件，去官网摘了个例子，并且结合移动端的上下左右滑动滑动翻页做了个例子，完美解决。以下是详细...
2018-01-06 21:06:30
5032
3
原创 工作笔记二——mint-ui的MessageBox的prompt用户输入校验
我们知道，在mint-ui的组件中，有一个MessageBox，用于弹出对话框与用户进行交互的，它支持常见的三种对话框：简单的提示框alert，提示确认框confirm，用户输入对话框prompt，这三种的用法比较简单，只要参考官网的配置去设置对应的options就可以完成常用的需求了。但是我最近在使用prompt时，遇到了一个问题，就是用户输入时，当输入的内容不合法点击确认时，MessageBo
2017-12-26 16:01:27
15471
4
原创 基于mint-ui的移动应用开发案例五（个人中心）
本节主要包含以下内容数据mock和axios的使用用户圆形头像的显示样式1.数据mock首先我们先在mock文件夹中定义一个标准的json数据文件data.json{ "my": { "name": "周一", "age": 39, "gender": "男", "job": "开发工程师", &
2017-11-30 13:58:04
5546
4
原创 基于mint-ui的移动应用开发案例四（应用中心）
本节主要包括以下内容：应用中心界面的布局mt-swipe，loadmore，mt-cell，mt-actionsheet等组件的使用echarts的使用1.应用中心界面的布局页面的大体结构是一个头标题，走马灯的图片展示区域，和下面的子应用的icon展示。
2017-11-30 11:11:03
7429
1
原创 基于mint-ui的移动应用开发案例三（首页）
本节主要包含以下内容：首页大致布局vuex进行底部tabbar的显示与隐藏控制和tab选中控制mint-cell-swipe组件的使用1.vuex的引入与使用2.首页布局与mint-cell-swipe的使用
2017-11-30 09:51:23
4976
原创 基于mint-ui的移动应用开发案例二（项目搭建）
本节包含以下内容：使用vue-cli脚手架搭建一个项目项目的主界面搭建vue-router的使用1.项目搭建使用vue-cli的脚手架可以帮助我们快速的搭建一个基于webpack的vue项目，在命令行输入 vue init webpack '项目名称' ，可以快速的创建一个完整的工程。这里一路的敲回车保持默认就可以了。其次我们进入项目根目录，在命令行输入
2017-11-29 22:55:02
4917
5
原创 基于mint-ui的移动应用开发案例一（简介）
之前学习vue的知识期间，自己写了一个基于mint-ui的移动小应用，主要是将vue相关的知识串联起来一起使用，形成一个开发体系。今天晚上将这个小项目整理了一下，做个笔记。项目包含的知识点如下：vue-router管理项目的页面跳转vuex管理应用的公共状态axios进行网络请求，包括跨域的配置mock数据进行本地数据模拟mint-ui常用组件的使用合集：mt-swipe，
2017-11-29 21:33:24
2833
原创 工作笔记一——杂项
近期做的项目中遇到一些棘手的问题，解决的过程用到很多知识，在此记下主要的问题与解决方法。页面功能介绍：获取五张表格的大量数据（大概有几千条记录），然后到前台显示在table里面，实现行列汇总。页面保存也是要保存这些数据的（几千条）。大概有三个如下的表格保存着大量数据：1.页面大量计算的解决方案如果原来页面有默认值，要显示默认值，并且要显示行列汇总。数据少的时候，在前台直接使用j
2017-11-27 19:41:06
281
原创 java设计模式之策略模式
定义：策略模式就是定义一个算法族，分别封装起来，让他们之前可以互相替换。此模式让算法的变化独立于使用算法的客户。理解：定义中的解释可能有些官方，用大白话说，就是为了解决一个问题，定义一组方法类，然后呢，具体要用哪一种方法解决问题，让用户自己去决定。举个现实中的例子，我们去超市买东西，我们就是客户，我们买好东西要付钱了，我们会有很多种方式：支付宝支付，现金支付，微信支付等。具体用哪一种方式来付钱
2017-10-31 20:20:04
251
原创 微信小程序实战小小应用——豆瓣电影
昨天趁着项目结束的空闲期，自己看了一下微信小程序的开发，试着用豆瓣的开源API做了一个小应用，很小很小的应用，主要是展示最近上映的电影列表以及电影的详情页展示。包含的主要技术点如下：底部tab页标签的导航切换基本的布局展示（本例中多使用flex布局），图文混排事件处理；网络请求水平滚动scroll-view的实现运行的效果演示如下，其中“加入想看清单”功能和第二个tab的功能没
2017-10-13 22:21:10
5933
1
掌上校园app
2017-09-24
React入门手册
2017-09-24
个人理财系统
2016-07-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人