前端学习总结

Ranye123

已于 2022-05-26 15:44:17 修改

阅读量363

点赞数

分类专栏：前端文章标签：前端

于 2022-05-26 13:39:52 首次发布

本文链接：https://blog.csdn.net/weixin_43544179/article/details/124983055

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.前端 UI 设计规范

1.1 页面和内容范围宽度

主流分辨率：1920*1080 / 1366*768

分辨率	正文内容宽度	一屏（可见高度）
1920*1080	1200px	900px

1.2 板块设计

建议所有板块风格统一，功能一致

例：头部板块，高度不超过屏幕的 1/5，风格保持统一（最多三种）
底部板块，高度不超过屏幕的 1/5，风格保持统一

1.3 文字和控制

文字

推广（广告）设计：字体在图片上，不需要考虑用户的设备是否包含该字体
产品设计：由前端工程师实现，选择设备自带字体

一般采用 14px 字号，黑体做标题、重点突出文字；英文字号采用 9~14px，字体使用系统自带（宋体、微软雅黑、黑体）

控件

各控件样式风格必须统一，如按钮，要求圆角的弧度相同，色系一致，以达到统一的视觉效果

1.4 动画的实现

动画的每个动作、每个帧需独立成一个图层，背景图按元素分层

1.5 输出设计文件

两个文件夹
一个是确定好的图片效果，其中每个文件命名格式：【图片描述】-【最后修改时间】-最终确认.jpg
一个是源 PSD 文件，要包含修改过程中的各个版本。其中每个文件命名格式：【内容描述】-【该版本出现时间】.psd。注意标注最终确认和废弃的稿件

2.HTML5 页面元素使用

2.1 常用的 HTML5 元素

新增主要分为三类
主体元素（针对主要内容）：article section nav aside time
非主体元素：header、footer、address、hgroup
表单元素：input、figure、mark、summary

与 HTML4 的不同：
新增类型名称（input 元素类型）：email、range、number、url、search、data pickers
新增属性名称（表单元素属性）：autofocus 自动获取焦点、placeholder 占位符、multiple 多项元素选择、required 需要填写

2.2 新增的 HTML5 表单元素 2.3 表单元素的属性和方法

例：

<!-- 声明文档类型是页面 -->
<!DOCTYPE html>

<html lang="en">
  <!-- head里的只执行不显示 -->

  <head>
    <!-- 字符编码 -->
    <meta charset="UTF-8" />
    <!-- 对IE做适配，如果使用的是IE浏览器，那么一定要是“顶级的”（最新版本）浏览器 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 在移动端的状态。内容宽度=设备的宽度m，初始的比率为1.0（等比） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <!-- body既执行又显示 -->

  <body>
    <!-- ul>li*3 + tab-->
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>

    <!-- form + tab -->
    <form action="">
      <!-- type还可选url等 -->
      <input type="text" placeholder="请输入" required />
      <input type="submit" value="快速提交" />
    </form>
  </body>
</html>

2.4 元素的使用规则和注意事项

页面元素不建议多层嵌套（3~4 层）
少用性能低，消耗大的元素，如 iframe（内联元素，无法评估里面的元素要加载多长时间，而整个页面是顺序加载执行的，会阻塞下面的元素）、table（用 div+css 替代）

段落分隔用 p，而非多个 br 标签
列表条目放在 ul ol dl 中，不要 div p
少用 size 属性，应用 css 样式控制

3. CSS3 样式布局页面

3.1 样式的使用方法

三种方式

内联样式：只有一个特殊
内嵌样式（<style>）：一个页面
外链样式（用<link>引入外部 css）：项目

若三种方式不同，采用“就近原则”：内联>内嵌>外链

例：
index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- 内嵌 -->
    <style>
      div {
        background-color: green;
      }
    </style>

    <!-- 外链 -->
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-- 内联 -->
    <div style="background-color: red;">今天天气很好</div>
  </body>
</html>

style.css

div {
  background-color: orange;
}

CSS 选择器分为以下几类：

标签选择器（性能第三）
id 选择器（性能最好，查找最快，但不能大面积使用）
class 选择器（性能第二）
群组选择器
后代选择器
子代选择器
伪类选择器

例 1：

后代选择器，通过派生实现 div a 里段落的背景颜色是红色，div b 里段落的背景颜色为绿色

#a p {
  background-color: red;
}
#b p {
  background-color: green;
}

例 2：

伪类选择器，实现 div c 在鼠标 hover 在上面的时候变蓝色

#c:hover {
  background-color: blue;
}

3.2 元素的浮动和定位布局

浮动

默认情况下，块元素（div）一行一个，内联元素（span）一列一个
内联元素无法定义宽高

浮动可以将元素向左或向右移动，直到它的边缘碰到框或另一个浮动元素为止

#test {
  /* 左浮动/右浮动 */
  float: left/right;

  /* 元素不会被向下移动以清除浮动/元素被向下移动以清除左浮动/元素被向下移动以清除右浮动/元素被向下移动以清除左右浮动 */
  clear: none/left/right/both;
}

例：三个块，一个靠页面左边，一个靠右，还有一个按照文档流排布

#child1 {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

#child2 {
  float: right;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

#child3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;

  /* 记得要加这一句，否则该块会与child1重合，且块内内容会被挤到child1下面 */
  clear: both;
}

如果想要作为 container 的元素包裹 child，在 container 的 CSS 样式中添加“overflow: hidden”

例：
实现一个大的 container 包裹四个 img。初始状态四个 img 都是模糊的，当将鼠标 hover 在上面的时候，img 变清晰

#container {
  overflow: hidden;
}
#container img {
  float: left;

  /* 透明度 */
  opacity: 0.1;
}
#container img:hover {
  opacity: 1;
}

定位

绝对/固定元素定位会生成一个块级框，不论该元素本身是什么类型。

#test {
  /* 相对定位/绝对定位/固定定位 */
  position: relative/absolute/fixed;

  /* 往上右下左偏移10px */
  top/right/bottom/left: 10px;
}

relative

relative：相对原先的位置做了偏移。

#test {
  position: relative;
  left: 20px;
}

注意，这种偏移不是 padding/margin，在偏移的部分也不能放任何东西

absolute

absolute：默认相对于浏览器的左上角进行坐标定位。若在相对元素中包含绝对定位，则参照物变为相对定位的元素（不算那个相对元素的偏移）

fixed

fixed：参照物有且仅有浏览器

3.3 CSS3 中动画和特效

transition

当元素从一种样式变换为另一种样式的时候的效果。使用 transition 属性。transition: 属性名 1 变化时长 1，属性名 2 变化时长 2…

例：在鼠标 hover 在一个块的时候将其颜色从绿色变成红色，将其宽度从，要求慢慢变，有一个过渡，持续时间是 3s

#div1 {
  background-color: green;
  width: 200px;
  height: 200px;

  /* 上下 左右 auto代表居中 */
  margin: 0 auto;

  /* 属性名1 变化时长1, 属性名2 变化时长2 */
  transition: background-color 3s, width 3s;
  /* 更简单的写法 */
  transition: all 3s;
}

#div1:hover {
  background-color: red;
  width: 100px;
}

animation

animation 属性可以完成复杂的动画功能，由一组或多组合成实现，每组之间用逗号隔开，共同作用于元素

/* 定义动画 */
@keyframes move {
  from {
    left: 0px;
  }
  to {
    left: 100px;
  }
}

#test {
  position: absolute;

  /* 使用动画move 持续时间5s 线性变化 次数2次 */
  animation: move 5s linear 2;
}

4. JavaScript 代码控制逻辑

4.1 JavaScript 代码使用方法

元素绑定事件
文档内嵌
外部链接

引入 js 文件时，如果不操作元素，放在 header 中；如果操作，放在 body 结束标签前

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- 外部链接 -->
    <script src="js1.js"></script>
  </head>

  <body>
    <!-- 内部绑定事件 -->
    <button onclick="alert('hello1')">按钮1</button>

    <!-- 内嵌，最终效果是自动执行 -->
    <script>
      alert('hello2');
    </script>
  </body>
</html>

4.2 定义与基本流程

number
char
bool
undefined
null
object

顺序结构选择结构循环结构

Js 代码前面出了问题，后面的逻辑不会执行，因此使用 try catch 包裹可能出错的代码，即使出错也不会中断

例：

let a = 'ok';
try {
  console.log(b);
} catch (error) {
  console.log(error.message);
}
console.log(a);

4.3 函数和常用对象

函数：

function functionName() {
  代码块;
}

常用对象：

内置
1. 数组
2. 字符串
3. Math
4. 日期
外置
1. BOM（浏览器对象模型）
2. DOM（文档对象模型）

4.4 BOM 和 DOM 对象

例：点击“大”，“中”，“小”改变段落字体大小。要求当前选中的大小改变超链接样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="box">
      <a href="javascript:;">大</a>
      <a href="javascript:;">中</a>
      <!-- 焦点元素的样式为ff，所以谁得到了这个class="ff"，谁就是焦点。默认为“小”的class为ff -->
      <a href="javascript:;" class="ff">小</a>
    </div>
    <p id="p1">balabala 123123</p>

    <script>
      let p1 = document.getElementById('p1');
      let aa = document.getElementsByTagName('a');

      aa[0].onclick = function () {
        // 清除当前的样式
        clearff();

        // 设置class属性为ff，这样的话样式就成了.ff的样式
        this.setAttribute('class', 'ff');

        // 字体设置为20号
        p1.style.fontSize = '20px';
      };
      aa[1].onclick = function () {
        // 清除当前的样式
        clearff();

        // 设置class属性为ff，这样的话样式就成了.ff的样式
        this.setAttribute('class', 'ff');

        // 字体设置为20号
        p1.style.fontSize = '15px';
      };
      aa[2].onclick = function () {
        // 清除当前的样式
        clearff();

        // 设置class属性为ff，这样的话样式就成了.ff的样式
        this.setAttribute('class', 'ff');

        // 字体设置为20号
        p1.style.fontSize = '10px';
      };

      function clearff() {
        for (let i = 0; i < aa.length; i++) {
          // 移除class属性
          aa[i].removeAttribute('class');
        }
      }
    </script>
  </body>
</html>

5. ES6 语法核心

5.1 变量的定义

let 和 const 定义之后可以防止重复再定义

// 正确
var a = 1;
var a = 2;

// 错误
let a = 1;
let a = 2;

const 还可控制修改

块级作用域

例：预期将三个按钮绑定不同的函数，点按钮 1 弹出 alert 1，点按钮 2 弹出 alert 2
，点按钮 3 弹出 alert 3

// 错误的写法，最终结果是点击哪一个都是 alert 3。
// 这是因为 ES5 是函数级作用域，在函数内 i 是不断变化的，所以取到最后的那个结果
var btns = document.getElementsByTagName('input');
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = function (e) {
    alert(i);
  };
}

// 正确的写法
...
for (let i = 0; i < btns.length; i++) {...}

5.2 解构赋值的用法

解构赋值是对数组和对象进行模式匹配，然后对其中的变量进行赋值

赋值两边的结构必须完全一样（数组赋值数组，对象赋值对象）
赋值的右边必须是个标准对象
赋值和解构必须在同一个语句中完成

例：

var { a, b } = { a: 1, b: 2 };
alert(a);
var [c, d] = [3, 4];
alert(c);

5.3 箭头函数与 forEach 的用法

箭头函数没有自己的 this，arguments，super

如果有且仅有一个参数，()可以不写
如果有且仅有一个语句并且是 return，{}可以不写

// 繁琐
add(12, function (x) {
  return x + 5;
});

//简单
add(12, (x) => x + 5);

this

箭头函数的 this 为父作用域的 this，不是调用时的 this

// alert undefined，this 是 window 对象
btn.onclick = function () {
  setTimeout(function () {
    console.log(this);
    alert(this.id);
  }, 1000);
};

// alert "btn"，this 是按钮对象
btn.onclick = function () {
  setTimeout(() => {
    console.log(this);
    alert(this.id);
  }, 1000);
};

5.4 模块化代码开发

ES6 结构模式严格，通过 import 和 export 实现模块间的依赖关系

export default Person;

export { PI as a, age as b, add as fn };

import Person, { a } from './m./comm.js';

6. Vue 组件化开发

6.1 使用脚手架构建项目

npm

使用 npm install 命令安装模块，安装好之后，会放在 node_modules 目录中，引入无需指定包路径：

var express = require('express');

安装分为本地安装（local）和全局安装（global）

本地安装	全局安装
npm install express	npm install express -g
安装包放在./node_modules 下	安装包放在/usr/local 或 node 安装目录下
通过 require()引入本地安装的包	可直接在命令行中使用

卸载、更新、搜索、发布、清空 npm 本地缓存、撤销某个版本的发布命令如下：

$ npm uninstall express
$ npm update express
$ npm search express
$ npm publish
$ npm cache clear
$ npm unpublish <package>@<version>

淘宝 npm 镜像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install <package>

安装 vue-cli

vue-cli 是一个脚手架工具，用于帮助快速构建项目

npm install vue-cli

6.2 项目结构和执行流程

构建好后项目结构如下所示

|-- build 构建脚本目录
|-- config 构建配置目录
|-- node_module
|-- src
    |-- assets 资源目录
    |-- component 组件目录
    |-- router 路由目录
    |-- App.vue 页面级Vue组件
    |-- main.js 页面入口js文件
|-- static 静态文件目录
|-- test 测试文件目录
|-- .eslintrc.js ES语法检查配置
|-- index.html 入口页面
|-- package.json 项目描述文件

6.3 基础

vue 数据绑定

例 1：将 tip 数据绑定到视图。在 data 中定义，视图用“{{ tip }}”

<template>
  <div class="my_page">
    <p>{{ tip }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      tip: '今天天气很好',
    };
  },
};
</script>

<style lang="less" scoped>
//@import url(); 引入公共css类
</style>

例 2：动态数据绑定

<template>
  <div class="my_page">
    <!-- 在{{}}里可以直接执行逻辑 -->
    <div>{{ bln ? '判断显示' : '判断隐藏' }}</div>
    <!-- 若元素的属性是动态的，在属性前加“:”，如class是根据id变化的，所以class前加“:” -->
    <!-- 注意，class里的内容即使不是字符串（如id）一样被""包裹，而真正的字符串还要再套一层字符串 -->
    <div :class="'c' + id">{{ str }}</div>
    <!-- 若绑定的是带HTML标签的内容，使用v-html -->
    <div v-html="str2"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      bln: true,
      str: '动态绑定样式',
      str2: '<b>带HTML标记内容</b>',
      id: 1,
    };
  },
};
</script>

例 3：列表的绑定

<template>
  <div class="my_page">
    <ul>
      <li><span>姓名</span><span>性别</span><span>分数</span></li>
      <!-- 使用v-for遍历数据，单个元素 in 元素集合 -->
      <li :key="item.id" v-for="item in stu">
        <span>{{ item.name }}</span>
        <span>{{ item.sex }}</span>
        <span>{{ item.score }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      bln: true,
      str: '按钮事件控制的内容',
    };
  },
  // 事件函数clk定义在methods里，一般采用匿名方式
  methods: {
    clk: function (e) {
      this.bln = !this.btn;
    },
  },
};
</script>

例 4：子组件向父组件传值

vue 事件绑定

例：点击按钮控制字符串是否显示，按钮上的提示信息要跟着变化

<template>
  <div class="my_page">
    <div v-show="bln">{{ str }}</div>
    <!-- @click类似于以前的onClick @click="clk()"是单击绑定了事件函数clk() -->
    <button @click="clk()">{{ bln ? '隐藏' : '显示' }}</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      bln: true,
      str: '按钮事件控制的内容',
    };
  },
  // 事件函数clk定义在methods里，一般采用匿名方式
  methods: {
    clk: function (e) {
      this.bln = !this.btn;
    },
  },
};
</script>

vue 组件

调用格式 1（用得不多）：在一个 Vue 文件内再定义一个组件，一个 Vue 文件本身是一个组件，如果想再定义一个组件格式如下

// 组件定义：tagName为组件名，options为配置选项
Vue.component(tagName, options);

<!-- 组件调用 -->
<tagName></tagName>