JavaScript

JavScript 是什么

HTML,CSS 控制网页的内容和样式,JavaScript 控制交互。学习 JavaScript 过程中会涉及它的基础知识,如变量、数组、对象、循环和函数。

在掌握基础知识后,你可以应用它们,如创造操作字符串、因式分解,甚至计算国际空间站的轨道等事情的算法。

在这过程中,我能学得到两种编程范式:面向对象编程(OOP)和函数式编程(FP)。

JavaScript 是 Web 端的核心技术之一,与 HTML 和 CSS 一起,被所有现代浏览器支持。

JavaScript Basics

学习路径

  1. freeCodeCamp’s JavaScript Algorithms and Data Structures
  2. https://javascript.info/ or MDN JavaScript Guide
  3. 复习 HTML,CSS:HTML-W3SchoolsCSS-Tricks
  4. 学习 DOM 和 DOM 操作:MDN
  5. 学习写应用:JavaScript 30

注:在学习框架之前,打好基础

ref:

Great Posts about JS

What I learnt

Use Same Between File Name And Variable

文件的名称要和它所匹配的变量相同,否则代码会出问题,不会报错,但生成的页面有问题 source

Package.json License Should Be A Valid SPDX License Expression

CC BY-NC-SA 4.0 to CC-BY-NC-SA-4.0

source

String Does Not Match The Pattern Of

String does not match the pattern of "^(?:@[a-z0-9-*~][a-z0-9-*._~]*/)?[a-z0-9-~][a-z0-9-._~]*$".

Some rules:

  • The name must be less than or equal to 214 characters. This includes the scope for scoped packages.
  • The names of scoped packages can begin with a dot or an underscore. This is not permitted without a scope.
  • New packages must not have uppercase letters in the name.
  • The name ends up being part of a URL, an argument on the command line, and a folder name. Therefore, the name can’t contain any non-URL-safe characters.

Some tips:

  • Don’t use the same name as a core Node module.
  • Don’t put “js” or “node” in the name. It’s assumed that it’s js, since you’re writing a package.json file, and you can specify the engine using the “engines” field. (See below.)
  • The name will probably be passed as an argument to require(), so it should be something short, but also reasonably descriptive.
  • You may want to check the npm registry to see if there’s something by that name already, before you get too attached to it. https://www.npmjs.com/

source

Unmet Peer Dependency

When I install packages, something always shows like these:

warning " > @vue/[email protected]" has unmet peer dependency "[email protected]".
warning " > @vue/[email protected]" has unmet peer dependency "[email protected]^2.x".
warning " > [email protected]" has unmet peer dependency "[email protected]^4.0.0 || ^5.0.0".
warning " > [email protected]" has incorrect peer dependency "[email protected]^5.0.0".
warning "eslint-plugin-vue > [email protected]" has incorrect peer dependency "[email protected]^5.0.0".
warning " > [email protected]" has unmet peer dependency "[email protected]^4.36.0 || ^5.0.0".
warning " > [email protected]" has unmet peer dependency "[email protected]^2.x".
warning " > [email protected]" has unmet peer dependency "[email protected]^2.x".
$ npm ls                   
[email protected] folder path
├── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected] deduped
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │   └── [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected] deduped
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │   ├── [email protected]
│ │ │   └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ ├── [email protected] deduped
│ │ │ │ │ └── [email protected] deduped
│ │ │ │ ├── [email protected] deduped
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected] deduped
│ │ │ │ └── [email protected] deduped
│ │ │ ├─┬ [email protected]
│ │ │ │ └─┬ [email protected]
│ │ │ │   └─┬ [email protected]
│ │ │ │     └── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ └─┬ [email protected]
│ │   ├── @types/[email protected]
│ │   ├─┬ @types/[email protected]
│ │   │ ├── @types/[email protected]
│ │   │ ├── @types/[email protected] deduped
│ │   │ └─┬ @types/[email protected]
│ │   │   └─┬ [email protected]
│ │   │     ├── @types/[email protected] deduped
│ │   │     └─┬ [email protected]
│ │   │       └── @types/[email protected] deduped
│ │   ├── [email protected]
│ │   ├── [email protected]
│ │   ├── [email protected]
│ │   ├── [email protected]
│ │   ├─┬ [email protected]
│ │   │ ├── [email protected]
│ │   │ ├── [email protected]
│ │   │ ├── [email protected]
│ │   │ └─┬ [email protected]
│ │   │   └── [email protected] deduped
│ │   └── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │   └── [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected] deduped
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ └─┬ [email protected]
│ │   ├── [email protected]
│ │   ├── [email protected] deduped
│ │   └─┬ [email protected]
│ │     └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── @types/[email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ @babel/[email protected]
│ │ │ │ └─┬ @babel/[email protected]
│ │ │ │   ├── @babel/[email protected]
│ │ │ │   ├─┬ [email protected]
│ │ │ │   │ ├─┬ [email protected]
│ │ │ │   │ │ └─┬ [email protected]
│ │ │ │   │ │   └── [email protected]
│ │ │ │   │ ├── [email protected] deduped
│ │ │ │   │ └─┬ [email protected]
│ │ │ │   │   └── [email protected]
│ │ │ │   └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ └─┬ [email protected]
│ │ │   └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │   ├─┬ [email protected]
│ │ │   │ └── [email protected] deduped
│ │ │   └── [email protected] deduped
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected] deduped
│ │ ├── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ ansi-esc[email protected]
│ │ │ │ └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └─┬ [email protected]
│ │ │ │   ├── [email protected] deduped
│ │ │ │   └── [email protected] deduped
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected] deduped
│ │ │ │ ├── [email protected] deduped
│ │ │ │ └── [email protected] deduped
│ │ │ └─┬ [email protected]
│ │ │   ├── [email protected] deduped
│ │ │   ├── [email protected] deduped
│ │ │   └── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │   ├── [email protected]
│ │ │   └── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │   ├── [email protected] deduped
│ │   ├── [email protected] deduped
│ │   └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │   └─┬ [email protected]
│ │ │     └── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│   ├── [email protected]
│   ├── [email protected]
│   └── [email protected]
└── [email protected]

What’s the meaning of deduped?

Use Npx

如果有些包我们只会使用一次,或者只想尝试以下,不想安装到全局,也不想作为当前项目的依赖 可以使用 npx 的方式来执行

npx 是 npm 5.2+ 版本之后自带的工具,能够帮助我们更高效的执行 npm 软件仓库里的安装包

source

Used Packages

Install Node.js And NPM

Use n

curl -L https://raw.githubusercontent.com/tj/n/master/bin/n -o n
bash n lts

# make cache folder (if missing) and take ownership
sudo mkdir -p /usr/local/n
sudo chown -R $(whoami) /usr/local/n
# take ownership of Node.js install destination folders
sudo chown -R $(whoami) /usr/local/bin /usr/local/lib /usr/local/include /usr/local/share

Error: When I exec these commands, just node no npm

$ sudo bash n lts
  installing : node-v14.16.1
       mkdir : /usr/local/n/versions/node/14.16.1
       fetch : https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v14.16.1/node-v14.16.1-linux-x64.tar.xz
   installed : v14.16.1 (with npm 6.14.12)

Note: the node command changed location and the old location may be remembered in your current shell.
         old : /usr/bin/node
         new : /usr/local/bin/node
To reset the command location hash either start a new shell, or execute PATH="$PATH"

Use Official deb file

source

#Node.js v14.x
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo apt-get install gcc g++ make #to build native addons

nvm

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
$ vim ~/.zshrc

添加以下配置:
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

使用命令

$ nvm ls-remote # 列出所有支持的 Node.js 版本
$ nvm ls # 列出本地已安装的 Node.js 版本
$ nvm install 11.5.0 # 安装指定的 Node.js 版本
$ nvm alias default 11 # 设置默认使用的版本

nrm

使用 nrm (opens new window) 可以让我们来切换不同的 npm 源而不用单独安装 cnpm 之类的库

安装 nrm

$ npm install -g nrm

使用命令

$ nrm ls # 列出当前支持切换的源
$ nrm use taobao # 使用 taobao 的源作为默认的 npm 源

References:

  1. https://github.com/tj/n
  2. https://github.com/nvm-sh/nvm#installing-and-updating