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://blog.csdn.net/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的支持的是必须的。。

转载于:https://www.cnblogs.com/attilax/p/5963395.html

Atitit.web ui  组件化 vs  mvc相关推荐

  1. 爱奇艺知识WEB前端组件化实践

    组件化作为一种开发模式,其在代码复用,提高开发效率上的效果被广泛认可.组件化思想适用于移动端.Web前端.PC端.TV端等多种类型的客户端和前端开发. 本文主要讲述爱奇艺知识 WEB 前端团队如何结合 ...

  2. Web UI⾃动化测试平台,专治Web 的各种疑难杂症。

    Web UI⾃动化测试平台,专治Web 的各种疑难杂症. • Totoro - https://github.com/totorojs/totoro • Dalekjs - http://dalekj ...

  3. XCoreRedux框架:Android UI组件化与Redux实践

    XCoreRedux框架:Android UI组件化与Redux实践 @author: 莫川 https://github.com/nuptboyzhb/ XCoreRedux源码+Demo:http ...

  4. LuLu UI - 腾讯阅文集团出品的“半封装” 开源 Web UI 组件库,特点是面向设计、简单灵活、支持 Vue

    阅文集团前端大神张鑫旭的团队出品的面向设计的前端 UI 组件库,上手简单,定制性强. 关于 LuLu UI LuLu UI 是一款面向桌面端和移动端网页开发的组件库,由阅文集团前端团队出品.阅文集团由 ...

  5. WeUI:专为开发微信HTML5应用的开源Web UI组件库

    概述 WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog.toast.article.icon等各式元素 ...

  6. Vue Element UI 组件化 之 背景图组件

    step1:创建背景图组件 bg.vue 该组件实现: 1.背景图可以自适应屏幕宽度(高度足够适应,不考虑高度) 2.背景图位置固定,不会产生滚动条 3.背景图高度足够高(1920*4092),可以自 ...

  7. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  8. Vue.js组件化开发实践

    Vue.js组件化开发实践 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...

  9. VUE.JS 组件化开发实践

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...

  10. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

最新文章

  1. 什么是ThreadLocal
  2. HybridDB · 源码分析 · MemoryContext 内存管理和内存异常分析
  3. 向碳基芯片更进一步:台积电、斯坦福等联手开发碳纳米管晶体管新工艺,性能逼近硅元件...
  4. ExclusiveTouch
  5. php+cul+post,php curl封装类使用例子_PHP教程
  6. UIBezierPath 绘制正五边形
  7. springboot2.1.5集成finereport10.0过程中:手动安装本地jar包到maven仓库
  8. 函数返回结构体指针_9.3 结构体指针
  9. Lock和Synchronized区别
  10. ubuntu16.04中 启动 Error starting userland proxy: listen tcp 0.0.0.0:5900: bind: address already in use
  11. android绘图软件推荐,动漫绘画辅助软件有哪些-7款绘画软件推荐
  12. MPU9250调试笔记(融合磁力计计算Yaw)
  13. jq onclick 定义_jq中的onclick绑定事件
  14. curry化 js_Curry的js实现
  15. ES8(Java API Client)查询详解
  16. 基于SpringBoot的网上购物商场管理系统
  17. Mac连接Xbox控制器(手柄)
  18. 机器人操作系统ROS/ROS2(1)
  19. Word文档 替换功能
  20. 查找python安装路径

热门文章

  1. php中页面静态化技术,在PHP中实现页面静态化的方法有哪些
  2. c语言进度条窗口,【C语言】进度条实现
  3. 201903版的idea markdown无法预览的问题
  4. XMLHttpRequest的属性
  5. 【渝粤教育】10763k2_客户服务管理_21秋考试
  6. C++ 使用正则表达式拆分字符串
  7. MATLAB数组生成、引用
  8. 【5分钟paper】基于强化学习的策略搜索算法的自主直升机控制
  9. linux debug tools
  10. Kafka集成Kerberos之后如何使用生产者消费者命令