一旦你掌握了JavaScript基础,选择前端JavaScript框架可能是困难的,混乱的过程。你可能听说过亚博体育最新版本角度的-现在有一个新东西叫VUE??

你没有时间来学习这三点。所以,你如何选择??

无论你做什么,别想得太多。

您可以成功地使用这些框架中的任何一个,学习一个框架使得学习另一个框架更加容易。选择框架很重要,但它是远的更重要的是要集中精力学习这些共享的概念。这将为你在发展中遇到的任何事情做好准备。

当您了解了关于给定框架需要了解的所有内容时,你不会仅仅了解那个特定的框架,您还将了解这三个概念:

在决定使用哪个时,考虑一下你的情况和要求。

如果你想找一份开发商的工作,你们地区的雇主在找什么?你想为一家初创企业工作还是为一家更成熟的企业工作?做本地调查职位空缺或者和招聘人员交谈。

哪个框架具有最活跃的本地社区?亚博体育苹果版出去参加一个聚焦于React的本地聚会,亚博体育最新版本角形或Vue,并会见热衷于这些框架的其他开发人员。

如果您正在为团队的下一个项目选择框架,你们团队的集体技能是什么?你有很多通用的JavaScript知识吗?你的团队会从选择一个学习曲线平缓的框架中获益吗?对于您正在构建的应用程序,哪些特性是最重要的??

易学

在它们的核心,亚博体育最新版本React和Vue专注于构建用户界面而Angular则专注于构建应用程序。正因为如此,角度更大,更复杂,学习曲线更陡峭。虽然它们最初较小,也不太复杂,扩展React和Vue的次数越多,它们的大小和复杂亚博体育最新版本性就越大。

工具支持

所有三个框架都提供CLI,或者命令行接口。这些使得创建新项目变得容易,支持本地开发并为部署准备应用程序。这三者在代码编辑器(如Visual Studio Code和Atom)中也有很好的支持。为了获得最好的经验和最大化你的结果,您将需要安装适当的编辑器扩展。

性能

而性能基准测试(即。具体任务完成得有多快,例如,呈现项目列表)对于某些用例有所不同,这些框架中的每一个都提供了类似的性能,因此,对于大多数开发人员或团队来说,这并不是一个显著的区别因素。

裁决

亚博体育最新版本

  • 赞成的意见
    • 容易的,轻量级组件创建
    • 鼓励合成的优雅API
    • 大型支持社区亚博体育苹果版
    • 流行的创业
    • 许多开源扩展

亚博体育最新版本反应提供容易,轻量级组件创建-功能无状态组件就像它获得的一样简单。此外,亚博体育最新版本React的优雅API鼓励您使用组件进行组合。

亚博体育最新版本React非常受欢迎,其庞大的支持社区就是明证。亚博体育苹果版亚博体育最新版本React的受欢迎程度帮助推动了初创企业的采用。各种开源的可用性,亚博体育苹果版社区开发的React扩展为您提供了许多构建完整解决方案的选项。亚博体育最新版本

  • 欺骗
    • 调整到JSX
    • 完整的解决方案需要第三方库
    • 选项的可用性会压倒或混淆

组件模板是用JSX,不是本地HTML,所以你应该期待一段调整期。因为它专注于构建UI,您可能需要用第三方库扩展React。亚博体育最新版本例如,如果需要在应用程序中支持客户端路由,您可能会使用流行的第三方库亚博体育最新版本反应式路由器.幸运的是,对于满足几乎任何需求,都有很多很好的选择。但是,有更多的选择可能是压倒性的或令人困惑的-特别是对于初学者。

角度的

  • 赞成的意见
    • 包罗万象框架
    • 关于如何构建完整解决方案的指南
    • 受企业欢迎
    • 有能力的CLI
    • 打字稿
    • 支持原生HTML和CSS

角度是一个包含所有内容的框架,提供了更多信息开箱即用比反应或虚亚博体育最新版本拟。因此,它提供了关于如何构建完整解决方案的更多指导。它专注于应用程序开发——通过包括路由和表单验证等特性来证明——使得它受到企业的欢迎。

在三个框架中,Angular具有最强的CLI能力。它在应用程序的整个开发过程中用于创建新的组件,安装包并运行迁移和安装脚本。TypeScript——具有静态类型和惊人的编辑器增强——为没有很多JavaScript经验的熟练开发人员提供了向客户端开发的更友好的过渡。当它绑定语法可能需要一点时间来适应,能够利用本地HTML和CSS作为组件模板和样式是一个优势。

  • 欺骗
    • 大型API
    • 陡峭学习曲线
    • 代码可能感觉冗长和复杂

Angular的大型API以及开发应用程序的总体方法导致了三个框架中最陡峭的学习曲线。角码-使用静态类型,装饰器和基于配置的方法——与React和Vue相比,有时会感到冗长和复杂。亚博体育最新版本

VUE

  • 赞成的意见
    • 为开发人员提供方便的入口
    • 和你一起成长
    • 比反应更具包容性亚博体育最新版本
    • 支持原生HTML和CSS
    • 编写良好的文档

Vue的缩放体验为新近开发客户端的开发人员提供了一个简单的入口,当你的技能发展时,仍然有能力和你一起成长。虽然它不像角形那样具有包容性,Vue确实提供更多开箱即用比反应。亚博体育最新版本这使它成为新手的流行选择。

像棱角,Vue还允许您利用您的本地HTML和CSS技能,而不需要学习新的模板语言,就像你对React所做的那样。亚博体育最新版本而且它以写得很好而闻名文档.

  • 欺骗
    • 比反应和角度还新亚博体育最新版本
    • (目前)较小的社亚博体育苹果版区

于2014年推出,Vue比React(2013)和Ang.(20亚博体育最新版本10.1)都新,V.2 2014)。所以,当它的社区正在发展时亚博体育苹果版,它目前还不像其他公司那样稳固或大。

基本组件开发

什么是前端框架??

前端框架支持作为组件集合的客户端用户界面或应用程序的开发。组件组合数据,将逻辑和表示代码放入单个容器中。您可以将应用程序看作一个离散的集合,自给自足

让我们进一步了解一下使用三个框架中的每个框架的基本组件开发。

反应中的基本组分开发亚博体育最新版本

亚博体育最新版本React提供两种类型的组件,无状态功能组件和有状态类组件。

无状态函数组件只是一个接受单个“props”参数-a的普通JavaScript函数属性对象-并返回React元素。亚博体育最新版本

函数积(props){.(返回)

{props.name}

;}

有状态类组件是扩展React的基础类“Component”的ES2015类。亚博体育最新版本它包含返回React元素的`render()'方法。亚博体育最新版本像无状态功能组件一样,有状态类组件通过“props”属性具有属性,顾名思义,他们还通过“state”属性拥有状态。

类Product扩展Component{state={isSelected:false}render() {.(返回)
             

{this.props.name}

被选中了吗?{this.state.isSelected?“是”:“不”}

;}

为了改变现状,调用`setState()'方法并传入新状态。亚博体育最新版本React将在状态改变时重新呈现组件。

toggleSelection(){this.setState((prevState)=>{.{isSelected:!isSelected};(});}

JSX

亚博体育最新版本React组件由使用JSX编写的React元素组成。JSX看起来像HTML,但不是标记,它是一种特殊的JavaScript语法,在编写组件的呈现逻辑时为您提供了JS的全部功能。

JSX元素可以表示DOM元素,如

,或者它们可以表示用户定义的React组件:亚博体育最新版本

宠物摇滚

动态值可以使用JavaScript表达式作为元素内部内容呈现:

{props.name}

可以使用字符串文字或JavaScript表达式设置元素属性:


               

注意,属性名称反映它们的JavaScript属性名称,不是它们的HTML属性名。例如,在React元素上设置CSS类是“className”而不是“class”。亚博体育最新版本

为了处理事件,只需将事件处理程序函数或类方法连接到要处理的元素事件:

addToCart=()=>{alert('Item added to cart!“”;}render() {.(返回);}

基本构件的角度展开

虽然可以使用vanilla JavaScript开发Angular应用程序,大多数开发人员使用TypeScript。TypeScript提供了静态类型,有助于在开发过程的早期捕获编码错误。它还增加了您的开发经验与真实陈述的完成,编辑器中的API文档和基于符号的导航和重命名。

角度中的组件是用“组件”装饰器装饰的ES2015类:

@Component({selector: '.',templateUrl: './....html',styleUrls: ['./....css']})导出类ProductComponent{}

装饰符是TypeScript提供的JavaScript的扩展。它们提供了一种声明式的开发方法,允许您向类添加元数据,方法,特性和参数。在上面的示例中,我们使用修饰符向Angular声明这个类是一个组件,以及设置“选择器”,“templateUrl”,以及“styleUrls”配置属性。

组件类可以包含任意数量的属性或方法:

@Component({selector: '.',templateUrl: './....html',styleUrls: ['./....css']})导出类ProductComponent{name:string='Pet Rock';isSelected:布尔=false;}

不像React亚博体育最新版本,通过直接设置属性值来更改状态:

toggleSelection(){this.isSelected=!这个.isSelected;}

角度检测属性值变化并重新呈现组件。

组件模板使用本地HTML定义,所以任何有效的HTML都是有效的模板。

宠物摇滚

可以使用内插将动态值呈现给模板:

{{No}}

元素属性和事件可以绑定到组件类中定义的属性和方法。属性绑定通过使用括号创建:

使用括号创建事件绑定:

Vue中的基本组件开发

Vue提供了独特的缩放体验,一个比角度和反应复杂得多;亚博体育最新版本通过使用`

每个Vue应用程序都有一个通过实例化Vue类的实例创建的顶级Vue实例。通过传递选项来配置应用程序对象文字

const app=new Vue({el: '#app',数据:{名称:'宠物摇滚',isSelected:false}};;

“el”属性是安装应用程序的元素的选择器,而“data”属性是定义应用程序状态的对象文本。

还可以添加方法。和角一样,通过直接设置数据属性,可以更改应用程序的状态:

const app=new Vue({el: '#app',数据:{名称:'宠物摇滚',isSelected:false},方法:{toggleSelection(){this.isSelected=!这个.isSelected;}};;

数据对象中的属性是亚博体育最新版本反应性的-随着价值观的变化,Vue更新了DOM。

安装应用程序的元素定义了应用程序的模板。像棱角,Vue模板是使用本地HTML定义的,因此任何有效的HTML都是有效的模板:

              

宠物摇滚

可以使用内插将动态值呈现给模板:

{{No}}

Vue提供了用于将元素属性和事件绑定到Vue实例中定义的属性和方法的指令。使用“v-bind”指令创建属性绑定:

使用“v-on”指令创建事件绑定:

Vue的扩展经验利用了前端构建过程,以支持名为单个文件组件。”这给开发人员提供了处理较大数据的替代方法,更复杂的应用程序,同时仍然利用它们已经掌握的技能。

单个文件组件组合选项对象,模板,将CSS范围限定为单个“VUE”文件:

              




结论

试图确定这些前端框架中的哪些是最好的有点像要决定哪种口味的冰淇淋最好的-这是一个主观的决定,会因人而异,因情况而异,你的爱好可能会随着时间而改变。毫无疑问-前端网络开发,像所有编程专业一样,会随着时间不断变化和进化。

对指导JavaScript课程感兴趣吗?查看我们的Tech.in Full Stack JavaScript。
为期7天的科技学位免费试用