1.构造函数模式
//构造函数模式
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayName=function (){
console.log(this.name);
}
var p=new Person("candy",20);
console.log(p.sayName());
2.混合模式
//混合模式（构造函数创建对象+继承）
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;
}
// Student.prototype=Object.create(Person.prototype);
Student.prototype=create(Person.prototype);
function create(proto){
function F(){};
F.prototype=proto;
return new F();
}
Student.prototype.sayScore=function(){
console.log(this.score);
}
3.模块模式
//模块模式(立即执行函数，私有变量)
var Person=(function(){
var name="candy";
return {
getName:function(){
console.log(name);
},
changeName:function(newName){
name=newName;
}
}
})()
Person.changeName("hank");
Person.getName();
4.工厂模式
//工厂模式
//函数内部创建一个对象(可以是字面量方式、构造函数方式、或其它方式)，再把这个对象return出来
function createPerson(opts){
var person={
name:opts.name||"candy"
}
person.sayName=function(){
console.log(this.name);
}
return person;
}
var p1=createPerson({})
var p2=createPerson({name:"hank"})
5.单例模式
//单例模式
var singleModule = (function(){
var instance;
function getInstance(){
if( !instance){
instance = new Person();
}
return instance;
}
function Person(){
......
}
return {
getInstance : getInstance
}
})();
6.发布订阅模式
//发布订阅模式
var EventCenter=(function(){
var events={}; //events={evt:[{handler:fun1},{handler:fun2}]}
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
}
})()
使用发布订阅模式写一个事件管理器，可以实现如下方式调用；
EventManager.on('text:change', function(val){
console.log('text:change... now val is ' + val);
});
EventManager.fire('text:change', 'hello!');
EventManager.off('text:changer');
写一个函数createTimer，用于创建计时器，创建的计时器可分别进行计时新增。
function createTimer(){
var timer={
start:function(){
t1=Date.now();
},
end:function(){
t2=Date.now();
},
get:function(){
return t2-t1;
},
}
return 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
})
实现如下：
var Exposure=(function(){
var hasShow=false;
function one($target,callback){
$(window).on("scroll",function(){
if(hasShow){
return;
}
if(isVisible($target)){
callback.call($target); //即调用callback()，使$(this)代表$target
hasShow=true;
}
})
}
function every($target,callback){
$(window).on("scroll",function(){
if(isVisible($target)){
callback.call($target);
}
})
}
function isVisible($target){
var winH=$(window).height(),
scrollTop=$(window).scrollTop(),
offsetTop=$target.offset().top,
$targetH=$target.innerHeight();
return ((winH+scrollTop>offsetTop)&&(scrollTop<offsetTop+$targetH));
}
return {
one:one,
every:every,
}
})()
//调用方式
//只有第一次出现时执行回调函数
// Exposure.one($(".mid"),function(){
// console.log($(this)); //$(this)代表$target
// })
//每次出现时都执行回调函数
// Exposure.every($(".mid"),function(){
// console.log($(this)); //$(this)代表$target
// })
封装一个 轮播插件，分别使用对象方式和 jquery插件方式来调用
// 要求：html 里有多个carousel，当调用时启动全部的 carousel
//方式1
//通过插件的方式启动所有轮播
$('.carousel').carousel();
//方式2
//通过创建对象的方式启动所有轮播
$('.carousel').each(function(){
new Carousel($(this));
});
