近几年随着jQuery、Ext 以及CSS3 的发展，以Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野，可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些框架各有特点，本文对这些框架进行初步的介绍与比较，希望能够为大家选择框架提供一点帮助，也为后续详细研究这些框架的抛砖引玉。JavaScript & CSS
目前前端框架主要采用JavaScript+CSS模式，我们先来了解一下这两者。
预准备之JavaScript
目前主流的JavaScript 框架排名中，jQuery和Ext 可算是佼佼者，获得了用户的广泛好评。国内的一些框架很多也是仿照jQuery对JavaScript 进行了包装，不过这些框架的鼻祖YUI 还是坚持用自己的JavaScript 类库。
jQuery是目前用的最多的前端JavaScript 类库，据初步统计，目前jQuery的占有率已经超过46%，它算是比较轻量级的类库，对DOM 的操作也比较方便到位，支持的效果和控件也很多。同时，基于jQuery有很多扩展项目，包括jQuery UI(jQuery支持的一些控件和效果框架)、jQuery Mobile(移动端的jQuery框架)、QUnit(JavaScript 的测试框架)、Sizzle(CSS 的选择引擎)。这些补充使得jQuery框架更加完整，更令人兴奋的是，这些扩展与目前的框架基本都是兼容的，可以交叉使用，使得前端开发更加丰富。
Ext 是Sencha公司推崇的JavaScript 类库，相比jQuery，Ext JS 更重量级，动辄数兆的文件，使得Ext 在外网使用的时候会顾虑很多。但是，另一方面，在Ext JS 庞大的文件背后是Ext JS 强大的功能。Ext JS 的控件和功能可以说强大和华丽到了让人发指的程度。图表、菜单、特效，Ext JS 的控件库非常丰富，同时它的交互也非常强大，独立靠Ext JS 几乎就可以取代控制层完成于客户的交互。强大的功能，丰富的控件库，华丽的效果也使得Ext JS 成为内网开发利器。
框架鼻祖YUI 也有自己的JavaScript 类库，DOM 操作和效果处理也还比较方便，功能和控件也很齐全，但是相比jQuery和Ext JS 显得比较中庸一些。随着Yahoo!的没落，YUI 的呼声也逐渐被新起的框架淹没，想来也让人惋惜。
除了上述的三个JavaScript 类库，还有Dojo、Prototype、Mootools等众多类库，由于本文讨论的框架多采用上述框架，所以其他框架暂不讨论。
预准备之CSS
随着CSS3 的推出，浏览器对样式的支持更加上了一个层次，效果更加出众。各框架也纷纷开发出基于CSS3 的样式，让框架更加丰富。
对于CSS3，更是推出了一些预编译的扩展框架，主要是LESS、Sass 和Compass(Compass 是基于Sass 的扩展)。可以方便地进行变量定义，格式引用，函数定义等操作，并内置了大量的效果。让您的CSS 开发效率提升一个档次。根据Chris Coyier的比较，Sass+Compass几
乎完胜LESS。有兴趣的读者可以自行参考https://www.doczj.com/doc/d28928076.html,/sass-vs-less/。由于Sass 是用Ruby 开发的，所以也需要相应的Ruby 环境将文件编译成CSS 文件。
回页首国内外前端开发框架对比
首先我们先对目前国内外主流前端开发框架做一个基本的了解，之后再对他们进行一个直观的对比。
Bootstrap
Bootstrap（https://www.doczj.com/doc/d28928076.html,）是目前桌面端最为流行的开发框架，一经Twitter 推出，势不可挡。Bootstrap 主要针对桌面端市场，Bootstrap3 提出移动优先，不过目前桌面端依然还是Bootstrap 的主要目标市场。Bootstrap 主要基于jQuery进行JavaScript 处理，支持LESS 来做CSS 的扩展。如果想要在Bootstrap 框架中使用Sass，则需要通过
Bootstrap-Sass（https://https://www.doczj.com/doc/d28928076.html,/thomas-mcdonald/bootstrap-sass）项目增加兼容。Bootstrap 框架在布局、版式、控件、特效方面都非常让人满意，都预置了丰富的效果，极大方便了用户开发。在风格设置方面，还需要用户在下载时手动设置，可配置粒度非常细，相应也比较繁琐，不太直观，需要对Bootstrap 非常熟悉配置起来才能得心应手。
在浏览器兼容性方面，目前Firefox, Chrome, Opera, Safari, IE8+等主流浏览器Bootstrap 都提供支持。但是在IE 支持方面略显短板，对IE6 和IE7 支持都不是特别理想。在Bootstrap3 中甚至放弃了对IE6、IE7 的支持。不过在国内，根据CNZZ 的统计，目前IE 的占有率仍然达到46.98%，同时大量国内浏览器也是采用IE 内核。这让我们在使用Bootstrap 的时候总是有所顾忌。在Bootstrap2 上面，可以通过BSIE 项目增加对IE6 的支持，但是也不能支持全部效果。
在框架扩展方面，随着Bootstrap 的广泛使用，扩展插件和组件也非常丰富，涉及显示组件、兼容性、图表库等各个方面。
图 1. Bootstrap 的布局与效果示例
jQuery UI
jQuery UI（https://www.doczj.com/doc/d28928076.html,/）是jQuery项目组中对桌面端的扩展，包括了丰富的控件和特效，与jQuery无缝兼容。同时，jQuery UI 中预置了多种风格供用户选择，避免了千篇一律。
如果您对预置的风格不满意，还可以通过jQuery UI 的可视化界面，自助对jQuery UI 的显示效果进行配置，非常方便，够高端大气上档次。
图 2. jQuery UI 的效果示例
jQuery Mobile
jQuery Mobile (https://www.doczj.com/doc/d28928076.html,)是jQuery项目对移动端的扩展，目前支持iOS, Android, Windows Phone, Black Berry 等主流平台。具体支持情况可以参见https://www.doczj.com/doc/d28928076.html,/gbs/。
另外jQuery Mobile 在布局，控件和特效方面都很慷慨。在风格方面，与jQuery UI 类似，除了预置的风格效果之外，还支持用户可视化配置的效果。
可圈可点的是，jQuery Mobile 还与Codiqa无缝连接，用户可以直接通过拖拽实现对界面的设计，以及代码的生成。
图 3. jQuery Mobile 的效果示例
Sencha Ext JS
Sencha Ext JS（https://www.doczj.com/doc/d28928076.html,/products/extjs）是Sencha基于Ext JS 开发的前端框架，内容极其丰富，控件、特效等支持非常非常丰富，表格、图画、报告、布局、甚至数据连接，无所不包。只有您想不到，没有它办不到。基于Sass 和Compass，使得用户对格式的修改和特效制作更加方便。此外，Sencha有丰富的产品线，Sencha Desktop Packager 可以让您的应用拥有桌面应用的效果, Sencha Animator 基于CSS3 更加方便用户对特效的制作，不光支持桌面端，移动端更是不在话下。在Sencha看来，用Animator 做游戏都是轻松拿下。Sencha Space 是基于HTML5，提供制作跨平台应用的利器。同时Sencha Ext JS 对主流浏览器的支持也非常理想。
Sencha Ext JS 有着耀眼的光辉，但是光芒背后总归有点阴影。除了之前提到的Ext JS 太过重量级之外，商业化是Sencha的另一把利剑。帮助Sencha披荆斩棘之时，也把大把的码农砍在马下。Sencha规定，凡是商业化的应用，都需要付费。另外，Sencha的辅助产品也全部收费，否则只能是试用版。这里的辅助产品，其实包括了上面提到的所有产品。
图 4. Sencha Ext JS 的效果示例
Sencha Touch
Sencha Touch（https://www.doczj.com/doc/d28928076.html,/products/touch）是Sencha面向移动端的开发框架，基于HTML5 技术，保证了对大多数移动平台的支持。Sencha Touch 包括丰富的布局，控件和特效。并且Sencha Touch 对响应式支持的很好，在不同设备上，甚至在横屏和竖屏时都会显示不同的效果。这种效果是Sencha Touch 控件自适应的。Sencha Touch 也实现了对大多数移动设备的支持。Sencha Architect 是对移动端的可视化编辑工具，有着不朽的效果，但也有着不菲的身价。
同时Sencha Touch 也支持混合式App 创建，也即是基于Web 技术，配合PhoneGap (https://www.doczj.com/doc/d28928076.html,/)或者Cordova(https://www.doczj.com/doc/d28928076.html,/)之类的工具，就可以构建移动应用。Sencha Touch、jQuery Mobile、Foundation 这些前端框架负责界面和效果的编写，PhoneGap、Cordova 框架则允许通过JavaScript 和其他接口对手机设备的调用，开创了新的移动端开发模式，真正实现了移动端的跨平台开发。
Sencha GXT
Sencha GXT（https://www.doczj.com/doc/d28928076.html,/products/gxt/）是Sencha对Google 的Web Toolkit 框架的扩展。可以支持通过Java 文件的解析，生成HTML5 页面文件，可以与Java 环境无缝集成。有着丰富的控件和特效，并且可以无缝调用Google 地图等Google 应用。虽然开发时不是特别直观，但是效果还是非常丰富的。与Sencha Ext JS 丝毫不显弱势。
图 5. Sencha GXT 的效果示例
Dojo
目前唯一能与Sencha Ext JS 一较高下的框架就只有Dojo(https://www.doczj.com/doc/d28928076.html,)了。抱着IBM, VMWare等众多大腿，Dojo 的一颦一笑都额外惹人注目。Dojo 项目的产品线和功能也特别丰富。首先，Dojo 有自己的DOM 解析器Nano，是DOM 解析和处理的内核。此外，Dojo 的Web 框架有非常丰富的布局、版式、控件以及特效，对多语言以及图表的扩展支持都非常好，并支持对地图的操作。大家可以查看它的演示(https://www.doczj.com/doc/d28928076.html,/demos/)，与Ext JS
的效果进行比较。此外，Dojo 还有自己的图形化设计和开发工具Maqetta，可以通过拖拽实现设计。Dojo 的风格设置不是在下载的时候指定的，而是通过引用不同的CSS 格式来实现。Dojo 虽然比jQuery重量级不少，但是比Ext JS 还是轻量级一些，至少在文件大小上。另外，Dojo 还有自己的CDN 机制，只要通过配置，就可以对Dojo 文件进行CDN。由于有
IBM,Oracle等大佬的支持，Dojo 在与Spring 等现有框架支持方面也表现得很理想。
图 6. Dojo 的效果示例
Dojo Mobile
Dojo Mobile(https://www.doczj.com/doc/d28928076.html,/features/mobile)是Dojo 推出的移动端框架，表现也很不俗。在布局，控件，特效方面都下了不少功夫。并支持与所用平台匹配的风格设置，如果您不喜欢还可以引用不同CSS 文件来实现不同效果。
除了可以在移动端的浏览器上使用，Dojo Mobile 也支持与PhoneGap无缝连接，可以通过Dojo Mobile 开发移动App 应用。同时也具有不错的响应性（在宽屏和窄屏上的显示效果不同）。图7. Dojo Mobile 在IPhone 上的效果示例
Mootools
Mootools(https://www.doczj.com/doc/d28928076.html,)可以说是目前最轻量级的前端框架，内核js压缩完之后只有8k，完整版压缩之后也不到100k，远比其他框架要小很多。Mootools有自己的面向对象设计的内核Mootools Core。伴随着最小的文件大小，框架的功能比其他框架也要弱不少，只有在控件和特效上有少量支持。
图8. Mootools效果示例
Prototype JS
Prototype JS（https://www.doczj.com/doc/d28928076.html,）也是一个简洁的框架，有着丰富的对DOM 操作的功能，对Ajax 和JSON 支持得都非常好，在使用上与jQuery相比也相差不多。作为Rails 默认的JavaScript 框架，相信对广大开发人员也很有借鉴意义的。
在扩展方面，Scriptaculous（https://www.doczj.com/doc/d28928076.html,/）对Prototype JS 进行了丰富的扩展，主要是在动画特效、Ajax 控制、DOM 操作、单元测试方面等。
YUI
YUI（https://www.doczj.com/doc/d28928076.html,）作为开源前端框架的鼻祖，在框架上的功力非常之深。有着自己的解析DOM 的核心框架，并且在特效、动画、图表等方面都有丰富的扩展，并可以通过YQL 直接访问Yahoo！的数据。在用户经常使用的功能方面都有着不错的表现。
与jQuery灵活的语法相比，YUI 显得更加中规中矩，在代码组织、结构和模式方面都更加讲究，更体现出工程师的严谨。同时YUI 也有着丰富的产品线，拥有测试框架YUITest、文档生成框架YUIDoc、自动构建框架YUI Build，满足项目开发各方面的需求。随着Yahoo!的没落，YUI 也感觉逐渐步入暮年，但作为相当严谨完整的前端框架鼻祖，足以秒杀其他。
图9. YUI 的效果示例
Foundation
Foundation（https://www.doczj.com/doc/d28928076.html,/）是ZURB 旗下的主要面向移动端的开发框架，但是也保持对桌面端的兼容，目前已经更新到Foundation4 版本。框架主要采用jQuery和Zepto （语法酷似jQuery，但比jQuery更轻量级）作为JavaScript 基础，CSS 则基于Sass、Compass，有着很好的扩展性，并有着丰富的布局，版式和多种多样的控件与特效，非常方便开发者使用。控件的响应式效果也帮助用户识别不同浏览器效果。
ZURB 作为一个完整的项目组，包括很多原型、设计、构建、分析等一系列工具，为用户提供
完整的服务。当然，有很多服务是要收费的。
Foundation 主要以移动端风格为主，如图10 所示。
图10. Foundation 的风格示例
Kissy
Kissy（https://www.doczj.com/doc/d28928076.html,）是阿里集团自主开发的前端框架，目前在淘宝网、一淘网等阿里系网站上得到不少应用。Kissy 框架模仿jQuery编写了自己的内核Kissy Core，用于对DOM 的解析，Ajax 处理等。同时，有着丰富的控件，并实现了一些动画效果和特效。同样，在Kissy 的控件中也可以看到Bootstrap 等国外框架的影子。此外，Kissy abc项目工具可以帮助用户实现自动化构建，并有很多扩展组件方便用户使用。
应该说Kissy 是目前国内开发的最好的前端框架，在实际使用中也经过了检验，但跟国外成熟框架相比还是有一定差距。
图11. Kissy 的效果示例
Kissy Mobile
Kissy Mobile（https://www.doczj.com/doc/d28928076.html,）是Kissy 推出的移动版框架，意在开发出可以在移动浏览器和移动应用上都可以使用的框架，不过目前项目内容还比较少，控件和特效也比较少，也不具有响应式的效果。
图12. Kissy Mobile 效果示例
框架名称主要
平台基础技术布
局
CSS
版
式
控件特效风格设置
桌端
桌端
移端
桌端
移端
桌端
框架名称主要
平台基础技术布
局
CSS
版
式
控件特效风格设置
桌端
Mobile 移端
桌端
桌端
桌端
移端
桌端
移端
桌端
桌端
对于移动端的应用，jQuery Mobile, Foundation 依然是轻量级选择，Dojo Mobile 和Sencha Touch 会为您提供更加强大的功能。同时，您还可以与PhoneGap和Cordova 框架结合使用，利用Web 的技术开发移动应用。不过这种混合式开发模式兴起时间并不长，还在不断发展中。
回页首结束语
上面只是当前涌现出的前端开发框架中的一部分，相信还有更多优秀的框架还在研发中心，到此我们对“百花齐放”这一词有了更直观的感觉，也说明在沉寂了多年之后，前端开发的工作越来越获得大家的重视，也注定会越来越繁荣。文中的建议只代表笔者个人的初浅意见，大家最终的选择还要结合实际的开发需求。
学习
?Sass 与LESS 比较，从语言能力、变量处理、函数扩展等多角度详细地比较了Sass 和LESS，为用户给出了选择建议。
?PhoneGap，PhoneGap是目前广泛使用的移动端开发框架，配合PhoneGap的SDK 开发者可以通过Web 技术开发出跨平台的移动应用。
?Cordova，Cordova 是Apache 公司推出的移动开发框架，也是让开发者可以使用Web 技术开发跨平台移动应用。
?developerWorks Web development 专区：通过专门关于Web 技术的文章和教程，扩展您在网站开发方面的技能。
?developerWorks Ajax 资源中心：这是有关Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何Ajax 的新信息都能在这里找到。
?developerWorks Web 2.0 资源中心，这是有关Web 2.0 相关信息的一站式中心，包括大量Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过Web 2.0 新手入门栏目，迅速了解Web 2.0 的相关概念。
?查看HTML5 专题，了解更多和HTML5 相关的知识和动向。
讨论
?加入developerWorks中文社区。查看开发人员推动的博客、论坛、组和维基，并与其他developerWorks用户交流。
网站设计如果单靠一个一个代码码出来效率就过于低下了，如果利用网上的一些资源，只需简单的几个步骤你就可创建出更具吸引力的设计，包括菜单、背景、动画、眉头、body等设计。响应式Web设计不仅能够适用于任何屏幕尺寸，还为用户带来更完美的体验，本文将分享十款最佳的响应式Web设计开发框架，助你大大提高工作效率。 Gumby Framework
Gumby 2是建立在Sass基础上的。Sass是一款非常强大的CSS 预处理器，允许用户自主快速的开发扩展Gumby，同时提供很多新的工具来自定义和扩展Gumby框架。Gumby 2是一个非常棒的响应式CSS框架。 Get UI Kit Get UI Kit是一款轻量级、模块化的前端框架，用于开发快四且强大的 Web界面。 Foundation
Foundation是一个易用、强大而且灵活的框架，用于构建基于任何设备上的Web应用。提供多种Web上的UI 组件，如表单、按钮、标签等。 Semantic
UI是Web的灵魂！Semantic是为攻城师而制作的可复用的开源前端框架。 提供各种UI组件，使得开发更加直观、易于理解。 52Framework
52 Framework主要用于优化HTML5和CSS3的跨浏览器兼容性的框架， 可在所有主流浏览器上运行。 PureCSS
Pure是一组小的、响应式CSS模块，可用于任意Web项目中。它可作为每个网站或Web应用的起步工具，帮助开发者处理应用程序所需的所有CSS工作，同时不会让每个应用千篇一律。 Responsablecss
浅谈web前端技术 作者：周凯工作单位：成都信息工程学院 摘要 最近几年 WEB 前端开发已经成为一个很专业的方向，从业大军也与日俱增，仅杭州的D2交流会上就有 500 多人参加，且不乏许多高中同学。这说明前端开发行业在我国的兴起，已经是大势所趋。因此学习和掌握WEB相关技术如HTML 、CSS、JavaScript在日后的学习生活和工作中将大有益处。 关键词：HTMLCSSJavaScript Abstract In recent years the WEB front-end development has become a very professional direction from industry main forces, also grow with each passing day, only the Hangzhou D2 exchange will have more than 500 people attended, and there are many high school students. The software development industry in our country is arisen, already represent the general trend. Therefore the study and mastery of WEB related technologies such as HTML 、CSS 、JavaScript study in future life and work will be helpful。 Keywords:HTML CSS JavaScript web前端开发技术： 前端开发工程师是Web前端开发工程师的简称，是近五年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML、CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。Web开发技术：World Wide Web（简称Web）是随着Internet的普及使用而发展起来的一门技术，它的发明极大地方便了人们对Internet上资源的组织和访问。Web技术涉及的内容相当广泛，本书涵盖了其中诸多方面，如：HTML标识语言、Java、Applet、CGI、脚本语言、ASP和JSP
大型网站的挑战主要来自庞大的用户，高并发的访问和海量数据，任何简单的业务一旦需要处理数以P计的数据和面对数以亿计的用户，问题就会变得棘手。大型网站架构主要就是解决这类问题。网站系统架构层次如下图所示： 1、前端架构 前端指用户请求到达网站应用服务器之前经历的环节，通常不包含网站业务逻辑，不处理动态内容。 浏览器优化技术 并不是优化浏览器，而是通过优化响应页面，加快浏览器页面的加载和显示，常用的有页面缓存、合并HTTP减少请求次数、使用页面压缩等。 CDN 内容分发网络，部署在网络运营商机房，通过将静态页面内容分发到离用户最近最近的CDN 服务器，使用户可以通过最短路径获取内容。 动静分离，静态资源独立部署 静态资源，如JS、CSS等文件部署在专门的服务器集群上，和Web应用动态内容服务分离，并使用专门的（二级）域名。 图片服务 图片不是指网站Logo、按钮图标等，这些文件属于上面提到的静态资源，应该和JS、CSS 部署在一起。这里的图片指用户上传的图片，如产品图片、用户头像等，图片服务同样适用独立部署的图片服务器集群，并使用独立（二级）域名。 反向代理
部署在网站机房，在应用服务器、静态资源服务器、图片服务器之前，提供页面缓存服务。 DNS 域名服务，将域名解析成IP地址，利用DNS可以实现DNS负载均衡，配置CDN也需要修改DNS，使域名解析后指向CDN服务器。 2、应用层架构 应用层是处理网站主要业务逻辑的地方。 开发框架 网站业务是多变的，网站的大部分软件工程师都是在加班加点开发网站业务，一个好的开发框架至关重要。一个号的开发框架应该能够分离关注面，使美工、开发工程师可以各司其事，易于协作。同时还应该内置一些安全策略，防护Web用攻击。 页面渲染 将分别开发维护的动态内容和静态页面模板集成起来，组合成最终显示给用户的完整页面。 负载均衡 将多台应用服务器组成一个集群，通过负载均衡技术将用户请求分发到不同的服务器上，以应对大量用户同时访问时产生的高并发负载压力。 Session管理 为了实现高可用的应用服务器集群，应用服务器通常设计为无状态，不保存用户请求上下文信息，但是网站业务通常需要保持用户会话信息，需要专门的机制管理Session，使集群内甚至跨集群的应用服务器可以共享Session。 动态页面静态化
Web前端MVC框架的意义分析 摘要：近年来，MVC在软件开发中实现了广泛应用，但是基于前端开发逐渐趋于复杂性的背景下，MVC框架也由此成了人们关注的焦点。另外，由于MVC框架在Web前端应用中具有深远的意义，因而在此背景下深化对其的研究与分析是非常有必要的。本文从传统MVC模式基本概念分析入手，并详细阐述了Web前端MVC的意义，旨在其能推动Web前端开发工作的进一步创新与发展。 关键词：Web前端；MVC；意义 前言：Web前端开发是Web技术发展中的一个重要组成部分，在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点，即以页面为主体来展示界面中的信息。然而随着科学技术的不断进步，Web前端开发形式上变得更为复杂，但是其功能方面也逐渐实现了与用户间的相互交流。以下就是对Web前端MVC框架意义的详细阐述，望其能为现代背景下Web前端开发技术的可持续发展提供有利的文字参考。 一、传统MVC模式基本概念分析 在传统MVC模式中其应用被划分为模型层、视图层、控制层三个层次，而经过大量实践调查表明，不同层次在系统实际运行中承担着不同的职责。模型层在系统运行中的任
务即为数据处理。且数据模型层也可通过数据访问的方式来获取自身所需信息，并优化数据整合，将其应用于业务包装中，为用户提供更为高质的服务体系。视图层在系统运行中的主要任务即为显示数学模型中处理的信息等。但是，由于视图层数据显示存在着针对性特点，因而在利用其进行数据显示时应前面掌握其特性。另外，视图层中功能的发挥需要基于数据模型来完成，因此在一定程度上限制了其应用领域。控制层在系统中的主要职能即为对系统中应用程序的合理控制，并在视图数据显示中出现问题时，对其问题的发生进行合理控制，且在事件控制后作出相应响应提醒相关技术人员。另外，在控制层事件处理中模型层也承担着协助的作用，即在控制层作出相应后，模型层要及时整合数据、信息，并合理更新视图层中所显示的数据[1]。 二、前端MVC框架 就目前的现状来看，前端MVC应用最为广泛的即Backbone.js，Ember.js、Angular.js等几种。这几种前端框架都是基于MVC完成的，但是经过大量的实验表明，每种框架处理问题的方式都存在着一定差异。Backbone.js与其它框架相比其优势在于可更好的解决系统应用中层次问题，进而为用户提供更为可靠的操作平台。其次，Backbone.js 框架应用层中的视图层在模型数据修改后可及时对自身页面显示的数据进行修改，确保视图层与数据模型层数据的一
十大前端开发框架 随着互联网的不断成熟以及我们越来越多的用各种移动端的设备访问互联网，Web设计师和Web开发者的工作也变得越来越复杂。 十年前，一切都还简单得多。那个时候，大部分用户都是坐在桌子前通过一个大大的显示器来浏览我们的网页。960像素是当时比较合理的网页宽度。那些年我们的开发工作主要就是跟十几个桌面浏览器打交道，并通过添加几个浏览器的hack，来兼容诡异的旧版本 IE 浏览器。时至今日，随着过去五六年间手持电子设备的突飞猛进，一切都变了样。我们看到各种尺寸的智能手机和平板层出不穷，电子阅读器，以及电视设备上的浏览器等也不断涌现。这种设备的多样性正在与日俱增。 可以预见，在不远的将来，相对于使用台式机，越来越多的人会使用移动设备来访问互联网。事实上，已经有相当数量的一部分人只通过智能手机上网。这意味着，我们这些Web设计师和开发者需要知道如何在庞大的移动端王国里呈现以及适配我们的产品，这至关重要。在撰写本文的时候，尽管我们还没彻底搞明白如何将桌面端呈现的全部内容在手持设备中呈现同样的效果，但是用于实现这一目标的技术以及工具正在变得越来越好。 在不知道浏览设备屏幕大小的时候，最主要的策略就是使用响应式网页设计。它是一种根据设备浏览窗口的尺寸大小来输出相应页面布局的方法。小型移动设备（如智能手机以及平板电脑）上的大多数浏览器会默认将一个网页缩小到适应自己的屏幕尺寸，然后用户可以通过缩放以及滚动等方法浏览整个网页。这种方法在技术上是可行的，但是从用户体验的角度上讲却比较糟糕。小屏幕上文字太小阅读不方便，太小难以点击，缩放以及滚动的操作多多少少会让人在阅读的时候分心。 响应式网页设计利用同样的HTML文档来适配所有的终端设备，响应式网页设计会根据设备屏幕的大小加载不同的样式，从而在不同的终端设备上呈现最优的网页布局。举个例子，当你在大屏幕桌面浏览器中查看一个网页的时候，网页的内容可能是分为很多列的，并且有常见的导航条。如果你在小屏幕的智能手机上查看同样的页面，你会发现页面的内容呈现在同一列中，并且导航按钮足够大，点击起来很方便。你可以在Media Queries这个上看到很多响应式网页设计的案例。在你的浏览器中随便点开一个设计案例，然后改变浏览器窗口的大小，你会看到网页的布局会根据窗口大小相应变化。 到目前为止，我们可以看出，响应式网页设计可以有效地帮助我们应对日益增长的终端设备多样性。那么在我们设计网页的时候有哪些实际可用的工具以及技术可以用来实现响应式网页设计呢？我们每个人都需要成为web大师才能驾驭这门技术么？或者是利用我们已经掌握的web基本知识就已经足够了？目前有什么工具可以帮到我们么？ 这时候前端开发框架华丽登场。响应式网页设计实现起来并不困难，但是要让它在所有的目标设备上都正常运作会有一点小棘手。框架可以让这一工作变得简单。利用框架，你可以花最少的力气创建响应式且符合标准的，一切都很简单并且具有一致性。使用框架有很多好处，比如说简单快速，以及在不同的设备之间的一致性等等。框架最大的优势就是简单易用，即
原文在我的博客中，欢迎大家来访交流https://www.doczj.com/doc/d28928076.html,/blog/697596 强调一下，这篇日志主要还是针对想学前端开发的新朋友写的，不是说我有什么独特见解，而是比较客观的状态，就各种框架的异同和应用场合，需要注意的地方做简单描述，不做具体深入分析，有的地方比较抽象，对于抽象之处大家可以到网上或各大高手博客中深入学习，当然也可以与我继续探讨。 一直以来对Web前端开发兴趣颇深，用过一些框架产品。在JavaEye上看到一些刚接触前端开发朋友的疑问，犹豫这些产品的前景利弊，不知从何入手。想把自己的一点经验分享给大家，如有不到位之处请一起来纠正。 jQuery 1. 绝对的万金油，核心js只有50K，占用带宽小，门户网站、管理系统，用在哪都可以。 2. jQuery是对js底层dom操作封装最薄的一个框架，没有大量的专有对象，多为提供函数进行dom操作。准确的说，它不是偏重于富客户端的框架，而是侧重于对js dom编程。下面几种才是完整的富客户端的框架。 3. 我认为它最大的三个亮点，一是支持CSS3的大量选择符，想定位或选择一个html元素简直轻而易举。二是灵活便捷的Ajax请求和回调操作。三是事件绑定功能，内部封装了很多事件，想统一为一个页面上的一些元素添加事件很方便，这也提高了复用性和可维护性，避免了页面中出现大量的html属性。合理的编码可以使html与js, css分离开，便于维护。 4. 此外它也封装了很多常用的操作，例如节点的添加删除、常用的动画效果、逻辑判断比较等等。避免了直接使用dom api进行繁琐的操作。 5. 本身提供了可扩展的函数，可以自己编写插件与核心jQuery对象进行集成使用。这也是常用的手段，只要你理解js面向对象编程，熟悉jQuery API，就能写出很多定制的插件，复用在各种地方。 6. 至于jQueryUI，与其他框架不一样的地方在于，它很少用js去生成html，而是把现有的html通过jQueryUI的API加工成想要的效果，关于这点是好是坏，我觉得就是见仁见智的问题了，没有必要争论什么。 7. 新生的jQuery EasyUI不错。 8. 如果今后的更新都保持现在这种模式，我认为它的前景很乐观，什么时候javascript完蛋了才轮到它玩完。 ExtJS 1. 一整套带有UI的js库，封装得很多，很厚，核心js就600多K，这么大的东西门户网站当然就别想了，里面的效果当然也不会运用到门户网站，所以它是专门为管理系统而生的。因为局域网不会有带宽问题。 2. 它与jQuery不同，基本上是纯用js来生成html的，页面里只需引入各个ExtJS库和你自己写的js，不会出现很多html内容，body里基本没什么。所以优化就显得重要了，不然会
web前端框架有哪些 为希望干杯，为梦想聚首，一群来自五湖四海的人为了梦想相聚在千锋HTML5培训班。千锋HTML5学习的日子艰苦却幸福着，在暗夜中遥望着曙光的黎明。 4个月的学习已经过去，时间过得既快又慢，学习的时候感觉很慢，毕业之后又感觉时间过的好快，虽然之前大家不认识，后来也只是认识了四个月，但我们可以说是同学，这种感情确实是最美好的。这期间的各种体验都是和大家分不开的，学习知识固然重要，但在这其中的同窗之情更是值得铭记与收藏的，那种学习氛围和互帮互助的精神让我觉得来这学习是值得的，尤其是后来各种面试时，互相之间的感情更是得到升华。
还有面试时，最起码老师教过的东西，一定要说的出来，说的越细越好，一定要表现出自己的自信。对于自己做过的练习心里要有数，要知道具体怎么实现的，在面试前，一定要把之前的知识点全部过一遍，每个知识点，每个小的方法，确切的知道他们的用处、原理等，不能放过细节的地方，因为一些细节的东西很可能是面试官判断你是否真的会做的关键，比如面试官随便让你举例js中Math 的方法，你要说出来并具体解释用法，如果像这种基础的东西答的都有瑕疵的话，对你影响可能会很大，不要因为之前学过的东西没答上来而影响你的面试结果。即使面试的时候碰见一时听上去不会或是没听过的问题，那就和他说相关的你会的或你知道的东西，不要突兀的就是“我不知道”这种答案。自信很重要的，还有带着自己的作品以备不时之需，尤其是有自己的独立作品会更好，毕竟在学校做的项目大家都有，手机端能直接展示的可能效果会更好。
总之，四个月感触很多，不只是学习方面，还有在千锋HTML5培训班收获到的满满的情谊。
WEB前端（HTML5、CSS3、JS技术、jQuery、VUE等主流框架） 开发最佳实践培训班 一、培训简介 HTML5/CSS3是现阶段非常流行，也是很多企业所要求的技术。优点主要在于应用范围广泛广，可以进行跨平台使用。增加了
四、授课专家 张老师北京航空航天大学软件工程硕士, 10多年IT 工作经验，熟悉Html5、Html5游戏开发，Cocos2d-html5，QuarkJS，JQuery，JQueryMobile，CSS，BootStrap，Mui框架，HBuilder，CSS3，Axure，JSON，C#，JavaScript，PHP，PhpCMS等开发技术；熟悉ICONIX，Scrum等项目管理过程并熟练应用，熟悉UML建模，MVC，设计模式，架构思想，熟悉软件测试相关技能，熟悉软件测试管理过程。多年项目管理经验，千人教育培训经验。 郭老师计算机硕士研究生、中培教育高级培训讲师，参与组织并完成了上百个个大中型项目。主要专业特长包括HTML5、移动前端、CSS3、AngularJS、React native、VueJS、BootStrap、Jquery、ZeptoJS、Ajax、JSON、JSONP、Mui框架等相关技术，对Html5应用开发及开发模式有深入研究，熟悉模块化开发，熟悉IT项目管理，熟悉ICONIX、Scrum等软件研发过程改进、详细设计、IT规划。擅长UML建模、MVC、设计模式、架构思想。多年项目管理经验，千人教育培训经验姚老师在电信、电力、金融行业从事 HTML5、Java、Android、PHP开发工作，擅长Web前端、HTML5、Java、Android、PHP。多年软件开发经验，八年IT职业教育经验。2002年开始从事开发工作，具备十余年的开发、管理和培训经验。曾经主持开发《教学管理系统》《酒店管理系统》《车辆跟踪定位系统》《农信社信贷管理系统》等多个大型项目。在Android、iOS、HTML5、游戏开发、JavaME、JavaEE、Linux等领域都有深入研究，现为IT技术自由作家兼HTML5、Android、iOS、JavaME、JavaEE 培训讲师。曾出版过《Android应用开发详解》、《iOS 应用开发详解》《JavaEE Web工程师
前端开发框架 2015-4-28 孔祥虎
目录 第一章背景 (1) 1.1优势 (1) 1.2js框架 (1) 1.2.1angularjs.js (1) 1.2.2me.js (1) 1.3本地程序框架 (1) 1.3.1node-webkit (1) 第二章angular.js (2) 2.1什么是angularjs (2) 2.2端对端的解决方案 (3) 2.3理念 (3) 2.4擅长的领域 (4) 2.5一个简单的例子 (4) 2.5.1需求 (4) 2.5.2代码 (4) 2.5.3工作原理 (6) 2.5.4常用的指令 (7) 第三章me.js (8) 3.1为什么要me (8) 3.2简单的例子 (9) 3.2.1目录结构 (9)
3.2.2引用jQuery、AngularJS、me.js (9) 3.2.3创建主页面index.html (9) 3.2.4创建子页面tpl/a.html (10) 3.2.5创建子页面a的控制器js-ctrl/a.js (11) 3.2.6创建子页面tpl/b.html (11) 3.2.7创建子页面b的控制器js-ctrl/b.js (12) 3.3me对外的接口 (12) 3.3.1ajax (12) 3.3.2config (13) 3.3.3plugin (14) 3.3.4global (14) 3.3.5directive (15) 3.3.6run (15) 3.3.7ready (16) 3.3.8show (16) 3.3.9hide (17) 3.3.10param (17) 3.3.11trigger (17) 3.3.12page (18) 3.3.13define (18) 3.3.14require (18) 3.3.15control (18)
项目正在进入开发阶段之前，技术选型一定要做好，不能因为工期紧、压力大就草率为之。采用某个第三方组件之前必须关注下它的使用者都有哪些、文档丰富不丰富、授权协议、网上的评价如何。最后还要自己实现一些demo测试一下。否则可能会在开发过程中导致严重后果。 类似产品：jquery miniUI, jquery easyui, extjs, dhtml, ligerUI, DWZ，dojo 经验组合：jquery ui + jqgrid + zTree, operamasks-ui , QUI 相同： jquery easyUI与Jquery miniUI在功能和编码上大同小异。 对流量要求比较严格的话，最好不要使用extjs、easyui、miniui等，安全都是问题。 在浏览器兼容性上都有瑕疵。 区别： 1.easyUI是jquery库的一套UI组件库，是轻量级的，是page级的。 easyUI是基于jquery的，jquery2.X以上的版本不再支持IE6/7/8，easyUI 1.3.3使用jquery2.0，由于有很多HTML5特性，不再支持IE6/7/8。 Layout嵌套有问题。 可以下载源码（没有完全开放），发布的是压缩版，为每个组件提供了单独的js文件。针对个人（小公司）不收费，公司收费$499 2. miniUI不提供源码，收费比较贵。 3. ligerUI源码完全开放。技术含量高，但是bug较多，版本较少更新。 Layout嵌套有问题。 Grid得到选择的数据行、添加数据等操作都不好使。 各组件提供的api与文档描述出入较大，开放的api不够丰富，事件和方法太少。 4. Ext框架是一个完整的framework，是重量级别的，是应用application级的。 它控件库丰富，扩展和维护都比较方便。面向对象的编程思想，每个控件之间可以相互通讯。功能强大，加载运行的速度会慢一些。 后台管理可以使用Ext，前端的话用户体验不好。 适合用在内部网络，例如mes系统，内部办公系统之类的。 ExtJs 2.1以上版本商用需要购买商业授权。 5.Jquery UI适合对界面要求不是太高的，运行速度较快。 缺乏组件tree、grid、layout、form、menu，前三个都有专门的插件可以下载到。 【注：tree推荐使用ztree，中国人自己开发的，网上评价很好，更新也很快。缺点是每次更新，api变化都挺大，一般不敢在项目中升级，否则恐怕要在用到ztree的地方改好多东西。 grid推荐使用jqGrid，大版本号已经升到4，搜索jquery grid、jquery datagrid排名第一，功能丰富，提供普通的datagrid treegrid和分组grid，还有分页条功能。 layout推荐使用https://www.doczj.com/doc/d28928076.html,yout。模仿ext的borderlayout实现，但是有很多差异。支持嵌套。样式比较难看，不过修改比较容易。 jquery ui theme可以保证风格一致。】 使用MIT协议，开源。
竭诚为您提供优质文档/双击可除 web后台ui框架模板 篇一：十大前端开发框架 十大前端开发框架 随着互联网的不断成熟以及我们越来越多的用各种移 动端的设备访问互联网，web设计师和web开发者的工作也 变得越来越复杂。 十年前，一切都还简单得多。那个时候，大部分用户都是坐在桌子前通过一个大大的显示器来浏览我们的网页。 960像素是当时比较合理的网页宽度。那些年我们的开发工 作主要就是跟十几个桌面浏览器打交道，并通过添加几个浏览器的hack，来兼容诡异的旧版本ie浏览器。时至今日， 随着过去五六年间手持电子设备的突飞猛进，一切都变了样。我们看到各种尺寸的智能手机和平板层出不穷，电子阅读器，以及电视设备上的浏览器等也不断涌现。这种设备的多样性正在与日俱增。 可以预见，在不远的将来，相对于使用台式机，越来越多的人会使用移动设备来访问互联网。事实上，已经有相当数量的一部分人只通过智能手机上网。这意味着，我们这些
web设计师和开发者需要知道如何在庞大的移动端王国里呈 现以及适配我们的产品，这至关重要。在撰写本文的时候，尽管我们还没彻底搞明白如何将桌面端呈现的全部内容在 手持设备中呈现同样的效果，但是用于实现这一目标的技术以及工具正在变得越来越好。 在不知道浏览设备屏幕大小的时候，最主要的策略就是使用响应式网页设计。它是一种根据设备浏览窗口的尺寸大小来输出相应页面布局的方法。小型移动设备（如智能手机以及平板电脑）上的大多数浏览器会默认将一个网页缩小到适应自己的屏幕尺寸，然后用户可以通过缩放以及滚动等方法浏览整个网页。这种方法在技术上是可行的，但是从用户体验的角度上讲却比较糟糕。小屏幕上文字太小阅读不方便，链接太小难以点击，缩放以及滚动的操作多多少少会让人在阅读的时候分心。 响应式网页设计利用同样的html文档来适配所有的终 端设备，响应式网页设计会根据设备屏幕的大小加载不同的样式，从而在不同的终端设备上呈现最优的网页布局。举个例子，当你在大屏幕桌面浏览器中查看一个网页的时候，网页的内容可能是分为很多列的，并且有常见的导航条。如果你在小屏幕的智能手机上查看同样的页面，你会发现页面的内容呈现在同一列中，并且导航按钮足够大，点击起来很方便。你可以在mediaqueries这个网站上看到很多响应式网
Web前端VS Web后端两者的区别 想从事软件业的毕业生们大多要从基础的程序员做起。相较于其他的职位，Web 软件开发工程师是一个技术要求较高、前景较好的工作。Web软件开发工程师可以分为Web前端和后端开发。那什么是Web前端，什么是Web后端呢？它们的差异在哪里？在工作中又分别会遇到怎么样的问题呢？乔布小编浏览了大量的资源，为童鞋们整理了这样一份资料，主要分为前端和后端的差异和它们各自所面临的挑战。希望对你有所帮助！ Web前端和后端的差异 职能上的差异 首先，我们要分清Web designer（网页设计师）和Web developer（网页开发者，也称程序员）的差异。两者之间的差异主要表现在：一个是有关网站的视
觉或美学方面，被称为“前端”；另一个则是看不见的编码方面的设计，被称为“后端”。简而言之，漂亮的网站界面都是出自网页设计师之手，而牛逼强大的功能则是网页开发者的杰作。 除了职能上的差异之外，两者还有其他许多差异。国外设计网站Downgraf特意制作了一张图表来展示——网页设计师和网页开发者（程序员）都留胡茬，一个没钱，一个没时间；两者都喜欢内涵T恤，一个走字体设计路线，一个走代码风；两者都配自家设备，一个必带MacBook Pro，一个只挑小键盘……除了以上种种差异，他们还有一个共同点：害怕MM，看来都是“宅”惹的祸。 再来看一下前端设计师与后端开发师的比较搞怪而又形象的区分（图片来自雷锋网）：
技术上的差异 我们再从技术的方面，瞧瞧在实际的招聘中，各大企业要求前端人员与后端人员分别具备怎样的能力。 Web前端： 1.精通HTML，能够书写语义合理，结构清晰，易维护的HTML结构。 2.精通CSS，能够还原视觉设计，并兼容业界承认的主流浏览器。
前端架构体系技术 一、框架与组件bootstrap等UI框架设计与实现 伸缩布局：grid网格布局 基础UI样式：元素reset、按钮、图片、菜单、表单 组件UI样式：按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告 响应式布局：布局、结构、样式、媒体、javascript响应式 第三方插件：插件管理 jQuery、zepto使用原理以及插件开发 支持amd、cmd、全局变量的模块化封装
$.fn.method = function(){} mvc/mvvm框架原理设计 directive设计：html、text、class、html、attr、repeat、ref，可扩展 filter设计：bool、upperCase、lowerCase，可扩展 表达式设计：if-else等实现 viewmodel结构设计：例如数据，元素，方法的挂载与作用域 数据更变检测：函数触发，脏数据检测、对象hijacking polymer/angular2思想与设计思路
import技术 template和script引入方式css样式命名空间隔离 简单复用第三方库reactjs原理与使用 virtual dom单向数据绑定js执行语法方式 UI由状态控制commonJS/AMD/CMD
模块引入 模块定义 模块标识 UMD解决不同规范兼容性的问题，例如webpack封装模块懒执行(CMD)与与预执行(AMD) loadJs模块化加载原理与实现 创建script标签，需要id映射到资源url onload加载模块队列判断 全部加载完成后触发 加载失败问题优化
《Web前端框架应用》课程设计 课程设计总体任务： 灵活运用所学知识（HTML、CSS、Bootstrap），联系实际，设计制作出具有一定特色的主题网站。网站题材不限，除主页外至少3个子页，内容充实完整，界面美观，结构合理，操作方便。 任务要求： 1、创建站点 根文件夹为自己的班级学号姓名，如“01_16XX_张三”，根文件夹下面依次放置主页index.html以及其他类别文件夹比如css、js 、fonts、img、webs 等文件夹。 2、主题鲜明 主题不限，根据自己的兴趣爱好完成课程设计，可以发挥自己的创意、张扬自己的个性。以下是一些参考主题(除个人简历、个人主页外)： （1）企业宣传网站：介绍企业形象、相关产品、企业文化、相关活动等； （2）电子商务网站：为某一知名企业重新设计一个网站； （3）旅游网站：介绍自己家乡风光、风土人情、景点等； （4）精品课程网站：介绍某一门课程的教学信息资源、主讲教师介绍、课程介绍等。 （5）休闲娱乐网站：介绍音乐、动漫、游戏、体育、书籍等。 3、技术要求 结合本课程所学知识，利用CSS样式和栅格系统进行布局，并且利用 Bootstrap框架中的CSS组件和javascript插件丰富页面，增加页面的美观 和互动。 4、内容要求 （1）主题鲜明，思想明确，内容健康，积极向上；突出主题，全站点围绕一个主题及其相关内容进行设计，设计思路清晰。 （2）各栏目功能明确，方便使用，页面内容清晰明了。 （3）子页面及其父页面方便返回访问，打开关闭方便。 （4）页面上图片、表格、动画效果元素不变形，不错位。 （5）页面设计美观大方，图片使用得当，色彩协调，布局合理。 5、运行效果 能在中等和超小型设备下正常显示作品 页面内容水平居中 操作方便，各网页之间连通无障碍 无明显错误
2018年最新全套Web前端开发学习教程 前端很火，学习前端的人也多【前端开发月薪多少？>>】。泛艺学苑在这里为大家制作这份2018年最新全套Web前端开发学习教程，让正在学习前端的小伙伴们有一份系统专业的学习资源和学习指导。【前端开发教程下载>>】 一、学习Web前端开发线路图 二、学习Web前端教程篇 第一阶段：基础教程 第一章HTML基础
第一节了解HTML及W3C标准第二节HTML标签 第三节HTML框架 第二章CSS基础 第一节CSS基础语法和选择器第二节CSS盒模型 第三节CSS常用属性 第四节CSS定位 第三章JS基础 第一节JS简介 第二节JS变量和数据类型 第三节JS函数及流程控制 第四节JS常用对象 第四章jQuery的使用 第一节jQuery的基本使用 第二节jQuery选择器 第三节jQuery效果 第四节jQuery操作DOM 第五节jQuery页面效果插件
第六节jQuery动画插件 第二阶段：进阶教程 第五章HTML5 第一节HTML5概述 第二节新增元素及属性1 第三节新增元素及属性2 第四节Canvas、SVG 第五节Web存储 第六节应用缓存及web works 第七节服务器推送事件 第六章CSS3 第一节CSS3基础 第二节CSS3盒模型 第三节CSS3布局 第四节CSS3动画 第五节Web文字及兼容性 第七章bootstrap 第一节响应式概念 第二节C栅格系统
第三节Bootstrap常用模板 第四节Less和SASS 第八章移动Web开发 第一节视口和CSS单位 第二节流式布局 第三节弹性盒模型 第四节移动终端事件处理 第五节常见的移动端布局 第六节跨终端Web适配方案 第七节移动Web开发综合案例 第九章JS进阶 第一节DOM模型 第二节JS浏览器对象 第三节JS面向对象 第四节常用设计模式 第三阶段拔高教程 第十章前端自动化 第一节NPM包管工具 第二节版本管理工具
2018web前端开发值得关注的几个趋势 2017悄然过去，2018已经来到。2018年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。 1.PWA PWA(Progressive Web Apps)由谷歌提出，用前沿的技术开发，让网页使用如同App般的体验的一系列方案。明确的一点就是：PWA就是一个网页, 可以通过前沿的技术开发出一个网页应用。 自从谷歌提出PWA后，就持续获得了业界的关注，热度可见一斑。就在今年，谷歌也宣布：PWA将获得与安卓原生应用同等的待遇与权限。这就意味着以后的网页和APP将越发将近，那么关注度将会进一步上升。 2.TypeScript TypeScript由微软开发。它是JavaScript的一个超集，自由和开源的编程语言。在这个语言中，添加了可选的静态类型和基于类的面向对象编程。 angular已经开始使用TypeScript进行开发，react和vue也进一步加深对TypeScript 的支持。不难发现TypeScript的火热程度！ 3.parcel能给webpack带来多大的威胁
webpack大家都知道是JavaScript模块打包工具，简单来说就是把各个模块就行分析，编译，打包等，使产出的文件可以在浏览器中运行。 在2017末就出现了一个黑马：parcel，出乎了大多数人的意料也算是2017的最大惊喜之一。说到parcel的最大优势，貌似就是webpack的最大劣势：配置和性能！parcel号称零配置，多核打包，并且使用文件缓存，在速度上比webpack快了将近10倍！ 4.WebAssembly 由谷歌、微软、Mozilla、苹果等公司合作的一个面向Web的通用二进制和文本格式的项目。2017年，chrome，火狐，IE，Safari四个浏览器统一通过了WebAssembly的方案，这是很少见的情况，我所了解的是第一次出现这样的统一情况，可见四个浏览器厂商对WebAssembly的重视。 5.react,angular,vue三驾马车 2017年，react发展迅猛，vue更是扮演框架黑马的角色，而angular虽然关注度不如以前，但是不容忽视。在2017的调查报告中，趋势基本上是react已经占据主流，不使用框架位居第二，angular1，angular2分列三四。 vue在2017年很火，但在2018年vue的潜力不容小觑。虽然超过react的可能性不是很大，但是位置依然会提升 无论如何，框架这个没有最好，只有最适合。三驾马车也没有说一定要全部都要会！如果js基础好，学习框架会比较容易上手。如果前端的不学js，直接上手框架，会很吃力，很容易懵。 6.人工智能和大数据 人工智能和大数据，不是一门技术，而是一个领域，也是一个流行的趋势，因此一些数据可视化的工具（echart，D3等）和人工智能的库都得以受到关注！ 7.yarn VS npm 相信接触到前端工程化，模块化的开发者都不可避免地使用npm进行功能包的安装依赖。尤其是在node.js的初期，npm就是工程化的一个标配。但是2017年，npm的地位显然是受到了yarn的威胁！今年的调查结果，yarn还超越了npm。yarn的优势在于：快，安全，和一些感人细节！如果照着情况下去，差距会逐渐变大！
2015年最棒的HTML5框架TOP 5 大多数的Web开发者一直在用关键点来寻找动态的框架，这样能简化他们的设计和开发工作。 HTML5框架在所有的Web浏览器和手机应用上都展现了优秀的性能。它不仅简化了HTML5开发中CSS开发的沉重负担，还提高了网站的可见性。主要的原因是HTML5提供了独有的特征，例如特殊的架构标签，动画，浏览器支持等。 最近，大量的HTML5框架在行业内可免费获得，这使得HTML5开发者们不知道到底哪一个框架才是最好的。为了避免上述问题，本文列出2015年最流行的5个HTML5框架，如果你是Web设计者并准备用HTML5进行设计工作，就一起简单讨论下吧。 Ionic Ionic 是一个神奇的框架和强大前端开源系统，使用先进的Web技术，如CSS、HTML和JS 来创建令人惊叹的手机应用。它已经定制了在所有手机设备上的快速操作，并且确保简单的功能和大量的手机组件。 您可以通过一个命令创建来测试和使用基于任何平台上的ionic应用。此外，该框架为它自己的组件提供了一套Angular指令（自定义的HTML元素），从而使它可以简单的编写一行HTML 代码。类似指令，它使用视图动画逻辑，异步通信，Angular 的触摸识别和HTML 清洁处理。 Siimpler
Siimpler 是一个简单的HTML开发框架，他可以通过选择你自己喜欢的部分，来帮助你快速又简单地创建HTML5开发结构。根据你的项目需求，你可运用Siimpler开发你自己熟悉的前端结构。网络设计者们也可以通过使用Siimpler框架类的文件和文件夹来无缝的开始一个Web项目。 Foundation Foundation 是全球最精妙的前端响应框架，同时，它可以兼容所有的浏览器和网络设备。Foundation 拥有移动友好型的用户接口，并且获得了许多的原件来帮助你快速又完美的建立一个响应站点。Foundation 设置了许多关键的特性，例如HTML，CSS UI 原件，模板，小代码块，含有按钮，表单，字体，导航等功能的响应组件。 针对于所有的最新的桌面浏览器和触屏设备，LimeJS 对于有用户经验的游戏开发者而言是最好的和最强大的开发框架。LimeJS 对于在线游戏开发而言能够带来更好的功能和更快的开发过程，而且适合所有的浏览器和触屏设备。 LimeJS
web前端开发工程师岗位的职责文档2篇 Responsibilities document of web front end developme nt engineer 编订：JinTai College
web前端开发工程师岗位的职责文档2篇 小泰温馨提示：岗位职责是指一个岗位所需要去完成的工作内容以及应当承担的责任范围，明确岗位的目标和责任，规范工作内容、规范操作行为等以此提升工作产能效益最大化。本文档根据岗位职责要求展开说明，具有实践指导意义，便于学习和使用，本文下载后内容可随意修改调整修改及打印。 本文简要目录如下：【下载该文档后使用Word打开，按住键盘Ctrl键且鼠标单击目录内容即可跳转到对应篇章】 1、篇章1：web前端开发工程师岗位的职责文档 2、篇章2：web前端开发工程师工作的主要职责描述文档 篇章1:web前端开发工程师岗位的职责文档 web前端开发工程师需要与后端开发团队紧密配合，确保代码有效对接，优化前端应用性能。以下是小泰整理的web前端开发工程师岗位的职责。 web前端开发工程师岗位的职责1 1、负责产品的前端代码开发、页面重构以及交互设计逻辑处理;
2、根据产品文档开发高性能、高兼容性的前端代码，完成脚本通用类库、框架、UI控件的编写，并形成文档; 3、与用户、美工、编码工程师等协作实现良好的用户交互; 4、评估、优化网站前端性能。 1、2年以上JavaScript脚本开发经验，对OOP有一定的认识; 2、精通HTML5/XHTML、CSS 3、JavaScript、AJAX、JSON、XML等技术; 3、至少熟练掌握一种JS框架，如：Jquery框架，熟悉对象化Javascript编程; 4、有跨浏览器开发经验，理解不同浏览器之间的差异，写出代码具有良好的兼容性; 5、具有优化JavaScript性能的能力; 6、掌握软件设计流程和软件工程规范，具备良好而规范的设计和技术文档编写能力，拥有良好的代码习惯，逻辑结构清晰，命名规范，代码冗余率低;
一、国内外主流前端开发框架技术对比
框架名称 主要 平台 桌面端 jQuery, LESS 丰富 丰 富 丰富 丰富 基础技术 布局 CSS 控件 特效 风格设 置 手动配 置 一般 一般 简单
Ratchet
移动端
HTML5,css
简单
中 等
桌面端
jQuery
-
-
丰富
丰富 预置/可 视化配 置
移动端
jQuery
丰富
-
丰富
丰富 预置/可 视化配 置
桌面端 Ext JS, Sass
丰富
-
极丰 富
极丰 富 丰富
预置
移动端
HTML5
丰富
-
丰富
-
Boostrap
Bootstrap 是目前桌面端最为流行的开发框架，一经推出，势不可挡。 Boostrap 来自于 Twitter，是一个基于 HTML，CSS，JAVASCRIPT 的时尚的、直观 的、强大的流行前端框架及交互组件集，可用于快速，简单构建你的网站。 Bootstrap 主要针对桌面端市场，Bootstrap3 提出移动优先，不过目前桌面端 依然还是 Bootstrap 的主要目标市场。 Bootstrap 主要基于 jQuery 进行
JavaScript 处理， 支持 LESS 来做 CSS 的扩展。 Bootstrap 框架在布局、 版式、 控件、特效方面都非常让人满意，都预置了丰富的效果，极大方便了用户开发。 在风格设置方面，还需要用户在下载时手动设置，可配置粒度非常细，相应也比 较繁琐，不太直观，需要对 Bootstrap 非常熟悉配置起来才能得心应手。在浏 览器兼容性方面，目前 Firefox, Chrome, Opera, Safari, IE8+等主流浏览器 Bootstrap 都提供支持。 但是在 IE 支持方面略显短板，对 IE6 和 IE7 支持都 不是特别理想。在 Bootstrap3 中甚至放弃了对 IE6、IE7 的支持。在框架扩展 方面，随着 Bootstrap 的广泛使用，扩展插件和组件也非常丰富，涉及显示组 件、兼容性、图表库等各个方面。
Bootstrap 拥有以下特性： ? ? ? ? ? ? ? ? ? ? ? 适应各种技术水平 跨设备，跨浏览器 12 列栅格布局 响应式设计 样式化的文档 不断完善的库 定制的 jQuery 插件：Bootstrap 提供了定制的 jQuery 内置插件。 用 LESS 构建 支持 HTML5 标签和语法 支持 CSS3 免费开源
Ratchet
Ratchet 最初是 Twitter 的一套面向 iOS 原生应用程序的 HTML/CSS 原型。 在 看到这些原型对于开发过程多么重要之后， 团队决定将其作为一个移动应用程序 原型设计工具开源。团队很快就清楚地认识到，Ratchet 不仅非常适合构建移动 应用程序原型，而且还非常适合完备的移动应用程序。Ratchet 并没有试图在平 台或浏览器方面使用 CSS 做任何特别的事。它的目标是保持简洁，那样更容易理 解和实现。