前端进阶简述

nodejs

Node.js是基于chrom V8引擎 的JavaScript

通常 node xxx.js就可以直接运行js文件了

1.使用http模块

1.const http=require("http")//引入http包
2.http.createServe(function(request,response){
   	response.writeHead(200,{'Content-type':'text/plain'});//告诉浏览器使用文本格式
    response.end("<h1>hello serve</h1>");//响应文本
  }).listen(8888);

2.操作数据库

cnpm install mysql

1.const mysql=require("mysql")//引入mysql包
2.var connection=mysql.createConnection({
    host:'127.0.0.1',
    port:'3306',
    user:'root',
    password:'123456',
    database:'mytest'//连接的库
 });
 connection.connect();//连接数据库
 connection.query("select * from user",function(error,results,fields){
     if(error) throw erro;
     console.log('results:',results);
 });
 connection.end();//关闭连接

nodejs里自带很多模块，第三方模块必须要安装

ES6

1.变量: let consts

2.模板字符串：

var person={
   name:'yanglup',
   do:'测试'
}

过去："我是"+person.name得到数据
现在：`我是${person.name}`  ----使用飘键+${} 

2.默认参数：

如果不传入参数默认undefined,通常设置默认参数
function sum(a=50,b=50){ 
}

3.箭头函数：

过去：
var sum=function(a){
    return a;
}


现在：
var sum2=(a)=>{
    return a;
}

var sum3=()=>a;

var sum3=s=>a;

1.去掉function加上=>
2.如果返回return只有一个可以去掉return以及{}
3.参数只有一个可以去掉()

4.对象初始化简写

过去
var person={
    name:'yanglup',
    age:'99',
    go:function(){
        console.log('测试');
    }
}


现在：对象简写：1.在外面定义号 2.方法里面function也可以不写
var name='yanglup2';
var age=88;
var person2={
    name,
    age,
    go(){
         console.log('测试');
    }
}

5.解构

过去需要一个一个.出来
person.name

现在对象里需要的直接拿出来用就可以了
var {name,age}=person;

var {name,..temp}=person;//temp是除了name的都暂时放在temp里

6.数值map

使用map处理数组，map自带循环，即value每次都是新的


过去
let arr=[1,2,3,4,5,6,7,8];
let newarr=[];
for(let i=0;i<arr.length;i++){
    newarr.push(arr[i]*2);
}


现在
var newarr2=arr.map(function(value){
    return value*2;
})
还可以简写
var newarr3=arr.map(value=>value*2)

map也可以处理对象


var user=[
    {name:'yanglup',age:1},
    {name:'yanglup2',age:2}
]
var newuser=user.map(function(value){
    value.age=value.age+1;
    return value;
})


简写
var newuser2=user.map(value=>{
    value.age=value.age+1;
    return value;
})

7.数组Reduce

let arr=[1,2,3,4,5,6,7,8];
let result=arr.reduce(function(tmp,item,index){
    console.log(tmp);//临时结果
    console.log(item);//项
    console.log(index);//下标
    console.log('-----------------------');
    return tmp+item;
})

会循环数组，然后tmp得到的是return每次的结果

NPM包管理器

npm init -y//npm初始化，不加-y就是手动初始化

初始化完后外面就有一个package.json文件

安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

通常安装某些模块
cnpm install xxx
cnpm install xxx@3.3.0//安装指定版本

卸载
cnpm uninstall mysql jquery...

通常安装号了会package.json里有对应依赖，类似pom.xml
通常把需要的导入到package.json然后cnpm install就可以
使用安装好的
const xx=require("xx");

Babel

ES6转化为ES5，实际开发过程中通常不会经常使用，但前端大部框架里都是有bable的，只是不需要我们手动处理

1.安装

cnpm install -g babel-cli
//查看版本
babel --version

2.使用

1.npm init y//初始化
2.创建src文件夹,在src下编写es6文件，然后编译测试 node src/xxx
3.创建.babelrc文件，里面放编写成es2015信息
4.cnpm install --save-dev babel-preset-es2015//下载es2015
5.babel src -d dist//执行src下文件都翻译成es2015的

模块化

1.commonjs模块化

1.定义一些变量
2.module.exports={变量名}//导出
3.const my=requirer('../xxx')//导出,然后就可以使用my

2.ES6模块化

通常情况下由于无法解析ES6，需要将为ES5,所以需要babelrc文件

1.npm init -y
2.创建并设置.babelrc文件
3.cnpm install --save-dev babel-preset-es2015
4.在package.json里设置"build":"babel src -d dist"

使用ES6模块化
1.方法一：
	export function 方法名(){...}
  方法二：【可以导出多个方法】
  	export default{
        方法名1(){},
        方法名2(){}
    }
2.方法一：
 	import {a,b} from '../xxx' //然后下面就可以直接调用了a,b
  方法二：
  	import my form '../xxx'
    my.a();
    my.b();

npm run build//通过上面设置后,将ES6装为ES5
node .\dist\xx.js//最后将dist目录下文件执行

WebPack

webpack前端资源加载和打包工具，webpack通常也是被内置了，通常不需要手动处理

1.使用

cnpm install -g webpack webpack-cli//安装
webpack -v//查看安装版本

1.npm init -y //初始化
2.写我们对应的js文件
3.创建一个webpack.config.js//文件用于配置webpack

4.执行webpack,就会在dist下产生一个bundle.js文件
5.我们直接就可以直接使用<script src="导入js文件"></script>

2.补充

webpack -w//监听，只要我们保存了它就会自动重新打包

3.合并css

默认情况下只处理js，所以必须安装style-loader和css-loader

cnpm install

再在webpack.config.js里配置一下规则就可以了

然后我们自己写的css文件就可以直接require("…/xx")引入使用