Web前端开发高级前端技术（高级开发程序篇）

时间 2020-01-30

标签 web 前端开发高级技术程序栏目 HTML 繁體版

原文原文链接

（给达达前端加星标，提高前端技能）javascript

内容有点多，也请你静下来，慢阅读，从此多多关照。css

说到web前端开发高级，必需要掌握的是HTML和css代码的优化，前端优化很重要，这是成功你进阶的道路上须要重视的知识点，面对代码优化，首先咱们要学习的就是前端命名规范，HTML代码优化，和css代码优化。html

前端命名规范是很重要的，一直说很重要，当你用过别人的代码进行重构时，你会知道，若是你看到一长串代码，不了解以前的人是怎么写的，开局全靠猜，结局就是不断地浪费时间。前端

掌握前端优化目录的学习vue

前端命名规范，前端结构的组织，文件的命名规范，在一个项目中代码的组织结构要清晰易懂，同类型文件能够归类到到相同的文件夹中，文件命名规则须要统一且命名要有意义。这里要有意义是指命名要通俗易懂，英文单词能够写缩写，没必要故步自封，写那么长的单词。java

命名规范在前端领域，涉及HTML，css，JavaScript，在HTML代码全部的标签名和属性应该都为小写，属性值应该用引号括起来。元素的id和class都要按照规定命名，代码缩进时要缩进，进行格式化，让代码美观，有时能够给HTML代码添加必要注解。jquery

对于css命名的规范，尽可能使用class选择器进行样式的定义，类命名时取父元素的class名做为前缀，使用-符号进行链接。类名与样式之间以空格进行分割。linux

对于JavaScript命名规范，变量名是区分大小写，第一个字符是不容许为数字的，不容许是空格，不容许其余标签符号，尽可能使用有意义的命名，不要使用JavaScript的关键词，或者是保留字。webpack

进行前端代码的优化，优化HTML代码为了可以使网站更好的搜索，让用户更快速搜索到咱们的网站，写好HTML代码使用正确的闭合HTML标签，进行HTML代码层级间的合理缩进，属性值须要使用双引号，结构与样式进行有效的分离，结构与行为进行有效的分离。nginx

进行HTML语义化标签，HTML5提供的一些新的语义化元素来明确一个web页面的不一样部分，有：

优化前端效果，能够删除多余容器元素，让代码层次少，避免使用table进行页面的布局，换成用div+css的样式布局。

css代码优化，在各个浏览器中，相同元素解析的结果不一样，就须要手动重置一些样式。

去除标签的默认样式，如p，li，input等。
HTML5新标签设置为display:block。

重置一些元素的样式如超连接，字号等样式。

css样式选择器的优先级

对于css样式选择器，优先级高的会覆盖优先级低的。

第一，id选择器的权重为100，第二，类选择器的权重为10，第三，标签选择器的权重为1。

注意，css样式中尽可能不要使用id选择器，会下降代码的复用性，尽可能不要使用!important，会下降代码的复用性，尽可能减小子选择器的层级。

css样式多余样式去除，和结构优化

定义简洁的css样式规则，合并相关css样式规则，定义简洁的属性值，合并相同的，删除无效的。

sprite拼合图

css sprite，也叫 css 精灵，雪碧图。

是一种将雪散的背景图合并成一张大图，再次利用css的background-position属性进行背景的定位从而达到减小图片请求数量达到加快加载速度的网页应用处理方式。

background属性

background-color，描述规定要使用的背景颜色
background-position，描述规定背景图片的位置
background-size，描述规定背景图片的尺寸
background-repeat，描述规定如何重复背景图像
background-origin，描述规定背景图片的定位区域
background-clip，描述规定背景的绘制区域
background-attachment，描述规定背景图片是否固定或者随着页面的其他部分滚动
background-image，描述规定要使用的背景图像

background-position属性

top，left，center，right，center等等，top表示垂直位置最头部，bottom表示垂直位置最底部，left表示水平位置最左边，center表示水平位置居中，right表示为水平位置最右边。

x% y%


第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
若是您仅规定了一个值，另外一个值将是 50%。

xpos ypos


第一个值是水平位置，第二个值是垂直位置。
左上角是 0 0。
单位是像素 (0px 0px) 或任何其余的 CSS 单位。
若是您仅规定了一个值，另外一个值将是50%。
您能够混合使用 % 和 position 值。

css sprite的制做工具

css sprite制做工具，photoshop和打包工具webpack来制做。

打包工具，如今流行的不少前端打包工具都有支持css sprite的集成，如

webpack中只要安装webpack-spritesmith依赖，而后在配置文件中引用依赖var SpritesmithPlugin = require('webpack-spritesmith'),最后在配置文件中添加代码。

代码压缩，打包工具

前端优化，压缩JavaScript和css是很是重要的。目前最经常使用的压缩JavaScript代码的工具之一有UglifyJS，它会分析JavaScript代码语法树，理解代码含义，从而能作到诸如去掉无效代码，去掉日志输出代码，缩短变量名等优化。

在webpack中接入UglifyJS须要经过插件的形式，UgllifyJsPlugin是比较经常使用的插件，经过在webpack的配置文件webpack.config.js中加入如下代码便可。

压缩css代码经常使用的是CSSNANO，是基于PostCSS的，可让咱们的代码达到提高加载速度和代码混淆的做用。

图片的预加载

预加载简单来讲就是将全部所需的资源提早请求加载到本地，这样须要用到时就能够直接从缓存中取资源了。

图片的懒加载

首屏的加载，就是用图片懒加载技术，便是到可视区域再加载。

图片懒加载，使用jquery.lazyload.js，该js是一个基于Jquery的懒加载插件，里面封装了懒加载用到的方法以及实现，第二种是echo.js，它是一款很是简单实用轻量级的图片延时加载插件。

JavaScript代码优化

JavaScript代码可维护性

什么是代码与结构分离呢

代码与结构分离，就是把HTML代码和JavaScript代码进行分离，第一在HTML中分离JavaScript，第二，在JavaScript中分离HTML。

什么是样式与结构分离呢

样式与结构分离，就是把css代码和HTML代码进行有效分离。

什么是数据与代码分离呢

数据与代码分离，也能够认为是先后端分离的表现，后端接口只负责返回json格式的数据，不会返回带标签甚至是带样式或者带JavaScript的组合数据。

JavaScript的代码可调式性

代码可调式性，能够用console.log，debugger，alert，try...catch捕获异常来进行JavaScript的调试。

console.log，即经过在JavaScript中添加console.log(msg)

msg为须要打印的信息，能够是变量，字符串，变量类型能够是数组，对象，数字等等。

debugger关键字用于中止执行JavaScript，并调式函数，这个关键字与调式工具中设置断点的效果是同样的。

alert和console.log同样，alert经过在JavaScript中添加alert(msg)，Msg为须要弹窗的信息，值得一提的是这个弹框是强制阻塞的，只要关闭该弹窗才能解除阻塞，因此要谨慎使用。

try...catch，用于try...catch...finally来进行异常的捕获，try代码块表示可能发生异常的代码，catch表示捕获异常对象，finally不管是否发生异常都执行。

evalError，typeError，syntaxError
referenceError，rangeError，URLError

JavaScript dom的优化

提高文件的加载速度，合并JavaScript代码，尽可能少用script标签，无堵塞加载JavaScript，经过给script标签增长defer属性或者是async属性来实现

<script src="file.js" defer></script>

动态建立script标签来加载，JavaScript dom操做优化，dom访问和修改，都说访问dom耗性能，用循环访问也是如此，因此要减小dom的访问。

重排和重绘

用cssText改变样式，批量修改dom。

JavaScript dom 脚本加载优化

学习前端高级层次，掌握webpack入门

modules with dependencies webpack static assets

webpack是一个module bundler模块构建工具，因为JavaScript应用程序的复杂性不断增长，构建工具已经成为web开发中不可或缺的一部分。

它帮助咱们去打包，编译和管理项目须要的众多资源文件和依赖库。webpack支持CommoonJS,AMD和ES6模块系统，而且兼容多种JS书写规范，能够处理模块间的依赖关系，因此具备更强大的JS模块化的功能，它能压缩图片，对css, js 文件进行语法检查，压缩，编译打包。

构建工具没有标准

如今开发者能够用的构造构建工具备

webpack,gulp,bowserify,npm scripts,grunt等。

缺点有，不适合web开发的初学者，对于css，图片，以及其余非Js资源文件时，须要先混淆处理，文档不够完善，变化很大，不一样版本的使用方法存在较大的差别。

安装

全局安装，用于全局使用命令行打包文件

//安装全局webpack
npm install webpack -g


//安装全局webpack-cli
npm install webpack-cli -g

新建项目文件夹

进入项目文件夹，打开cmd命令行窗口

webpack -v
显示版本号，说明webpack安装成功，能够在全局任何目录下使用

基本应用

SPA是什么，它是单页应用程序。

single page web application，是webpack打包的典型应用，一个典型的SPA应用，主要由如下几个部分组成。

index.html主文件，js文件，有多个js文件，能够经过webpack合并打包为一个文件，css文件，能够多个css文件，能够经过webpack合并打包为一个文件。图片能够经过webpack压缩优化。

新建src文件夹，该文件夹存放开发用的文件，在src目录下建立文件。

新建dist文件夹

该文件存放打包后的文件，能够先不建立，打包时能够自动建立。

打包，webpack-mode development，通过打包后，已经根据三个js依赖关系，打包合并为dist/main.js。

webpack --output文件名，输出文件路径

webpack --config文件名，用于指定其余配置文

默认为webpack.config.js

webpack --mode模式，打包模式 production，生成模式，developement开发模式。

webpack --watch 监听文件变化并自动打包

webpack -p 压缩混淆脚本

webpack -d 生成Map映射文件

webpack --progress 显示进度，打印出编译进度的百分比值

webpack --color 用不一样颜色标记不一样的信息

webpack --profile 显示每一步编译的具体时间，可帮助优化构建性能

webpack --hot 热替换

webpack --bail 若是编译过程出现error，立马中止编译

配置文件入门

经过定义配置文件进行复杂操做，文件名webpack.config.js

一个配置文件的基本结构：

entry，入口定义入口文件，默认文件./src/index.js

output，输出定义出口文件，默认文件./dist/main.js

resolve，解析路径映射，省略后缀名等

module，模块定义不一样loader，让webpack可以处理非JavaScript模块

plugins，插件扩展webpack功能

devServer，开发服务器用于配置webpack-dev-server选项

简单的配置文件

hello wrold例子：

修改webpack.json文件

配置详细entry和output

entry入口配置是指页面中的入口文件，默认入口文件./src/index.js

output出口配置是指生成的文件输出到哪一个地方去，./dist/main.js

path，输出路径，filename，输出文件名

module，webpack只能打包js文件，没法识别其余语法的文件，若是要让webpack打包其余文件，首先须要让webpack识别不一样的文件。

loader分类

分类

说明

转换编译

script-loader，babel-loader，ts-loader，coffee-loader

处理样式

style-loader，css-loader，less-loader，sass-loader，postcss-loader

处理文件

raw--loader，url-loader，file-loader

处理数据

csv-loader，xml-loader

处理模板语言

html-loader，pug-loader，jade-loader，markdown-loader

清理和测试

mocha-loader，eslint-loader

经常使用loader

loader

说明

css-loader

解析css语句

style-loader

将css-loader解析后的文本，添加<style>标签

babel-loader

将ES6+、JSX语法转成ES5低版本语法

url-loader

url-loader对未设置或者小于limit byte设置的图片以base64的格式进行转换
对于大于limit byte的图片用file-loader进行解析

file-loader

解析项目中的url引入（包括img的src和background的url）
修改打包后文件引用路径，使之指向正确的文件

less-loader

less编译器

vue-loader

Vue也推出了本身的vue-loader，能够方便的打包 .vue文件的代码。
在vue-cli（快速构建单页应用的脚手架）中获得应用。

babel loader

babel是一个js编译器，它是经过语法转换器支持最新版本的JavaScript，这插件容许你使用新语法，无需等待浏览器支持。

使用babel首先要配置.babelrc文件，该文件用来设置转码规则和插件，存放在项目的根目录下。

在linux系统中，rc结尾的文件一般表明运行时自动加载的文件、配置等等。

在.babelrc配置文件中，主要是对预设和插件进行配置。

配置项

说明

presets

预设对js最新的语法糖进行编译，并不负责转译新增的api和全局对象。例如：let/const能够被编译，而String.includes、Object.assign等对象新增方法并不能被编译。
经常使用转译器：babel-preset-env、babel-preset-es2015（201六、2017）、babel-preset-latest等

plugins

插件控制如何转换代码，babel默认只转换新的js语法，而不转换新的API，好比 Set,，Maps，Symbol，Promise 等全局对象，transform-runtime 用来解决以上问题

插件能够扩展webpack的功能，Loader不能作的处理都能交给plugin来作。

resolve配置webpack如何寻找模块对应的文件，webpack在启动后会从配置的入口模块触发，找出全部依赖的模块，默认会采用模块化标准里约定号的规则去寻找。

属性

说明

alias

（译：别名）经过别名将原来导入路径映射成一个新的导入路径

extensions

（译：扩展）数组导入模块时，能够省略的文件后缀名

其余配置

配置项

说明

devtool

是否生成以及如何生成sourcemap

devserver

开启一个本地开发服务器

watch

监听文件变化并自动打包

watchoption

用来定制watch模式的选项

performance

打包后命令行如何展现性能提示，若是超过某个大小是警告仍是报错

webpack-dev-server

它是一个小型的web服务器，能够自动监视项目文件的变化，自动刷新浏览器，其HMR方式只替换更新的部分，而不是重载页面，大大提升了刷新效率

配置项

说明

默认值

inline

自动刷新
当咱们对业务代码作了一些修改，保存（ctrl+s）后，页面会自动刷新，所作的修改会直接同步到页面上，不须要手动刷新页面或重启服务

true

hot

热模块替换
不用配置（一般是经过命令行 --hot 选项启动，会自动加载webpack.HotModuleReplacementPlugin插件）

true

host

主机地址

open

自动打开浏览器，能够指定浏览器，例如：--open 'Chrome'

false

port

端口

默认8080

overlay

编译出错的时候，在浏览器页面上显示错误

false

stats

用来控制编译的时候shell上的输出内容
stats: "errors-only" 只打印错误
还有"minimal"，"normal"，"verbose"

compress

true：对全部服务器资源采用gzip压缩

false

contentBase

指定了服务器资源的根目录，
若是不写入contentBase的值，那么contentBase默认是项目的目录

"./"

historyApiFallback

它使用的是HTML5 History Api，任意的跳转或404响应能够指向 index.html 页面

true

例子：

运行

npm start

运行后，webpack-dev-server将开始运行，打开浏览器，直接输入127.0.0.1:8080/index.html，打包后的页面已经可使用了

注意：
index.html内无需引入main.js文件，打包后的index.html文件中会自动引入该文件。

webpack-dev-server运行后，浏览器中输出的页面，都是运行在内存中的，只有build之后，才会在dist目录中获得最终的结果文件。

ES6基础

ECMAScript和JavaScript究竟是什么关系？

ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。ESMAScript6的简称为es6是JavaScript语言的下一代标准。

symbol数据类型，Symbol是一种惟一标识符，能够用做对象的惟一属性名，这样就不会有人改写或覆盖你设置的属性值了。

Symbol做为对象属性名

Symbol永远不相等，建立它们的时候传入相同值的参数，也不相等，所以，可借助此特性解决属性名的冲突问题，也是该数据类型存在的主要用途。

Symbol 值不能与其余类型的值进行运算，能够显式转为字符串。

使用场景

为某个对象添加属性，新添加属性与原有属性重名，新添加的属性仅做为标记使用，不须要用遍历器遍历处理。

let与const

用var声明的变量会形成全局污染。

let用来声明变量，要先声明后使用

const

const声明一个只读的常量，一旦声明，常量的值就不能改变。

特性

var

let

const

做用域级别

函数级

块级

初始值

否

声明时必须赋值

变量提高

是

否

重复声明

是

否

变量的解构赋值

set与Map

js原有的2种数据结构，array和object；es6新增两种数据结构，set和map

set数据结构

set相似于数组，成员的值都是惟一的，没有重复的值。

主要用于数据的去重。

set自己就是一个构造函数，用来生成set数据结构。set实例时一个类数组的对象。

方法

说明

add(value)

添加某个值，返回：Set结构自己

delete(value）

删除某个值，返回：bool（删除是否成功）

has(value)

表示该值是否为Set的成员返回：bool

clear()

清除全部成员，返回：无

map数据结构，map也是一个数据集合，与数据相似。

它是对object的一个补充，map的key能够是任意类型，而传统对象的key必须是字符串。

遍历object获得的结果是无序的，遍历Map获得的结果是有序的

方法

说明

clear

从Map中移除全部元素

delete

从Map中移除指定的元素

forEach

对Map中的每一个元素执行指定操做

get

返回Map中的指定元素

has

若是Map包含指定元素，则返回 true

set

添加一个新建元素到Map

toString

返回Map的字符串表示形式（序列化）

valueOf

返回指定对象的原始值

array set map

类别

Array

Set

Map

长度

arr.length

set.size

map.size

增

arr.push(新增值)

set.add(4)

map.set('t', 1)

删

arr.splice(索引,删除数量)

set.delete(2)

map.delete('t')

改

arr.splice(索引,删除数量,[新增值])

遍历

map.set('t',2)

查

遍历

set.has(1)

map.has('t')

清空

arr = []

set.clear()

map.clear()

共同变量方法

方法

说明

keys()

返回键名的遍历器

values()

返回键值的遍历器

entries()

返回键值对的遍历器

forEach()

使用回调函数遍历每一个成员

箭头函数，匿名函数

参数格式

箭头函数中的this

函数的扩展

对象的扩展

在es6中容许向对象直接写入变量和函数，做为对象的属性和方法。

es6中容许使用表达式做为对象属性，而且函数名称定义也能够采用相同的方法。

setter和getter。

方法名称

方法描述

Object.is()

比较两个值是否相等

Object.assign()

用于将对象进行合并

Object.getOwnPropertyDescriptor

返回对象属性的描述

Object.keys()

返回一个数组，包括对象自身的全部的可枚举属性

数组的扩展

方法

方法描述

copyWithin(target，start，end)

在当前数组内部，将指定位置的成员复制到其余位置（会覆盖原有成员），而后返回当前数组。也就是说，使用这个方法，会修改当前数组。参数说明：
target（必需）：从该位置开始替换数据。负值:倒数。
start（可选）：从该位置开始读取数据，默认:0。负值:倒数。
end（可选）：到该位置前中止读取数据，默认等于数组长度。负值:倒数。

find()

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，全部数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，而后返回该成员。若是没有符合条件的成员，则返回undefined。

findIndex()

findIndex方法的用法与find方法很是相似，返回第一个符合条件的数组成员的位置，若是全部成员都不符合条件，则返回-1。

fill()

fill方法使用给定值，填充一个数组,fill方法用于空数组的初始化很是方便。数组中已有的元素，会被所有抹去，若是填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

includes()

该方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法相似。

ES6高级操做

promise对象

JavaScript自己就是单线程的，因此为了解决单线程带来的问题，在异步编程中，许多操做都会放在回调函数中，同步与异步的混杂，过多的回调嵌套都会让代码变得难以维护。