JS面向对象一:MVC的面向对象封装
JS面向对象一:MVC的面向对象封装
面向对象(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,不需要写重复代码
Controller():
封装Controller.js,但是没有将封装运用,因为自己的简历项目比较小,代码结构不复杂,封装后反而会难理解,知道如何封装和如何使用的思想就可以
总结
密爱想对象封装后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
的指向
- 抓取手机app的数据(摩拜单车)
- Hadoop离线数据分析平台实战——520项目总结Hadoop离线数据分析平台实战——520项目总结
- 爬虫入门到精通-mongodb的基本使用
- 拒绝撕逼,用数据来告诉你选择器到底哪家强
- 爬虫入门到精通-headers的详细讲解(If-modified-since)
- Linux配置网卡
- 【爬虫军火库】生成指定日期间的日期列表
- 手把手教你安装大数据开发测试环境手把手教你安装大数据开发测试环境
- Humble Numbers(丑数) 超详解!
- 1284 2 3 5 7的倍数
- 爬虫入门到精通-爬虫之异步加载(实战花瓣网)
- 【爬虫军火库】Chrome F12使用Network分析异步请求
- 1305 Pairwise Sum and Divide
- mysql分布式数据库中间件对比mysql分布式数据库中间件对比
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 机器学习笔记之梯度下降算法原理讲解
- 使用OpenCV在Python中进行图像处理
- R语言对布丰投针(蒲丰投针)实验进行模拟和动态可视化生成GIF动画
- Shiny-R语言轻松开发交互式web应用
- SPSS中的等级线性模型Multilevel linear models研究整容手术数据
- Python花式表白
- Python中基于网格搜索算法优化的深度学习模型分析糖尿病数据
- WordPress运行内存不足的解决方式
- ggplot2 |legend参数设置,图形精雕细琢
- miRBase物种名缩写
- Python中基于网格搜索算法优化的深度学习模型分析糖尿病数据
- 在R语言中使用航空公司复杂网络对疫情进行建模
- R语言用关联规则和聚类模型挖掘处方数据探索药物配伍中的规律
- ggplot2|theme主题设置,详解绘图优化-“精雕细琢”
- ggalluvial|炫酷桑基图(Sankey),你也可以秀