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

模块化编程

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

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

模块化编程重要的一点就是&＃xff0c;在一个模块里&＃xff0c;所有的变量都是局部变量&＃xff08;对整个项目来说&＃xff0c;对这个模块来说当然可以是全局变量了&＃xff09;

模块化编程如何将全局变量转变为局部变量&＃xff1a;

把所有代码都放在一个函数里面
再执行这个函数
这样除了这个函数是全局变量&＃xff0c;其它都变成限制在这个函数里的局部变量了

我连那个函数这个全局变量都不想要了&＃xff1a;

设置为匿名函数
立即执行&＃xff0c;直接call()

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

函数立即执行的优点&＃xff1a;

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

不好意思&＃xff0c;chrome不支持&＃xff0c;的解决办法&＃xff1a;

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

!function(){//your code }.call()
用()包起来。问题是如果前面有代码&＃xff0c;比如xxx(function(){}).call()&＃xff0c;这就等于调用xxx了&＃xff0c;等价于xxx().call()。。。function(){}只是传入的参数

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

MVC

MVC是一种代码整理的思路

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

MVC
MVC_示意图

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

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

面向对象编程

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

this的几个小例子

button.onclick&＃61;function(){console.log(this); }

?上面的this指向button?

button.addEventListener(&＃39;click&＃39;,function(){console.log(this); })

?上面的this指向button?

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

?上面的this指向li?

var x&＃61;X(); x.f1(option);function X(){return object{ //①&＃xff0c;对象object里的this都指向对象objectoption:null,f1(x){this.option&＃61;x;this.f2(); //②②},f2(){this.option.f2.call(this); //③③③}} }var option&＃61;{f1(){},f2(){console.log(this); //④④④④} }

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

new

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

创建士兵&＃xff1a;

createSoldier(1);function createSoldier(id){var rookieSoldier&＃61;{ID:id,};rookieSoldier.__proto__&＃61;createSoldier.prototype;return soldier }createSoldier.prototype&＃61;{兵种:"火枪兵",生命值:42,攻击:function(){},防御:function(){},行军:function(){} }

使用new创建士兵&＃xff1a;
???下面createSoldier函数里的注释内容&＃xff0c;就是使用new后&＃xff0c;js自动帮你添加的&＃xff08;当然是看不见的&＃xff09;。我们需要写的是this.ID &＃61; id这样自定义的内容和createSoldier.prototype公共的内容???

new createSoldier(1);function createSoldier(id){//var temp&＃61;{};//this &＃61; temp;//this.__proto__&＃61;createSoldier.prototype;this.ID &＃61; id;//return this; }createSoldier.prototype&＃61;{兵种:"火枪兵",生命值:42,攻击:function(){},防御:function(){},行军:function(){} }

常见的new的使用&＃xff1a;

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

请参考&＃xff1a;https://blog.csdn.net/a153375...
请参考&＃xff1a;https://zhuanlan.zhihu.com/p/...

与与或

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

||或表达式中&＃xff0c;有一个是真即返回这个真的值&＃xff08;第一个真值&＃xff09;&＃xff1a;
&&与表达式中&＃xff0c;有一个是假即返回这个假的值&＃xff08;第一个假值&＃xff09;&＃xff1a;
注意&＃xff1a;并不是返回true或者false&＃xff0c;而是返回这个真值或者假值!!!
所有的假值&＃xff1a;NaN 0 &＃39;&＃39; undefined false null