Stringzdq

上面11篇论述了主要的原理，作为最后一篇，我们主要论述单页面相比于多页面的灵活的部分，如何使用最原始的html，js，css发挥web的最大魅力。 单页面要比多页面灵活，拥有过场动画是它最直观的表现，并且页面切换不会出现白屏的现象。 在底层ReplaceProto对象中，专门设…

在平时中，经常会用组件来定义弹窗，因为弹窗可以用一个div元素浮在页面上。在事实上，弹窗可以简单也可以复杂，简单到只有一个标题，一个文本描述；复杂到可以和一个app一样，拥有前进后退，可以实现复杂业务逻辑。如果按照往常的思路，就会很难扩展。 类似提示框，它会停留在页面角落几秒，…

上一篇主要介绍了组件的原理，这一篇主要是举个例子，来说明组件的应用。 实现一个下拉刷新组件，当用户在某个区域将手指从上面往下滑动，这个组件就会出现，然后页面执行刷新操作。等刷新完，这个组件就会消失。 关于slot的例子，引入的a-btn标签，在home.html引入,slot的…

大量的业务代码和渲染代码混杂，业务更改导致页面显示不正常，调试会浪费很多的时间。 在市面有很多框架使用了mvvm的架构，通过数据驱动页面的更改，确实能解决部分问题，然而却引入了一大堆的定义数据格式代码，往往控制一个状态需要双倍的代码，且并没有发挥html的本质意义。 之前关于P…

html在前端一直被认为是最简单的，但又容易被忽略，在单页面开发中，通常被当作字符串保存在变量中，把它单纯作为一层渲染层来使用，但是，他拥有XML的结构，还拥有保存数据的功能。如果把相关的数据放在html上，而不是单独的在js中另外创建一个数据结构去存储，会大大减少js的代码量…

在传统页面中，每个url都是和页面绑定的，即使是单页面，也应该有这种习惯。因此我们把Page对象作为不同的url，通过页面的切换来更改url。url的变换代表着用户在该应用中的探索路径，用户可以随时的后退到上一个页面，或者前进到后一个页面。从上面的history篇章中，使用浏览…

就好像用户看到的都是由dom表现出来的，所有的业务处理都是在Page对象中处理的。如果业务越简单，创建的Page对象数量就会越少；如果业务越复杂，那么相对而言Page对象数量就越多（或Page实例对象就会越复杂）。 数据交互，将数据正确的放在dom元素中，并进行合理的前后端数据…

History处理是单页面一大难点，而且容易被开发者忽略，如果不看重这一块，做出来的项目很容易让用户觉得混乱，本人经常看到有些比较优秀的作品，在这个方面做的很一般。例如有以下细节处理: 用户进入首页，点击某个操作详情页面，在详情页面中点击进入更深的操作页面，做完后返回到首页。 …

App对象是一个核心的对象之一，它的目的是把一切业务逻辑之外的逻辑全部把它抽象出来，让业务代码集中于一个文件，这样有助于管理。假如我们把业务的处理算法分布到services文件夹中，处理业务的流程放在Page对象中。剩下的事情应该归属于App对象了： 文件管理，按需加载。上一篇…