xml地图|网站地图|网站标签 [设为首页] [加入收藏]
高效快速地加载,不适合复杂的前端项目
分类:web前端

高效快速地加载 AngularJS 视图

2016/06/29 · JavaScript · 1 评论 · AngularJS

本文作者: 伯乐在线 - ThoughtWorks 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

当AngularJS应用程序变大时,很多问题就开始显现出来了,比如多层级视图的加载问题,如果在子视图显示之前没有预加载,则可能在需要展示时,发生视觉闪烁的情况。这种问题在网络缓慢,或者服务器使用较慢的https连接时更容易出现。

本文将讨论更高效加载AngularJS视图的系统方法。

JavaScript 深入之词法作用域和动态作用域

2017/05/04 · JavaScript · 作用域

原文出处: 冴羽   

为什么 ReactJS 不适合复杂的前端项目?

2016/08/17 · JavaScript · 15 评论 · React, ReactJS, 前端

本文作者: 伯乐在线 - ThoughtWorks 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

《More than React》系列的文章会一共分为五篇。本文是第一篇,介绍用ReactJS开发时遇到的种种问题。后面四篇文章的每一篇将会分别详细讨论其中一个问题,以及Binding.scala如何解决这个问题。

AngularJS 视图一般原理

AngularJS视图也并不是什么特别神奇的技术,在其内部就是按普通的directive来处理的。也就是说,当一个位置需要显示view时,AngularJS会尝试使用某种方法获得其HTML模板文件的具体内容、包装成directive,执行directive的标准流程,最后添加到页面上。

图片 1

回想一下,directive本身是不是正好也支持templateUrl属性?这就与view技术衔接上了。

这样说来,是不是视图模板也可以使用行内DOM甚至是字符串字面量值了呢?答案是肯定的!我们本来就可以使用一段行内DOM来作为view的模板。例如:

图片 2

当然,作为一个大型的AngularJS应用程序,将所有view都放在字符串值里,或者行内DOM里是不太现实的,我们希望可以使用多个小的HTML文件来作为子模板。这样,虽然整个应用很大,但每个子模板的文件并不大,一般都是几KB的小文件,当用户点击到指定位置,需要时使用对应界面的模板时再去加载,也就显著提高了效率。

我们可以用下图来表示“行内DOM”与“多个子模板文件”的性能对比:

图片 3

作用域

作用域是程序源代码中定义变量的区域。

作用域规定了如何查找变量,也就是确定当前执行代码对变量的访问权限。

ECMAScript6之前只有全局作用域和函数作用域。

JavaScript采用词法作用域(lexical scoping),也就是静态作用域。

背景介绍

去年 4 月,我第一次在某个客户的项目中接触到ReactJS 。

我发现ReactJS要比我以前用过的AngularJS简单很多,它提供了响应式的数据绑定功能,把数据映射到网页上,使我可以轻松实现交互简单的网站。

然而,随着我越来越深入的使用ReactJS,我发现用ReactJS编写交互复杂的网页很困难。 我希望有一种方式,能够像ReactJS一样简单解决简单问题。此外,还要能简单解决复杂问题。

于是我把ReactJS用Scala重新写了一个。代码量从近三万行降到了一千多行。

用这个框架实现的TodoMVC应用,只用了154行代码。而用ReactJS实现相同功能的TodoMVC,需要488行代码。

下图是用Binding.scala实现的TodoMVC应用。

图片 4

这个框架就是Binding.scala。

AngularJS 对视图加载的优化

上面提到了“多个子模板文件”的模板组织方式,这本是一件很平常、很自然的工作方式而已。也正是因此,才让人们感觉AngularJS工作方式与自己的期望的一致:因为在没有使用AngularJS之前,人们在开发一个 Web应用时,页面就是这样一个个组织的。

即使在以前,我们在提到性能的时候,自然会想到“缓存”。在以前,页面与页面之间的跳转使得每个页面都是相互独立的单位,因此页面内容的缓存只能有赖于浏览器了。而今,AngularJS让所有页面子模板都在“单页应用”中加载,于是,我们在这个单页面应用内便获得了缓存页面内容的机会。

AngularJS中内建了缓存机制templateCache:只要已经加载过某个页面子模板,就会在templateCahce中缓存起来,下次从服务器加载页面模板之前,先检查templateCache,如果已有缓存则不需要从服务器上加载,直接使用。

图片 5

AngularJS中内建了templateCache 机制之后,加载视图的过程变得高效而轻松,Web应用本身,以及开发者都不需要关心这一过程。不过,即使有页面内的templateCache,页面模板在初次使用时还是需要从服务器加载,因此偶尔能见到一些视觉闪烁的情况,比如标签切换、页面跳转等。

静态作用域与动态作用域

因为采用词法作用域,函数的作用域在函数定义的时候就决定了。

与词法作用域相对的是动态作用域,函数的作用域在函数调用的时候才决定。

让我们认真看个例子就能明白之间的区别:

var value = 1; function foo() { console.log(value); } function bar() { var value = 2; foo(); } bar();

1
2
3
4
5
6
7
8
9
10
11
12
var value = 1;
 
function foo() {
    console.log(value);
}
 
function bar() {
    var value = 2;
    foo();
}
 
bar();

当采用静态作用域时,执行foo函数,先从foo函数内部查找是否有局部变量value,如果没有,就根据书写的位置,查找上面一层的代码,在这里是全局作用域,也就是value等于1,所以最后会打印1

当采用动态作用域时,执行foo函数,依然是从foo函数内部查找是否有局部变量value。如果没有,就从调用函数的作用域,也就是bar函数内部查找value变量,所以最后会打印2

问题一:ReactJS组件难以在复杂交互页面中复用

ReactJS中的最小复用单位是组件。ReactJS的组件比AngularJS的Controller和View 要轻量些。 每个组件只需要前端开发者提供一个 render 函数,把 propsstate 映射成网页元素。

这样的轻量级组件在渲染简单静态页面时很好用, 但是如果页面有交互,就必须在组件间传递回调函数来处理事件。

我将在《More than React(二)组件对复用性有害?》中用原生DHTML API、ReactJS和Binding.scala实现同一个需要复用的页面,介绍Binding.scala如何简单实现、简单复用复杂的交互逻辑。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:高效快速地加载,不适合复杂的前端项目

上一篇:4正式发布,变量教程 下一篇:没有了
猜你喜欢
热门排行
精彩图文