标签: learn

js 系列

es6 系列

nodejs 系列

ts 系列

老马啸西风2018年4月23日小于 1 分钟

JS 学习教程-02-js chat

详细介绍一下 js

JavaScript（简称“JS”）是一种高级的、解释型的编程语言。

它是一种基于原型、多范式的动态脚本语言，广泛应用于网页开发中，用于增强网页的交互性，实现客户端的页面行为。

JavaScript 也是 JSON 的基础，并且能够用于游戏开发、桌面应用程序和移动应用程序。

历史

JavaScript 最初由 Netscape 公司的 Brendan Eich 在 1995 年开发。最初被称为 Mocha，后来改为 LiveScript，最终定名为 JavaScript。尽管 JavaScript 和 Java 在名称上有相似之处，但它们是两种完全不同的语言，具有不同的编程范式和用途。

老马啸西风2018年4月23日大约 7 分钟

JS 学习教程-03-js es6 chat

详细介绍一下 js 的 ES6

ECMAScript 6（简称 ES6）是 JavaScript 语言的 2015 年标准化版本，它引入了许多新特性，旨在使 JavaScript 编程更加模块化、可读和功能丰富。

以下是 ES6 中一些主要的新增特性：

let 和 const 关键字：
- let：用于声明块级作用域的局部变量，不存在变量提升。
- const：用于声明常量，其值在设置后不能更改，也具有块级作用域。
箭头函数：
简化函数的书写，没有自己的this，arguments，不适用于需要动态this的场景。
```
const add = (a, b) => a + b;
```
模板字符串：
使用反引号(`)定义字符串，允许字符串跨越多行，并嵌入变量。
```
const name = "World";
console.log(`Hello, ${name}!`);
```

默认参数：
在函数定义时为参数设置默认值。

function greet(name = "Guest") {
  console.log("Hello, " + name + "!");
}

解构赋值：
允许你从数组或对象中提取数据并赋值给新的变量。
```
const [a, b] = [1, 2];
const { name, age } = person;
```

模块：
ES6 引入了模块的概念，使用import和export关键字来导入和导出模块。

// math.js
export function add(x, y) {
  return x + y;
}

// main.js
import { add } from './math.js';
console.log(add(1, 2));

类：
使用class关键字来定义类，它提供了一种新的基于原型的继承方式。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  print() {
    console.log(`(${this.x}, ${this.y})`);
  }
}

Promise 和异步编程：
Promise对象用于异步计算，async/await提供了一种更简洁的异步编程方式。

async function fetchData() {
  try {
    let response = await fetch('url');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

生成器：
使用function*声明生成器函数，使用yield关键字控制函数的暂停和恢复。

function* idMaker() {
  let index = 0;
  while (true)
    yield index++;
}

const gen = idMaker();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1

集合和 Map：

Set：存储唯一值的集合。
Map：存储键值对，任何值（对象、函数、任何类型）都可以作为一个键。

let set = new Set([1, 2, 3, 5, 5]);
console.log(set.size); // 4

let map = new Map([["key1", "value1"], ["key2", "value2"]]);
map.set("key3", "value3");
console.log(map.get("key2")); // "value2"

Proxy 和 Reflect：
- Proxy：用于创建一个对象的代理，从而在访问对象前进行拦截和自定义操作。
- Reflect：提供对原生方法的访问，例如Reflect.get()、Reflect.set()等。

Symbol：
一种新的原始数据类型，用于创建一个唯一的标识符。

let mySymbol = Symbol('mySymbol');
let obj = {
  [mySymbol]: 'This is a unique key'
};
console.log(obj[mySymbol]); // "This is a unique key"

二进制和八进制字面量：
允许使用前缀0b（二进制）和0o（八进制）来表示数字。
```
let binary = 0b1101;
let octal = 0o755;
```
扩展运算符：
...用于数组的展开，也可用于函数调用中的参数展开或对象字面量的属性值展开。
```
let pieces = [1, 2, 3];
let array = [0, ...pieces, 4];
console.log(array); // [0, 1, 2, 3, 4]
```
for...of 循环：
允许你遍历数组、字符串或任何可迭代对象。
```
for (let value of ["a", "b", "c"]) {
  console.log(value);
}
```

老马啸西风2018年4月23日大约 7 分钟

JS 学习教程-03-js typescript ts chat

详细介绍一下 typescript

TypeScript 是一种由微软开发的开源编程语言。它是 JavaScript 的一个超集，这意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。TypeScript 的目标是为 JavaScript 开发者提供静态类型检查的能力，以便在开发过程中及早发现错误，并提高代码的可维护性。以下是 TypeScript 的一些关键特性：

静态类型：
TypeScript 最显著的特性是支持静态类型。开发者可以为变量、函数参数和返回值指定类型，这有助于在编译时而不是运行时捕捉类型错误。
```
let message: string = "Hello, World!";
```
类型推断：
当没有明确指定类型时，TypeScript 编译器会尝试推断变量的类型。
```
let count = 0;  // TypeScript 推断 'count' 是 number 类型
```

接口：
接口是一种强大的方式，用于定义对象的结构，它们主要用于类型检查和确保一个对象只有特定的结构。

interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  console.log(`Hello, ${person.name}! You are ${person.age} years old.`);
}

类：
TypeScript 支持基于类的面向对象编程，包括类的继承和实现接口。

class Point {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

泛型：
泛型允许开发者定义函数和类时使用通用的、可重用的代码，而不必指定具体的类型。

function identity(arg: T): T {
  return arg;
}

let output = identity("myString");  // 类型为 string
let output2 = identity(42);          // 类型为 number

命名空间：
命名空间用于组织代码和避免命名冲突。

namespace Animals {
  export class Zebra { }
}

let zebra = new Animals.Zebra();

模块：
TypeScript 支持 ES6 风格的模块，允许开发者将代码分割成独立的文件，并在需要时导入。

// myModule.ts
export function sayHello(name: string) {
  return `Hello, ${name}!`;
}

// main.ts
import { sayHello } from "./myModule";
console.log(sayHello("TypeScript"));

装饰器：
装饰器是一种特殊的方式来添加类或类的成员的元数据。

function sealed(target: any) {
  target.sealed = true;
}

@sealed
class Person {
  // ...
}

高级类型：
TypeScript 支持多种高级类型，如联合类型、交叉类型、类型别名、类型断言等。
```
type StringOrNumber = string | number;

function printId(id: StringOrNumber) {
  console.log(id);
}
```
工具链：
TypeScript 提供了一个命令行工具 tsc 来编译 TypeScript 代码到 JavaScript。此外，还有许多第三方工具和集成开发环境（IDE）支持 TypeScript，提供了类型检查、自动补全、重构等功能。

老马啸西风2018年4月23日大约 12 分钟

JS 学习教程-05-js JSX 是什么？

详细介绍一下 jsx

JSX 是一种 JavaScript 的语法扩展，它允许你在 JavaScript 代码中写类似 HTML 的标记。

JSX 被广泛应用于 React 等现代前端框架中，它可以让你以声明式的方式编写 UI 组件。

以下是 JSX 的一些关键点：

XML 风格的标签：JSX 类似于 HTML，但它不是 HTML。JSX 标签实际上是 JavaScript 表达式，它们会被编译成对应的 JavaScript 对象。
React 中的组件：在 React 中，JSX 用于定义组件的 UI。你可以在 JSX 中使用 JavaScript 表达式，包括变量、函数调用和逻辑。
组件渲染：通过 JSX，你可以很容易地渲染组件，包括传入 props 和状态。
表达式：JSX 中的花括号 {} 用于插入 JavaScript 表达式，这允许你在 UI 中嵌入动态数据。
组件样式：JSX 支持 CSS 样式，你可以在 JSX 中直接使用 style 属性来定义内联样式。
事件处理：在 JSX 中，事件处理与 HTML 类似，但是不使用引号。例如，onClick 而不是 onclick。
转译：JSX 本身不是 JavaScript，它需要通过像 Babel 这样的转译器转换成有效的 JavaScript 代码。
灵活性：JSX 提供了一种灵活的方式来构建复杂的 UI，你可以在 JSX 中使用条件渲染、列表渲染等技术。
可读性：对于许多开发者来说，JSX 提供了一种更直观和可读的方式来编写 UI 逻辑。
社区和工具支持：JSX 得到了广泛的社区支持，并且有许多工具和插件可以与 JSX 一起使用。

老马啸西风2018年4月23日大约 4 分钟

mockjs 生成随机数据，拦截 Ajax 请求

模拟请求与模拟数据

Mock.js 是一个模拟数据生成器，帮助前端开发与后端开发分离进行，减少编写自动化测试时的单调性。

老马啸西风2018年4月23日大约 7 分钟