前端
文章平均质量分 66
scut_少东
Fine, thank you, and you?
展开
-
晨读系列(一)之《Google软件测试之道》
工作十个月以后一个观念在我心里越发清晰:要写出在日常操作场景下不出错的代码真的很难。尽管每次上线前都会进行测试行为,但是随机测试往往难以覆盖所有的环境和场景,所以找了本关于测试的书来看,顺手记录下在阅读过程中的一些让我印象深刻的点。软件工程师角色划分在谷歌,软件工程师主要划分为三种角色:SWE(软件开发工程师)、SET(软件测试开发工程师)和TE(测试工程师,也称用户开发工程师)。三种角色都要求具备一定的开发能力,但是从左到右,开发工作占的比重越来越少,测试工作以及对产品端到端负责的比重越来越大,对综原创 2020-05-29 23:23:33 · 681 阅读 · 0 评论 -
一个基于ES6 的Mvvm Demo
很多次面试都被问到双向绑定的原理,从一开始的啥都不知道到后来知道使用Object.defineProperty 劫持属性,使用发布订阅进行消息传递,再后来看了很多篇相关的文章和代码,依然应付不了面试官的追问。还是对其中的原理和实现了解的不透彻,所以最终决定自己亲手写一个。网上写mvvm 的博客有很多,都挺详细的也都贴了大段的代码,想了解的可以直接走下面的传送门,这篇文章的代码实现很大一部分都是参考...原创 2018-08-15 21:49:21 · 346 阅读 · 0 评论 -
CVTE 面试的两道算法题
下了班立马赶往深圳北站,下着大雨又坐过了站,着急地跑向对面的站牌,匆忙间搞得满头大汗。好不容易坐上了高铁,休息片刻,终于有时间整理一下前两天面试CVTE 时遇到的两道算法题。1. 在数组中寻找和为固定值的两个数字这道题目是一面的时候一个女面试给出的最后一个面试问题。题目的大概意思如上,数据不一定有序,而且要求是在O(n) 的时间内找到答案。对于常年混迹LeetCode 的人来说,这是一道再...原创 2018-08-10 22:47:26 · 1081 阅读 · 2 评论 -
发布一个Npm 包
周末无事,学一下怎么发布npm 包。在网上找教程还是觉得没有比较完善、可以清楚地走完整个流程的,还有一些是github 上有demo 但是拖下来运行会报错,可能是什么插件的版本问题。于是就有了这篇文章,本文包以下含两部分的内容:(1)如何发布一个简单的npm 包(2)如何发布一个基于es6 编写的npm 包1. 发布一个简单的npm 包发布npm 包的过程实际上就是把你本地的nod...原创 2018-08-04 13:26:05 · 6917 阅读 · 0 评论 -
如何在Angular 项目中使用Prism.js?
1. 从Prism.js 说起Prims.js 是一个代码高亮插件。它的使用方式非常简单,只需要三步:第一步,在官网上选择自己喜欢的皮肤和要高亮的代码语言;第二步,下载相应的js 和css 文件;第三步,在你展示代码的页面中引入刚刚下载的js 和css 文件,并为包含代码的code 标签添加相应的类。经过以上三步就可以完成简单的代码高亮操作,通过观察形成的html 结构我们可以发现,Prism.j...原创 2018-07-14 23:43:11 · 1637 阅读 · 1 评论 -
SublimeText:一键添加作者信息的两种方式
简单记录一下SublimeText 一键添加作者信息的两种方式:File Header 插件和Snippet。1. 使用File Header 插件(1)安装File Header 插件使用Package Control 安装File Header 插件Package Control 安装方式:https://packagecontrol.io/installation(2)添...原创 2018-07-23 21:26:52 · 2832 阅读 · 0 评论 -
Webpack:从野战到入门
Vue-cli 中有集成Webpack,所以之前做一个Vue 的项目的时候也了解并使用了Webpack 的部分功能。实战中用到的东西永远只是理论的冰山一角,而且像我们这种习惯使用hack 方法去解决问题的程序员写起代码来顶多只能称得上是野战,哈哈哈~所以在使用过程中犹如盲人摸象,遇到问题也花费了很多时间才得以解决。后来有时间,看了一本叫做《深入浅出Webpack》的书,才对Webpack 有了一个...原创 2018-06-14 16:16:59 · 2864 阅读 · 0 评论 -
小程序:用户登录状态检查与更新实例
这篇文章主要解决以下问题:用户每次登录小程序(包括第一次使用)及点击小程序的每个页面的时候,我们如何判断他当前的登录状态是否过期?如果过期,如何重新获取用户信息并发送至开发者服务器更新用户信息,以及设置新的用户登录状态?将这个部分单独作为一篇文章有两个原因:① wx.getUserInfo(OBJECT) 接口调整,废弃了以前直接获取用户信息的方法;② 上篇文章 授权、登录、sessi...原创 2018-05-30 14:44:08 · 23905 阅读 · 11 评论 -
Js 设计模式:享元模式实现前端分页
之前面试的时候被问到,如何在前端实现分页。听到这个问题,我当时有点懵,因为我不太确定面试官想问的是什么。当时的想法是,如果要在前端进行分页,那只能一次性拿到所有的数据,然后根据一个表示当前页数的变量来选择性地显示某些数据记录。这样想着就实在想不到面试官想问的点是什么。说实话,直到现在,我还不是很清楚这个问题考察的是什么,不过最近刚好在看《JavaScript 设计模式》,书中在享元模式一章提到了前...原创 2018-08-18 11:51:06 · 873 阅读 · 2 评论 -
Js 排序算法:插入排序和希尔排序
企业招聘笔试和面试的时候很喜欢问到排序算法,时间复杂度,空间复杂度,稳定性,巴拉巴拉。说到排序算法,那可是大一时候刚接触C 语言(得有四五年了吧,有点暴露年龄,哈哈哈)学到的东西了,中间一直也没有用过,基本上不记得多少了。所以特意花了一天多的时间来回顾一下排序算法,这一篇就先说下插入排序和希尔排序,算是一个学习过程的记录。之所以把这两种排序放在一起说,是因为两者本质上是一样的,都是插入排序,不过希...原创 2018-08-30 17:54:47 · 344 阅读 · 0 评论 -
浏览器与Node 中的this
上午在复习闭包的时候,又看了一下阮一峰老师的那篇 学习Javascript闭包(Closure),内容不多,讲得也很清晰。但是最后的两个题目引发了较多的争议,看好多人评论说第一个题目实际上是this 指针的问题。于是亲自去实践下,再结合其他几篇文章,又跑去研究一下浏览器和Node 中的this 指针的问题,最终总结整理出一点东西,写在下面。1. 两个题目首先来看一下那两个题目,第一题:...原创 2018-08-31 13:58:56 · 1577 阅读 · 4 评论 -
读《微软开源 Sketch2Code,草图 UI 转 HTML 代码》有感
早上在准备虎牙直播的面试,想到面试官可能会问最近有没有看什么文章,学到了什么东西。于是就点开关注的几个公众号看一下有没有什么新的文章。刚点开订阅号,一篇文章映入眼帘,《微软开源 Sketch2Code,草图 UI 转 HTML 代码》。这是那种看题目就可以知道内容的文章,内容本身并不能让我们学到很多东西,只是让我们知道一条简单的信息而已。但是我觉得,信息本身有时候也会引发我们的很多思考。略作整理,...原创 2018-09-08 10:35:40 · 3420 阅读 · 0 评论 -
Js 将数组按父子关系转换为对象树
这是一道遇到过两次的前端笔试题,第一次是在哪里记不清了,第二次是在今天上午多益网络的笔试中,两次试题的具体内容稍微有差别,因为时间和IDE 的原因都没能解出正确答案。事后又花点时间捣鼓一下,整理出两种解法,记录在这里。1. 问题的输入与输出首先来看一下这个问题的输入和输出:// 输入var nodes = [ {id: 10, title: 'dw10', parentId: ...原创 2018-09-06 16:17:19 · 5425 阅读 · 2 评论 -
你想成为一个什么样的面试官?
九月的最后一天,没有需要准备的笔试和面试,生活似乎突然间慢了下来,安安静静地坐在基地写下本月最后一篇文章。这篇文章要讨论的东西正如题目所言,待你工作三五年,坐在校招面试的面试官的位子上的时候,你想成为一个什么样的人?这一周一直在跑面试,平均大概每天两场。我有时候也会想,现在手里已经有几个offer,广州、深圳的都有,虽然不是什么大厂,但是薪资、工作环境、公司发展也都还蛮不错的。我就算继续跑完后...原创 2018-09-30 10:51:34 · 942 阅读 · 3 评论 -
Angular2 + NodeJs 上传图片到服务器
一个小小的功能,花了接近一天的时间才搞定。网上虽然有很多关于Angular2 上传图片的博客,但基本对我都帮助不大。大多数博客的问题在于,他们只是贴了大段的代码,完全没有强逻辑性的文字描述,大大提高了别人从博客中学习的成本。可能甚至连他们自己都不清楚这个功能是怎么实现的,为什么这样写就能实现了。所以我每次写博客的时候都会先给出一个解决问题的步骤,然后再按步骤进行解决,并贴出相应的代码。这样写的好处...原创 2018-10-19 10:57:17 · 881 阅读 · 0 评论 -
Vue 下限制按钮点击频率的全局解决方案
一、场景分析一个很常见的场景:由于网络或者后台处理速度的原因,用户操作发出的请求无法得到快速响应,这个时候用户多半会以为没有点击成功或者因为没有耐心而去再次点击按钮。一般来说,这种重复请求会在后端进行过滤,但是只靠后端无法保证能够处理所有的意外情况,所以最好在前端也加以限制。那么问题来了,全站可能有几十上百个按钮,该如何进行限制?二、解决方案1. 方案一给每个按钮绑定一个变量,在按...原创 2018-12-17 20:49:20 · 8848 阅读 · 4 评论 -
利用Canvas 实现前端图片涂抹效果
最近在做image inpainting,想做一个前端页面,可以自定义mask,然后传到后端处理,效果如下:代码如下:html,其中的 jquery.min.js 随便找个jquery 的链接复制一下放到本地就好了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...原创 2019-02-27 21:40:24 · 3049 阅读 · 0 评论 -
前端入门之路
正式接触前端应该是在2017年7月份,到现在差不多已经有两年的时间。我很庆幸,在入门的过程中我是处在一个技术资源还算有保障的环境中,遇到什么问题,都可以从身边的前辈身上找到答案。但是回想起来,仍觉得入门之路颇为坎坷。很多人刚接触前端时普遍存在的问题主要包含不理解前端的基本概念,不知道有多少技术栈,不明白各种技术栈出现的原因,以及他们之间的相互关系,在什么情况下该使用哪个。更具体地来说,是不知道问题...原创 2019-05-12 16:13:49 · 2315 阅读 · 4 评论 -
小程序:授权、登录、session_key、unionId
微信应用的一个很大的优势就在于使用过程中是不需要进行注册和显式登录的,大部分问题基本上可以一键解决。但是在授权、登录和获取用户信息的过程中都发生了哪些事情,今天我们就来讨论一下。这篇文章主要分析以下几个问题:授权和登录的意义session key 的作用unionId 的作用,有哪些获取途径在应用中如何保存用户登录态1. 授权和登录的意义首先必须要明白,授权和登录实际上是两个操作。1.1 授权 那...原创 2018-05-24 13:03:34 · 95470 阅读 · 11 评论 -
小程序:配置Https服务器(Nginx)
小程序与普通移动端开发的一个很大的不同之处就在于小程序的ajax 请求是使用https 协议与服务器端进行通信的。所以要开发小程序,首先要搭建https 服务器。这篇文章记录了在nginx 做转发的服务器中如何一步步完成https 配置。1. http 和https在开始行动之前,我们必须先搞清一个问题,http 和https 的区别是什么?要配置https 需要执行哪些步骤的操作?关于http ...原创 2018-05-23 11:26:41 · 9253 阅读 · 0 评论 -
Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)
1. 实现效果以get方法向http://192.168.32.12:8080/users 发起请求、获取数据并进行处理this.apiGet('/users', {}) .then((res) => { console.log(res) }, (err) => { console.log(err) })2. 实现步骤一之配置域名前缀2.1...原创 2018-03-27 11:08:21 · 13029 阅读 · 10 评论 -
Vue:踩不完的异步之坑
Js 的异步确实完美地解决了单线程的问题,但是同时也会带来许多问题。而且随着用的框架越来越多,越来越复杂,定位问题的难度也随之上升。不知为什么,总觉得Vue 的断点调试相比于不使用框架的情况下更难用,这可能也是花了一个小时才找到问题产生的根源的原因。废话少说,以下便是问题产生的全过程以及查找问题的流程与逻辑梳理。1. 任务需求分析1.1 两个页面,两个组件任务需求涉及到两个页面和两个组件之间的恩怨...原创 2018-04-14 18:24:57 · 10474 阅读 · 0 评论 -
Vue: 打开弹框的正确姿势
1. 技术选型Vue + ElementUI2. 需求功能分析点击按钮,出现弹框。点击取消或者弹框右上角叉号,关闭弹框。3. 组件树结构4. 实现思路 4.1 方案一 (wrong)用户点击MainContent触发点击事件MainContent通知父组件显示弹框this.$emit('showAlertModal')父组件接收通知并改变showAlert...原创 2018-03-23 23:54:48 · 42503 阅读 · 6 评论 -
Layui:设置select下拉框自动选中某项
1. 需求场景分析用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A。在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值。2. Layui的select下拉框是怎么实现的为了获得一个select标配的下拉框,我们需要在html中填写的内容如下:<div class="layui-form-item"> <la...原创 2018-03-04 17:30:28 · 68004 阅读 · 34 评论 -
微信开发:Cookie在前端写还是后端?
做微信开发,要分辨用户,不可避免地就要涉及到cookie操作,那么cookie到底是在前端写还是在后端写,各有什么优势和缺点呢?今天咱们就来讨论一下,以完整的微信授权过程为例。1. 前端写cookie前端写cookie对前端理解整个项目的逻辑来说有很大的帮助,也更符合惯性思维,我想要获取用户的信息,那么就把用户的id提供给你。优势:前端逻辑清晰,容易理解 缺点:不安全,cookie可...原创 2018-03-09 13:36:45 · 11278 阅读 · 1 评论 -
微信开发:如何提高测试效率
1. 微信开发的特点可以直接获取用户信息2. 为什么能拿到用户信息?因为是花300元认证的企业服务号,而且只能拿到昵称,头像等普通信息,拿不到微信号,手机号等敏感信息。3. 获取用户信息流程3.1 微信授权获取用户信息的流程进入页面先判断用户是否已经进行授权 如果没有授权,则将页面跳转至微信授权页面:https://open.weixin.qq.com/connect/o...原创 2018-03-01 10:24:56 · 304 阅读 · 0 评论 -
Vue: 批量更新操作实现与踩坑记录
1. 功能需求从后端获取到的房间列表包含房间号、房间类型、房间人数、性别四个参数。用户在列表中可以修改任意记录的任意参数,点击保存修改的时候将修改提交到服务器,实现批量更新。2. 组件树结构Page|--LocationText|--SideBar|--MainContent |--HeadLine |--RoomUnit(一个单元包含一条完整的记录...原创 2018-04-03 14:56:48 · 5096 阅读 · 0 评论 -
面经:2018暑期实习腾讯一面(前端)
时间:2018年4月11日上午9点地点:广州市天河区圣丰索菲特大酒店面试官:感觉比我大不了几岁的小伙子,很有眼缘,人还不错问题深度:★ ★ ★问题广度:★ ★ ★ ★面试官友好程度:★ ★ ★ ★综合难度:★ ★ ★一、自我介绍没啥好说的二、 项目(根据项目进行提问)1. 最近的一个项目,使用的技术栈,你在项目中担任的角色?老人院管理系统,Vue + ElementUI + Stylue,技术选型...原创 2018-04-11 12:36:59 · 1823 阅读 · 4 评论 -
Egret:一个简单的打砖块游戏
花了三天时间学习Egret 并做了一个简单的demo,是我以前超喜欢玩的打砖块游戏,嘿嘿~功能目前还比较简单,以后有时间再继续完善。因为写JS 的时候比较少会接触OOP 思想,所以在写的过程中还是花了不少时间来试错。这篇文章一方面是重新梳理思路,一方面可以在以后做其他东西时再来翻阅。1. 为什么是Egret?因为真的很赞,是现在市面上应用最广的H5 游戏引擎,而且会提供很多辅助类工具,去官网看看吧...原创 2018-04-29 16:43:39 · 3762 阅读 · 0 评论 -
NodeJs: 上传图片到服务器
信息爆炸的时代,获取到信息的门槛大大降低,但同时也加大了我们理解信息的难度。针对某一个问题,网上会有关于这个问题的好多篇博客或文章。但是翻过一遍后会发现,这些文章中去掉全文都是代码、什么解释也没有的,复制粘贴的,使用各种不必要的框架解决问题的,描述逻辑混乱的,再去掉排版不好看着不舒服的,之后也没几篇能看的了。每个人似乎都在想要提供一个解决方案,但是描述问题的时候能否按逻辑来,一步步走,代码加点注释...原创 2018-05-02 13:22:06 · 19046 阅读 · 0 评论 -
Vue:细粒度动态权限管理解决方案
权限管理是每个后台管理系统都需要面对的问题。细粒度动态权限管理更是一个不太好啃但是必须解决的硬需求。本文记录了一种基于角色的动态权限管理方法,实现方法不是很优雅,如果以后发现了更优雅的方法再来更新。该方法使用了vuex 作为辅助,所以如果还没有接触vuex 的请移步:Vuex: 实现同级组件的简单通信接下来主要从权限设置(设置角色权限)和权限限制(限制没有权限的人访问不到相应的内容)以及团队w...原创 2018-04-22 12:13:32 · 10250 阅读 · 5 评论 -
面经:2018暑期实习腾讯二面(前端)
时间:2018年4月12日下午2点地点:广州市天河区朋福喜来登大酒店面试官:三十多岁的中年人,让我很有压力问题深度:★ ★ 问题广度:★ ★ 面试官友好程度:★ ★ 出其不意程度:★ ★ ★ ★ 综合难度:★ ★ ★ ★ 一、面试前面试之前一直在思考这个问题,感觉一面问的知识点广度还是可以的,二面很可能会加深深度,所以也是临阵磨枪的准备了不少“知识”和应对策略,结果...知道真相的我眼泪流下来。二...原创 2018-04-12 16:55:03 · 1376 阅读 · 2 评论 -
Vue-router:路由嵌套及index.js 文件拆分
1. Vue-routerVue-router 是为了配合Vue.js 构建单页面应用而存在的,在使用方面,我们需要做的是,将组件映射到路由,然后告诉Vue-router 在哪里渲染它们。具体教程请移步:https://router.vuejs.org/zh-cn/essentials/getting-started.html. 因为文档中对于嵌套路由的描述不是特别契合应用场景,所以这里重新梳理一...原创 2018-04-17 21:09:18 · 19694 阅读 · 0 评论 -
Vuex: 实现同级组件的简单通信
1. Vuex 是什么?Vuex 是专门为Vue 组件化思想带来的组件间通信问题提供的解决方案,主要解决以下两个问题:多个视图依赖于同一状态 来自不同视图的行为需要变更同一状态2. 核心概念State: 可以简单理解为Vue 维持的全局变量(状态)。 Getter: 获取State 中的状态的方法,可以在取出前对数据进行二次处理。 Mutation: 是改变State 中的状态...原创 2018-04-04 19:07:37 · 2384 阅读 · 0 评论 -
FullCalendar: 动态获取数据
项目中需要用到日历插件,在进行一番比较之后选择了FullCalendar,但是看官方文档的过程中发现文档写得不是很友好(也可能是国人跟老外的思维方式不同,哈哈哈...),所以花了不少时间来完成自己想要的功能。FullCalendar请自行安装,项目中涉及的功能如下:1. 从后台获取数据并按数据状态显示不同背景颜色关键点:将ajax请求插入calendar 的初始化代码中,将返回的数据转化为...原创 2018-03-29 12:37:09 · 17520 阅读 · 6 评论 -
NodeJs: 制作mock数据
1. 什么是mock数据?mock测试是指在测试过程中,对于某些不容易构成或者不容易获取的对象,用一个虚拟的对象来创建一边测试的测试方法。(来自百度百科)系统开发中的mock数据就是指前端开发人员模拟后端接口,自行获取需要的数据。(自给自足)2. 为什么要使用mock数据?使用mock数据可以在后端开发人员尚未完成接口编写的情况下实现js完整逻辑的编写,与nodeJs的特性类似,我...原创 2018-03-08 11:31:05 · 5588 阅读 · 1 评论