分站城市网站如何做seo,高流量网站设计,做网站找哪里,中山公众号平台商场网站建设在前端项目中#xff0c;可以借助某些框架#xff08;如React、Vue、Angular等#xff09;来实现组件化开发#xff0c;使代码更容易复用。此时#xff0c;一个网页不再是由一个个独立的HTML、CSS和JavaScript文件组成#xff0c;而是按照组件的思想将网页划分成一个个组…
在前端项目中可以借助某些框架如React、Vue、Angular等来实现组件化开发使代码更容易复用。此时一个网页不再是由一个个独立的HTML、CSS和JavaScript文件组成而是按照组件的思想将网页划分成一个个组件如轮播图组件、列表组件、导航栏组件等。将这些组件拼装在一起就形成一个完整的网页。
本章主要涉及的知识点有
l React框架介绍
l Vue框架介绍
l Angular框架介绍
l 如何选型 2.1 React React框架是目前流行的前端框架之一。许多公司的项目都由React框架进行构建和编写尤其是外企或涉及全球团队合作的项目。本节先简单介绍React框架的基础知识和必须了解的一些知识点使读者对React有一个基本的概念和认知。
React是由Facebook团队开发的一个开源框架官方网站如图2.1所示。 图2.1 React官方网站
React是一个用于构建用户界面的JavaScript库。使用React框架时创建一系列的React组件如缩略图、点赞按钮和视频等然后将它们组合成一个页面、系统或应用程序。
React框架在开发项目时有一套流程和规范无论你是自己工作还是与成千上万的其他开发人员合作使用React都是一样的。它旨在让工程师可以无缝地组合由独立人员、团队或组织编写的组件。
React组件的本质是JavaScript函数。例如下面是VideoList.js组件代码实例
function VideoList({ videos, emptyHeading }) {const count videos.length;let heading emptyHeading;if (count 0) {const noun count 1 ? Videos : Video;
heading count noun;}return (sectionh2{heading}/h2{videos.map(video Video key{video.id} video{video} /)}
/section);
}上面代码中return()中的这种标记语法称为JSX它是React推广的JavaScript语法扩展。JSX看起来与HTML相似对于写过HTML代码的前端工程师来说写JSX组件非常容易不需要记住很多特定标记并且使用JSX标记写出的组件呈现逻辑清晰这使得React组件易于创建、维护和删除。
React组件会接收数据并将这些数据和JSX模板编译后形成一段一段的JavaScript代码这些JavaScript代码会将数据呈现到屏幕上。React框架可以向组件传递新的数据以响应交互例如当用户通过表单输入内容时React随后将更新屏幕以匹配新数据。
React是单向响应的数据流采用单向数据绑定即Model数据的更新会触发View页面的更新而View的更新不会触发Model的更新它们的作用是单向的。在 React 中当用户操作View 层的按钮或表单输入等需要更新Modal时必须通过相应的 Actions 来进行操作。 2.2 Vue Vue在中国公司的项目开发中非常流行因为它具有上手快、轻量化的特点并且文档对国人更友好。一些小型的、逻辑简单的项目大多使用Vue框架构建。
Vue是尤雨溪开发的一款开源的、构建用户界面的渐进式框架。Vue的官方地址如图2.2所示。
Vue的模板语法基于HTML的模板语法并有特定的一套规则例如插值语法包括文本插值、Attribute插值等指令语法包括绑定事件的内部指令v-bind、v-on、v-model等以及自定义指令修饰符v-on:submit.prevent等。 图2.2 Vue官方网站
与React类似在底层机制中Vue会将模板编译成JavaScript代码。结合响应式系统当应用状态变更时Vue能够智能地推导出需要重新渲染的组件的最少数量并应用最少的DOM操作。
Vue支持单向数据绑定和双向数据绑定。
l 单向数据绑定时使用v-bind属性绑定、v-on事件绑定或插值形式{{data}}。
l 双向数据绑定时使用v-model指令用户对View的更改会直接同步到Model。v-model本质是v-bind和v-on相组合的语法糖是框架自动帮我们实现了更新事件。换句话说我们完全可以采取单向绑定自己实现类似的双向数据绑定。 2.3 Angular Angular诞生于2009年其出现的时间要早于React和Vue它是一款来自谷歌的开源的Web前端框架Angular的官方网站如图2.3所示。 图2.3 Angular官方网站
Angular的模板功能强大、丰富并且还引入了Java的一些概念是一款大而全的框架更侧重于大型前端工程的构建为开发人员屏蔽项目构建底层的细节提出了自己的一套解决方案。
使用Angular的难点是学习曲线比较陡峭优点是由于使用了标准化的开发方式后期能极大地提高开发生产力提高开发效率。
AngularJS支持单向数据绑定和双向数据绑定。
l 单向数据绑定时使用ng-bind指令或插值形式{{data}}。
l 双向数据绑定时使用ng-model指令用户对View的更改会直接同步到Model。 2.4 如何选型 框架选型由多个因素决定例如项目的类型、项目的复杂程度以及项目组成员的技能掌握情况。
React适合多组件的应用程序另外对于具有扩展和增长可能的项目由于React组件具有声明性因此它可以轻松处理此类复杂结构。
Vue由于具有可接受且快速的学习曲线因此最适合解决短期的小型项目例如业务逻辑简单、不需要处理复杂数据结构的项目。
Angular 最适合大型和高级项目用于创建有着复杂基础架构的大型企业应用程序。 本书节选自《React.jsNode.jsMongoDB企业级全栈开发实践》获出版社和作者授权共享。
