模块化编程、MVC、面向对象编程

2019年10月1日 265次阅读 来源: BreezingSummer

模块化编程

所谓模块化编程，就是将代码模块化，每一块代码都只进行一种操作，可以这样理解吧。

全局变量和局部变量的转换

模块化编程重要的一点就是，在一个模块里，所有的变量都是局部变量（对整个项目来说，对这个模块来说当然可以是全局变量了）

模块化编程如何将全局变量转变为局部变量：

  1. 把所有代码都放在一个函数里面
  2. 再执行这个函数
  3. 这样除了这个函数是全局变量，其它都变成限制在这个函数里的局部变量了

我连那个函数这个全局变量都不想要了：

  1. 设置为匿名函数

  2. 立即执行，直接call()

    function(){
    //your code
}.call()

函数立即执行的优点：

  • 没有全局变量
  • 而只有用函数才能有局部变量

不好意思，chrome不支持，的解决办法：

  • 前面加!表示这是个立即执行函数。不过会对这个函数的返回值取反，不过立即执行了就没了，不关心它的返回值

    !function(){
    //your code
}.call()

  • 用()包起来。问题是如果前面有代码，比如xxx(function(){}).call()，这就等于调用xxx了，等价于xxx().call()。。。function(){}只是传入的参数

    (function(){
    //your code
}).call()
  • 把函数名设置成随机数。机智(๑•̀ㅂ•́)و✧~~

MVC

MVC是一种代码整理的思路

  • Model：用来存储数据相关的操作
  • View：用来存储表现层的元素，用户看的见的页面上的元素
  • Controller：用来存储各种行为、逻辑代码

《模块化编程、MVC、面向对象编程》
《模块化编程、MVC、面向对象编程》

上面这张图可以很好的展现M和V和C之间的互动关系。

  • 首先，用户只能接触到V上的东西，就是页面所展现的内容
  • 当用户和V开始交互了，一直在监听V的C会知道哪一个元素被动了，就会运行相应的代码
  • 通常情况下，C会调用M，这个时候，M就会向服务器server发送请求要数据，server自然会返回一个响应
  • 获得响应的M将数据返回给C，C再将数据更新在V上，就是再页面上更新

面向对象编程

愚见：深度模块化。将所有的重复的代码都提取出来形成对象、构造函数等，在需要使用的时候，调用或者使用new等进行操作。

this的几个小例子

button.onclick=function(){
    console.log(this);
}

👆上面的this指向button👆

button.addEventListener('click',function(){
    console.log(this);
})

👆上面的this指向button👆

$('ul').on('click','li',function(){
    console.log(this);
})

👆上面的this指向li👆

var x=X();
x.f1(option);

function X(){
    return object{                        //①，对象object里的this都指向对象object
        option:null,
        f1(x){
            this.option=x;
            this.f2();                    //②②
        },
        f2(){
            this.option.f2.call(this);    //③③③
        }
    }
}

var option={
    f1(){},
    f2(){
        console.log(this);               //④④④④
    }
}

👆执行完头两句，最终会调用对象option的f2(){console.log(this);}。这里的this指向对象object👆

new

new和原型链有很大关联，都是当需要创建很多很多个对象，而这些对象如果有很多相同的属性和方法，将这些相同的属性和方法提取出来，做成一个模板、原型。new的作用就是表明用这个模板、原型新生成一个对象。

创建士兵：

createSoldier(1);

function createSoldier(id){
    var rookieSoldier={
        ID:id,
    };
    rookieSoldier.__proto__=createSoldier.prototype;
    return soldier
}

createSoldier.prototype={
    兵种:"火枪兵",
    生命值:42,
    攻击:function(){},
    防御:function(){},
    行军:function(){}
}

使用new创建士兵：
👇👇👇下面createSoldier函数里的注释内容，就是使用new后，js自动帮你添加的（当然是看不见的）。我们需要写的是this.ID = id这样自定义的内容和createSoldier.prototype公共的内容👇👇👇

new createSoldier(1);

function createSoldier(id){
    //var temp={};
    //this = temp;
    //this.__proto__=createSoldier.prototype;
    this.ID = id;
    //return this;
}

createSoldier.prototype={
    兵种:"火枪兵",
    生命值:42,
    攻击:function(){},
    防御:function(){},
    行军:function(){}
}

常见的new的使用：

var object = new Object();        //object.__proto__=Object.prototype
var array = new Array();          //array.__proto__=Array.prototype
var string = new String();        //string.__proto__=String.prototype
var number = new Number();        //number.__proto__=Number.prototype

请参考：https://blog.csdn.net/a153375…
请参考：https://zhuanlan.zhihu.com/p/…

与与或

这里在讨论||和&&的返回值

||或表达式中，有一个是真即返回这个真的值（第一个真值）：
&&与表达式中，有一个是假即返回这个假的值（第一个假值）：
注意：并不是返回true或者false，而是返回这个真值或者假值!!!
所有的假值：NaN 0 '' undefined false null

0 || 12 || 'a'                  //返回12
var a= {} || undefined || 12    //a={}
0 && 12 && 'a'                  //返回0
var a= {} && undefined && 12    //a=undefined
    原文作者：BreezingSummer
    原文地址: https://segmentfault.com/a/1190000016683630
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞