前端路上－小专栏

前端路上

作者

refined-x

文章 29篇

售价

¥ 0

作者简介：
五年老前端，野生架构师；
独立技术博客《前端路上》作者；
公众号《编程之外TM》作者；

888d115be6d888da6258fc74b3cd6179

前端周刊：2020-16期

前端周刊：2020-16期前端开发谈谈验证能力调研是了解诉求，以及寻找可能的方案，而验证就是检验诉求及方案的可行性。 Chrome 85 稳定版发布，页面加载速度提升 10% Chrome发展太迅猛了。 g2plot ...

巨树：基于[ztree]封装的Vue树形组件，轻松实现海量数据的高性能渲染

vue-giant-tree 巨树：基于ztree封装的Vue树形组件，轻松实现海量数据的高性能渲染。为什么需要vue-giant-tree Vue的数据监听机制决定了在大数据量场景下的渲染性能非常低下，基于Vue实现的常规树组件几乎...

6333059491332d1c5542e7114230d62e

从Hexo文章置顶看需求分析思路

前端路上技术博客是基于Hexo构建发布的，最近需要给博客加上置顶功能，想来这种需求肯定早已经被前人充分“轮子”了，于是打开搜索引擎输入“hexo 置顶”，期望看到经过时间洗礼后整齐划一的“最佳...

6eff95ab8c35cf78a809464257482b4c

随手开源一个微信小程序仪表盘组件

一个微信小程序仪表盘组件最近在一个小程序项目中做了个动态仪表盘效果，感觉有点复用价值，就顺便给组件化了，丰富了几个常用配置，绘制元素根据尺寸自适应，差不多具备了一个自定义组件的基...

监听 Canvas 内部元素点击事件的三种方法

canvas内部元素不能像DOM元素一样方便的添加交互事件监听，因为canvas内不存在“元素”这个概念，他们仅仅是canvas绘制出来的图形。这对于交互开发来说是一个必经障碍，想要监听图形的点击事件思路很简...

92de0e173df9961885d21b980a247825

英文文档阅读套装

一个优秀程序员的成长过程中，读英文文档是迟早会遇到的槛，这个标志性的时刻往往出现在：我们从学习资源的消费者转变成资源输出者的时候或者在某个垂直业务领域走在同行的最前列的时候或者...

0c1a99fd49d94d0f4f03c22a0966e3c7

iBeacon蓝牙定位技术原理及实现

蓝牙定位是iBeacon技术最常被应用的方向之一，基于蓝牙定位可以实现诸如寻路、寻车、向导等很多商业需求，觅迹导航的定位系统也是基于iBeacon技术实现的。蓝牙定位又可以分为一维定位和二维定位，本...

Cac7bdaa7f60944efe2609a11aa06bb7

微信小程序 iBeacon 测距及稳定程序的实现

iBeacon是苹果公司推出的一项低耗能蓝牙技术，由蓝牙设备发射包含指定信息的信号，再由移动设备接收信号，从而实现近场通信。微信小程序2017年开始支持iBeacon，摇一摇附近就是基于iBeacon实现的，此外iB...

6772bd1032503f99793cd0f523ad1d80

给前端自学者的建议

自学可能是前端圈最主流的入行方式，因为较低的准入门槛，造就了近几年的前端热。越来越多的人想自学前端，但前端技术经过爆炸性的发展，如今早已不是当年那个HTML+CSS+Javascript打天下的时代了，这...

6b50aff01bd81da37995220b18a43efa

时隔两年，再次上手小程序开发

小程序开发框架经过两年左右的迭代，发展的越来越成熟和完善了，无论框架层面还是开发工具层面，体验都上升了一个层次，借《宝贝成长助理》这个项目的契机，总结一下在2019年这个时间点，小程序...

D0441d8214883b108c0f4ac9c530a0f4

前端检测修复 iOS 拍照旋转问题

苹果手机竖向拍照会为照片添加左旋90度的拍照方向，导致在网页中展示异常。前端解决这个问题需要提取图片的exif信息，并检测照片的拍照方向orientation，再通过canvas绘制图片并纠正旋转方向，最后输出...

Ae2d50ca07ee6e88e0e23084c29dbddc

HTML5实现文件读取、编辑、保存

最近自己捣鼓了一个好玩的项目觅迹导航，核心功能已经开发完成，后续会抽时间完善一下细节，并开放使用。做这个项目的过程中涉及到本地文件的读写，而且项目的定位不涉及兼容性问题，所以就直接...

基于 Vue 实现动态家谱图/组织结构图

Vue-Tree-Chart 最近一个项目里有个前端绘制家谱图的需求，大概是下面这个样子：点击节点会弹出操作菜单，实现增删改查等操作，查阅网上资料发现，现有案例基本都是基于orgchart这个jQuery插件实现的，...

HybridStart v1.2.0 更新日志

新增1. 插件机制 WEB代码无需编译，部署即可运行，因此可以很容易的实现热插拔插件机制，HybridStart内置了一个插件机制的实现DEMO，见示例APP首页“OTA-plugins(扩展插件)”。实现代码位于/views/ota/，额外引...

AJAX-Cache：一款好用的Ajax缓存插件

AJAX-Cache是什么 Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展...

Af80358fa8d1e3208127a52e4401c11a

前端页面热更新实现方案

前端页面热更新了解过前端性能优化的同学应该清楚，给页面加载提速的终极方案就是CDN，这是BS架构本身的特点决定的，无论什么前端提速手段，最终都会回到客户端文件的传输上来；与之相对的CS架构...

7688037b47fbcf32231ce7b0423baaea

如何用 Vue 实现前端用户权限控制

Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案，通过对路由、视图、请求三个层面的控制，使开发者可以实现任意颗粒度的用户权限控制。安装版本要求 Vue 2.0x Vue-router 3.x ...

Fd1fc1f84f64020cffa1d8b0c609a505

如何不用构建工具开发 Vue 全家桶项目

Vue是目前最流行的前端开发框架之一，与Vue-router和Vuex组成俗称的Vue全家桶，更是开发前端富交互应用的利器。配合webpack等构建工具，开发大型应用也可以得心应手。随着Vue的普及，可能一些老旧项目也希...

F3da8e292aa50e56fe22d2be0f242a86

RESTful 学习及应用

RESTful是什么 RESTful是一种API架构，符合REST设计原则的API都可以被称为RESTful，REST的全称是Representational State Transfer。 REST的核心原则是后端将资源发布为URI，前端通过URI访问资源，并通过HTTP动词表示要对资...

16c506682b06d8a6ea1cf7e6d31dd00a

2017混合应用开发现状

混合应用的概念是相对于原生应用而来的，也就是部分采用了web前端技术所开发的应用，曾经的混原之争也是相当热闹了一阵，如今已经尘埃落定，他们的各种利弊都经过了充分的讨论和验证，相信大部分...

93383e3c17c2093f52d19d22903f3eb9

基于APICloud的混合应用开发框架

接上一篇对各种混合应用开发方案的探讨，个人觉得现阶段最适合自己的还是以APICloud为代表的混合应用云平台，对于不懂原生开发的前端来说，其他方案的坑真的踩不起，为了让踩过的坑不再坑人，我将...

F6df4454005adbfdb30555cf953cbf65

纯前端实现人脸识别-提取-合成

最近火爆朋友圈的军装照H5大家一定还记忆犹新，其原理是先提取出照片中的面部，然后与模板进行合成，官方的合成处理据说由天天P图提供技术支持，后端合成后返回给前端展示，形式很新颖效果也非常...

52b472599f1e30571c2861a6de749c78

用 addRoutes 实现动态路由

之前在基于 Vue 实现后台系统权限控制一文中提到路由权限的实现思路，因为不喜欢在每次路由跳转的 before 钩子里做判断，所以在初始化Vue实例前对路由做了筛选，再用实际路由初始化 Vue 实例，代价是登...

D3a5000271bee8a1e9f62e06bec5c1fc

基于Vue实现后台系统权限控制

写在前面本文中的菜单权限控制方案由于没有使用router.addRoutes()实现动态路由，需要将登录页独立出来单独做，基于相同思路的动态路由方案参见]用addRoutes实现动态路由。正文用Vue这类双向绑定框架做...

Ea96e22dd7d9565dc20f9e6a69b69f30

小程序上手指南

这是一门微信小程序入门课程，通过学习本节课程可以使你快速上手小程序开发，在学习这门课之前，需要你先具备基本的前端开发能力，包括html/css/JavaScrip，起码你得会切图，了解js语法。为什么学习小...

2a09cb62a3d06b2fa2dd04ae0b5dd6d6

混合应用页面打开速度优化

我们都知道混合应用的流畅性不如原生应用，除了不能像原生一样轻松驾驭各种狂拽酷炫的效果，混合应用还有一个难以消除的弱点在于页面打开速度上，如果有机会在同一台手机上直接对比的话，这种差...

Fdbf8959f6211472e131a480181fc1bc

Webpack是答案吗

webpack刚出现时gulp如日中天，现在webpack更新到2.x版本，gulp逐渐淡出我们的视线，聊webpack的人越来越多，直到最近发现Vue官方文档里到处都是基于webpack的讲解，仿佛webpack已经成为了打包器的事实标准，作...

744c35f942727981bdec1d99229256e4

Vue 全家桶实践项目总结

从前端的角度看，Vue可以说是目前最理想的前端MVVM框架，一切为界面服务，上手难度低，本文就将记录使用Vue全家桶（Vue+Vue-router+Vuex）重构一个jQuery+template项目的过程，以及期间的收获。入门 Vue的官方...

22b578f1b6d0714d0638712738b53ada

Nodejs爬虫实践小记

Nodejs将前端开发语言移植到服务器端，如今一个前端开发者使用Nodejs很容易就能实现一个网络爬虫，这在之前是不可想象的，本文介绍一个简单的Nodejs爬虫的开发过程，只想看代码的直接拉到最后。爬取...