‘壹’ 什么是网站架构
网站架构,一般认为是根据客户需求分析的结果,准确定位网站目标群体,设定网站整体架构,规划、设计网站栏目及其内容,制定网站开发流程及顺序,以最大限度地进行高效资源分配与管理的设计。其内容有程序架构,呈现架构,和信息架构三种表现。而步骤主要分为硬架构和软架构两步程序。网络架构是现代网络学习和发展的一个必须的基础技术。
中文名
网站架构
一般认为
根据客户需求分析的结果
制定
网站开发流程及顺序
内容
程序架构,呈现架构
快速
导航
软架构八个方案
硬架构
机房的选择
在选择机房的时候,根据网站用户的地域分布,可以选择网通或电信机房,但更多时候,可能双线机房才是合适的。越大的城市,机房价格越贵,从成本的角度看可以在一些中小城市托管服务器,比如说北京的公司可以考虑把服务器托管在天津,廊坊等地,不是特别远,但是价格会便宜很多。
带宽的大小
通常老板花钱请我们架构网站的时候,会给我们提出一些目标,诸如网站每天要能承受100万PV的访问量等等。这时我们要预算一下大概需要多大的带宽,计算带宽大小主要涉及两个指标(峰值流量和页面大小),我们不妨在计算前先做出必要的假设:
第一:假设峰值流量是平均流量的5倍。
第二:假设每次访问平均的页面大小是100K字节左右。
如果100万PV的访问量在一天内平均分布的话,折合到每秒大约12次访问,如果按平均每次访问页面的大小是100K字节左右计算的话,这12次访问总计大约就是1200K字节,字节的单位是Byte,而带宽的单位是bit,它们之间的关系是1Byte = 8bit,所以1200K Byte大致就相当于9600K bit,也就是9Mbps的样子,实际情况中,我们的网站必须能在峰值流量时保持正常访问,所以按照假设的峰值流量算,真实带宽的需求应该在45Mbps 左右。
当然,这个结论是建立在前面提到的两点假设的基础上,如果你的实际情况和这两点假设有出入,那么结果也会有差别。
服务器的划分
先看我们都需要哪些服务器:图片服务器,页面服务器,数据库服务器,应用服务器,日志服务器等等。
对于访问量大点的网站而言,分离单独的图片服务器和页面服务器相当必要,我们可以用lighttpd来跑图片服务器,用apache来跑页面服务器,当然也可以选择别的,甚至,我们可以扩展成很多台图片服务器和很多台页面服务器,并设置相关域名,如img.domain和 www.domain,页面里的图片路径都使用绝对路径,如<img src="http://img.domain/abc.gif" />,然后设置DNS轮循,达到最初级的负载均衡。当然,服务器多了就不可避免的涉及一个同步的问题,这个可以使用rsync软件来搞定。
数据库服务器是重中之重,因为网站的瓶颈问题十有八九是出在数据库身上。一般的中小网站多使用MySQL数据库,不过它的集群功能似乎还没有达到stable的阶段,所以这里不做评价。一般而言,使用MySQL数据库的时候,我们应该搞一个主从(一主多从)结构,主数据库服务器使用innodb表结构,从数据服务器使用myisam表结构,充分发挥它们各自的优势,而且这样的主从结构分离了读写操作,降低了读操作的压力,甚至我们还可以设定一个专门的从服务器做备份服务器,方便备份。不然如果你只有一台主服务器,在大数据量的情况下,mysqlmp基本就没戏了,直接拷贝数据文件的话,还得先停止数据库服务再拷贝,否则备份文件会出错。但对于很多网站而言,即使数据库服务仅停止了一秒也是不可接受的。如果你有了一台从数据库服务器,在备份数据的时候,可以先停止服务(slave stop)再备份,再启动服务(slave start)后从服务器会自动从主服务器同步数据,一切都没有影响。但是主从结构也是有致命缺点的,那就是主从结构只是降低了读操作的压力,却不能降低写操作的压力。
为了适应更大的规模,可能只剩下最后这招了:横向/纵向分割数据库。所谓横向分割数据库,就是把不同的表保存到不同的数据库服务器上,比如说 用户表保存在A数据库服务器上,文章表保存在B数据库服务器上,当然这样的分割是有代价的,最基本的就是你没法进行LEFT JOIN之类的操作了。所谓纵向分割数据库,一般是指按照用户标识(user_id)等来划分数据存储的服务器,比如说:我们有5台数据库服务器,那么 “user_id % 5 + 1”等于1的就保存到1号服务器,等于2的就保存到2号服务器,以此类推,纵向分隔的原则有很多种,可以视情况选择。不过和横向分割数据库一样,纵向分割数据库也是有代价的,最基本的就是我们在进行如COUNT, SUM等汇总操作的时候会麻烦很多。综上所述,数据库服务器的解决方案一般视情况往往是一个混合的方案,以其发挥各种方案的优势,有时候还需要借助memcached之类的第三方软件,以便适应更大访问量的要求。
如果有专门的应用服务器来跑PHP脚本是最合适不过的了,那样我们的页面服务器只保存静态页面就可以了,可以给应用服务器设置一些诸如app.domain之类的域名来和页面服务器加以区别。对于应用服务器,我还是更倾向于使用prefork模式的apache,配上必要的xcache之类的PHP缓存软件,加载模块要越少越好,除了mod_rewrite等必要的模块,不必要的东西统统舍弃,尽量减少httpd进程的内存消耗,而那些图片服务器,页面服务器等静态内容就可以使用lighttpd或者tux来搞,充分发挥各种服务器的特点。
如果条件允许,独立的日志服务器也是必要的,一般小网站的做法都是把页面服务器和日志服务器合二为一了,在凌晨访问量不大的时候cron运行前一天的日志计算,不过如果你使用awstats之类的日志分析软件,对于百万级访问量而言,即使按天归档,也会消耗很多时间和服务器资源去计算,所以分离单独的日志服务器还是有好处的,这样不会影响正式服务器的工作状态。
软架构
框架的选择
PHP框架有很多选择,比如:CakePHP,Symfony,Zend Framework等等,至于应该使用哪一个并没有唯一的答案,要根据Team里团队成员对各个框架的了解程度而定。很多时候,即使没有使用框架,一样能 写出好的程序来,比如Flickr据说就是用Pear+Smarty这样的类库写出来的,所以,是否用框架,用什么框架,一般不是最重要的,重要的是我们 的编程思想里要有框架的意识。
逻辑的分层
‘贰’ 网站的前台框架是指什么
从网站我们可以看到,从首页-频道-栏目-内容,分成了4个级别。在做网络架构的时候是由上自下分解的过程,而下一级又是上一级的补充,同级之间是有关联的。总之一个优秀的前台架构需要做到上下立意明确,左右衔接合理。一般的网络前台架构师的会根据网站的中心主题,分析出页面标题、关键词、页面描述。接着会是频道,当然这时候要考虑到用户体验和关键合理设置等很多因素。因为要做的内容很多,关键词也很多,一个页面不可能涉及到所有的关键词,它需要合理的分配到各个频道,然后是栏目,最后是内容。我们回头来看一下,内容是经常更新的,如果所发布的内容很多都包含了栏目设置的关键词,而栏目又分解了频道的关键词,最后到首页。
其实我想重点说的是,网站seo或者sem的前台架构就是合理的,有计划的去分配网站关键词,我们经常会看到有些网站首页设置了十几个甚至几十个关键词。很多关键词甚至都没有在页面中出现,那怎么可能有很好的排名。如果把这些词分配到你的频道里,效果肯定是不一样的,如果你运用了2级域名的技巧,我相信效果会更好。
上面说的是关键词分配的技巧,下面我们说说用户体验。对于一个网站架构来说肯定不是单单分配关键词的问题。要考虑的问题有很多,很多优秀的架构师会把页面关系图画出来。举个最简单的例子,一个商城,从浏览商品到最后付款需要几步?现在架构师在想尽办法,用各种各样技术手段去简化整个流程。因为每多一次点击就会流失客户。大家回想一下,早几年的商城是必须要注册才可以购买。从访问商品,注册,登陆,返回商品页面,点击购买,加入购物车,填写收货地址,确认订单,转向付款页面,付款成功,非常繁琐的过程。现在呢?恨不得看完商品马上把你引到到付款页面,而且是直接对接网银页面。
很多人对用户体验不理解,看完上面的一段话,相信大家就非常直观的知道什么是用户体验。包括推荐的设置,栏目导航都是用户体验中很重要的部分。因为可以非常直观的提高转化率,直接为公司产生效益。
网站建设公司为了可以更好的适应市场的发展,提升建站的效率,已经逐渐开始使用带了框架进行建站,网站开发的工具也在不断创新,网站开发框架的优势在于:
1、有效的提升了网站建设的效率,这一点是不容置疑的,框架的特点就是提供了众多的api,功能模块的实现只需要调用起来即可。
2、框架是对功能模块进行了封装,规范化的处理,一个功能模块可以做到被反复利用,在个别方面还可以精简代码。
3、建站团队的分工更加明确,分层实现,例如前端开发和后端开发,一个负责视图层的实现,而另一个负责数据交互的实现;网站建设的效率大大提升。
4、网站维护起来更方便,根据网站建设项目的特点,有些网站更注重于前台的表现,有些网站则更注重于数据交互,前后端分离代码逻辑更为清晰,代码修改更方便快捷。
5、由于现在网站建设公司已经普遍认可了框架的使用,实用的工具大家都在用,遇到问题也可以在网上及时获得帮助,框架的使用对网站建设行业的发展具有促进的作用。
上述是框架开发的优势,合理运用好框架才能够更好的将其优势发挥出来,提升网站建设的效率,但是框架开发网站也是有利也有弊,使用框架开发的代码较为臃肿,尤其是对于小项目而言,框架中会有很多根本用不到的功能模块的代码。此外,框架会有一定的bug,或者是局限性。建议大家对于一些比较小的开发项目尽量少使用框架,或是对某些框架进行适当的瘦身处理。
‘肆’ 一个网站有框架结构是什么意思
原来你说的框架是HTML中的Frame元素(标签),确实该元素被很多浏览器不识别,所以网站后台应用的非常普及。而前台往往是用HTML和JS效果来替代Frame元素所起的作用;JS是可以被客户端浏览器读取的,HTML是可以优化SEO的。
名词解释:网站框架架构,一般认为是根据客户需求分析的结果,准确定位网站目标群体,设定网站整体架构,规划、设计网站栏目及其内容,制定网站开发流程及顺序,以最大限度地进行高效资源分配与管理的设计。其内容有程序架构,呈现架构,和信息架构三种表现。而步骤主要分为硬架构和软架构两步程序。
打个简单的比方,网站框架结构好比造房子前的设计工程图,分析造何种类型房子(给谁住);房子朝向/客厅、卧室等面积布局、水电煤气管道位置、门窗阳台位置。
‘伍’ 什么是网页框架
■ 什么是框架型网页?
如果一个网页的左边导航菜单是固定的,而页面中间的信息可以上下移动,这一般就可以认为是一个框架型网页。此外,一些框架型站点的模板在其页面上方放置了公司的LOGO或图片。不过这一块也是位置固定的。而页面的其它部分则可以上下左右移动。有的框架型站点模板还会在其固定区域中放入链接或导航按钮。
在一些关于搜索引擎优化方面的文章中,基本上都认为网站用框架来设计是极不可取的。这是由于大多数的搜索引擎都无法识别网页中的框架,或者无法对框架中的内容进行遍历或搜索。
■ 为什么使用框架的网页无法被正确索引?
我们将向大家解释为何使用框架的网页无法被使用网络蜘蛛(spiders)或网络爬虫(crawlers) 的搜索引擎(如Google)正确索引的主要原因。在一个框架网页的后台代码中,我们一般能够看到的是网页的标题标记(Meta Title)、描述标记(Meta Description)、关键字标记(Meta Keywords)及其它原标记(Meta Tags),同时你还会看到一个框架集标记(Frameset Tag)。框架中的内容在后台代码中是无法被体现的,而对于那些主要搜索引擎的搜索程序来说,如Google的GoogleBot和Freshbot,其设计思路都是完全忽略某些HTML代码,转而直接锁定网页上的实际内容进行索引。这样一来,网络蜘蛛在那些一般性的框架网页上根本找不到要搜索的内容。这是由于那些具体内容都被放到我们称之为“内部网页”中去了。
使用“Noframes”标记进行优化
使用了框架型网页并不意味着就完全无法对其网页进行优化。实际上在HTML标记中,有一个叫做NOFRAME的标记,如果使用得当的话我们就可以有效地对页面进行优化了,从而使得搜索引擎能够正确索引你框架网页上的内容信息。也有网站这样使用NOFRAMES标记:他们在NOFRAMES标记里放上这么一段话:“本网页使用了框架,但您的浏览器不支持框架。请下载新的浏览器观看。”
让我们看看那些专业的搜索引擎优化公司是怎么做的吧。他们在使用了框架的网页中,有效的提供含有丰富关键字和关键短语的重要文字和内容,从而有效帮助网站在SERP(搜索引擎搜索结果页)中取得较高的排名(页面等级)。
这样优化的结果,其实就是让主要搜索引擎不但读取了你的网页后台代码中的标题和其它原标记,而且对那些不支持框架的浏览器所无法显示的页面内容信息,也进行了索引。如果你出于某种原因非要使用框架结构,那么请紧记:在你的后台代码中一定要正确的使用NOFRAMES标记,这一点非常重要。
很显然,我们所说的这些优化措施,只有对那些网页内容经过精心撰写,并且在内容中充分使用了重要关键字和关键短语的网站才起作用。
综上所述,不管是使用框架技术的网站还是非框架技术的网站,只要你采用的是恰当的技术和正确的技巧,都可以进行完美的优化从而取得理想的页面等级。
什么是框架
前面我们介绍了很多网站的页面是用表格制作的,还有一种更方便的工具,就是使用框架。
框架的作用就是把浏览器窗口划分为若干个区域,每个区域可以分别显示不同的网页。
<iframe></iframe>
将文档分割为几个框架后,Dreamweaver会自动产生一个没名字的框架体文件,比如我们看到的一个简单的左右框架页面,实际上包含3个不同的文件,一个是框架体文件,还有两个在框架中显示内容的文件。
框架体文件中保存页面中框架的数量,框架的尺寸、位置及每个框架的网页源文件和其它可定义的属性。
‘陆’ 网页制作中框架的作用
框架可以把浏览器窗口分成几个独立的部分,每部分显示单独的页面,页面的内容是互相联系的。如3框架网页,顶端框架显示网页标题,下面左右两个框架,左边显示导航栏,右边显示链接目标网页。单击左边框架导航栏中的超级链接,在右边框架里显示超级链接的对象。内容非常多的网页不宜采用框架式结构,所以大网站中几乎所有的网页都不是框架式网页。
‘柒’ 网站建设的框架是什么
网站建设都是有一个大体的框架的,提前确定好框架是非常有必要的,合理地运用框架可以使一个页面显示得更加完美、更具有视觉上吸引力、更宜于导航。然而滥用网站建设框架会使页面显得杂乱无章不易于阅读,太多的框架甚至可以造成浏览器的崩溃!那么网站建设的框架是什么呢?
对于刚刚接触网站建设的小白来说,该网站的整体结构模糊,没有明确的概念。框架与表格不同,它们的区别在于每个框架的框里都可以包含一个独立的网站设计,每一个页面都可以独立于其它页面而翻动或改变。可以说,每一个框架就是一个迷你的浏览器。
市场上讲:php做中小型企业网站比较合适,性价比高,java偏大型。
性价比:很简单的php空间一年才几百块钱,而java空间一个月就得几百。
语言方面:当然php和java都各领风骚,主要看自己擅长哪一种语言了,我也用过php一段时间,发现确实很难习惯其。
语法,所以最代码也是用java开发的。
开发周期:java和php我觉得效率上php会好,但性能上java会比php会更占优势,当然这不是绝对的,只能说玩的好的语言不是问题。
除了技术框架以外还有基本内容框架构造:
一、网站结构
网站结构包括网站栏目结构、网站结构定位、网站菜单和导航位置设置、网站信息排名位置等。它是用来向用户表达企业信息的网站栏目设置、网站布局、网站导航、网站层次结构等信息的体现。网站结构是网站规划过程中需要确定的一个问题,是网站建设的诀窍。
二、网站内容
网站内容包括用户在网站上可以视觉或听觉感知的所有信息,如文本、图片、视频、音频等。
网站内容一般包括以下几点:
1、公司信息:公司简介、发展历史、公司趋势、媒体报道、主要成果(证书、数据)、组织结构、企业主要领导介绍、联系方式等。
2、产品信息:所有系列和型号的产品;产品的详细介绍(图片、视频等)。
3、用户服务信息:产品选择和使用常识、产品说明、在线问答等。
4、促销信息:在线广告、有奖竞赛、有奖论文、优惠券下载等。
三。网站功能
就是发布各种信息和提供服务的必要技术支持系统。前台和后台都有功能。
①前台功能:用户可以通过浏览器看到和操作的内容是后台功能的外部表现;
②后台功能:通过网站运营商的操作可以在前台实现的相应功能。后台的功能是为了实现前台的功能而设计的。
四、网站服务
网站向用户提供的价值,如问题答案、优惠信息、数据下载等。网站服务是通过网站功能和内容来实现的。一些服务已经包含在网站的基本内容中,而另一些则需要与产品相结合才能发挥作用。
以上是上海印宏网络整理的有关网站建设的框架是什么的相关解答,我希望以上几点对大家都有帮助。
‘捌’ 网站的基本架构是什么
网站架构按照制作步骤分为硬架构和软架构。
一、硬架构
1、机房:在选择机房的时候,根据网站用户的地域分布,可以选择网通、电信等单机房或双机房。
2、带宽:预估网站每天的访问量,根据访问量选择合适的带宽,计算带宽大小主要涉及峰值流量和页面大小两个指标。
3、服务器:选择需要的服务器,如图片服务器,页面服务器,数据库服务器,应用服务器,日志服务器,对于访问量大点的网站而言,分离单独的图片服务器和页面服务器相当必要。
二、软架构
1、网站的框架:现在的PHP框架有很多选择,比如:CakePHP,Symfony,Zend Framework,根据创作团队对各个框架熟悉程度选择。
2、逻辑的分层
1)表现层:所有和表现相关的逻辑都应该被纳入表现层的范畴。
2)应用层:主要作用是定义用户可以做什么,并把操作结果反馈给表现层。
3)领域层:包含领域逻辑的层,就是告诉用户具体的操作流程的。
4)持久层:即数据库,保存领域模型保存到数据库,包含网站的架构和逻辑关系等。
(8)网站框架是干什么的扩展阅读
网站的分类
1、根据网站所用编程语言分类:例如asp网站、php网站、jsp网站、Asp. net网站等;
2、根据网站的用途分类:例如门户网站(综合网站)、行业网站、娱乐网站等;
3、根据网站的功能分类:例如单一网站(企业网站)、多功能网站(网络商城)等等。
4、根据网站的持有者分类:例如个人网站、商业网站、政府网站、教育网站等。
5、根据网站的商业目的分类:营利型网站(行业网站、论坛)、非营利性型网站(企业网站、政府网站、教育网站)。
‘玖’ 听说现在建网站很多人都用到框架,那什么是框架
框架说的白点就是集成通用的模块让你直接调用,从而省去反复去写同样的功能。三楼所说的是基于java语言的开发框架,不同的语言有各自的开发框架。比如,javascript有jQuery,Prototype等,ruby有rails框架。
‘拾’ 前端框架有什么用
web前端框架是做什么的? 5分
前端框架一般指用于简化网页设计的框架,比如,jquery,extjs,bootstrap等等,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件(按钮,表单等等)。
使用前段框架可以降低界面开发周期和提高界面的美观性。
有些框架比较轻量,比如jquery,有些框架比较重量,比如extjs。一般来说重量的框架会封装更多的功能,比如extjs,封装的grid控件有很强的数据展示和操作功能。
前端框架是什么?有什么用、有什么好处?
可以简单的理解成是:使用广泛的前端开发套件,可以帮助你快速的网站。
前段框架的好处:对于互联网的产品而言,前端用户体验往往决定了一款产品的竞争力和吸引力;而对于前端工程师来说,考虑的问题更为复杂,他们既要为网站上提供的产品和服务实现一流的Web页面、优化代码,保证体验的最佳,更要考虑与市面上各大浏览器的兼容性,还需顾及Web前端表现层和前后端交互的架构,以及模块化、通用类库、框架编写等一系列问题,由此提升前端开发的效率,降低开发成本和周期。
html的框架到底是用来干嘛的?什么时候用到?
你接触了后台就知道了,这样可以做到页面地址不需要变动, 但却可以利用iframe的tagert属性把显示数据的页面包含进来, div就不行,因为它没有这个target属性,文件独立出来方便重用,且结构清晰;
前端开发框架有哪些
首先我想说明一下,我们通常说的js不是框架,是语言,即javascript,据最新世界编程语言排行榜来看,已经上升到了第7位,发展迅猛,其标准是ECMAScript,现在基本上是基于ECMAScript5。jQuery是用js写的框架,其在DOM操作上有很明显的优势,也是时下很常用的一个js框架。
至于之外还要学习那些框架呢?
如果你说的是js框架,建议先掌握好jQuery,然后还有很多的,比如楼上提到的extjs,近几年比较流行的AngularJS,基于移动端考虑的轻量级仿jquery框架zepto,还有jquery mobile,还有适合写后端或服务端的node,等等。如果是web前端框架,就不仅仅是涉及的js了,还有html和css。个人觉得只有这三种语言都涉及到的框架才能说得上是web前端框架。现在比较火的是Bootstrap,还有Foundation,比较古老的有jqueryUI,easyUI等等,还有其他很多很多。如果还有算上处理方案及版本升级代码迭代等,就要用到网络团队研发的fis这种了。其实内容真的很多很多,前端任重而道远啊~
web前端框架是什么意思 10分
前端架构师必须懂得真正的编程知识,而这正是很多自封为前端架构师的人所缺乏的。我的意思不是能够剪切粘贴改进代码就行了,而是能够跟老练的工程师商讨如何能够最好地结合前端。
这就是说,前端架构师需要真正理解结构遭遇商业逻辑的问题。如果工程师说某些东西使用ASP.Net DataGrid是不可能实现的,前端架构师必须能够解释如何与为何要使用DataList或Repeater取代,解释为何DataGrid在该情景下是个错误的选择……
这只是个例子,问题还在于仅知道客户端编程也是不够的。能够使用与工程师相同的术语,能够讨论(前后端)关键集成的最佳解决方案,这是绝对必须的。
断线的风筝
我们今天正处在一个不妙的处境中,原因在于几乎没有人能够为前后端的沟壑搭桥。一般工程师不会有兴趣或实践标记,CSS, 或DOM脚本编程,大部分客户端开发者也没有与后端技术协作的经验。几周入门PHP不会成为程序员,几周入门XHTML也不会成为真正的客户端开发者。
罪魁祸首
我首先想到的十足例子是,ASP.Net完全漠视Web标准,同样地,web氛围(我们指表格和占位gif)让Web标准郁闷。企业项目的大多数框架输出的标记,即使使用1999年的标准来衡量,都是糟糕无比的。
如此巨大和“专业”的产品怎么能才够不忽视,按理说是整个项目最简单的方面?只有静态代码。理由是,基于技术的立场衡量产品,结构,CSS和其他客户端技术都是“事后诸葛亮”。表现逻辑,结构和行为混杂,压根无助于无障碍,Web标准,或者前端技术干净的分离。擡起你的头来,就在2006,这些都成受欢迎的惯例了。
总结
如果这个世界上姿态最鲜明的产品和项目都如此低劣的方式来处理事情,其他的还有什么好说?毫无疑问,我们需要前端架构师,而且就在昨天。
归结于归结,我们有一堆相互关联的技术,很少人能够埋头钻研它们之间的关系,这很不幸。正确做事的真正价值在于容易的维护和长期的适应性。虽然在关键时刻,有些方式更容易选择其他的方法和拼凑起另外的东西。对某些人来说,这可能是可接受的做事方式。但是,对我们大部分人来说,这是拙劣的抉择,也非常不专业。
我交给你去想了。我假设你把车交给技工修理,修好了时候,瞧瞧引擎罩内大量的输送管,我不知道你对技工作何感想?
为什么需要自己实现前端框架
前端对框架(库)的大小更敏感
前端内容的渲染和交互效果的实现如果依赖JS框架(库),需要先将这些框架(库)下载到客户端,此时框架(库)的大小将直接影响到前端的首屏渲染速度。框架(库)越小,加载的速度就越快,而随着功能的越来越全,框架(库)必然会越来越大,要保证性能,需要制定加载策略。
便于制定加载策略
解决框架(库)变大的常见加载策略是将框架分为核心部分和扩展部分,核心部分在首屏渲染前必须下载完成,并且这部分的加载文件尽可能的少和小,扩展部分则可以模块化方式来懒加载。
核心部分的JS在发布时,可对文件合并,数量尽可能少,单个文件在gzip压缩后最好不要超过20K。核心部分可以是实现“JS语言扩展(面向对象),DOM操作API,数据交互方法(ajax),导航策略,模块化底层实现,事件底层实现,模版解析”等。扩展部分一般是一些可异步加载的UI组件,例如:输入控件、弹出窗、动画API、文件上传及预览、图表控件、富文本编辑器等。
上面的实现模式,在主流的JS框架(库)中,有三类选择:一类是以ExtJS为代表的大而全的框架(库),这类框架虽然功能满足,但往往无法拆分为核心部分和扩展部分来加载,因此基本不予考虑;一类是相对轻量的YUI3、Dojo等框架(库);一类是近来流行的前端MV*系列Backbone、Ember、Angular,这类在充当核心部分时,还需要组合Underscore、RequireJS,jQuery等第三方库。
后面两类可以满足要求,但个人觉得不是完美的方案,因为在开发实际产品时,将这两类作为核心部分时,往往里面有很多是不需要的,而还有些需要自己来额外补充近来,可以是自己开发,也可以集成第三方的实现。而核心部分框架(库)如果是自己实现,则可以保证在功能完整的情况下,不多出其它的东西,加载的JS可以控制到最小,而且代码风格也统一。
便于扩展
前端代码与用户的交互直接相关,而交互的设计变化和不确定性非常大,现成的第三方实现往往难以直接利用,需要改造。有时改造第三方的框架,先要非常熟悉框架,当这个框架比较复杂时,这样的工作量和难度就大大加大了。而自实现的框架(库)则可以根据需要任意扩展,可以根据需求制定对应的规范和API。
前端开发框架有哪些
1. Bootstrap
Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件。
Bootstrap是用动态语言LESS写的,主要包括四部分的内容:
脚手架——全局样式,响应式的12列栅格布局系统。记住Bootstrap在默认情况下并不包括响应式布局的功能。因此,如果你的设计需要实现响应式布局,那么你需要手动开启这项功能。
基础CSS——包括基础的HTML页面要素,比如表格(table),表单(form),按钮(button),以及图片(image),基础CSS为这些要素提供了优雅,一致的多种样式。
组件——收集了大量可以重用的组件,如下拉菜单(dropdowns),按钮组(button groups),导航面板(navigation control)——包括:tabs,pills,lists标签,面包屑导航(breadcrumbs)以及页码(pagination),缩略图(thumbnails),进度条(progress bars),媒体对象(media objects)等等。
JavaScript——包括一系列jQuery的插件,这些插件可以实现组件的动态页面效果。插件主要包括模态窗口(modals),提示效果(tool tips),“泡芙”效果(popovers),滚动监控(scrollspy),旋转木马(carousel),输入提示(typeahead),等等。
Bootstrap已经足够强大,能够实现各种形式的 Web 界面。为了更加方便地利用Bootstrap进行开发,很多工具和资源可以用来配合使用,下面列举了其中的一部分工具和资源。
jQuery UI Bootstrap —— 对于jQuery和Bootstrap爱好者来说这是个非常好的资源,能够把 Bootstrap的清爽界面组件引入到jQuery UI中。
jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主题类似,这是一个为jQuery Mobile建立的主题。如果你想让用Bootstrap开发的网站在手机端也可以优雅访问,那么这个资源对你来说很方便易用。
Fuel UX —— 它为Bootstrap添加了一些轻量的JavaScript控件。Fuel UI 安装,修改,更新以及优化都很简单方便。
StyleBootstrap. —— Bootstrap提供了自己的几种界面风格,StyleBootstrap提供了更多的配色选项,并且你可以给每个组件都应用不同的配色。
BootSwatchr —— 利用这个工具你可以立刻查看主题修改后的效果。对于每一次变动的效果,这个应用都会生成一个唯一的URL方便你与他人分享,你也可以在任意时刻修改你的主题。
Bootswatch —— 提供大量免费的Bootstrap主题。
Bootsnipp —— 在线前端框架交互组件制作工具,是一个供给设计师和开发者的基于Bootstrap HTML/CSS/JavaScript 架构的免费元素。
LayoutIt —— 通过界面拖放生成器简便快捷地创建基于Bootstrap的前端代码。通过拖放动作将Bootstrap风格的组件加入到你的个人设计里并且可以方便地修改他们的属性,......
前端开发框架有哪些
1. Bootstrap Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件。 Bootst...
前端框架用哪个好
1、flex
Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apache基金会后发布的第一个版本。
需要注意的是,Flex目前还在孵化阶段,还不是Apache的正式项目,Flex 4.8也不是一个正式的Apache版本。
Apache称,该版本标志着Flex新时代的开始,Flex的未来将由社区来驱动,而不是由一个公司驱动。开发者可以通过贡献代码,来帮助改进Flex,如修复bug、增加功能等。
从Macromedia卖给Adobe,然后又捐给apache,不知道搞什么名堂。不过还好没有经过大幅重构,否则就真的是悲哀了!
2、extjs
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。
功能丰富,无人能出其右。
无论是界面之美,还是功能之强,ext的表格控件都高居榜首。
华丽的界面,灵活的功能,还有开发工具都是配套的,但有个最大的问题,用就得花钱!
3、easyui
easyui帮助你构建你的web应用更加容易。
它是一个基于jquery的插件,开发出来的一套轻量级的ui框架,非常小巧而且功能丰富。
但是她有一个最大的问题就是代码只能找到以前的开源的版本,到了1.2以后的版本源代码都是经过混淆的,如果遇到问题修改起来会非常麻烦!不过一个比较大的优势是开源免费,并且界面做的还说的过去!
4、MiniUI
又一个基于jquery的框架,开发的界面功能都很丰富。
jQuery MiniUI - 快速开发WebUI。
它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。
使用MiniUI,开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应用系统界面。
界面做的挺不错,功能也挺丰富,但是有两个比较大的问题,一个是收费,一个是没有源码,说白了,不开源!基于这个开发如果想对功能做扩展就需要找他们的团队进行升级!
5、jQuery UI
jQuery UI 是一套 jQuery 的页面 UI 插件,包含很多种常用的页面空间,例如 Tabs(如本站首页右上角部分) 、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。
功能非常全面,界面也挺漂亮的,可以整体使用,也可以分开使用其中的几个模块,免费开源!
6、DWZ
DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.
设计目标是简单实用,快速开发,降低ajax开发成本。
欢迎大家提出建议,我们将在下一版本中进一步调整和完善功能.共同推进国内整体ajax开发水平。
毕竟是国产的,支持一下,而且源码完全公开,可以选择一下!不过性能怎么样不敢确定!
7、GWT
Google 网页工具包——GWT 提供了一组基于Java语言的开发包,这个开发包的设计参考Java AWT包设计,类命名规则、接口设计、事件监听等都和AWT非常类似。熟悉Java AWT的开发者不需要花费多大的力气就能够快速的理解GWT开发工具包,将更多地时间投入到GWT应用的开发过程中。
你不用......
web前端开发框架有哪些
bootstrap是twitter出的一款不错的UI框架,或者与其说是框架不如说是类库(lib),当然这里边牵扯到一个“究竟什么是框架什么是类库?”的问题,我们暂时不谈。毕竟是有大公司背景的代码堆,我觉得没什么“落伍”可言。
angular是前两年之内突然火得一塌糊涂的一个fe框架,这个我觉得可以算的上是真正意义上的框架了,MVVM双向绑定,包括它拥有足够完善的社区、生态,甚至chrome上都有很多好用的相关插件(这一点可以说是占了google出品的光),比较完整的大型项目都是可以考虑引入的。但如果你的网站只是做一些轻量级的东西,杀鸡焉用宰牛刀吧我觉得。
backbone主要针对的MVC中的M层,至少我是这么理解的。对UI层它几乎没什么太多的限制,一方面给出了coder自由度进行发挥,另一方面也等于在这方面框架本身对开发没提供什么太大的帮助。我觉得这更像是一个高手向的框架,另外对于underscore前端模板那一套东西,说实话作为一名php java啥都能写的FE我始终觉得这套东西有那么一种纯JS工程师的一厢情愿的意味。这是个人看法了,不一定准确,况且有人会搬出ajax动态渲染时 前端模板的作用来反驳我,别急着反驳,至少往下看完我说的话。
相比之下,react可以说是一个在MVC中V层做的十分出色和新颖的框架了,独特的jsx编译机制就已经让你的代码变得高大上了,我是觉得这个类库在UI层做的更彻底更专业,或者说让FE的代码更专业了。更何况,react比angular更年轻,而且同样拥有大公司背景,react native一出更是让JS工程师的地位取得了革命性的提升,(不要跟我提phonegap,用过两个东西后你会明白,react打包的app性能甩phonegap几条街没问题)。另外既然楼主提到了之前的网站是bootstrap,不妨可以看一看react-bootstrap这个东西,或许这就是你想要的。