xml地图|网站地图|网站标签 [设为首页] [加入收藏]
前端资源预加载并展示进度条,时要避免的几个
分类:web前端

谈谈 JavaScript 的观察者模式(自定义事件)

2016/08/25 · JavaScript · 观察者模式, 设计模式

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

呼呼,前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈。后来研究了一下,原来就是所谓的观察者模式。就记下来 ^_^

题目

JavaScript

[附加题] 请实现下面的自定义事件 Event 对象的接口,功能见注释(测试1) 该 Event 对象的接口需要能被其他对象拓展复用(测试2) // 测试1 Event.on('test', function (result) { console.log(result); }); Event.on('test', function () { console.log('test'); }); Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test' // 测试2 var person1 = {}; var person2 = {}; Object.assign(person1, Event); Object.assign(person2, Event); person1.on('call1', function () { console.log('person1'); }); person2.on('call2', function () { console.log('person2'); }); person1.emit('call1'); // 输出 'person1' person1.emit('call2'); // 没有输出 person2.emit('call1'); // 没有输出 person2.emit('call2'); // 输出 'person2'<br>var Event = { // 通过on接口监听事件eventName // 如果事件eventName被触发,则执行callback回调函数 on: function (eventName, callback) { //你的代码 }, // 触发事件 eventName emit: function (eventName) { //你的代码 } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
[附加题] 请实现下面的自定义事件 Event 对象的接口,功能见注释(测试1)
该 Event 对象的接口需要能被其他对象拓展复用(测试2)
// 测试1
Event.on('test', function (result) {
    console.log(result);
});
Event.on('test', function () {
    console.log('test');
});
Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test'
// 测试2
var person1 = {};
var person2 = {};
Object.assign(person1, Event);
Object.assign(person2, Event);
person1.on('call1', function () {
    console.log('person1');
});
person2.on('call2', function () {
    console.log('person2');
});
person1.emit('call1'); // 输出 'person1'
person1.emit('call2'); // 没有输出
person2.emit('call1'); // 没有输出
person2.emit('call2'); // 输出 'person2'<br>var Event = {
    // 通过on接口监听事件eventName
    // 如果事件eventName被触发,则执行callback回调函数
    on: function (eventName, callback) {
        //你的代码
    },
    // 触发事件 eventName
    emit: function (eventName) {
        //你的代码
    }
};

差点没把我看晕…

好吧,一步一步来看看怎么回事。

①了解一下观察者模式

观察者模式

这是一种创建松散耦合代码的技术。它定义对象间 一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。由主体和观察者组成,主体负责发布事件,同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情,观察者知道主体并能注册事件的回调函数。

例子:

假如我们正在开发一个商城网站,网站里有header头部、nav导航、消息列表、购物车等模块。这几个模块的渲染有一个共同的前提条件,就是必须先用ajax异步请求获取用户的登录信息。这是很正常的,比如用户的名字和头像要显示在header模块里,而这两个字段都来自用户登录后返回的信息。这个时候,我们就可以把这几个模块的渲染事件都放到一个数组里面,然后待登录成功之后再遍历这个数组并且调用每一个方法。

基本模式:

JavaScript

function EventTarget(){ this.handlers = {}; } EventTarget.prototype = { constructor: EventTarget, addHandler: function(type, handler){ if (typeof this.handlers[type] == "undefined"){ this.handlers[type] = []; } this.handlers[type].push(handler); }, fire: function(event){ if (!event.target){ event.target = this; } if (this.handlers[event.type] instanceof Array){ var handlers = this.handlers[event.type]; for (var i=0, len=handlers.length; i < len; i++){ handlers[i](event); } } }, removeHandler: function(type, handler){ if (this.handlers[type] instanceof Array){ var handlers = this.handlers[type]; for (var i=0, len=handlers.length; i < len; i++){ if (handlers[i] === handler){ break; } } handlers.splice(i, 1); } } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function EventTarget(){    
    this.handlers = {};
}
EventTarget.prototype = {    
    constructor: EventTarget,
    addHandler: function(type, handler){
         if (typeof this.handlers[type] == "undefined"){
              this.handlers[type] = [];
         }
         this.handlers[type].push(handler);
     },
    fire: function(event){
         if (!event.target){
             event.target = this;
         }
         if (this.handlers[event.type] instanceof Array){
             var handlers = this.handlers[event.type];
             for (var i=0, len=handlers.length; i < len; i++){
                 handlers[i](event);
            }
         }
     },
     removeHandler: function(type, handler){
        if (this.handlers[type] instanceof Array){
            var handlers = this.handlers[type];
            for (var i=0, len=handlers.length; i < len; i++){
                if (handlers[i] === handler){
                    break;
                 }
             }
             handlers.splice(i, 1);
          }
      }
};

大概意思就是,创建一个事件管理器。handles是一个存储事件处理函数的对象。

addHandle:是添加事件的方法,该方法接收两个参数,一个是要添加的事件的类型,一个是这个事件的回调函数名。调用的时候会首先遍历handles这个对象,看看这个类型的方法是否已经存在,如果已经存在则添加到该数组,如果不存在则先创建一个数组然后添加。

fire方法:是执行handles这个对象里面的某个类型的每一个方法。

removeHandle:是相应的删除函数的方法。

好啦,回到题目,分析一下。

②题目中的测试一:

JavaScript

// 测试1 Event.on('test', function (result) { console.log(result); }); Event.on('test', function () { console.log('test'); }); Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test'

1
2
3
4
5
6
7
8
// 测试1
Event.on('test', function (result) {
    console.log(result);
});
Event.on('test', function () {
    console.log('test');
});
Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test'

意思就是,定义一个叫’test’类型的事件集,并且注册了两个test事件。然后调用test事件集里面的全部方法。在这里on方法等价于addHandle方法,emit方法等价于fire方法。其中第一个参数就是事件类型,第二个参数就是要传进函数的参数。

是不是这个回事呢?很好,那么我们要写的代码就是:

JavaScript

var Event = { // 通过on接口监听事件eventName // 如果事件eventName被触发,则执行callback回调函数 on: function (eventName, callback) { //我的代码 if(!this.handles){ this.handles={}; } if(!this.handles[eventName]){ this.handles[eventName]=[]; } this.handles[eventName].push(callback); }, // 触发事件 eventName emit: function (eventName) { //你的代码 if(this.handles[arguments[0]]){ for(var i=0;i<this.handles[arguments[0]].length;i++){ this.handles[arguments[0]][i](arguments[1]); } } } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var Event = {
    // 通过on接口监听事件eventName
    // 如果事件eventName被触发,则执行callback回调函数
    on: function (eventName, callback) {
        //我的代码
        if(!this.handles){
             this.handles={};    
        }      
       if(!this.handles[eventName]){
            this.handles[eventName]=[];
       }
       this.handles[eventName].push(callback);
    },
    // 触发事件 eventName
    emit: function (eventName) {
        //你的代码
       if(this.handles[arguments[0]]){
           for(var i=0;i<this.handles[arguments[0]].length;i++){
               this.handles[arguments[0]][i](arguments[1]);
           }
       }
    }
};

这样测试,完美地通过了测试一。

③测试二:

JavaScript

var person1 = {}; var person2 = {}; Object.assign(person1, Event); Object.assign(person2, Event); person1.on('call1', function () { console.log('person1'); }); person2.on('call2', function () { console.log('person2'); }); person1.emit('call1'); // 输出 'person1' person1.emit('call2'); // 没有输出 person2.emit('call1'); // 没有输出 person2.emit('call2'); // 输出 'person2'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var person1 = {};
var person2 = {};
Object.assign(person1, Event);
Object.assign(person2, Event);
person1.on('call1', function () {
    console.log('person1');
});
person2.on('call2', function () {
    console.log('person2');
});
person1.emit('call1'); // 输出 'person1'
person1.emit('call2'); // 没有输出
person2.emit('call1'); // 没有输出
person2.emit('call2'); // 输出 'person2'

大概意思就是为两个不同person注册自定义事件,并且两个person之间是互相独立的。

直接测试,发现输出了

图片 1

这个好像是题目要求有点出入呢,或者这才是题目的坑吧!

解释一下,Object.assign(person1, Event);

这个是ES6的新对象方法,用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

意思是将Event里面的可枚举的对象和方法放到person1里面。

图片 2

也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。由于进行测试一的时候调用了on方法,所以event里面已经有了handles这个可枚举的属性。然后再分别合并到两个person里面的话,两个person对象里面的handles都只是一个引用。所以就互相影响了。

如果assign方法要实现深克隆则要这样:

图片 3

问题是,题目已经固定了方式,我们不能修改这个方法。

所以,我们必须将handles这个属性定义为不可枚举的,然后在person调用on方法的时候再分别产生handles这个对象。

也就是说正确的做法应该是:

JavaScript

var Event = { // 通过on接口监听事件eventName // 如果事件eventName被触发,则执行callback回调函数 on: function (eventName, callback) { //你的代码 if(!this.handles){ //this.handles={}; Object.defineProperty(this, "handles", { value: {}, enumerable: false, configurable: true, writable: true }) } if(!this.handles[eventName]){ this.handles[eventName]=[]; } this.handles[eventName].push(callback); }, // 触发事件 eventName emit: function (eventName) { //你的代码 if(this.handles[arguments[0]]){ for(var i=0;i<this.handles[arguments[0]].length;i++){ this.handles[arguments[0]][i](arguments[1]); } } } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var Event = {
    // 通过on接口监听事件eventName
    // 如果事件eventName被触发,则执行callback回调函数
    on: function (eventName, callback) {
        //你的代码
        if(!this.handles){
            //this.handles={};
            Object.defineProperty(this, "handles", {
                value: {},
                enumerable: false,
                configurable: true,
                writable: true
            })
        }
      
       if(!this.handles[eventName]){
            this.handles[eventName]=[];
       }
       this.handles[eventName].push(callback);
    },
    // 触发事件 eventName
    emit: function (eventName) {
        //你的代码
       if(this.handles[arguments[0]]){
           for(var i=0;i<this.handles[arguments[0]].length;i++){
               this.handles[arguments[0]][i](arguments[1]);
           }
       }
    }
};

通过这道题,感觉考得真的很巧妙而且很考基础。好啦。我还是好好复习去了。

打赏支持我写出更多好文章,谢谢!

打赏作者

前端资源预加载并展示进度条

2015/09/30 · JavaScript · 预加载

原文出处: 吕大豹   

我们经常会看到,一些站点在首次进入的时候会先显示一个进度条,等资源加载完毕后再呈现页面,大概像这样:

图片 4

然后整个页面的操作就会非常流畅,因为之后没必要再等待加载资源了。尤其是在移动端,或者是页游中,这样做能避免页面出现白屏(等待加载图片),很大程度提升用户体验。那这种技术是如何实现的呢?其实非常简单,本文就来从基础细节探究一番。

写 CSS 时要避免的几个地方

2015/11/01 · CSS · 命名

原文出处: heydonworks   译文出处:腊八粥   

声明:你可以不同意我在本文所写的一些观点,没有问题,我不是要代表你、代表你的公司或意识,因此请不要感到不安。继续保持你的看法即可。向那些理解演讲方法和辩证法的、绝大多数人致歉,因为本声明不适用于他们。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 5 图片 6

1 赞 5 收藏 评论

为什么需要资源预加载

大多时候,我们的页面并不是一次渲染完毕的,而是随着用户的操作,不断修改DOM节点,如果你动态插入了一个图片节点,那么浏览器要马上发一个http请求,把图片加载下来然后渲染在页面上,如果用户此时的网速不佳,那么加载这张图片可能就会消耗几秒钟时间,此时页面上什么都没有(白屏)。最坏的情况,如果你的应用图片很多,半天加载不出几张图,用户很可能就在白屏的那几秒跳走了。在游戏中更严重,主角的图片如果加载不出来,让用户玩空气去?

除了在DOM中插入图片节点,其他凡是涉及到要展示一张新图片的操作,浏览器都得即时去请求图片。比如,为某个节点添加如下css类来增加背景图片:

CSS

.bg1{ backgroundnull:url(); }

1
2
3
.bg1{
     background: url(http://p2.qhimg.com/t01ed1438874f940dc0.jpg);
}

或者是动态修改了src属性、在canvas绘制图片等,这些都会即时请求新资源。

那么,资源预加载为什么能解决上述问题呢?

我们预加载的资源,浏览器会缓存下来,再次使用的时候,浏览器会检查是不是已经在缓存中,如果在,则直接用缓存的资源,不发送请求,或者由服务端返回304 not modified(304只带请求头信息,不传输资源)。这样使用一张图片的时间会大大缩减,我们的页面看起来会非常流畅,妈妈再也不用担心用户会跳走了~

也就是说,预加载的资源我们并不需要手动保存,由浏览器自动放到缓存了。

多文件

很多 web 开发貌似都和将任务分割为可管理的块或「组件」相关。对于每一个分离的 JavaScript 功能块、或 HTML 局部,我可以做一个专门文件,并把相关文件组织到文件夹里,以 javascript、html 或 controller、templates 命名。你怎么做都行。这样,你就能轻松查看文件系统,只关注包含有你当时想要编辑的代码文件即可。

这种方式不适用于 CSS。JavaScript 函数可以放在它们被调用位置的前后,HTML 模块可以在任何地方插入,只要你觉得它们适合当前文档流。另一方面,CSS 是按照时间顺序发生的。它和你声明样式的顺序,有着很大关系。由于该语言的继承和 specificity注1,你应该从一般样式(比如对 body 设置 font-family)开始,并过度到更多具体的定义。

CSS 是一个有序的、以例外为基础的语言,没有简单的方法来连贯地表示一个文件列表(通常按照字母顺序组织)。它给了你一个印象,每个 CSS 文件都是自治的,事实上却不是。

- buttons.css - reset.css

1
2
- buttons.css
- reset.css

因此你有两种选择:当你试图把一个方钉子打入圆孔时,你可以对「specificity 不应该成为 CSS 的一部分」持拒绝、抱怨的态度,或者,你用一个有着良好注释的文件,它明确地表示了继承过来层叠的弧度。specificity 不应该成为一个问题,因为大多数特定的选择器应该是你最后才编写的。

总结你不应该把 CSS 文件分割为独立文件,就像不应该把一块玻璃丢在水泥地板上一样。

关于作者:winty

图片 7

前端工程师,前端爱好者。博客: 个人主页 · 我的文章 · 1 ·  

图片 8

资源预加载的场景

什么样的项目需要预加载资源呢?

范围应该锁定单页面应用,SPA的视图一般都是一步一步来呈现的,各种资源通过异步请求来获取,为了追求原生app般的流畅体验,可以把一些资源预加载下来。当然对于一些业务相关的图片资源,也可考虑延迟加载,但延迟加载不是本文讨论的范畴。

视图/图片较多的专题页面,或者是需要逐帧图片来完成的动画效果,最好都要做预加载。

HTML5游戏,图片一般都比较多,而且很多逐帧动画,必须要预加载,事实上一些游戏引擎都会提供相应功能。

哪些资源需要预加载呢?

web中包含的资源有很多种,图片、音视频之类的媒体文件,另外就是js、css文件,这些都需要发送请求来获取。那这些资源难道我们都预加载?

当然不是了,预加载也是需要消耗时间的,总不能让用户等你加载个几十秒钟吧。具体预加载哪些资源,需要基于具体的考虑,也跟你的项目相关。以下是一些我的想法:

js、css文件不需进行预加载。现在写js基本都用requirejs之类的加载器,而且最后都会进行压缩合并,将请求数降到最低,最终只有一个文件,有些团队甚至还将压缩后的代码直接放在行内,这样一个多余的请求都没有了。

那么需要预加载的就是媒体文件了,图片、音视频之类。这类资源也得根据实际情况来选择哪些需要预加载。比如大多数页面装饰性图片就需要预加载,而由业务动态获取的图片则无法预加载(预先不知道地址)。用作音效、小动画的音视频可以预加载,一个半小时长的视频就不能预加载了。

嵌套(借助 Sass)

我对 Sass 感到比较纠结。它的一些思想真的让我激动,比如使用循环和条件语句提高编写效率的能力。而另外一些特性就不那么好了,比如无限嵌套的声明。

我认为,很多人选择 Sass,帮助他们管理和维护 CSS,更方便阅读和编写。Sass 做为一个依赖和抽象层所带来的负面影响,就是让事情更加系统化地复杂,据说还有一些 Sass 提供的接口,比如带参数的混入(mixin)。将其用在项目中,代码的可阅读性和简短程度,就成了一种福音。

嵌套吗?那只会让问题更糟。想象一下组织最糟糕的 CSS 文件。虽然混乱,但至少是一个维度的混乱:如果你愿意,那么只有一个文件混乱。让编写蹩脚 CSS 的人(可以是任何人,很多时候也包含我)使用嵌套,相当于授权他们扩大到第二维度的混乱。太棒了!现在,混乱彻底蔓延开来。

鉴于在其它语言里,尽可能地避免嵌套结构是一种职业荣誉感的体现,那么,将这种能力用在不需要嵌套的语言里,貌似有些可笑。Hugo Giraudel 就 Sass 写了数百篇指导文章。下面是他就嵌套不得不说的话:

Fucking. Stop. Nesting.

总结你要追寻的 Sass 特性不应该是嵌套。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:前端资源预加载并展示进度条,时要避免的几个

上一篇:没有了 下一篇:在京东网站前端监控平台的最佳实践,CSS动画学
猜你喜欢
热门排行
精彩图文