大前端串讲

一、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
.....
  1. 导出模块中的成员
//导出成员：
module.exports={
	sum,
	subtract,
	...
}
  1. 创建 mokuai-common-js/引入模块.js
const m = require('./四则运算.js')
  1. 运行程序
node 引入模块.js
ES6模块化规范

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

  1. 创建mokuai-es6文件夹
  2. 创建src/userApi.js文件，导出模块
export function getList(){
	console.log('获取数据列表')
}
export function save(){
	console.log('保存数据')
}
  1. 创建src/userComponent.js文件，导入模块
import{getList,save} from './userAPI.js'
getList()
save()
  1. 初始化项目
    npm init -y
  2. 配置.babelrc
{
	"persets":["es2015"],
	"plugins":[]
}
  1. 安装转码器，在项目中安装
    npm install --save-dev babel-preset-se2015
  2. 定义运行脚本，packag.json中增加"build"
{
	"scripts":{
		"build":"babel src -d dist"
	}
}
  1. 执行命令转码
    npm run build
  2. 运行程序
    node dist/userComponent.js
ES6模块化写法2
  1. 创建src/userApi2.js,导出模块
export default{
	getList(){
		console.log('获取数据列表2')
	},
	save(){
		console.log('保存数据')
	}
}
  1. 创建src/userComponent2.js，导入模块
import user from "./userApi2.js"
user.getList()
user.save()
  1. 执行命令转码执行程序
    npm run build
  2. 运行程序
    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);
}
  1. src下创建utils.js
exports.add = (a,b) => a+b;
  1. 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

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

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

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

运行npm命令执行打包

npm run dev

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