学习笔记之-----

2024-02-21 18:35:22

文章目录

Babel
常用模块补充
包管理器
npm依赖安装方式
cnpm依赖安装方式
yarn依赖安装方式
变量声明（let）
常量声明(const)
解构
模板字符串（``）
扩展运算符（...)
函数功能新增
对象简写

Babel

Babel是一个广泛使用的ES6转换器，使用babel可以将ES6代码转为ES5代码，从而在老版本的浏览器执行。这意味着，可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。
使用：

初始化项目

npm init

安装babel-cli工具

npm i -g babel-cli

安装转化规则(句法之间的转换，并不包含ES6的新特性)
a. babel-preset-es2015/2016/2017/2018…
b. babel-preset-env //永不过时的规则

npm i -D babel-preset-env

c. babel-preset-latest //最新的规则
4. 配置.babelrc文件

{
  "presets": [
    "es2015"
  ]
}

进行转换
a. 转化文件 babel test.js -o new_test.js
b. 转化目录 babel js -d dist
关于垫片(babel-polyfill)
Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
举例来说，ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行，可以使用core-js和regenerator-runtime(后者提供generator函数的转码)，为当前环境提供一个垫片。

import 'core-js'; 
import 'regenerator-runtime/runtime'; 
require('core-js');
require('regenerator-runtime/runtime);
//babel也有自带的垫片
require("babel-polyfill");//commonjs
import "babel-polyfill";//es6
module.exports = {
　　entry: ["babel-polyfill", "./app/js"]
};//webpake

关于打包(browserify)

npx browserify dist/index.js -o dist/app.js

常用模块补充

//path
path.basename()	//该方法返回一个参数路径的最后一部分
path.dirname() 	//该方法返回一个 path 的目录名
path.extname() 	//该方法返回 path 的扩展名
//qs
qs.stringify()
//url
url.parse() 	//将一个url地址转换为一个解析对象

包管理器

NPM 是 Node.js 标准的软件包管理器。在 2017 年 1 月时，npm 仓库中就已有超过 350000 个软件包，这使其成为世界上最大的单一语言代码仓库，并且可以确定几乎有可用于一切的软件包。它起初是作为下载和管理 Node.js 包依赖的方式，但其现在也已成为前端 JavaScript 中使用的工具。
cnpm 是 npm 的一个替代选择，yarn 也是 npm 的一个替代选择。
几种方案：
方案一：修改npm仓库地址为淘宝仓库地址

# 修改npm下载的仓库地址
$ npm config set registry http://registry.npm.taobao.org/
# 改回原来的地址
$ npm config set registry https://registry.npmjs.org/
# 查看是否修改成功
$ npm config get registry

方案二：安装cnpm

 $ npm install -g cnpm --registry=https://registry.npm.taobao.org

方案三：安装yarn

$ npm install -g yarn --registry=https://registry.npm.taobao.org

npm依赖安装方式

//本地安装  安装到当前文件夹
$ npm install <module_name>
//带-g的为全局安装 全局使用（所有项目通用）一般为工具
$ npm install -g <module_name>
$ npm install --global <module_name>
//生产依赖  需要发布到生产环境的.
$ npm install -S <module_name>
$ npm install --save <module_name>
//开发依赖 里面的插件只用于开发环境，不用于生产环境.
$ npm install -D <module_name>
$ npm install --save-dev <module_name>
//更新依赖
$ npm update <module_name>
//卸载依赖
$ npm uninstall  <module_name>

cnpm依赖安装方式

//与npm的使用方式基本一致，只是前面的关键词为cnpm
$ cnpm install -g <module_name>
$ cnpm init

yarn依赖安装方式

//语法有变化
$ yarn init
//生产依赖
$ yarn add <module_name> 
//开发依赖
$ yarn add <module_name> --dev
//更新依赖
$ yarn update <module_name>
//删除依赖
$ yarn remove <module_name>

变量声明（let）

● 变量不能重复申明
● 块级作用域
● 不存在变量提升
● 不影响作用域链

常量声明(const)

● 拥有变量的特性
● 必须赋值
● 不能被修改
● 常量名大写
● 保存引用数据类型时，可以操作数据

解构

● 数组解构
● 对象解构
● 字符串解构
● 数值解构
● 默认值

模板字符串（``）

//可以为多行
var str = `
001|1.1.1.1:9000|zhangsan|0
002|1.1.1.1:9000|zhangsan|1`
//可以放置变量
var id=001
var str = `
${id}|1.1.1.1:9000|zhangsan|0
002|1.1.1.1:9000|zhangsan|1`

扩展运算符（…)

可以将元素进行扩展或者聚合，一般情况下为扩展。
● 数组运用
● 字符串运用
● 对象运用

函数功能新增

● 参数解构
● rest 参数
● 箭头函数()=>{}
○ 没有this、super、arguments
○ 不能通过new关键字调用
○ 没有原型prototype
○ 不可以改变this指向
○ 不支持重复的命名参数

function getname(){console.log(111)}
var f1 = ()=>{this.getname()}
var f2 = function(){this.getname()}
var obj={
    getname(){
        console.log(222);
    }
}
f1();
f2();
f1.call(obj);
f2.call(obj);

对象简写

var name = "xiaoming"
var obj = {
    name,//name:name
    function test(){}
}

码农公寓