Vue:(一)基础语法

官方文档： https://cn.vuejs.org/v2/guide/

一.概况

1.Vue概况

  • Vue本身并不是一个框架
  • Vue结合周边生态构成一个灵活的、渐进式框架
    • 声明式渲染
    • 组件系统
    • 客户端路由
    • 状态管理
    • 构建工具

2.Vue核心思想：数据驱动、组件化

3.Vue和React对比

  • Vue

    • 模板和渲染函数的弹性选择
    • 简单的语法及项目构建
    • 更快的渲染速度和更小的体积

  • React

    • 更适用大型应用和更好的可测试性
    • 同时适用于Web端和原生App
    • 更大的生态圈带来的更多支持和工具

  • Vue和React相同点

    • 利用虚拟DOM实现快速渲染

    • 轻量级

    • 响应式组件

    • 服务器端渲染

    • 易于集成路由工具，打包工具以及状态管理工具

    • 优秀的支持和社区

展开全文 >>

Less和Sass入门

一.介绍

Less/Sass这样的基于CSS的另一种语言，通过工具编译成CSS，添加了很多CSS不具备的特性。

二.安装和使用

  • Less：

    • Node.js环境中使用：

      • npm install less
      • lessc xxx.less

    • 浏览器环境中使用

      • <link rel="stylesheet/less" type="text/css" href="styles.less" />

      • <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.10.0-beta/less.min.js" ></script>

  • Sass：

    • npm install node-sass
    • node-sass xxx.scss

展开全文 >>

NodeJS:(二)常用API

官方文档：http://nodejs.cn/api/
常用API：path、Buffer、events、fs

一.path路径

const {path} = require(‘path’);

  • path.normalize(path);//规范化指定的 path，并处理 ‘..’ 和 ‘.’ 片段
1
path.normalize('C:\\temp\\\\foo\\bar\\..\\');
2
// 返回: 'C:\\temp\\foo\\'
  • path.join([…paths]);//使用平台特定的分隔符把所有path片段连接到一起，并规范化生成的路径
1
path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
2
// 返回: '/foo/bar/baz/asdf'
  • path.resolve([…paths]);//将路径或路径片段的序列处理成绝对路径
1
path.resolve('/foo/bar', './baz');
2
// 返回: '/foo/bar/baz'
  • path.basename(path[, ext]);//返回path的最后一部分，类似于 Unix 中的basename命令
1
path.basename('/foo/bar/baz/asdf/quux.html');
2
// 返回: 'quux.html'
  • path.extname(path);//返回path的扩展名，即从path的最后一部分中的最后一个 .（句号）字符到字符串结束
1
path.extname('index.html');
2
// 返回: '.html'
3
path.extname('index.coffee.md');
4
// 返回: '.md'
  • path.dirname(path);//返回path的目录名，类似于 Unix 中的dirname命令
1
path.dirname('/foo/bar/baz/asdf/quux');
2
// 返回: '/foo/bar/baz/asdf'
  • path.sep;//返回平台特定的路径片段分隔符
1
'foo\\bar\\baz'.split(path.sep);
2
// 返回: ['foo', 'bar', 'baz']
  • path.delimiter;//返回平台特定的路径分隔符
1
console.log(process.env.PATH);
2
// 输出: 'C:\Windows\system32;C:\Windows;C:\Program Files\node\'
3
process.env.PATH.split(path.delimiter);
4
// 返回: ['C:\\Windows\\system32', 'C:\\Windows', 'C:\\Program Files\\node\\']

  • path.win32;//返回为 Windows 实现的path方法

  • path.posix;//返回为 POSIX 实现的path方法

区别：

  • __dirname、__filename总返回文件的绝对路径，前者到文件夹，后者到文件夹内文件
  • process.cwd( )返回执行node命令所在文件夹
  • ./或者../
    • 在require方法中总是相对当前文件所在文件夹
    • 在其他地方和process.cwd( )一样，相对node启动文件

二.Buffer缓冲

  • 用于处理二进制数据流
  • 实例类似整数数组，大小固定
  • c++代码在V8堆外分配物理内存

①初始化

  • Buffer.alloc(size[, fill[, encoding]]);//创建一个大小为size字节的Buffer
1
const buf = Buffer.alloc(5, 'a');
2
console.log(buf);
3
// 输出: <Buffer 61 61 61 61 61>
  • Buffer.allocUnsafe(size);//创建一个大小为size字节的Buffer,Buffer的内容是未知的
1
const buf = Buffer.allocUnsafe(10);
2
console.log(buf);
3
// 输出: <Buffer a0 8b 28 3f 01 00 00 00 50 32>
4
// (输出的内容是内存的旧数据，每次都不同)
  • Buffer.from(array);//使用字节数组array创建Buffer
1
// 创建一个包含字符串 'buffer' 的 UTF-8 字节的 Buffer。
2
const buf = Buffer.from([0x62, 0x75, 0x66, 0x66, 0x65, 0x72]);
  • Buffer.from(string[, encoding]);//创建一个包含string的Buffer
1
const buf1 = Buffer.from('this is a tést');
2
const buf2 = Buffer.from('7468697320697320612074c3a97374', 'hex');
3
console.log(buf1.toString());
4
// 输出: this is a tést
5
console.log(buf2.toString());
6
// 输出: this is a tést
7
console.log(buf1.toString('ascii'));
8
// 输出: this is a tC)st

②类

  • Buffer.byteLength(string[, encoding]);//返回字符串的实际字节长度
1
const str = '\u00bd + \u00bc = \u00be';
2
console.log(`${str}: ${str.length} 个字符,` +`${Buffer.byteLength(str, 'utf8')} 个字节`);
3
// 输出: ½ + ¼ = ¾: 9 个字符, 12 个字节
  • Buffer.concat(list[, totalLength]);//返回一个合并了list中所有Buffer的新Buffer
1
// 用含有三个 `Buffer` 的数组创建一个单一的 `Buffer`。
2
const buf1 = Buffer.alloc(10);
3
const buf2 = Buffer.alloc(14);
4
const totalLength = buf1.length + buf2.length;
5
console.log(totalLength);
6
// 输出: 24
7
const bufA = Buffer.concat([buf1, buf2], totalLength);
8
console.log(bufA);
9
// 输出: <Buffer 00 00 00 00 ...>
10
console.log(bufA.length);
11
// 输出: 24
  • Buffer.isBuffer(obj);//如果obj是一个Buffer，则返回true，否则返回false

③实例
const buf = Buffer.from(‘This is a test!’);

  • buf.length;//回内存中分配给buf的字节数
1
const buf = Buffer.alloc(1234);
2
console.log(buf.length);
3
// 输出: 1234
  • buf.toString([encoding[, start[, end]]]);//根据encoding指定的字符编码将buf解码成字符串
1
const buf = Buffer.from('tést');
2
console.log(buf.toString('hex'));
3
// 输出: 74c3a97374
4
console.log(buf.toString('utf8', 0, 3));
5
// 输出: té
  • buf.fill(value[, offset[, end]][, encoding]);//用指定的value填充buf
1
// 用 ASCII 字符 'h' 填充 `Buffer`。
2
const b = Buffer.allocUnsafe(50).fill('h');
3
console.log(b.toString());
4
// 输出: hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
  • buf.equals(otherBuffer);//如果buf与otherBuffer具有完全相同的字节，则返回true，否则返回 false
1
const buf1 = Buffer.from('ABC');
2
const buf2 = Buffer.from('414243', 'hex');
3
const buf3 = Buffer.from('ABCD');
4
console.log(buf1.equals(buf2));
5
// 输出: true
6
console.log(buf1.equals(buf3));
7
// 输出: false
  • buf.indexOf(value[, byteOffset][, encoding]);//返回buf中首次出现value的索引，如果buf没包含value则返回-1
1
const buf = Buffer.from('this is a buffer');
2
console.log(buf.indexOf('this'));
3
// 输出: 0
4
console.log(buf.indexOf('is'));
5
// 输出: 2
  • buf.copy(target[, targetStart[, sourceStart[, sourceEnd]]]);//拷贝buf中某个区域的数据到target中的某个区域，即使target的内存区域与buf的重叠
1
// 创建两个 `Buffer`。
2
const buf1 = Buffer.allocUnsafe(26);
3
const buf2 = Buffer.allocUnsafe(26).fill('!');
4
for (let i = 0; i < 26; i++) {
5
  // 97 是 'a' 的十进制 ASCII 值。
6
  buf1[i] = i + 97;
7
}
8
// 拷贝 `buf1` 中第 16 至 19 字节偏移量的数据到 `buf2` 第 8 字节偏移量开始。
9
buf1.copy(buf2, 8, 16, 20);
10
console.log(buf2.toString('ascii', 0, 25));
11
// 输出: !!!!!!!!qrst!!!!!!!!!!!!!

④字符串解码器
string_decoder模块提供了一个 API，用于把Buffer对象解码成字符串

1
const { StringDecoder } = require('string_decoder');
2
const decoder = new StringDecoder('utf8');
3
const cent = Buffer.from([0xC2, 0xA2]);
4
console.log(decoder.write(cent));

三.events事件

const EventEmitter = require(‘events’);//所有能触发时间的对象都是EventEmitter类的实例

  • emitter.on(eventName, listener);//添加listener函数到名为eventName的事件的监听器数组的末尾，注册监听器
1
const myEE = new EventEmitter();
2
myEE.on('foo', () => console.log('a'));
3
myEE.prependListener('foo', () => console.log('b'));
4
myEE.emit('foo');
5
// b
6
// a
  • emitter.emit(eventName[, …args]);//按照监听器注册的顺序，同步地调用每个注册到名为 eventName的事件的监听器，并传入提供的参数，触发事件
  • emitter.once(eventName, listener);//添加单次监听器listener到名为eventName的事件
  • emitter.removeListener(eventName, listener);//从名为eventName的事件的监听器数组中移除指定的listener
  • emitter.removeAllListeners([eventName]);//移除全部监听器或指定的eventName事件的监听器

四.fs文件系统

const fs = require(‘fs’);
①读

  • fs.readFile(path[, options], callback);//异步地读取文件的内容
    1
    fs.readFile('/etc/passwd', 'utf8', callback);
    2
    fs.readFile('/etc/passwd', (err, data) => {
    3
      if (err) throw err;
    4
      console.log(data);
    5
    });
  • fs.readFileSync(path[, options]);//同步返回文件的内容，同步比异步快，但是会阻塞

②写

  • fs.writeFile(file, data[, options], callback);//异步地将数据写入文件，如果文件已存在，则覆盖文件
    1
    fs.writeFile('文件.txt', '内容', 'utf8', callback);
    2
    const data = new Uint8Array(Buffer.from('Node.js中文网'));
    3
    fs.writeFile('文件.txt', data, (err) => {
    4
      if (err) throw err;
    5
      console.log('文件已保存');
    6
    });

③状态

  • fs.stat(path[, options], callback);//异步查看文件的属性
    1
    fs.stat('文件路径', (err, stats) => {
    2
      if (err) throw err;
    3
      console.log(stats.isFile( ));//文件
    4
      console.log(stats.isDirectory( ));//文件夹
    5
      console.log(stats);//状态
    6
    });

④重命名

  • fs.rename(oldPath, newPath, callback);//异步地把文件oldPath重命名为newPath
    1
    fs.rename('旧文件.txt', '新文件.txt', (err) => {
    2
      if (err) throw err;
    3
      console.log('已完成重命名');
    4
    });

⑤删除

  • fs.unlink(path, callback);//异步地移除一个文件或符号链接
    1
    // 假设 'path/file.txt' 是一个普通文件。
    2
    fs.unlink('path/file.txt', (err) => {
    3
      if (err) throw err;
    4
      console.log('文件已删除');
    5
    });
  • fs.readdir(path[, options], callback);//异步读取目录（文件夹）的内容
  • fs.mkdir(path[, options], callback);//异步地创建目录
    1
    // 创建 /tmp/a/apple 目录，不管 `/tmp` 和 /tmp/a 目录是否存在。
    2
    fs.mkdir('/tmp/a/apple', { recursive: true }, (err) => {
    3
      if (err) throw err;
    4
    });
  • fs.rmdir(path, callback);//异步地删除目录
  • fs.watch(filename[, options][, listener]);//监视filename的变化，filename可以是一个文件或一个目录

⑥流

有向传输数据

const rs = fs.creatReadStream(‘路径’);

  • rs.pipe(process.stout);

const ws = fs.creatWriteStream(‘路径’);

  • ws.write(‘字符串’)；
  • ws.end( );

⑦解决回调地狱

异步回调里有回调，回调里又有回调

1
const util = require('util');
2
const fs = require('fs');
3
4
const stat = util.promisify(fs.stat);
5
stat('.').then((stats) => {
6
  // Do something with `stats`
7
}).catch((error) => {
8
  // Handle the error.
9
});
1
const util = require('util');
2
const fs = require('fs');
3
4
const stat = util.promisify(fs.stat);
5
6
async function callStat() {
7
  const stats = await stat('.');
8
  console.log(`This directory is owned by ${stats.uid}`);
9
}

展开全文 >>

NodeJS:(一)基础

一.特性

①非阻塞I/O，事件驱动，单线程

  • 非阻塞I/O：进程不等I/O完成（阻塞是等I/O完成后才进行下一步）
  • 事件驱动：异步操作结束后通知

②优点

  • 前端职责范围变大，统一开发体验
  • 处理高并发（单位时间访问量增大），I/O密集（文件操作、网络操作、数据库）场景优势明显

③常用场景

  • Web Server
  • 本地代码构建
  • 实用工具开发

二.环境

①CommonJS（模块管理规范）

  • 每一个文件是一个模块，有自己的作用域
  • 块内module变量代表块本身
  • module.exports属性代表块对外接口

②global（全局对象）

  • CommonJS
  • Buffer、console、process
  • timerprocess.nextTick();setTimeout();setImmediate();

展开全文 >>

ES6语法重点1

一. let和const

①let声明的变量只在它的块作用域有效（{ }括起来）
②let不能重复声明同一变量
③const声明的常量不能改（但对象可以加属性）
④const也有块作用域概念
⑤const声明时必须赋值

二. 解构赋值

左右一 一对应赋值，主要是数组和对象两种
①数组：
若解构赋值左右没配对上则为undefined；

1
{
2
  let a,b,c,rest;
3
  [a,b,c=3]=[1,2];//可以用默认值 
4
  console.log(a,b,c);//1 2 3
5
}

使用场景：
变量交换 [a,b] = [b,a];

1
{
2
  let a=1;
3
  let b=2;
4
  [a,b]=[b,a];
5
  console.log(a,b);//2 1
6
}

展开全文 >>

ES6语法重点2

十一.Proxy和Reflect

Proxy保护对象不被外界访问；Object方法移植到Reflect
①Proxy：原始对象（供应商）通过Proxy（代理商）生成新对象（映射原对象），用户访问的是新对象，对新对象操作会通过Proxy传回原对象，原对象对用户不可见。

1
{
2
  let obj={
3
    time:'2017-03-11',
4
    name:'net',
5
    _r:123
6
  };
7
  let monitor=new Proxy(obj,{
8
    // 拦截对象属性的读取
9
    get(target,key){
10
      return target[key].replace('2017','2018')
11
    },
12
    // 拦截对象设置属性
13
    set(target,key,value){
14
      if(key==='name'){
15
        return target[key]=value;
16
      }else{
17
        return target[key];
18
      }
19
    },
20
    // 拦截key in object操作
21
    has(target,key){
22
      if(key==='name'){
23
        return target[key]
24
      }else{
25
        return false;
26
      }
27
    },
28
    // 拦截delete
29
    deleteProperty(target,key){
30
      if(key.indexOf('_')>-1){
31
        delete target[key];
32
        return true;
33
      }else{
34
        return target[key]
35
      }
36
    },
37
    // 拦截Object.keys,Object.getOwnPropertySymbols,Object.getOwnPropertyNames
38
    ownKeys(target){
39
      return Object.keys(target).filter(item=>item!='time')
40
    }
41
  });
42
  console.log('get',monitor.time);//get 2018-03-11
43
  monitor.time='2018';
44
  monitor.name='mu';
45
  console.log('set',monitor.time,monitor);//set 2018-03-11 Proxy{time: "2017-03-11", name: "mu", _r: 123}
46
  console.log('has','name' in monitor,'time' in monitor);//has true false  time被隐藏了
47
  console.log('ownKeys',Object.keys(monitor));//ownKeys ["name", "_r"] time被隐藏了
48
  delete monitor._r;
49
  console.log('delete',monitor);//Proxy{time: "2017-03-11", name: "mu"}
50
}

②Reflect直接用

1
{
2
  let obj={
3
    time:'2018-11-27',
4
    name:'net',
5
    _r:123
6
  };
7
  console.log(Reflect.get(obj,'time'));//2018-11-27
8
  Reflect.set(obj,'name','muu');
9
  console.log(obj);//{time: "2018-11-27", name: "muu", _r: 123}
10
  console.log(Reflect.has(obj,'name'));//ture
11
}

十二.class

基本语法 类的继承 静态方法 静态属性 getter setter

1
{
2
  // 基本定义和生成实例
3
  class Parent{
4
    constructor(name='muu'){
5
      this.name=name;
6
    }
7
  }
8
  let v_parent = new Parent('v');
9
  console.log('构造函数和实例',v_parent);//构造函数和实例 Parent {name: "v"}
10
}
11
{
12
  // 继承
13
  class Parent{
14
    constructor(name='muu'){
15
      this.name=name;
16
    }
17
  }
18
  class Child extends Parent{
19
20
  }
21
  console.log('继承',new Child());//继承 Child {name: "muu"}
22
}
23
{
24
  // 继承传递参数
25
  class Parent{
26
    constructor(name='muu'){
27
      this.name=name;
28
    }
29
  }
30
  class Child extends Parent{
31
    constructor(name='child'){
32
      super(name);//一定要放在构造函数第一行
33
      this.type='child';
34
    }
35
  }
36
  console.log('继承传递参数',new Child('hello'));//继承传递参数 Child {name: "hello", type: "child"}
37
}
38
{
39
  // getter,setter
40
  class Parent{
41
    constructor(name='muu'){
42
      this.name=name;
43
    }
44
    get longName(){
45
      return 'mu'+this.name
46
    }
47
    set longName(value){
48
      this.name=value;
49
    }
50
  }
51
  let v=new Parent();
52
  console.log('getter',v.longName);//getter mumuu
53
  v.longName='hello';
54
  console.log('setter',v.longName);//setter muhello
55
}
56
{
57
  // 静态方法
58
  class Parent{
59
    constructor(name='muu'){
60
      this.name=name;
61
    }
62
    static tell(){
63
      console.log('tell');
64
    }
65
  }
66
  Parent.tell();//tell   通过类调用而不是通过实例调用
67
}
68
{
69
  // 静态属性
70
  class Parent{
71
    constructor(name='muu'){
72
      this.name=name;
73
    }
74
    static tell(){
75
      console.log('tell');
76
    }
77
  }
78
  Parent.type='test';
79
  console.log('静态属性',Parent.type);//静态属性 test
80
}

十三.Promise

异步编程的解决方法，a执行完再执行b
优点：Promise可以异步执行多个，code简洁

1
{
2
  // 传统回调基本定义  打印执行，1秒后打印timeout1
3
  let ajax=function(callback){
4
    console.log('执行');
5
    setTimeout(function () {
6
      callback&&callback.call()
7
    }, 1000);
8
  };
9
  ajax(function(){
10
    console.log('timeout1');
11
  })
12
}
13
{
14
  //打印执行2，1秒后打印promise timeout2
15
  let ajax=function(){
16
    console.log('执行2');
17
    return new Promise(function(resolve,reject){
18
      setTimeout(function () {
19
        resolve()
20
      }, 1000);
21
    })
22
  };
23
  ajax().then(function(){//ajax()是一个promise实例，可有很多then方法
24
    console.log('promise','timeout2');
25
  })
26
}
27
{
28
  let ajax=function(num){
29
    console.log('执行3');
30
    return new Promise(function(resolve,reject){
31
      if(num>5){
32
        resolve()
33
      }else{
34
        throw new Error('出错了')
35
      }
36
    })
37
  }
38
  ajax(6).then(function(){//执行3  log 6
39
    console.log('log',6);
40
  }).catch(function(err){
41
    console.log('catch',err);
42
  });
43
  ajax(3).then(function(){//执行3  catch Error: 出错了
44
    console.log('log',3);
45
  }).catch(function(err){
46
    console.log('catch',err);
47
  });
48
}

十四.Iterator和for…of循环

①Iterator接口：用一种办法读取不同的数据集合（数组、Object、Map、Set）

1
{
2
  let arr=['hello','world'];
3
  let map=arr[Symbol.iterator]();
4
  console.log(map.next());//{value: "hello", done: false}
5
  console.log(map.next());//{value: "world", done: false}
6
  console.log(map.next());//{value: undefined, done: true}
7
}
8
{
9
  //自定义读取
10
  let obj={
11
    start:[1,3,2],
12
    end:[7,9,8],
13
    [Symbol.iterator](){
14
      let self=this;
15
      let index=0;
16
      let arr=self.start.concat(self.end);
17
      let len=arr.length;
18
      return {//返回一个有next方法的对象　　　　 next(){
19
          if(index<len){
20
            return {
21
              value:arr[index++],
22
              done:false
23
            }
24
          }else{
25
            return {
26
              value:arr[index++],
27
              done:true
28
            }
29
          }
30
        }
31
      }
32
    }
33
  }
34
  for(let key of obj){
35
    console.log(key);//1 3 2 7 9 8
36
  }
37
}

②for…of不断调用Iterator

1
{
2
  //for...of 用法
3
  let arr=['hello','world'];
4
  for(let value of arr){
5
    console.log(value);//hello  world
6
  }
7
}

十五.Generator

异步编程，进入函数停在第一个yield前，执行一个next()方法，执行一个yield，直到没有可往下执行的yield或者return则返回done:true

1
{
2
  // genertaor基本定义
3
  let tell = function* (){
4
    yield 'a';
5
    yield 'b';
6
    return 'c'
7
  };
8
  let k = tell();
9
  console.log(k.next());//{value: "a", done: false}
10
  console.log(k.next());//{value: "b", done: false}
11
  console.log(k.next());//{value: "c", done: true}
12
  console.log(k.next());//{value: undefined, done: true}
13
}
14
{
15
  //用genertaor部署，不手写Iterator(object对象不能用for...of除非有Iterator接口)
16
  let obj={};
17
  obj[Symbol.iterator]=function* (){
18
    yield 1;
19
    yield 2;
20
    yield 3;
21
  }
22
  for(let value of obj){
23
    console.log(value);//1 2 3
24
  }
25
}
26
{
27
  //状态机，可以不断查找状态
28
  let state = function* (){
29
    while(1){
30
      yield 'A';
31
      yield 'B';
32
      yield 'C';
33
    }
34
  }
35
  let status=state();
36
  console.log(status.next());//{value: "A", done: false}
37
  console.log(status.next());//{value: "B", done: false}
38
  console.log(status.next());//{value: "C", done: false}
39
  console.log(status.next());//{value: "A", done: false}
40
  console.log(status.next());//{value: "B", done: false}
41
}

十六.Decorator

修饰器：函数修改类的行为

1
{
2
  //只读
3
  let readonly=function(target,name,descriptor){
4
    descriptor.writable=false;
5
    return descriptor
6
  };
7
  class Test{
8
    @readonly
9
    time(){
10
      return '2018-11-27'
11
    }
12
  }
13
  let test=new Test();
14
  console.log(test.time());//2018-11-27
15
  test.time=function(){
16
     console.log('reset time');
17
  };
18
  console.log(test.time());//2018-11-27
19
}
20
{
21
  let typename=function(target,name,descriptor){
22
    target.myname='hello';
23
  }
24
  @typename//可以放class上面
25
  class Test{
26
27
  }
28
  console.log('类修饰符',Test.myname);//类修饰符 hello
29
  //可引入第三方库修饰器的js库，不用自己写，直接@就可以：core-decorators; npm install core-decorators
30
}

十七.模块化

1
export let A=123;
2
export function test(){
3
  console.log('test');
4
}
5
export class Hello{
6
  test(){
7
    console.log('class');
8
  }
9
}
10
import {A,test,Hello} from './xx';//{}中取什么写什么,./xx是上面内容的路径
11
import *as lesson1 from './xx';//取所有内容放到对象lesson1中
12
let A=123;
13
let test=function(){
14
  console.log('test');
15
}
16
class Hello{
17
  test(){
18
    console.log('class');
19
  }
20
}
21
export default {A,test,Hello}//导出,但是我不指定名字,路径为./xxx
22
import lesson from './xxx';//我随便叫lesson，它接收了上面的内容
23
console.log(lesson.A);//123

展开全文 >>

jquery入门

一.基础

  • 入口函数(文档树加载完成就开始执行)：$(document).ready(function() {})和$(function() {})
  • $就是一个函数:$();$ === jQuery参数不一样，功能不一样
  • jQuery对象与DOM对象之间的转换，jQuery对象其实就是DOM对象的包装集
    • jquery对象转DOM对象：var $li = $("li");通过$li[0]或$li.get(0)获取
    • DOM对象转jquery对象：var $obj = $(domObj);$(document).ready(function(){});就是DOM对象转jQuery对象

二.选择器

  • 基本：
    • $("#id")ID
    • $(".class")类
    • $("div")标签
    • $("div,p,li")并集
    • $("div.redClass")交集

展开全文 >>

JS预解析

一.预解析

JS代码执行由浏览器中的JS解析器来执行。JS解析器执行JS代码的两个过程是预解析和代码执行。

  • 第一步：变量提升，把变量的声明提升到当前作用域的最上面，不会提升变量赋值
  • 第二步：函数提升，把函数的声明提升到当前作用域的最上面，不会提升函数调用
  • 先提升var，再提升function
    1
    /*例一:变量提升*/
    2
    console.log(num);
    3
    var num = 5;
    4
    //预解析
    5
    var num;
    6
    console.log(num);
    7
    num = 5;
    8
    /*例二:函数提升*/
    9
    f1();
    10
    function f1() {
    11
      console.log('hello');
    12
    }
    13
    //预解析
    14
    function f1() {
    15
      console.log('hello');
    16
    }
    17
    f1();

展开全文 >>

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

办法总比困难多