- 博客(132)
- 资源 (12)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 canvas 绘制折线图及思考
在学习了 G2 源码后，就想着自己写个 chart 加深理解。这次我是用的 G 来实现的。其实用原生的 canvas api 或者其他绘图库都是差不多的。重要是捋一下思路。
2024-04-26 12:17:54
570
原创 Flutter 项目添加 IOS 小组件开发记录
突然接到一个需求，需要我们在 IOS APP 中添加 widget 小组件，用来展示项目项目数据信息。大领导的需求没法拒绝，只能摸着石头过河，开干！
2024-04-24 10:42:12
1478
6
原创 用代码给孩子造“钱”
用 chrome 打开.html文件，使用浏览器的打印功能将代币打印出来就大功告成了。后面就可以剪开来给孩子们发“钱”啦~技术开发不止是用来工作的工具，也可以用到日常生活中。我经常在遇到一些问题、或者在用一些软件的时候在想：这个问题我可不可以用代码来提高效率？我是不是可以自己用代码实现这个功能？感觉前端可以折腾的事儿还挺多的。因兴趣而写的代码虽然没有产生经济利益，但是很有趣，也会在将脑中一个个想法实现的过程中收获心流和成就感。总之，享受代码给我们带来的超能力吧~
2024-04-24 10:39:01
363
原创 邮件中加入 Chart 图表的实现
邮件 HTML 为了兼容不同平台、不同形式、不同厂家的邮箱应用、为了兼容老的历史版本邮箱，也出于安全方面的考虑。所以限制颇多。想要写好邮箱 HTML 也是需要费一番功夫的。
2024-04-24 10:38:05
640
原创 使用 Monaco Editor 开发 SQL 编辑器
然后根据已有库表信息进行自定义 AutoComplete...},methods: {...})const lastToken = tokens[tokens.length - 1] // 获取最后一段非空字符串} else {return {},})},// 获取 SQL 语法提示}))},}))},if (!return []}))},// 初始化编辑器，确保dom已经渲染value: '', // 编辑器初始显示文字。
2024-04-22 17:01:31
1096
原创 用 element ui 实现季度选择器
由于在数据项目中经常以各种时间条件查询数据，所以时间选择器（DatePicker）组件是很常用的组件。但是在我使用的 Element UI 中，缺少了季度选择器的功能。简易实现一开始我根据时间范围使用 select 去遍历,如 2024-Q1、2023-Q4、2023-Q3 如此类推。element 并无季度选择器其实也算是快速解决了 element ui 无法选择季度的问题。但总感觉特别的 low，后来有时间了就去隔壁 ant design 看了看。发现在新版的 ant design 都支持
2024-04-19 15:25:36
2614
1
原创 连续时间折线图的前后端实现
以上就是我在学习图表后端接口实现的过程中的一些心得，感觉数据方向上 SQL 的各种应用还是很广的，可以通过各种不同维度、指标、筛选条件，产出各类不同数据。可以预见后面可以折腾的东西还有很多~
2024-04-19 15:08:32
448
原创 vue3 项目使用 vite 创建独立的登录页
其实原理并不难，记录下此文主要是提供一种思路。面对一些独立性较强的页面的时候不用拘泥于 SPA 中的路由功能，是可以利用 vite 或者 webpack 做多页应用的。另外，我也遇到过一开始是接入的公司公共 SSO 页，后面要自行开发登录页的情况。也适合用这种多页应用的模式。
2024-04-19 15:07:53
1125
原创 JavaScript 作用域详解
本文首发于贝壳社区FE专栏，欢迎关注！一、什么是作用域编译原理分词/词法分析(Tokenizing/Lexing)这个过程会将由字符组成的字符串分解成(对编程语言来说)有意义的代码块，这些代 码块被称为词法单元(token)。例如，考虑程序var a = 2;。这段程序通常会被分解成 为下面这些词法单元:var、a、=、2 、;。空格是否会被当作词法单元，取决于空格在 这门语言中是...
2019-01-25 13:39:01
552
原创 umi 启动 npm run dev 之后页面一直提示 Disconnect 不断刷新重连
场景前端使用 antd pro 的脚手架项目，运行 npm run start 启动 devServer 进行热加载实时打包。后端使用 koa 来提供 API 接口和中间件，并且使用 HTML 引用前端的打包资源来进行页面渲染。问题由于同时起了 devServer 和 node 两个端口服务，所以当我访问后端渲染页面时，umi 中的 socket server 端口指向错误。所以它会不断地...
2019-01-21 16:36:09
9894
3
原创 Vue 组件学习总结
本文主要是对 Vue 组件学习的总结和之后要写的内容的计划。组件学习总结组件库的本质是什么？组件库其实就是一堆组件组成的一个项目，一般项目里会有组件和演示项目。当项目调试时 webpack 打包演示项目的入口文件来进行演示和调试，在发布组件库时 webpack 打包组件库的入口文件。将打包完的组件发布到 npm。对于创建组件库的想法我觉得，组件库的左右只能是一个 —— 提高生产效率。...
2018-12-27 23:05:00
828
原创 换个角度学习 VUE CLI 3
简介vue cli 3 是一个类似于 create-react-app 的可以用例命令行快速配置和生成一个 vue 项目。]vue cli 3 与之前版本最大的几个变化变化是：选择项目插件界面更友好了。如选择 eslint 类型、是否需要 router 和 vuex 等行为。实现了界面化创建和操作项目，使用 $ vue ui 启动教授架页面。将常用配置项进行了封装，统一使用 vue-co...
2018-12-27 23:03:49
564
原创 element 源码学习六 —— Carousel 走马灯学习
简单使用走马灯功能在展示图片时经常用到，而 element 中提供了 Carousel 组件。出于好奇学习一下它的实现原理。具体的功能详情请查阅官方文档。关于组件属性，该组件提供了组件高度、索引、指示器、切换时间等一众配置，这个只要动手试一遍都能理解。关于事件，提供了一个 change 事件。可以通过 v-on:change="changeFun" 事件绑定来监听。该事件传递了两个参数：当...
2018-12-27 23:03:14
5345
2
原创 element 源码学习五 —— Notice 系列组件学习
消息提示行为是开发中非常常见的功能，Element 为我们提供了非常好用和美观的消息提示组件。这里就简单学习下 Notice 组件的 CSS 和代码逻辑。简介Notice 包括了五类组件：Alert 用于页面中展示重要的提示信息。Loading 加载数据时显示动效。Message 常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。...
2018-12-27 23:02:27
773
原创 element 源码学习四 —— color-picker 源码学习
在 element ui 中最让我好奇的组件之一就是 color-picker 着色器组件。这里还是通过几个问题来学习一下如何实现着色器的。源码地址在前几篇博客中说起过 element 组件都位于 package 目录下，那么本次学习的颜色选择器就是在 package/color-picker 目录中。简单说下目录结构：src 源码文件夹components 组件文件夹al...
2018-12-27 23:01:24
1534
原创 element 源码学习三 —— select 源码学习
select 选择器是个比较复杂的组件了，通过不同的配置可以有多种用法。有必要单独学习学习。整体结构以下是 select 的 template 结构，已去掉了一部分代码便于查看整体结构：<template> <div> <!-- 多选 --> <div v-if="multiple" ref="tags...
2018-12-27 23:00:20
2522
1
原创 2018 年最新的移动前端资料整理（不断更新）
本文整理了前端开发同学在开发手机页面的时候遇到的各种问题，希望能够对解决移动前端开发中遇到的问题提供帮助。Android WebView 简介在 Android 中提供了 WebView 控件用来展示网页内容。对于 WebView 需要注意：Android 的 WebView 的主要问题在于不同 Android 版本的 WebView 使用了不同的浏览器内核和浏览器版本，所以需要进行 Andr...
2018-12-27 22:58:25
289
原创 微信小程序踩坑资料整理
申明：本文纯属资料整理，如有违规请评论联系作者删除。1. navigator点击出现阴影，如何去除阴影做法：将navigator组件的hover-class设置为none：hover-class=“none”<navigator url='index' class="nav" hover-class='none'> .....</navigator>2...
2018-12-27 22:57:07
1963
原创 Vue项目中使用v-bind引入图片路径出现图片未找到的问题
问题由于项目图片在打包后图片名会跟上一串hash值，并且相对路径会改变。所以：<img src="../../assets/logo.png"/>这么写是可以的，因为打包的时候会自动锁定图片路径。<img :src="url"/>data { url: '../../assets/logo.png'}这么写就会出现图片路径不对，无法找到...
2018-06-27 15:53:06
4518
原创 饿了么求职记
记录下饿了么面试的一些东西吧~面试过程上周突然在微博收到一条私信，说饿了么招人让我去聊聊。让我很是吃惊。作为 Vue.js 深度用户，我的就业目标就是在我能力达到之后能够进入饿了么。感到非常意外也非常惊喜。 周末的时候心里总是有点不安，感觉自己能力不足，但又非常希望能够进饿了么。其实这算是我明年的计划了。自感能力不足的我除了周六参加crossover的meetup外全力准备面试。重新...
2018-03-15 06:20:11
1849
原创 element 源码学习（番外篇） —— SASS五分钟快速入门
这算是 element 源码学习的番外篇，因为 element 中使用了大量 sass 来写样式。而 UI 框架的核心其实就是样式。所以，抽空把 sass 学了一遍，写了些小 demo 实践，总结成此文。SASS 安装和调试简单说下 sass 如何安装和编译调试。 参照官网，需要使用 gem 来安装 sass。如果是windows用户没有 gem 需要先安装 Ruby...
2018-03-15 06:18:42
1893
原创 Hexo博客系统报错解决方案
报错信息Template render error: (unknown path) [Line 62, Column 32] expected variable end at Object.exports.prettifyError (/Users/violetjack/Documents/Github/BlogBackup/node_modules/nunjucks/src/...
2018-03-07 16:01:25
3095
原创 Vue.js 源码学习八 —— HTML解析细节学习
从上一篇博客中，我们知道了template编译的整体逻辑和template编译后用在了哪里。本文着重讲下HTML的解析过程。parse 方法所有解析的起点就在 parse 方法中，parse方法最终将返回为一个 AST 语法树元素。// src/core/compiler/parser/index.jsexport function parse ( template: s...
2018-03-07 15:32:22
1028
原创 Vue.js 源码学习七 —— template 解析过程学习
这次，来学习下Vue是如何解析HTML代码的。template 解析用在哪从之前学习 Render 的过程中我们知道，template 的编译在 $mount 方法中出现过。// src/platforms/web/entry-runtime-with-compiler.jsconst mount = Vue.prototype.$mountVue.prototyp...
2018-03-07 15:31:37
1989
原创 学习Vue中那些正则表达式
想看懂Vue的template解析部分，会发现其中有大量的正则表达式。所以先学习基础知识。其实正则表达式并不难，关键在于拆分理解，并且经常使用。就可以很好的熟悉正则表达式了。具体语法可参照正则表达式 - JavaScript | MDN 。正则用法在JavaScript中正则表达式用法为：/正则表达式特殊字符/修饰符(可选)特殊字符这里列一下正则的特殊字...
2018-03-07 15:30:55
27129
原创 利用adb shell和node.js实现抖音自动抢红包功能
昨天回家发现家里人都在用抖音抢红包，看了下操作逻辑，发现规律后觉得可以用软件控制点红包，于是做了以下尝试。运行环境node.jsadb搭建过程网上很多，就不赘述啦~抢红包逻辑逻辑很简单，在抖音视频播完之后如果是红包视频，会跳出红包。 我们模拟逻辑如下： 1. 点击屏幕中央，如果有红包打开红包，没有红包则暂停视频。 2. 点击返回按钮，如果有红包关闭红...
2018-03-07 15:30:07
4522
2
原创 Android基础知识整理
作为从事过两年多Android开发的技术，虽然现在转前端了。但是在求职季，复习下老本行也是很有必要的。以下简单列出各类知识点及其相关优质学习资源，不多赘述。java基础Java 教程 | 菜鸟教程Android基础界面篇Activity —— Android最基本的界面容器，用于显示所有 APP 的内容。需要熟悉 Activity 的生命周期，知道 s...
2018-02-23 20:38:47
441
原创 Vue.js 源码学习六 —— VNode虚拟DOM学习
初六和家人出去玩，没写完博客。跳票了~所谓虚拟DOM，是一个用于表示真实 DOM 结构和属性的 JavaScript 对象，这个对象用于对比虚拟 DOM 和当前真实 DOM 的差异化，然后进行局部渲染从而实现性能上的优化。在Vue.js 中虚拟 DOM 的 JavaScript 对象就是 VNode。 接下来我们一步步分析：VNode 是什么？既然是虚拟 DOM 的作...
2018-02-23 16:49:15
20344
原创 Vue.js 源码学习五 —— provide 和 inject 学习
早上好！继续开始学习Vue源码吧~在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项。他们成对出现，用于父级组件向下传递数据。 下面我们来看看源码~源码位置和之前一样，初始化的方法都是在 Vue 的 _init 方法中的。 // src/core/instance/init.js Vue.prototype._init...
2018-02-23 16:48:12
3154
原创 记录Canvas用于LODOP打印的解决过程
工作中遇到用canvas绘制了图片，需要打印出来的需求。由于设备限制遇到了不少奇葩问题。在解决过程中学会了不少知识，在此记录下，希望能对同样遇到此类问题的朋友有所帮助。
2018-02-23 16:37:54
3569
1
原创 Vue.js源码学习四 —— 渲染 Render 初始化过程学习
今天我们来学习下Vue的渲染 Render 源码~还是从初始化方法开始找代码，在 src/core/instance/index.js 中，先执行了 renderMixin 方法，然后在Vue实例化的时候执行了 vm._init 方法，在这个 vm._init 方法中执行了 initRender 方法。renderMixin 和 initRender 都在 src/core/insta...
2018-02-19 16:53:47
2118
原创 Vue.js源码学习三 —— 事件 Event 学习
早上好！继续学习Vue源码~这次我们来学习 event 事件。源码简析其实看了前两篇的同学已经知道源码怎么找了，这里再提一下。 先找到Vue核心源码index方法 src/core/instance/index.jsfunction Vue (options) { if (process.env.NODE_ENV !== 'production' &&am...
2018-02-19 16:53:05
3038
原创 Vue.js源码学习二 —— 生命周期 LifeCycle 学习
春节继续写博客~加油！这次来学习一下Vue的生命周期，看看生命周期是怎么回事。callHook生命周期主要就是在源码某个时间点执行这个 callHook 方法来调用 vm.$options 的生命周期钩子方法（如果定义了生命周期钩子方法的话）。 我们来看看 callHook 代码：export function callHook (vm: Component, h...
2018-02-19 16:51:38
712
原创 用hexo搭建博客笔记
一直想有个自己的 Github.io 博客，感觉逼格能够上升一大截。很久之前就看到网上各种博客搭建的文章，但是从内心中总感觉好像是个很麻烦的事情。所以，一直没有动手去做。昨天，趁着年前工作不忙，搭建了个博客，这里记录下过程。 其实，搭建hexo博客是非常简单的事情。安装前提Mac安装前提XcodeNode.jsGit这三个玩意儿对于我们开发者基本都是有...
2018-02-08 07:20:43
353
原创 Vue.js源码学习一 —— 数据选项 State 学习
关于Vue源码学习的博客， HcySunYang的Vue2.1.7源码学习是我所见过讲的最清晰明了的博客了，非常适合想了解Vue源码的同学入手。本文是在看了这篇博客之后进一步的学习心得。 注意：本文所用Vue版本为 2.5.13 PS：本文有点草率，之后会重写改进。关于源码学习关于学习源码，我有话要说~ 一开始我学习Vue的源码，是将 Vue.js 这个文件下载下...
2018-02-07 11:09:11
1394
原创 Vue学习系列倡议书
我想通过社区的力量把《Vue学习系列》做到最优质的Vue系列博客解决学习痛点学习前端的同学都知道，前端有一大痛点就是知识点分散，学习的东西多。 就像我学习Vue，一拿到手就告诉我有个全家桶要学习。虽然一个一个学习下来了，但是过程是比较漫长的。而且如果是刚入门前端世界，会发现还没开始写代码各种配置都能玩好几天。Webpack打包、ESLint代码检查、Babel语法转译等等…… 写
2018-01-29 13:55:24
378
数字旋转逻辑题的Android解法
2016-04-08
如何将前端写的单页应用放入Android APP中
2016-08-30
TA创建的收藏夹 TA关注的收藏夹
TA关注的人