算法 可配置过滤时间段的有效工时算法

今天分享一下进公司以来我做的最“恶心”的项目中用到的一个算法。

故事背景

之所以说这个项目恶心,是因为从接到需求的那一刻起我就觉得做完这个项目我可能就会被全公司研发人员的唾沫星子给淹没,而且这个项目还映射着一个从华为挖过来的一个高管在公司里的起起落落。

这个项目的全称叫“工时任务填报审批系统”。

项目的功能是员工每日进行工时填报,每天完成了哪些工作内容,每个工作内容用了多少工时,然后提交到直接部门领导那里审批,部门领导也需要填写工时,填写的工时也由其直属领导进行审批。然后每月统计出所有员工的有效工时(领导审批时如果认为你填报的工作内容不值得你填写的那么多工时,还可以扣你的工时。。。......

阅读更多

踩坑 JavaScript循环中的闭包引起的问题

关于for循环中的闭包问题,其实早在之前我学习闭包的时候,就看过不下两篇文章提到过了,算是一个很经典的问题了。

尴尬的是,当同事叫我帮忙看这个问题的时候,我虽然一眼就看出了问题产生的原因,但是却死活想不起来解决方法,没办法只好又去google了一下才解决。

所以今天额外写一篇采坑记录加深印象

问题描述

问题产生的原因就是在for循环中使用了闭包,导致了“出乎意料”的结果。

代码演示:

像上面这一份代码,目的是创建10个函数,每个函数都打印自己生成时的序号。

那么在写这一份代码的时候,心里肯定已经有这样的预期输......

阅读更多

sprite框架之完全体(包含最新版代码)(终)

从17年的12月,到现在18年的4月,历时5个月,spirte框架从一开始的一个简单雏形,慢慢变得强大起来。

从简单的require+Vue+VueRouter实现了框架的整体骨架,到后来和公司的前端部门一起配合实现了今日校园和微信的SDK初始化,再到跟公司的权限体系结合后实现的页面授权和按钮授权,再到游客模式,再到可配置的页面按需加载的实现,最后又实现了可配置的多入口应用实现,还支持了关于公司的对于移动应用的合并式二开扩展模式。

在这5个月的过程中,我踩了不计其数的坑,框架代码也改的面目全非,我想现在的sprite框架代码基本就代表了我现如今最高的前端水平了。

今天就在这里展示一下这五......

阅读更多

sprite框架之可配置的页面按需加载(六)

如果看过我之前的文章,你会知道我在sprite框架的时候,是把应用中的所有页面js文件一次性全部加载,然后再初始化Vue对象的。

在第一次初始化时就将所有的页面和组件准备好,这是典型的单页应用的做法。

这样做的优点:

  1. 在应用内部切换页面时渲染速度非常快。
  2. 由多组件构成的复杂页面的渲染效果是整体渲染,而不是分块渲染(比如先出现上面的组件再出现下面的组件)。

这样做的缺点:

  1. 当应用的规模比较庞大时,在初始化应用时请求所有的js文件会影响应用的加载速度。
  2. 加载所有的页面,即使用户并不需要访问的页面,这会造成额外的流量消耗。

虽然以目前的网络速度和用户的平均的流量值,这些缺点并不造......

阅读更多

Vue 在使用异步Ajax时mint-ui的懒加载组件InfiniteScroll存在的坑

mint-ui是饿了么提供的一套vue移动组件,使用起来还是很方便的。

其中有一类组件是用于分页加载数据的,比如Infinite Scroll和Loadmore这两个组件。

最近同事在使用Infinite Scroll实现数据分页懒加载时,遇到了一个奇怪的坑,我花了不少时间才定位出来原因,今天就写到博客里记录一下避免以后再次踩坑。

先来看看Infinite Scroll的介绍:

Infinite Scroll的主要属性为v-infinite-scroll和infinite-scroll-distance,v-infinite-scroll为触发加载时执行的函数,infinite......

阅读更多

sprite框架之web应用鉴权以及页面、按钮授权(五)

这篇文章介绍web应用鉴权,session一致性问题,还有sprite框架是如何与我们公司现有的web应用授权体系结合起来,从而实现页面授权以及按钮授权。

1.web应用鉴权

所谓web应用,就是基于http协议的已应用形式展现的web站点。既然是基于http协议,那就要知道http协议是一种无状态协议。

无状态协议意味着什么呢?比如你访问一个同一个网站的A页面和B页面,其实网站的服务器并不知道访问A页面和访问B页面的人是你,它只知道“噢,刚才发来了两个http请求,一个请求A页面,一个请求B页面”。http协议是基于tcp协议的,所以每次请求经过“三次握手”和“四次挥手”后,就和网站切......

阅读更多

JavaScript 浅拷贝与深拷贝

这篇文章介绍一下js中的浅拷贝与深拷贝。

拷贝的意思就是把一个变量的值复制给另一个变量。

由于js中变量类型分为基础类型和引用类型,在对这两种类型进行copy时的结果会有截然不同的效果,因此在进行变量拷贝时需要多考量一下。

先简单的给浅拷贝和深拷贝下个定义:
浅拷贝就是复制一份对变量的引用,每个持有引用的对象都指向同一份内存空间,所以每个对象都可以修改内存空间中的值。
(就像几个人同时租了一套房子,房东给每个人都发了一把钥匙,有钥匙的人都可以进房子入住)
而深拷贝则是复制变量的值,对于非基本变量,则递归的为基本变量后再复制,复制完成后复制对象与原对象拥有不同的内存空间,因此修改复制对象将......

阅读更多

sprite框架之通过require.js实现VueRouter对象的动态生成(四)

上一篇sprite框架的文章介绍了如何通过require.js来实现javascirpt的模块化开发。

本篇文章主要介绍如何通过require.js的模块化能力来实现VueRouter对象的动态生成,这也是实现sprite框架的最核心的思想。

VueRouter是什么?

之前的文章里有提到过VueRouter是一个基于vue的前端路由框架,先来简单介绍下VueRouter。

VueRouter的主要作用是通过一些配置,将一个个前端url路径(即hash路由)映射到一个个vue对象上去,并且监听前端的路由变化,找到当前路径对应的vue对象来进行页面渲染以及业务逻辑控制。

要想构造一......

阅读更多

vue是如何实现双向绑定的

用过vue的开发者肯定都暗爽于双向绑定带来的便利,但是就像那句话说的一样

哪有什么岁月静好,只是有人替你负重前行。

虽然我们用的方便,那可是vue辛苦换来的。

这篇文章就来简单介绍一下vue是如何实现双向绑定的。

vue的双向绑定是通过数据劫持来实现的,而数据劫持的核心方法则是javascript语法中的Object.defineProperty()来实现的。

Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

defineProperty的语法为:

Object.defineProper......

阅读更多

sprite框架之js模块化(三)

最近真是好偷懒!
距离写出上一篇文章已经隔了快一个月了,真是懒癌晚期患者。

因为下周二在公司里我有一个移动web应用的开发经验分享,向其他业务线介绍我们部门最近关于开发移动应用的经验,所以要在这周把ppt给写出来。

我打算趁这个机会先把sprite框架的系列博文写完,然后再从博文里面提炼出ppt里需要的文字,这样就一举两得啦。

之前关于sprite已经写了两篇文章,分别是sprite的由来和sprite单页的实现原理。

今天就来讲讲sprite框架中关于js模块化的实现。

模块化

先来简单的谈谈我对于模块化的理解。

虽然模块化是一个非常普通和基础的概念,但我觉得这其实是程......

阅读更多