MVC和MVVM
// 在MVVM框架下视图和模型是不能直接通信的，只能通过ViewModel进行交互，它能够监听到数据的变化， // 然后通知视图进行自动更新，而当用户操作视图时，VM也能监听到视图的变化，然后通知数据做相应改动， // 这实际上就实现了数据的双向绑定。并且V和VM可以进行通信。 // Model（模型） // 模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。 // View（视图） // 就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。 // ViewModel（视图模型） // 视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。 // 低耦合:View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。 // 可重用性: 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。 // 独立开发: 开发人员可以专注于业务逻辑和数据的开发,设计人员可以专注于页面的设计。 // MVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型),View(视图),Controller(控制器)。 // 这主要是基于分层的目的,让彼此的职责分开.View一般用过Controller来和Model进行联系。 // Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。M和V指的意思和MVVM中的M和V意思一样。 // C即Controller指的是页面业务逻辑。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。 // 低耦合 // 重用性高 // 生命周期成本低 // 部署快 // 可维护性高 // 有利软件工程化管理
object.Create
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Object.create</title> </head> <body> <script> //利用object.create实现继承 function father(name){ var name="geyao" this.name = name; } function children(){ father.call(this) } children.prototype=Object.create(father.prototype); children.prototype.constructor=children var geyao=new children() console.log(geyao.name,"geyao") //geyao </script> </body> </html>
argument
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>arguments</title> </head> <body> <script> //arguments 是一个对应于传递给函数的参数的类数组对象。 //这边的arguments[0]等价于fn var length = 10 function fn() { console.log(this.length, 'length') } var obj = { length: 5, method: function (fn) { console.log(arguments[0], 'arguments') // fn(){ // console.log(this.length,"length"); // } 'arguments' arguments[0]() }, } obj.method(fn) //1 </script> </body> </html>
class类继承
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <script> class Rectangle { // constructor constructor(height, width) { this.height = height this.width = width } // Getter get area() { return this.calcArea() } // Method calcArea() { return this.height * this.width } } const rectangle = new Rectangle(10, 20) console.log(rectangle.area) // 输出 200 // 继承 class Square extends Rectangle { constructor(length) { super(length, length) // 如果子类中存在构造函数，则需要在使用“this”之前首先调用 super()。 this.name = 'Square' } get area() { return this.height * this.width } } const square = new Square(10) console.log(square.area) // 输出 100 </script> </body> </html>
