xml地图|网站地图|网站标签 [设为首页] [加入收藏]
换个思路理解Javascript中的this,按需加载的项目实
分类:web前端

Angular 和 Vue 按需加载的项目实践优化方案

2016/07/12 · JavaScript · 前端框架

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

针对前端优化的点有很多,例如:图片压缩,雪碧图,js/css/html 文件的压缩合并,  cdn缓存, 减少重定向, 按需加载 等等

最近有心想针对 ionic项目 和 vue项目,做一个比较大的优化,做成按需加载(也就是无请求不加载),此刻我内心是无比激动的。

推荐看的按需加载的文章:

angular 按需加载 相关文章:

1:  

2:  

vue 按需加载  相关文章:

1: http://cn.vuejs.org/guide/components.html#异步组件

2: 

-----------------------------------------------------------

今天就针对,按需加载(也就是无请求不加载),分别给出一些实际项目经验的方案:

angular 按需加载方案:$ocLazyLoad

vue 按需加载方案:require([异步加载的组件], resolve)

 

对象方法中的this

在模拟 call 方法的时候,我们使用了对象方法来改变 this 的指向。调用对象中的方法时,会把对象作为方法的上下文环境来调用。

既然 this 是指向执行函数的上下文环境的,那我们先来研究一下调用函数时的执行上下文情况。

下面我门来看看调用对象方法时执行上下文是如何的:

var foo = { x : 1, getX: function(){ console.log(this.x); } } foo.getX();

1
2
3
4
5
6
7
var foo = {
    x : 1,
    getX: function(){
        console.log(this.x);
    }
}
foo.getX();

图片 1

从上图中,我们可以看出getX方法的调用者的上下文是foo,因此getX方法中的 this 指向调用者上下文foo,转换成 call 方法为foo.getX.call(foo)

下面我们把其他函数的调用方式都按调用对象方法的思路来转换。

未来可能加入的一些特性:

  • 支持近期HTML5规范变动从而支持模板标签
  • 支持分段分析
  • 全功能错误报告机制
  • 与其他语言绑定

 

如何安装Gumbo 及其用例,请查看 Gumbo的 Github 主页:

打赏支持我翻译更多好文章,谢谢!

打赏译者

 angular按需加载:$ocLazyLoad

需要3个步骤,就可以实现按需加载的方案。

第1步:bower install oclazyload

第2步:$ocLazyLoad封装:

图片 2

第3步:ui-router 路由配置:

图片 3

此方案做到了,template 和 controller 的文件按需加载。此时去访问页面就可以看到效果了。

 

效果Gif演示:

图片 4

 

闭包中的this

var x = 1; var foo = { x: 2, y: 3, getXY: function(){ (function(){ console.log("x:" + this.x); console.log("y:" + this.y); })(); } } foo.getXY();

1
2
3
4
5
6
7
8
9
10
11
12
var x = 1;
var foo = {
    x: 2,
    y: 3,
    getXY: function(){
        (function(){
            console.log("x:" + this.x);
            console.log("y:" + this.y);
        })();
    }
}
foo.getXY();

这段代码的上下文如下图:图片 5

这里需要注意的是,我们再研究函数中的 this 指向时,只需要关注 this 所在的函数是如何调用的, this 所在函数外的函数调用都是浮云,是不需要关注的。因此在所有的图示中,我们只需要关注红色框中的内容。

因此这段代码我们关注的部分只有:

(function(){ console.log(this.x); })();

1
2
3
(function(){
    console.log(this.x);
})();

与普通函数调用一样,创建一个虚拟上下文对象,然后普通函数作为这个虚拟上下文对象的方法立即调用,匿名函数中的 this 也就指向了这个虚拟上下文。图片 6

Gumbo 的目标和特性:

  • 完全符合 HTML5 规范
  • 对错误输入有健壮性和弹性
  • 简单的API,易于其他语言封装
  • 支持对源文件定位
  • 相对轻量级,无外部依赖
  • 通过所有 html5lib-0.95 测试
  • 在超过25亿的谷歌索引页面上测试过

 

vue 按需加载方案:require([异步加载的组件], resolve)

需要2个步骤,就可以完成按需加载

第一步,针对webpack.js 做配置的更改,如图:

图片 7

 

第二步:针对 router 路由,进行更改,主要是component的更改,如图。

图片 8

第三步:执行 npm run build 打包命令,就可以看到chunks文件夹生成了很多chunk的小文件,就是vue组件页面,如图:

图片 9

1 赞 1 收藏 评论

复杂情况下的this

var x = 1; var a = { x: 2, b: function(){ return function(){ return function foo(){ console.log(this.x); } } } }; (function(){ var x = 3; a.b()()(); })();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var x = 1;
var a = {
    x: 2,
    b: function(){
        return function(){
            return function foo(){
                console.log(this.x);
            }        
        }
    }
};
 
(function(){
    var x = 3;
    a.b()()();
})();

看到上面的情况是有很多个函数,但我们只需要关注 this 所在函数的调用方式,首先我们来简化一下如下:

var x = 1; (function(){ var x = 3; var foo = function(){ console.log(this.x); } foo(); });

1
2
3
4
5
6
7
8
var x = 1;
(function(){
    var x = 3;
    var foo = function(){
        console.log(this.x);
    }
    foo();
});

this 所在的函数 foo 是个普通函数,我们创建一个虚拟上下文对象,然后普通函数作为这个虚拟上下文对象的方法立即调用。因此这个 this指向了这个虚拟上下文。在非严格模式下是全局上下文,浏览器里是 window ,NodeJs里是 Global ;在严格模式下是 undefined

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

图片 10 图片 11

赞 收藏 1 评论

关于作者:新空气

图片 12

简介还没来得及写 :) 个人主页 · 我的文章 · 3

图片 13

DOM事件处理函数中的this

DOMElement.addEventListener('click', function(){ console.log(this); });

1
2
3
DOMElement.addEventListener('click', function(){
    console.log(this);
});

把函数绑定到DOM事件时,可以当作在DOM上增加一个函数方法,当触发这个事件时调用DOM上对应的事件方法。

DOMElement.clickHandle = function(){ console.log(this); } DOMElement.clickHandle();

1
2
3
4
DOMElement.clickHandle = function(){
    console.log(this);
}
DOMElement.clickHandle();

图片 14

Gumbo:Google推出纯C编写的HTML5解析器

2013/08/15 · HTML5 · 1 评论 · HTML5

本文由 伯乐在线 - 黄利民 翻译。未经许可,禁止转载!
英文出处:gumbo。欢迎加入翻译组。

Gumbo是一个 HTML5 解析算法实现,只用 C99 标准库编码实现,没有其他外部依赖。其设计目标是为其他工具和库的开发提供支持,这些工具和库包括 linters(JS检查器)、验证器、模板语言以及重构和分析工具。

 

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:换个思路理解Javascript中的this,按需加载的项目实

上一篇:面向对象实战之封装拖拽对象,虚假来电 下一篇:什么是虚拟视窗,Components构建单页面应用
猜你喜欢
热门排行
精彩图文