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框架之单页应用的原理与实现(二)

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

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

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

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

web应用单页化的历史进程

1.传统web应用

单页这……

阅读更多

vue 移动Web应用前端路由跳转总结

一、当前页面 和 目标页面 之间不存在中间页面

例如:

壳子–> A –> B

【壳子为微信公众号、钉钉或者今日校园的应用菜单页面】

【A–>B代表先访问A页面然后在A页面跳转到B页面】

(1).如果在B页面点击后退按钮,希望能够回到当前页面A,那么从A–>B用push。

( 原理:使用push进行路由跳转会在浏览器历史记录栈顶加入当前页面的url,即在A页面使用push跳转到B页面后,浏览器历史纪录栈顶记录为A的url,因此在B页面点击后退按钮时,浏览器会从历史纪录栈pop出栈顶记录即A的url并且跳转到A页面 )

(2).如果在B页面点击后退按钮,不希望回到A而是直接返回微信……

阅读更多

在vue中使用饿了么mint-ui组件进行开发

本文介绍如何使用vue以及饿了么的移动端vue组件库mint-ui来开发一个简单的移动端页面。

简单介绍一下vue以及使用vue进行移动端开发

vue是一个javascript生态中的一员,是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。

现在一般vue这个名词往往和移动端开发一起出现,当然这并不代表vue只能用来开发移动端的web应用。可以这样理解,vue和jquery类似,都是基于javascript封装的便于开发者快速开发的前端框架。只不过现在很多移动端都使用……

阅读更多