前端学习杂记

大前端串讲

一、Node.js

• Node.js就是运行在服务端的JavaScript
• Node.js是一个时间驱动I/O服务器JavaScript环境，基于Google的V8引擎，V8引擎执行JavaScript的速度非常快，性能非常好

Node.js快速入门

浏览器的内核包括两个部分核心

• DOM渲染引擎
• JavaScript解析器（js引擎）
• js运行在浏览器内核中的js引擎内部

而Node.js是脱离浏览器环境运行的JavaScript程序，基于V8引擎

二、ES6入门

简介

ES6全称为ECMAScript，是JavaScript的规格，而JS是ES6的实现。

基本语法：

ES标准中不包含DOM和BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。

let与var的区别

1. let声明的变量由局部作用域，var生命的变量没有局部作用域
2. var可多次生命（类似覆盖），let只能声明一次
3. var会变量提升，let不会

const声明变量

const用于生命常量，并且在生命的时候必须初始化，否则会报错，在初始化后不可在修改它的值

解构赋值

//数组解构
let [a,b,c] = [1,2,3]

console.log(x,y,z) 

//对象结构
let {
      name , height } = user
console.log(name,age)

模板字符串

let name = 'zhangsan'
let info = 'Name is ${name}'

声明对象简写

属性值与属性名相同的时候，只写属性名就行

定义方法简写

const person = {
     
	HelloWorld(){
     
		....
	}
}

对象拓展运算符

//浅拷贝
let p = person
//深拷贝
let p2 = {
     ...person}

箭头函数

var f = (a,b) => a+b
或
var f2 = (a,b) =>{
     
	return a+b
}

三、NPM包管理器

简介

NPM即Node Package Manager，是Node.js包管理工具，相当于前端的Maven。

使用npm管理项目

npm init ---->输入相关信息生成文件

npm init -y ------>直接生成json

修改npm镜像

npm config set registry https://registry.npm.taobao.org

npm config list //查看信息

npm install

npm install jquery

npm install -D eslint

#全局安装
npm install -g webpack
npm install

其他命令

#更新包
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

四、Babel

简介

ES6的某些高级语法在浏览器环境甚至是node.js环境中无法执行。

Babel是一个广泛使用的转码器，可以将ES6代码转化为ES5代码。

安装

npm install -g babel-cli

Babel的使用

npm init -y

自定义脚本

1.改写package.json

{
	"scripts":{
		"build":"babel src\\example.js -o dist\\compiled.js"
	}
}

2.转码的时候，执行下面的命令

mkdir dist
npm run build

五、模块化

模块化规范

• CommonJS模块化规范
• ES6模块化规范

CommonJS规范

1. 创建"module"文件夹

2. 创建 mokuai-common-js/四则运算.js

   const sum = function(a,b){
          
       return a + b
   }
   const subtract = (a,b) => a-b
   .....
   

3. 导出模块中的成员

   //导出成员：
   module.exports={
          
   	sum,
   	subtract,
   	...
   }
   

4. 创建 mokuai-common-js/引入模块.js

   const m = require('./四则运算.js')
   

5. 运行程序

   node 引入模块.js
   

ES6模块化规范

ES6使用export和import来导出、导入模板

1. 创建mokuai-es6文件夹

2. 创建src/userApi.js文件，导出模块

   export function getList(){
          
   	console.log('获取数据列表')
   }
   export function save(){
          
   	console.log('保存数据')
   }
   

3. 创建src/userComponent.js文件，导入模块

   import{
          getList,save} from './userAPI.js'
   getList()
   save()
   

4. 初始化项目

   npm init -y

5. 配置.babelrc

   {
          
   	"persets":["es2015"],
   	"plugins":[]
   }
   

6. 安装转码器，在项目中安装

   npm install --save-dev babel-preset-se2015

7. 定义运行脚本，packag.json中增加"build"

   {
          
   	"scripts":{
          
   		"build":"babel src -d dist"
   	}
   }
   

8. 执行命令转码

   npm run build

9. 运行程序

   node dist/userComponent.js

ES6模块化写法2

1. 创建src/userApi2.js,导出模块

   export default{
          
   	getList(){
          
   		console.log('获取数据列表2')
   	},
   	save(){
          
   		console.log('保存数据')
   	}
   }
   

2. 创建src/userComponent2.js，导入模块

   import user from "./userApi2.js"
   user.getList()
   user.save()
   

3. 执行命令转码执行程序

   npm run build

4. 运行程序

   node dist/userComponent2.js

六、Webpack

什么是webpack

Webpack是一个前端资源加载/打包工具，将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源

将静态资源js.css.less转换成一个静态文件，减少页面的请求

WebPack安装

1、全局安装

npm install -g webpack webpack-cli

2、安装后查看版本号

webpack -v

初始化项目

1. 创建webpack文件夹

   npm init -y

2. 创建src文件夹

3. src下创建common.js

   export.info = function(str){
          
   	document.write(str);
   }
   

4. src下创建utils.js

   exports.add = (a,b) => a+b;
   

5. src下创建main.js

   const common = require('./common');
   const utils = require('./utils');
   
   common.info('Hello world!' + utils.add(100,200));
   

JS打包

1. webpack目录下创建配置文件webpack.config.js

   const path = require("path");	//Node.js内置模块
   moudule.exports = {
          
       entry:'./src/main.js'
       output:{
          
   		path:path.resolve(_dirname,'./dist'),  //输出路径，_dirname:当前文件所在路径
           filename:'bundle.js' //输出文件
   	}
   }
   

   以上配置的意思是：读取当前项目目录下src文件中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

2. 命令行执行编译命令

   webpack --mode = development
   #执行后查看bundle.js里面包含了上面两个js文件的内容并进行了代码压缩
   

   也可以配置项目的npm运行命令，修改packa.json文件

   "scripts":{
          
   	"dev":"webpack --mode=development"
   }
   

   运行npm命令执行打包

   npm run dev

3. webpack目录下创建index.html，引用bundle.js