JS面向对象一:MVC的面向对象封装

JS面向对象一:MVC的面向对象封装

MDNjavascript面向对象

面向对象(Object-Oriented)

面向对象里面向的意思是以...为主,面向对象编程既以对象为主的编程.

面向对象的一些概念:

Namespace 命名空间 允许开发人员在一个独特, 应用相关的名字的名称下捆绑所有功能的容器。 Class 类 定义对象的特征。它是对象的属性和方法的模板定义. Object 对象 类的一个实例。 Property 属性 对象的特征,比如颜色。 Method 方法 对象的能力,比如行走。 Constructor 构造函数 对象初始化的瞬间, 被调用的方法. 通常它的名字与包含它的类一致. 例如Object(),String(),Number() Inheritance 继承 一个类可以继承另一个类的特征。 Encapsulation 封装 一种把数据和相关的方法绑定在一起使用的方法. Abstraction 抽象 结合复杂的继承,方法,属性的对象能够模拟现实的模型。 Polymorphism 多态 多意为‘许多’,态意为‘形态’。不同类可以定义相同的方法或属性。

命名空间

// 全局命名空间
var MYAPP = MYAPP || {};

javascript命名空间 MYAPP包含了所有的命名,他就像一个房间一样,装着所有的属性,所以就叫命名空间

// 给普通方法和属性创建一个叫做MYAPP.commonMethod的容器
MYAPP.commonMethod = {
  regExForName: "", // 定义名字的正则验证
  regExForPhone: "", // 定义电话的正则验证
  validateName: function(name){
    // 对名字name做些操作,你可以通过使用“this.regExForname”
    // 访问regExForName变量
  },
 
  validatePhoneNo: function(phoneNo){
    // 对电话号码做操作
  }
}

// 对象和方法一起申明
MYAPP.event = {
    addListener: function(el, type, fn) {
    //  代码
    },
   removeListener: function(el, type, fn) {
    // 代码
   },
   getEvent: function(e) {
   // 代码
   }
  
   // 还可以添加其他的属性和方法
}

//使用addListener方法的写法:
MYAPP.event.addListener("yourel", "type", callback);

解释: 因为

1||2//返回1,不是true或者false!!!

五个falsy值 0 NaN null undefined ''

在javascript中,a||b c&&d的返回值只会在abcd中选一个!

阮一峰-且运算符(&&)或运算符(||)

且运算符(&&)往往用于多个表达式的求值。 它的运算规则是:如果第一个运算子的布尔值为true,则返回第二个运算子的值(注意是值,不是布尔值);如果第一个运算子的布尔值为false,则直接返回第一个运算子的值,且不再对第二个运算子求值。

如果是一连串的&&,他的返回值就是遇到的第一个falsy值,后面的不看了

1 && 0 && console.log(3)//console.log(3)不会执行,返回0
console.log(3)//返回undefined

而||和&&相反

返回第一个为真的值.后面的不看 那么:

var a = b || {} 意思就是如果b是存在的(b的返回值为true),那么a=b,如果b不存在,那么a={}

类(从MVC提炼面向对象是什么)

使用的代码是 模块化、MVC里的V和C、闭包与立即执行函数的使用MVC中的M(model)、MVC总结

接下来优化老版本的message.js 箭头函数内外this相通

优化前的结构:

在几个模块化文件里,都有MVC

那么我们可以吧每个js文件中的MVC写成一个模板,这个模板就是 所谓模板,就是写个函数把他造出来,那么我们来封装MVC

封装 Model View Controller

首先建三个封装的文件,再引入

View():

Model():

原先的model:

封装后Model():

并且save()传入object 然后就可以用封装后的Model()代码了,修改message.js代码为:

也就是说,封装后我们的使用方法是:

如果有两个model,不需要写重复代码

View,Model封装后的完整代码

Controller():

封装Controller.js,但是没有将封装运用,因为自己的简历项目比较小,代码结构不复杂,封装后反而会难理解,知道如何封装和如何使用的思想就可以

封装后的所有MVC代码

总结

密爱想对象封装后MVC的使用方法: view:

/*
var view = View('.xxx')
*/

model:

/*
var model = Model({
  resourceName: '表名'
})
*/

controller:

/*
Controller({
  init:(){
    this.view
    this.model
    this.xxx()
    this.yyy()
  },
  xxx(){},
  yyy(){}
})
*/

简单了不少.

总结: 面向对象就是既然这些对象有相同的属性和相同的行为,那么就把相同的地方存到一个地方,当做一个模板.这就叫 当需要生成对象的时候,new一个对象出来,这个对象就有这个模板上的属性和行为.这就叫实例化一个对象. 面向对象的核心就是实例化一个对象

其他:对象的方法

以下引用自MDNjavascript面向对象

如果一个Object的的属性是函数,那么这个属性叫方法

在JavaScript中方法通常是一个绑定到对象中的普通函数, 这意味着方法可以在其所在context之外被调用。 思考下面示例中的代码:

function Person(firstName) {
  this.firstName = firstName;
}


Person.prototype.sayHello = function() {
  alert("Hello, I'm " + this.firstName);
};

var person1 = new Person("Alice");
var person2 = new Person("Bob");
var helloFunction = person1.sayHello;

person1.sayHello();                                 // alerts "Hello, I'm Alice"
person2.sayHello();                                 // alerts "Hello, I'm Bob"
helloFunction();                                    // alerts "Hello, I'm undefined" (or fails
                                                    // with a TypeError in strict mode)
console.log(helloFunction === person1.sayHello);          // logs true
console.log(helloFunction === Person.prototype.sayHello); // logs true
helloFunction.call(person1);                        // logs "Hello, I'm Alice"
helloFunction.call(person2);                        // logs "Hello, I'm Bob"

如上例所示, 所有指向sayHello函数的引用 ,包括 person1, Person.prototype, 和 helloFunction 等, 均引用了相同的函数.

console.log(helloFunction === person1.sayHello);          // logs true
console.log(helloFunction === Person.prototype.sayHello); // logs true

在调用函数的过程中,this的值取决于我们怎么样调用函数. 在通常情况下,我们通过一个表达式person1.sayHello()来调用函数:即从一个对象的属性中得到所调用的函数。此时this被设置为我们取得函数的对象(即person1)。这就是为什么person1.sayHello() 使用了姓名“Alice”而person2.sayHello()使用了姓名“bob”的原因。

然而我们使用不同的调用方法时, this的值也就不同了。当从变量 helloFunction()中调用的时候, this就被设置成了全局对象 (在浏览器中即window)。由于该对象 (非常可能地) 没有firstName 属性, 我们得到的结果便是"Hello, I'm undefined". (这是松散模式下的结果, 在 严格模式中,结果将不同(此时会产生一个error)。 但是为了避免混淆,我们在这里不涉及细节) 。另外,我们可以像上例末尾那样,使用Function#call (或者Function#apply)显式的设置this的值。

自己的理解:call()的第一个参数就是this的值.如果没用call,默认this是那个调用函数的当前的对象.在全局作用域中,就是被隐藏的window.所以不写call()且在全局作用于调用函数的时候,this就是window.可以使用call()或者apply自己指定this的指向

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏信数据得永生

JavaScript 编程精解 中文第三版 五、高阶函数

316100
来自专栏拂晓风起

java 字符串编码转换 字符集/编码的见解 心得 体会(跟之前那个C++编码随笔对应)

21230
来自专栏Java开发者杂谈

java如何获取一个对象的大小

When---什么时候需要知道对象的内存大小 在内存足够用的情况下我们是不需要考虑java中一个对象所占内存大小的。但当一个系统的内存有限,或者某块程序代码允许...

1.7K70
来自专栏LIN_ZONE

java反射机制的简单使用

通过上面的代码可以获得 运行时类的对象,然后下面使用运行时类的对象来构造一个反射工具类,通过下面这个类 可以利用反射机制实例化该类的对象,设置对象的属性并调用对...

10220
来自专栏null的专栏

设计模式——类图以及类与类之间的关系

    设计模式在程序设计上有着很重要的作用,使用设计模式可以使得代码更容易被理解,使得代码更规范,真正实现工程化。 一、用UML表示一个类 ? 类图一般是三行...

37740
来自专栏前端布道

ES6新特性概览

前言 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言...

468110
来自专栏xx_Cc的学习总结专栏

iOS底层原理总结 - 探寻Runtime本质(二)

29020
来自专栏逸鹏说道

Python3 与 C# 基础语法对比(List、Tuple、Dict专栏)

Python3 与 C# 基础语法对比(基础知识场):https://www.cnblogs.com/dotnetcrazy/p/9102030.html

10330
来自专栏xx_Cc的学习总结专栏

iOS底层原理总结 - 探寻block的本质(二)

32840
来自专栏架构之路

Java 中冷门的 synthetic 关键字原理解读

看JAVA的反射时,看到有个synthetic ,还有一个方法isSynthetic() 很好奇,就了解了一下: 1.定义 Any constructs int...

37850

扫码关注云+社区

领取腾讯云代金券