web前端动态网页开发主流技术有哪些

本文目录

• web前端动态网页开发主流技术有哪些
• angular 需要定义model吗
• 如何在Angular中使用动画
• Angular 2.0与1.3版本相比，有哪些方面的改进
• vue.js和angular.js学哪个好有什么区别
• “angularjs”和“vuejs”的区别是什么
• 最新版 angular 和 vue，写同样功能，性能和体积上差距大吗
• vue，angular，avalon这三种MVVM框架之间有什么优缺点
• Vue.js 很好，但会比 Angular 或 React 更好吗
• react angular vue jquery 有什么区别

web前端动态网页开发主流技术有哪些

目前主流的框架是：Vue、React、Angular三大框架。

2020年新增的开发有：小程序云开发、react轻量级框架DvaJS和UmiJS、Vue企业级实战项目与框架、Flutter、React-Native实战项目。

框架详解：

1.Angular

Angular原名angularJS诞生于2009年，之前我们都是用jquery开发，自从zhiangular的出现让我们有了新的选择，dao它最大的特点是把后端的一些开发模式移植到前端来实现，如MVC、依赖注入等。

2.React

React，facebook出品，正式版推出是在2013年，比angular晚了4年，但得益于其创新式的VirtualDOM，性能上碾压angularJS，一经推出，火的一塌糊涂。 特点很多，VirtualDOM、JSX、Diff算法等，支持ES6语法，采用函数式编程，门槛稍高，但也更灵活，能让开发具有更多可能性。

3.Vue

Vue作为最后推出的框架（2014年），借鉴了前辈angular和react的特点（如VirtualDOM、双向数据绑定、diff算法、响应式属性、组件化开发等）并做了相关优化，使其使用起来更加方便，更容易上手，比较少适合初学者。

angular 需要定义model吗

如果其他朋友也有不错的原创或译文，可以尝试推荐给伯乐在线。在本文中让我们来逐步发掘angular为什么如此火：Angular.js是一个MV*（Model-View-Whatever，不管是MVC或者MVVM，统归MDV(modelDriveView)）JavaScript框架，其是Google推出的SPA（single-page-application）应用框架，其为我们的web应用开发增加不少魔法变换。我可以花整天的时间告诉你为什么你必须在新项目尝试angular.js，但是我觉得还是百说不如一练。数据绑定和scopes(作用域)首先第一个浮出大脑的问题是：angular支持数据绑定吗？下面让我们来了解angular.js的数据绑定：EditinpluckerInsertyourname:Echo:{{user.name}}在这代码片段中，在我们解释细节之前，我还是希望尝试下其效果：注：此刻暂时不要太心急去了解ng-app。如你所见，我在input中输入的将会显示在后边echo。这是如何工作的？简单来说，angular的ng-model(关于指令的将在文章后续)给我带来了双向绑定机制。如此是好，但是user.name存储在哪里呢？其存储在我们的$scope上，当我们在input中输入任何字符都会及时的更新scope对象上的user.name属性。然后我们可以利用angular的表达式{{…}}现实在HTML中。所以当我们在input中输入时，其会及时更新scope上的user,name属性，在由修改HTML显示。好吧，这并不难，但是你所说的$scope是个什么东东呢？在angular中$scope是连接controllers(控制器)和templates(模板view/视图)的主要胶合体。我们可以把我们的model存放在scope上，来达到双向你绑定。这就好比：这意味着我们我们从template上为$scope设置了一个属性对象user.name，所以我们也可以在controller中访问这个对象(user.name).让我们来看个更复杂的示例：Editinplunkervarapp=angular.module(’app’,);app.controller(’MainCtrl’,function($scope){$scope.message=’World’;});bodyng-app=“app“ng-controller=“MainCtrl“》Hello,{{message}}在这里首先我们定义了angularapplication，只是简单的创建了一个angularmodule，其接受一个module名字和依赖数组为参数。紧接着创建了一个controller，通过调用appmodule的controller方法，并传入一个controller名字和function。function函数接受$scope参数（可以接受的参数，放在后面部分）。所以我们可以开始双向绑定了。在$scope中我们附加了message的字符串属性。在view中你可能注意到了bodytag多出了一些东东，这是干什么的？这些是angular的指令(directives)，它给HTML带来了新的语法扩展，在这例子中我们使用了两个angular内置的指令：ng-app：它会告诉angularbody节点包含了我们的angular应用，换句话说，在body中的一切会被angular所接受管理。其参数为我们的appmodule的名字，和我们在javascript中命名一致。ng-controller：在这指令在我们传入的是controller名字，此例中为MainCtrl。最后我们将message插入我们的remplate。所以其可视化表示将是：聪明的你可以冒出一个疑问：我们能够在$scope上绑定function？当然。Editinplunkervarapp=angular.module(’app’,);app.controller(’MainCtrl’,function($scope){$scope.greet=function(){$scope.message=“Hello,“+$scope.user.name;}});What’syourname?:Clickhere!{{message}}我在示例controller中很容易了解到如何添加function到$scope。示例中function将修改$scope.message为“hello，”和从input输入的$scope.user.name的字符串连接。然后在HTML中创建一个附加了angularng-click指令的button。ng-click指令是的button在被点击时会执行我们为其赋值的greet()表达式。注意：在input中enter并不会工作，这是展示ng-click如何工作。指令我们已经看见了一些指令了，指令是个什么东东？指令为HTML引入了新的语法。HTML已经很强大了，但是有时我需要…看下面的例子：示例代码在做什么？除了看见id外，我真的什么也不能获知。然后我们只得从多余30个javascript文件中去查找，最后我们看见如下代码：$(’#chart’).pieChart({});Aha！原来是个饼图（piechart）容器。在这里如果你不去查找javascript文件将无法获知页面到底是做什么的，实现了什么功能。下面我们再来看看angularcode，是不是语义很清晰，我们可以一眼看出这是一个piechart，不仅如此，而且还知道width,height，以及其数据。如果你对piechart示例感兴趣，请猛击这里angular内置指令angular给我带来了大量的内置指令。我们已经在前面看见了ng-app,ng-controller,ng-click,ng-model(angular的内置指令都以ng开始)，接下来让我了解的内置指令。有时在页面中有部分内容我们只希望到达某状态（属性为true）才显示：EditinplunkerShowIamonlyvisiblewhenshowistrue.ng-show仅当angular其表达式值为true时，才显示该元素或子元素。注意：在这里对于ng-click我们并不是直接在controller中创建function(此刻我们没真正的controller)，利用angular表达式作为指令的参数。在首次表达式为undefined，然后我们设置为为true，在false如此交替。angular同时也提供了ng-hide指令。让我们看些更有趣的指令，如果有个List或者数组呢？Editinplunkervarapp=angular.module(’app’,);app.controller(’MainCtrl’,function($scope){$scope.developers=[{name:“Jesus“,country:“Spain“},{name:“Dave“,country:“Canada“},{name:“Wesley“,country:“USA“},{name:“Krzysztof“,country:“Poland“}];});{{person.name}}from{{person.country}}棒极了，我们在controller中定义了一个list对象，在HTML用ng-repeat就能简单的显示了。它是如何工作的？ng-repeat会为集合中的每一项创建一个新的模板，在示例中有四项数据，将会重复创建下面code四次，{{person.name}}from{{person.country}}每次复制都会创建自己新的scope，我们没有为每项手动创建scope，我们可以把scope理解为其scope，但是在这里我们仍然能够访问父scope。可视化的展示为：我们能自定义directive？当然，我们能以不同粒度方式创建angular的directive，例如modaldialogsaccordions，paginators，charts，searchfrom…angular指令总是与可视化有关？不，我们仍然可以创建一些非可视化的指令集。让我们来看一个例子吧：回到我们上面的greet示例：What’syourname?:Clickhere!{{message}}已经能够很好的工作了，但是我们希望能够在页面初始化的时候光标焦点聚焦在输入框input。jQuery？jQuery提供了focus函数，能够很简单的完成，但是这里是angular教程，所以我们需要以angularway，显得我们更专业些…同时我们也希望我们的HTML能够有自描述能力(译者注：现代软件开发特别语言语义更重要，如linq，guava，restfull…)，所以angulardirective肯定是个好的选择。app.directive(’focus’,function(){return{link:function(scope,element,attrs){element.focus();}};});接下来，我们可以在可以HTML中标注angulardirective(angulardirective首字母小写驼峰命名，在前台转换为全小写-分割风格)。directive是angular中最复杂的要点，这里只是最简单的directive而已，如果可能这将放在以后文章，这里并不会深入。directive需要一个object的返回对象，我们可以定义一些需要关注的属性，在示例中我们返回了一个link的链接函数（link函数主要作为directive的行为绑定），我们如果需要，也可以替换HTML中模板。Linkfunction有3个参数（准确应该是是4个）scope，节点element，还有所有HTMLattributeiAttrs。在link函数里我们可以绑定click，mouseenter等事件，注册指令行为。在示例中我们为指令节点使用了focus操作。对element了解，你可以移步到这里。我们可以很简单的使用指令如下：EditinplunkerWhat’syourname?:Clickhere!{{message}}目前我们看见的directive都很简单，如何利用指令渲染上面说的固定模板呢？如下：app.directive(’hello’,function(){return{restrict:“E“,replace:true,template:“Helloreaders,thankyouforcoming“}});这里返回的是带有一些attribute的object。restrict：指令的使用方式Attribute形如:.Element形如：Class形如:CoMment形如:replace：询问是不是需要利用我们的模板替换原来的节点。template：我们需要append或者replace到原节点的html模板。directive还有很多的可配置options，如编译compile，templateurl…在示例我们不需要行为的绑定，所有没有linkfunction。其使用如下：EditinplunkerFilters(过滤器)假想我们有个购物车的view显示如下：Thereare13phonesinthebasket.Total:{{1232.12}}我们如何利用angular表达式显示为货币格式？形如：$1,232.12。相当简单，angular为我们提供了叫filter得东东，过滤器其好比unix中的管道pipeline。angular同时也内置了货币currencyfilter。如你所见，我们可以用|使用filter，这和unix管道模型很相似。我们也可以使用|链接的filter。例如我们可以对开发人员简单排序，在用ng-repeat显示出来：{{person.name}}from{{person.country}}在这里你发现了一些很有趣的事？卫门你可以给filter传递参数！OrderByfilter会接受一个属性名，并以它进行排序，示例中我们使用name，如果你希望反序排列，你可以用-name表示。马上你可能会冒出你头脑：假想我们不止4个开发人员，有300，并且我们希望通过name，country过滤呢？非常简单：EditinplunkerSearch:{{person.name}}from{{person.country}}在示例中请注意我们是如何绑定search.name的,此处利用name做filtering。filter的参数不会改变，绑定是search对象，会根据我们在input中输入改变，而filter则会找寻search对象中的name属性。到这里我希望你也像我一样一样兴奋起来了！下面我们来自定义filter呢？实现单词首字母大写filter：app.filter(’capitalize’,function(){returnfunction(input,param){returninput.substring(0,1).toUpperCase()+input.substring(1);}});这里我们自定义了一个filter其接受输入参数input和过滤器参数param的一个函数。接下来我们将在view使用它：{{“thisissometext“|capitalize}}Services在文章最后，我们需要再次较少下services。这是一个的维护应用程序功能逻辑部分，他是一个单间模式singleton。为了保持应用程序的逻辑层次分明，更趋向于将其业务逻辑放到不同的services，保持controller的逻辑只有流程控制和view交互逻辑。angular内置了很多services，如$

如何在Angular中使用动画

运用部分讲解：
首先，Angular本身不提供动画机制，需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制，Angular也不提供具体的动画样式，所以说，它的自由度和可定制性挺大的。
那么，刚开始需要在项目的入口html文件中引入Angular框架(angular.js)，然后引入angular.animate.js。
在项目的js入口文件app.js中，新建项目模块，并且添加所依赖的模块ng-Animate(有其他需要的模块的话也可以引入，顺序没关系)
var demoApp = angular.module(’demoApp’, [’ngAnimate’,’ui.router’]);
这
里中间插入一句，建议Angular中的依赖注入用如下模式，在ads、bds或者其他的前端自动化工具打包压缩后不会产生问题，因为仅仅通过
给function传参的形式注入依赖，Angular是会对注入的变量名有严格的要求（如$scope变量名在控制器中注入时变量名只能
写$scope）：
//控制器.js、指令.js、过滤器.js的依赖注入建议都用这种方式写
//这是ui-route的配置，在app.js
demoApp.config([’$stateProvider’, ’$urlRouterProvider’,function($stateProvider, $urlRouterProvider){
// your code.
}]);
引入了ngAnimate之后，Angular的动画机制就能生效了。
Angular文档中写到如下指令和支持的动画
Directive
Supported Animations
ngRepeat enter, leave and move
ngView enter and leave
ngInclude enter and leave
ngSwitch enter and leave
ngIf enter and leave
ngClass add and remove
ngShow & ngHide add and remove (the ng-hide class value)
form add and remove (dirty, pristine, valid, invalid & all other validations)
ngModel add and remove (dirty, pristine, valid, invalid & all other validations)
那么，怎么使用呢?
本文拿ng-repeat这个指令来做个介绍，其他的一些指令使用方式几乎相同，可类推。
ng-repeat 主要是对一个list的展示，这些元素是是被创建出来加入到DOM结构中去的，那么，它的动画过程为：
创建元素 -》 .ng-enter -》 .ng-enter-active -》 完成，呈默认状态
默认状态 -》 .ng-leave -》 .ng-leave-active -》 销毁元素
所以可以通过设置.ng-enter(.ng-leave) 和 .ng-enter-active(.ng-leave-active) 的样式，加上css3的动画来显示出动画，如：
《!-- HTML片段 --》
《div ng-init=“users = [1,2,3,4,5]“》《/div》
《input class=“filter-btn“ type=“search“ ng-model=“u“ placeholder=“search item“ aria-label=“search item“ /》
《ul》
《li class=“item“ ng-repeat=“user in users | filter: u as result“》
{{user}}
《/li》
《/ul》
/* css片断 */
/*ng-repeat的元素*/
.item{
-webkit-transition: all linear 1s;
-o-transition: all linear 1s;
transition: all linear 1s;
}
/*动画开始前*/
.item.ng-enter{
opacity:0;
}
/*动画过程*/
.item-ng-enter-active{
opacity:1;
}
这样的效果是对所有元素同时应用，可能实际运用中需要有一个先后的渐变出现的效果，这时候可以设置ng-enter-stagger来实现.
/*不同时出现*/
.item.ng-enter-stagger {
transition-delay:0.5s;
transition-duration:0;
}
同样的，这些angular animate提供的动画的class也可以应用到页面切换中去。如果通过写css的方式还无法满足需求，当然，还可以通过JS的方式来控制动画，下面的代码你可以理解为是一个模版
/* CLASS 是需要应用的class名，handles是支持的操作，如下图所示*/
/* 这里如果是应用在ui-view 的class上，模版会叠加(坑)*/
demoApp.animation(’.classname’,function(){
return {
’handles’:function(element,className,donw){
//... your code here
//回调
return function(cancelled){
// alert(1);
}
}
}
})

Angular 2.0与1.3版本相比，有哪些方面的改进

在巴黎举行的ng-europe大会上，Angular团队为与会者介绍了即将到来的AngularJS2.0版本的细节。新版本对1.x版本进行了重大的颠覆，当前还没有任何迁移指南，此外它还是基于一个名为AtScript的新语言进行开发的。　　对于熟悉Angular1.X版本的开发者来说，他们将看到一个完全不同的框架，并且必须学习一种新的架构。在一堂关于版本2.0的变更的讲座中，IgorMinar和TobiasBosch介绍了新的模板语法：　　　　Add　　这种新语法将数据绑定到元素的属性（property）上，而不是特性（attribute）上。这就允许你使用以下语法：　　　　看上去类似于标准的HTML，但这个复选框元素不会暴露出checked特性。新的模板引擎将数据绑定到元素的属性上，即使这些属性并非由DOM所暴露出的特性。　　与新架构引起的其它剧变相比，新的模板语法只是一个相对较小的改动。与会者之一的MichaelBromley描述了一些新版本的一些破坏性改动，版本2.0取消了1.X中的以下概念　　控制器（Controller）　　（Directive定义对象）　　$scope　　angular.module　　jqLite　　关于jqLite的取消，Igor是这样说的：　　在2.0中，我们不会在框架中使用任何DOM的封装了，而是直接和原始的DOM打交道。自从我们启动项目以来，DOM本身已经得到了很大的改善，因此我们不再需要一个兼容层来帮助我们应付跨浏览器的问题了。所以我们可以直接操作原始的DOM。不过如果你想要使用jQuery，在你的组件中应用jQuery，那也完全没问题。　　2.0版本的一个目标是改善Angular应用的开发体验，在第2天的主题演讲上，AngularJS之父MiškoHevery描述了如何通过使用AtScript来实现这一目标。　　AtScript是TypeScript的一个超集，后者是由微软创建的一门语言。TypeScript为JavaScript加入了类型，而AtScript进一步扩展了这一思想，它为类型加入了标注与动态注入。　　标注允许开发者为某个类加入“表达意图”的能力。因此，无需通过模板代码的方式创建自定义directive，开发者可以创建一个类，并告诉AngularJS“这是一个directive”。而动态注入的能力允许框架在运行时检查类型信息。　　不过，AtScript的使用是可选的，开发Angular2.0应用并不一定要使用AtScript。Miško说道：由于现在的社区和类库都是使用纯JavaScript开发的，因此不强迫AtScript的使用是非常重要的目标。而由于AtScript可以直接编译为EcmaScript5（ES5），因此开发者可以直接编写Angular2.0。　　在一次问答讲座上，开发者们问道Angular1.3还将获得多长时间的支持。BradGreen是这样回答的：　　比较合理的期望是，我们大约还需要1年半至2年时间以发布2.0的最终版本，这段时间内我们还会为1.3提供缺陷修复及安全补丁。　　Angular团队还暗示他们没有为从Angular1.X迁移到2.0提供迁移指南，但他们也不排除这种可能。目前还没有确切的发布日期，不过团队基本达成了共识，会在2015年终最终完成版本2.0。　　BradGreen还表示，Angular2.0只会支持“最新的浏览器”，但没有指出确切的版本。他说他们的团队“在尝试基于未来的标准进行开发，而不是关注于现有的标准”。　　开发者们对于这次重大变更的感觉可谓是五味陈杂。HackerNews的用户zak_mc_kracken说道：　　虽然新版本依然叫做“Angular”，但它与之前的版本几乎没有多少相似之处，它完全是一个新的框架。一想到我对于Angular1所掌握的全部知识都将成为过期的内容，就禁不住感到有点儿悲伤，但我也很期待对这个新的框架进行一番研究。如果它的革新性能够达到Angular1的一半，那我就会从中获得很大的乐趣。　　ng-europe大会的视频曾被短暂地上传到YouTube上，但很快就被删除了。

vue.js和angular.js学哪个好有什么区别

个人观点，推荐vue（S级），此版本虽然诞生时间不长，但现在应用面广，相对于angular比较好学；angular4（SS级），版本提升改变较多，效率挺好的，相对于来说，不易掌握

“angularjs”和“vuejs”的区别是什么

Angular 1 使用双向绑定，Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。

指令与组件

在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 Angular 中两者有不少相混的地方。

性能

Vue 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。

在 Angular 1 中，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环（digest cycle）可能要运行多次。Angular 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。

Vue 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发，除非它们之间有明确的依赖关系。

最新版 angular 和 vue，写同样功能，性能和体积上差距大吗

性能上差不多，Angular现在是Angular4，相对于AngularJS，性能上有了质的提升，因为AngularJS默认使用双向绑定。目前和Vue比起来，性能上几乎没有差别了。
体积上，Vue明显要小许多，因为Angular的功能实在是太丰富了，是一个完整的前端框架，包括了注入依赖、路由等等功能，这是它体积庞大的原因。但是这也是它的优点，如果Vue想实现这些功能，就要安装插件了。

vue，angular，avalon这三种MVVM框架之间有什么优缺点

　　vue主打轻量级，仅作为MV*中的视图部分使用，优点轻量级，易学易用，缺点是大项目的时候还要配合其他框架或者库来使用，比较麻烦；AngularJS包含MV*中的所有部分，有自己的一套规则，写出来的代码结构会比较清晰，同时谷歌大厂出品，社区比较活跃，各种第三方插件比较多，缺点则是大家都在黑的性能问题，以及越来越像JSP的语法(看看AtScript的语法，越来越像Java了)；Avalon没用过，听说对旧版IE支持程度较高

Vue.js 很好，但会比 Angular 或 React 更好吗

一、Vue 最大优势就是它比较新颖，没历史包袱。
二、Vue.js 更加灵活，（比起 Angular）更少专制，它能然你按照自己想要的方式构建应用，而非凡事非得 Angular 如此如此。它只不过是一层界面而已，因此你可以拿它作为页面中一个轻量的功能来使用，而不是一个完整的 SPA
三、React 和 Vue.js 拥有一些类似的功能特性，如:
1) 使用了一个虚拟 DOM
2) 提供了响应式的，并且可组合式的视图组件。
3) 保持对核心库的专注, 而像路由和全局状态管理这样的关注点则交给附带的库来处理。
四、Vue.js 中的双向数据绑定在你使用了 v-model 时就会相当的简单。而在 React 中, 过程就比较漫长了。

react angular vue jquery 有什么区别

react.js 相对更加轻巧一点， angular 功能比较全面也比较复杂，vue 则基本完全是在考虑页面显示。先把JS学精了再学这些也不错。JQ是库，不是框架