前端——入门

一、前端

库：小而巧
框架：大而全

jquery和zepto

三大框架一大抄

模块化：代码角度
组件化：UI界面角度

Vue实现组件化：[.vue]（结构、行为、样式）
React实现组件化：js

移动APP：
Vue+Weex
React+ReactNative

DOM：浏览器的概念
虚拟DOM：框架的概念，本质是JS模拟DOM元素，目的是实现页面高效更新

diff算法：
tree diff
component diff
element diff

webpack是基于node构建的
webpack4.0约定入口路径：src -> index.js
webpack4.0约定出口路径：dist -> main.js
Node和Chrome

二、React

state和props

props是组件对外的接口
state是组件对内的接口

bem命名规范

改变this指向

this.method = ()={} 
onClick={this.method.bind(this)}
this.method = this.method.bind(this)

实现数据双向绑定

model <=> view
监听改变事件
this.setState({})，事件对象或者ref获取dom的值
获取this.state.property

约束性组件（实现MVVM）：react参与管理，由this.handleChange管理
非约束性组件（实现MV）：原生DOM的属性

父=>子 this.props.xxx
子=>父 this.refs.xxx.state.xxx

生命周期

组件加载：construct willmount render didmount
组件销毁：willUnmount
组件更新：shouldComponentUpdate willUpdate render didUpdate
willReceiveProps

三、Vue

介绍

模板表达式{{…}}，{}代表一个JS对象，支持热重载，MVVM

优势

• 组件化开发
• 数据双向绑定
• 界面响应式
• 用路由实现页面跳转（不会刷新页面）

ES6语法

常量、作用域、箭头函数、默认参数、对象代理

Jsonp跨域请求

知识点

1、slot

插槽，用于组件模板中

2、mounted

在模板渲染成html后调用

3、axios

通过后端代理的方式抓数据，伪造IP和Refer
axios.get(url,config).then((res)=>{console.log(res.data)})

4、vue-cli方式搭建vue环境

vue init webpack "projectName"

选择runtime only选项

5、双向绑定的方式

表达式、指令

6、vue生命周期八个阶段

7、组件设计原则

就近维护，对外隔离

8、SPA

单页应用

9、express

配置服务器端访问接口

10、vue的两种形式代码

compiler模式和runtime模式

11、vue-resource

通过JSONP发起请求并处理响应
$http.jsonp(url,{}).then(function(res){},function(err){})

12、伪类

after清除浮动

13、DPR(设备像素比)

• 非视网膜设备，DPR=1
• 视网膜设备，DPR > 1

14、浏览器多进程到JS单线程

15、CORS

跨域资源共享

16、运行 build 后的代码

写 prod.server.js

常用命令

npm run dev：运行dev脚本
npm install：安装依赖包

npm config set registry http://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

用webpack打包JS文件

set path=%path%;
webstorm64 ./
//准备工具：cnpm install webpack-cli  /*webpack可执行文件*/ 
cnpm init
//安装依赖：cnpm install webpack --save-dev
cnpm install css-loader style-loader --save-dev
//打包
webpack hello.js hello.bundle.js
//处理css文件
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'
//自动打包
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch
//查看打包过程
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress
//显示打包模块
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --display-modules
//显示打包模块的原因
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --display-modules --display-reasons

//指定非默认配置文件名：webpack --config webpack.dev.config.js
webpack --config webpack.config.js --progress --display-modules --colors --display-reasons
npm run webpack

//注意：命令行指令的安装和包依赖的安装的区别，一个安在全局，一个安在当前目录下。

//webpack.config.js文件
module.exports={
    entry: "./src/script/main.js",
    output:{
        path:__dirname+'/dist/js/',
        filename:'bundle.js'
    }
}

cnpm install html-webpack-plugin --save-dev

--save-dev: 依赖包定义在devDependencies中
--save: 依赖包定义在dependencies中
cnpm install: 安装package.json中dependencies和devDependencies中的依赖
cnpm install -production: 安装dependencies中的依赖

windows系统的文件夹名出现以点结尾，说明系统有非原生的内核执行过命令，在Windows系统中删不掉。

var htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
    entry:{
        main:"./src/script/main.js",
        a:"./src/script/a.js"
    },
    output:{
        path:__dirname+'/dist',
        filename:'js/[name]-[chunkhash].js',
        publicPath: "http://cdn.webpack/"
    },
    plugins: [
        new htmlWebpackPlugin({
            template: "index.html",
            inject: false,
            filename: "index.html",
            title:"webpack is good",
            date:new Date(),
            minify: {
                removeComments:true,
                collapseWhitespace:true
            }
        })
    ]
}


var htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
    entry:{
        main:"./src/script/main.js",
        a:"./src/script/a.js",
        b:"./src/script/b.js",
        c:"./src/script/c.js"
    },
    output:{
        path:__dirname+'/dist',
        filename:'js/[name]-[chunkhash].js',
    },
    plugins: [
        new htmlWebpackPlugin({
            template: "index.html",
            inject: "head",
            filename: "a.html",
            title:"this is a.html",
            chunks: ['main','a']
        }),
        new htmlWebpackPlugin({
            template: "index.html",
            inject: "head",
            filename: "b.html",
            title:"this is b.html",
            chunks: ['b']
        }),
        new htmlWebpackPlugin({
            template: "index.html",
            inject: "head",
            filename: "c.html",
            title:"this is c.html",
            chunks: ['c']
        })

    ]
}

cnpm install babel-loader babel-core --save-dev
cnpm install babel-preset-latest --save-dev

使用babel-loader转换ES6代码，打包生成JS
cnpm install --save-dev @babel/core

@import ''

四、HTML

1、video标签
src autoplay controls poster loop preload muted width height
2、audio标签
3、概要和详情标签

<details><summary></summary></details>

4、marquee标签
direction、scrollamount、loop、behavior(=slider,alternate)
5、b u i s 标签为什么会被废弃？并用strong ins em del代替？
前者样式标签，后者语义标签
6、字符实体
HTML对空格、回车和tab不敏感，<h>=&lt;h&gt;

五、CSS

三大特性

• 继承性
  以color、font-、text-、line开头的属性；
  a标签文字颜色和下划线，h标签字体大小不能继承父辈；
• 层叠性
  Cascading StyleSheet；
  解决样式冲突问题；
• 优先级
  非直接选择，就近；
  相同选择器，顺序；
  不同选择器，选择器的优先级，id > class > label > 通配符 > 继承 > 浏览器默认；

!important值

提高选择器选中的标签属性的权重；
必须是直接选中，只能提升指定的属性优先级；

优先级的权重

当多个选择器在一起使用的时候，通过计算权重判断优先级；
按照 id>class>label的权重，如果相同就按照顺序；
只有直接选中标签才会计算权重；

显示模式

div和span的区别

div是容器级别的标签，span是文本级别的标签
div可以嵌套其它标签，span只能放文本、超链接、图片

块级元素和行内元素

块级元素：所有容器级标签
行内元素：所有文本级标签（除了P标签）

块级元素和行内元素的区别

块级元素：默认父级的宽度
行内元素：默认文本的宽度

行内块级元素，img

为了不独占一行，又能设置宽度和高度

显示模式的转换

display: block/inline/inline-block

背景

background-color取值

rgb、rgba、十六进制、具体单词

background-image: url()

网页上有图片，浏览器会再次发送请求获取图片；
设置平铺background-repeat，通过平铺降低图片大小，提高网页访问速度

图片定位

格式background-position：水平方向 垂直方向
取值：left/center/right，top/center/bottom，具体像素
可接受负值
企业中使背景图片水平居中 background-position: center top

缩写：可选的

背景颜色 背景图片 平铺方式 关联方式 定位方式；
关联方式：背景和滚动条的关联，取值有scroll、fixed
快捷键：bg+, tab

背景图片和插入图片的区别

企业应用：精灵图

图像合成技术

盒模型

边框

线宽 线型 线色
只有线型不能省略
连写时边的顺序：上右下左、上右左下、上下右左
快捷键：bd+
应用：倒三角的按钮

外边距合并现象

垂直方向不会叠加外边距

宽高

内容的宽高
元素的宽高
元素空间的宽高

box-sizing属性

content-box：元素的宽高=border+padding+content
border-box：元素的宽高=content，修改padding等属性，盒子元素大小不变

注意点

有父子两个盒子，子盒子设置margin，父盒子也会有margin，此时需要设置父盒子的border来解决
企业开发中控制嵌套关系的盒子距离，先考虑padding，再考虑margin，margin本质上考虑兄弟间的间隙
margin：0 auto；水平居中
margin：0 auto 和 text-align：center 的区别
清空默认边距：*{margin: 0; padding: 0}
行高和盒子高的区别，使文本在盒子中垂直居中
从外到内，从上到下编写网页

网页布局方式

标准流

水平排版和垂直排版
水平居中：margin: 0 auto

浮动流

半脱离标准流
只有水平排版方式
不区分元素块级还是行内，可以设置宽高
脱标：相当于浮动的元素从标准流中被删除
排序规则：先浮动的排在后浮动的前面，元素浮动后的行数由之前在标准流中的位置决定
贴靠现象：最后面一个元素如果放不进去，会向前面一个元素的下方左侧贴靠
字围效果：用于图文混排
应用：水平用浮动，垂直用标准
浮动的元素撑不起父元素的高度

清除浮动的方式（难点）

4.1给前面一个元素设置高度
4.2设置盒子clear属性，副作用使margin-top属性失效（分析原因）
4.3隔墙法：
外墙法：在两个盒子中间添加一个div，并设置clear为both和高度，一般不修改上面盒子的margin-bottom和下面盒子的margin-top
内墙法：在上面盒子里面最后一个元素后添加一个div，并设置clear为both，且它可以设置盒子的margin-bottom，并撑起父元素的高度
注意：由于隔墙法违背了样式和布局分离的思想，故应用中不常见
4.4伪标签选择器：.box1::after{content:""; clear:both; display:block; height:0; visibility:false;}
4.5设置上面盒子的overflow属性为hidden，可以使里面内容撑起盒子的高度

伪标签选择器

::before是在标签内容前面添加
::after是在标签内容后面添加

overflow=hidden的作用

使超出标签的内容隐藏
清除浮动
子盒子设置margin-top后，父盒子不被顶下来

定位流

7.11
相对定位：相对以前在标准流中的位置
应用：元素微调、配合绝对定位
7.12
绝对定位：脱标，默认相对于body定位（网页首屏），其次以定位流的祖先，就近原则
注意：忽略父元素（含定位流属性）的padding属性
应用：
子绝父相，显示小图标；
设置绝对定位元素水平居中，position=absolute，left=50%，margin-left=-width/2
7.13固定定位
脱标
不随滚动条的滚动而滚动
与背景定位的区别：一个是盒子，一个是背景图片
7.14静态定位
默认定位方式

7.2 z-index属性
控制定位流中元素的覆盖关系
从父现象

a标签伪类选择器

属性：
:link
:hover
:active
:visited
注意：
属性一起出现时有严格的顺序要求，love hate原则

过渡

三要素：
有属性值发生变化
指定需要过渡的属性
指定过渡时间

转换模块

注意： 会修改坐标系
形变中心点：默认是盒子中心，通过transform-origin修改
旋转轴向：transform: rotateX,rotateY,rotateZ
透视：perspective，近大远小的效果
box-shadow,font-shadow
子元素会随着父元素被拉伸
background-size
contain: 宽度或高度等比拉伸到容器大小，我推荐使用
cover: 宽度和高度等比拉伸到容器大小

CSS书写格式

行内样式
内嵌样式
外链样式（推荐使用）
导入样式：@import

外链样式：先加载样式，再加载结构
导入样式：先加载结构，再加载样式

动画

1、过渡和动画的不同点：过渡需要人为的触发
2、动画三要素
指定动画名称
指定动画时间
定义动画（@keyframes）
3、animation-fill-mode
none
backwards
forwards
both
4、无限滚动实现原理：

CSS选择器

1、CSS选择器
后代选择器：用空格隔开
子元素选择器：用>隔开
交集选择器：无空格
并集选择器：用逗号隔开
相邻兄弟选择器：+，只能选中紧跟的标签
通用兄弟选择器：~
序选择器：xn+y、odd、even
属性选择器：区分input标签的属性
通配符选择器：*
2、企业中后代选择器和子元素选择器的选择
后代：选择指定标签的特定标签
子元素：选择指定标签的特定子标签