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