网站开发常用的前端框架,如何定义前端架构一、前端架构的由来2014年10月13日CSS开发者大会上，在新奥尔良会议中心一个拥挤的房间里“举起前端架构的旗帜”成了在一线奋斗着的开发者们共同的诉求。在那之后，那些想要弄清楚自身定位以及在公司中所扮演的角色的开发者们发现，其实他们一直扮演着前端架构师的角色， 却从来没有拥有过这个头衔，或者没有足够的信心去争取这个职位所应具有的权力。
在大会召几周之后，很多人把他们在Twitter上的个人简介改成了“前端架构师”。
二、你理解的前端架构是怎样的？前端架构如同建筑设计，在建设过程中，建筑设计师需要设计和规划方案，并且跟进施工过程。这与前端架构师的工作有着异曲同工之妙，不同的是后者建造的是网站，而不是建筑物。比起浇筑混凝土，建筑设计师会在设计工程构图的工作上倾注更多的精力。同理，相比编写具体的代码，前端架构师更专注于开发工具和优化流程。
前端架构是一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效可持续的工作流。
前端设计架构不是一劳永逸的工作，没有任何设计在一开始就是完美的，也没有任何计划可以一步到位。
三、前端架构的原则1. 体系设计
试想一下，如果一栋建筑没有明确的构造设计，所有的重要事项都由建筑工人直接决定，那么就可能会出现这样的情景:第一面墙用石头垒，第二面墙用砖头砌，第三面墙用木头搭，第四面墙因为追求时髦而留空。
虽然网站的整体外观和风格基调完全由经验丰富的视觉设计师决定，但前端架构师掌控 着背后的前端开发方法和系统设计哲学。通过设计所有前端开发人员都要遵循的系统规范，前端架构师清晰描绘了产品和代码的最终形态。
一旦前端架构师建立起了系统设计的规范，项目就拥有了可以衡量代码质量的标准，否 则大家如何判断代码是否达标呢？一个精心设计的系统，应当具备完善的检验机制，并做出适当的取舍，以保证系统中的代码有实质的价值，而不是简单的堆砌。
2. 工作规划
有了清晰的结构设计之后，就需要制定开发工作流了。开发人员写一行代码并且提交到线上需要经过什么步骤？举一个最简单的例子，这个过程包括使用 FTP 登录服务器，修改一个文件并保存。然而，对于大多数项目而言，完整的工作流可能会用到多种工具，如版本控制器、任务调度器、CSS 处理器、文档工具、测试组件和服务器自动化工具等。
前端架构师的目标是设计出能流畅运转的系统。这个系统不仅能高效快速地启动，还可以通过语言分析、测试用例、文档记录等方法持续地提供有效的反馈，并且大幅减少由于重复操作而产生的人为错误。
3. 监督跟进
前端架构设计绝不是一劳永逸的工作。没有任何设计在一开始就是完美的，也没有任何计划可以一步到位。客户和开发人员的需求会随着时间改变。在某个阶段运行得很好的开发流程，随后也可能需要重新调整，以便提高效率、减少错误。
前端架构师的一个非常重要的能力，就是能够持续地优化工作流程。如今各种各样的构 建工具可以让大家很方便地改变工作方式，并通知到每一位开发人员。
有些人问前端架构师是否等同于管理角色，不再需要写业务代码。前端架构师不仅要写更多代码，更要会用多种编程语言，还要使用大量的工具。代码量并未减少，只是代码的读者发生了改变。前端开发人员面向终端用户写代码，而前端架构师面向的则是团队里的开发人员。
四、前端架构的核心1. 代码
归根结底，所有的网站都是由一堆文本文件和资源文件组成HTML、CSS、JavaScript的。当大家面对制作网站所产生的大量代码时，就会发现为代码和资源设定一个期望是多么重要。
2. 流程
怎么用工具和流程构建一个高效且避免出错的工作流是一个重要的思考。工作流变得越来越复杂，那些用于构建它们的工具也同样如此。这些工具在提高生产力、加快效率和保持代码一致性上带来了惊人的效果，但也伴随着过度工程化和抽象化的风险。
3. 测试
要构建一个可扩展和可持续优化的系统，必须保证新代码与老代码能够很好地兼容，大家的代码不会孤立存在，它们都是大型系统中的一部分，创建覆盖面广泛的测试方案，能确保老代码还能正常运行。
4. 文档
设计文档是你同他人交流的工具，来阐述你的设计决策是什么，来阐明你的设计决策是什么以及为什么你的决策是好的。如果不是团队中的重要成员要离开，几乎都不会意识到文档的重要性。
这四个核心是构建可扩展和可持续优化的系统的基础。以上就是偶介绍的前端构架，相信大家对前端构架已经有所了解。希望对从事Web前端的小伙伴有所帮助。如果你想了解更多Web前端行业动态和学习资料，可以关注“武汉千锋”微信公众号！
前端框架一般指用于简化网页设计的框架，比如，jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件（按钮，表单等等）。前段框架的好处：对于互联网的产品而言，前端用户体验往往决定了一款产品的竞争力和吸引力;而对于前端工程师来说，考虑的问题更为复杂，他们既要为网站上提供的产品和服务实现一流的Web页面、优化代码，保证体验的最佳，更要考虑与市面上各大浏览器的兼容性，还需顾及Web前端表现层和前后端交互的架构，以及模块化、通用类库、框架编写等一系列问题，由此提升前端开发的效率，降低开发成本和周期。
你好，偶自己主要是做后台开发，对前端稍有了解，所以偶觉得初学者更快入门web前端，以下是关于web前端方面的教程知识点。web前端是app开发、h5网页等主流的程序语言，而且待遇报酬高，较其他计算机语言更加容易入门。
1）先学html5+css基本语法
2）学些css的框架，比如less，bootstrap等
3）js是必然会涉及的，学jquery吧，简单易学，实例多
4）别光看，多动手，把1）到3）串起来，做个项目，或虚拟一个，比如购物车，或博客
几个要点，供参考
专注一条线，前端涉及知识点太多，别都学，杂而不精。
前端+HTML5德 学习内容：
第一阶段：前端页面重构：PC端网站布局、HTML5+CSS3基础项目、WebAPP页面布局；
第二阶段：JavaScript高级程序设计：原生JavaScript交互功能开发、面向对象开发与ES5/ES6、JavaScript工具库自主研发；
第三阶段：PC端全栈项目开发：jQuery经典特效交互开发、HTTP协议，Ajxa进阶与后端开发、前端工程化与模块化应用、PC端网站开发、PC端管理信息系统前端开发；第四阶段：移动端项目开发：Touch端项目、微信场景项目、应用Vue.js开发WebApp项目、应用Ionic开发WebApp项目、应用React.js开发WebApp；
第五阶段：混合（Hybrid）开发：各类混合应用开发；
第六阶段：NodeJS全栈开发：WebApp后端系统开发。
主流框架下面介绍了5种比较流行的前端框架
1. AngularJSAngular JS 是一个有Google维护的开源前端web应用程序框架。它最初由Brat Tech LLC的Misko Hevery于2009年开发出来。Angular JS是一个模型-视图-控制器（MVC）模式的框架，目的在于使HTML动态化。与其他框架相比，它可以快速生成代码，并且能非常轻松的测试程序独立的模块。最大的优势是在你修改代码后，它会立即刷新前端UI，能马上体现出来。它是用于SPAs（单页面应用）开发中最常用的javascript框架。Angular JS是一个全功能的框架，可能也是最流行的框架。缺点就是学习起来有点困难。
优点：模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；
是一个比较完善的前端MVVM框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能；
ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助，大家的项目从上线到目前，UI变化很大，在摸索中迭代产品，但是js的代码基本上很少改动。
良好的文档。
双向数据绑定简化了流程的某些部分。
缺点：验证功能错误信息显示比较薄弱，需要写很多模板标签；
ngView只能有一个，不能嵌套多个视图，虽然有angular-ui/ui-router 解决，但ui-router 对于URL的控制不是很灵活，必须是嵌套式的；
对于特别复杂的应用场景，貌似性能有点问题，特别是在Windows下使用chrome浏览器，不知道是内存泄漏了还是什么其他问题，没有找到好的解决方案，奇怪的是在IE10下反而很快，对此还在观察中；
ng提倡在控制器里面不要有操作DOM的代码，对于一些jQuery 插件的使用，如果想不破坏代码的整洁性，需要写一些directive去封装插件，但是现在有很多插件的版本已经支持Angular了，最好能够和cordova插件结合进行混合式开发；
Angular 太笨重了。
双向数据绑定检查数据模型的变化，这可能导致可能的性能问题并且更快地耗尽设备的电池。
理解代码和调试困难。
2. ReactJSReact JS 不像一个框架反而更像一个库，但绝对是值得一提。AngularJS是一个MVC模式的框架，但ReactJS是一个由Facebook开发的非MVC模式的框架。它允许你创建一个可复用的UI组件，Facebook和Instagram的用户界面就是用ReactJS开发的。你可以用React进行很复杂的更新并且应用运行仍然很快，因为框架本身能很快的处理他们。你也能写许多可复用的小文件，而不是编写一个大文件。对于要处理大量数据的大型程序来说这是最好的选择。这个框架的缺点之一就是它只处理应用程序的视图层，所以你可能需要结合其他工具来一起处理。
优点：1.掌握起来很容易。
2.在React中很容易维护隔离的组件。
3.组件的不断重新渲染提供了有效的安排
复杂。
4.方便的架构 – Flux – 与MVC竞争激烈。单向数据流
提供数据和DOM元素的可维护性和有效安排。
它是当今广泛使用的最轻量级框架。
缺点：1.DOM操作库的一些问题是可能的（例如，jQuery）。
2.频繁的重新渲染可能会减慢处理大量数据的APP的工作。
3. MeteorJSMeteorJS 发布于2012年，涵盖了开发周期的所有阶段，包括后端开发、前端开发、数据库管理。它是一个由NodeJS编写的开源框架。MeteorJS是一个简单和容易理解的框架，所有的包和框架都可以轻松使用。代码层的所有改变能够立即更新到UI界面，服务的和客户端都只需要用javascript开发。他主要用于IKEA和马自达等公司的实时应用开发。不建议用于大型或复杂的程序。
优点：1.易学
2.偏向客户端
3.响应式
4.代码高度重用
缺点：1.运算密集型应用能力差
2.成熟度不高
3.约束少
4.初次加载时间长
4. Vue.JS在了解React和Angular后，你可以尝试了解下VueJS，一个用于用户界面开发的渐进式javascript框架。它是一个能快速开发和跨平台的方案。与Angular和React相比较，它被证明速度更快，并且吸收了这两者的优点。Vue的创始人是尤雨溪，他曾在Google工作并使用Angular。他的想法是直接抽取出他喜欢的Angular的特性，不再引入其他复杂的理念而打造一款新的框架。所有的Vue模板都是基于HTML，你可以在GitHub上找到很多资源。它也提供双向绑定和服务端渲染。在Vue中，你可以使用模板语法或使用JSX直接编写渲染函数。
Vue.js 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
优点：1.双向数据绑定 也就是所谓的响应式数据绑定。这里的响应式不是@media 媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出同步的响应。
也就是说，vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，就是以input 标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。
这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。
2.组件化开发
在前端应用，大家是否也可以像编程一样把模块封装呢？这就引入了组件化开发的思想。
Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，大家只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。
3.Virtual DOM
现在的网速越来越快了，很多人家里都是几十甚至上百M的光纤，手机也是4G起步了，按道理一个网页才几百K，而且浏览器本身还会缓存很多资源文件，那么几十M的光纤为什么打开一个之前已经打开过，已经有缓存的页面还是感觉很慢呢？这就是因为浏览器本身处理DOM也是有性能瓶颈的，尤其是在传统开发中，用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。
而Virtual DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。
4.轻量高效
5. BackboneJSBackbone是一个MVP模型，它依赖于Underscore.js库。它旨在开发单页面web应用，并保证不同部分的web应用同步。它采用命令式的编程风格，与使用声明式编程风格的Angular不同。Backbone也与后端代码同步更新，当模型改变后HTML页面也随之改变。Backbone被用来构建Groupon, Airbnb, Digg, Foursquare, Hulu, Soundcloud, Trello等许多知名应用。
优点：将数据和界面很好的分离开来。
将事件的绑定很好的剥离出来，便于管理和迭代。
使得Javascript程序的模块化更加清晰、明了。