- 写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。
//单例模式范例
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 car = Car.getInstance();
var car2 = Car.getInstance();
car === car2;
//构造函数模式
function Car(){
this.speed;
}
Car.prototype.init = funcition(){
this.speed = 0;
}
Car.prototype.getSpeed = function(){
return this.speed;
}
Car.prototype.setSpeed = function(s){
this.speed = s;
return this.speed;
}
var car = new Car();
car.init();
car.setSpeed(40);
car.getSpeed();
//混合模式
function Person(name){
this.name = name;
}
Person.prototype.satName = function(){
console.log(this.name);
}
function People(name, age){
Person.call(this, name);
this.age = age;
}
//People.prototype = Object.create(Person.prototye);
People.prototype = create(Person.prototype);
function create(parentObj){
function F(){};
F.prototype = parentObj;
return new F();
}
//模块模式
var Person = (function(){
var name = 'yangran';
return {
sayName: function(){
console.log(name);
},
setName: function(newName){
name = newName;
}
}
})()
Person.sayName();
Person.setName('sfyr111');
Person.sayName();
//工厂模式
function CreatPerson(opts){
function Person(){
this.name = opts.name || 'yangran';
this.age = opts.age;
}
Person.prototype.sayName = function(){
console.log(this.name);
}
Person.prototype.sayAge = function(){
console.log(this.age);
}
if(opts.type === 'sayName'){
return new Person().sayName();
} else if(opts.type === 'sayAge'){
return new Person().sayAge();
}
}
CreatPerson({type: 'sayName', name: 'sfyr111'});
//单例模式
var People = (function(){
var instance;
function Person(){
}
Person.prototype.init = function(opts){
this.name;
this.age;
}
Person.prototype.sayName = function(){
console.log(this.name);
}
if(!instance) {
instance = new Person();
}
return instance;
})()
//发布订阅模式
var EventCenter = (function(){
var events = {};//定义事件空集合
//预定的集合类型events = {'event1': [fun1, fun2],'event2': [fun3, fun4]}
function on(evt, fn){
events[evt] = events[evt] || [];
events[evt].push(fn);
}
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
}
})()
EventCenter.on('event1', function(){
console.log(1);
})
EventCenter.on('event2', function(){
console.log(2);
})
EventCenter.fire('event1')
EventCenter.fire('event2')
- 使用发布订阅模式写一个事件管理器，可以实现如下方式调用
EventManager.on('text:change', function(val){
console.log('text:change... now val is ' + val);
});
EventManager.fire('text:change', '饥人谷');
EventManager.off('text:change');
var EventManager = (function(){
var events = {};//定义事件空集合
//预定的集合类型events = {'event1': [fun1, fun2],'event2': [fun3, fun4]}
function on(evt, fn){
events[evt] = events[evt] || [];
events[evt].push(fn);
}
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(){
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;
}
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());
- 封装一个曝光加载组件，能实现如下方式调用
//$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插件方式
轮播创建对象方式
本博客版权归 本人和饥人谷所有，转载需说明来源
