Atitit.web ui 组件化 vs mvc
Atitit.web ui 组件化 vs mvc
组件化 与 mvc并不矛盾。。单双方适用的地方有所不同。。
React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。例如,Facebook的instagram.com整站都采用了React来开发,整个页面就是一个大的组件,其中包含了嵌套的大量其它组件
每个组件都是自我继集成html,css,js的。。
在每一个组件的内部,才使用mvc分离core和ui。。
作者:: ★(attilax)>>> 绰号:老哇的爪子 ( 全名::Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ) 汉字名:艾龙, EMAIL:1466519819@qq.com
转载请注明来源: http://www.cnblogs.com/attilax/
对于MVC开发模式来说,开发者将三者定义成不同的类,实现了表现,数据,控制的分离。开发者更多的是从技术的角度来对UI进行拆分,实现松耦合。
对于React而言,则完全是一个新的思路,开发者从功能的角度出发,将UI分成不同的组件,每个组件都独立封装。
在React中,你按照界面模块自然划分的方式来组织和编写你的代码,对于评论界面而言,整个UI是一个通过小组件构成的大组件,每个组件只关心自己部分的逻辑,彼此独立。
React认为一个组件应该具有如下特征:
(1)可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;
(2)可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;
(3)可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;
React是基于组件化的开发,那么组件化开发最大的优点是什么?毫无疑问,当然是复用,下面我们来看看React中到底是如何实现组件的复用的,这里我们还写一个例子来说吧,代码如下:
许多框架使用Handlebars或Mustache等模板引擎来处理视图层。但React相信视图和控制器应该相互依存在一起而不是使用第三方模板引擎
React不孤立双向绑定,儿angru孤立。。
React的问题与缺点:
资料少
可视化模板不容易得到dw的支持。。作为模版,得到类似dw 这类可视化Html ide的支持的是必须的。。
Atitit.web ui 组件化 vs mvc的更多相关文章
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了 1. React的组件化才是web ui部件的正确方向1 1.1. 组件化集成html ,css ...
- atitit.web ui 结构建模工具总结
atitit.web ui 结构建模工具总结 1. 王者.dreamweaver 1 2. Frontpage/SharePoint Designer(FrontPage) 2010... 1 3. ...
- UI组件化介绍
组件化相关概念 怎么理解组件化开发 https://www.cnblogs.com/zs-note/p/7093323.html 前端组件化框架之路 https://blog.csdn.net/hap ...
- 前端web应用组件化(一) 徐飞
https://github.com/xufei/blog/issues/6 Web应用的组件化(一) 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也 ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- 推荐使用Tiny Framework web开发UI组件
TINY FRAMEWORK 基于组件化的J2EE开发框架,from:http://www.tinygroup.org/ 名字 Tiny名称的来历 取名Tiny是取其微不足道,微小之意. Tiny ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- vue组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
随机推荐
- Entity Framework 6 Recipes 2nd Edition(13-4)译 -> 有效地创建一个搜索查询
问题 你想用LINQ写一个搜索查询,能被转换成更有效率的SQL.另外,你想用EF的CodeFirst方式实现. 解决方案 假设你有如下Figure 13-6所示的模型 Figure 13-6. A s ...
- C# - 缓存OutputCache(一)基础配置
本文是通过网上&个人总结的 1. 介绍 OutputCache输出缓存是复制ASP.NET页面,保存在内存的机制.这种行为有助于提高性能,通过返回的缓存达到网页及时响应的目的,减少客户机器需要 ...
- xcode8.1 插件失效的问题
1,查看 Xcode 插件安装目录 ~/Library/Application Support/Developer/Shared/Xcode/Plug-ins 鼠标点一下桌面, command+shi ...
- Android笔记——Bundle类的作用
Bundle类用作携带数据,它类似于Map,用于存放key-value键值对形式的值.相对于Map,它提供了各种常用类型的putXxx()/getXxx()方法,如:putString()/getSt ...
- Eclipse中文语言包安装和设置中文Doc
1.安装中文语言包 Eclipse所有的扩展功能都是以插件的形式添加上去的,安装插件时有多种形式,下面是比较常用的两种: 直接将插件中的文件复制到Eclipse对于的目录中.优点是安装时很方便,缺点是 ...
- C# 复制PDF页面到另一个PDF文档
C# 复制PDF页面到另一个PDF文档 有时候我们可能有这样一个需求,那就是把PDF页面从一个PDF文档复制到另一个PDF文档中.由于PDF文档并不像word文档那样好编辑,因此复制也相对没有那么容易 ...
- android 视频录制 混淆打包 之native层 异常的解决
原文地址:http://www.cnblogs.com/linguanh/ (滑至文章末,直接看解决方法) 问题起因: 前5天,因为项目里面有个类似 仿微信 视频录制的功能, 先是上网找了个 开 ...
- 《PDF.NE数据框架常见问题及解决方案-初》
<PDF.NE数据框架常见问题及解决方案-初> 1.新增数据库后,获取标识列的值: 解决方案: PDF.NET数据框架,已经为我们考略了很多,因为用PDF.NET进行数据的添加操作时 ...
- Oracle 故障处理总结
Oracle 故障处理总结(更新中..) 各类数据库问题描述模板 记录一则ORA-00054,ORA-00031解决过程 记录一则ORACLE MOVE操作后重建索引过程被强制中断导致的ORA-810 ...
- 探寻<a>中的href和onclick
一.知识点: onclick的方法参数必须加引号 href跳转参数有长度限制 href中执行js会把encodeURIComponent()编码之后的东西自动解码,有时会影响参数传递 a标签中的onc ...