Web应用中解决问题的方案步骤?
我们学一个东西,通常两个目的:
- - 为了解决现有的问题
- - 为了解决将来可能会有的问题
所以,在学这些东西之前,先必须了解,它们是用来解决什么问题的。
在Web应用中,我们需要解决的问题可以归纳为三类:
- - 状态
- - 组织
- - 效率
状态
什么是状态?
在一个业务界面中,我们可能会根据某些数据去生成一块界面,然后通过界面上的某些操作,改变一些数据,从而影响界面的另外一些部分。
这里面就存在两种关系,一种是从数据到界面,一种是从界面到数据。能够描述界面当前状况的数据,就可以被称为状态。
如果不对状态作抽象,很可能会导致逻辑的混乱,比如说,一个地方点了,要改多个地方,这种代码直接写,很容易写乱的,所以,不同的框架采用不同的方式进行了处理。
组织
所谓组织,指的是两个方面,一方面是模块关系,另一方面是业务模型。
我们是怎样解决模块关系的呢?共识就是组件化
整个应用形成倒置的组件树,每个组件提供对外接口,然后内部只关注自己的实现。这些东西说起来简单,但实际做的时候还是有非常多需要考虑的东西,包括组件的定义,约束,管理,测试等等
业务模型又是指什么呢?
我们提到React的时候,就会听到Flux,Redux之类的东西,为什么又要有它们呢?我们必须认识到,脱离了这类东西,纯上层的组件化是不牢固的,如果你感受不到,只有一个原因:你的项目的业务层太薄。
业务模型指的是所处领域中的业务数据、规则、流程的集合。即使抛开所有展示层,这一层也是应当要能够运作起来的。
那么,这跟Redux之类又有什么关系呢?
刚才提到组件化,整个应用形成了一个组件树,组件之间可能会需要通讯,它们通讯的内容可能是简单的界面事件,也可能是业务含义较深,能够牵一发而动全身的。
界面是怎么来的?
是由初始界面加上状态形成的,为了能够反映界面的变化,我们必须使得对业务模型的每一个变动都反应到确切的状态,所以,这也就是Redux这类东西的意义所在。
所以,没有Redux之类辅助方案的React,是不完整的。而Redux本身,也不是局限到只能作为React辅助方案的,它的理念,对于Angular,Vue,照样是非常重要的补充。
在同一业务场景下,对于每个框架来说,数据模型层面临的问题都是一样的,在这一层并没有任何分别。
当他发现FP,FRP之类编程模型的时候,会非常喜欢,但对于大型项目,需要很多人协作的状况来说,不一定是好事。
用面向过程,面向对象的那些方式,虽然笨重,但好处是门槛低,符合大多数人的理解和思维方式,并且可以复用几十年积累的各种设计模式和经验。所以,如果不是小而精悍的团队,我对引入FP和FRP都是比较保守的。
很多人吐槽Angular大而全笨重,吐槽React全家桶,但其实世界上大部分人是没有框架整合能力的,小而美的库最后整合了,在面临各种业务需求之后不断引入新模块,也还是一个大而全的方案。在绝大部分场景下,还是有一整套标配模块比较好。
效率
效率也分两种,一种是开发效率,一种是运行效率。
组件化,这是提升开发效率的一种手段,在组件化这个点上,各路框架的组织方式大同小异,反正最终都是组件树。
具体到单个组件的实现上,我个人是倾向于MVVM流的,MVVM系的代码量会少一些,开发效率稍高一点。
运行效率的另外一面主要是创建和修改DOM,在创建上,大家是没有太大差异的,而在修改DOM的时候,React首创的虚拟DOM有很大优势,所以其他框架内部实现也在逐渐借鉴。
Web应用中解决问题的方案步骤?的更多相关文章
- 使用BaiDu Java Script Web Api 在Web开发中嵌入地图使用步骤
前言 很多做企业网站的朋友,都喜欢有一个关于我们.联系我们的栏目,那么这个栏目放什么内容才能饱满那,只有放个地图才显得有点高大上. 一.产生并复制访问Api的密钥(AK) 1.首先我们需要注册一个百度 ...
- 【Web】Web开发中的异常处理方案
我认为最合理的做法: 1.dao层不捕获异常.不抛出异常:spring框架将底层的数据库checked异常封装成unchecked异常了 2.service层捕获异常,并抛出自定义unchecked异 ...
- ASP.NET Core Web API中使用Swagger
本节导航 Swagger介绍 在ASP.NET CORE 中的使用swagger 在软件开发中,管理和测试API是一件重要而富有挑战性的工作.在我之前的文章<研发团队,请管好你的API文档& ...
- web.config中sessionState节点的配置方案
web.config中sessionState节点的配置方案 web.config关于sessionState节点的配置方案,sessionState有五种模式:Custom,off,inProc,S ...
- Web开发中,页面渲染方案
转载自:http://www.jianshu.com/p/d1d29e97f6b8 (在该文章中看到一段感兴趣的文字,转载过来) 在Web开发中,有两种主流的页面渲染方案: 服务器端渲染,通过页面渲染 ...
- 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践
提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...
- 高访问量WEB开发中的架构模式,学习从点滴开始
当一个Web系统从日访问量10万逐步增长到1000万,甚至超过1亿的过程中,Web系统承受的压力会越来越大,在这个过程中,我们会遇到很多的问题.为了解决这些性能压力带来问题,我们需要在Web系统架构 ...
- WEB打印的几种方案
-------------------------------------------一 基于Web的打印方案比较分析-------------------------------- 基于web的套 ...
- ASP.NET Web API中的JSON和XML序列化
ASP.NET Web API中的JSON和XML序列化 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok ...
随机推荐
- hdu2243
背单词,始终是复习英语的重要环节.在荒废了3年大学生涯后,Lele也终于要开始背单词了.一天,Lele在某本单词书上看到了一个根据词根来背单词的方法.比如"ab",放在单词前一般表 ...
- BZOJ 1084DP
1084: [SCOI2005]最大子矩阵 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2796 Solved: 1391[Submit][Sta ...
- Nginx 运维(安装与使用)
Nginx 运维(安装与使用) 普通安装 Windows安装 (1)进入官方下载地址,选择合适版本(nginx/Windows-xxx). (2)解压到本地 (3)启动 下面以 C 盘根目录为例说明下 ...
- js常用 方法 封装
// 监听滚动,用于列表页向下加载--------------------------------- function loadmore(callback) { $(window).scroll(fu ...
- 搭建本地的yum仓库-较简单
1.创建目录安装软件程序 1.在/root路径下创建123.sh文件,把此文件复制到123.sh里, sh 123.sh2.首选安装nginx,作为web展示 3.强力清除老版本残留rpm -e n ...
- 题解 P6509 【[CRCI2007-2008] JEDNAKOST】
洛谷题目传送门!! 洛谷博客!! 这道题感觉是一个很另类的DP 至少我的做法是这样的. 重要前置思想:把A存成字符串!!! (应该也没人会想着存成int和long long 吧) 首先,我们定义状态 ...
- [CSS工具推荐]0001.推荐 10 个超棒的 CSS3 代码生成工具
引言:新的在线工具和 WebApp 帮助开发者快速地创建网站而不用写代码.前端开发已经在框架和代码库方面有了很大的进展. 现在许多开发者已经忘记了代码生成器在构建网站时的价值.下面的资源是完全免费的 ...
- JAVA中的注释方法
Java的三种注释方法 ①单行注释:使用 // ,其注释内容从//开始到本行结束,比较常用, 快捷键为:Ctrl + / 或者 Ctrl + Shift + C 取消注释:Ctrl + / 或者 ...
- unix 密码破解,zip破解总结
unix /etc/passwd 破解,假设的前两位是salt import crypt #数据比较 def password_crak(pass_word): salt = pass_word[0: ...
- ES6-Promise承诺
1.扩展:ajax 1.1 代码如下 $.ajax({ url:'地址', type:'get/post', data:{}, dataType:'json/jsonp', success:funct ...