资讯专栏INFORMATION COLUMN

最近想通的几个单页面应用开发的重点

yibinnn / 1410人阅读

摘要:老实说我不是第一次想歪了而且很慢总是不能很快抓住要点当别人用后端从做博客做论坛联系完成的应用的时候我跑去学单页面应用还很久挣扎在的思路当中我想说的是走大多数人走的路的确是可以减少浪费的时间和错误的走少数人在的路当然也刺激的我最近才明白原来前

老实说我不是第一次想歪了, 而且很慢, 总是不能很快抓住要点.
当别人用后端 MVC 从做博客做论坛, 联系完成 MVC 的应用的时候
我跑去学单页面应用, 还很久挣扎在 jQuery 的思路当中
我想说的是, 走大多数人走的路的确是可以减少浪费的时间和错误的
走少数人在的路, 当然也刺激的..

我最近才明白, 原来前端用 MVC 的思路, 和后端 MVC 基本还是一致的
而且, 后端通过拆分模块来降低复杂度的手段, 还是非常基础实用的
熟悉后端框架大概理解 Backbone 容易得多, 至少在模型和 View 的关系上
下面是我最近开发思考和遭遇到的(不能说完善, 但比之前清晰不少了):

Model 是应用的核心

服务端渲染的应用, 前端原先是只有简单的 DOM 操作, 什么都没有
然而单页面应用本地将缓存大部分界面需要的数据,
而且, 这些数据在 Backbone 或者 MVVM 框架都是以 Model 形态存在的
因此, 所有内容都应当围绕 Model 中的数据进行设计

我说的是 View, jQuery 时期, 从 DOM 判断 DOM 状态作什么做什么很常见
但是在单页面应用当中, DOM 上的数据很容易成为逻辑混乱的来源
如果 DOM 上有数据, 就意味着代码中存在两份数据, 就需要进行状态维护,
而状态维护, 特别是手工维护状态的时候, 非常脆弱

Model 和 View 之间的操作围绕两种, 一种更新 View, 一种更新 Model,
注意, 两种操作如果被混杂在一个方法里调用, 将会埋下隐患,
我指的是 Backbone, 其中 Controller 混在 View 的方法里, 很容易写混
而 MVVM 之类框架明显自动刷新, 不会遇到这个问题

View 不能存储数据时, Model 里就要尽量存储全部数据了
MVVM 里有 ViewModel 的概念, View 的全部数据都是存在 ViewModel 里的
其实 Backbone 的 Model 相对数据库蛮像 ViewModel 的,
一些界面用到但是不会存在数据库的数据, 绑在 Backbone Model 上很正常的

共享 Model, 拆分 View

以前没有注意到这点, 但是最近慢慢就有这样的想法, 包括 Flux 加深了这样的思路
不说前端, 比如后端, 后端的数据库就可以看做是共享的, 所有代码都容易访问的
然后, 应用被拆分成各个 View, 每个 View 当中完成一块独立的工作
注意, 就是依靠这样, 拆分 View, 全局又只有一份数据, 应用的复杂度被拆开了"

Backbone 虽然分开了各种 Collection 和 Model, 其实很可能会被一起用
因为业务逻辑就是多个数据之间如何关联, 有如何相互发生更改
前端已经扮演了一部分服务端的数据处理的功能, 很大程度上服务端是为备份和同步
就像是 MVVM 双向绑定 View 和 Model, Meteor 绑定前后端的数据来加快开发

有个比较容易发生误解的是, 并不是写代码应该越写越少来提升整洁
而是在解决一个问题时, 尽量控制住代码的量, 避免處亂混乱,
这样的代价可能是, 因为被拆了多个子问题, 加上另外的问题, 代码总体可能更多
但这个多出的量很可能因为代码进行了封装更清晰了,
而且, 如果是在另一个文件中, 只有在那个文件清晰, 问题也不大了

架构尽量简单清晰

有时候想要架构干净像是一种洁癖, 自己都不清楚会不会苛求过了头
这边的重点应该是, 怎么写, 犯错的机会比较少?
因为开发当中, 可能别人会参与进来, 也可能某天工作累了忘掉事情,
因此代码细节处理上应该减少古怪的地方, 这些地方往往容易出差错

清晰的另一个好处是编辑起来更快. 这个很容易理解.
单页面开发当中, 除了样式, 交互的细节要考虑还是不少的
想要提升开发效率, 能改变的地方很少, 代码能直观尽量直观了
甚至有的地方, 清晰的代码其实只要拷贝到另一边编辑一下就好了
有条件的话, 用缩进语法减少敲键盘次数更保险, 因为这不干扰代码逻辑

开发工具的效率带来概念的改变

我因为 Angular 风格难接受, 是从 Ractive 和 Vue 开始用双向绑定的
用了 Vue 以后, 开发变快了, 同时对架构的理解跟着框架清晰起来
这中间, 我一直在用 Backbone 写代码, 对于 Backbone 的理解也清晰起来
两者对比, 我发现 Backbone 渲染页面的繁琐会影响我开发的速度,
比较烦的是, 因为频繁使用 DOM 操作, 我对界面的理解很难像 MVVM 那样清晰
我得到的结论是这种编码速度的减弱能直接影响到对代码的理解

抽象能力一直是编程极为重要的手段, 渗透在方方面面
特别是图形界面的编程, 目前重复的行为偏多, 特别需要能够抽象
当然, 这个很难, 用 Backbone 好处是足够灵活能借助 jQuery 解决各种问题,
而当我们想要借助比如说 MVVM 进一步抽象, 没准先要克服哪边新的问题

最近有个消息是 Chrome 36 将 ship Object.observe API 了
解决掉这个问题的话, Backbone 复杂的 Model 也许能简化
虽然其他浏览器还没看到支持的样子, 可是双向绑定的观念应该会推得更广

路由问题

关于路由, 我开始想错了, 我还想, Backbone 的路由能不能有子路由呢?
因为 View 发生嵌套时, 路由嵌套, 这种形态就跟 Sub View 相似了
结果到处理代码时, 子路由总是搞不定, 或许又是因为 Backbone 已经设定了场景
没想清楚, 但是将路由和 Model 一样放全局的确清晰一些了

另外有个问题, 首先, 路由更改时如果只是 trigger 子视图渲染这不难
但是路由另一个功能是, 页面打开时, 路由需要指挥 View 完成整个渲染
这个功能处理起来和前边的 trigger 视图重绘又不一样
特别是两个应该一致.. 代码写起来就想不到清晰的处理方案了...

Web 应用的生命周期

看了 Facebook 关于 Flux 的视频以后我觉得更清晰了
虽然我们用的是双向的绑定, 但是用单向的绑定去理解更清晰
View 固然是根据 Model 渲染的, 但是 Model 并不是跟着 View 更新而改变
View 的更新会成为事件, 被用户代码捕捉, 然后再去操作数据,
然后, 数据的改变触发 View 完成界面的更新.. 这个流程非常清晰

View 的更改自动更新回到 Model, 但是这里其实是 ViewModel
为了保存数据到服务器, ViewModel 的数据在编辑完成还是要往服务器发送的
目前这个发送步骤还是少不了, 因此双向绑定意义不是那么大
当然, 视图自动更新这一点的带来的好处是非常非常大的

还有, MVC 这里说的流程可都没把 Router 放进去说的..
Router 相当于保存了整个状态的一个 snapshot, 提供一个入口
这个入口要求代码能自由从指定界面启动.. 这个功能实现起来就不轻松
不过也好在 router 某种程度上类似 Model 中的数据, 问题还是乐观的

返回博客首页: http://blog.tiye.me/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78147.html

相关文章

  • 数据结构第一讲

    摘要:为什么要学习数据结构语言是相通的人们常说,编程语言是相通的,掌握一门,其他语言很容易就能掌握。其实,真正想通的不是语言,而是数据结构与算法。 为什么要学习数据结构 1.语言是相通的 人们常说,编程语言是相通的,掌握一门,其他语言很容易就能掌握。个人认为这是一个似是而非的观点,每门编程语言都离不开变量,数组,循环,条件判断这些概念,这似乎能支持上面的观点,但是每门编程语言都有自己的使用范...

    k00baa 评论0 收藏0
  • 数据结构第一讲

    摘要:为什么要学习数据结构语言是相通的人们常说,编程语言是相通的,掌握一门,其他语言很容易就能掌握。其实,真正想通的不是语言,而是数据结构与算法。 为什么要学习数据结构 1.语言是相通的 人们常说,编程语言是相通的,掌握一门,其他语言很容易就能掌握。个人认为这是一个似是而非的观点,每门编程语言都离不开变量,数组,循环,条件判断这些概念,这似乎能支持上面的观点,但是每门编程语言都有自己的使用范...

    wemall 评论0 收藏0
  • JAVA 中 CAS

    摘要:我们继续看代码的意思是这个是一段内嵌汇编代码。也就是在语言中使用汇编代码。就是汇编版的比较并交换。就是保证在多线程情况下,不阻塞线程的填充和消费。微观上看汇编的是实现操作系统级别的原子操作的基石。 原文地址:https://www.xilidou.com/2018/02/01/java-cas/ CAS 是现代操作系统,解决并发问题的一个重要手段,最近在看 eureka 的源码的时候。...

    CocoaChina 评论0 收藏0
  • Koa源码阅读笔记(3) -- 服务器の启动与请求处理

    摘要:本笔记共四篇源码阅读笔记源码阅读笔记源码阅读笔记服务器启动与请求处理源码阅读笔记对象起因前两天阅读了的基础,和中间件的基础。的前端乐园原文链接源码阅读笔记服务器启动与请求处理 本笔记共四篇Koa源码阅读笔记(1) -- coKoa源码阅读笔记(2) -- composeKoa源码阅读笔记(3) -- 服务器の启动与请求处理Koa源码阅读笔记(4) -- ctx对象 起因 前两天阅读了K...

    mrcode 评论0 收藏0
  • servlet和socket

    摘要:什么是维基百科上说,全称,未有中文译文。其主要功能在于交互式地浏览和修改数据,生成动态内容。从维基百科中可以看到,一般使用的是协议。响应内容动态生成,通常取决于客户端的请求服务器将响应返回给客户端。 最近在看教程的时候,又看到了servlet这个词,突然发现我好像并不了解他,只是‘有所耳闻’。所以决定学习一下。 什么是servlet 维基百科上说: Servlet(Server Ap...

    YorkChen 评论0 收藏0

发表评论

0条评论

yibinnn

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<