![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
基础框架
stringzdq
分享前端知识,共同成长,报效社会!
展开
-
12.其它细节
上面11篇论述了主要的原理,作为最后一篇,我们主要论述单页面相比于多页面的灵活的部分,如何使用最原始的html,js,css发挥web的最大魅力。动画,过场动画单页面要比多页面灵活,拥有过场动画是它最直观的表现,并且页面切换不会出现白屏的现象。在底层ReplaceProto对象中,专门设置了两个dom,一个dom作为放置当前页面,另一个dom放置切换页面。在切换过程中,通过两个dom的过渡产生过场动画。动画方式在css3中定义,然后根据情况进行不同的动画切换, 同时完成后退和前进两个过场进场动画,原创 2020-10-14 13:59:20 · 154 阅读 · 0 评论 -
11.弹窗原理详解
序在平时中,经常会用组件来定义弹窗,因为弹窗可以用一个div元素浮在页面上。在事实上,弹窗可以简单也可以复杂,简单到只有一个标题,一个文本描述;复杂到可以和一个app一样,拥有前进后退,可以实现复杂业务逻辑。如果按照往常的思路,就会很难扩展。在弹窗的日常使用中,主要有如下几个情况:类似广告弹窗,一直挂在页面上,除非用户手动点击关闭按钮;类似提示框,它会停留在页面角落几秒,然后消失。不管页面是否切换它都会在,没有手动关闭按钮;类似输入窗口,它会常驻页面上,往往会有个遮罩,告诉用户要把这个窗口完成了原创 2020-10-14 13:58:23 · 3017 阅读 · 0 评论 -
10.组件实战
序上一篇主要介绍了组件的原理,这一篇主要是举个例子,来说明组件的应用。案例实现一个下拉刷新组件,当用户在某个区域将手指从上面往下滑动,这个组件就会出现,然后页面执行刷新操作。等刷新完,这个组件就会消失。我们定义一个对象,放在组件配置数组中,在需要用到的时候加载,在/public/index.js加入代码在home.html中添加,对于组件获取,只能通过id然后在/public/component文件夹中加入以下目录文件在str-down-fresh.html加入如下代码在str-dow原创 2020-10-14 13:57:42 · 148 阅读 · 0 评论 -
9.组件原理详解
序在以往的日常前端开发中,使用最原始的html元素来拼凑整个页面,随着页面慢慢的复杂起来,如果还是用这种方式,就会出现以下问题:页面使用了大量的html元素,导致页面卡顿;维护页面困难,大量的html元素需要手动去更改;大量的业务代码和渲染代码混杂,业务更改导致页面显示不正常,调试会浪费很多的时间。在市面有很多框架使用了mvvm的架构,通过数据驱动页面的更改,确实能解决部分问题,然而却引入了一大堆的定义数据格式代码,往往控制一个状态需要双倍的代码,且并没有发挥html的本质意义。之前关于Pa原创 2020-10-14 13:56:59 · 527 阅读 · 0 评论 -
8.html模板引擎以及页面数据来源
序html在前端一直被认为是最简单的,但又容易被忽略,在单页面开发中,通常被当作字符串保存在变量中,把它单纯作为一层渲染层来使用,但是,他拥有XML的结构,还拥有保存数据的功能。如果把相关的数据放在html上,而不是单独的在js中另外创建一个数据结构去存储,会大大减少js的代码量。我非常追崇用最原始的html去构建页面,这样子可以构建最直接,最符合用户直觉的页面,而且是与框架无关的。然而使用纯html来构建复杂的单页面的模板就会非常的力不从心,根据数据和html模板来生成html的模板引擎技术就应运而出原创 2020-10-14 13:56:09 · 537 阅读 · 0 评论 -
7.Page与History的综合应用
序在传统页面中,每个url都是和页面绑定的,即使是单页面,也应该有这种习惯。因此我们把Page对象作为不同的url,通过页面的切换来更改url。url的变换代表着用户在该应用中的探索路径,用户可以随时的后退到上一个页面,或者前进到后一个页面。从上面的history篇章中,使用浏览器的提供的api可以很好的解决这个问题。然而在实际的使用中存在一个问题:比如用户从一个页面跳转到另外一个页面,然后后退到前一个页面,发现上一个页面并不是他之前访问的页面了,原因如下:后退到上一个页面,页面重新渲染时得到的数据和原创 2020-10-14 13:54:52 · 174 阅读 · 0 评论 -
6.Page对象详解
序就好像用户看到的都是由dom表现出来的,所有的业务处理都是在Page对象中处理的。如果业务越简单,创建的Page对象数量就会越少;如果业务越复杂,那么相对而言Page对象数量就越多(或Page实例对象就会越复杂)。Page对象主要做以下事情:渲染页面,保证dom元素的合理安排,以及事件的处理;数据交互,将数据正确的放在dom元素中,并进行合理的前后端数据交互。无论是在哪个时候,这两点确实是前端开发的重中之重,换一句话说这就是前端核心开发内容。为了让Page对象更加专注于上面所提的两件事情,原创 2020-10-14 13:52:50 · 4030 阅读 · 3 评论 -
5.History对象的原理和实现—路由设计
History对象的原理和实现—路由设计序History处理是单页面一大难点,而且容易被开发者忽略,如果不看重这一块,做出来的项目很容易让用户觉得混乱,本人经常看到有些比较优秀的作品,在这个方面做的很一般。例如有以下细节处理:用户进入首页,点击某个操作详情页面,在详情页面中点击进入更深的操作页面,做完后返回到首页。 这时候点击手机的后退键,又回到了上个操作界面, 原因如下:按照正常逻辑,从首页直接到操作页中间直接跳过详情页,对于操作逻辑是有问题的;如果操作页面有些数据是从详情页带过来的,直接从首原创 2020-10-14 13:47:57 · 471 阅读 · 0 评论 -
4.App对象的介绍和动画管理
序App对象是一个核心的对象之一,它的目的是把一切业务逻辑之外的逻辑全部把它抽象出来,让业务代码集中于一个文件,这样有助于管理。假如我们把业务的处理算法分布到services文件夹中,处理业务的流程放在Page对象中。剩下的事情应该归属于App对象了:文件管理,按需加载。上一篇已经做了介绍,后续弹窗,组件,页面管理都是一样思路;路由管理,单页面重要功能之一,下一篇介绍;动画管理,这一篇介绍;其它配置管理,比如版本号,缓存管理等。 这一篇介绍。需求假设已经有一个原型对象已经实现了路由管理Re原创 2020-10-14 13:44:19 · 166 阅读 · 0 评论 -
3.自定义事件
序上一篇提到了模块化的思想,并且引入了按需加载模块的技术。然而对于实现细节却没有讲解,因为按需加载有点复杂,如果不引入观察者模式的设计思想,就会比较难实现。使用观察者模式,我们实现dom事件类似的注册触发,这种方式可以很好的解耦,让模块间没有依赖。我们先讨论一下观察者模式是怎么回事,我们先引入几个场景:如果两个模块之间交互,通常我们用a变量和b变量引用,如果a更改了b的属性,可以通过代码b.property = someValue; 如果a要更改b的行为,那么可以通过b.doSomething();原创 2020-10-11 09:02:38 · 150 阅读 · 0 评论 -
2.模块化开发及按需加载原理
序随着web项目越来越复杂,排除掉外部引入的代码,开发的代码动辄上千过万行,甚至更多。按照最初的开发经验,我们把代码全部放在一个文件上,除了代码多以外,还有命名容易被覆盖,冲突等问题。 从管理上我们会选择把它分开若干个js,分成各种部分,每个js管理某些部分或功能。不同文件中的代码可能由不同的多个人开发,如果把变量都放在全局上,可能会造成变量被篡改,函数名冲突等问题。通常我们把每个分出来的部分,叫做模块,模块的编写每个团队都有自己的规范,为了更好的管理,进而引申出模块化开发,即把整个项目分成若干个模块,原创 2020-10-11 08:57:34 · 654 阅读 · 3 评论 -
1.框架概览
框架概览序就个人开发而言,当前的前端开发环境是一个比较混乱的状态。用户对产品要求的提高,技术为了满足用户的需求不断的进步,引入了很多专业性的知识,然而这点却不是阻碍web开发的门槛。每个入门开发者选择web开发,是因为它具备更多专业性,更多可能性,更多包容性。较高的门槛。学会并掌握了html,css,js,却不能做出主流的东西出来,个人觉得原因在于webapp的流行。各种框架的兴起,框架层互相竞争,引入专属于自己的知识,从而提高了门槛。各种框架自立门派,写法和思想理念互不兼容,与刚入门时学习的前原创 2020-10-10 15:31:35 · 240 阅读 · 1 评论