violet-jack-CSDN博客

原创 JavaScript 作用域详解

本文首发于贝壳社区FE专栏，欢迎关注！一、什么是作用域编译原理分词/词法分析(Tokenizing/Lexing)这个过程会将由字符组成的字符串分解成(对编程语言来说)有意义的代码块，这些代码块被称为词法单元(token)。例如，考虑程序var a = 2;。这段程序通常会被分解成为下面这些词法单元:var、a、=、2 、;。空格是否会被当作词法单元，取决于空格在这门语言中是...

2019-01-25 13:39:01 468

原创 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 9219 2

原创 Vue 组件学习总结

本文主要是对 Vue 组件学习的总结和之后要写的内容的计划。组件学习总结组件库的本质是什么？组件库其实就是一堆组件组成的一个项目，一般项目里会有组件和演示项目。当项目调试时 webpack 打包演示项目的入口文件来进行演示和调试，在发布组件库时 webpack 打包组件库的入口文件。将打包完的组件发布到 npm。对于创建组件库的想法我觉得，组件库的左右只能是一个 —— 提高生产效率。...

2018-12-27 23:05:00 754

原创换个角度学习 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 4418 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 1233

原创 element 源码学习三 —— select 源码学习

select 选择器是个比较复杂的组件了，通过不同的配置可以有多种用法。有必要单独学习学习。整体结构以下是 select 的 template 结构，已去掉了一部分代码便于查看整体结构：<template> <div>  <div v-if="multiple" ref="tags...

2018-12-27 23:00:20 2231 1

本文整理了前端开发同学在开发手机页面的时候遇到的各种问题，希望能够对解决移动前端开发中遇到的问题提供帮助。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

原创 element源码学习二 —— 简单组件学习

上一篇博客中学习了项目的结构，这篇博客来学几个简单的组件的实现。

2018-03-12 09:40:12 4271 1

原创 element源码学习一 —— 认识框架

由于面试需要，先来几发 element 源码学习博客。Vue 源码还将继续更新。

2018-03-10 23:57:05 11710

原创记一次参见 CrossOver Meetup 的经历

这次meetup的信息呢是在一早一晚上面看到的。感觉挺不错就跑去听听了解下了。

2018-03-10 23:37:10 1610

原创为什么成为前端

处在求职季的当下，我想整理一下我的工作经历以及为什么会成为一个前端。做到不忘初心。

2018-03-10 23:36:21 437

原创 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 3708 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 20095

原创 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 1340

原创 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 3473

原创 ES6 学习笔记（下）

学习资料：《ECMAScript 6 入门》

2018-01-21 07:00:33 282

原创 ES6 学习笔记（上）

认真学习了一遍ES6，发现很多很好用的功能。学习资料：《ECMAScript 6 入门》

2018-01-20 05:45:40 300

原创 jQuery回车键快速切换下一个input文本框解决方案

表单中有很多文本框，为了输入方便使用回车键切换到下一个文本框。

2018-01-19 10:00:39 4069 1

原创使用ZRender绘制表格

公司医院项目，需要定制化显示病人的体温、脉搏、呼吸。由于界面是定义好的，无法使用开源项目来改，干脆自己画一个了。为什么是ZRenderZRender 是百度前端团队用于绘制 EChar t的开源库，里面封装了各种对 Canvas 的使用。而且 ZRender 的文档是全中文的，对开发者也非常友好需求相对于其他知识点，绘图没什么特别要讲的。无非是不停的画而已。步骤复杂但是实

2018-01-17 17:49:54 5527 1

原创 Vue源码学习笔记

最近偷懒好久没有写博客了，一直想继续Vue学习系列，想深入Vue源码来写。结果发现自己层次不够，对js的理解差好多。所以一直想写一直搁置着。最近重新振作决心看完Vue源码，并且以我们这类前端小白的角度来一步步弄懂Vue源码。PS：以下文章为笔记类，记录了本人在看源码过程中的一些问题和感悟。Vue源码的本质是什么Vue.js 本质上就是一个包含各种逻辑的一个function。而我们通常初始化Vue的

2017-12-01 13:50:04 1418

原创 weex项目小结

由于weex的不稳定性，所以中途放弃了weex方案。转而使用Android原生开发。今天项目第一阶段开发结束，来总结一下weex的一些东西。weex 相比于原生开发的好处界面搭建速度快，特别是重复性界面。数据处理方便，尤其是json解析方面。坏处么用的人太少，所以网上资料也很少。坑还是比较多的，要玩的溜要踩上不少坑。还是需要一些原生开发的知识才能够玩的溜。说说我这个项目的一些东西吧~

2017-11-23 16:55:31 2360

原创解决进入Activity默认焦点选中第一个EditText，并弹出软键盘。

需求如题，直接选中一个文本框并弹出软键盘并不友好。解决方法：在xml的根容器中添加两个配置即可：将 focusable 和 focusableInTouchMode 都设为 true 即可。<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/an

2017-11-22 10:13:51 2387

Honeywell手机安装扫描二维码功能补丁

2017-05-23

jQuery转Vue实例源码

本demo分别使用jQuery和Vue框架写了一个表单。从中发现jQuery和Vue的不同之处。

2016-05-19

数字旋转逻辑题的Android解法

有一个3*3的数字矩阵。我们只能沿着中心点I II III和IV顺时针或逆时针旋转四个瓷砖的四分之一。顺时针旋转为标为r1,r2,r3,r4，逆时针旋转标为R1,R2,R3、R4，共8种旋转方式,即顺时针旋转为r和逆时针旋转标记为R .例如,从矩阵(S),通过旋转序列r1R4r2R3就变为了矩阵(E)。现在，要求从矩阵(S)以最短的方法变为矩阵(T)。（具体图片在压缩包内）

2016-04-08