哪种UI框架比较好用
[问题点数：40分，结帖人u]
哪种UI框架比较好用
[问题点数：40分，结帖人u]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。您现在的位置： -->
--> 网站UI实现的8种方式
网站UI实现的8种方式
&&&&抛砖引玉，提出一些知道的做法，欢迎大家提出更多做法。
&&&&对于网站来说，UI最终的形式无非是（X）HTML + 脚本 + 样式，现在的问题是怎么样生成这些前端的元素，在以下几个方面达到平衡：
&&&&（假设有开发和前端两种角色，前端负责表现逻辑和表现，而开发负责业务逻辑和业务数据）
&&&&1） 开发人员的工作量，工作难度
&&&&2） 前端开发人员（后面省略为前端）的工作量，工作难度
&&&&3） 产品（假设前端属于产品部）对UI的改动需求能否快速落实（能否只依靠前端实现）
&&&&4） 服务端的压力（客户端的性能问题暂时不考虑）
&&&&（怎么发现自从翻译了《微软应用架构指南》之后，写什么都是翻译的口气了）
&&&&第一种方式：XML + XSLT
&&&&数据源是XML，由开发人员提供，XSL可以一开始由开发人员写，以后由前端参与开发和维护。
&&&&T的过程可以在服务端进行，优点是搜索引擎友好，缺点是服务端压力大。
&&&&T的过程也可以在客户端进行，和服务端进行的优缺点互反。
&&&&这种方式比较适用访问量大（特别是客户端进行T）、交互简单的系统，比如论坛，因为服务端只需要提供数据源，而XSL则是静态资源可以在客户端缓存。
&&&&这种方式的优点是，如果前端直接维护XSL，那么在开发不介入的情况下可以直接对页面布局等进行调整，并且可以做到最好的性能。
&&&&而缺点则是，学习成本比较大，如果在客户端进行转换那么搜索引擎支持会不好，而且XSL相对比较难以维护，实现复杂逻辑成本比较大。
&&&&第二种方式：ASP.NET Webform
&&&&最常见的方式，基于控件，由控件生成HTML，开发也可以直接操作服务端控件。这是一种开发人员主导的方式。
&&&&这是一种普适的方式，什么应用都可以支持。缺点是不太利于实现UI快速改动，前端很难参与aspx的维护，因为很多UI都是由控件进行，开发人员很可能在后端操作控件进行一些UI的修改。
&&&&第三种方式：纯粹的javascript + 服务端数据源
&&&&所有和呈现相关的逻辑，都由javascript来写（可以依赖jquery,jtemplate等组件），以AJAX方式从服务端获取数据进行数据的填充和一些业务逻辑的实现。
&&&&这是一种前端主导的方式，会写大量的脚本来实现逻辑，需要的数据从服务端获取。
&&&&这种方式比较适合前端互动比较丰富的应用，比如网页游戏。
&&&&优点是，前端对页面的布局、行为有很大的自主权，并且服务端的压力也比较小。
&&&&缺点是，需要写大量的脚本代码，难度大并且容易出错，并且容易出现安全问题。
&&&&第四种方式：模板引擎
&&&&模板引擎通过基于HTML的模板加上各种预定义的占位符来实现数据的动态填充。在保证了UI灵活性的同时也保证了非常高的性能。
&&&&这种方式对于需要有多界面的新闻系统、博客系统，甚至每一个版块布局都不同的论坛系统来说很适用。
&&&&虽然足够灵活，但是前端和开发的配合还是双向的，也就是前端还是需要知道开发提供的数据结构。
&&&&并且，对于交互比较复杂的应用来说，可能需要用模板引擎预定义的脚本来写很多逻辑，造成难以维护。
&&&&第五种方式：ASP.NET MVC
&&&&这同样是一种普适的方式，只不过更适用于面向互联网的网站,而不是面向局域网的内部应用。
&&&&虽然MVC已经在UI和UI逻辑方面实现了很好的分离，但是我觉得还是很难在开发没有介入的情况下直接对页面的布局等进行调整。
&&&&第六种方式：在服务端为HTML的适当位置动态注入数据
&&&&这是一种比较新颖的方式，在服务端加载HTML作为模板文件，然后写代码修改HTML中的dom元素，为元素填充数据。
&&&&比如一个a.html配合a.shtml，a.shtml（httphandler）加载a.html然后解析HTML文档，从数据库加在数据填充到HTML中，输出这个HTML。
&&&&前端提供的HTML文件可以直接使用，不需要加任何模板标签，不需要加任何控件，所有数据由代码填充进去。
&&&&可以像jquery一样支持各种方式来搜索数据的填充路径，也可以把一段html作为模板，循环复制成一个列表页面。
&&&&优点是，前端维护HTML/脚本/样式，开发人员写代码生成数据，填充数据，彻底的分离。
&&&&缺点是，前端不能改变一些涉及到路径的元素（比如我们通过className来定位元素，前端改变了className就不行），还有性能可能会差一点。
&&&&第七种方式：在服务端为HTML动态载入数据，在客户端注入数据
&&&&还是以HTML作为模板文件，只不过这个数据组装的过程在客户端进行，相比第六种方式有更好的性能。
&&&&也就是服务端不用解析HTML文档，直接为HTML文档中加上一个JSON数据片段，这些数据是这个页面需要的所有数据。
&&&&然后，在服务端使用等框架编译时生成填充数据到HTML的脚本，这个填充过程由客户端执行。
&&&&代码还是像第六种方式一样写，但是这段代码会完成两个工作，一个是把部分代码生成脚本文件，第二是把部分代码生成json数据写到页面上。
&&&&好像还没看到过有现成的框架是这么干的，难道这种方式不太实用？
&&&&其实演变一下的话，也可以是直接写脚本，不用ScriptSharp来生成，但是在服务端写的很大的一个好处是可以直接利用强类型的实体。
&&&&想象一下这样的伪代码：Document.FindElement("path").Fill(product.Take(10), product =& product.Name);
&&&&这样，product这个List的前10项就会以json输出在页面上，而定位元素以及赋值的代码也会以jquery/javascript代码输出在页面上。
&&&&优缺点和第六种方式一致。
&&&&第八种方式：由服务端生成HTML
&&&&这是一种比较极端的方式，所有HTML由代码生成，可以拼字符串也可以利用之类的框架。
&&&&适合UI随着业务逻辑变化非常大的流程系统，或者一些模板生成工具，不太适合业务系统。
&&&&本文转载自：
觉得文章有用？立即：
和朋友一起 共学习 共进步！
建议继续学习：
QQ技术交流群：，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
作者：&&&&来源：
发布时间： 18:58:23
建议继续学习
近3天十大热文
rightLowest
& 2009 - 2016只需一步，快速开始
扫一扫，访问微社区
查看: 557|回复: 2
求黑马UI班基础班全套教程一份
黑马币技术分主题
中级黑马, 积分 803, 距离下一级还需 197 积分
中级黑马, 积分 803, 距离下一级还需 197 积分
有个朋友想过段时间去深圳黑马学习UI设计, 因为她完全是个电脑小白, 在没去的这段时间想自己先照着课程学一些, 到时候也没那么吃力, 有教程的麻烦给我一份, 谢谢& &如果需要android教可以找我要, 我去年深圳android班毕业的
黑马币技术分主题
中级黑马, 积分 314, 距离下一级还需 686 积分
中级黑马, 积分 314, 距离下一级还需 686 积分
回帖奖励 +1
Java学科自学视频教程： /apply/21272.html，朋友您好，求分享安卓视频教程，谢谢
黑马币技术分主题
黑马UI入学基础 内有云盘地址 可直接下载
站长推荐 /4
传智·黑马论坛Andrid真正精华资源，受益Google-Andrid开发的大牛中级小菜鸟伙伴！一、精华级传智Android视频学习资源分享。二、Android新手篇入门分享。三、Android实战技术经验集。四、......
你还在游走于Baidu贴吧、Google找着各种各样的入门技巧以及视频吗，你还在为了各种各样的学习资料在某宝花着大量银子才发现最终收到的却是很多年前的教学视频与资料吗，—史上最详细全科视频持续发布，源码视频笔记+qq：167...
为了让更多的学员圆梦高薪就业；为了让更多学员不花费大量时间找资源；为了让更多学员打造成全能设计师；传智播客武汉中心，独家整理分享实体班同步视频+海量素材，打造年薪20W全能设计师！
作为男人，如果觉得职业看不到头，趁早换工作吧，如果不趁早，你会在以后的家庭压力中选择妥协，再也看不到头了，说学就学，不要想着看看怎么入门，最好的入门技巧就是动手。写程序你必要保持高度的专注，但是不能够疲劳过度地专注。
Powered by
Copyright &投诉建议、广告投放、友情链接，联系QQ：
10个顶级的CSS&UI开源框架
Loading...
随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我们更快更好地实现一些现代化的界面，包括一些移动设备的网页界面风格设计。本文分享了10个顶级的CSS UI开源框架，有几个确实不错，一起来看看。1、Bootstrap – 最流行的Web前端UI框架Bootstrap是由twitter推出的Web前端UI框架，它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。它使用了最新的浏览器技术，Bootstrap提供了时尚的排版样式，表单，buttons，表格，网格系统等等。官方网站：/2、jQuery UI - 基于jQuery的开源Javascript框架jQuery UI是一款基于jQuery的开源Javascript框架，jQuery UI框架主要提供了用户交互、动画、特效和可更换主题的可视控件，让开发者可以更方便地实现网页交互界面，jQuery UI的整个框架比较庞大，但你也可以根据自己需要使用的功能生成适合自己的框架底层。jQuery UI界面设计非常漂亮，值得一试。官方网站：/3、jQuery UI Bootstrap它是jQuery UI和Bootstrap的集成，它是Bootstrap样式的，因此外观比较漂亮，同时它拥有jQuery UI的控件功能，这也方便开发者快速地创建一个网页控件。官方网站：/jquery-ui-bootstrap/jquery-ui-bootstrap/4、BootMetro - Metro风格的CSS框架BootMetro是一款基于Bootstrap的前端UI框架，BootMetro的特点是可以很方便地构建类似Windonws 8扁平化风格的网页界面，效果非常不错。官方网站：http://aozora.github.io/bootmetro/5、Flat UI - 扁平风格 UI 工具包Flat UI是一套精美的扁平风格 UI 工具包，基于 Twitter Bootstrap 实现。这套界面工具包含许多基本的和复杂的 UI 部件，例如按钮，输入框，组合按钮，复选框，单选按钮，标签，菜单，进度条和滑块，导航元素等等。官方网站：/designmodo/Flat-UI6、网易CSS框架 NECNEC是网易推出的开源前端CSS框架，NEC提供了丰富UI代码库和插件，可以极大的帮助开发人员提高开发效率。即使你并非前端专业开发人员，利用NEC你也可以快速地构建属于自己的网页应用。官方网站：/7、Alloy UI – 功能强大的CSS UI框架Alloy UI是基于YUI 3的前段UI框架，包含一套丰富的（超过60）UI 部件，如图片库，对话框，树形结构，面板，自动完成，按钮，日历控件，工具条等。官方网站：/8、Cardinal – 移动端的CSS UI框架Cardinal 是一个小型的移动优先的 CSS 框架，提供很多有用的默认样式、可缩放排版、可重用模块和一个简单的响应式表格系统。官方网站：/9、快速开发CSS的框架 CSScaffold不同于许多CSS框架，它必须依靠PHP与Apache的mod_rewrite来执行，但也因为需要这两种东西，让CSScaffold变得很神奇、很方便，写起CSS来又快又轻松！官方网站：//csscaffold-php-based-css-framework/10、后台UI开发框架 MuseUI一款基于bootstrap风格，兼容于主流浏览器（包括IE6）的后端UI开发组件。官方网站：http://git.oschina.net/muse/museui来自：码农网链接：/article/top-10-css-ui-framework.html——————————————————●本文编号408，以后想阅读这篇文章直接输入408即可。●本文分类“前端”、“CSS”，搜索分类名可以获得相关文章。●输入m可以获取到全部文章目录●输入r可以获取到热门文章推荐●输入f可以获取到全部分类名称—————————————————小猿个人微信：itcodemonkey 欢迎调戏推荐一个微信公众号：IT电商网，长按下面的微信号可以进行复制itdianshang点击“阅读原文”可关注本文转载自：微信公众账号 - 程序猿，版权归原作者所有！
IT技术书籍推荐:
PHP从入门到精通(第3版)
明日科技 (作者)
《PHP从入门到精通(第3版)》从初学者角度出发，通过通俗易懂的语言、丰富多彩的实例，详细介绍了使用PHP进行网络开发应该掌握的各方面技术。全书共分4篇25章，包括初识PHP、PHP环境搭建和开发工具、PHP语言基础、流程控制语句、字符串操作、正则表达式、PHP数组、PHP与Web页面交互、PHP与JavaScript交互、日期和时间、Cookie与Session、图形图像处理技术、文件系统、面向对象、PHP加密技术、MySQL数据库基础、phpMyAdmin图形化管理工具、PHP操作MySQL数据库、PDO数据库抽象层、ThinkPHP框架、Smarty模板技术、PHP与XML技术、PHP与Ajax技术、应用Smarty模板开发电子商务网站、应用ThinkPHP框架开发明日导航网等内容。书中所有知识都结合具体实例进行介绍，涉及的程序代码均附以详细的注释，可以使读者轻松领会PHP程序开发的精髓，快速提高开发技能。
相关推荐:1、2、3、4、5、6、7、8、9、10、
随机关键词:
正在加载...
最新微信头条