工厂模式
<script>
function factory(opts) {
var person ={
name: opts
}
person.sayName = function () {
console.log('name:'+opts)
}
return person//需要return 出来
}
var p1 = factory('nick');
</script>
构造函数模式
<script>
function Person(name) {
this.name = name;
}
Person.prototype = {
say: function () {
console.log(this.name)
}
}
var p2 = new Person('Rick');
</script>
模块模式
<script>
var Person = (function(){
function changeName(name) {
this.name = name;
}
function sayName() {
console.log(this.name)
}
return{
change: changeName,
say: sayName
}
})()
</script>
混合模式
<script>
var Person = function (name,age) {
this.name = name;
this.age = age;
}
Person.prototype = {
sayName: function () {
console.log(this.name)
}
}
var Student = function (name,age,score) {
Person.call(this,name,age);
this.score = score;
}
//Student.prototype = Object.create(Person.prototype)
Student.prototype = create(Person.prototype)
function create(fn) {
function F(){};
F.prototype = fn;
return new F()
}
Student.prototype.constructor = Student;
Student.prototype.sayScore = function(){
console.log(this.score);
}
var student = new Student('Nick',23,90)
</script>
单例模式
<script>
var Person = (function () {
var instance ;
function init(name) {
return {
sayName:function () {
console.log(name)
}
}
}
return {
getInstance: function (name) {
if(!instance){
instance = init(name)
}
return instance
}
}
})()
var p1 = new Person.getInstance('nick')
var p2 = new Person.getInstance('rick')
console.log(p1 === p2)
</script>
发布订阅模式
<script>
var EventCenter = (function () {
var event = {};
function on(evt,handler){
event[evt] = event[evt] || [];
event[evt].push({
handler: handler
})
}
function fire(evt,args) {
if(!event[evt]){
return
}
for(var i = 0; i<event[evt].length;i++){
event[evt][i].handler(args);
}
}
return {
on: on,
fire: fire
}
})()
EventCenter.on('my_event', function(data){
console.log('my_event received...');
});
EventCenter.fire('my_event');
</script>
使用发布订阅模式写一个事件管理器，可以实现如下方式调用
<script>
var EventManager = (function () {
var event = {};
function on(evt,handler){
event[evt] = event[evt] || [];
event[evt].push({
handler: handler
})
}
function fire(evt,args) {
if(!event[evt]){
return
}
for(var i = 0; i<event[evt].length;i++){
event[evt][i].handler(args);
}
}
function off(evt) {
if(!event[evt]){
return
}else{
event[evt] = [];
}
}
return {
on: on,
fire: fire,
off: off
}
})()
EventManager.on('text:change', function(val){
console.log('text:change... now val is ' + val);
});
EventManager.fire('text:change', '饥人谷');
EventManager.off('text:change');
</script>
