前端学习需要掌握什么框架?该怎么学习,要怎么实战项目?
原创

前端学习需要掌握什么框架?该怎么学习,要怎么实战项目?

好文
试试语音读文章

热门回答:

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. AngularJS

Angular 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. ReactJS

React 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. MeteorJS

MeteorJS 发布于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. BackboneJS

Backbone是一个MVP模型。它依赖于Underscore.js库。它旨在开发单页面web应用。并保证不同部分的web应用同步。它采用命令式的编程风格。与使用声明式编程风格的Angular不同。Backbone也与后端代码同步更新。当模型改变后HTML页面也随之改变。Backbone被用来构建Groupon, Airbnb, Digg, Foursquare, Hulu, Soundcloud, Trello等许多知名应用。

优点:

将数据和界面很好的分离开来。

将事件的绑定很好的剥离出来。便于管理和迭代。

使得Javascript程序的模块化更加清晰、明了。

其他观点:

像现在比较火的就是vue和react。你要是不会这个很难找到工作的~你可以自己上网课看看书。如果要是准备找工作建议去报个培训机构啥的。这样学的快~

您还感兴趣的文章推荐

以上就是由互联网推广工程师 网创网 整理编辑的,如果觉得有帮助欢迎收藏转发~

分享到 :
相关推荐

发表评论

您的电子邮箱地址不会被公开。

评论(2)

  • 退到无路可退 永久VIP 2022年12月27日 16:22:52

    框架,是一个,绑定,组件,数据,操作,代码,项目,页面,是在

  • 夜深时 永久VIP 2022年12月27日 16:22:52

    没想到大家都对前端学习需要掌握什么框架?该怎么学习,要怎么实战项目?感兴趣,不过这这篇解答确实也是太好了

  • 浮生三叹 永久VIP 2022年12月27日 16:22:52

    1)先学html5+css基本语法2)学些css的框架。比如less。bootstrap等3)js是必然会涉及的。