- 博客(127)
- 资源 (12)
- 问答 (1)
- 收藏
- 关注
原创 用 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 289
原创 连续时间折线图的前后端实现
以上就是我在学习图表后端接口实现的过程中的一些心得,感觉数据方向上 SQL 的各种应用还是很广的,可以通过各种不同维度、指标、筛选条件,产出各类不同数据。可以预见后面可以折腾的东西还有很多~
2024-04-19 15:08:32 230
原创 vue3 项目使用 vite 创建独立的登录页
其实原理并不难,记录下此文主要是提供一种思路。面对一些独立性较强的页面的时候不用拘泥于 SPA 中的路由功能,是可以利用 vite 或者 webpack 做多页应用的。另外,我也遇到过一开始是接入的公司公共 SSO 页,后面要自行开发登录页的情况。也适合用这种多页应用的模式。
2024-04-19 15:07:53 306
原创 JavaScript 作用域详解
本文首发于贝壳社区FE专栏,欢迎关注!一、什么是作用域编译原理分词/词法分析(Tokenizing/Lexing)这个过程会将由字符组成的字符串分解成(对编程语言来说)有意义的代码块,这些代 码块被称为词法单元(token)。例如,考虑程序var a = 2;。这段程序通常会被分解成 为下面这些词法单元:var、a、=、2 、;。空格是否会被当作词法单元,取决于空格在 这门语言中是...
2019-01-25 13:39:01 469
原创 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 9223 2
原创 Vue 组件学习总结
本文主要是对 Vue 组件学习的总结和之后要写的内容的计划。组件学习总结组件库的本质是什么?组件库其实就是一堆组件组成的一个项目,一般项目里会有组件和演示项目。当项目调试时 webpack 打包演示项目的入口文件来进行演示和调试,在发布组件库时 webpack 打包组件库的入口文件。将打包完的组件发布到 npm。对于创建组件库的想法我觉得,组件库的左右只能是一个 —— 提高生产效率。...
2018-12-27 23:05:00 757
原创 换个角度学习 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 508
原创 element 源码学习六 —— Carousel 走马灯学习
简单使用走马灯功能在展示图片时经常用到,而 element 中提供了 Carousel 组件。出于好奇学习一下它的实现原理。具体的功能详情请查阅官方文档。关于组件属性,该组件提供了组件高度、索引、指示器、切换时间等一众配置,这个只要动手试一遍都能理解。关于事件,提供了一个 change 事件。可以通过 v-on:change="changeFun" 事件绑定来监听。该事件传递了两个参数:当...
2018-12-27 23:03:14 4420 2
原创 element 源码学习五 —— Notice 系列组件学习
消息提示行为是开发中非常常见的功能,Element 为我们提供了非常好用和美观的消息提示组件。这里就简单学习下 Notice 组件的 CSS 和代码逻辑。简介Notice 包括了五类组件:Alert 用于页面中展示重要的提示信息。Loading 加载数据时显示动效。Message 常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。...
2018-12-27 23:02:27 629
原创 element 源码学习四 —— color-picker 源码学习
在 element ui 中最让我好奇的组件之一就是 color-picker 着色器组件。这里还是通过几个问题来学习一下如何实现着色器的。源码地址在前几篇博客中说起过 element 组件都位于 package 目录下,那么本次学习的颜色选择器就是在 package/color-picker 目录中。简单说下目录结构:src 源码文件夹components 组件文件夹al...
2018-12-27 23:01:24 1234
原创 element 源码学习三 —— select 源码学习
select 选择器是个比较复杂的组件了,通过不同的配置可以有多种用法。有必要单独学习学习。整体结构以下是 select 的 template 结构,已去掉了一部分代码便于查看整体结构:<template> <div> <!-- 多选 --> <div v-if="multiple" ref="tags...
2018-12-27 23:00:20 2236 1
原创 2018 年最新的移动前端资料整理(不断更新)
本文整理了前端开发同学在开发手机页面的时候遇到的各种问题,希望能够对解决移动前端开发中遇到的问题提供帮助。Android WebView 简介在 Android 中提供了 WebView 控件用来展示网页内容。对于 WebView 需要注意:Android 的 WebView 的主要问题在于不同 Android 版本的 WebView 使用了不同的浏览器内核和浏览器版本,所以需要进行 Andr...
2018-12-27 22:58:25 244
原创 微信小程序踩坑资料整理
申明:本文纯属资料整理,如有违规请评论联系作者删除。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 1844
原创 Vue项目中使用v-bind引入图片路径出现图片未找到的问题
问题由于项目图片在打包后图片名会跟上一串hash值,并且相对路径会改变。所以:<img src="../../assets/logo.png"/>这么写是可以的,因为打包的时候会自动锁定图片路径。<img :src="url"/>data { url: '../../assets/logo.png'}这么写就会出现图片路径不对,无法找到...
2018-06-27 15:53:06 4415
原创 饿了么求职记
记录下饿了么面试的一些东西吧~面试过程上周突然在微博收到一条私信,说饿了么招人让我去聊聊。让我很是吃惊。作为 Vue.js 深度用户,我的就业目标就是在我能力达到之后能够进入饿了么。感到非常意外也非常惊喜。 周末的时候心里总是有点不安,感觉自己能力不足,但又非常希望能够进饿了么。其实这算是我明年的计划了。自感能力不足的我除了周六参加crossover的meetup外全力准备面试。重新...
2018-03-15 06:20:11 1762
原创 element 源码学习(番外篇) —— SASS五分钟快速入门
这算是 element 源码学习的番外篇,因为 element 中使用了大量 sass 来写样式。而 UI 框架的核心其实就是样式。所以,抽空把 sass 学了一遍,写了些小 demo 实践,总结成此文。SASS 安装和调试简单说下 sass 如何安装和编译调试。 参照官网,需要使用 gem 来安装 sass。如果是windows用户没有 gem 需要先安装 Ruby...
2018-03-15 06:18:42 1774
原创 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 2978
原创 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 938
原创 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 1906
原创 学习Vue中那些正则表达式
想看懂Vue的template解析部分,会发现其中有大量的正则表达式。所以先学习基础知识。其实正则表达式并不难,关键在于拆分理解,并且经常使用。就可以很好的熟悉正则表达式了。具体语法可参照正则表达式 - JavaScript | MDN 。正则用法在JavaScript中正则表达式用法为:/正则表达式特殊字符/修饰符(可选)特殊字符这里列一下正则的特殊字...
2018-03-07 15:30:55 26517
原创 利用adb shell和node.js实现抖音自动抢红包功能
昨天回家发现家里人都在用抖音抢红包,看了下操作逻辑,发现规律后觉得可以用软件控制点红包,于是做了以下尝试。运行环境node.jsadb搭建过程网上很多,就不赘述啦~抢红包逻辑逻辑很简单,在抖音视频播完之后如果是红包视频,会跳出红包。 我们模拟逻辑如下: 1. 点击屏幕中央,如果有红包打开红包,没有红包则暂停视频。 2. 点击返回按钮,如果有红包关闭红...
2018-03-07 15:30:07 3710 2
原创 Android基础知识整理
作为从事过两年多Android开发的技术,虽然现在转前端了。但是在求职季,复习下老本行也是很有必要的。以下简单列出各类知识点及其相关优质学习资源,不多赘述。java基础Java 教程 | 菜鸟教程Android基础界面篇Activity —— Android最基本的界面容器,用于显示所有 APP 的内容。需要熟悉 Activity 的生命周期,知道 s...
2018-02-23 20:38:47 391
原创 Vue.js 源码学习六 —— VNode虚拟DOM学习
初六和家人出去玩,没写完博客。跳票了~所谓虚拟DOM,是一个用于表示真实 DOM 结构和属性的 JavaScript 对象,这个对象用于对比虚拟 DOM 和当前真实 DOM 的差异化,然后进行局部渲染从而实现性能上的优化。在Vue.js 中虚拟 DOM 的 JavaScript 对象就是 VNode。 接下来我们一步步分析:VNode 是什么?既然是虚拟 DOM 的作...
2018-02-23 16:49:15 20096
原创 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 3069
原创 记录Canvas用于LODOP打印的解决过程
工作中遇到用canvas绘制了图片,需要打印出来的需求。由于设备限制遇到了不少奇葩问题。在解决过程中学会了不少知识,在此记录下,希望能对同样遇到此类问题的朋友有所帮助。
2018-02-23 16:37:54 3267 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 2021
原创 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 2963
原创 Vue.js源码学习二 —— 生命周期 LifeCycle 学习
春节继续写博客~加油!这次来学习一下Vue的生命周期,看看生命周期是怎么回事。callHook生命周期主要就是在源码某个时间点执行这个 callHook 方法来调用 vm.$options 的生命周期钩子方法(如果定义了生命周期钩子方法的话)。 我们来看看 callHook 代码:export function callHook (vm: Component, h...
2018-02-19 16:51:38 639
原创 用hexo搭建博客笔记
一直想有个自己的 Github.io 博客,感觉逼格能够上升一大截。很久之前就看到网上各种博客搭建的文章,但是从内心中总感觉好像是个很麻烦的事情。所以,一直没有动手去做。昨天,趁着年前工作不忙,搭建了个博客,这里记录下过程。 其实,搭建hexo博客是非常简单的事情。安装前提Mac安装前提XcodeNode.jsGit这三个玩意儿对于我们开发者基本都是有...
2018-02-08 07:20:43 313
原创 Vue.js源码学习一 —— 数据选项 State 学习
关于Vue源码学习的博客, HcySunYang的Vue2.1.7源码学习是我所见过讲的最清晰明了的博客了,非常适合想了解Vue源码的同学入手。本文是在看了这篇博客之后进一步的学习心得。 注意:本文所用Vue版本为 2.5.13 PS:本文有点草率,之后会重写改进。关于源码学习关于学习源码,我有话要说~ 一开始我学习Vue的源码,是将 Vue.js 这个文件下载下...
2018-02-07 11:09:11 1341
原创 Vue学习系列倡议书
我想通过社区的力量把《Vue学习系列》做到最优质的Vue系列博客解决学习痛点学习前端的同学都知道,前端有一大痛点就是知识点分散,学习的东西多。 就像我学习Vue,一拿到手就告诉我有个全家桶要学习。虽然一个一个学习下来了,但是过程是比较漫长的。而且如果是刚入门前端世界,会发现还没开始写代码各种配置都能玩好几天。Webpack打包、ESLint代码检查、Babel语法转译等等…… 写
2018-01-29 13:55:24 336
原创 Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR。关于SSR的文章网上很多,一开始看得我云里雾里。然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清晰明了的很少。所以想写篇文章学习下SSR,希望能够帮助大家快速理解Vue SSR。什么是SSR?SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页
2018-01-29 13:54:36 3474
原创 使用ZRender绘制表格
公司医院项目,需要定制化显示病人的体温、脉搏、呼吸。由于界面是定义好的,无法使用开源项目来改,干脆自己画一个了。为什么是ZRenderZRender 是百度前端团队用于绘制 EChar t的开源库,里面封装了各种对 Canvas 的使用。而且 ZRender 的文档是全中文的,对开发者也非常友好需求相对于其他知识点,绘图没什么特别要讲的。无非是不停的画而已。步骤复杂但是实
2018-01-17 17:49:54 5528 1
数字旋转逻辑题的Android解法
2016-04-08
如何将前端写的单页应用放入Android APP中
2016-08-30
TA创建的收藏夹 TA关注的收藏夹
TA关注的人