前端框架

近年来前端开发趋势 1.旧浏览器 逐渐淘汰，移动端需求增加: 旧浏览器主要指的是IE6-IE8，它是不支持ES5特性的；IE9+、chrome、sarafi、firefox对ES5是完全支持的，移动端大部分浏览器是基于webkit内核，所以ES5在移动端也是全面支持的，因此vue可以在移动端以及现代浏览器中大显身手。 2.前端交互越来越多，功能越来越复杂 : 现在的前端可谓是包罗万象，比如高大上的技术库和框架、酷炫的运营活动页面、H5小游戏，当然前端技术的应用在更多具有商业价值的应用上，比如下图。 3.架构从传统后台MVC向REST API+ 前端 MV*(MVC、MVP、MVVM) 迁移 在传统的MVC下，当前前端和后端发生数据交互后会刷新整个页面，从而导致比较差的用户体验。因此我们通过Ajax的方式和后端REST API作通讯，异步的刷新页面的某个区块，来优化和提升体验，同时把MVC拿到前端来做 MVVM框架 1.MVVM框架基本概念 :它主要包括各部分View、ViewModel、Model,如下图。在MVVM架构下，视图和数据是不能直接通讯的，它会通过ViewModel这个中间件来通讯。ViewModel起的是一个观察者的职位:当数据变化，ViewModel观察到变化，并通知视图做相应的更新；而用户操作视图，ViewModel也能监听到变化，然后通知数据做改动

近年来前端开发趋势 1.旧浏览器 逐渐淘汰，移动端需求增加: 旧浏览器主要指的是IE6-IE8，它是不支持ES5特性的；IE9+、chrome、sarafi、firefox对ES5是完全支持的，移动端大部分浏览器是基于webkit内核，所以ES5在移动端也是全面支持的，因此vue可以在移动端以及现代浏览器中大显身手。 2.前端交互越来越多，功能越来越复杂 : 现在的前端可谓是包罗万象，比如高大上的技术库和框架、酷炫的运营活动页面、H5小游戏，当然前端技术的应用在更多具有商业价值的应用上，比如下图。 3.架构从传统后台MVC向REST API+ 前端 MV*(MVC、MVP、MVVM) 迁移 在传统的MVC下，当前前端和后端发生数据交互后会刷新整个页面，从而导致比较差的用户体验。因此我们通过Ajax的方式和后端REST API作通讯，异步的刷新页面的某个区块，来优化和提升体验，同时把MVC拿到前端来做 回到顶部(go to top) MVVM框架 1.MVVM框架基本概念 :它主要包括各部分View、ViewModel、Model,如下图。在MVVM架构下，视图和数据是不能直接通讯的，它会通过ViewModel这个中间件来通讯。ViewModel起的是一个观察者的职位:当数据变化，ViewModel观察到变化，并通知视图做相应的更新；而用户操作视图，ViewModel也能监听到变化

Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。 课程目标 掌握前端框架Bootstrap的使用 适合人群 前端开发者 原文链接 来源： https://www.cnblogs.com/zhangyangzai/p/7217796.html

（一）Bootstrap简介 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。 Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：模式对话框、标签页、滚动条、弹出框等。 官方网址是： http://twitter.github.io/bootstrap/ 最新文件下载： http://twitter.github.io/bootstrap/assets/bootstrap.zip ，下载下来的压缩包中，有一个doc目录，事实上就是官方网站的大部分页面了，是一个很好的范例。 后面的文章大部分内容是从官方网站翻译或者网络搜索而来

首先我想说明一下，我们通常说的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这种了。其实内容真的很多很多，前端任重而道远啊~ 常见框架 1、flex Apache基金会今天发布了Flex 4.8版本，这是Adobe将Flex捐献给Apache基金会后发布的第一个版本。 需要注意的是，Flex目前还在孵化阶段，还不是Apache的正式项目，Flex 4

解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏） 进入2019年，大前端技术生态似乎进入到了一个相对稳定的环境，React在2013年发布至今已经6年时间了，Vue 1.0在2015年发布，至今也有4年时间了。 整个业界在前端框架不断迭代中，也寻找到了许多突破方向，例如跨平台中的RN、Flutter，服务端GraphQL、Serverless，前端和客户端的融合越来越紧密，前端在Node和Electron的加持下，也扩展了自己的版图到服务端和桌面。 同时，随着前端开发越来越复杂，整个前端研发也经历了人工化->工具化->工程化->智能化的演变。目前各个大厂在工程化实践不断迭代，出现了许多Low/No Code等前端智能化解决方案，工程化实践也深入到研发的各个环节，不断提升前端研发的标准化能力。而且，随着机器学习的加入，各类UI2Code的解决方案也开始出现，前端研发进入了一个完全不同的时代。 随着端上能力的不断增强，现在在端上做的事情越来越多。首先，数据可视化方向，各类图表、地图、3D等等数据可视化的尝试变得越来越多。其次，伴随着人工智能的加持，在端上的人工智能应用也变的普及，减少了服务端的交互，提高了系统的实时响应能力。最后，随着Webassembly等技术的应用，有可能将前端运行能力再提升一个档次，可以进行更为复杂的端上计算。 为了了解当前前端的发展趋势

综合/资源 frontend-dev-bookmarks 一个巨大的前端开发资源清单。 star:15000 front-end-collect 分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。 star:860 Front-end-Interview-questions 史上最全前端开发面试问题及答案 f2e-hub 包含 Animation，UI，dialog，Carousels，color，image，workflow 等。 star:100 awesome-javascript 一系列很棒的 javascript 库，资源。 star:3100 fks 前端技能汇总，包含前端知识架构，后端知识， linux ，书籍推荐等。 star:4000 node123 node.js 中文资料导航。 star:1200 mobile-web-favorites 移动端web开发收藏夹。 star:200 gulp-book Gulp 入门指南 样式/UI Semantic-UI 让你使用任何 HTML 标签 来表现UI控件。 这是一款语义化设计的前端框架，为攻城师而制作的可复用的开源前端框架。 star:17500 primer CSS 风格指南。 star:3600 测试/工具 mocha 一个简单、灵活有趣的 JavaScript 测试框架，用于 Node.js

字符串补充 """ 1）双引号： "前缀" + 变量 + "后缀" 2）单引号： '前缀' + 变量 + '后缀' 3）反引号： `前缀${变量}后缀` 注：在反引号中可以用 ${} 来包裹变量，实现字符串拼接 """ 实例成员：计算属性 """ /** 计算属性： * 1）其实就是vue中的方法属性，方法名可以作为属性来使用，属性值为方法的返回值 * 2）在computed中声明的方法属性，不能在data中重复声明，比data中声明的属性要多出写逻辑的地方 * 3）方法属性，自带监听机制，在方法属性中出现的变量，都会被监听，一旦有任何被监听的变量值发生更新， * 方法属性都会被调用更新方法属性的值 * 4）方法属性一定要在页面中渲染一次，方法属性采用意义，多次渲染，方法属性只会被调用一次 * 案例：计算器 * 方法属性的应用场景：一个变量依赖于多个变量，且需要进行一定的逻辑运算 */ """ <div id="app"> <!-- type="number"表示只能写数字 --> <input type="number" v-model="num1" max="100" min="0"> + <input type="number" v-model="num2" max="100" min="0"> = <button>{{ sum }}</button> </div>

JavaScript 框架对于前端来说就像是，八倍镜对于98K一样重要，成为了前端开发事半功倍，不可或缺的一部分。但是很少有人思考过，我们为什么使用框架？仅仅是因为代码量减少吗？ 很多前端开发者使用框架是因为： “ 现在某某框架很火，我也要学习使用一下。” “ 这个框架 UI 库很多，漂亮，跟公司设计很相似。” “ 这个框架有很多插件，引入调用一下就行，省了我很多代码量。” “ 公司项目碰巧很适合做单页面应用。” “ 我喜欢用数据绑定。” 上面的几个答案确实是框架可以解决的问题，但仅仅是因为这些吗？因为某一个问题，就引入一个庞大的框架，绝不应该如此。 为什么使用框架？ 近年来，因为互联网的崛起，web 业务也越来越复杂和多元化，一个web项目也不是像以前那样写几个网页拼起来，加几个特效 duang 一下就成了。项目复杂了，出现的问题也就多了。 前后端分离 在前后分离概念出现之前，大部分 web 项目都是后端人员又当爹又当妈的，前后端一起搞，导致质量和效率不是很好。而且对个人的发展也有影响，一个人你什么都会，也意味着你什么都不精，毕竟天才还是少数的。这也是社会趋势影响，大公司招聘，一般也都是需要某一方面很有研究的专才。 在互联网的洪流下，以前的那种方式越来越跟不上节奏，所以前后端分离应运而生。 前后端分离后，前端的任务也变得重要起来，web前端开发慢慢趋于规范。 但是在 jQuery

1 ReactJS 简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用， 就在2013年5月开源了 。 由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 React 中文官网 2 前端三大主流框架 Angular.js ：出来最早的前端框架，学习曲线比较陡，NG1 学起来比较麻烦，NG2 开始，进行了一系列的改革，也开始启用组件化了；在 NG 中，也支持使用 TS（TypeScript）进行编程； Vue.js ：最火的一门前端框架，它是中国人开发的，对我们来说，文档要友好一些； React.js ：最流行的一门框架，因为它的设计很优秀； windowsPhone 7 7.5 8 10 3 来源： CSDN 作者： 不知所起 一往而深 链接： https://blog.csdn.net/weixin_42112635/article/details/104137968