JS-对象-3

Proxy语法介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* */
/* const p = new Proxy(target, handler); */
let user = { name:'li',age:12 };
let p = new Proxy(user,{
    get(obj,prop){/* 代理user getter :
    其中的两个参数：obj:被代理的数据，prop:当用户获取obj的某属性时prop就是这个属性名*/
        return obj[prop];
    },
    set(obj,prop,value){
        /* setter 比get多出的一个参数：value:要给属性设置的值 */
        obj[prop] = value;
    }
})
p.name;//"li"
p.name='ll'

在Proxy的构造函数中有两个参数

  • target
    要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

  • handler
    一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

使用代理控制函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function sum(a,b){
    return a+b;
}
/* handler.apply() 方法用于拦截函数的调用 */
let handler = {
    /* 三个参数：target目标对象（函数）thisArg被调用时的上下文对象 argumentsList被调用时的参数数组*/
    apply(target,thisArg,argumentsList){
        /* 在此处进行要代理的行为 */console.log(`${target}-${thisArg}-${argumentsList}`);
    }
}
let p = new Proxy(sum,handler);
p(1,2);//输出函数，undefined，1,2
p.apply(window,[1,2]);//此时thisArg：window

使用代理控制数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let lesson = [
    { title:"响应式布局 JS",price:200 },
    { title:"服务器渲染",price:200 },
    { title:"响应式布局2 JS",price:220 },
    { title:"响应式布局3 JS",price:300 },
]

let p = new Proxy(lesson,{
    get(array,index){
        const title = array[index].title;
        console.log(title);
    }
});
p[0];//响应式布局 JS

展开全文 >>

移动端-无缝滑屏-2

设置滑屏事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/* 滑屏相关 */
let touchStartX = 0,
  touchdis = 0;
/* 滑动的元素的起始位置 */
let ulX = 0;
/* 图片的下标 */
let imgIndex = 0;
/* 添加移动端事件 */
[...carouselWrap].forEach((item) => {
  item.addEventListener("touchstart", function (e) {
    let touch = e.changedTouches[0]; /* TouchList 接口代表一个触摸平面上所有触点的列表。例如，如果一个用户用三根手指接触屏幕（或者触控板），与之对应的 TouchList 会包含每根手指的 Touch 对象，总共三个 */
    touchStartX = touch.clientX;
    ulX = ul.offsetLeft;
  });
  item.addEventListener("touchmove", function (e) {
    let touch = e.changedTouches[0];
    touchdis = touch.clientX - touchStartX;
    ul.style.left = ulX + touchdis + "px";
  });
  item.addEventListener("touchend", function (e) {
    if (touchdis > 0) {
      /* 向右划 */
      imgIndex--;
    } else {
      /* 向左划 */

      if (Math.abs(touchdis) >= document.documentElement.clientWidth / 2) {
        /* 移动距离大于视口的一半 */
        imgIndex++;
        ul.style.left =
          -imgIndex * document.documentElement.clientWidth +
          "px"; /* 每次移动一个视口的宽度 */
      } else {
        ul.style.left = ulX + "px";
      }
    }
  });
});

将imgIndex抽象成图片的索引，发现判断左滑右划不方便，决定升级index，抽象成ul的实时位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* 滑屏相关 */
   let touchStartX = 0,touchdis = 0;
   /* 滑动的元素的起始位置 */
   let ulX = 0;
   /* 图片的下标 */
   /* let imgIndex = 0; */
   /* 添加移动端事件 */
   [...carouselWrap].forEach(item=>{
     item.addEventListener('touchstart',function(e){ 
       let touch = e.changedTouches[0];/* TouchList 接口代表一个触摸平面上所有触点的列表。例如，如果一个用户用三根手指接触屏幕（或者触控板），与之对应的 TouchList 会包含每根手指的 Touch 对象，总共三个 */
       touchStartX = touch.clientX;
       ulX = ul.offsetLeft;
     });
     item.addEventListener('touchmove',function(e){ 
       let touch = e.changedTouches[0];
       touchdis = touch.clientX - touchStartX;
       ul.style.left =ulX+touchdis+'px';
      });
     item.addEventListener('touchend',function(e){
     /* 修改位置 */
       let index = ul.offsetLeft/document.documentElement.clientWidth;/* 用ul的实时位置抽象成下标，若index的下标为负：向左滑，为正：向右滑 */
       index=Math.round(index)
       if(index>0){
         /* 往右划 */
         ul.style.left = index*(document.documentElement.clientWidth)+'px';console.log(index);

       }
       else{
         /* 向左划 */
         if(Math.abs(touchdis)>=document.documentElement.clientWidth/2){ /* 移动距离大于视口的一半 */
            ul.style.left = index*(document.documentElement.clientWidth)+'px';console.log(index);/* 每次移动一个视口的宽度  Math.round(index):四舍五入返回整数*/
         }
         else{
           ul.style.left =ulX+'px';
         }
            
       }
     });
   })

设置无限轮播的效果（思想）

展开全文 >>

JS-对象-2

对象的复制

浅拷贝的几种方式

我们知道当一个对象a赋值给另一个对象b的时候，是把a地址赋值，我们之后操作修改b的时候也会更改a中的内容。我们不希望这种情况发生，所以就想要给b新开辟一个内存，再把a中的内容复制。

1
2
3
4
5
6
7
8
9
10
/* 方式一：循环 */
let a = { name:'liqianru',lesson:'js'};
let b = {};
for( let key in a ){
    b[key] = a[key];
}
b.name = 'liqianru2';
/* a:{ name:'liqianru',lesson:'js'}
   b:{ name:'liqianru2',lesson:'js'} */

1
2
3
4
5
6
/* 方式二：Object.assign */
let a = { name:'liqianru',lesson:'js'};
let b = Object.assign({},a);
b.name = 'liqianru2';
/* a:{ name:'liqianru',lesson:'js'}
   b:{ name:'liqianru2',lesson:'js'} */
1
2
3
4
5
6
/* 方式三：展开语法 */
let a = { name:'liqianru',lesson:'js'};
let b = {...a};
b.name = 'liqianru2';
/* a:{ name:'liqianru',lesson:'js'}
   b:{ name:'liqianru2',lesson:'js'} */
  • 可以发现，这种复制，都是复制的单层的属性，没有出现要复制的属性仍是一个对象的这种嵌套的情况，我们称这种复制叫浅拷贝。
对象的深拷贝
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
let obj = {
    name:'liqianru',
    lessons:[
        { name:'js' },
        { name:'css' }
    ],
}

function deep(obj){
    let result = {};
    obj instanceof Array?result=[]:null;
    for( let key in obj ){
        result[key]= typeof obj[key]=='object'?deep(obj[key]):obj[key];
    }
    return result;
}

对象的封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* 封装：把数据和它相关的行为打包（封装）起来。 隐藏实现信息、细节，只暴露需要的 API */
封装模式：
工厂模式
function objectFactory(name,age){
    let obj = {
        name,
        age,
        show(){
            console.log(`我的名字：${this.name}`);
        }
    };
    return obj;
}
let user1 = objectFactory('liqianru',20);
let user2 = objectFactory('liqianru2',21);

构造函数模式
function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    }
}
var person1 = new Person("John", 18, "Teacher");
var person2 = new Person("Greg", 30, "Doctor");

对象的属性特征

能不能对对象的属性设置一些特征：例如不可枚举，只读等特征

  • 查看对象属性特征
1
2
3
4
5
6
7
let obj = { name:'liqianru',lesson:'js' };
console.log(JSON.stringify(Object.getOwnPropertyDescriptor(obj,'name')));
/* 输出：{"value":"liqianru","writable":true,"enumerable":true,"configurable":true} */

/* 获得对象的所有属性特征 */
console.log(JSON.stringify(Object.getOwnPropertyDescriptors(obj)));

  • 修改属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* defineProperty可以为对象新增属性并设置其特征（默认值为false），也可以对现有属性修改其特征 。还可以为属性设置访问器*/
Object.defineProperty(obj,'grade',{

});
/* 在严格模式下对不可修改的属性进行修改会报错 */

Object.defineProperty(obj,'name',{
    enumerable:false,//不可枚举
    configurable:false//不可配置：不可用defineProperty修改，也不可删除
});

/* 批量设置 */
Object.definePorperties(obj,{
    name:{
        enumerable:false,
    },
    grade:{
        writable:true
    }
})

  • 设置对象为不可添加属性的对象（扩展）
1
2
3
4
5
6
7
8
9
Object.preventExtensions(obj);
obj.id = 1;//属性添加失败，在严格模式下会报错

/* 判断一个对象是否可添加属性 */

if(Object.isExtensible(obj)){
    ...
}

封闭对象

封闭对象：使对象不可添加属性，不可删除，不可修改属性特征，当前属性的值只要原来是可写的就可以改变。当对象需要被保护的时候可用

1
2
3
4
5
6
7

Object.seal(obj);

/* 判断 */
if(!Object.isSealed(obj)){

}

冻结对象

封闭对象：冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。

1
Object.freeze(obj);

使用访问器(setter,getter)保护数据

使用场景：当我设置了对象user，里面的属性的值可以被随意更改，对数据的质量没有把关。访问器就起到了把关的作用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 初识 */
let user={
    data:{ name:'liqianru',age:20 },/*  */
    set age(value){
        if(typeof value != 'number' || value>100 || value <0){
            throw new Error("年龄格式错误");
        }
        else{
            this.data.age = value;
        }
    },
    get age(){ return  this.data.age; }
}
user.age = 20;/* Uncaught Error: 年龄格式错误 */
  • 访问器的优先级
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let user={
    name:'liqianru',
    age:10,/* 当对象中同时暴露属性age和伪属性age时，谁的优先级高？ */
    set age(value){
        /* if(typeof value != 'number' || value>100 || value <0){
            throw new Error("年龄格式错误");
        }
        else{
            this.age = value;
        } */
        console.log('setter');
    },
    get age(){ return  this.age; }
}
user.age = 22;//输出setter,说明访问器的优先级高，且输出user时{name: "liqianru"}，age没了，所以我们才要吧对象的属性放到data中，避免这种冲突

  • 使用访问器伪造属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let lesson = {
    list:[
        {name:'js',price:100},
        {name:'css',price:140},
        {name:'vue',price:40},
    ],
    get total(){
        return this.list.reduce((sum,cur)=>{  return sum+cur.price;  },0);
    }
}
/* 
lesson.total=>280
同时lesson.total不可修改
 */

  • 使用访问器批量设置属性
1
2
3
4
5
6
7
8
9
10
11
12
let user = {
    name:'',
    lesson:'',
    set data(v){
         [this.name,this.lesson]=v.split(",");
    },
    get data(){
        return `${this.name}-${this.lesson}`;
    }
}
user.data = "liqianru,js";
/* user:{name: "liqianru", lesson: "js"} */

TOKEN读写操作

  • 什么是TOKEN（令牌）？

Auth0中的解释：TOKEN分为两类： ID tokens and access tokens.
ID tokens：用于身份验证
access tokens：拥有这个令牌可以获取到API的使用权
所以就需要存储这些TOKEN，就可以使用访问器

1
2
3
4
5
6
7
8
9
10
 
let Request = {
    set token(content){
        localStorage.setItem("token",content);
    },
    get token(){
        return localStorage.getItem("token");
    }
}

构造函数&class中使用访问器

  • 构造函数
1
2
3
4
5
6
7
8
9
10
11
function User(name,age){
   let data = { name,age };//构造函数内的私有属性
   Object.defineProperties(this,{/* 通过闭包的特性， defineProperties函数内可以访问到父级变量*/
       name:{
           get(){ return data.name; },
           set(value){ data.name = value; }
       }
   });
}
let u = new User();//u:User:{} 看不见name和age，数据私有被保护
u.name = 'li';//u:User:{},但是u.name输出为：li
  • class
1
2
3
4
5
6
7
8
9
10
11
12
class User{
    constructor(name,age){
        this.data = { name,age }
    }
    get name(){
        return this.data.name;
    }
    set name(value){
        this.data.name = value;
    }
}
let u = new User("li",22);//User {data: {…}},想要data不被外界访问到，可以使用Symbol：将data = Symbol();

展开全文 >>

JS-对象-1

对象使用解构

多层对象的解构操作
1
2
3
4
5
6

//现在我想要单独把subs（嵌套的对象）取出来
let obj = { name:'obj',subs:{ title:'d' } };
let { name,subs:{ title } }=obj;
console.log(name,title);//obj d

对象的解构的默认值实现合并的操作

比如说我想实现一个函数，在我没有传递参数的时候，函数运行时使用默认值，传递参数后，覆盖默认值

1
2
3
4
5
6
7
8
9
   function f1(options = {}){//注意：此处一定要初始化形参为为空对象否则 f1不传递参数时会报错：TypeError: Cannot read property 'width' of undefined
    let { width=100,height=200 } = options;
    console.log(width,height);
}

f1();//100 200
f1({ width:1 });//1 200
f1({ width:300,height:20 });//300 20

assign实现合并
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let a ={a:1};
let b ={b:1};
let c =Object.assign(a,b);
//{a: 1, b: 1}

/* 那么我也可以构造一个函数实现默认值覆盖 */
function load(params){
let option = {
    size:1000
}
Object.assign(option,params);
console.log(option);
}
load({ size:200,type:'jpeg' });//{size: 200, type: "jpeg"}
load({size:200});//{size: 200}

对象属性的增加和删除

1
2
3
4
5
6
//增加
obj.name = 'xxx';
obj["name"] = 'xx'
//删除
delete obj.name

检测属性

1
2
3
4
5
obj.hasOwnProperty('age');//判断当前对象上（不涉及原型链）有没有属性

//包含原型链：in 关键词
"属性" in obj

计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 let obj = {
      name:'l'
  };
  let lesson = 'js';
  obj[lesson] = 99;
  console.log(obj);
  /* 
  {
  "name": "l",
  "js": 99
  }
  */
 /* 可以发现当obj[lesson]时，先计算了lesson的值，后将其值的内容放入属性中 */

 let l = [
     {
         title:'css',
         grade:90
     },
     {
         title:'js',
         grade:93
     }
 ]//后台经常传入类似的结构，但我想要通过一个属性名获取一个对象，该怎么操作？

let re=l.reduce((obj,cur,index)=>{
     obj[`user-${cur.title}-${index }`] = cur;
     return obj;
 },{});
 console.log(JSON.stringify(re,null,2));

 /* 
 {
  "user-css-0": {
      "title": "css",
      "grade": 90
      },
  "user-js-1": {
      "title": "js",
      "grade": 93
      }
  }   
 */

展开全文 >>

JS-数组-函数的使用2

合并数组

1
2
let ary = [1, 2, 3, 4];
ary.concat(ary); //[1, 2, 3, 4, 1, 2, 3, 4]

数组内部移动复制

1
2
3
4
5
6
let ary = [1, 2, 3, 4, 5];
/* 第一个参数：想要移动的位置
   第二个参数：决定移动的起始位置（包括）
   第三个参数：决定移动的结束位置（不包括）
 */
ary.copyWithin(3, 0, 2); //[1, 2, 3, 1, 2]

查找元素基本使用

  • ary.indexOf 和 ary.lastIndexOf
1
2
3
4
5
6
7
8
9
10
11
12
13
14
ary.indexOf(2);//寻找2的下标值

//return 1
ary.indexOf(88);//寻找 88 的下标值，找不到返回-1
// -1
let a=[1,1,1,2];
a.lastIndexOf(1);//返回下标值2，也就是说查找值为一的最后出现的下标
ary.lastIndexOf(3,-4);//与 indexOf 正好相反
//-1
ary.lastIndexOf(3,0);//与 indexOf 正好相反
//-1
ary.lastIndexOf(3,2);//与 indexOf 正好相反
//2

数组中是否拥有某元素

1
2
3
方式一：if(ary.indexOf(2)!=-1)//有
方式二：ary.includes(2)//true

更加高效的元素查找

问题：当我们想要查找数组中是否存在一个引用类型时，用 includes 行吗？：NO

1
2
3
4
let a = [{ name: "w" }, { name: "s" }];

a.includes({ name: "w" }); //false
//因为include会根据传入的参数去比较是否相同，而引用类型的比较相等的条件是内存地址相等，实参{name:'w'}实际上是一个新的地址

那么如何检索引用类型？

检索引用类型：find(function) & findIndex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let a = [{ name: "w" }, { name: "s" }];
a.find(function (item) {
  return 1;
}); //当函数中的返回体为真就返回第一个符合函数条件的值（find是禁止贪婪的）

a.find(function(item)
    { 
        return item.name=='w';}
    )
// console:{name: "w"}

//若找不到 返回undefined
a.find(function(item)
    { return item.name==2;}
    )

//如果想要获取到其下标则用findIndex
a.findIndex(function(item){ return item.name=='w';})
//0

  • find 原理
    1
    2
    3
    4
    5
    6
    function Myfind (callback){ for(let i of ary){if(callback(i)) return i;}//return undefined;
        
        写在原型上：
        Array.prototype.MyFind = function (callback){ for(let i of this){if(callback(i)) return i;}return undefined;
        }

    forEach循环数组

1
2
3
4
5
let a = [{name:'aa'},{name:2}]
a.forEach(function(item,index,arrys){ console.log(item,index,arrys) })
// {name: "aa"} 0  [{…}, {…}]
 //{name: 2} 1  [{…}, {…}]

every 和 some

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值

1
2
3
4
5

/* return都是boolean */
let a = [1,2,3];
a.some(function(item,index,array){ return item == 1 });//true,遇到第一个符合条件的都不再继续向下查找

1
2
3
let a = [10,12,11];
a.every(function(i,index,array){ return i>1; });//true,必须每一个都符合才返回true

filter

1
2
3
let a = [10,12,11];
a.filter(function(i,index,array){ return i>10; });//[12, 11],仅过滤符合条件的，返回数组

map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* map映射数组：数组中的元素如果是值类型，则不会被影响；若是引用类型则会被影响 */
a.map(function(value){ value = 1; return value})
// [1, 1, 1, 1]
/* 但 */
console.log(a);
//[1, 2, 3, 4]，数组a未被改变

/* 而对于引用类型来说 */
b.map(function(item){item.n = '我已被map映射修改';})；//在没有返回item的情况下，b内元素的值已经被修改
console.log(b)；

/* 0: {n: "我已被map映射修改", m: 100}
1: {n: "我已被map映射修改", m: 100} */

/* 所以对于应用类型来说，怎样才能不影响原数组的情况下，获得修改后的副本呢？也就是复制一份数组，再进行修改【有关于浅拷贝和深拷贝】 */
b.map(function(item){ return Object.assign({ item ,add:'新添加'})})
/* 0: {item: {…}, add: "新添加"}
1: {item: {…}, add: "新添加"} */
console.log(b);
/* 仍是[{n: "我已被map映射修改", m: 100}
 {n: "我已被map映射修改", m: 100}] */

reduce

1
2
3
4
5
6
7
8
9
10
11
12
13
let a = [1,2,3,4,5];
// 第一个参数：回调函数：[参数1-pre：如果没有设置初始值那么第一次的值就是数组的第一个元素，下一次的值是reduce函数上一个返回值        参数2-cur: 当前值]
// 第二个参数：initalPre：pre的初始值
a.reduce(function(pre,cur,curIndex,arry){ console.log(pre,cur,curIndex); },initalPre);

a.reduce(function(pre,cur,index,arry){ console.log(pre,cur,index,arry); return 'h'+cur; });
//1 2 1   [1, 2, 3, 4]
//h2 3 2  [1, 2, 3, 4]
//h3 4 3  [1, 2, 3, 4]

/* 应用：例如统计元素出现的次数 */
function countNum(arry,value){ return arry.reduce(function(pre,cur){ if(cur === value) return ++pre;else return pre; },0) }

展开全文 >>

ES6-类的秘密-1

Class的初识-声明一个类

1
2
3
4
class User{

}
let user = new User();

  • 构造函数

    1
    2
    3
    4
    5
    6
    class User{
        constructor(arg1){
            this.arg1 = arg1;
        }
    }
    let user = new User('哈哈');

    见识了javascript中的类，可以发现有了类之后面向对象的编程更加直观明了，那么Class的原理是否也如其他面向对象语言一样呢？

1
2
3
4
5
/* 类的声明 */
class User{

}
console.dir(User);
1
2
3
/* 函数的声明 */
function Hser(){}
console.dir(Hser);

可以发现class和function的原型都是function，也就是说class底层的机制仍然是原型机制，可以说类就是函数。class 只是语法糖为了让类的声明与继承更加简洁清晰。

对象属性的声明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class User{
 outerProperty;//注意，在此声明时不加let 等关键字
 constructor(innerProperty){
     this.innerProperty = innerProperty;
 }
}
let user = new User('nihao');
console.log(user);
console.log(Object.getOwnPropertyNames(user));//Object.getOwnPropertyNames:获得对象上的属性名（而非原型上的属性），以数组的形式返回
//["outerProperty", "innerProperty"]

/* 可见构造器函数不是必需的，且show方法会放到User2的原型中 */
class User2{
    show(){
        console.log('show');
    }
}

user:

严格模式下this的不同

1
2
3
4
5
6
7
8
9
10
11
class User{
    constructor(){}
    show(){
        console.log(`show:${this}`);//this指向：User
        function test(){
            console.log(`test:${this}`);//undefined
        }
        test();
    }
}

class声明的方法不可遍历

  • 先看一下函数中声明的方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function H(){
        H.prototype.show = function(){}
    }
    /* 声明H的对象 */
    let h = new H();
    h.a1 = 'a1';
    for(let key in h){
        console.log(key);//循环输出 a1,show
    }
    但是有时我们遍历对象的属性并不想遍历到它的原型上的属性，该怎么办呢
    1

    静态访问

静态属性

静态属性即为类设置属性，而不是为生成的对象设置,在 class 中为属性添加 static 关键字即声明为静态属性

1
2
3
4
5
/* 可以把为所有对象使用的值定义为静态属性 */
class User{
    static state = 'ok'
}

静态方法

展开全文 >>

HTML5&JS-draggable属性&dragEvent

drag事件

当元素或者选择的文本被拖动时触发 drag 事件,并且在拖拽未结束之前每隔几百毫秒触发一次drag事件

dragstart事件

dragstart：用户开始拖拉时，在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中，指定拖拉的数据。

dragend事件

dragend：拖拉结束时（释放鼠标键或按下 ESC 键）在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。它与dragstart事件，在同一个节点上触发。不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。

dragenter事件

dragenter：拖拉进入当前节点时，在当前节点上触发一次，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。

dragover事件

dragover：拖拉到当前节点上方时，在当前节点上持续触发（相隔几百毫秒），该事件的target属性是当前节点。该事件与dragenter事件的区别是，dragenter事件在进入该节点时触发，然后只要没有离开这个节点，dragover事件会持续触发。

dragleave事件

dragleave：拖拉操作离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。如果要在视觉上显示拖拉离开操作当前节点，就在这个事件的监听函数中设置。

dragEvent

用于表示拖、放交互的DOM event接口

属性&方法

  • dataTransfer(只读) ：保存着拖拽操作中的数据，dataTransfer的对象（其中保存着数据）

    • dataTransfer中包含的属性

      • dropEffect：表示拖放过程中给用户的反馈，会影响拖拽过程中鼠标光标的手势，似如hover的鼠标手势变化

        • 值:

          • none(默认):可能禁止拖拽（说可能是因为，还与effectAllow又关）

          • move:将元素移动到新位置

          • copy:新位置产生原元素的副本

          • link:新位置产生原项目的链接

      • effectAllow：允许dropEffect的行为发生

        • 值

          • uninitialized(效果没有设置时的默认值<=>all)

          • none 此项表示不允许放下

          • copy源项目的复制项可能会出现在新位置。

          • copyLink允许 copy 或者 link 操作。

          • copyMove允许 copy 或者 move 操作。

          • link可以在新地方建立与源的链接。

          • linkMove允许 link 或者 move 操作。

          • move一个项目可能被移动到新位置

          • all允许所有的操作。

      • setData:[ function ]用于存储拖拽时想要存储的数据

        1
        2
        3
        4
        5
        /* @params:
                  arg1[String]:要存储的数据的数据类型：如果数据类型不存在,将数据存储到列表的最后一项，使得 types 列表中的最后一个项目将是新类型。
                  arg2[String]:要存储的数据
         */
        dataTransfer.setData(arg1,arg2);

      • getData:[function]用于获取存储的数据

        1
        dataTransfer.getData('dataName');

展开全文 >>

JS-数组-函数的使用

slice

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 简单的使用slice截取数组 */
    let ary = [1,2,3,4,5];
    /* 两个参数的含义：起始下标：1（包含1），结束下标：2（不包含下标2） */
    let newAry = ary.slice(1,2);
    console.log(newAry);//[2]
    console.log(ary);//[1,2,3,4,5],说明slice函数并不修改原数组，只是复制了结果

    /* 无参数：含义截取整个数组 */
    ary.slice();//[1,2,3,4,5]

    /* 只有一个参数:表示从下标2开始截取（包含下标2）到结束 */
    ary.slice(2);//[3, 4, 5]

splice-实现数组的增删改

splice-实现数组的删除
    
1
2
3
4
5
6

let ary = [1,2,3,4,5];
/* 两个参数的含义：从哪个下标开始截取；截取几个元素 */
let newA = ary.splice(0,2);
console.log(ary);//[3,4,5]，发现原数组被改变，删除了[1,2]
console.log(newA);//[1,2]
应用：删除结点元素
splice-实现数组的增加（替换操作）
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

let ary = [1,2,3,4,5];
let ary2 = ['a','b','c','d'];

/* 在头部追加：前两个参数的含义不变，之后的参数为新增的元素内容，从原数组的头部插入（因为第一个参数为0） */
let newA = ary.splice(0,2,'x1','x2','x3');
/* 在插入的同时进行了删除 */
console.log(ary);//["x1", "x2", "x3", 3, 4, 5]
console.log(newA);//[1, 2]

/* 在特定位置追加:在2-3数字之间的位置追加 */
let ary3 = [1,2,3,4,5];
ary3.splice(2,0,'a','b');
console.log(ary3);//[1, 2, "a", "b", 3, 4, 5]

/* 在末尾增加 */
ary3.splice(ary3.length,0,'cc');
console.log(ary3);// [1, 2, "a", "b", 3, 4, 5, "cc"]

/* 替换操作 ：把ary2中的b替换为2*/
let newA2 = ary2.splice(1,1,2);
console.log(newA2);//输出被删除的元素["b"]
console.log(ary2);//["a", 2, "c", "d"]
splice-实现数组的清空
1
2
3
4
5
6
 /* 清空数组的几种方式 */
hd = [],//不会影响其他
hd.length = 0;//若是复制的会影响原数值
hd.splice(0); || hd.splice(0,hd.length);
while(hd.pop()){}

展开全文 >>

css3-弹性盒布局

弹性盒模型-加快了网站布局的速度

传统设置布局后，如果某一天布局改变，如三个平分的块变成四个，能不能不改变css内容响应式布局？答，弹性盒模型

图中是一个 flex-direction 属性为 row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。

弹性容器(Flex container)

包含着弹性元素的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。

弹性元素(Flex item)

弹性容器的每个子元素都称为弹性元素。弹性容器直接包含的文本将被包覆成匿名弹性单元。

flex container的属性

1
2
3
4
5
6

div{
    display:flex;/* 定义一个弹性盒 */
    flex-direction:row;/* 默认值 */
    }

flex-direction: 设置弹性元素的主轴上的排列方式(设置主轴的起始方向)

初始值：row 是否是继承属性：否

  • row
    flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。
  • row-reverse
    表现和row相同，但是置换了主轴起点和主轴终点
  • column
    flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
  • column-reverse
    表现和column相同，但是置换了主轴起点和主轴终点
弹性元素的溢出换行处理：通过设置flex container的属性flex-wrap
  • 不换行，整体缩小
1
2
3
4
5
6
div{
    display:flex;/* 定义一个弹性盒 */
    flex-direction:row;/* 默认值 */
    flex-wrap:nowrap;/* 默认值 不换行，弹性元素整体缩小 */
}

  • 换行
1
2
3
4
5
6
div{
    display:flex;/* 定义一个弹性盒 */
    flex-direction:row;/* 默认值 */
    flex-wrap:wrap;/* 换行，或wrap-reverse */
}

统一设置弹性元素的主轴上的排列方式与换行
1
2
3
4
div{
    /* 相当于flex-direction和flex-wrap的合体 */
    flex-flow:column wrap;
}

justify-content:定义了在当前行上，弹性项目沿主轴如何排布。

  • flex-start
    从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

div{
            width:400px;
            height: 300px;
            border: 2px solid grey;
            display: flex;
            /* 确定了主轴的开始方向 */
            flex-direction: row-reverse;
            justify-content:flex-start;/* 弹性项目从主轴的开始方向排布 */
        }
        div main{
            width: 100px;
            height: 100px;
            background: indigo;
            color: white;
        }

效果排列

  • flex-end
    从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

div{
            width:400px;
            height: 300px;
            border: 2px solid grey;
            display: flex;
            /* 确定了主轴的开始方向 */
            flex-direction: column;
            justify-content:flex-end;/* 弹性项目从主轴的结束方向排布 */
        }
        div main{
            width: 100px;
            height: 100px;
            background: indigo;
            color: white;
        }

  • center

伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

div{
            width:400px;
            height: 300px;
            border: 2px solid grey;
            display: flex;
            /* 确定了主轴的开始方向 */
            flex-direction: row;
            justify-content:center;
        }
        div main{
            width: 100px;
            height: 100px;
            background: indigo;
            color: white;
        }

  • space-between

在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐(无间距)，每行最后一个元素与行尾对齐(无间距)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

div{
            width:400px;
            height: 300px;
            border: 2px solid grey;
            display: flex;
            /* 确定了主轴的开始方向 */
            flex-direction: row;
            justify-content:space-between;
        }
        div main{
            width: 100px;
            height: 100px;
            background: indigo;
            color: white;
        }

  • space-around
    在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
  • space-evenly
    flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距,，主轴结束位置到最后一个flex项的间距，都完全一样。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

div{
            width:400px;
            height: 300px;
            border: 2px solid grey;
            display: flex;
            /* 确定了主轴的开始方向 */
            flex-direction: row;
            justify-content:space-evenly;
        }
        div main{
            width: 100px;
            height: 100px;
            background: indigo;
            color: white;
        }

align-items 定义了在当前行上，弹性项目沿侧轴（交叉轴）默认如何排布
  • center

元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。

  • stretch

在弹性元素没有设置高度或宽度（若设置了高宽度则以设置的为准）的时候，弹性元素沿着交叉轴的方向延伸

align-content 定义了在多行上，弹性项目沿侧轴（交叉轴）默认如何排布

要注意的是多行交叉轴的起始位置

flex item的属性

align-self 定义了单个弹性项目在交叉轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#c{
           width: 350px;
           height: 350px;
           border: 1px solid black;
           display: flex;
           justify-content: center;
           flex-wrap: wrap;

       }
       #c>div{
           width: 100px;
           height: 100px;
           background-color: bisque;
       }
       #c>div:first-child{
           align-self: center;
       }

效果显示：

  • normal
    这个关键字的效果取决于我们处在什么布局模式中：

    • 在绝对定位布局的静态位置上，效果和stretch一样。
    • 对于那些弹性项目而言，效果和stretch一样。
    • 对于那些网格项目而言，效果和stretch一样，除了有部分比例或者一个固定大小的盒子的效果像start。
      这个属性不适用于会计盒子和表格。

  • flex-start

元素向侧轴起点对齐。

  • flex-end

元素向侧轴终点对齐。

  • center
flex-grow 设置弹性元素在主轴上，对剩余空间的分配

flex-grow:n; 把剩余空间平均分配成n等份

  • 平均分配剩余空间
1
2
3
/* 给弹性盒中的每一个弹性元素设置 */
flex-grow:1;

  • 不分配剩余空间（是多大就多大）
1
flex-grow:0;

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

不断学习的鸽子