1.可兼容JavaScript;相比js,加入了注释;添加一个完整的类结构,更好的面向对象;
2.Mac OS X环境搭建:
2.1.安装homebrew(套件管理器)官网:brew.sh:
ruby -e "$(curl -fsSL
https://raw.githubusercontent.com/Homebrew/install/master/install)"
2.2安装npm(nodejs包管理器):
brew install node
2.3.安装typescript(安装成功后,可以键入tsc测试):
npm install -g typescript
tsc
3.IDE中新建typescript文件,添加watcher实现自动编译
也可以用命令的方式编译一个ts文件为js文件:终端目录下,tsc xx.ts,会生成同名js文件
4.TypeScript 7种 基础数据类型:
var isBone: boolean = false; //使用时要给个初始化的值
var height: number = 6;
var name: string = "bob";
var list: number[] = [1, 2, 3];
// 或者
var list: Array = [ "joe", ”kevin” ];
获取数组中数据:
List[0];
枚举类型:有一定范围的数据可以用枚举类型最好
enum Color {Red, Green, Blue};
var colorName:string = Color[1];
console...
枚举类型还可以进行(数组)下标赋值操作:
enum Color {Red = 10, Green = 12, Blue = 13};
var colorName: string = Color[12]; // Green
// 获取下标:
var c:Color = Color.Green; // 1
任意类型:可以多次赋值,后面的会覆盖前面的。
var notSure: any = 10;
notSure = "hello";
也可以指定类型,如下指定为数组
Var list: any[ ] = [1, “hello”, false];
List[2] // false
对函数进行声明:
function tell( ):string{
return "hello";
}
不需要任何返回值,就可以把函数声明为void
function tell1( ):void{}
创建一个类:
class Preson{
// 属性
name:string;
age:number;
// 构造方法
constructor(name:string, age:number){
this.name = name;
this.age = age;
}
// 普通方法
print(){
return this.name + " : " + this.age;
}
}
调用这个类:
var p = new Person(“mike”, 10);
p.print();
无构造函数的类的继承:
class Person{
name: string;
age: number;
tell(){
return this.name + ":" + this.age;
}
}
class Student extends Person{
school: string;
tell(){
return this.name + ":" + this.age + ":" + this.school;
}
}
var s = new Student("捷克学院");
// 没有构造函数,无法使用参数,就用如下方式传入参数值
s.name = "jack";
s.age = 23;
s.school = "捷克学院";
// 执行
s.tell();
有构造函数的类的继承:
class Person{
name: string;
age: number;
constructor(name:string, age:number){
this.name = name;
this.age = age;
}
tell(){
return this.name + ":" + this.age;
}
}
class Student extends Person{
school: string;
constructor(school:string){
// 修改父类的参数,super要写在最前面
super("ime", 23);
this.school = school;
}
tell(){
return this.name + ":" + this.age + ":" + this.school;
}
}
var s = new Student("捷克学院");
// s.name = "jack";
// s.age = 23;
// s.school = "捷克学院";
s.tell();
公有:public(默认)
私有:private
class Person{
public name: string;
/**
* 默认就是public,如果我在这里写private,
* 或者在下面constructor参数中这样写:private name:string,
* 那么继承自它的 Student 就无法访问到 name 这个属性了
**/
age: number;
constructor(name:string, age:number){
this.name = name;
this.age = age;
}
tell(){
return this.name + ":" + this.age;
}
}
class Student extends Person{
school: string;
constructor(school:string){
this.school = school;
super("ime", 23);
}
tell(){
return this.name + ":" + this.age + ":" + this.school;
}
}
var s = new Student("捷克学院");
// s.name = "jack";
// s.age = 23;
// s.school = "捷克学院";
s.tell();
· 利用private实现的私有属性,可以在类中通过getter和setter来对外开发(私有属性或方法)接口
· 在调用方法时,getter和setter会默认执行
class Hello{
private _age:number;
show(){
return this._age;
}
get age():number{
// 可对外开发私有属性
return this._age;
}
set age(newage:number){
// 可修改私有属性
if(newage >200 || newage < 0){
alert("请输入正确的年龄");
}else{
this._age = newage;
}
}
}
var h = new Hello();
h.age = 300;
alert(h.tell());
类的属性或方法(非静态),可以通过实例化对象调用,如下:
class Person{
name:string;
tell(){
alert("姓名:" + this.name);
}
}
var p = new Person();
p.name = "hello";
p.tell();
但一旦属性或方法声明为Static后,就变为了静态属性 / 静态方法
不能再通过实例化对象调用,必须通过类本身调用:
class Person{
static name:string;
tell(){
alert("姓名:" + Person.name);
}
}
var p = new Person();
Person.name = "hello";
p.tell();
static静态的使用(进阶)技巧:引用数据类型
class Greeter{
greeting:string;
constructor(msg:string){
this.greeting = msg;
}
greet(){
return "Hello," + this.greeting;
}
}
/**
创建一个类型,指定它的类型为当前类的类型;
其实,创建了一个类,也就是创建了一个声明,
可以把当前数据的类型,声明为当前类的类型
我们称它为“引用数据类型”
**/
var green:Greeter;
green = new Greeter("mike");
alert(green.greet());
函数有 命名函数 和 匿名函数,在Ts中,可以指定函数参数的类型和函数本身(返回值)的类型:
// 命名函数
function add(x:number, y:number):string{
// 如果返回值的类型不是函数指定的类型,就会报错
// 例如:return x+y;就会报错
return "hello ts";// 类型相符,不会报错
}
// 匿名函数(在js中,上面的命名函数是这种方式的语法糖)
var myadd = function(x:number, y:string):string{
return "hello ts";
}
上面的x,y,并不清楚其意义,我们可以让参数更明确其意义:
/**
* "=>" 前面可以声明参数的语义化名称和类型
* "=>" 后面紧跟着函数类型
**/
var myAddts:(name:string, age:number) => number = function(n, a){
return a;
}
可选参数:用 ?表示,可传可不传
function buildName(firstName:string, lastName?:string){
if(lastName){
return fristName + " " + lastName;
} else {
return firstName;
}
}
// 均不会报错
var result1 = buildName("james", "bonde");
var result2 = buildName("bonde");
// 超出最大的参数个数,则会报错
// var result3 = buildName("james", "bonde", "valin");
默认参数:直接在参数上赋值
function buildName(firstName:string, lastName="bonde"){
return firstName + " and " + lastName;
}
// 可以只传一个参数,也可以传两个参数,传两个,则会覆盖默认参数值
var result1 = buildName("Hello: ");
var result2 = buildName("james", "wade");
// 超出最大的参数个数,仍旧会报错
// var result3 = buildName("james", "bonde", "valin");
利用es6的扩展运算符(展开运算符)
function peopleName(firstName:string, ...restOfName:string[]){
// restOfName:string[] 代表数据类型为字符串的数组
return firstName + " " + restOfName.join(" ");
}
// 利用可变参数,可以传递无数个参数,在需要传入不确定参数个数时,很好用
var pn = peolpleName("jack", "mary", "honly", "kevin"...);
var people = {
name:["iwen","ime","if","bean"];
getName:function(){
return function(){
var i = Math.floor(Math.random()*4);
return {
n:this.name[i]
}
}
}
}
var myName = people.getName();
alert("名字:" + myName().n); // 这是访问不到的
此时这个this指向的不是people。调用发现getName中的this关键字指向的是getName,访问不到外部的name属性。
可以用lambads表达式"()=>"修改,箭头函数能保存函数创建时的 this值,而不是调用时的值。
var people = {
name:["iwen","ime","if","bean"];
getName:function(){
return () => {
var i = Math.floor(Math.random()*4);
return {
// 这里的this代表函数创建时的this,因此可以访问到name属性
n:this.name[i]
}
}
}
}
var myName = people.getName();
alert("名字:" + myName().n); // 此时可访问
function attr(name:string):string;
fucntion attr(age:number):number;
function attr(nameOrAge:any):any{
if(nameOrAge && typeof nameOrAge === "string"){
alert("姓名");
}else{
alert("年龄");
}
}
/**
* 在某些编程语言中,函数重载或方法重载是指能够创建具有不同实现的同名方法。
* 对重载函数的调用将运行与调用上下文相适应的该函数的特定实现,
* 允许一个函数调用根据上下文执行不同的任务。
* 这里如果有不清楚可以看一下这里:https://www.zhihu.com/question/63751258
**/
attr("Hello");
attr(19);
// 规范了参数的类型
function printeLabel(labelObj:{label:string}){
console.log(labelObj.label);
}
var myObj = {label:"Hello"};
// var myObj = {label:10};
printeLabel(myObj);
interface USB{
name:string;
age:number;
}
function printUSB(pu:USB){
console.log(pu.name);
}
// 如果不定义参数可选,my必须包含两个参数,即string类型的name和number类型的age,否则编译会报错
var my = {name: "ime", age: 100};
printUSB(my);
可选参数通过 " ?"定义
interface USB{
name?:string;
age?:number;
}
function printUSB(pu:USB){
console.log(pu.name);
}
// 定义了参数可选,my就可以按照可选参数传递参数了。
var my = {name: "ime"};
printUSB(my);
用接口的类型 来 规定函数的类型
interface SearchFunc{
(source:string, subString:string):boolean;
}
// 定义函数的类型为接口的类型
var mySearch:SearchFunc:
mySearch = function(src:string, sub:string){
var result = src.search(sub);
if(result != -1){
return true;
}else{
return false;
}
}
使用接口对数组进行规范化
interface StringArray{
/**
* 数组中index对应的是一个number类型,但数组最终返回的是一个string类型
* 可理解为下标是number类型;数组中的数据是字符串类型
**/
[index:number]:string;
}
var myArray:StringArray;
// 规定了数组中必须是string类型,其他类型都不可以,即使为空,也必须是空字符串。
myArray = ["10", "12"];
alert(myArray[1]);
interface ClockInterface{
currentTime:Date;
setTime(d:Date);
}
class Clock implements ClockInterface{
currentTime:Date;
setTime(d:Date){
this.currentTime = d;
}
constructor(h:number; m:number){
}
}
接口的继承:
interface Shape{
color:string;
}
interface PenStroke{
penWidth:number;
}
interface Square extends Shape,PenStroke{
sideLength:number;
}
var s = {}; // 将一个接口初始化在一个变量中
s.color = "blue";
s.penWidth = 10;
s.sideLength = 10;
接口的混合类型:
interface Counter{
interval:number;
reset():void;
(start:number):string;
}
var c:Counter;
c(10);
c.reset();
...
可以让参数类型在使用时才指定类型,而不需要在方法定义时就指定,这样使用更加灵活;它相比于any类型,在使用方法时有更好的明确性。
function Hello(num:number):number{
return num; // 必须是number类型
}
function hello(str:any):any{
return str; // 可以是任意类型
}
// 泛型一般用表示,也可以用其他的大写字母
function hello(arg:T):T{
return arg; // 在调用之前可以是任意类型
}
// 调用时指定参数类型后,就必须是这种类型
var output = hello("world");
(后续补充)
Model:代表数据模型,数据和业务逻辑都在Model层中定义;
View:代表UI视图,负责数据的展示;
ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;
Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。
这种模式实现了Model和View的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作dom。
v-html、v-text、v-show、v-if、v-for等
v-show 仅仅控制元素的显示方式,将 display 属性在 block 和 none 来回切换;而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;当只需要一次显示或隐藏时,使用v-if更加合理。
当一个Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty 将它们转为getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化。 每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。
用ES5实现:
// 第一步 实现基本架构
// 第二步 把模型的数据 显示到视图
// 第三步 更新视图同步到模型,再更新视图
// 发布者
class Vue{
constructor(options){
this.options = options;
this.$data = options.data;
this.$el = document.querySelector(options,el);
this._directives = {
// 存放订阅者集合的数组对象
}
this.Observer(this.$data);
this.Compile(this.$el);
}
// 劫持数据
Observer(data){
// 更新视图 局部更新
for(let key in data){
this._driectives[key] = []; // 空类数组对象
let val = data[key]; // 当前的值
let _this = this;
Object.defineProperty(this.$data, key, {
get: function(){
return val;
},
set: function(newVal){
if(newVal !== val){
val = newVal;
//_this._directives[key] 得到myText的数组
_this._directives[key].forEach(watch=>{
// 遍历订阅者的实例
watch.update(); // 更新视图
})
}
}
});
}
}
// 解析指令
Compile(el){
let nodes = el.children;] // 获取APP下面的子元素
for(let i = 0;i < nodes.length; i++){
let node = nodes[i]; // 当前元素
if(node.children.length){
// 如果当前元素含有子元素,就递归调用自己
this.Compile(node);
}
if(node.hasAttribute('v-text')){
// 获取属性值,对号加入对应的订阅者数组
let attrVal = node.getAttribute("v-text")
this._directives[attrVal].push(new Watcher(node, attrVal, this, 'innerHTML'));
}
if(node.hasAttribute('v-model')){
let attrVal = node.getAttribute("v-model");
this._directives[attrVal].push(new Watcher(node, attrVal, this, 'value'));
// 监听文本框事件
node.addEventListener('input', (function(){
return function(){
// console.log(node.value);
// 更新视图到模型
this.$data[attrVal] = node.value;
}
})());
}
}
}
class Watcher{
constructor(el, vm, mySelf, attr){
this.el = el;
this.el = vm;
this.el = mySelf;
this.el = attr;
this.update(); // 初始化数据
}
update(){
// div对象[innerHTML] = vue对象.data['myText']
// input对象[value] = vue对象.data['myText']
this.el[this.attr] = this.mySelf.$data[this.vm];
}
}
}
在Vue3.0版本中式采用ES6的Proxy对象来实现。
// 获取段落节点
const paragraph = document.getElementById('pararaph');
// 获取输入框节点
const input = document.getElementById('input');
// 需要代理的数据对象
const data = {
text: 'hello world'
}
const handler = {
// 监控data中的text属性变化
set: function(target, prop, value){
if(prop === 'text'){
// 更新值
target[prop] = value;
// 更新试图
paragraph.innerHTML = value;
input.value = value;
retur true;
} else {
return false;
}
}
}
// 构造 proxy 对象
const myText = new Proxy(data, handler);
// 添加input 监听事件
input.addEventListener('input', function(e){
myText.text = e.target.value; // 更新myText的值
});
初始化值
myText.text = data.text;
#### Vue中如何在组件内部实现一个双向数据绑定?
假设有一个输入框组件,用户输入时,同步父组件页面中的数据。
具体思路:父组件通过props传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值,具体实现如下:
import Vue from 'vue'
const component = {
props: ['value'],
template: ` < div >
当一个Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty 将它们转为getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化。 每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新
比如现在需要监控data中, obj.a 的变化。Vue中监控对象属性的变化你可以这样:
watch: {
obj: {
handler(newValue, oldValue) {
console.log('obj changed')
},
deep: true
}
}
deep属性表示深层遍历,但是这么写会监控obj的所有属性变化,并不是我们想要的效果,所以做点修改:
watch: {
'obj.a': {
handler(newName, oldName) {
console.log('obj.a changed')
}
}
}
还有一种方法,可以通过computed 来实现,只需要:
// 利用计算属性的特性来实现,当依赖改变时,便会重新计算一个新值。
computed: {
a1() {
return this.obj.a
}
}
-
{{value}}
点击button会发现, obj.b 已经成功添加,但是视图并未刷新:
原因在于在Vue实例创建时, obj.b 并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新,这时就需要使用Vue的全局api—— $set():
// $set() 方法相当于手动的去把 obj.b 处理成一个响应式的属性,此时视图也会跟着改变了:
addObjB() {
this.$set(this.obj, 'b', 'obj.b')
console.log(this.obj)
}
视图改变:
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete / this.$delete 直接删除了数组 改变了数组的键值。
var a = [1, 2, 3, 4]
var b = [1, 2, 3, 4]
delete a[1]
console.log(a)
this.$delete(b, 1)
console.log(b)
· 将公用的JS库通过script标签外部引入,减小 app.bundel 的大小,让浏览器并行下载资源文件,提高下载速度;
· 在配置 路由时,页面和组件使用懒加载的方式引入,进一步缩小 app.bundel 的体积,在调用某个组件时再加载对应的js文件;
· 加一个首屏loading图,提升用户体验;
1、减少 HTTP 请求数量
- css sprites
- 合并css和js文件,压缩
- 采用lazyLoad懒加载
2、控制资源文件加载优先级
3、利用浏览器缓存
4、减少重排(Reflow)
- 如果需要在DOM操作时添加样式,尽量使用增加class属性,而不是通过style操作样式。
5、减少 DOM 操作
6、图标使用 IconFont 替换
- 输入网址;
- 发送到DNS服务器,并获取域名对应的web服务器对应的ip地址;
- 与web服务器建立TCP连接;
- 浏览器向web服务器发送http请求;
- web服务器响应请求,并返回指定url的数据(或错误信息,或重定向的新的url地址);
- 浏览器下载web服务器返回的数据及解析html源文件;
- 生成DOM树,解析css和js,渲染页面,直至显示完成;
#Vue的生命周期
beforeCreate(创建前),在数据观测和初始化事件还未开始
created(创建后),完成数据观测,属性和方法的运算,初始化事件, $el 属性还没有显示出来
beforeMount(载入前),在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted(载入后),在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate(更新前),在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
updated(更新后),在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy(销毁前),在实例销毁之前调用。实例仍然完全可用。
destroyed(销毁后),在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。
它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
它可以总共分为8个阶段:创建前/后、载入前/后、更新前/后、销毁前/销毁后。
beforeCreate、created、beforeMount、mounted 。
mounted
1、首先Object.defineProperty()的用法:
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
语法:Object.defineProperty(obj, prop, descriptor)
obj:要在其上定义属性的对象。
prop:要定义或修改的属性的名称。
descriptror:将被定义或修改的属性描述符。
2、vue实现数据双向绑定主要是:
采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。
js通过Object.defineProperty()实现简单的双向绑定:
js通过Observer、Compile、Watcher实现一个原生JS的双向绑定:
// 第一步 实现基本架构
// 第二步 把模型的数据 显示到视图
// 第三步 更新视图同步到模型,再更新视图
// 发布者
class Vue{
constructor(options){
this.options = options;
this.$data = options.data;
this.$el = document.querySelector(options,el);
this._directives = {
// 存放订阅者集合的数组对象
}
this.Observer(this.$data);
this.Compile(this.$el);
}
// 劫持数据
Observer(data){
// 更新视图 局部更新
for(let key in data){
this._driectives[key] = []; // 空类数组对象
let val = data[key]; // 当前的值
let _this = this;
Object.defineProperty(this.$data, key, {
get: function(){
return val;
},
set: function(newVal){
if(newVal !== val){
val = newVal;
//_this._directives[key] 得到myText的数组
_this._directives[key].forEach(watch=>{
// 遍历订阅者的实例
watch.update(); // 更新视图
})
}
}
});
}
}
// 解析指令
Compile(el){
let nodes = el.children;] // 获取APP下面的子元素
for(let i = 0;i < nodes.length; i++){
let node = nodes[i]; // 当前元素
if(node.children.length){
// 如果当前元素含有子元素,就递归调用自己
this.Compile(node);
}
if(node.hasAttribute('v-text')){
// 获取属性值,对号加入对应的订阅者数组
let attrVal = node.getAttribute("v-text")
this._directives[attrVal].push(new Watcher(node, attrVal, this, 'innerHTML'));
}
if(node.hasAttribute('v-model')){
let attrVal = node.getAttribute("v-model");
this._directives[attrVal].push(new Watcher(node, attrVal, this, 'value'));
// 监听文本框事件
node.addEventListener('input', (function(){
return function(){
// console.log(node.value);
// 更新视图到模型
this.$data[attrVal] = node.value;
}
})());
}
}
}
class Watcher{
constructor(el, vm, mySelf, attr){
this.el = el;
this.vm= vm;
this.mySelf= mySelf;
this.attr= attr;
this.update(); // 初始化数据
}
update(){
// div对象[innerHTML] = vue对象.data['myText']
// input对象[value] = vue对象.data['myText']
this.el[this.attr] = this.mySelf.$data[this.vm];
}
}
}
1、父组件与子组件传值
父组件传给子组件:子组件通过props方法接受数据;
子组件传给父组件: $emit 方法传递参数
2、非父子组件间的数据传递,兄弟组件传值
eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适(虽然也有不少人推荐直接用VUEX,具体来说看需求咯。技术只是手段,目的达到才是王道)。
hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用 window.location.hash 读取。特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。
history模式:history采用HTML5的新特性;且提供了两个新方法: pushState(), replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。
1、与AngularJS的区别
相同点:都支持指令:内置指令和自定义指令;都支持过滤器:内置过滤器和自定义过滤器;都支持双向数据绑定;都不支持低端浏览器。
不同点:AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观;在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢;Vue.js使用基于依赖追踪的观察并且使用异步队列更新,所有的数据都是独立触发的。
2、与React的区别
相同点:React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用;中心思想相同:一切都是组件,组件实例之间可以嵌套;都提供合理的钩子函数,可以让开发者定制化地去处理需求;都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载;在组件开发中都支持mixins的特性。
不同点:React采用的Virtual DOM会对渲染出来的结果做脏检查;Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作Virtual DOM。
首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to,from,next。
to:route即将进入的目标路由对象。
from:route当前导航正要离开的路由。
next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。
只用来读取的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。
在main.js引入store,注入。新建了一个目录store,… export 。
场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例,但单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据。
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
类似vue的计算属性,主要用来过滤一些数据。
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count ++
}
},
actions: {
increment (context) {
context.commit('increment');
}
}
})
项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleC = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB,
c: moduleC
}
})
答:在style标签中写入scoped即可 例如:
答:v-if按照条件是否渲染,v-show是display的block或none;
$ route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法,钩子函数等。
HTTPS(Secure Hypertext Transfer Protocol)安全超文本传输协议:
它是一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务器之间交换信息,它使用安全套接字层(SSL)进行信息交换,简单来说它是HTTP的安全版。它是由Netscape开发并内置于其浏览器中,用于对数据进行压缩和解压操作,并返回网络上传送回的结果。
HTTPS实际上应用了Netscape的安全套接字层(SSL)作为HTTP应用层的子层。(HTTPS使用端口443,而不是象HTTP那样使用端口80来和TCP/IP进行通信。)SSL使用40 位关键字作为RC4流加密算法,这对于商业信息的加密是合适的。
HTTPS和SSL支持使用X.509数字认证,如果需要的话用户可以确认发送者是谁。总的来说,HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议要比http协议安全。
在URL前加https://前缀表明是用SSL(安全套接字)加密的,你的电脑与服务器之间收发的信息传输将更加安全。 Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。
https协议需要到ca申请证书,一般免费证书很少,需要交费。
http是超文本传输协议,信息是明文传输,https 则是具有安全性的ssl加密传输协议。
http和https使用的是完全不同的连接方式用的端口也不一样,前者是80,后者是443。
http的连接很简单,是无状态的。
HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议 要比http协议安全。
详细参看:https://www.jianshu.com/p/6db0c6dc97a9
先下结论,GET 和 POST 方法没有实质区别,只是报文格式不同。
GET 和 POST 只是 HTTP 协议中两种请求方式,而 HTTP 协议是基于 TCP/IP 的应用层协议,无论 GET 还是 POST,用的都是同一个传输层协议,所以在传输上,没有区别。
报文格式上,不带参数时,最大区别就是第一行方法名不同
POST方法请求报文第一行是这样的
POST /uri HTTP/1.1 \r\n
GET方法请求报文第一行是这样的
GET /uri HTTP/1.1 \r\n
是的,不带参数时他们的区别就仅仅是报文的前几个字符不同而已
带参数时报文的区别呢? 在约定中,GET 方法的参数应该放在 url 中,POST 方法参数应该放在 body 中
举个例子,如果参数是 name=chengqm, age=22。
GET 方法简约版报文是这样的
GET /index.php?name=qiming.c&age=22 HTTP/1.1
Host: localhost
POST 方法简约版报文是这样的
POST /index.php HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded
name=qiming.c&age=22
现在我们知道了两种方法本质上是 TCP 连接,没有差别,也就是说,如果我不按规范来也是可以的。我们可以在 URL 上写参数,然后方法使用 POST;也可以在 Body 写参数,然后方法使用 GET。当然,这需要服务端支持。
GET 方法参数写法是固定的吗?
在约定中,我们的参数是写在 ? 后面,用 & 分割。
我们知道,解析报文的过程是通过获取 TCP 数据,用正则等工具从数据中获取 Header 和 Body,从而提取参数。
也就是说,我们可以自己约定参数的写法,只要服务端能够解释出来就行,一种比较流行的写法是 http://www.example.com/user/name/chengqm/age/22。
POST 方法比 GET 方法安全?
按照网上大部分文章的解释,POST 比 GET 安全,因为数据在地址栏上不可见。
然而,从传输的角度来说,他们都是不安全的,因为 HTTP 在网络上是明文传输的,只要在网络节点上捉包,就能完整地获取数据报文。
要想安全传输,就只有加密,也就是 HTTPS。
GET 方法的长度限制是怎么回事?
HTTP 协议没有 Body 和 URL 的长度限制,对 URL 限制的大多是浏览器和服务器的原因。
浏览器原因就不说了,服务器是因为处理长 URL 要消耗比较多的资源,为了性能和安全(防止恶意构造长 URL 来攻击)考虑,会给 URL 长度加限制。
POST 方法会产生两个TCP数据包?
HTTP 协议中没有明确说明 POST 会产生两个 TCP 数据包,而且实际测试(Chrome)发现,header 和 body 不会分开发送。
所以,header 和 body 分开发送是部分浏览器或框架的请求方法,不属于 post 必然行为。
w3school 里面说 URL 的最大长度是 2048 个字符
url 长度限制是某些浏览器和服务器的限制,和 HTTP 协议没有关系。
#跨域 —— 9种跨域方式实现原理
参考:https://mp.weixin.qq.com/s/nkDkofBidKQFp5oG4-aJNg
当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。
同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源。
Cookie、LocalStorage、IndexedDB 等存储性内容
DOM 节点
AJAX 请求发送后,结果被浏览器拦截了
但是有三个标签是允许跨域加载资源:
b.html 为中间代理页,与 a.html 同域,内容为空。
// c.html(http://localhost:4000/c.html)
通过 iframe 的 src 属性由外域转向本地域,跨域数据即由 iframe 的 window.name 从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。
(8)location.hash + iframe
实现原理: a.html 欲与 c.html 跨域相互通信,通过中间页 b.html 来实现。 三个页面,不同域之间利用 iframe 的 location.hash 传值,相同域之间直接 js 访问来通信。
具体实现步骤:一开始 a.html 给 c.html 传一个 hash 值,然后 c.html 收到 hash 值后,再把 hash 值传递给 b.html,最后 b.html 将结果放到 a.html 的 hash 值中。
同样的,a.html 和 b.html 是同域的,都是http://localhost:3000;而 c.html 是http://localhost:4000
// a.html
// b.html
// c.html
console.log(location.hash);
let iframe = document.createElement('iframe');
iframe.src = 'http://localhost:3000/b.html#idontloveyou';
document.body.appendChild(iframe);
(9)document.domain + iframe
该方式只能用于二级域名相同的情况下,比如 a.test.com 和 b.test.com 适用于该方式。
只需要给页面添加 document.domain =‘test.com’ 表示二级域名都相同就可以实现跨域。
实现原理:两个页面都通过 js 强制设置 document.domain 为基础主域,就实现了同域。
我们看个例子:页面a.zf1.cn:3000/a.html获取页面b.zf1.cn:3000/b.html中 a 的值
// a.html
helloa
// b.html
hellob
总结:
PWA全称Progressive Web App,即 渐进式WEB应用。
一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
解决了哪些问题?
可以添加至主屏幕,点击主屏幕图标可以实现启动动画以及隐藏地址栏
实现离线缓存功能,即使用户手机没有网络,依然可以使用一些离线功能
实现了消息推送
它解决了上述提到的问题,这些特性将使得 Web 应用渐进式接近原生 App。
更多可参看:https://segmentfault.com/a/1190000012353473?utm_source=tag-newest
在js中,所有对象都是Object的实例,并集成Object.prototype的属性和方法,但是有一些是隐性的。
所有引用类型都具有对象特性,可以自由扩展属性。
var obj = {};
obj.attribute = "new attr";
var arr = [];
arr.attribute = "new attr";
function fn () {}
fn.attribute = "new attr";
所有的引用类型(包括数组,对象,函数)都有隐性原型属性(proto), 值也是一个普通的对象。
console.log(obj.__proto__);
所有的函数,都有一个 prototype 属性,值也是一个普通的对象。
console.log(obj.prototype);
所有的引用类型的proto属性值都指向构造函数的 prototype 属性值。
console.log(obj.__proto__ === Object.prototype); // true
当试图获取对象属性时,如果对象本身没有这个属性,那就会去他的proto(prototype)中去寻找。
function Dog(name){
this.name = name;
}
Dog.prototype.callName = function (){
console.log(this.name,"wang wang");
}
let dog1 = new Dog("Three Mountain");
dog1.printName = function (){
console.log(this.name);
}
dog1.callName(); // Three Mountain wang wang
dog1.printName(); // Three Mountain
只有函数才能创造作用域。
for if else 不能创造作用域。
本质上来说,在 js 里 this 是一个指向函数执行环境的指针。this 永远指向最后调用它的对象,并且在执行时才能获取值,定义是无法确认他的值。
var a = {
name : "A",
fn : function (){
console.log (this.name)
}
}
a.fn() // this === a
a 调用了fn() 所以此时this为a
a.fn.call ({name : "B"}) // this === {name : "B"}
使用call(),将this的值指定为{name:"B"}
var fn1 = a.fn
fn1() // this === window
虽然指定fn1 = a.fn,但是调用是有window调用,所以this 为window
function Student(name,age) {
this.name = name // this === s
this.age = age // this === s
//return this
}
var s = new Student("py1988",30)
function fn () {
console.log (this) // this === window
}
fn ();
var obj = {
name : "A",
printName : function () {
console.log (this.name) // this === obj
}
}
obj.printName ()
var name = "小明" , age = "17"
var obj = {
name : "安妮",
objAge :this.age,
fun : function (like,dislike) {
console.log (this.name + "今年" + this.age ,"喜欢吃" + like + "不喜欢吃" + dislike) ;
}
}
var a = { name : "Jay", age : 23 }
obj.fun.call(a,"苹果","香蕉") // Jay今年23 喜欢吃苹果不喜欢吃香蕉
obj.fun.apply(a,["苹果","香蕉"]) // Jay今年23 喜欢吃苹果不喜欢吃香蕉
obj.fun.bind(a,"苹果","香蕉")() // Jay今年23 喜欢吃苹果不喜欢吃香蕉
首先 call,apply,bind 第一个参数都是 this 指向的对象,call 和 apply 如果第一个参数指向 null 或 undefined 时,那么 this 会指向 windows 对象。
call,apply,bind 的执行方式如上例所示。call,apply 都是改变上下文中的 this,并且是立即执行的。bind 方法可以让对应的函数想什么时候调用就什么时候调用。
闭包的概念很抽象,看下面的例子你就会理解什么叫闭包了:
function a(){
var n = 0;
this.fun = function () {
n++;
console.log(n);
};
}
var c = new a();
c.fun(); //1
c.fun(); //2
闭包就是能够读取其他函数内部变量的函数。在 js 中只有函数内部的子函数才能读取局部变量。所以可以简单的理解为:定义在内部函数的函数。
我们先感受下异步。
console.log("start");
setTimeout(function () {
console.log("medium");
}, 1000);
console.log("end");
使用异步后,打印的顺序为 start-> end->medium。因为没有阻塞。
为什么会产生异步呢?
首先因为 js 为单线程,也就是说 CPU 同一时间只能处理一个事务。得按顺序,一个一个处理。
如上例所示,第一步:执行第一行打印 “start”;第二步:执行 setTimeout,将其中的函数分存起来,等待时间结束后执行;第三步:执行最后一行,打印 “end”;第四部:处于空闲状态,查看暂存中,是否有可执行的函数;第五步:执行分存函数。
为什么 js 引擎是单线程?
js 的主要用途是与用户互动,以及操作 DOM,这决定它只能是单线程。例:一个线程要添加 DOM 节点,一个线程要删减 DOM 节点,容易造成分歧。
为了更好使用多 CPU,H5 提供了 web Worker 标准,允许 js 创建多线程,但是子线程受到主线程控制,而且不得操作 DOM。
单线程就意味着,所有的任务都要排队,前一个结束,才会执行后面的任务。如果列队是因为计算量大,CPU 忙不过来,倒也算了。但是更多的时候,CPU 是闲置的,因为 IO 设备处理得很慢,例如 ajax 读取网络数据。js 设计者便想到,主线程完全可以不管 IO 设备,将其挂起,然后执行后面的任务。等后面的任务结束掉,在反过头来处理挂起的任务。
好,我们来梳理一下:
1)所有的同步任务都在主线程上执行,行程一个执行栈。
2)除了主线程之外,还存在一个任务列队,只要一步任务有了运行结果,就在任务列队中植入一个时间。
3)主线程完成所有任务,就会读取列队任务,并将其执行。
4)重复上面三步。
只要主线程空了,就会读取任务列队,这就是 js 的运行机制,也被称为 event loop(事件循环)。
ES6,强制开启严格模式!
作用域的概念:
全局作用域,函数作用域,块作用域
<暂时性死区>
let和const不能重复定义;const声明时必须赋值,let 不必须;
解构赋值的分类:
数组解构赋值,对象解构赋值,字符串解构赋值,
布尔值解构赋值,函数参数解构赋值,数值解构赋值
使用场景:
(1)默认值:
function fn(a, b=2){
...
}
(2)变量交换
{
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b);
}
(3)获取函数返回值
{
function f(){
return [1,2,3,4];
}
let a, b, c, d;
[a, b,c,d] = f(); // 接收所有值
[a, , , b] = f(); // 接收指定值
[a, ...b] = f(); // 分开接收
}
{
let o = {p:42, q:true}
let {p,q} = o;
console.log(p,q);
}
(1)默认值:
{
let {a = 5, b = 10} = {a : 3}
console.log(a,b) // 3, 5
}
(2)json对象取值 :特别常用的场景!
{
let data = {
title: 'abc',
test: [{
title: 'test',
desc: '描述'
}]
}
// 声明一个跟解构对象格式一致的对象,来接收对象中的值
let {title : esTitle, test: [{title: cnTitle}]} = data;
console.log(esTitle, cnTitle);
}
构造函数的变化、正则方法扩展、u修饰符、y修饰符、s修饰符
es5中有一下两种正则表达式写法:
{
// 两个参数的情况,前面是匹配字符串
let regex = new RegExp('xyz', 'i');
// 一个参数的情况,前面是正则表达式
let regex2 = new RegExp(/xyz/i);
}
es6中,允许前面是正则表达式,而后面跟着修饰符的两个参数的写法:
{
let regex3 = new RegExp(/xyz/ig, 'i'); // 但这种写法后面的修饰符会覆盖正则中的修饰符
// flags是es6中正则表达式的新的API,输出的结果是正则表达式的修饰符
console.log(regex3.flags); // 输出的是 ' i '
}
{
let s = 'bbb_bb_b';
let a1 = /b+/g;
let a2 = /b+/y;
console.log('one', a1.exec(s), a2.exec(s));
console.log('two', a1.exec(s), a2.exec(s));
}
g和y修饰符的共同点:都是全局匹配
不同点:
g:可以不连续匹配,bbb_bb_b
y: 粘连模式,必须连续匹配b后面如果不是b了,就不会继续匹配
sticky可以查看是否开启了粘连模式:a1.sticky
u修饰符,可以识别大于2个字节的字符;
es5中,. 能匹配任何字符,但是前提是小于两个字节的
s修饰符:es6中还未实现
处理unicode编码大于0xffff的字符 => 用{}包裹起来
`\u20BB7` => `\u{20BB7}`
es5中:
获取unicode编码对应的字符:fromCharCode()
;
获取字符对应的unicode编码:charCodeAt()
;
es6中:
获取unicode编码对应的字符:fromCharPoint()
;
获取字符对应的unicode编码:codePointAt()
; // 能获取超过0xFFFF长度的编码,并正确显示
es6中有一个字符串遍历器接口,可以正确处理unicode编码大于0xFFFF的字符串
{
let str = '/u{20BB7}abc';
for(let code of str){
console.log('es6', code);
}
//let of 可以正确遍历出0xFFFF编码长度的字符串对应的字符,不会出现乱码
}
str.includes('x')
:判断字符串中是否包含了某个字符
str.startsWith('x')
:判断字符串是不是已某个字符开始的
str.endsWith('x')
:判断字符串是不是已某个字符结束的
str.repeat(2)
:重复字符串
`你好,${name},欢迎你!`
padStart 和 padEnd (这两个是ES7的草案,需要babel-polyfill)
console.log('1'.padStart(2, '0')); // '01'
console.log('1'.padEnd(2, '0')); // '10'
1.怎么用?
{
let user = {
name: 'list',
info: 'hello world'
};
console.log(abc`i am ${user.name}, ${user.info}`);
function abc(s, v1, v2){
console.log(s, v1, v2);
return s+v1+v2;
}
}
2.在哪里用?
防止XSS攻击,和处理多语言转换的时候用
string.raw:可以将所有的 ’ \ ’ 进行了转义,即在前面又加了一个
String.raw`Hi\n${1+2}` // Hi\n3
Number.isFinite()
:判断一个值是否有尽
Number.isNaN()
:判断一个数是不是NaN
Number.isInteger()
:判断是不是整数 2.0也是true
Number.MAX_SAFE_INTEGER
// 最大安全数值
Number.MIN_SAFE_INTEGER
// 最小安全数值
Number.isSafeInteger()
// 判断一个数字是不是在安全数的范围内:
Math.trunc(4.1); //4
// 取小数的整数部分
Math.sign() // 结果只有-1, 0 ,1, NaN
// 判断是正数,负数,还是零
Math.cbrt(8); // 2
// 计算立方根
还有三角函数方法,对数方法,都是es6新增的
Array.from
Array.of
copyWithin
find \ findIndex
fill
entries \ keys \ values
includes
1、参数默认值
{
function test(x, y = " 23 "){
console.log(x, y);
}
test(2) // 2 23
}
// 要注意默认值后面不能再有没有默认值的参数变量
// 这就是错误的
function test(x, y = " 23 " , c) ...
关于取值作用域的问题:
{
let x = 'test';
function test(x, y=x){
console.log(x,y);
}
test('kill'); // kill kill
}
2、rest参数
把一系列的参数都转换为数组,在你不确定有多少个参数的时候
注意,rest参数后面不能再有其他的参数
{
function test( ...arg ){
for (let v of arg){
console.log(v);
}
}
test(1,2,3,4); // 1 2 3 4
}
3、扩展运算符
扩展运算符和rest运算符是一个相反的作用
它的作用是:把一个数组拆成离散的值
{
console.log(...[1,2,3]); // 1 2 3
console.log('a', ...[1,2,3]) // 'a' 1 2 3
}
4、箭头函数
{
let arrow = v => v*2;
// 等同于
function arrow(v){
return v*2;
}
// 无参数
let arrow = () => v*3;
// 等同于
function arrow(){
return v*3;
}
}
5、this绑定
因为this在指向在箭头函数和普通函数不一样,所以要考虑什么时候适合用箭头函数,什么时候不适合用箭头函数;
this在普通函数中,指向函数被调用时的对象所在;
this在箭头函数中,指向函数被定义时的对象所在;
6、尾调用
区分特征:函数的最后一句话是不是函数
{
function tail(x){
console.log('tail', x);
}
function fx(x){
return tail(x);
}
fx(123);
}
// 尾调用的用处:提升(递归函数,嵌套函数)性能
1、简介表示法:
{
let o = 1;
let k = 2;
// es5中声明一个对象
let es5 = {
o: o,
k: k
};
// es6中,如果键值相同,可以这样写:
let es6 = {
o,
k
};
// 如果对象里面有方法:
let es5_method = {
hello: function(){}
};
let es6_method = {
hello(){}
}
}
2、属性表达式:
{
let a = 'b';
let es5_obj = {
a: 'c',
b: 'c'
};
// 对象的key值,可以是一个表达式,这叫做属性表达式
// 这里的 [a] = 'b';
let es6_obj = {
[a]: 'c'
}
console.log(es5_obj, es6_obj);
}
3、扩展运算符:
babel对它的支持不是很好,加了babel-polyfill还是会报错
{
let {a, b, ...c} = {a: 'test', b:'re', c:'ccc', d:'ddd'};
解析过后c的值应该是:
c: {
c:'ccc',
d:'ddd'
}
}
4、Object新增方法:
// 新增API
Object.is() 的功能和 ‘===’ 没有区别,判断两个值是否相等
Object.is(str, str); //判断两个字符串是否相等
// 要注意,数组和对象是引用类型,虽然都是空数组,但是引用的地址不同,所以:
object.is([],[]) // 结果是false
Object.assign() : 浅拷贝
// 拷贝的是引用地址,不是值;
// 只拷贝自身的属性,不会拷贝继承的属性,和不可枚举的属性
Object.assign({a:''a}, {b:'b'}); // {a: 'a', b: 'b'}
Object.entries() : 方法返回一个给定对象自身可枚举属性的键值对数组,
其排列与使用 for...in 循环遍历该对象时返回的顺序一致
区别在于 for-in 循环也枚举原型链中的属性
const object1 = { foo: 'bar', baz: 42 };
console.log(Object.entries(object1)[1]);
// expected output: Array ["baz", 42]
const object2 = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(object2)[2]);
// expected output: Array ["2", "c"]
const result = Object.entries(object2).sort((a, b) => a - b);
console.log(Object.entries(result)[1]);
// expected output: Array ["1", Array ["1", "b"]]
1、Symbol的概念:
Symbol可提供一个独一无二的值
let a1 = Symbol();
let a2 = Symbol();
console.log(a1 === a2); // false
// 定义了以后,将来要取回来,就用这种方式
let a3 = Symbol.for('a3'); // for中的a3是一个key值,如果在全局注册过,就返回这个值,如果没有注册过,就注册一个独一无二的值
let a4 = Symbol.for('a3');
let a5 = Symbol.for('a3');
console.log(a4 === a5); // true
2、Symbol的作用:
{
let a1 = Symbol.for('abc');
let obj = {
[a1] : '123',
'abc' : 234,
'c' : 456
}
console.log('obj', obj); // {Symbol(abc): '123', 'abc': 234, 'c': 456}
要注意一点:用Symbol做key值,通过for...in
和let...of
是拿不到key值的
for(let [key, value] of Object.entries(obj)){
console.log(key, value) ; //拿不到Symbol(abc)和其值
}
这时可以通过Object.getOwnPropertySymbols()
拿到Symbol定义的值,但是它拿不到其他的值
Object.getOwnPropertySymbols(obj).forEach(function(item){
console.log(obj[item]); // 123
})
如果想拿到所有的值,可以通过Reflect.ownKeys()
拿到
Reflect.ownKeys(obj).forEach(function(item){
console.log('ownKeys', item, obj[item])
})
1、类似数组,但集合中的元素不能重复
{
let list = new Set();
list.add(5); // 添加
list.add(7);
list.size // 获取set中的长度(个数)
// 初始化set中的值
let arr = [1,2,3,4,5];
let list1 = new Set(arr);
// 不可重复性
let list2 = new Set();
list2.add(1);
list2.add(2);
list2.add(1);
console.log(list2); // 不会打印出后面重复的元素,也不会报错,这可以用于去重
这里要注意,Set不会做数据类型的转换,即 2 和 '2' 在set看来是不一样的
2、Set实例的几个方法和属性值:
add()
:添加某个元素
delete()
:删除某个元素
clear()
:清空所有元素
has()
:判断有没有某个元素,返回布尔类型
size
:返回集合中元素的个数
3、Set实例的遍历:
// for...of
for(let key of list.keys()){
console.log('keys', key);
}
for(let value of list.values()){
console.log('value', value);
}
for(let value of list){
console.log('value', value);
}
for(let [key, value] of list.entries()){
console.log('entries', key, value);
}
key和value的值一样,都是元素的名称;
不加.key或者.values,也是可以的
1 、类似Object,key可以是任意类型(object中key只能是字符串)
{
let map = new Map();
let arr = ['123'];
map.set(arr, 456); // Map可以用数组作为key(或其他任意类型)哦~
console.log('map', map, map.get(arr));
// 结果:map Map{["123"] => 456} 456
// 初始化Map中的值
let map1 = new Map([['a', 123], ['b', 456]]); // 一定要注意这种格式
}
2、Map实例的几个方法和属性值:
get()
:获取某个元素
set()
:添加某个元素
delete()
:删除某个元素
clear()
:清空所有元素
has()
:判断有没有某个元素,返回布尔类型
size
:返回集合中元素的个数
3、Map 结构转为数组结构
比较快速的方法是结合使用扩展运算符(…)
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]
4、Map 循环遍历
Map 原生提供三个遍历器:
keys()
:返回键名的遍历器。
values()
:返回键值的遍历器。
entries()
:返回所有成员的遍历器。
let map = new Map([
['F', 'no'],
['T', 'yes'],
]);
for (let key of map.keys()) {
console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// 等同于使用map.entries()
// 这个例子可以看出:Map 结构的默认遍历器接口(Symbol.iterator 属性),就是 entries 方法。
for (let [key, value] of map) {
console.log(key, value);
}
5、Map 获取第一个元素
const m = new Map();
m.set('key1', {})
m.set('keyN', {})
console.log(m.entries().next().value); // [ 'key1', {} ]
// 获取第一个key
console.log(m.keys().next().value); // key1
// 获取第一个value
console.log(m.values().next().value); // {}
数据结构横向对比,增、查、改、删
// Map与Array
let map = new Map();
let array = [];
// 增
map.set('t', 1);
array.push({t:1});
console.info('may-array', map, array);
// 查
let map_exist = map.has('t');
let array_exist = array.find(item=>item.t);
console.info('may-array', map_exist, array_exist); //map返回的是布尔值,数组返回的是这个值
// 改
map.set('t', 2);
array.forEach(item => item.t ? item.t = 2 : ' '); // 先要判断是否存在,才执行
console.info('may-array-modify', map, array);
// 删
map.delete('t');
let index = array.findIndex(item => item.t); // 查找每一个元素中带t的元素
array.splice(index, 1);
console.info('may-array-del', map, array);
// Set与Array
let map = new Set();
let array = [];
// 增
set.add({t :1});
array.push({t:1});
console.info('set-array', set, array);
// 查
let set_exist = set.has({t:1}); //这里应该是填入保存的地址,这样写会报错
let array_exist = array.find(item=>item.t);
console.info('may-array', set_exist, array_exist); //set返回的是布尔值,数组返回的是这个值
// 改
set.forEach(item => item.t ? item.t = 2: ' ');
array.forEach(item => item.t ? item.t = 2 : ' '); // 先要判断是否存在,才执行
console.info('may-array-modify', set, array);
// 删
set.forEach(item => item.t ? set.delete(item) : ' ');
let index = array.findIndex(item => item.t); // 查找每一个元素中带t的元素
array.splice(index, 1);
console.info('may-array-del', set, array);
Proxy:可以用来代理对对象的访问
Reflect 的方法和用法和Proxy一模一样。只是使用方式不一样,Proxy需要new,而Reflect直接使用(Reflect.get())
// Proxy的几个常用方法:
// 其中target为代理对象参数,原本obj的属性,它都有,实际传入的代理对象,是proxy的实例化对象
// 获取对象属性
get(target, key){}
// 设置对象属性
set(target, key, value){}
// 判断对象是否有某个属性,可以拦截判断,欺骗访问
has(target, key){}
// 删除对象属性:拦截delete,如果不想用户删除对象中的某些属性
deleteProperty(target, key){}
// 拦截Object.keys, Object.getOwnPropertySymbols, Object.getOwnPropertyNames
ownKeys(){}
完整示例,及Proxy在开发中的使用:
{
let obj = {
time: '2017-03-11',
name: 'net',
_r: 123
}
let monitor = new Proxy(obj, {
// 拦截对象属性的读取
get(target, key) {
return target[key].replace('2017', '2018')
},
// 拦截对象设置属性
set(target, key, value) {
if (key === 'name') {
return (target[key] = value)
} else {
return target[key]
}
},
// 拦截key in object操作
has(target, key) {
if (key === 'name') {
return target[key]
} else {
return false
}
},
// 拦截delete
deleteProperty(target, key) {
if (key.indexOf('_') > -1) {
delete target[key]
return true
} else {
return target[key]
}
},
// 拦截Object.keys,Object.getOwnPropertySymbols,Object.getOwnPropertyNames
ownKeys(target) {
return Object.keys(target).filter(item => item != 'time')
}
})
console.log('get', monitor.time)
monitor.time = '2018'
monitor.name = 'mukewang'
console.log('set', monitor.time, monitor)
console.log('has', 'name' in monitor, 'time' in monitor)
// delete monitor.time;
// console.log('delete',monitor);
//
// delete monitor._r;
// console.log('delete',monitor);
console.log('ownKeys', Object.keys(monitor))
}
{
let obj = {
time: '2017-03-11',
name: 'net',
_r: 123
}
console.log('Reflect get', Reflect.get(obj, 'time'))
Reflect.set(obj, 'name', 'mukewang')
console.log(obj)
console.log('has', Reflect.has(obj, 'name'))
}
// proxy常用的情景:对数据类型进行校验,实现与业务解耦
{
function validator(target, validator) {
return new Proxy(target, {
_validator: validator,
set(target, key, value, proxy) {
// 判断是否有对应可操作的属性
if (target.hasOwnProperty(key)) {
let va = this._validator[key]
if (!!va(value)) {
// 如果所访问的属性有值,则执行代理操作(这里仅以Set为例),将代理返回到真实对象proxy
return Reflect.set(target, key, value, proxy)
} else {
throw Error(`不能设置${key}到${value}`)
}
} else {
// 如果没有,则抛出异常
throw Error(`${key} 不存在`)
}
}
})
}
// 模拟一个条件类
const personValidators = {
name(val) {
return typeof val === 'string'
},
age(val) {
return typeof val === 'number' && val > 18
},
mobile(val) {}
}
// 模拟一个被代理的类
class Person {
constructor(name, age) {
this.name = name
this.age = age
this.mobile = '1111'
// 这里的this,指的是Person的实例化对象
// Person类返回一个validator方法,validator方法返回一个proxy代理,
//也就是说访问Person的实例,会经过validator中的proxy代理,进行筛选过滤
return validator(this, personValidators)
}
}
// 实例化Person类
const person = new Person('lilei', 30)
console.info(person)
person.name = 'Han mei mei'
console.info(person)
}
基本语法 | 类的继承 | 静态方法 | 静态属性 | getter | setter
1、基本定义和生成实例
class Parent{
// 定义类中的构造函数
constructor(name = 'zk'){
this.name = name;
}
}
let v_parent = new Parent('z');
console.log('构造函数实例', v_parent)
2、类的继承
定义一个父类,子类来继承
class parent{
constructor(name='zk'){
this.name = name;
}
}
class child extends parent{
// 继承父类的子类,可以覆盖 / 把实际需要的参数传递给 父类的参数
constructor(name = 'child'){
super(name); //要覆盖父类哪个参数,就传递哪个参数名;如果不传,则默认全部使用父类参数的默认值
// 如果子类还要增加自己的属性,一定要放在super之后
this.type = 'child';
}
}
console.log('继承', new Child('hello'));
class Parent{
constructor(name = 'zk'){
this.name = name;
}
// getter
// 注意,get后面的是属性,不是方法!
get longName(){
return 'mk' + this.name
}
// setter
set longName(value){
this.name = value
}
}
// get操作
let v = new Parent();
console.log('getter',v.longName);
// set操作
v.longName = 'hello'
console.log('setter',v.longName);
// static只是用来定义静态方法,不是用来定义静态属性用的!
// 静态属性是直接在类上定义的。
class Parent{
constructor(name = 'zk'){
this.name = name;
}
static tell(){
console.log('tell')
}
}
Parent.tell(); // tell
静态属性的定义和使用(静态属性没有关键词(暂时没有,虽然有提案))
class Parent{
constructor(name = 'zk'){
this.name = name;
}
static tell(){
console.log('tell')
}
}
Parent.type = 'type'; // 直接在类上定义属性,不用new实例
console.log('静态属性', Parent.type);
思考:什么样的场景下适合用静态方法,什么样的场景下适合用静态属性?
什么是异步 | Promise的作用 | Promise的基本用法
现在的js异步编程的方式有一下几种:
1.回调函数 2.事件监听 3.发布/订阅 4.Promise 对象 5.Generator
之前有两种方式:通过回调函数、通过触发方法
而现在的Promise更适合异步操作
// 通过模拟ajax请求,来使用promise实现异步操作
{
let ajax = function(){
console.log('执行1');
return new Promise(function(resolve, reject){
setTimeout(function(){
resolve()
}, 1000)
})
}
ajax().then(function(){
console.log("然后执行2");
})
}
如果是多个异步操作呢?
// 在then()中继续使用promise即可
{
let ajax=function(){
console.log('执行3');
return new Promise(function(resolve, reject){
setTimeout(function () {
resolve()
}, 1000);
})
};
ajax().then(function(){
return new Promise(function(resolve, reject){
setTimeout(function () {
resolve()
}, 2000);
});
}).then(function(){
console.log('timeout3');
})
}
Promise 提供 then 方法加载回调函数,catch方法捕捉执行过程中抛出的错误。catch捕获出错信息,err就是具体的出错信息
{
let ajax=function(num){
console.log('执行4');
return new Promise(function(resolve,reject){
if(num>5){
resolve()
}else{
throw new Error('出错了')
}
})
}
ajax(6).then(function(){
console.log('log',6);
}).catch(function(err){
console.log('catch',err);
});
ajax(3).then(function(){
console.log('log',3);
}).catch(function(err){
console.log('catch',err);
});
}
promise.all promise.race(赛跑)
情景1:保证所有图片都加载完成,再显示页面
{
// 所有图片加载完再添加到页面
function loadImg(src){
return new Promise((resolve,reject)=>{
let img=document.createElement('img');
img.src=src;
img.function(){
resolve(img);
}
img.function(err){
reject(err);
}
})
}
function showImgs(imgs){
imgs.forEach(function(img){
document.body.appendChild(img);
})
}
Promise.all([
loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
loadImg('http://i4.buimg.com/567751/2b07ee25b08930ba.png'),
loadImg('http://i2.muimg.com/567751/5eb8190d6b2a1c9c.png')
]).then(showImgs)
}
情景2:同一个资源有多个来源,只要一个来源请求成功,就添加到页面,其他的忽略不管(先到先得)
{
// 有一个图片加载完就添加到页面
function loadImg(src){
return new Promise((resolve,reject)=>{
let img=document.createElement('img');
img.src=src;
img.function(){
resolve(img);
}
img.function(err){
reject(err);
}
})
}
function showImgs(img){
let p=document.createElement('p');
p.appendChild(img);
document.body.appendChild(p)
}
Promise.race([
loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
loadImg('http://i4.buimg.com/567751/2b07ee25b08930ba.png'),
loadImg('http://i2.muimg.com/567751/5eb8190d6b2a1c9c.png')
]).then(showImgs)
}
什么是Iterator接口 | Iterator的基本用法 | for...of 循环
for…of只能遍历数组,如果其他数据格式也想通过for…of来遍历,前提条件是它本身自带Iterator接口,如果没有,则需要为其自定义Iterator接口
数组支持遍历,因为它本身已经封装好了Iterator接口:
// arr本身有一个Iterator的方法,通过arr[Symbol.iterator]()可以触发,这个方法会返回一个对象,对象有一个next()方法,用来输出每次遍历的结果
{
let arr=['hello','world'];
let map=arr[Symbol.iterator]();
console.log(map.next());
console.log(map.next());
console.log(map.next());
结果:
Object{value: 'hello', done: false}
Object{value: 'world', done: false}
Object{value: undefined, done: true}
}
如果其他没有Iterator接口的数据类型,也想实现遍历,则可以自定义Iterator接口
{
let obj={
start:[1,3,2],
end:[7,9,8],
[Symbol.iterator](){
let self=this;
let index=0;
let arr=self.start.concat(self.end);
let len=arr.length;
return {
// 注意:这里要返回一个对象,对象中包含next()方法,而且返回值有两个,value和done
next(){
if(index
数组的操作方法:
会改变原数组的有:pop push unshift shift splice reverse sort
不会改变原数组的有:indexOf lastIndexof concat slice
其他常用操作方法:
es5的有:forEach filter map some every reduce
es6的有:find includes
几个循环方法及其区别:
forEach、for、for...in、for..of
let arr = [1,2,3,4,5];
for(let i = 0;i
// 不支持return,它会遍历到结束
let arr = [1,2,3,4,5];
arr.forEach(function(item){
console.log(item);
})
支持return,但一般不用它遍历数组
1- 因为索引不是数字,是字符串;
2- 因为for...in还会遍历出数组的私有属性,会影响length的准确性
let arr = [1,2,3,4,5];
arr.b = '100';
for(let key in arr){
// key会变成字符串类型
console.log(key) // 会把私有属性b也遍历出来
}
// 用于遍历数组
// 既可以return,又不会遍历出私有属性
let arr = [1,2,3,4,5];
for(let value of arr){
console.log(value);
}
// 如果想让for...of遍历对象,不仅可以通过Iterator添加接口的方式,也可以通过Object.keys()来变通实现
let obj = {
school: 'zk',
age: 9
}
for(let value of Object.keys(obj)){
console.log(obj[value])
}
是否操作原数组:不操作
返回结果:过滤后的新数组
回调函数返回结果:如果返回true,则将这一项放入新数组中
// 如果想筛选(删除)某些项,可以用filter
{
let arr = [1,2,3,4,5];
let newArr = arr.filter(function(item){
return item>2 && item<5;
});
console.log(newArr); // [3,4]
}
将原有的数组映射成一个新的数组
是否操作原数组:不操作
返回结果:映射后的新数组
回调函数返回结果:回调函数中返回什么,这一项就是什么
// 可以用于将json返回值,拼接成dom元素,即更新某些项,可以用map
{
let arr1 = [1,2,3];
let newArr1 = arr1.map(function(item){
return `${item} `
});
console.log(newArr1.join('')); // 1 2 3
}
看数组中是否包含某个值
是否操作原数组:不操作
返回结果:判断结果布尔值
回调函数返回结果:包含则返回true,否则返回false
{
let arr3 = [1,2,3,4,5,6];
console.log(arr3.includes(5));
}
找到数组中的某个值
是否操作原数组:不操作
返回结果:判断找到的值
回调函数返回结果:回调中返回true,表示找到了,找到后即停止遍历;找不到返回undefined
{
let arr4 = [1,2,3,4,5,55,6];
let result = arr4.find(function(item, index){
return item.toString().indexOf(5) > -1
})
console.log(result);
}
找到true后停止,返回true ;类似 “或”
是否操作原数组:不操作
返回结果:判断数组中是否存在某值符合条件
回调函数返回结果:判断有一个条件成立(或存在某值),就返回true,并立即停止
{
let arr4 = [1,2,3,4,5];
let result = arr4.some(function(item, index){
return item.toString().indexOf(5) > -1
})
console.log(result);
}
找到false后停止,返回false;类似 “与”
是否操作原数组:不操作
返回结果:判断数组中是否所有的值都符合条件
回调函数返回结果:判断一旦有一个条件不符合(或不存在某值),就返回false,并立即停止
{
let arr4 = [1,2,3,4,5,55,6];
let result = arr4.every(function(item, index){
return item.toString().indexOf(5) > -1
})
console.log(result);
}
有四个参数(prev, next, index, item)
用法:将上一次的结果作为下一次的第一个,继续和后面的数据进行操作
即1和2的结果,与3操作,他们的结果再与4操作,以此类推
是否操作原数组:不操作
返回结果:返回叠加后的结果
回调函数返回结果:返回回调函数返回的结果
`
{
let arr4 = [1,2,3,4,5];
//第一次 prev:代表数组的前一项;next:代表数组的第二项
//第二次 prev:是数组的上一次返回值;next:是数组的第三项
//如果没有返回值,则第二次的prev便是undefined
let reduce = arr4.reduce(function(prev, next, index, item){
// item为原数组
console.log(arguments);
// return 100;
})
console.log(reduce );
}
1、计算多个商品的单价和数量的价格总和;
2、将二维数组,变成一维数组;
// 应用1:
let sum2 = [{price:30,count:2},{price:30,count:3},{price:30,count:4} ].reduce(function(prev, next){
console.log(prev, next)
return prev+next.price*next.count
}, 0); // 这个0,是默认执行第一次的prev(即默认第一项的值)
// reduce有两个参数:第一个是方法,第二个是默认第一项
// 应用2:
let arrs = [[1,2,3],[4,5,6],[7,8,9]];
let flat = arrs.reduce(function(prev,next){
return prev.concat(next);
});
console.log(flat); // [1,2,3,4,5,6,7,8,9]
异步编程解决方案(相对promise更高级)
基本概念 | next函数的用法 | yield*的用法
举例来说,读取文件的协程写法如下。
functionasnycJob(){
// ...其他代码
var f=yield readFile( fileA);
// ...其他代码
}
上面代码的函数 asyncJob 是一个协程,它的奥妙就在其中的 yield 命令。它表示执行到此处,执行权将交给其他协程。也就是说,yield命令是异步两个阶段的分界线。
协程遇到 yield 命令就暂停,等到执行权返回,再从暂停的地方继续往后执行。它的最大优点,就是代码的写法非常像同步操作,如果去除yield命令,简直一模一样。
以上举例转载自:https://www.jianshu.com/p/56ec5c113f1b,如要了解关于Generator,可参看。
Generator 函数是协程在 ES6 的实现,最大特点就是可以交出函数的执行权(即暂停执行)。
Generator包含next和yield,一旦步骤遇到yield或return,就停止,遇到next就进行下一步,直到结束
// 需要babel-polyfill支持
{
// genertaor基本定义
let tell=function* (){
yield 'a';
yield 'b';
return 'c'
};
let k=tell();
console.log(k.next());
console.log(k.next());
console.log(k.next());
console.log(k.next());
}
为其他数据结构部署Iterator接口,实现遍历,不光可以按照之前Iterator接口手动实现的写法,还可以使用Generator。
Generator 应用,实现遍历器接口(一种应用情景)
{
let obj={};
obj[Symbol.iterator]=function* (){
yield 1;
yield 2;
yield 3;
}
for(let value of obj){
console.log('value',value);
}
}
比如一个对象只有三种状态,A,B,C ,他们会在这三种状态中循环出现。
{
let state = function* (){
// 因为一直都是true,所以会一直循环
while(1){
yield 'A';
yield 'B';
yield 'C';
}
}
let status = state();
console.log(status.next());// Object {value: 'A', done: false}
console.log(status.next());// Object {value: 'B', done: false}
console.log(status.next());// Object {value: 'C', done: false}
console.log(status.next());// Object {value: 'A', done: false}
console.log(status.next());// Object {value: 'B', done: false}
...
}
{
let state=async function (){
while(1){
await 'A';
await 'B';
await 'C';
}
}
let status=state();
console.log(status.next());
console.log(status.next());
console.log(status.next());
console.log(status.next());
console.log(status.next());
}
1、剩余抽奖次数逻辑
{
let draw=function(count){
//具体抽奖逻辑
console.info(`剩余${count}次`)
}
let residue=function* (count){
while (count>0) {
count--;
yield draw(count);
}
}
let star=residue(5);
let btn=document.createElement('button');
btn.id='start';
btn.textContent='抽奖';
document.body.appendChild(btn);
document.getElementById('start').addEventListener('click',function(){
star.next();
},false)
}
2、长轮巡
{
// 长轮询
let ajax=function* (){
yield new Promise(function(resolve,reject){
//模拟每200毫秒请求一次
setTimeout(function () {
resolve({code:0})
}, 200);
})
}
let pull=function(){
// generator实例
let genertaor=ajax();
let step=genertaor.next();
// step.value就是Promise实例
step.value.then(function(d){
if(d.code!=0){
setTimeout(function () {
console.info('wait');
pull()
}, 1000);
}else{
console.info(d);
}
})
}
pull();
}
修饰器是一个函数,用来修改类的行为(或扩展类的功能)
1、除了babel-polyfill,还需要安装一个插件包:
babel-plugin-transform-decorators-legacy
2、修改.babelrc文件
{ "presets":["es2015"], "plugins":["transform-decorators-legacy"] }
3、再重启服务
声明函数体:
{
// 声明一个修饰器
let readonly = function(target, name, descriptor){
descriptor.writable = false; //描述是否可写
return descriptor
}
}
使用(在类的里面):
{
class Test{
@readonly
time(){
return '2018-03-09'
}
}
}
let test = new Test();
// 尝试修改类
test.time = function(){
console.log('reset time');
}
console.log(test.time());
//会报错提示无法修改只读属性time
Uncaught TypeError: Cannot assign to read only property 'time' of object '#'
在类的外面使用:
{
let typename=function(target,name,descriptor){
target.myname='hello'; // target指的就是类本身
}
@typename
class Test{
}
console.log('类修饰符',Test.myname);
// 第三方库修饰器的js库:core-decorators;
// 可以通过npm安装:npm install core-decorators
// import 进来以后,直接就可以@使用
}
做埋点,日志统计
把埋点系统抽离出来,成为一个可复用的模块
{
let log=(type)=>{
return function(target,name,descriptor){
let src_method=descriptor.value;
descriptor.value=(...arg)=>{
src_method.apply(target,arg);
console.info(`log ${type}`);
}
}
}
class AD{
@log('show')
show(){
console.info('ad is show')
}
@log('click')
click(){
console.info('ad is click');
}
}
let ad=new AD();
ad.show();
ad.click();
}