fundamentals\javascript\Angular读书笔记

概述

模块化单向数据流

概览

Angular整体架构

模块

Angular模块

常见模块分类

Angular常见模块分类

组件

模板语言

绑定

事件绑定

管道

指令

服务……

路由……

补充资料

一切皆是对象

比如在 javaScript 中 var name = “mario” 是一个原始数据类型，它没有属性和方法。但是当我们调用 name.length 时 javascript 能自动的将原始类型包装成对象。

对象创建

var userOne = {
    
    
    email: '[email protected]',
    name: 'Ryu'，
    login() {
    
    
   	 console.log(this.email, 'has logged in');
    },
    logout() {
    
    
   	 console.log(this.email, 'has logged out');
    }
}

构造方法与对象

使用 {} 可以创建对象，但是我们想要让对象的属性和方法被封装在对象内部，并且不暴露给外部
使用 ES6 新语法 class，自动创建 user_constructor 的 this 对象，用来封装对象属性，自动挂载方法到原型链

class User {
    
    
    constructor(email, name) {
    
    
   	 this.email = email;
   	 this.name = name;
   	 this.score = 0;
    }
    login() {
    
    
   	 console.log(this.email, 'has logged in');
   	 // return this 实现方法链
   	 return this;
    }
    logout() {
    
    
   	 console.log(this.email, 'has logged out');
   	 return this;
    }
    updateScore() {
    
    
   	 this.score++;
   	 console.log(this.email, 'score is now', this.score);
   	 return this;
    }
}
var userOne = new User('[email protected]', 'Ryu');

继承

创建一个管理员用户

class Admin extends User {
    
    
   constructor(x, y) {
    
    
   	super(x, y);
   	this.users = [];
   }
   deleteUser(user) {
    
    
   	this.users = this.users.filter(u => {
    
    
   		return u.email != user.email;
   	});
   }
}

原型

function User(email, name) {
    
    
    this.email = email;
    this.name = name;
    this.online = false;
    //this.login = function() {
    
    
   	 //console.log(this.email, 'has logged in');
    //}
}

每个对象都有 Prototype，定义类型的 object 有，类型创建的对象的 prototype 挂载到类型 object 的 prototype 上

function User(email, name) {
    
    
    this.email = email;
    this.name = name;
    this.online = false;
}
User.prototype.login = function() {
    
    
    this.online = true;
    console.log(this.email, 'has logged in');
}
 User.prototype.logout = function() {
    
    
    this.online = false;
    console.log(this.email, 'has logged out');
}

function Admin(...args) {
    
    
    User.apply(this, args);
    this.role = 'super admin';
    this.users = [];
}
Admin.prototype = Object.create(User.prototype);
Admin.prototype.deleteUser = function (user) {
    
    
    this.users = this.users.filter( u => {
    
    
   	 return u.email != user.email;
    });
}