一 ECMAScript 6

1.1 ECMAScript 6简介

1.1.1 什么是 ECMAScript 6

  ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准, 2015 年 6 月正式发布。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

1.1.2 ECMAScript 和 JavaScript 的关系

  一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?
要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。
  因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)。

1.2 基本语法

  ES6相对之前的版本语法更严格,新增了面向对象的很多特性以及一些高级特性。本部分只学习项目开发中涉及到ES6的最少必要知识,方便项目开发中对代码的理解。

1.2.1 let 声明变量

// var 声明的变量没有局部作用域
// let 声明的变量  有局部作用域
{
    var a = 1;
    let b = 2;
}
console.log(a)
console.log(b)  //b is not defined

// var 可以声明多次
// let 只能声明一次
var m = 1;
var m = 2;
let n = 10;
let n = 20;  //'n' has already been declared
console.log(m)
console.log(n)

1.2.2 const声明常量(只读变量)

// 1、声明之后不允许改变    
const PI = "3.1415926"
PI = 3     // TypeError: Assignment to constant variable.

// 2、一但声明必须初始化,否则会报错
const MY_AGE  // Missing initializer in const declaration

1.2.3 解构赋值

//1、数组解构
let a = 1, b = 2, c = 3
//console.log(a, b, c)
// ES6
let [x, y, z] = [1, 2, 3]
//console.log(x, y, z)
//2、对象解构
let user = {name: 'Helen', age: 18}
// 传统
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let { name, age } =  user  //注意:结构的变量必须是user中的属性
console.log(name, age)

1.2.4 模板字符串

//字符串插入变量和表达式。变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。
let name = "lucy"
let age = 20
let info = `My name is ${name} ,I am ${age+1}`
console.log(info)

1.2.5 声明对象简写

//传统方式定义对象
const name = "lucy"
const age = 20
const user1 = {name:name,age:age}
//console.log(user1)
//es6
const user2 = {name,age}
console.log(user2)

1.2.6 对象拓展运算符

//对象复制
let person1 = {name: "Amy", age: 15}
let someone1 = { ...person1}
//console.log(someone1)

//对象合并
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2)

1.2.7 箭头函数

//传统方式定义函数
var f1 = function(a) {
    return a
}
//console.log(f1(3))

//es6使用箭头函数定义
//参数 => 函数体
var f2 = a => a
//console.log(f2(4))

// 当箭头函数没有参数或者有多个参数,要用 () 括起来。
// 当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,
// 当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。
var f3 = function(m,n) {
    return m+n
}

//es6 
var f4 = (m,n) => m+n
console.log(f4(4,5))

二 Vue入门

2.1 介绍

2.1.1 Vue.js是什么

  在为 AngularJS 工作之后,Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分,构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的 javascript 版块发布了最早的版本。一天之内,Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时,在 JavaScript 框架/函数库中,Vue 所获得的星标数已超过 React,并高于 Backbone.js、Angular 2、jQuery 等项目。
  Vue.js 是一款流行的 JavaScript 前端框架,目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层,同时,它也能方便地获取数据更新,实现视图与模型的交互。
官方网站:https://cn.vuejs.org

2.1.2 初识Vue.js

  创建hello.html

<body>
    <script src="vue.min.js"></script>
    <div id="app">
        <!-- 插值表达式-->
        {{message}}
    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                message:'hello vue'
            }
        })
    </script>
</body>

2.1.3 在 vscode 中创建代码片段

  文件 => 首选项 => 用户片段 => 新建全局代码片段文件:
vue-html.code-snippets

{
    "vue htm": {
        "scope": "html",
        "prefix": "vuehtml",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "    <meta charset=\"UTF-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "    <title>Document</title>",
            "</head>",
            "",
            "<body>",
            "    <div id=\"app\">",
            "",
            "    </div>",
            "    <script src=\"vue.min.js\"></script>",
            "    <script>",
            "        new Vue({",
            "            el: '#app',",
            "            data: {",
            "                $1",
            "            }",
            "        })",
            "    </script>",
            "</body>",
            "",
            "</html>",
        ],
        "description": "my vue template in html"
    }
}

2.2 基本语法

2.2.1 基本数据渲染和指令

<body>
    <div id="app">

        <div v-bind:style="msg">单项绑定</div>
        <div :style="msg">单项绑定2</div> <!-- 简写-->
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg : 'color:green;'
            }
        })
    </script>
</body>

2.2.2 双向数据绑定

<body>
    <div id="app">
        {{keyword}}
        <input type="text" :value = "keyword">
        <br>
        <input type="text" v-model = "keyword">
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                keyword: "1234"
            }
        })
    </script>
</body>

2.2.3 事件

<body>
    <div id="app">
        <button v-on:click="show()">事件绑定</button>
        <button @click="show()">事件绑定</button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                keyword: "1234"
            },
            methods : {
                show() {
                    console.log("show...")
                }
            }
        })
    </script>
</body>

2.2.4 条件渲染

<body>
    <div id="app">
        <input type="checkbox" v-model="ok">
        <br>
        <div v-if="ok">选中了</div>
        <div v-else>未选中</div> 
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok: false
            },
            methods : {
                show() {
                    console.log("show...")
                }
            }
        })
    </script>
</body>

2.2.5 列表渲染

<body>
    <div id="app">
        <div v-for="user in userList">
            {{user.name}}--{{user.age}}
        </div>

        <div v-for="(user,index) in userList">
            {{user.name}}--{{user.age}}---{{index}}
        </div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList : [
                    {"name" : "lucy", "age" : 20},
                    {"name" : "mary", "age" : 30}
                ]
            }
        })
    </script>
</body>

2.2.6实例生命周期

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:'hello'
            },
            created() { // 页面渲染之前执行
                debugger
                console.log('created....')
            },
            mounted() { // 页面渲染之后执行
                debugger
                console.log('mounted....')
            }

        })
    </script>
</body>

三 NPM包管理器

3.1 简介

NPM全称Node Package Manager,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的;也是Node.js的包管理工具,相当于前端的Maven 。

#在命令提示符输入 npm -v 可查看当前npm版本
npm-v

3.2 使用npm管理项目

3.2.1 项目初始化

#建立一个空文件夹,在命令提示符进入该文件夹  执行命令初始化
npm init
#按照提示输入相关信息,如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词,便于用户搜索到我们的项目
#最后会生成package.json文件,这个是包的配置文件,相当于maven的pom.xml
#我们之后也可以根据需要进行修改。
#如果想直接生成 package.json 文件,那么可以使用命令
npm init -y

3.2.2 修改npm镜像

NPM官方的管理的包都是从 http://npmjs.com下载的,但是这个网站在国内速度很慢。
这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ,淘宝 NPM 镜像是一个完整 npmjs.com 镜像,同步频率目前为 10分钟一次,以保证尽量与官方服务同步。

#经过下面的配置,以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息
npm config list

3.2.3 npm install 命令的使用

基本命令

#使用 npm install 安装依赖包的最新版,
#模块安装的位置:项目目录\node_modules
#同时package.json 文件中,依赖包会被添加到dependencies节点下,类似maven中的 <dependencies>
#默认参数:--save  简写  -S  将当前依赖保存在dependencies节点下
npm install jquery

下载特定版本的依赖

#如果安装时想指定特定的版本
npm install jquery@2.1.x

下载开发依赖

#devDependencies节点:开发时的依赖包,项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或简写
npm i -D eslint

下载全局依赖

#全局安装
#Node.js全局安装的npm包和工具的位置:用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install --global webpack
#或简写
npm install -g webpack

根据依赖下载安装包

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
#安装会自动在项目目录下添加 package-lock.json文件,这个文件帮助锁定安装包的版本
npm install #根据package.json中的配置下载依赖,初始化项目

3.2.4 其他命令


#更新包(更新到最新版本)
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

四 Webpack

4.1 什么是Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。
Webpack工作原理

4.2 Webpack安装

4.2.1 全局安装

npm install -g webpack webpack-cli
或
npm install -g webpack
npm install -g webpack-cli

4.2.2 安装后查看版本号

webpack -v

4.3 创建项目

4.3.1 初始化项目

npm init -y

4.3.2 创建src文件夹

4.3.3 src下创建common.js

这里使用的是CommonJS模块化方式,这种方式不支持ES6的语法,所以不需要Babel转码

exports.info=function (str) {
document.write(str)
}

4.3.4 src下创建util.js

exports.add=function (a, b) {
returna+b
}

4.3.5 src下创建main.js

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

4.4 JS打包

4.4.1 创建配置文件

目录下创建配置文件webpack.config.js
以下配置的意思是:
读取当前项目目录下src文件夹中的main.js(入口文件)内容,分析资源依赖,把相关的js文件打包
打包后的文件放入当前目录的dist文件夹下
打包后的js文件名为bundle.js

constpath=require("path") //Node.js内置模块
module.exports= {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径
filename: 'bundle.js'//输出文件
    }
}

4.4.2 执行编译命令

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

4.4.3 创建入口页面

<scriptsrc="dist/bundle.js"></script>

4.4.4 测试

浏览器中查看index.html

最后修改:2021 年 11 月 30 日 11 : 32 PM
如果觉得我的文章对你有用,请随意赞赏