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协议的,所以每次请求经过“三次握手”和“四次挥手”后,就和网站切......

阅读更多

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模块化的实现。

模块化

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

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

阅读更多

sprite框架之单页应用的原理与实现(二)

这篇文章介绍我在实现sprite(移动端的单页web应用开发框架)的过程中,关于应用单页化的理解以及实现单页化的技术选型的思考和解决方案。

(ps: 本文关于单页web的原理介绍参考了这篇文章:单页应用开发权威指南 这是一本专门介绍单页应用的电子书,写的非常专业和深入,如果有对单页应用很感兴趣的同学建议收藏这个地址~)

(ps1: 如果嫌关于单页化的介绍比较啰嗦的话,可以直接跳到文章末尾,我在末尾介绍了sprite框架实现单页化的源码)

(ps2: 如果想直接看sprite框架的源码,请直接访问:sprite框架之源码篇)

web应用单页化的历史进程

1.传统web应用

单页这......

阅读更多

sprite框架之由来(一)

机缘巧合之下,我写出来了人生中的第一个框架。作为一个后端的研发写出来一个前端的框架,这是一次奇妙的体验,值得我记录下来。

17年年底我开发了人生中的第一个框架,是一个移动端单页web应用框架。为了纪念“这一伟大的壮举”,我家的大宝贝“雪碧”(我养的猫)表示愿意用她的英文名来为框架冠名。同时我家的小宝贝“咖啡”(也是我养的猫)叮嘱我再接再厉,以后要是再开发出新的框架,他可以考虑屈尊也为我冠冠名,对此我表示深感荣幸(鞠躬)。

好了,说正事:

sprite框架的由来

去年11月份的时候,组里的人一起开了个会,部门经理告诉我们到18年的3月底之前,需要产出接近30个移动web应用。......

阅读更多

sprite框架之源码(零)

sprite框架介绍

sprite框架是我自己编写的第一个框架,一个移动端单页web应用轻量级框架。

目前是面向我们公司的后端研发人员的,编写初衷想替代配置繁多,并且强烈依赖node进行调试打包和发布的webpack移动应用框架。

sprite框架的特点在于完全使用es5语法,不依赖于任何服务器,可以放在任意服务器上进行开发和调试,配置很少只需修改一个文件,并且不用打包,开发完成可以直接发布。

技术栈:
require全家桶+vue+vue-router+mint-ui(饿了么移动端组件)+axios+jquery+自己实现的vue路由递归解析器

require全家桶 负责全应用模块......

阅读更多