前端学习杂记

大前端串讲

一、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使用exportimport来导出、导入模板

  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

你可能感兴趣的