现代前端技术解析：前端三层结构与应用

最新推荐文章于 2021-09-11 01:17:11 发布

JOY酷酷

最新推荐文章于 2021-09-11 01:17:11 发布

阅读量303

点赞数

分类专栏： Web前端读书笔记

本文链接：https://blog.csdn.net/baidu_27438681/article/details/82318969

版权

Web前端同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

读书笔记

12 篇文章 0 订阅

订阅专栏

结构层 HTML

DOCTYPE

<!DOCTYPE html> 声明：

表示兼容 HTML 的所有历史版本以及最新的 HTML5 版本，不支持HTML5中的DOCTYPE定义的浏览器仍然会使用HTML4.01等历史版本的兼容模式来进行文档解析。

语义化标签

在恰当的位置上使用语义恰当的标签

用正确的标签做正确的事情，杜绝全部使用无任何语义的 <div> 标签来实现嵌套
尽量使用带有语义化结构的标签
使项目维护人员更容易对代码进行分块，便于阅读理解

标签的分类

行内元素：默认宽度由内容宽度决定
<a> <b> <img> <span> <input> <button> <select> <strong>
块级元素：默认宽度为父元素宽度的 100%
<div> <ul> <ol> <li> <dl> <dt> <dd> <h1> … <h6> <p> <table>
空元素：不显示内容，但对页面解析有着其他作用
<br> <hr> <link> <meta> <area> <base> <col> <command> <embed> <keygen> <param> <source> <track>

H5 新增标签

<header></header> 页面头部元素
<video src=""></video> 视频
<source /> 插入视频或音频的属性配置参数
<article></article> 描述段落文章
<time></time> 输出时间
<datalist></datalist> 可选数据列表，配合 <input> 使用
<progress></progress> 显示 JavaScript 执行进度
<command /> 定义命令按钮

H5 标签新增属性

<input> 新增 atuocomplete placeholder atuofocus required
<type> 新增 email url number range color search date

行为层 JavaScript

ECMAScript 标准

ECMAScript 5

ECMAScript5 内容主要包括严格模式、JSON 对象、新增 Object 接口、新增 Array 接口和 Function.prototype.bind。
JSON
- JSON.parse() 字符串转 JSON
- JSON.stringify() JSON 转字符串
- JSON.toString() 调用 Object 上的 toString 方法，获取 JSON 对象的值转为字符串
- JSON.valueOf() 获取某个对象的值
- JSON.toLocaleString() 与 JSON.toString() 类似，但对于 Date 对象，会返回格式化后的时间字符串
bind() 绑定函数，重新绑定 this 变量，将第一个参数作为 this
String.trim() 去掉多余空格
Date.now() Date.toJSON()

ECMAScript 6

块级作用域变量声明关键字 let、const
- const 必须进行初始化赋值，一旦赋值后不能进行二次修改赋值
- 在全局作用域下用 let、const 声明的变量不会作为属性添加到全局作用域对象里
- 使用 let、const 执行语句比 var 快约 65%
字符串模板
```
let test = '000'
let str = `111 ${test}
    222
    `;
```
不会压缩空格和换行，按照原有格式输出
解构赋值
- 数组解构：
  let [a, b, c] = [11, 22]
  console.log© //undefined
  按顺序执行，常量个数不够的，会被定义为 undefined; 个数超出的会被舍弃。
- 对象解构：
  let [one, two, three] = {two:2, three:3, one:1}
  根据对象引用的键名赋值，无视顺序，如果有已经声明的对象，会当做重复声明处理（报错）
数组新特性
- ... 复制：
```
    const arr = [1, 2, 3];
    const arr1 = [...arr];
```
- keys() 遍历键名
- values() 遍历键值
- entries() 遍历键值对
函数参数
增加了默认参数、不定参数和拓展参数
箭头函数
=> 函数内的 this 与外部相同
添加了 class 关键字（类）
import/export module（模块）

循环与迭代器

for … in 遍历对象
for … of/map/forEach 遍历数组
迭代器 iterator

let iterator = numbers[Symbol.iterator]();
iterator.next();  // 返回 {done: false, value:item} => {循环遍历是否完成，next()调用获取到的值}

生成器 Generator
集合类型 Map Set WeakMap WeakSet
- Set: 增强的数组类型
- Map: 增强的对象类型
- WeakSet: 只存储对象类型的元素，不能遍历，没有 size
- WeakMap: 只接受基本类型的值作为键名，没有 keys, values, entries 等遍历方法
**JS 可能产生内存泄漏的场景：**闭包函数，全局变量，对象属性循环引用，DOM节点删除时未解绑事件，Map和Set的属性直接删除。（Map和Set使用的是强引用，属性元素被移除时回收机制无法回收占用的内存）

Promise、Symbol、Proxy 增强类型

Promise
Promise.then 解决异步的多层嵌套问题

let promise = new Promise(function(resolve, reject){
    ...
});
promise.then(function(msg) {
    return msg;
});

Symbol
- ES6 新增的基本数据类型，Symbol 变量是不能被重复声明的
- 一般作为属性键值，能避免对象属性键的命名冲突
```
let object = {};
let name = Symbol();
object[name] = 'ouven';
```

Proxy
可以拦截某个对象的属性访问方法，然后重载对象的’.'运算符

let object = new Proxy({}, {
    get: function(target, key, receiver) {
        return Reflect.get(target, key, receiver);
    },
    set: function(target, key, value, receiver) {
        return Reflect.set(target, key, value, receiver);
    }
});

统一码
- Unicode（目前不建议使用）
进制数支持
- 二进制 0b1111
- 八进制 0o1111
Reflect 对象和 tail calls 尾调用
- Reflect 对象用于对原有对象进行赋值和取值操作，但不会触发 getter 和 setter 调用(使用=对对象进行赋值或取值操作会自动触发getter或setter方法）
- tail calls 保证函数尾部调用时调用栈有一定的长度限制

ECMAScript 7+

幂指数操作符
x**y 相当于 Math.pow(x, y)
Array.prototype.includes
判断数组里是否包含某元素

异步函数 async/await

const asyncFunction = async function() {
    const numbers = [1, 2, 3];
    for(let number of numbers) {
        await sleep(3000);
        console.log(number);
    }
}
let result = asyncFunction();
console.log('finish');
/*
finish
1
2
3
*/

异步实现的方法： setTimeout、事件监听、观察者模式、$.Deferred、Promise、Generator、async/await、第三方 async 库

TypeScript

强类型支持
- 声明时需要定义变量的类型
Decorator 装饰器特性
- 用来注解 class、property、method、parameter

表现层 CSS

CSS 选择器

选择器类型：

id选择器，类选择器，元素选择器，组合选择器，伪类，伪元素
选择器属性优先级：

!important > 内联 style(1000) > #id(100) > .class(10) > element(1)
伪类和伪元素的区别：
- 伪元素会在HTML中添加before或after之类内容
- 伪类表示元素在用户不同操作下的状态或者选择指定某些元素的描述，如:visited、:hover、:first-child、:nth-child、:enable、:checked

前端界面技术

CSS 样式统一化

reset: 将元素的 margin 和 padding 都设为 0
normalize: 将元素的 margin 和 padding 都设为 5px
neat: 将与文本相关的元素的 margin 和 padding 都设为 5px，其余元素设为 0

CSS 预处理

预处理工具：SASS、LESS、Stylus、postCSS
一般具有的特性：
1. 变量声明和计算
2. 语法表达式：if-else、for循环等
3. 函数处理
4. 属性的继承
5. 兼容性补全

动画实现

JavaScript直接实现动画
可伸缩矢量图形SVG动画
CSS3 过渡动画 transition
CSS3 animation
Canvas 动画元素
requestAnimationFrame。

响应式网站开发技术

响应式设计

根据不同设备浏览器尺寸或分辨率展示不同的页面内容

实现方式

通过前端或后端判断 userAgent 来跳转不同的页面
使用 Media query 媒体查询等手段让页面根据不同设备浏览器自动改变页面布局和显示
如：使用 bootstrap 响应式自动布局框架

选择哪种实现方式应考虑：
* 能否使用同一个站点域名避免跳转
* 能否保证移动端加载的资源内容最优
* 如何做移动端和桌面浏览器的差异化功能
* 如何根据更多的信息进行更加的灵活判断，而不仅仅依靠 userAgent

结构层响应式

图片响应式：通过 Media query 判断、、模板判断、图片服务器判断

表现层响应式

响应式布局（PC 端优先，扩展到移动端）
- 通过栅格系统解决百分比方式布局
屏幕适配布局（主要针对移动端，内容按照屏幕大小自动缩放比例的布局方式）
- 通过 zoom 属性或 rem 单位

行为层响应式

分为 JavaScript 内容在前端引入和在后端引入两种情况。

JOY酷酷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
现代前端技术解析：前端三层结构与应用

结构层 HTMLDOCTYPE 声明：表示兼容 HTML 的所有历史版本以及最新的 HTML5 版本，不支持HTML5中的DOCTYPE定义的浏览器仍然会使用HTML4.01等历史版本的兼容模式来进行文档解析。语义化标签在恰当的位置上使用语义恰当的标签 1. 用正确的标签做正确的事情，杜绝全部使用无任何语义的标签来实现嵌套 2. 尽量使用带有语义化结构的标签...
复制链接

扫一扫