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

说到web前端工程师高級，务必要把握的是HTML和css编码的提升，前端开发提升很关键，它是取得成功你升阶的路面上必须高度重视的知识要点，应对代码设计，最先人们要学习培训的就是说前端开发命名规范，HTML代码设计，和css编码优化。

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

掌握前端优化目录的学习

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

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

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

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

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

进行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，syntaxErrorreferenceError，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资源文件时，需要先混淆处理，文档不够完善，变化很大，不同版本的使用方法存在较大的差异。

安装

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

//安装全局webpacknpm install webpack -g
//安装全局webpack-clinpm 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分类

常用loader

babel loader

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

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

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

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

插件可以扩展webpack的功能，Loader不能做的处理都能交给plugin来做。

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

其他配置

webpack-dev-server

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

例子：

运行

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声明一个只读的常量，一旦声明，常量的值就不能改变。

变量的解构赋值

set与Map

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

set数据结构

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

主要用于数据的去重。

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

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

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

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

array set map

共同变量方法

箭头函数，匿名函数

参数格式

箭头函数中的this

函数的扩展

对象的扩展

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

es6中允许使用表达式作为对象属性，并且函数名称定义也可以采用相同的方法。

setter和getter。

数组的扩展

ES6高级操作

promise对象

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

promise对象用于处理异步操作的，异步处理成功了就执行成功的操作，异步处理失败了就捕获错误或者是停止后续操作。

一个promise代表是一个任务结果，这个任务有可能完成没完成。promise模式唯一需要的一个接口是调用then方法，它可以用来注册当promise完成或者失败时调用的回调函数，可以把promise对象看成一条工厂的流水线。

promise是一个类，需要New实例化：

then方法

then方法是promise原型上的方法，它把原来的回调写法分离出来了。

iterator方法

Iterator遍历器是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署Iterator接口，就可以完成遍历操作。

array，set，map，string都是可迭代对象

它们原型中都有一个symbol.iterator方法，通过调用symbol.iterator方法来获取默认迭代器。

generator是es6提供的一种异步编程解决方案。

执行函数后，返回的是一个指向内部状态的指针对象，yield表达式是暂停执行的标记，next方法可以恢复执行。

yield表达式在Generator中是作为一个暂停标志，当碰到yield时，函数暂停执行，等到下一次next()执行时，函数才从当前yield位置开始执行。

本文来源于：Web前端开发高级前端技术（高级开发程序篇）-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。