问答
写出构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。
////////////构造函数模式
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayName()=function(){
console.log(this.name)
}
var people=new Person('人'，22)
/////////混合模式
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayName()=function(){
console.log(this.name)
}
function Student(name,age,score){
Person.call(this,name,age);
this.score=score;
}
function create(Obj){
functino F(){}
F.prototype=Obj.prototype;
return new F();
}
Student.prototype=create(Person);
Student.prototype.sayScore=function(){
console.log(this.score)
}
////////////模块模式
var Person=(function(){
var name='hunger'
return{
changeName:function(newName){
name=newName;
}
sayName:function(){
console.log(name)
}
}
})()
/////////////工厂模式
function createPerson(opts){
var person=function(){
name:opts.name||'ren'
}
person.sayName=function(){
console.log(this.name)
}
return new person
}
//////////////////单例模式
var Car = (function(){
var instance;
function init() {
//私有的变量和函数
var speed = 0;
return {
//定义公共的属性和方法
getSpeed: function(){
return speed;
},
setSpeed: function( s ){
speed = s;
}
};
}
return {
getInstance: function() {
if (!instance) {
instance = init();
}
return instance;
}
};
}());
/////////////////发布订阅模式
var EventCenter=(function(){
var events={};
function on(evt,handler){
events[evt]=events[evt]||[];
events[evt].push({
handler:handler
})
}
function fire(evt,args){
if (!events[evt]) {
return;
}
for(var i=0;i<events[evt].length;i++){
events[evt][i].handler(args);
}
}
return {
on:on,
fire:fire
}
})()
//////////单例模式范例
var Car = (function(){
var instance;
function init() {
//私有的变量和函数
var speed = 0;
return {
//定义公共的属性和方法
getSpeed: function(){
return speed;
},
setSpeed: function( s ){
speed = s;
}
};
}
return {
getInstance: function() {
if (!instance) {
instance = init();
}
return instance;
}
};
}());
使用发布订阅模式写一个事件管理器，可以实现如下方式调用
EventManager.on('text:change', function(val){
console.log('text:change... now val is ' + val);
});
EventManager.fire('text:change', '饥人谷');
EventManager.off('text:changer');
var EventManager=(function(){
var events={};
function on(evt,handler){
events[evt]=events[evt]||[];
events[evt].push(handler);
}
function fire(evt){
if(!events[evt]){
return;
}
for(var i=0;i<events[evt].length;i++){
events[evt][i]([].slice.call(arguments,1));
}
}
function off(evt){
delete events[evt];
}
return{
on:on,
fire:fire,
off:off
};
})();
代码
- 写一个函数createTimer，用于创建计时器，创建的计时器可分别进行计时「新增」。
ps: 1. 计时器内部写法参考前面的任务中Runtime的写法; 2. 体会工厂模式的用法
function createTimer(){
//todo..
}
var timer1 = createTimer();
var timer2 = createTimer();
timer1.start();
for(var i=0;i<100;i++){
console.log(i);
}
timer2.start();
for(var i=0;i<100;i++){
console.log(i);
}
timer1.end();
timer2.end();
console.log(timer1.get());
console.log(timer2.get());
function createTimer(){
function Timer(){
this.start;
this.end;
}
Timer.prototype.start=function(){
this.start=Date.now();
}
Timer.prototype.end=function(){
this.end=Date.now();
}
Timer.prototype.get=function(){
console.log(this.end-this.start);
}
return new Timer;
}
- 封装一个曝光加载组件，能实现如下方式调用
//$target 是 jquery 对象
// 当窗口滚动时，如果$target 出现在可见区域，执行回调函数里面的代码，且在回调函数内，$(this)代表$target
Expouse.bind($target, function(){
console.log($(this)); // $target
});
// 当窗口滚动时，如果$target 出现在可见区域，执行回调函数里面的代码，且在回调函数内，$(this)代表$target。 仅执行一次回调函数，下次$target 曝光不再执行
Expourse.one($target, function(){
console.log($(this)); // $target
})
在线预览
- 封装一个 轮播插件，分别使用对象方式和 jquery插件方式来调用
// 要求：html 里有多个carousel，当调用时启动全部的 carousel
//方式1
//通过插件的方式启动所有轮播
$('.carousel').carousel();
//方式2
//通过创建对象的方式启动所有轮播
$('.carousel').each(function(){
new Carousel($(this));
});
jQuery插件方式
对象方式
