你应了解的4种JS设计模式

最新推荐文章于 2023-11-21 16:26:08 发布

dicha7140

最新推荐文章于 2023-11-21 16:26:08 发布

阅读量110

点赞数

文章标签：设计模式 javascript ViewUI

原文链接：http://www.cnblogs.com/CyLee/p/6072944.html

版权

临时补充

(function(){
  console.log(this)
}.bind(this)())

学习地址：

http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651223556&idx=1&sn=8cd7a22729fef7cec602b78c827e659d&chksm=bd49af808a3e26967396925a7eaee15cc430f1ba820c33fd108d64aa5ecec22ff08835e09be8&mpshare=1&scene=23&srcid=1117xM0S0p6xzvob4q6F40k4#rd

模块设计模式
原型模式
观察者模式
单例模式

1、模块设计模式

JS模块化是使用最普遍的设计模式，用于保持特殊的代码块与其它组件之间互相独立。为支持结构良好的代码提供了松耦合。

模块就是JS的 “类”，可以确保它本身的状态和行为不被其它的类访问到

<script type="text/javascript">

//模块设计模式
var HtmlChanger = (function(){
    var contents = "contents";

    return {
        getContent:function(){
            return contents;
        }
    }

})();

var contents = HtmlChanger.getContent();
console.log(contents); 
  
</script>

2、原型设计模式

<script type="text/javascript">
var TeslaModels = function(){
    this.numWheels = 4;
    this.manufacturer = 'teela';
    this.make = 'model s';    
}

TeslaModels.prototype = {
    go:function(){
        //...
    },
    stop:function(){
        //...
    }
}
  
</script>