2018.10.08 星期一
总的前端内容：
1.页面重构
1）axure
2）html
3）css
4）js基础
2.dom框架
1）dom/bom
2） jQuery
3）bootstrap
4）H5 API(H5新增标签)
3.企业级开发（前端核心）
1）mvvm框架
2） ES6
ES5的升级版，linux
vim 编辑器
node 运行代码
3）JavaScript
浏览器端：Firefox Opera Chrome
node服务器端：v8
es6应用场景：
node 服务器端开发，脚本开发
浏览器 网页开发（es6–>es5,打包）
4） Vue体系(尤玉溪) 、react、angularJS
vue
vueRouter
vuex
elementui
axios
…
5） 评教系统
4.服务器端技术：
mysql
nodeJS
小程序
swagger ：javaEE NodeJS PHP C#
ES6
一、搭建开发环境（node） es5–>在浏览器中运行
-
linux
-
node
-
es6如何转换为es5？需要在node中安装以下两个插件：
babel (做语法上的转换)
babel-preset-latest -
es6
安装webpack插件:
webpack(bundle.js) //打包。把所有文件都脚本化，最终打包成一个js文件
weex
es6的模块化和工程化是与es5的最大的区别。
commonJS
二、node中如何安装依赖
babel: js的插件，nodejs的插件，es6->es5
程序员在开发过程中使用的工具，在产品阶段不需要
环境依赖
jQuery: js的插件，封装DOM。在产品阶段需要
产品依赖（qs,jQuery,vue,vuex,vueRouter,axios）
一个工具：npm
全称是node package manager，是node的包管理（模块）
1.工程的初始化
$ mkdir app01
$ cd app01
$ npm init -y (表示一切默认)
会在当前项目的根目录中创建一个文件package.json。该文件是当前项目的核心文件。记录了项目的信息，依赖的信息，脚本的信息。
2.调用第三方依赖(步骤)
1）安装依赖
$ npm install qs --save
在当前目录中的node_modules中安装依赖，如果不存在，则新建该文件。
将依赖信息记录在package.json中。
2）导入依赖
reques('qs');
该函数用于导入其它模块，参数可以为：
1.模块名称
系统将会按照如下的地址去寻找qs模块
./node_modules -> ../node_modules -> ../../node_modules/
2.路径
3）使用依赖
如果是第三方API，需要参照文档来进行使用qs
官网：npmjs.com
3.自定义模块
任何一个js文件，都可以看做是一个子模块，每个模块内部都有一个对象module。
module.exports
exports属性表示当前模块对外暴露的接口。
三、npm 安装依赖
$ npm install [email protected] --save-dev
本地安装，该依赖仅仅在开发时使用，在打包时不会被打包。
$ npm install [email protected] --save
本地安装，一般安装的是产品依赖，例如jQuery,qs,vue。
将依赖安装到当前项目的node_modules中。
$ npm install [email protected] --global
全局安装，一般安装的是环境依赖(命令行工具)，例如babel-cli,webpack。
将依赖安装到node的家目录中：下载node；将node解压到/home/licy/opt/node-v8
四、babel
1) 安装babel命令行工具
$ npm install babel-cli --gloabl
2) 安装babel-preset预设
es6->es5
$ npm install babel-preset-latest --save-dev
本地安装，仅仅在开发的时候使用
3) 在项目中添加配置文件
.babelrc
{
"preset":["latest"]
}
五、webpack的应用
1.安装webpack和webpack-cli
$ npm install webpack webpack-cli --save-dev
2.添加配置文件 webpack.config.js
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'dist')
}
}
3.修改package.json
"scripts":{
"build":"webpack"
}
4.执行打包操作
npm run build
npm init
npm install xxx
npm uninstall xxx
npm config list
npm config get
2018.10.09 星期二
复习：
一、npm
node的包管理机制，npm是随着node的安装而安装
1.项目初始化：
$ npm init -y
在当前目录下，生成package.json，记录了产品信息，记录依赖信息，记录脚本信息。
2.安装依赖：
$ npm install xxx@x --save
产品依赖，依赖会被安装到node_modules，并且在package.json中记录dependencies，产品在打包的时候依赖会被打包。
例如：jquery,qs,vue,vueRouter,axios都是产品依赖。
$ npm install xxx@x --save-dev
开发依赖， 依赖会被安装到node_modules，并且在package.json中记录devDependencies，产品在打包的时候该依赖不会被打包。
例如：babel-core,babel-loader,webpack,webpack-cli。
$ npm install xxx@x --global
环境依赖（全局依赖），依赖会被安装到node的家目录中，这个依赖项目会被所有项目调用，不会被记录到packag.json中。
3.卸载依赖：
$ npm uninstall xxx@x --save
4.获取npm相关配置：
$ npm config list
$ npm config get prefix
获取node的安装前缀
二、es6中的模块化机制
1.commomJS
1）模块定义：
module.exports
模块可以为js文件，也可以为目录
2）模块引用：
require()
参数为路径
参数为模块名称
.node_modules
../nde_modules
../../node_modules
3）模块分类：
A、自定义模块：
B、第三方模块：
(1)安装 npm install
(2)引用 require/import
(3)使用 $() qs.xxx
C、系统内置模块：
直接引用
path
4）打包：
模块化机制在浏览器不支持。需要构建：
打包：a.js b.js c.js -> bundle.js
转换：es6 ->es5 .vue -> .html .css .js
1)安装插件webpack
$ npm install webpack webpack-cli --save-dev
2)添加配置文件 webpack.config.js
var path = require('path');
{
"entery":"./index.js",
"output":{
filename:"bundle.js",
path:path.resolve(__dirname,'dist')
}
}
3)修改package.json
"scripts":{
"build":"webpack"
}
4)执行打包
$ npm run build
2.ES6
1) 模块定义: export
2) 模块引用: import
二、babel转换
1）安装babel
2）安装预设babel-preset-latest
3）在项目中添加配置文件 .babelrc
{
"preset":["latest"]
}
4）$ babel a.js -o b.js
2.babel集成到webpack中：
1）安装开发依赖
$ npm install babel-core babel-loader --save-dev
2）安装预设
$ npm install babel-preset-latest --save-dev
3）.babelrc
4）集成
webpack.config.js
entry
output
module:{
rules:[{
}]
}
3.模块优化
app01
自定义模块 article category
第三方模块 jquery
缺点：
文件比较大
打包速度慢
不便于管理
网络延迟加大
4.JS开发流程
纯JS开发不适用于DOM开发
VUE
.vue
<template></template>
<script></script>
<style></style>
1)初始化项目工程
npm init(脚手架)
2)使用模块化编程
user.js
category.js
article.js
3)构建 build
转换，打包
4)部署
在apache服务器中
webpack-server
npm run build
es6 基本语法
1.var
1) 变量声明的提升
console.log(b);
var b = 1;
2) 没有局部作用域
if(true){
var a = 3;
}
console.log(a);
3) 变量可以重复声明
var a = 3;
var a = true;
2.let
1)不存在变量提升。
2)具有局部作用域。适用于for循环
if(true){
let a = 3;
}
console.log(a); //无法访问
for(let i=1; i<=10; i++){
}
console.log(i); //无法访问
3) 不允许重复声明。变量在同一作用域中只能被声明一次。
4) 暂时性死区。在当前作用域中，变量声明前无法使用变量。
let a = 1;
if(true){
//在变量声明前无法使用该变量
let a = 2;
}
3.const
用于声明常量，不会改变的变量，只能初始化一次，并显示初始化。 具备let的所有特性。
const a = 3;
const a = undefined;
4.解构
对于变量声明的拓展，在一个表达式中为多个变量赋值。解构的本质是模式匹配。
1）数组结构
let [a,b,c] = ['terry','larry','tom'];
let [a,b,c,d] = ['terry','larry','tom'];
let [a,b,c='cc,d='dd'] = ['terry','larry','tom'];
let [head,...tail] = [1,2,3,4,5];
交换两个变量的值:
let a = 1;
let b = 2;
方法1：
let temp = a;
a = b;
b = temp;
方法2：
[a,b] = [b,a]
2）对象解构
例子：
a.js
module.exports = {
save(){},
delete(){},
update(){},
findAll(){}
}
b.js
var {save,update} = require('./a');
save()
update()
----------------------------------
let {a,b,c=1} = {a:1,b:2}
=>
function foo({a,b,c=1}){
console.log(a,b,c);
}
foo({a:1,b:2});
--------------------
var obj = {
name:'terry',
age:12
};
let {name:a,age:12} = {name:'terry',age:12};
let {name:name,age:age} = {name:'terry',age:12};
let {name,age} = {name:'terry',age:12};
let {findAllCategory} = {require(./category);}
$.getJSON(url,function({status,data}){
if(status==200){
console.log(data);
}else{
console.log('接口异常');
}
})
3）字符串解构
数组解构，字符获取：
let [a,b,c] = 'hello'; //['h','e','l','l','o']
let [a...b] = 'hello';
对象解构，获取String.prototype.*：
let {length} = 'hello';
let {substring,substr} = 'hello'
将String.prototype中的substring函数赋值给substring，将substr函数赋值给substr变量。
substring === String.prototypesubstring; //true
4）数字和布尔值解构
let {toString} = 0;//Number.prototype.toString
5.对象拓展
1)简写
var name = 'terry';
var age = 12;
var obj = {
name:name,
age:age
sayName:function(){}
}
-->
var obj = {
name, //变量名作为属性名，变量值作为属性值
age,
sayName(){}
}
2)Object构造函数 API扩展
1.Object.is(value1,value2);//同值相等，与===类似。不同之处在于：+0 != -0；NaN = NaN
"12" === 12; false
+0 -0 true
NaN NaN false
Object.is("12",12) false
+0 -0 false
NaN NaN true
2.Object.assign(target,obj1,obj2) //合并对象，将obj1,obj2合并到target中
3.__proto__属性 //本质上属于内部属性，指向当前对象的prototype对象，一般不直接使用。
4.Object.setPrototypeOf(obj,prototype)//设置一个对象的prototype对象，返回参数对象本身。
5.Object.getProtytpeOf(obj);//读取一个对象的原型对象。
6. Object.keys(obj);//获取所有属性名组成的数组
7.Object.values(obj);//获取所有属性值组成的数组
8.Object.entries(obj);//获取所有键值对组成的数组的数组[[key1,val1],[key2,val2]]
课堂案例：webpack应用的操作步骤：
1.新建app01: mkdir app01
2.初始化app0为模块化项目: npm init -y //package.json
3.新建入口文件：vi index.js
4.新建文件夹，用来存放子模块：mkdir src
5.在src中构建子模块：vi article.js
mkdir category
6.cd category
初始化：npm init -y //文件夹当做子模块时都需要初始化
新建入口文件，编写：vi index.js
7.在app01下，vi index.js，引用子模块
8. node index.js
9.安装jquery：npm install jquery --save
10.安装：npm install webpack webpack-cli --save-dev
11.创建配置文件：vi webpack.config.js
12.修改： vi package.json
9. npm run build //dist（打包）
10. ls dist/ //bundle.js
15.下载bundale.js
16.打包核心代码。引入min.js。npm uninstall jquery
17.运行index.js
18.安装：npm install babel-core babel-loader --save-dev
19.安装预设：npm install babel-preset-latest --save-dev
11. vi .babelrc
21.集成。vi webpack.config.js
12. npm run build
23.安装。npm install babel-loader@7
13. more package.json
14. npm run build
2018.10.10 星期三
复习：
es6语法:
1.var
2.let
4.const
5.解构
数组解构：let [a,b,c] = [1,2,3]
let [a,...b] = [1,2,3]
对象解构：let {a,b,c} = {a:1,b:2}
其他解构：
字符串：let [a,b,c] = "hello"
let {length,substr} = "";
数字: let {toString} = 0;
布尔值: let {} = true;
6.对象扩展
简写：
let name = 'terry';
var obj = {
name,
age:12,
sayName(){}
}
Object API 扩展
object.keys()
object.values()
object.entries()
object.is()
object.assign()
一、函数的扩展：
1.参数默认值
function foo(url,method='get',async=true){}
foo("","post");
=>
function foo(url, {method='get',async=true}){}
foo("http://...",{method:'get'});
-------------------
function foo({a,b=1}){}
foo{}
function({a,b=1}){}
foo{{a:1,b:2}}
2.rest参数…
可以用于实参，可以用在对象、数组中。
将字符串转换为数组： [...'hello']
对象合并：
{
sayName(){},
sayAge(){},
...{
save(){},
delete(){}
}
}
function foo(a,b,c){}
var param = [1,2,3];
foo(...param);
foo.apply({},param);
=>
foo(param[0],param[2],param[3]);
3.箭头函数
一般用于回调函数中。
$.get('',(result)=>{
console.log();
});
[1,2,3,4].every((item,index)=>{
return item>0;
});
当要使用this的时候，要将箭头函数定义在一个外部函数中，此时箭头函数中的this指向外部函数的this。
function foo(){
setTimeout(()=>{console.log(this)},1000);
}
foo.call({});
二、数组的扩展：
1.Array api
1) Array.from(v);//v为类数组对象、可迭代对象(for-of)。例如：String/Array/set/map
2) Array.of(10);// [10]
Array.of(10,1);// [10,1]
2.Array.prototype API
1) Array.prototype.some();
2) Array.prototype.find();
[1,2,3,4].find((item)=>{return item>2;});
3) Array.prototype.findIndex();
4) Array.prototype.includes();
5) Array.prototype.fill();
new Array(10).fill(1);
6) Array.prototype.keys();
7) Array.prototype.values();
8) Array.prototype.entries();