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

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_示意图

上面这张图可以很好的展现MVC之间的互动关系。

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

?执行完头两句,最终会调用对象optionf2(){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
阅读 1.6k
41 声望
0 粉丝
0 条评论
你知道吗?

41 声望
0 粉丝
文章目录
宣传栏