keywords: 常用设计模式。
-
写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。
1、构造函数模式:
function Person(name,age) {
this.name = name
this.age = age
}
Person.prototype = {
sayName:function() {
console.log(this.name)
},
sayAge:function() {
console.log(this.age)
}
}
var p1 = new Person('zzm',20)
2、混合模式:
function Person(name,age) {
this.name = name
this.age = age
}
Person.prototype = {
sayName:function() {
console.log(this.name)
},
sayAge:function() {
console.log(this.age)
}
}
function Male(name,age) {
Person.call(this,name,age)
this.sex = 'Male'
}
Male.prototype = Object.create(Person.prototype)
var p1 = new Male('zzm',20)
3、模块模式:
var p1 = (function(name,age) {
return {
sayName:function() {
console.log(name)
},
sayAge:function() {
console.log(age)
}
}
})('zzm',24)
4、工厂模式:
function person(name,age) {
return {
sayName:function() {
console.log(name)
},
sayAge:function() {
console.log(age)
}
}
}
var p1 = person('zzm',24)
5、单例模式:
function CreateDiv(html) {
this.html = html
this.init
}
CreateDiv.prototype.init = function() {
var div = document.createElement('div')
div.innerHTML = this.html
document.body.appendChild(div)
}
//负责管理单例的逻辑剥离出来
var ProxySingletonCreateDiv = (function(){
var instance
return function(html) {
if(!instance) {
instance = new CreateDiv(html)
}
return instance
}
})()
var a = new ProxySingletonCreateDiv('sven1')
var b = new ProxySingletonCreateDiv('sven2')
alert(a === b)
6、发布订阅模式:
var EventCenter = (function () {
var clientList = {}
return {
listener:function(event,fn) {
if(!clientList[event]) {
clientList[event] = []
}
clientList[event].push(fn)
},
trigger:function() {
var event = Array.prototype.shift.call(arguments),
fns = clientList[event]
if(!fns || fns.length === 0) {
return false
}
for(var i = 0,fn;fn = fns[i++];) {
fn.apply(null,arguments)
}
},
remove:function(event,fn) {
var fns = clientList[event]
if(!fns) {
return false
}
if(!fn) {
fns && (fns.length = 0)
}else{
for(var i = fns.length - 1,_fn;_fn = fns[i];i--) {
if(_fn === fn) {
fns.splice(i,1)
}
}
}
}
}
})()
EventCenter.listener('squareMeter99',fn1 = function (price){
console.log('价格:'+price)
})
EventCenter.listener('squareMeter99',fn2 = function (price){
console.log('价格:'+price)
})
EventCenter.remove('squareMeter99',fn2)
EventCenter.trigger('squareMeter99',200000)
-
使用发布订阅模式写一个事件管理器,可以实现如下方式调用
var EventManager = (function() {
var clientList = {}
return {
on:function(event,fn) {
if(!clientList[event]) {
clientList[event] = []
}
clientList[event].push(fn)
},
fire:function() {
var event = Array.prototype.shift.call(arguments)
var fns = clientList[event]
if(!fns || (fns.length === 0)){
return false
}
for(var i = 0,fn;fn = fns[i++];){
fn.apply(null,arguments)
}
},
off:function(event,fn) {
var fns = clientList[event]
if(!fns) return false
if(!fn) {
fns.length = 0
}
for (var i = 0,_fn;_fn = fns[i];i++) {
if(_fn === fn) {
fns.splice(i,1)
}
}
}
}
})()
//订阅
EventManager.on('text:change',function(val){
console.log('text:change... now val is ' + val)
})
//发布
EventManager.fire('text:change','jirengu')
//取消
EventManager.off('text:change')
代码
-
写一个函数createTimer,用于创建计时器,创建的计时器可分别进行计时
function createTimer(){
var start,end
return {
start:function() {
return start = new Date()
},
end:function() {
return end = new Date()
},
get:function() {
return end - start
}
}
}
var timer1 = createTimer();
var timer2 = createTimer();
timer1.start();
for(var i=0;i<100;i++){
console.log(1);
}
timer2.start();
for(var i=0;i<100;i++){
console.log(2);
}
timer1.end();
timer2.end();
console.log(timer1.get());
console.log(timer2.get());
-
封装一个曝光加载组件,能实现如下方式调用
//$target 是 jquery 对象
// 当窗口滚动时,如果$target 出现在可见区域,执行回调函数里面的代码,且在回调函数内,$(this)代表$target
Expouse.bind($target1, function(){
console.log($(this)); // $target
})
// 当窗口滚动时,如果$target 出现在可见区域,执行回调函数里面的代码,且在回调函数内,$(this)代表$target。 仅执行一次回调函数,下次$target 曝光不再执行
Expouse.one($target2, function(){
console.log($(this)); // $target
})
-
封装一个 轮播插件,分别使用对象方式和 jquery插件方式来调用
// 要求:html 里有多个carousel,当调用时启动全部的 carousel
//方式1
//通过插件的方式启动所有轮播
$('.carousel').carousel();
//方式2
//通过创建对象的方式启动所有轮播
$('.carousel').each(function(){
new Carousel($(this));
});