292020-7

让你的 commit 更有价值

提交规范

AngularJS 在开发者文档中关于 git commit 的指导说明，提到严格的 git commit 格式规范可以在浏览项目历史的过程中看到更易读的信息，并且能用 git commit 的信息直接生成 AngularJS 的 change log 。

commit messages 格式规范

commit messages 由 header 、body 、footer 组成。

header 又包含 type 、scope 、subject 。header 是必需的，不过其中的 scope 是可选的。

body 和 footer 可以省略。

// 空行

<body>

// 空行

注：为了能在 github 以及各种 git 工具中看得更清晰，commit messages 的每一行都不要超过 100 个字符。

Header

Type

类型必须是以下几种之一：

feat: 新功能

fix: bug 修复

docs: 仅修改文档

style: 修改格式（空格，格式化，省略分号等），对代码运行没有影响

refactor: 重构（既不是修 bug ，也不是加功能）

build: 构建流程、外部依赖变更，比如升级 npm 包、修改 webpack 配置等

perf: 性能优化

test: 测试相关

chore: 对构建过程或辅助工具和库（如文档生成）的更改

ci: ci 相关的更改

除此之外，还有一个特殊的类型 revert ，如果当前提交是为了撤销之前的某次提交，应该用 revert 开头，后面加上被撤销的提交的 header，在 body 中应该注明： This reverts commit <hash>. ，hash 指的就是将要被撤销的 commit SHA 。

// 例如

revert: feat(user): add user type

This reverts commit ca16a365467e17915f0273392f4a13331b17617d.

Scope

scope 可以指定提交更改的影响范围，这个视项目而定，当修改影响超过单个的 scope 时，可以指定为 * 。

Sbuject

subject 是指更改的简洁描述，长度约定在 50 个字符以内，通常遵循以下几个规范：

用动词开头，第一人称现在时表述，例如：change 代替 changed 或 changes

第一个字母小写

结尾不加句号（.）

Body

body 部分是对本地 commit 的详细描述，可以分成多行。

跟 subject 类似，用动词开头，第一人称现在时表述，例如：change 代替 changed 或 changes。

body 应该说明修改的原因和更改前后的行为对比。

Footer

footer 基本用在这两种情况：

不兼容的改动（ Breaking Changes ）,通常用 BREAKING CHANGE: 开头，后面跟一个空格或两个换行符。剩余的部分就是用来说明这个变动的信息和迁移方法等。

关闭 Issue, github 关闭 Issue 的例子

// BREAKING CHANGE: 的例子

BREAKING CHANGE: isolate scope bindings definition has changed and

the inject option for the directive controller injection was removed.

To migrate the code follow the example below:

Before:

scope: {

myAttr: 'attribute',

myBind: 'bind',

myExpression: 'expression',

myEval: 'evaluate',

myAccessor: 'accessor'

}

After:

scope: {

myAttr: '@',

myBind: '@',

myExpression: '&',

// myEval - usually not useful, but in cases where the expression is assignable, you can use '='

myAccessor: '=' // in directive's template change myAccessor() to myAccessor

}

The removed `inject` wasn't generaly useful for directives so there should be no code using it.

// Closes Issue 例子

Closes #2314, #3421

完整的例子

例一: feat

feat($browser): onUrlChange event (popstate/hashchange/polling)

Added new event to $browser:

- forward popstate event if available

- forward hashchange event if popstate not available

- do polling when neither popstate nor hashchange available

Breaks $browser.onHashChange, which was removed (use onUrlChange instead)

例二: fix

fix($compile): couple of unit tests for IE9

Older IEs serialize html uppercased, but IE9 does not...

Would be better to expect case insensitive, unfortunately jasmine does

not allow to user regexps for throw expectations.

Closes #392

Breaks foo.bar api, foo.baz should be used instead

例三: style

style($location): add couple of missing semi colons

查看更多例子

规范 commit message 的好处

首行就是简洁实用的关键信息，方便在 git history 中快速浏览

具有详实的 body 和 footer ，可以清晰的看出某次提交的目的和影响

可以通过 type 过滤出想要查找的信息，也可以通过关键字快速查找相关提交

可以直接从 commit 生成 change log

// 列举几个常用的 log 参数

// 输出 log 的首行

git log --pretty=oneline

// 只输出首行的 commit 信息。不包含 hash 和合并信息等

git log --pretty=format:%s

// 查找有关“更新菜单配置项”的提交

git log --grep="更新菜单配置项"

// 打印出 chenfangxu 的提交

git log --author=chenfangxu

// 红色的短 hash，黄色的 ref , 绿色的相对时间

git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr)%Creset'

用工具实现规范提交

上面介绍了规范提交的格式，如果让各位同学在 git commit 的时候严格按照上面的规范来写，首先心智是有负担的，得记住不同的类型到底是用来定义什么的，subject 怎么写，body 怎么写，footer 要不要写。其次，对人的规范大部分都是反人性的，所以很可能在过不了多久，就会有同学渐渐的不按照规范来写。靠意志力来控制自己严格按照规范来写是需要额外耗费一些精力的，把精力耗费在这种事情上面实在有些浪费。

用工具实现规范提交的方案，一种是在提交的时候就提示必填字段，另一种是在提交后校验字段是否符合规范。这两种在实际项目中都是很有必要的。

Commitizen

Zen-like commit messages for internet citizens. 嗯~~一种禅意

Commitizen 是一个帮助撰写规范 commit message 的工具。他有一个命令行工具 cz-cli，接下来会把使用 Commitizen 分成几个阶段来介绍。

体验 git cz

// 全局安装 Commitizen

npm install -g commitizen

你的仓库可能还不是对 Commitizen 友好的，此时运行 git cz 的效果跟 git commit 一样，也就是没有效果。不过，可以执行 npx git-cz 来体验。

如果想直接运行 git cz 实现语义化的提交，可以根据 streamich/git-cz 文档中说的全局安装 git cz。

// 全局安装 git cz

npm install -g git-cz

除此之外还有一种更推荐的方式，就是让你的仓库对 Commitizen 友好。

Commitizen 友好

全局安装 Commitizen 后，用 cz-conventional-changelog 适配器来初始化你的项目

// 初始化 cz-conventional-changelog 适配器

commitizen init cz-conventional-changelog --save-dev --save-exact

上面的初始化做了三件事：

安装 cz-conventional-changelog 依赖

把依赖保存到 package.json 的 dependencies 或 devDependencies 中

在根目录的 package.json 中添加如下所示的 config.commitizen

"config": {

"commitizen": {

"path": "./node_modules/cz-conventional-changelog"

}

或者，在项目根目录下新建一个 .czrc 文件，内容设置为

{

"path": "cz-conventional-changelog"

}

现在运行 git cz 效果如下：

cz-customizable 自定义中文配置

通过上面的截图可以看到，提交的配置选项都是英文的，如果想改成中文的，可以使用 cz-customizable 适配器。

运行下面的命令，注意之前已经初始化过一次了，这次再初始化，需要加 --force 覆盖

npm install cz-customizable --save-dev

commitizen init cz-customizable --save-dev --save-exact --force

现在 package.json 中 config.commitizen 字段为：

"config": {

"commitizen": {

"path": "./node_modules/cz-customizable"

}

cz-customizable 文档中说明了查找配置文件的方式有三种，我们按照第一种，在项目根目录创建一个 .cz-config.js 的文件。按照给出的示例 cz-config-EXAMPLE.js 编写我们的 config。 commit-type 可以参考 conventional-commit-types 。

可以点击查看我配置好的文件 qiqihaobenben/commitizen-git/.cz-config.js ，里面中详细的注释。

commitlint 校验提交

Commitizen 文档中开始就介绍到，Commitizen 可以在触发 git commit 钩子之前就能给出提示，但是也明确表示提交时对 commit messages 的校验也是很有用的。毕竟即使用了 Commitzen，也是能绕过去，所以提交最后的校验很重要。

commitlint 可以检查 commit messages 是否符合常规提交格式，需要一份校验配置，推荐 @commitlint/config-conventional 。

npm i --save-dev @commitlint/config-conventional @commitlint/cli

在项目根目录创建 commitlint.config.js 文件并设置校验规则：

module.exports = {

extends: ["@commitlint/config-conventional"],

// rules 里面可以设置一些自定义的校验规则

rules: {},

};

在项目中安装 husky ，并在项目根目录新建 husky.config.js 文件，加入以下设置：

// 安装 husky

npm install --save-dev husky

// husky.config.js 中加入以下代码

module.exports = {

"hooks": {

"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"

}

注意：因为 @commitlint/config-conventional 校验规则遵循 Angular 的规范，所以我们在用 cz-customizable 自定义中文配置时，是按照给出的符合 Angular 规范的示例 cz-config-EXAMPLE.js 编写.cz-config.js 的。但是如果你自定义的 Commitizen 配置不符合 Angular 规范，可以使用 commitlint-config-cz 设置校验规则。（推荐还是按照 Angular 规范进行 cz-customizable 自定义配置）

// 安装 commitlint-config-cz

npm install commitlint-config-cz --save-dev

// commitlint.config.js 改为

module.exports = {

extends: [

'cz'

]

};

git commit 触发 git cz

在提交的时候，我们都习惯了 git commit ，虽然换成 git cz 不难，但是如果让开发者在 git commit 时无感知的触发 git cz 肯定是更好的，

而且也能避免不熟悉项目的人直接 git commit 提交一些不符合规范的信息。

我们可以在 husky.config.js 中设置：

"hooks": {

"prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",

}

注意：在 window 系统，可能需要在 git base 中才能生效。

生成 CHANGELOG

standard-version

是一个使用 semver 和 conventional-commits 支持生成 CHANGELOG 进行版本控制的实用程序。

standard-version 不只是能生成 CHANGELOG , 还能根据 commit 的 type 来进行版本控制。

// 安装 standard-verison

npm i --save-dev standard-version

// 在 package.json 中的 scripts 加入 standard-version

{

"scripts": {

"release": "standard-version"

}

示例项目

可以查看 commitizen-git ，里面归纳了快速配置 Commitizen 友好仓库的步骤。

差不多三五分钟就能搞定。

可以看一下配置完后，执行 git commit 的效果。

扩展

更复杂的自定义提示

cz-customizable 中自定义配置项通常情况是够用的，

commitlint 中校验的规则基本上也是够用的，但是会有比较硬核的开发者会觉得还是不够，还要更多。比如一些 prompt 更加自定义，

提交时询问的 question 添加更多的逻辑，比如可以把一些重要的字段校验提前到 Commitizen 中，或者添加更多自定义的校验。

如果真想这么干，那就去 fork 一份 cz-conventional-changelog 或者 cz-customizable 来改，

或者直接自己写一个 adapter。

Commitizen 友好徽章

如果把仓库配置成了对 Commitizen 友好的话，可以在 README.md 中加上这个小徽章

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2993)

282020-7

一文读懂 Web 安全

seo达人

Web 安全是互联网中不可或缺的一个领域，这个领域中诞生了大量的黑帽子与白帽子，他们都是安全领域的王者，在平时里，他们利用各种巧妙的技术互相博弈，时不时就会掀起一场 Web 安全浪潮，真可谓神仙打架，各显神通。

本文从一个吃瓜群众的角度，聊一聊 Web 安全的一些有趣故事。

安全世界观

安全攻防案例

总结与思考

安全世界观

在互联网发展之初，IE 浏览器垄断的时期，大家上网的目的都很单纯，主要通过浏览器分享信息，获取新闻。但随着互联网的不断发展发展，一个网页能做的事情越来越多，除了看新闻，我们还可以看视频、玩游戏、购物、聊天等，这些功能都大大丰富了我们的生活。

随着网页功能的逐渐增多，就开始出现了一些黑帽子，他们试图通过一些技术手段来牟取利益。在我小的时候，印象最深的就是木马病毒，它可以监控你的键盘，将你在键盘上敲打的内容发送到黑客的机器上，黑客通过分析这些内容，很容易就能得到你的游戏账号和密码。

在这之后，就诞生出了一些杀毒软件，致力于解决网络上的各种病毒，随着不断地发展，杀毒软件已经成为一台电脑必不可少的软件。

为什么会出现这样的安全问题？

安全归根到底是信任的问题，如果所有人都按照正常的流程去上网，不去谋取私利，也就没有安全问题可谈了。

安全的根本在于信任，但要让所有人互相信任谈何容易。在当前阶段，我们可以做到：持续做好安全防护，让漏洞越来越少，非法攻击越来越困难，这样就能逐渐减少黑帽子的数量，让病毒制造者越来越少。

如何做好安全

要做好安全，首先得理解安全问题的属性，前人通过无数实践，最后将安全的属性总结为安全三要素，分别为：机密性、完整性、可用性。

机密性

保护数据内容不被泄露。

通常使用加密的方法。

完整性

保护数据内容是完整的、没有被篡改。

通常使用数字签名的方法。

可用性

数据随时都能够使用。

通常是在防御 DOS。

有了安全 3 要素之后，我们就可以对安全问题进行评估了。

资产等级划分

找出最重要的数据。

找出最重要数据的宿主空间，如：在数据库里，那么数据库就得重点防御。

找出数据库的宿主空间，如：在一台服务器上，那么这台服务器就得做次等防御。

找出服务器的宿主空间，如：在 OSI 网络层级上，那么在网络层面就得做一般防御。

威胁分析

找出威胁（可能造成危害的来源）。

找出风险（可能出现的损失叫做风险）。

风险分析

采取多标准决策分析，即：风险 = 威胁等级 * 威胁可行性。

计算所有的威胁，将最终的风险进行排序，优先解决风险大的问题。

确认解决方案

找出不安全的实现方式，并确定解决方案。

解决方案不要改变商业需求的初衷。

解决方案需对用户透明，不要改变用户的习惯。

做好安全评估之后，我们就有了一份安全解决方案，后续的安全工作只需按照这个方案去做，就没有任何问题。

安全的原则

有了安全解决方案之后，我们还可以制定一些安全原则，遵守原则做事，可以让我们事半功倍。

黑名单、白名单原则

白名单方案指的是给安全的资源授权。

黑名单方案指的是禁用不安全的资源。

我们应该优先使用白名单方案，因为黑名单通常统计不完所有的不安全资源。

如：XSS 攻击的方式非常多，可以通过 script、css、image 标签等，尽管你将这些标签都加入黑名单，也不能保证其他的标签都没有 XSS 的攻击隐患。

最小权限原则

只授予必要的权限，不要过度授权，减少出错机会。

如：普通权限的 Linux 用户只能操作 ~ 文件夹下的目录，如果有人想删库跑路，在执行 rm -rf / 时，就会提示无权限。

纵深防御原则

这条原则类似木桶理论，安全水平往往取决于最短的那块板。

即：不要留下短板，黑帽子们往往可以利用短板为突破口，挖掘更大的漏洞。

数据与代码分离原则

当用户数据被当成代码执行时，混淆了数据和代码的边界，从而导致安全问题。

如：XSS 就是利用这一点去攻击的。

不可预测性原则

这条原则是为了提高攻击门槛，有效防止基于篡改、伪造的攻击。

如：数据库中使用 uuid 代替 number 型的自增主键，可以避免 id 被攻击者猜到，从而进行批量操作。

token 也是利用不可预测性，攻击者无法构造 token 也就无法进行攻击。

有了这些安全原则，我们就可以开干了，接下来介绍几个常见的攻防案例。

安全攻防案例

安全攻防的案例非常多，这里主要介绍几个出镜率比较高的安全问题。

客户端攻击

XSS 攻击

CSRF 攻击

点击劫持

XSS 攻击

XSS 攻击的本质是将用户数据当成了 HTML 代码一部分来执行，从而混淆原本的语义，产生新的语义。

如图所示，我们注册了一个 <script>alert(document.cookie)</script> 的用户名，所有能看到此用户名字的页面，都会弹出当前浏览器的 Cookie，如果代码的逻辑是将 Cookie 发送到攻击者的网站，攻击者就能冒充当前用户进行登录了。

XSS 攻击方式有很多，所有和用户交互的地方，都有可能存在 XSS 攻击。

例如：

所有 input 框。

window.location。

window.name。

document.referrer。

document.cookie。

localstorage。

...

由于页面中与用户交互的地方非常多，肯定还有一些 XSS 的攻击方式没有被发现，而一旦被黑帽子发现，就可能造成严重的影响，所以我们务必引起重视。

XSS 攻击影响

被 XSS 攻击成功后，攻击者就可以获取大量的用户信息，例如：

识别用户 UA。

识别用户浏览器扩展。

识别用户浏览过的网站。

通过 CSS 的 Visited 属性。

获取用户真实的 IP。

通过 WebRTC 等。

盗取 Cookie

伪造用户登录，窃取用户资料。

XSS 钓鱼。

向页面注入一个登录弹窗，让用户认为是网站内的登录弹窗（其实是钓鱼网站的），一旦用户登录，账号密码就泄露给了钓鱼网站。

XSS 攻击防御

目前来说，XSS 已经得到了互联网行业的重视，许多开发框架都内置了安全的 HTML 渲染方法。

我们也可以自定义进行一些安全配置。

配置 HTTP 中的 http-only 头，让前端 JS 不能操作 Cookie。

输入检查，在用户提交数据时，使用 XssFilter 过滤掉不安全的数据。

输出检查，在页面渲染的时候，过滤掉危险的数据。

CSRF 攻击

CSRF（Cross-site request forgery）跨站请求伪造，是一种利用用户身份，执行一些用户非本意的操作。

如图所示：

用户先登录了服务器 B，然后去访问服务器 C。

服务器 C 通过恶意脚本，冒充 A 去调用服务器 B 上的某个功能，

对于服务器 B 来说，还以为这是 A 发起的请求，就当作正常请求处理了。

试想一下，如果 C 冒充 A 进行了一次转账，必定会造成大量的经济损失。

CSRF 防御方式

防御 CSRF 主要有以下几种方式：

验证码

每一次请求都要求用户验证，以确保请求真实可靠。

即：利用恶意脚本不能识别复杂的验证码的特点，保证每次请求都是合法的。

Referer 检查

检查发起请求的服务器，是否为目标服务器。

即：HTTP 请求中的 Referer 头传递了当前请求的域名，如果此域名是非法服务器的域名，则需要禁止访问。

Token

利用不可预测性原则，每一请求必须带上一段随机码，这段随机码由正常用户保存，黑帽子不知道随机码，也就无法冒充用户进行请求了。

点击劫持

点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击。

就像一张图片上面铺了一层透明的纸一样，你看到的是攻击者的页面，但是其实这个页面只是在底部，而你真正点击的是被攻击者透明化的另一个网页。

如果所示，当你点击了页面上的按钮之后，本以为会...... ，而真正执行的操作是关注了某人的博客。

点击劫持防御

由于点击劫持主要通过 iframe，所以在防御时，主要基于 iframe 去做。

方案一：frame busting

正常网站使用 JS 脚本判断是否被恶意网站嵌入，如：博客网站监测到被一个 iframe 打开，自动跳转到正常的页面即可。

if (self !== top) { // 跳回原页面 top.location = self.location;}

方案二：使用 HTTP 中的 x-frame-options 头，控制 iframe 的加载，它有 3 个值可选：

DENY，表示页面不允许通过 iframe 的方式展示。

SAMEORIGIN，表示页面可以在相同域名下通过 iframe 的方式展示。

ALLOW-FROM，表示页面可以在指定来源的 iframe 中展示。

配置 iframe 的 sandbox 属性

sandbox = "allow-same-origin" 则只能加载与主站同域的资源。

服务器端攻击

服务器端的攻击的方式也非常多，这里列举几个常见的。

SQL 注入攻击

文件上传漏洞

登录认证攻击

应用层拒绝服务攻击

webServer 配置安全

SQL 注入攻击

SQL 注入和 XSS 一样，都是违背了数据和代码分离原则导致的攻击方式。

如图所示，我们利用 SQL 注入，就能在不需要密码的情况下，直接登录管理员的账号。

攻击的前提是：后端只用了简单的拼接 SQL 的方式去查询数据。

# 拼接出来的 sql 如下：select * from user where username = 'admin' or 1=1 and password = 'xxx'# 无论密码输入什么，这条 sql 语句都能查询到管理员的信息

除此之外，SQL 注入还有以下几种方式：

使用 SQL 探测，猜数据库表名，列名。

通过 MySQL 内置的 benchmark 探测数据库字段。

如：一段伪代码 select database as current if current[0]==='a',benchmark（10000,'猜对了'）如果表明猜对了，就延迟 10 s 并返回成功。

使用存储过程执行系统命令

通过内置的方法或存储过程执行 shell 脚本。

如：xp_cmdshell、sys_eval、sys_exec 等。

字符串截断

如：MySQL 在处理超长的字符串时，会显示警告，但会执行成功。

注册一个 admin + 50 个空格的用户，会触发截断，最终新增一个 admin 用户，这样就能拥有管理员权限了。

SQL 注入防御

防止 SQL 注入的最好的办法就是，不要手动拼接 SQL 语句。

最佳方案，使用预编译语句绑定变量

通常是指框架提供的拼接 SQL 变量的方法。

这样的语义不会发生改变，变量始终被当成变量。

严格限制数据类型，如果注入了其他类型的数据，直接报错，不允许执行。

使用安全的存储过程和系统函数。

CRLF 注入

在注入攻击中，换行符注入也是非常常见的一种攻击方式。

如果在 HTTP 请求头中注入 2 个换行符，会导致换行符后面的所有内容都被解析成请求实体部分。

攻击者通常在 Set-Cookie 时，注入换行符，控制请求传递的内容。

文件上传漏洞

上传文件是网页开发中的一个常见功能，如果不加处理，很容易就会造成攻击。

如图所示，攻击者上传了一个木马文件，并且通过返回的 URL 进行访问，就能控制服务器。

通常我们会控制上传文件的后缀名，但也不能完全解决问题，攻击者还可以通过以下方式进行攻击：

伪造正常文件

将木马文件伪装成正常的后缀名进行上传。

如果要避免这个问题，我们可以继续判断上传文件的文件头前 10 个字节。

Apache 解析方式是从后往前解析，直到找到一个认识的后缀名为止

如：上传一个 abc.php.rar.rar.rar 能绕过后缀名检查，但在执行时，被当成一个 php 文件进行执行。

IIS 会截断分号进行解析

如：abc.asp;xx.png 能绕过后缀名检查，但在执行时，被当成一个 asp 文件进行执行。

HTTP PUT 方法允许将文件上传到指定位置

通过 HTTP MOVE 方法，还能修改上传的文件名。

通过二者配合，就能先上传一个正常的后缀名，然后改为一个恶意的后缀名。

PHP CGI 路径问题

执行 http://abc.com/test.png/xxx.php 时，会把 test.png 当做 php 文件去解析。

如果用户正好是把一段恶意的 php 脚本当做一张图片进行上传，就会触发这个攻击。

文件上传漏洞防御

防御文件上传漏洞，可以从以下几点考虑：

将文件上传的目录设置为不可执行。

判断文件类型

检查 MIME Type，配置白名单。

检查后缀名，配置白名单。

使用随机数改写文件名和文件路径

上传文件后，随机修改文件名，让攻击者无法执行攻击。

单独设置文件服务器的域名

单独做一个文件服务器，并使用单独的域名，利用同源策略，规避客户端攻击。

通常做法是将静态资源存放在 CDN 上。

登录认证攻击

登录认证攻击可以理解为一种破解登录的方法。攻击者通常采用以下几种方式进行破解：

彩虹表

攻击者通过搜集大量明文和 MD5 的对应关系，用于破解 MD5 密文找出原文。

对于彩虹表中的 MD5 密码，我们可以加盐，进行二次加密，避免被破解。

Session Fixation 攻击

利用应用系统在服务器的 SessionID 固定不变机制，借助他人用相同的 SessionID 获取认证和授权。

攻击者登录失败后，后端返回了 SessionID，攻击者将 SessionID 交给正常用户去登录，登录成功后，攻击者就能使用这个 SessionID 冒充正常用户登录了。

如果浏览器每一次登录都刷新 SessionID 可以避免这个问题。

Session 保持攻击

有些时候，后端出于用户体验考虑，只要这个用户还活着，就不会让这个用户的 Session 失效。

攻击者可以通过不停发起请求，可以让这个 Session 一直活下去。

登录认证防御方式

多因素认证

密码作为第一道防御，但在密码验证成功后，我们还可以继续验证：动态口令，数字证书，短信验证码等，以保证用户安全。

由于短信和网页完全是 2 套独立的系统，攻击者很难获取到短信验证码，也就无法进行攻击。

除此之外，前端登录认证还有多种方式，如果你对此感兴趣，可以参考我之前写的前端登录，这一篇就够了。

应用层拒绝服务攻击

应用层拒绝服务攻击，又叫 DDOS 攻击，它指的是利用大量的请求造成资源过载，导致服务器不可用。

通常有以下几种 DDOS 攻击方式：

SYN Flood 洪水攻击

利用 HTTP 3 次握手机制，消耗服务器连接资源。

如：攻击者发起大量的 HTTP 请求，但并不完成 3 次握手，而是只握手 2 次，这时服务器端会继续等待直至超时。这时的服务器会一直忙于处理大量的垃圾请求，而无暇顾及正常请求。

Slowloris 攻击

以非常低的速度发送 HTTP 请求头，消耗服务器连接资源。

如：攻击者发送大量 HTTP 请求，但每个请求头都发的很慢，每隔 10s 发送一个字符，服务器为了等待数据，不得始终保持连接，这样一来，服务器连接数很快就被占光了。

HTTP POST DOS

发送 HTTP 时，指定一个非常大的 Content-Length 然后以很长的间隔发送，消耗服务器连接资源。

CC 攻击

针对一些非常消耗资源的页面，不断发起请求。

如：页面中的某些页面，需要后端做大量的运算，或者需要做非常耗时的数据库查询。在大量的请求下，服务器的 CPU、内存等资源可能就被占光了。

Server Limit DOS

通过 XSS 注入一段超长的 Cookie，导致超出 Web 服务器所能承受的 Request Header 长度，服务器端就会拒绝此服务。

ReDOS

针对一些缺陷的正则表达式，发起大量请求，耗光系统资源。

应用层拒绝服务攻击防御

对于应用层拒绝服务攻击，目前也没有特别完美的解决方案，不过我们还是可以进行一些优化。

应用代码做好性能优化

合理使用 Redis、Memcache 等缓存方案，减少 CPU 资源使用率。

网络架构上做好优化

后端搭建负载均衡。

静态资源使用 CDN 进行管理。

限制请求频率

服务器计算所有 IP 地址的请求频率，筛选出异常的 IP 进行禁用。

可以使用 LRU 算法，缓存前 1000 条请求的 IP，如果有 IP 请求频率过高，就进行禁用。

其实，处理 DDOS 核心思路就是禁用不可信任的用户，确保资源都是被正常的用户所使用。

WebServer 配置安全

我们在部署 web 应用的时候，经常会用到 Nginx、Apache、IIS、Tomcat、Jboss 等 Web 服务器，这些服务器本身也存在一些安全隐患，如果配置不当，很容易收到攻击。

在配置 Web 服务器时，可以参考以下几点：

以用户权限运行 Web 服务器

遵守最小权限原则，以最小权限身份运行 Web 服务器，限制被入侵后的权限。

删除可视化后台

运行 Tomcat、Jboss 等 Web 服务器时，默认会开启一个可视化的运营后台，运行在 8080 端口，并且第一次访问是没有认证的。

攻击者可以利用可视化后台，远程加载一段 war 包或者上传木马文件，进行控制。

及时更新版本

主流的 Web 服务器，每隔一段时间就会修复一些漏洞，所以记得及时更新版本。

总结与思考

本文介绍了 Web 安全的基本概念，以及大量的攻防技巧，其实这只是 Web 安全中的冰山一角，如果你对此感兴趣，不妨在安全领域继续深耕学习，一定能看到更广阔一片天。

对于一个开发者来说，我们应该在写代码时就将安全考虑其中，形成自己的一套安全开发体系，做到心中有安全，时时考虑安全，就能无形之中化解不法分子的攻击。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2385)

272020-7

巧用伪元素before和after制作绚丽效果

seo达人

CSS :before 选择器

定义和说明

:before 选择器向选定的元素前插入内容。

使用content 属性来指定要插入的内容。

CSS :after 选择器

定义和说明

:after 选择器向选定的元素之后插入内容。

使用content 属性来指定要插入的内容。

这两个伪元素会在真正页面元素之前和之后插入一个额外的元素，从技术角度上讲，它们与下面的HTML标记是等效的。

1.伪类光圈

.hover-circle {

width: 100%;

display: flex;

align-items: center;

justify-content: center;

height: 100%;

font-size: 3rem;

letter-spacing: 0.3rem;

font-weight: bold;

position: relative;

cursor: pointer;

color: #666;

}

.hover-circle::before {

width: 8.5rem;

height: 8.5rem;

border: 3px solid pink;

content: "";

border-radius: 50%;

position: absolute;

opacity: 0;

}

.hover-circle::after {

width: 7.2rem;

height: 7.2rem;

border: 6px solid pink;

content: "";

border-radius: 50%;

position: absolute;

opacity: 0;

}

.hover-circle:hover::before,

.hover-circle:hover::after {

animation-duration: 0.8s;

animation-delay: 0.2s;

animation: circle 0.8s;

}

@keyframes circle {

0% {

opacity: 0;

scale: 1;

}

25% {

opacity: 0.25;

}

50% {

opacity: 0.5;

scale: 1.03;

}

75% {

opacity: 0.75;

}

100% {

opacity: 1;

scale: 1.03;

}

2.伪类括号效果

.hover-text {

width: 100%;

display: flex;

align-items: center;

justify-content: center;

height: 100%;

font-size: 3rem;

letter-spacing: 0.3rem;

font-weight: bold;

position: relative;

cursor: pointer;

color: #666;

}

.hover-text::before {

content: "[";

position: absolute;

left: 0.8rem;

opacity: 0;

color: #999;

}

.hover-text::after {

content: "]";

position: absolute;

right: 0.8rem;

opacity: 0;

color: #999;

}

.hover-text:hover::before {

animation-duration: 0.8s;

animation-delay: 0.2s;

animation: hovertext1 0.8s;

}

.hover-text:hover::after {

animation-duration: 0.8s;

animation-delay: 0.2s;

animation: hovertext2 0.8s;

}

@keyframes hovertext1 {

0% {

opacity: 0;

left: 0.8rem;

}

100% {

opacity: 1;

left: 0.5rem;

}

@keyframes hovertext2 {

0% {

opacity: 0;

right: 0.8rem;

}

100% {

opacity: 1;

right: 0.5rem;

}

3.炫酷丝带效果

双边丝带

<div class="title1"><span>距离结束还有10天</span></div>

</div>

.title1 {

position: relative;

display: inline-block;

}

.title1 span {

position: relative;

z-index: 2;

display: inline-block;

padding: 0 15px;

height: 32px;

line-height: 32px;

background-color: #dc5947;

color: #fff;

font-size: 16px;

box-shadow: 0 10px 6px -9px rgba(0, 0, 0, 0.6);

}

.title1 span::before,

.title1 span::after {

position: absolute;

bottom: -6px;

border-width: 3px 5px;

border-style: solid;

content: "";

}

.title1 span::before {

left: 0;

border-color: #972f22 #972f22 transparent transparent;

}

.title1 span::after {

right: 0;

border-color: #972f22 transparent transparent #972f22;

}

.title1::before,

.title1::after {

position: absolute;

top: 6px;

content: "";

border-style: solid;

border-color: #dc5947;

}

.title1::before {

left: -32px;

border-width: 16px 26px 16px 16px;

border-left-color: transparent;

}

.title1::after {

right: -32px;

border-width: 16px 16px 16px 26px;

border-right-color: transparent;

}

右边丝带

<span class="title2">距离结束还有10天</span>

.title2 {

position: relative;

display: inline-block;

padding: 0 15px;

height: 32px;

line-height: 32px;

background-color: #dc5947;

color: #fff;

font-size: 16px;

}

.title2::before {

position: absolute;

top: -4px;

left: 0;

border-width: 2px 4px;

border-style: solid;

border-color: transparent #972f22 #972f22 transparent;

content: "";

}

.title2::after {

position: absolute;

top: 0;

right: -8px;

border-width: 16px 8px 16px 0;

border-style: solid;

border-color: #dc5947 transparent #dc5947 #dc5947;

content: "";

}

箭头丝带

<span class="title3">距离结束还有10天</span>

.title3 {

position: relative;

display: inline-block;

margin-right: 16px;

padding: 0 10px;

height: 32px;

line-height: 32px;

background-color: #dc5947;

color: #fff;

font-size: 16px;

}

.title3::before {

position: absolute;

top: 0;

left: -16px;

border-width: 16px 16px 16px 0;

border-style: solid;

border-color: transparent #dc5947 transparent transparent;

content: "";

}

.title3::after {

position: absolute;

top: 0;

right: -16px;

border-width: 16px 16px 16px 0;

border-style: solid;

border-color: #dc5947 transparent #dc5947 #dc5947;

content: "";

}

多个箭头丝带

<span class="title3">距离结束还有10天</span>

<span class="title3 ml5">距离结束还有10天</span>

</div>

.title4 {

width: 200px;

height: 140px;

position: absolute;

top: -8px;

left: -8px;

overflow: hidden;

}

.title4::before {

position: absolute;

left: 124px;

border-radius: 8px 8px 0 0;

width: 16px;

height: 8px;

background-color: #972f22;

content: "";

}

.title4::after {

position: absolute;

left: 0;

top: 124px;

border-radius: 0 8px 8px 0;

width: 8px;

height: 16px;

background-color: #972f22;

content: "";

}

.title4 span {

display: inline-block;

text-align: center;

width: 200px;

height: 40px;

line-height: 40px;

position: absolute;

top: 30px;

left: -50px;

z-index: 2;

overflow: hidden;

-ms-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

border: 1px dashed #fff;

box-shadow: 0 0 0 3px #dc5947, 0 14px 7px -9px rgba(0, 0, 0, 0.6);

background-color: #dc5947;

color: #fff;

}

悬挂标签

<div class="title4"><span>企业热门动态</span></div>

<div class="title5"><span>企业热门动态</span></div>

</div>

.title5 {

width: 140px;

height: 200px;

position: absolute;

top: -8px;

right: -8px;

overflow: hidden;

}

.title5::before {

position: absolute;

right: 124px;

border-radius: 8px 8px 0 0;

width: 16px;

height: 8px;

background-color: #972f22;

content: "";

}

.title5::after {

position: absolute;

right: 0;

top: 124px;

border-radius: 0 8px 8px 0;

width: 8px;

height: 16px;

background-color: #972f22;

content: "";

}

.title5 span {

display: inline-block;

text-align: center;

width: 200px;

height: 40px;

line-height: 40px;

position: absolute;

top: 30px;

right: -50px;

z-index: 2;

overflow: hidden;

-ms-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

border: 1px dashed #fff;

box-shadow: 0 0 0 3px #dc5947, 0 14px 7px -9px rgba(0, 0, 0, 0.6);

background-color: #dc5947;

color: #fff;

}

4.几何图形

三角形

.triangle {

width: 0;

height: 0;

margin: 50px auto;

border-bottom: 100px solid #dc5947;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

cursor: pointer;

transform: scale(1.2);

transition: 0.5s;

}

五角星

.pentagram {

width: 0;

height: 0;

margin: 100px auto;

position: relative;

border-bottom: 70px solid #dc5947;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

-webkit-transform: rotate(35deg);

-moz-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

transform: rotate(35deg);

-webkit-transform: scale(1), rotate(35deg);

-moz-transform: scale(1), rotate(35deg);

-ms-transform: scale(1), rotate(35deg);

-o-transform: scale(1), rotate(35deg);

transform: scale(1), rotate(35deg);

}

.pentagram::after {

content: "";

width: 0;

height: 0;

border-bottom: 70px solid #dc5947;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

-webkit-transform: rotate(-70deg);

-moz-transform: rotate(-70deg);

-ms-transform: rotate(-70deg);

-o-transform: rotate(-70deg);

transform: rotate(-70deg);

position: absolute;

top: 0px;

left: -100px;

}

.pentagram::before {

content: "";

width: 0;

height: 0;

border-bottom: 80px solid #dc5947;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

-webkit-transform: rotate(-35deg);

-moz-transform: rotate(-35deg);

-ms-transform: rotate(-35deg);

-o-transform: rotate(-35deg);

transform: rotate(-35deg);

position: absolute;

top: -45px;

left: -60px;

}

5.水滴

.drop::after {

content: "";

position: absolute;

width: 30px;

height: 20px;

border-radius: 50%;

background-color: #ace3ff;

margin: 100px auto;

top: -50px;

left: 25px;

box-shadow: 5px 12px 4px #ace3ff, -5px 11px 4px #ace3ff, 0px 14px 4px #4d576e;

-webkit-transform: rotate(35deg);

}

.drop::before {

content: "";

position: absolute;

width: 0px;

height: 0px;

border-style: solid;

border-width: 0 40px 50px 40px;

border-color: transparent transparent #ace3ff transparent;

top: -30px;

left: 10px;

}

.drop {

width: 100px;

height: 100px;

border-radius: 50%;

background-color: #ace3ff;

position: relative;

margin: 100px auto;

box-shadow: 0px 6px 0 #3f475a;

}

6 绚丽流动边框

.box-line2,

.box-line2::before,

.box-line2::after {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

.box-line2 {

width: 200px;

height: 200px;

margin: auto;

color: #69ca62;

box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);

}

.box-line2::before,

.box-line2::after {

content: "";

z-index: 99;

margin: -5%;

box-shadow: inset 0 0 0 2px;

animation: clipMe 8s linear infinite;

}

.box-line2::before {

animation-delay: -4s;

}

.box-line2:hover::after,

.box-line2:hover::before {

background-color: rgba(255, 0, 0, 0.3);

}

@keyframes clipMe {

0%,

100% {

clip: rect(0px, 220px, 2px, 0px);

}

25% {

clip: rect(0px, 2px, 220px, 0px);

}

50% {

clip: rect(218px, 220px, 220px, 0px);

}

75% {

clip: rect(0px, 220px, 220px, 218px);

}

@keyframes surround {

0%,

100% {

clip: rect(0px, 220px, 2px, 0px);

}

25% {

clip: rect(0px, 2px, 220px, 0px);

}

50% {

clip: rect(218px, 220px, 220px, 0px);

}

75% {

clip: rect(0px, 220px, 220px, 218px);

}

.box-line1:before,

.box-line1:after {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

content: "";

z-index: 99;

margin: -5%;

animation: surround linear infinite 8s;

box-shadow: inset 0 0 0 2px #69ca62;

}

.box-line1:before {

animation-delay: -4s;

}

.box-line1 {

border: 1px solid #69ca62;

position: absolute;

left: 500px;

top: 200px;

margin: auto;

width: 200px;

height: 200px;

margin: auto;

}

7.Tooltip提示

<div class="tip" data-tip="CSS伪类">CSS伪类</div>

.tip::after {

content: attr(data-tip);

display: none;

position: absolute;

padding: 5px 10px;

left: 15%;

bottom: 100%;

width: 150px;

margin-bottom: 12px;

transform: translateX(-50%);

font-size: 12px;

background: #000;

color: #fff;

cursor: default;

border-radius: 4px;

}

.tip::before {

content: " ";

position: absolute;

display: none;

left: 15%;

bottom: 100%;

transform: translateX(-50%);

margin-bottom: 3px;

width: 0;

height: 0;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

border-top: 9px solid #000;

}

.tip:hover::after,

.tip:hover::before {

display: block;

}

8.CSS 伪类盒子阴影

使用伪元素:before and :after制作出了完美惊艳的相片阴影效果。其中的技巧是使用绝对定位固定伪元素，然后给它们的z-index一个负值，以背景出现。

<h3>CSS 伪类盒子阴影</h3>

</div>

.effect2 {

position: relative;

}

.effect2::before, .effect2::after {

z-index: -1;

position: absolute;

content: "";

bottom: 15px;

left: 10px;

width: 50%;

top: 80%;

max-width: 300px;

background: #777;

-webkit-box-shadow: 0 15px 10px #777;

-moz-box-shadow: 0 15px 10px #777;

box-shadow: 0 15px 10px #777;

-webkit-transform: rotate(-3deg);

-moz-transform: rotate(-3deg);

-o-transform: rotate(-3deg);

-ms-transform: rotate(-3deg);

transform: rotate(-3deg);

}

.effect2::after {

-webkit-transform: rotate(3deg);

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg);

-ms-transform: rotate(3deg);

transform: rotate(3deg);

right: 10px;

left: auto;

}

CSS Box 阴影效果

9.Tabs当前激活状态

</div>

.menu-tabs {

display: block;

padding: 0.25rem 1.5rem;

clear: both;

font-weight: 400;

color: #212529;

text-align: inherit;

white-space: nowrap;

background-color: transparent;

width: 50px;

border: 0;

height: 35px;

justify-content: center;

display: flex;

cursor: pointer;

}

.menu-tabs:hover {

color: #20a884;

position: relative;

}

.menu-tabs:hover:after {

position: absolute;

content: "";

border: 1px solid #20a884;

width: 3rem;

left: 0;

bottom: 0;

margin-left: 50%;

transform: translateX(-50%);

}

.active {

position: relative;

color: #20a884;

}

.flex {

display: flex;

}

.active::after {

position: absolute;

content: "";

border: 1px solid #20a884;

width: 3rem;

left: 0;

bottom: 0;

margin-left: 50%;

transform: translateX(-50%);

}

10.伪元素模糊背景

<h1>A blurred overlay</h1>

<p>... mask or whatever

<br>that is responsive and could be cross-browser compatible back to IE9</p>

</div>

.container {

width: 100%;

height: 100%;

margin: 0;

}

.container,

.overlay:before {

background: url(https://wow.techbrood.com/assets/landing.jpg) no-repeat fixed 0 0 / cover;

}

.container {

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

.overlay {

max-height: 200px;

margin: 0 auto;

max-width: 768px;

padding: 50px;

position: relative;

color: white;

font-family: "Lato";

position: relative;

text-align: center;

z-index: 0;

}

.overlay:before {

content: "";

-webkit-filter: blur(100px);

filter: blur(100px);

height: 100%;

left: 0;

position: absolute;

top: 0;

width: 100%;

z-index: -1;

}

11.蓝湖文字

本站由叫我詹躲躲提供技术支持

</span>

.lanhu_text {

position: relative;

color: #2878ff;

}

.lanhu_text::before {

content: "";

width: 80px;

height: 20px;

position: absolute;

left: -86px;

top: 0;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAABCAYAAABJwyn/AAAAjElEQVQoU22NSw7CQAxDX8ahICF2HIDTcf9d1c8kaDpthQSL6CmxHRuk8cZfMxqf6DGh+Y5uCxquaB7xdUCXilZHWvBorEiOaqAKrkRRUEmUOw283TKRRb9b4GnIEpWmGYrA237kDh1w6J5N7zzzZv13gtuvT7t++jefUTYmwvpk7v3fPaCzn//9LfsBvRpHnliu+xMAAAAASUVORK5CYII=) 0 no-repeat;

}

.lanhu_text::after {

content: "";

width: 80px;

height: 20px;

position: absolute;

right: -86px;

top: 0;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAABCAYAAABJwyn/AAAAhElEQVQoU22OSw7CQAxDXzJDWbHiEFyRJQflFggJSjyDph9oC6snx45lO52rrKJqzIyNlkFUPv6vnv+3uW9vrPpBq77/uWFPAXnrnfYVQ16JiWq0stjvxKB9vDc/MeaXWo5cqDEFUkKpEuEoB3ollHvUZ9QV4rFD3R3d9ujwJK5HxAW9AStemAIOwCNlAAAAAElFTkSuQmCC) 100% no-repeat;

}

12 主要标题

.first-title {

position: relative;

color: #a98661;

font-weight: 400;

font-size: 30px;

text-align: center;

}

.first-title::before,

.first-title::after {

position: absolute;

content: "";

width: 110px;

border-bottom: 1px solid #a98661;

top: 50%;

transform: translateY(-50%);

}

.first-title::before {

left: 100px;

}

.first-title::after {

right: 100px;

}

13.鼠标浮层遮罩浮层

.black-mask {

position: relative;

height: 100%;

width: 100%;

cursor: pointer;

}

.black-mask:hover {

transition-duration: 1s;

scale: 1.02;

}

.black-mask:hover:before {

object-fit: cover;

}

.black-mask:hover:after {

height: 100%;

opacity: 1;

transition-duration: 1s;

display: flex;

align-items: flex-end;

padding: 0 30px 15px;

}

.black-mask::before {

position: absolute;

content: "";

background: url(https://dcdn.it120.cc/2019/11/14/f17c5848-6d1f-4254-b3ba-64d3969d16b6.jpg) no-repeat;

background-size: 100% 100%;

width: 100%;

height: 100%;

}

.black-mask::after {

position: absolute;

content: "雾在微风的吹动下滚来滚去，像冰峰雪山，似蓬莱仙境，如海市蜃楼，使人觉得飘然欲仙。山河景色在雾的装点下，变得更加美丽。远处的七连山巍峨挺拔，它们仿佛成了神仙住的宝山，令人神往。近处池塘边时时飘来雾气，在初升阳光的照耀下，呈现出赤、橙、黄、绿、青、蓝、紫七种色彩。......";

width: 90%;

height: 0%;

bottom: 0;

right: 0;

z-index: 32;

background: rgba(0, 0, 0, 0.3);

opacity: 1;

color: #fff;

opacity: 0;

padding: 0 30px 0;

}

14.绚丽光圈

.aperture {

width: 136px;

height: 136px;

background-color: #dc5947;

border-radius: 50%;

line-height: 136px;

text-align: center;

color: #fff;

font-size: 24px;

cursor: pointer;

position: relative;

}

.aperture::before {

border: 3px dashed #a0ff80;

content: "";

width: 144px;

height: 144px;

position: absolute;

border-radius: 50%;

left: -8px;

top: -6px;

animation: clockwise 5s linear infinite;

}

@keyframes clockwise {

100% {

transform: rotate(360deg);

}

15.彩色流动边框

.rainbow {

position: relative;

z-index: 0;

width: 400px;

height: 300px;

border-radius: 10px;

overflow: hidden;

padding: 2rem;

}

.rainbow::before {

content: '';

position: absolute;

z-index: -2;

left: -50%;

top: -50%;

width: 200%;

height: 200%;

background-color: #399953;

background-repeat: no-repeat;

background-size: 50% 50%, 50% 50%;

background-position: 0 0, 100% 0, 100% 100%, 0 100%;

background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);

-webkit-animation: rotate 4s linear infinite;

animation: rotate 4s linear infinite;

}

.rainbow::after {

content: '';

position: absolute;

z-index: -1;

left: 6px;

top: 6px;

width: calc(100% - 12px);

height: calc(100% - 12px);

background: white;

border-radius: 5px;

}

@keyframes rotate {

100% {

-webkit-transform: rotate(1turn);

transform: rotate(1turn);

}

16.炫酷伪类边框

.corner-button::before, .corner-button::after {

content: '';

position: absolute;

background: #2f2f2f;

z-index: 1;

transition: all 0.3s;

}

.corner-button::before {

width: calc(100% - 3rem);

height: calc(101% + 1rem);

top: -0.5rem;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

.corner-button::after {

height: calc(100% - 3rem);

width: calc(101% + 1rem);

left: -0.5rem;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

.corner-button:hover {

color: pink;

}

.corner-button {

font-family: 'Lato', sans-serif;

letter-spacing: .02rem;

cursor: pointer;

background: transparent;

border: 0.5rem solid currentColor;

padding: 1.5rem 2rem;

font-size: 2.2rem;

color: #06c17f;

position: relative;

transition: color 0.3s;

text-align: center;

margin: 5rem 12rem;

}

.corner-button:hover::after {

height: 0;

}

.corner-button:hover::before {

width: 0;

}

.bg-f2{

background: #2f2f2f;

}

17.伪类美化文字

.beautify-font{

position: relative;

font-size: 12rem;

color: #0099CC

}

.beautify-font::before{

position: absolute;

font-size: 12rem;

color: #333;

content: attr(data-text);

white-space:nowrap;

width: 50%;

display: inline-block;

overflow: hidden;

transition:1s ease-in-out 0s;

}

.beautify-font2{

position: relative;

font-size: 6rem;

color: #0099CC

}

.beautify-font2::before{

position: absolute;

font-size: 6rem;

color: #333;

content: attr(data-text);

white-space:nowrap;

height: 50%;

display: inline-block;

overflow: hidden;

transition:1s ease-in-out 0s;

}

.beautify-font:hover::before{

width:0;

}

.beautify-font2:hover::before{

height: 0;

}

18.照片堆叠效果

只使用一张图片来创造出一堆图片叠摞在一起的效果，能做到吗？当然，关键是要使用伪元素:before和:after来帮助呈现。把这些伪元素的z-index设置成负值，让它们以背景方式起作用。

.stackthree::before {

background: #eff4de;

}

.stackthree, .stackthree::before, .stackthree::after {

border: 6px solid #fff;

height: 200px;

width: 200px;

-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

}

.stackthree::before {

top: 5px;

left: -15px;

z-index: -1;

-webkit-transform: rotate(-10deg);

-moz-transform: rotate(-10deg);

-o-transform: rotate(-10deg);

-ms-transform: rotate(-10deg);

transform: rotate(-10deg);

}

.stackthree::after {

top: -2px;

left: -10px;

-webkit-transform: rotate(-5deg);

-moz-transform: rotate(-5deg);

-o-transform: rotate(-5deg);

-ms-transform: rotate(-5deg);

transform: rotate(-5deg);

}

.stackthree::before, .stackthree::after {

background: #768590;

content: "";

position: absolute;

z-index: -1;

height: 0px\9;

width: 0px\9;

border: none\9;

}

.stackthree {

float: left;

position: relative;

margin: 50px;

}

为元素的兼容性

不论你使用单冒号还是双冒号语法，浏览器都能识别。因为IE8只支持单冒号的语法，所以，如果你想兼容IE8，保险的做法是使用单冒号。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3283)

262020-7

你不知道的 WebSocket

seo达人

在最后的阿宝哥有话说环节，阿宝哥将介绍 WebSocket 与 HTTP 之间的关系、WebSocket 与长轮询有什么区别、什么是 WebSocket 心跳及 Socket 是什么等内容。

下面我们进入正题，为了让大家能够更好地理解和掌握 WebSocket 技术，我们先来介绍一下什么是 WebSocket。

一、什么是 WebSocket

1.1 WebSocket 诞生背景

早期，很多网站为了实现推送技术，所用的技术都是轮询。轮询是指由浏览器每隔一段时间向服务器发出 HTTP 请求，然后服务器返回的数据给客户端。常见的轮询方式分为轮询与长轮询，它们的区别如下图所示：

为了更加直观感受轮询与长轮询之间的区别，我们来看一下具体的代码：

这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而 HTTP 请求与响应可能会包含较长的头部，其中真正有效的数据可能只是很小的一部分，所以这样会消耗很多带宽资源。

比较新的轮询技术是 Comet)。这种技术虽然可以实现双向通信，但仍然需要反复发出请求。而且在 Comet 中普遍采用的 HTTP 长连接也会消耗服务器资源。

在这种情况下，HTML5 定义了 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。Websocket 使用 ws 或 wss 的统一资源标志符（URI），其中 wss 表示使用了 TLS 的 Websocket。如：

ws://echo.websocket.org

wss://echo.websocket.org

WebSocket 与 HTTP 和 HTTPS 使用相同的 TCP 端口，可以绕过大多数防火墙的限制。默认情况下，WebSocket 协议使用 80 端口；若运行在 TLS 之上时，默认使用 443 端口。

1.2 WebSocket 简介

WebSocket 是一种网络传输协议，可在单个 TCP 连接上进行全双工通信，位于 OSI 模型的应用层。WebSocket 协议在 2011 年由 IETF 标准化为 RFC 6455，后由 RFC 7936 补充规范。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。

介绍完轮询和 WebSocket 的相关内容之后，接下来我们来看一下 XHR Polling 与 WebSocket 之间的区别：

1.3 WebSocket 优点

较少的控制开销。在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。

更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于 HTTP 请求需要等待客户端发起请求服务端才能响应，延迟明显更少。

保持连接状态。与 HTTP 不同的是，WebSocket 需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。

更好的二进制支持。WebSocket 定义了二进制帧，相对 HTTP，可以更轻松地处理二进制内容。

可以支持扩展。WebSocket 定义了扩展，用户可以扩展协议、实现部分自定义的子协议。

由于 WebSocket 拥有上述的优点，所以它被广泛地应用在即时通信、实时音视频、在线教育和游戏等领域。对于前端开发者来说，要想使用 WebSocket 提供的强大能力，就必须先掌握 WebSocket API，下面阿宝哥带大家一起来认识一下 WebSocket API。

二、WebSocket API

在介绍 WebSocket API 之前，我们先来了解一下它的兼容性：

（图片来源：https://caniuse.com/#search=W...）

从上图可知，目前主流的 Web 浏览器都支持 WebSocket，所以我们可以在大多数项目中放心地使用它。

在浏览器中要使用 WebSocket 提供的能力，我们就必须先创建 WebSocket 对象，该对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。

使用 WebSocket 构造函数，我们就能轻易地构造一个 WebSocket 对象。接下来我们将从 WebSocket 构造函数、WebSocket 对象的属性、方法及 WebSocket 相关的事件四个方面来介绍 WebSocket API，首先我们从 WebSocket 的构造函数入手：

2.1 构造函数

WebSocket 构造函数的语法为：

const myWebSocket = new WebSocket(url [, protocols]);

停止犯下这5个JavaScript风格错误，使你的代码可读和可维护的快速提示

seo达人

使你的代码可读和可维护的快速提示。

有多少次，你打开一个旧的项目，发现混乱的代码，当你添加一些新的东西时，很容易崩溃？我们都有过这样的经历。

为了减少难以读懂的javascript的数量，我提供了以下示例。这些都是我过去所犯过的错误。

对具有多个返回值的函数使用数组解构

假设我们有一个返回多个值的函数。一种可能的实现是使用数组解构，如下所示：

const func = () => {

const a = 1;

const b = 2;

const c = 3;

const d = 4;

return [a,b,c,d];

}

const [a,b,c,d] = func();

console.log(a,b,c,d); // 1,2,3,4

尽管上面的方法很好用，但确实引入了一些复杂性。

当我们调用函数并将值分配给 a,b,c,d 时，我们需要注意返回数据的顺序。这里的一个小错误可能会成为调试的噩梦。

此外，无法确切指定我们要从函数中获取哪些值，如果我们只需要 c 和 d 怎么办？

相反，我们可以使用对象解构。

const func = () => {

const a = 1;

const b = 2;

const c = 3;

const d = 4;

return {a,b,c,d};

}

const {c,d} = func();

现在，我们可以轻松地从函数中选择所需的数据，这也为我们的代码提供了未来的保障，允许我们在不破坏东西的情况下增加额外的返回变量。

不对函数参数使用对象分解

假设我们有一个函数，该函数将一个对象作为参数并对该对象的属性执行一些操作。一种幼稚的方法可能看起来像这样：

// 不推荐

function getDaysRemaining(subscription) {

const startDate = subscription.startDate;

const endDate = subscription.endDate;

return endDate - startDate;

}

上面的方法按预期工作，但是，我们创建了两个不必要的临时引用 startDate 和 endDate。

一种更好的实现是对 subscription 对象使用对象解构来在一行中获取 startDate 和 endDate。

// 推荐

function getDaysRemaining(subscription) {

const { startDate, endDate } = subscription;

return startDate - endDate;

}

我们可以更进一步，直接对参数执行对象析构。

// 更好

function getDaysRemaining({ startDate, endDate }) {

return startDate - endDate;

}

更优雅，不是吗？

在不使用扩展运算符的情况下复制数组

使用 for循环遍历数组并将其元素复制到新数组是冗长且相当丑陋的。

可以以简洁明了的方式使用扩展运算符来达到相同的效果。

const stuff = [1,2,3];

// 不推荐

const stuffCopyBad = []

for(let i = 0; i < stuff.length; i++){

stuffCopyBad[i] = stuff[i];

}

// 推荐

const stuffCopyGood = [...stuff];

使用var

使用 const 保证不能重新分配变量。这样可以减少我们代码中的错误，并使其更易于理解。

// 不推荐

var x = "badX";

var y = "baxY";

// 推荐

const x = "goodX";

const y = "goodX";

果你确实需要重新分配变量，请始终选择 let 而不是 var。

这是因为 let 是块作用域的，而 var 是函数作用域的。

块作用域告诉我们，只能在定义它的代码块内部访问变量，尝试访问块外部的变量会给我们提供ReferenceError。

for(let i = 0; i < 10; i++){

//something

}

print(i) // ReferenceError: i is not defined

函数作用域告诉我们，只能在定义其的函数内部访问变量。

for(var i = 0; i < 10; i++){

//something

}

console.log(i) // 10

let 和 const 都是块范围的。

不使用模板字面值

手动将字符串连接在一起相当麻烦，而且输入时可能会造成混淆。这是一个例子：

// 不推荐

function printStartAndEndDate({ startDate, endDate }) {

console.log('StartDate:' + startDate + ',EndDate:' + endDate)

}

模板文字为我们提供了一种可读且简洁的语法，该语法支持字符串插值。

// 推荐

function printStartAndEndDate({ startDate, endDate }) {

console.log(`StartDate: ${startDate}, EndDate: ${endDate}`)

}

模板文字也提供了嵌入新行的简便方法，你所需要做的就是照常按键盘上的Enter键。

// 两行打印

function printStartAndEndDate({ startDate, endDate }) {

console.log(`StartDate: ${startDate}

EndDate: ${endDate}`)

}

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2303)

232020-7

你可能不需要在 JavaScript 使用 switch 语句！

seo达人

没有 switch 就没有复杂的代码块

switch很方便：给定一个表达式，我们可以检查它是否与一堆case子句中的其他表达式匹配。考虑以下示例：

const name = "Juliana";

switch (name) {

case "Juliana":

console.log("She's Juliana");

break;

case "Tom":

console.log("She's not Juliana");

break;

}

当 name 为“Juliana”时，我们将打印一条消息，并立即中断退出该块。在switch函数内部时，直接在 case 块使用 return，就可以省略break。

当没有匹配项时，可以使用 default 选项：

const name = "Kris";

switch (name) {

case "Juliana":

console.log("She's Juliana");

break;

case "Tom":

console.log("She's not Juliana");

break;

default:

console.log("Sorry, no match");

}

switch在 Redux reducers 中也大量使用（尽管Redux Toolkit简化了样板），以避免产生大量的if。考虑以下示例：

const LOGIN_SUCCESS = "LOGIN_SUCCESS";

const LOGIN_FAILED = "LOGIN_FAILED";

const authState = {

token: "",

error: "",

};

function authReducer(state = authState, action) {

switch (action.type) {

case LOGIN_SUCCESS:

return { ...state, token: action.payload };

case LOGIN_FAILED:

return { ...state, error: action.payload };

default:

return state;

}

这有什么问题吗?几乎没有。但是有没有更好的选择呢？

从 Python 获得的启示

来自 Telmo 的这条 Tweet引起了我的注意。他展示了两种“switch”风格，其中一种非常接近Python中的模式。

Python 没有开关，它给我们一个更好的替代方法。首先让我们将代码从 JavaScript 移植到Python：

LOGIN_SUCCESS = "LOGIN_SUCCESS"

LOGIN_FAILED = "LOGIN_FAILED"

auth_state = {"token": "", "error": ""}

def auth_reducer(state=auth_state, action={}):

mapping = {

LOGIN_SUCCESS: {**state, "token": action["payload"]},

LOGIN_FAILED: {**state, "error": action["payload"]},

}

return mapping.get(action["type"], state)

在 Python 中，我们可以使用字典来模拟switch 。 dict.get() 可以用来表示 switch 的 default 语句。

当访问不存在的key时，Python 会触发一个 KeyError 错误：

>>> my_dict = {

"name": "John",

"city": "Rome",

"age": 44

}

>>> my_dict["not_here"]

# Output: KeyError: 'not_here'

.get()方法是一种更安全方法，因为它不会引发错误，并且可以为不存在的key指定默认值：

>>> my_dict = {

"name": "John",

"city": "Rome",

"age": 44

}

>>> my_dict.get("not_here", "not found")

# Output: 'not found'

因此，Pytho n中的这一行：

return mapping.get(action["type"], state)

等价于 JavaScript中的：

function authReducer(state = authState, action) {

...

default:

return state;

...

}

使用字典的方式替换 switch

再次思考前面的示例：

const LOGIN_SUCCESS = "LOGIN_SUCCESS";

const LOGIN_FAILED = "LOGIN_FAILED";

const authState = {

token: "",

error: "",

};

function authReducer(state = authState, action) {

switch (action.type) {

case LOGIN_SUCCESS:

return { ...state, token: action.payload };

case LOGIN_FAILED:

return { ...state, error: action.payload };

default:

return state;

}

如果不使用 switch 我们可以这样做：

function authReducer(state = authState, action) {

const mapping = {

[LOGIN_SUCCESS]: { ...state, token: action.payload },

[LOGIN_FAILED]: { ...state, error: action.payload }

};

return mapping[action.type] || state;

}

这里我们使用 ES6 中的计算属性，此处，mapping的属性是根据两个常量即时计算的：LOGIN_SUCCESS 和 LOGIN_FAILED。

属性对应的值，我们这里使用的是对象解构，这里 ES9((ECMAScript 2018)) 出来的。

const mapping = {

[LOGIN_SUCCESS]: { ...state, token: action.payload },

[LOGIN_FAILED]: { ...state, error: action.payload }

}

你如何看待这种方法？它对 switch 来说可能还能一些限制，但对于 reducer 来说可能是一种更好的方案。

但是，此代码的性能如何？

性能怎么样？

switch 的性能优于字典的写法。我们可以使用下面的事例测试一下：

console.time("sample");

for (let i = 0; i < 2000000; i++) {

const nextState = authReducer(authState, {

type: LOGIN_SUCCESS,

payload: "some_token"

});

}

console.timeEnd("sample");

测量它们十次左右,

for t in {1..10}; do node switch.js >> switch.txt;done

for t in {1..10}; do node map.js >> map.txt;done

clipboard.png

人才们的【三连】就是小智不断分享的最大动力，如果本篇博客有任何错误和建议，欢迎人才们留言，最后，谢谢大家的观看。

原文：https://codeburst.io/alternat...

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2456)

222020-7

vuex管理状态仓库详解

seo达人

一.什么是Vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。采用了全局单例模式，将组件的共享状态抽离出来管理，使得组件树中每一个位置都可以获取共享的状态或者触发行为。
那么什么是状态呢？我把状态理解为在没有使用vuex时，在当前组件中data内需要共用的数据为状态。
vuex使得状态或行为成为了共享的状态，所共享的状态或行为可以在各个组件中都可以访问到，省去了子父或子子之间传递变量，提高了开发效率。

二.不使用vuex时与使用vuex时的差别

当我们不使用vuex时，对于组件之间传递信息会较为麻烦。

不使用vuex时

父子之间传递信息：

App.vue文件中：

<template>
  <div id="app">
      <Fruits :fruitList="fruitList"/>
  </div>
</template> 
<script> import Goods from './components/Goods'; export default { name: 'App',
  components:{
    Fruits,
    Goods
  }, data(){
    return{ goodList:[
      {
        name:'doll',
        price:12 },
      { name:'glass',
        price:10 }
    ],
    }
  }
}
</script>
<style>
</style>

Good.vue文件中：

<template>
  <div class="hello">
      <ul>
        <li v-for="(good,index) in goodList" :key="index"> name:{{good.name}} number: {{good.number}} {{index}}
        </li>
      </ul>
  </div>
</template>

<script> export default { props:['goodList'],
}
</script>
<style>

</style>

兄弟之间传递信息：

首先先创建一个js文件作为两兄弟之间传输的纽扣，这里起名为msg.js

//创建并暴露vue import Vue from 'vue';
export default new Vue

兄弟组件Goods：

<template>
  <div>
        <button @click="deliver">点击</button>
  </div>
</template>

<script> import MSG from '../msg';
export default {
  data(){ return{
      msg:'hahah' }
  },
  methods:{
    deliver() {
        MSG.$emit('showMsg',this.msg)
    }
  }

}
</script>
<style>

</style>

兄弟组件Fruits:

<template>
  <div>
      <div class="fruit">
          {{text}}
      </div>
  </div>
</template>
<script> import MSG from '../msg';
export default {
    data(){ return{
        text:'' }
    },
    created(){ this.getMsg()
    },
    methods:{
      getMsg(){
        MSG.$on('showMsg',(message)=>{ this.text = message
        })
      }
    }
}
</script>
<style>
</style>

在App组件中的代码：
在这里插入图片描述
点击按钮:

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2966)

202020-7

VUE-多文件断点续传、秒传、分片上传

seo达人

凡是要知其然知其所以然

文件上传相信很多朋友都有遇到过，那或许你也遇到过当上传大文件时，上传时间较长，且经常失败的困扰，并且失败后，又得重新上传很是烦人。那我们先了解下失败的原因吧！

据我了解大概有以下原因：

服务器配置:例如在PHP中默认的文件上传大小为8M【post_max_size = 8m】，若你在一个请求体中放入8M以上的内容时，便会出现异常

请求超时：当你设置了接口的超时时间为10s，那么上传大文件时，一个接口响应时间超过10s，那么便会被Faild掉。

网络波动：这个就属于不可控因素，也是较常见的问题。

基于以上原因，聪明的人们就想到了，将文件拆分多个小文件，依次上传，不就解决以上1,2问题嘛，这便是分片上传。网络波动这个实在不可控，也许一阵大风刮来，就断网了呢。那这样好了，既然断网无法控制，那我可以控制只上传已经上传的文件内容，不就好了，这样大大加快了重新上传的速度。所以便有了“断点续传”一说。此时，人群中有人插了一嘴，有些文件我已经上传一遍了，为啥还要在上传，能不能不浪费我流量和时间。喔...这个嘛，简单，每次上传时判断下是否存在这个文件，若存在就不重新上传便可，于是又有了“秒传”一说。从此这"三兄弟" 便自行CP，统治了整个文件界。”

注意文中的代码并非实际代码，请移步至github查看代码

https://github.com/pseudo-god...

分片上传

HTML

原生INPUT样式较丑，这里通过样式叠加的方式，放一个Button.

<el-button-group>

<el-button :disabled="changeDisabled">

<i class="el-icon-upload2 el-icon--left" size="mini"></i>选择文件

<input

v-if="!changeDisabled"

type="file"

:multiple="multiple"

class="select-file-input"

:accept="accept"

@change="handleFileChange"

/>

</el-button>

<el-button :disabled="uploadDisabled" @click="handleUpload()"><i class="el-icon-upload el-icon--left" size="mini"></i>上传</el-button>

<el-button :disabled="pauseDisabled" @click="handlePause"><i class="el-icon-video-pause el-icon--left" size="mini"></i>暂停</el-button>

<el-button :disabled="resumeDisabled" @click="handleResume"><i class="el-icon-video-play el-icon--left" size="mini"></i>恢复</el-button>

<el-button :disabled="clearDisabled" @click="clearFiles"><i class="el-icon-video-play el-icon--left" size="mini"></i>清空</el-button>

</el-button-group>

<slot

//data 数据

var chunkSize = 10 * 1024 * 1024; // 切片大小

var fileIndex = 0; // 当前正在被遍历的文件下标

data: () => ({

container: {

files: null

},

tempFilesArr: [], // 存储files信息

cancels: [], // 存储要取消的请求

tempThreads: 3,

// 默认状态

status: Status.wait

}),

一个稍微好看的UI就出来了。

选择文件

选择文件过程中，需要对外暴露出几个钩子，熟悉elementUi的同学应该很眼熟，这几个钩子基本与其一致。onExceed:文件超出个数限制时的钩子、beforeUpload：文件上传之前

fileIndex 这个很重要，因为是多文件上传，所以定位当前正在被上传的文件就很重要，基本都靠它

handleFileChange(e) {

const files = e.target.files;

if (!files) return;

Object.assign(this.$data, this.$options.data()); // 重置data所有数据

fileIndex = 0; // 重置文件下标

this.container.files = files;

// 判断文件选择的个数

if (this.limit && this.container.files.length > this.limit) {

this.onExceed && this.onExceed(files);

return;

}

// 因filelist不可编辑，故拷贝filelist 对象

var index = 0; // 所选文件的下标，主要用于剔除文件后，原文件list与临时文件list不对应的情况

for (const key in this.container.files) {

if (this.container.files.hasOwnProperty(key)) {

const file = this.container.files[key];

if (this.beforeUpload) {

const before = this.beforeUpload(file);

if (before) {

this.pushTempFile(file, index);

}

if (!this.beforeUpload) {

this.pushTempFile(file, index);

}

index++;

}

},

// 存入 tempFilesArr，为了上面的钩子，所以将代码做了拆分

pushTempFile(file, index) {

// 额外的初始值

const obj = {

status: fileStatus.wait,

chunkList: [],

uploadProgress: 0,

hashProgress: 0,

index

};

for (const k in file) {

obj[k] = file[k];

}

console.log('pushTempFile -> obj', obj);

this.tempFilesArr.push(obj);

}

分片上传

创建切片，循环分解文件即可

createFileChunk(file, size = chunkSize) {

const fileChunkList = [];

var count = 0;

while (count < file.size) {

fileChunkList.push({

file: file.slice(count, count + size)

});

count += size;

}

return fileChunkList;

}

循环创建切片,既然咱们做的是多文件，所以这里就有循环去处理，依次创建文件切片，及切片的上传。

async handleUpload(resume) {

if (!this.container.files) return;

this.status = Status.uploading;

const filesArr = this.container.files;

var tempFilesArr = this.tempFilesArr;

for (let i = 0; i < tempFilesArr.length; i++) {

fileIndex = i;

//创建切片

const fileChunkList = this.createFileChunk(

filesArr[tempFilesArr[i].index]

);

tempFilesArr[i].fileHash ='xxxx'; // 先不用看这个，后面会讲，占个位置

tempFilesArr[i].chunkList = fileChunkList.map(({ file }, index) => ({

fileHash: tempFilesArr[i].hash,

fileName: tempFilesArr[i].name,

index,

hash: tempFilesArr[i].hash + '-' + index,

chunk: file,

size: file.size,

uploaded: false,

progress: 0, // 每个块的上传进度

status: 'wait' // 上传状态，用作进度状态显示

}));

//上传切片

await this.uploadChunks(this.tempFilesArr[i]);

}

上传切片，这个里需要考虑的问题较多，也算是核心吧，uploadChunks方法只负责构造传递给后端的数据，核心上传功能放到sendRequest方法中

async uploadChunks(data) {

var chunkData = data.chunkList;

const requestDataList = chunkData

.map(({ fileHash, chunk, fileName, index }) => {

const formData = new FormData();

formData.append('md5', fileHash);

formData.append('file', chunk);

formData.append('fileName', index); // 文件名使用切片的下标

return { formData, index, fileName };

});

try {

await this.sendRequest(requestDataList, chunkData);

} catch (error) {

// 上传有被reject的

this.$message.error('亲上传失败了,考虑重试下呦' + error);

return;

}

// 合并切片

const isUpload = chunkData.some(item => item.uploaded === false);

console.log('created -> isUpload', isUpload);

if (isUpload) {

alert('存在失败的切片');

} else {

// 执行合并

await this.mergeRequest(data);

}

sendReques。上传这是最重要的地方，也是容易失败的地方,假设有10个分片，那我们若是直接发10个请求的话，很容易达到浏览器的瓶颈，所以需要对请求进行并发处理。

并发处理：这里我使用for循环控制并发的初始并发数，然后在 handler 函数里调用自己，这样就控制了并发。在handler中，通过数组API.shift模拟队列的效果，来上传切片。

重试: retryArr 数组存储每个切片文件请求的重试次数，做累加。比如[1,0,2],就是第0个文件切片报错1次，第2个报错2次。为保证能与文件做对应，const index = formInfo.index; 我们直接从数据中拿之前定义好的index。若失败后，将失败的请求重新加入队列即可。

关于并发及重试我写了一个小Demo,若不理解可以自己在研究下，文件地址：https://github.com/pseudo-god... , 重试代码好像被我弄丢了，大家要是有需求，我再补吧！

// 并发处理

sendRequest(forms, chunkData) {

var finished = 0;

const total = forms.length;

const that = this;

const retryArr = []; // 数组存储每个文件hash请求的重试次数，做累加比如[1,0,2],就是第0个文件切片报错1次，第2个报错2次

return new Promise((resolve, reject) => {

const handler = () => {

if (forms.length) {

// 出栈

const formInfo = forms.shift();

const formData = formInfo.formData;

const index = formInfo.index;

instance.post('fileChunk', formData, {

onUploadProgress: that.createProgresshandler(chunkData[index]),

cancelToken: new CancelToken(c => this.cancels.push(c)),

timeout: 0

}).then(res => {

console.log('handler -> res', res);

// 更改状态

chunkData[index].uploaded = true;

chunkData[index].status = 'success';

finished++;

handler();

})

.catch(e => {

// 若暂停，则禁止重试

if (this.status === Status.pause) return;

if (typeof retryArr[index] !== 'number') {

retryArr[index] = 0;

}

// 更新状态

chunkData[index].status = 'warning';

// 累加错误次数

retryArr[index]++;

// 重试3次

if (retryArr[index] >= this.chunkRetry) {

return reject('重试失败', retryArr);

}

this.tempThreads++; // 释放当前占用的通道

// 将失败的重新加入队列

forms.push(formInfo);

handler();

});

}

if (finished >= total) {

resolve('done');

}

};

// 控制并发

for (let i = 0; i < this.tempThreads; i++) {

handler();

}

});

}

切片的上传进度，通过axios的onUploadProgress事件，结合createProgresshandler方法进行维护

// 切片上传进度

createProgresshandler(item) {

return p => {

item.progress = parseInt(String((p.loaded / p.total) * 100));

this.fileProgress();

};

}

Hash计算

其实就是算一个文件的MD5值，MD5在整个项目中用到的地方也就几点。

秒传，需要通过MD5值判断文件是否已存在。

续传：需要用到MD5作为key值，当唯一值使用。

本项目主要使用worker处理，性能及速度都会有很大提升.

由于是多文件，所以HASH的计算进度也要体现在每个文件上，所以这里使用全局变量fileIndex来定位当前正在被上传的文件

执行计算hash

正在上传文件

// 生成文件 hash（web-worker）

calculateHash(fileChunkList) {

return new Promise(resolve => {

this.container.worker = new Worker('./hash.js');

this.container.worker.postMessage({ fileChunkList });

this.container.worker.onmessage = e => {

const { percentage, hash } = e.data;

if (this.tempFilesArr[fileIndex]) {

this.tempFilesArr[fileIndex].hashProgress = Number(

percentage.toFixed(0)

);

}

if (hash) {

resolve(hash);

}

};

});

}

因使用worker，所以我们不能直接使用NPM包方式使用MD5。需要单独去下载spark-md5.js文件，并引入

//hash.js

self.importScripts("/spark-md5.min.js"); // 导入脚本

// 生成文件 hash

self.onmessage = e => {

const { fileChunkList } = e.data;

const spark = new self.SparkMD5.ArrayBuffer();

let percentage = 0;

let count = 0;

const loadNext = index => {

const reader = new FileReader();

reader.readAsArrayBuffer(fileChunkList[index].file);

reader.onload = e => {

count++;

spark.append(e.target.result);

if (count === fileChunkList.length) {

self.postMessage({

percentage: 100,

hash: spark.end()

});

self.close();

} else {

percentage += 100 / fileChunkList.length;

self.postMessage({

percentage

});

loadNext(count);

}

};

loadNext(0);

};

文件合并

当我们的切片全部上传完毕后，就需要进行文件的合并，这里我们只需要请求接口即可

mergeRequest(data) {

const obj = {

md5: data.fileHash,

fileName: data.name,

fileChunkNum: data.chunkList.length

};

instance.post('fileChunk/merge', obj,

{

timeout: 0

})

.then((res) => {

this.$message.success('上传成功');

});

}

Done: 至此一个分片上传的功能便已完成

断点续传

顾名思义，就是从那断的就从那开始，明确思路就很简单了。一般有2种方式，一种为服务器端返回，告知我从那开始，还有一种是浏览器端自行处理。2种方案各有优缺点。本项目使用第二种。

思路：已文件HASH为key值，每个切片上传成功后，记录下来便可。若需要续传时，直接跳过记录中已存在的便可。本项目将使用Localstorage进行存储,这里我已提前封装好addChunkStorage、getChunkStorage方法。

存储在Stroage的数据

缓存处理

在切片上传的axios成功回调中，存储已上传成功的切片

instance.post('fileChunk', formData, )

.then(res => {

// 存储已上传的切片下标

+ this.addChunkStorage(chunkData[index].fileHash, index);

handler();

})

在切片上传前，先看下localstorage中是否存在已上传的切片,并修改uploaded

async handleUpload(resume) {

+ const getChunkStorage = this.getChunkStorage(tempFilesArr[i].hash);

tempFilesArr[i].chunkList = fileChunkList.map(({ file }, index) => ({

+ uploaded: getChunkStorage && getChunkStorage.includes(index), // 标识：是否已完成上传

+ progress: getChunkStorage && getChunkStorage.includes(index) ? 100 : 0,

+ status: getChunkStorage && getChunkStorage.includes(index)? 'success'

+ : 'wait' // 上传状态，用作进度状态显示

}));

}

构造切片数据时，过滤掉uploaded为true的

async uploadChunks(data) {

var chunkData = data.chunkList;

const requestDataList = chunkData

+ .filter(({ uploaded }) => !uploaded)

.map(({ fileHash, chunk, fileName, index }) => {

const formData = new FormData();

formData.append('md5', fileHash);

formData.append('file', chunk);

formData.append('fileName', index); // 文件名使用切片的下标

return { formData, index, fileName };

})

}

垃圾文件清理

随着上传文件的增多，相应的垃圾文件也会增多，比如有些时候上传一半就不再继续，或上传失败，碎片文件就会增多。解决方案我目前想了2种

前端在localstorage设置缓存时间，超过时间就发送请求通知后端清理碎片文件，同时前端也要清理缓存。

前后端都约定好，每个缓存从生成开始，只能存储12小时，12小时后自动清理

以上2中方案似乎都有点问题，极有可能造成前后端因时间差，引发切片上传异常的问题，后面想到合适的解决方案再来更新吧。

Done: 续传到这里也就完成了。

秒传

这算是最简单的，只是听起来很厉害的样子。原理：计算整个文件的HASH，在执行上传操作前，向服务端发送请求，传递MD5值，后端进行文件检索。若服务器中已存在该文件，便不进行后续的任何操作，上传也便直接结束。大家一看就明白

async handleUpload(resume) {

if (!this.container.files) return;

const filesArr = this.container.files;

var tempFilesArr = this.tempFilesArr;

for (let i = 0; i < tempFilesArr.length; i++) {

const fileChunkList = this.createFileChunk(

filesArr[tempFilesArr[i].index]

);

// hash校验，是否为秒传

+ tempFilesArr[i].hash = await this.calculateHash(fileChunkList);

+ const verifyRes = await this.verifyUpload(

+ tempFilesArr[i].name,

+ tempFilesArr[i].hash

+ );

+ if (verifyRes.data.presence) {

+ tempFilesArr[i].status = fileStatus.secondPass;

+ tempFilesArr[i].uploadProgress = 100;

+ } else {

console.log('开始上传切片文件----》', tempFilesArr[i].name);

await this.uploadChunks(this.tempFilesArr[i]);

}

// 文件上传之前的校验：校验文件是否已存在

verifyUpload(fileName, fileHash) {

return new Promise(resolve => {

const obj = {

md5: fileHash,

fileName,

...this.uploadArguments //传递其他参数

};

instance

.post('fileChunk/presence', obj)

.then(res => {

resolve(res.data);

})

.catch(err => {

console.log('verifyUpload -> err', err);

});

}

Done: 秒传到这里也就完成了。

后端处理

文章好像有点长了，具体代码逻辑就先不贴了，除非有人留言要求，嘻嘻，有时间再更新

Node版

请前往 https://github.com/pseudo-god... 查看

JAVA版

下周应该会更新处理

PHP版

1年多没写PHP了，抽空我会慢慢补上来

待完善

切片的大小：这个后面会做出动态计算的。需要根据当前所上传文件的大小，自动计算合适的切片大小。避免出现切片过多的情况。

文件追加：目前上传文件过程中，不能继续选择文件加入队列。（这个没想好应该怎么处理。）

更新记录

组件已经运行一段时间了，期间也测试出几个问题，本来以为没BUG的，看起来BUG都挺严重

BUG-1：当同时上传多个内容相同但是文件名称不同的文件时，出现上传失败的问题。

预期结果：第一个上传成功后，后面相同的问文件应该直接秒传

实际结果：第一个上传成功后，其余相同的文件都失败，错误信息，块数不对。

原因：当第一个文件块上传完毕后，便立即进行了下一个文件的循环，导致无法及时获取文件是否已秒传的状态，从而导致失败。

解决方案：在当前文件分片上传完毕并且请求合并接口完毕后，再进行下一次循环。

将子方法都改为同步方式，mergeRequest 和 uploadChunks 方法

BUG-2: 当每次选择相同的文件并触发beforeUpload方法时，若第二次也选择了相同的文件，beforeUpload方法失效，从而导致整个流程失效。

原因：之前每次选择文件时，没有清空上次所选input文件的数据，相同数据的情况下，是不会触发input的change事件。

解决方案：每次点击input时，清空数据即可。我顺带优化了下其他的代码，具体看提交记录吧。

<input

v-if="!changeDisabled"

type="file"

:multiple="multiple"

class="select-file-input"

:accept="accept"

+ οnclick="f.outerHTML=f.outerHTML"

@change="handleFileChange"/>

重写了暂停和恢复的功能，实际上，主要是增加了暂停和恢复的状态

之前的处理逻辑太简单粗暴，存在诸多问题。现在将状态定位在每一个文件之上，这样恢复上传时，直接跳过即可

封装组件

写了一大堆，其实以上代码你直接复制也无法使用，这里我将此封装了一个组件。大家可以去github下载文件，里面有使用案例，若有用记得随手给个star，谢谢!

偷个懒，具体封装组件的代码就不列出来了，大家直接去下载文件查看,若有不明白的，可留言。

组件文档

Attribute

参数类型说明默认备注

headers Object 设置请求头

before-upload Function 上传文件前的钩子，返回false则停止上传

accept String 接受上传的文件类型

upload-arguments Object 上传文件时携带的参数

with-credentials Boolean 是否传递Cookie false

limit Number 最大允许上传个数 0 0为不限制

on-exceed Function 文件超出个数限制时的钩子

multiple Boolean 是否为多选模式 true

base-url String 由于本组件为内置的AXIOS，若你需要走代理，可以直接在这里配置你的基础路径

chunk-size Number 每个切片的大小 10M

threads Number 请求的并发数 3 并发数越高，对服务器的性能要求越高，尽可能用默认值即可

chunk-retry Number 错误重试次数 3 分片请求的错误重试次数

Slot

方法名说明参数备注

header 按钮区域无

tip 提示说明文字无

后端接口文档：按文档实现即可

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2914)

192020-7

初学者应该看的 Webpack 完整指南（2020）

seo达人

我们应该学习 webpack 吗？

如今，CLI工具（如create-react-app或Vue -cli）已经为我们抽象了大部分配置，并提供了合理的默认设置。

即使那样，了解幕后工作原理还是有好处的，因为我们迟早需要对默认值进行一些调整。

在本文中中，我们会知道 webpack可以做什么，以及如何配置它以满足我们的日常需求。

什么是 webpack？

作为前端开发人员，我们应该熟悉 module 概念。你可能听说过 AMD模块，UMD，Common JS还有ES模块。

webpack是一个模块绑定器，它对模块有一个更广泛的定义，对于webpack来说，模块是：

Common JS modules

AMD modules

CSS import

Images url

ES modules

webpack 还可以从这些模块中获取依赖关系。

webpack 的最终目标是将所有这些不同的源和模块类型统一起来，从而将所有内容导入JavaScript代码，并最生成可以运行的代码。

entry

Webpack的 entry(入口点)是收集前端项目的所有依赖项的起点。实际上，这是一个简单的 JavaScript 文件。

这些依赖关系形成一个依赖关系图。

Webpack 的默认入口点（从版本4开始）是src/index.js，它是可配置的。 webpack 可以有多个入口点。

Output

output是生成的JavaScript和静态文件的地方。

Loaders

Loaders 是第三方扩展程序，可帮助webpack处理各种文件扩展名。例如，CSS，图像或txt文件。

Loaders的目标是在模块中转换文件（JavaScript以外的文件）。文件成为模块后，webpack可以将其用作项目中的依赖项。

Plugins

插件是第三方扩展，可以更改webpack的工作方式。例如，有一些用于提取HTML，CSS或设置环境变量的插件。

Mode

webpack 有两种操作模式：开发(development)和生产(production)。它们之间的主要区别是生产模式自动生成一些优化后的代码。

Code splitting

代码拆分或延迟加载是一种避免生成较大包的优化技术。

通过代码拆分，开发人员可以决定仅在响应某些用户交互时加载整个JavaScript块，比如单击或路由更改(或其他条件)。

被拆分的一段代码称为 chunk。

Webpack入门

开始使用webpack时，先创建一个新文件夹，然后进入该文件中，初始化一个NPM项目，如下所示：

mkdir webpack-tutorial && cd $_

npm init -y

接着安装 webpack，webpack-cli和 webpack-dev-server：

npm i webpack webpack-cli webpack-dev-server --save-dev

要运行 webpack，只需要在 package.json 配置如下命令即可：

"scripts": {

"dev": "webpack --mode development"

},

通过这个脚本，我们指导webpack在开发模式下工作，方便在本地工作。

Webpack 的第一步

在开发模式下运行 webpack:

npm run dev

运行完后会看到如下错误：

ERROR in Entry module not found: Error: Can't resolve './src'

webpack 在这里寻找默认入口点src/index.js，所以我们需要手动创建一下，并输入一些内容:

mkdir src

echo 'console.log("Hello webpack!")' > src/index.js

现在再次运行npm run dev，错误就没有了。运行的结果生成了一个名为dist/的新文件夹，其中包含一个名为main.js的 JS 文件：

dist

└── main.js

这是我们的第一个webpack包，也称为output。

配置 Webpack

对于简单的任务，webpack无需配置即可工作，但是很快我们就会遇到问题，一些文件如果没有指定的 loader 是没法打包的。所以，我们需要对 webpack进行配置，对于 webpack 的配置是在 webpack.config.js 进行的，所以我们需要创建该文件：

touch webpack.config.js

Webpack 用 JavaScript 编写，并在无头 JS 环境（例如Node.js）上运行。在此文件中，至少需要一个module.exports，这是的 Common JS 导出方式：

module.exports = {

//

};

在webpack.config.js中，我们可以通过添加或修改来改变webpack的行为方式

entry point

output

loaders

plugins

code splitting

例如，要更改入口路径，我们可以这样做

const path = require("path");

module.exports = {

entry: { index: path.resolve(__dirname, "source", "index.js") }

};

现在，webpack 将在source/index.js中查找要加载的第一个文件。要更改包的输出路径，我们可以这样做：

const path = require("path");

module.exports = {

output: {

path: path.resolve(__dirname, "build")

}

这样，webpack将把最终生成包放在build中，而不是dist.(为了简单起见，在本文中，我们使用默认配置)。

打包 HTML

没有HTML页面的Web应用程序几乎没有用。要在webpack中使用 HTML，我们需要安装一个插件html-webpack-plugin：

npm i html-webpack-plugin --save-dev

一旦插件安装好，我们就可以对其进行配置:

const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

module.exports = {

plugins: [

new HtmlWebpackPlugin({

})

]

};

这里的意思是让 webpack，从 src/index.html 加载 HTML 模板。

html-webpack-plugin的最终目标有两个：

加载 html 文件

它将bundle注入到同一个文件中

接着，我们需要在 src/index.html 中创建一个简单的 HTML 文件：

<!DOCTYPE html>

<head>

<title>Webpack tutorial</title>

</head>

<body>

</body>

</html>

稍后，我们会运行这个程序。

webpack development server

在本文第一部分中，我们安装了webpack-dev-server。如果你忘记安装了，现在可以运行下面命令安装一下：

npm i webpack-dev-server --save-dev

webpack-dev-server 可以让开发更方便，不需要改动了文件就去手动刷新文件。配置完成后，我们可以启动本地服务器来提供文件。

要配置webpack-dev-server，请打开package.json并添加一个 “start” 命令：

"scripts": {

"dev": "webpack --mode development",

"start": "webpack-dev-server --mode development --open",

},

有了 start 命令，我们来跑一下：

npm start

运行后，默认浏览器应打开。在浏览器的控制台中，还应该看到一个 script 标签，引入的是我们的 main.js。

clipboard.png

使用 webpack loader

Loader是第三方扩展程序，可帮助webpack处理各种文件扩展名。例如，有用于 CSS，图像或 txt 文件的加载程序。

下面是一些 loader 配置介绍：

module.exports = {

module: {

rules: [

{

test: /\.filename$/,

use: ["loader-b", "loader-a"]

}

]

},

//

};

相关配置以module 关键字开始。在module内，我们在rules内配置每个加载程序组或单个加载程序。

对于我们想要作为模块处理的每个文件，我们用test和use配置一个对象

{

test: /\.filename$/,

use: ["loader-b", "loader-a"]

}

test 告诉 webpack “嘿，将此文件名视为一个模块”。 use 定义将哪些 loaders 应用于些打包的文件。

打包 CSS

要在webpack 中打包CSS，我们需要至少安装两个 loader。Loader 对于帮助 webpack 了解如何处理.css文件是必不可少的。

要在 webpack 中测试 CSS，我们需要在 src 下创建一个style.css文件：

h1 {

color: orange;

}

另外在 src/index.html 添加 h1 标签

<!DOCTYPE html>

<head>

<title>Webpack tutorial</title>

</head>

<body>

<h1>Hello webpack!</h1>

</body>

</html>

最后，在src/index.js 中加载 CSS：

在测试之前，我们需要安装两个 loader:

css-loader：解析 css 代码中的 url、@import语法像import和require一样去处理css里面引入的模块

style-loader：帮我们直接将css-loader解析后的内容挂载到html页面当中

安装 loader：

npm i css-loader style-loader --save-dev

然后在webpack.config.js中配置它们

const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

module.exports = {

module: {

rules: [

{

test: /\.css$/,

use: ["style-loader", "css-loader"]

}

]

},

plugins: [

new HtmlWebpackPlugin({

})

]

};

现在，如果你运行npm start，会看到样式表加载在HTML的头部：

clipboard.png

一旦CSS Loader 就位，我们还可以使用MiniCssExtractPlugin提取CSS文件

Webpack Loader 顺序很重要！

在webpack中，Loader 在配置中出现的顺序非常重要。以下配置无效:

//

module.exports = {

module: {

rules: [

{

test: /\.css$/,

use: ["css-loader", "style-loader"]

}

]

},

//

};

此处，“style-loader”出现在 “css-loader” 之前。但是style-loader用于在页面中注入样式，而不是用于加载实际的CSS文件。

相反，以下配置有效：

module.exports = {

module: {

rules: [

{

test: /\.css$/,

use: ["style-loader", "css-loader"]

}

]

},

//

};

webpack loaders 是从右到左执行的。

打包 sass

要在 webpack 中测试sass，同样，我们需要在 src 目录下创建一个 style.scss 文件：

@import url("https://fonts.googleapis.com/css?family=Karla:weight@400;700&display=swap");

$font: "Karla", sans-serif;

$primary-color: #3e6f9e;

body {

font-family: $font;

color: $primary-color;

}

另外，在src/index.html中添加一些 Dom 元素：

<!DOCTYPE html>

<head>

<title>Webpack tutorial</title>

</head>

<body>

<h1>Hello webpack!</h1>

<p>Hello sass!</p>

</body>

</html>

最后，将 sass 文件加载到src/index.js中：

import "./style.scss";

console.log("Hello webpack!");

在测试之前，我们需要安装几个 loader:

sass-loader：加载 SASS / SCSS 文件并将其编译为 CSS

css-loader：解析 css 代码中的 url、@import语法像import和require一样去处理css里面引入的模块

style-loader：帮我们直接将css-loader解析后的内容挂载到html页面当中

安装 loader:

npm i css-loader style-loader sass-loader sass --save-dev

然后在webpack.config.js中配置它们：

const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

module.exports = {

module: {

rules: [

{

test: /\.scss$/,

use: ["style-loader", "css-loader", "sass-loader"]

}

]

},

plugins: [

new HtmlWebpackPlugin({

})

]

};

注意loader的出现顺序：首先是sass-loader，然后是css-loader，最后是style-loader。

现在，运行npm start，你应该会在HTML的头部看到加载的样式表：

clipboard.png

打包现代 JavaScrip

webpack 本身并不知道如何转换JavaScript代码。该任务已外包给babel的第三方 loader，特别是babel-loader。

babel是一个JavaScript编译器和“编译器”。 babel 可以将现代JS(es6, es7...)转换为可以在（几乎）任何浏览器中运行的兼容代码。

同样，要使用它，我们需要安装一些 Loader:

babel-core ：把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理

babel-preset-env：将现代 JS 编译为ES5

babel-loader ：用于 webpack

引入依赖关系

npm i @babel/core babel-loader @babel/preset-env --save-dev

接着，创建一个新文件babel.config.json配置babel，内容如下：

{

"presets": [

"@babel/preset-env"

]

}

最后在配置一下 webpack ：

const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

module.exports = {

module: {

rules: [

{

test: /\.scss$/,

use: ["style-loader", "css-loader", "sass-loader"]

},

{

test: /\.js$/,

use: ["babel-loader"]

}

]

},

plugins: [

new HtmlWebpackPlugin({

})

]

};

要测试转换，可以在 src/index.js中编写一些现代语法：

import "./style.scss";

console.log("Hello webpack!");

const fancyFunc = () => {

return [1, 2];

};

const [a, b] = fancyFunc();

现在运行npm run dev来查看dist中转换后的代码。打开 dist/main.js并搜索“fancyFunc”：

\n\nvar fancyFunc = function fancyFunc() {\n return [1, 2];\n};\n\nvar _fancyFunc = fancyFunc(),\n _fancyFunc2 = _slicedToArray(_fancyFunc, 2),\n a = _fancyFunc2[0],\n b = _fancyFunc2[1];\n\n//# sourceURL=webpack:///./src/index.js?"

没有babel，代码将不会被转译：

\n\nconsole.log(\"Hello webpack!\");\n\nconst fancyFunc = () => {\n return [1, 2];\n};\n\nconst [a, b] = fancyFunc();\n\n\n//# sourceURL=webpack:///./src/index.js?");

注意：即使没有babel，webpack也可以正常工作。仅在执行 ES5 代码时才需要进行代码转换过程。

在 Webpack 中使用 JS 的模块

webpack 将整个文件视为模块。但是，请不要忘记它的主要目的：加载ES模块。

ECMAScript模块（简称ES模块）是一种JavaScript代码重用的机制，于2015年推出，一经推出就受到前端开发者的喜爱。在2015之年，JavaScript 还没有一个代码重用的标准机制。多年来，人们对这方面的规范进行了很多尝试，导致现在有多种模块化的方式。

你可能听说过AMD模块，UMD，或CommonJS，这些没有孰优孰劣。最后，在ECMAScript 2015中，ES 模块出现了。

我们现在有了一个“正式的”模块系统。

要在 webpack 使用 ES module ，首先创建 src/common/usersAPI.js 文件：

const ENDPOINT = "https://jsonplaceholder.typicode.com/users/";

export function getUsers() {

return fetch(ENDPOINT)

.then(response => {

if (!response.ok) throw Error(response.statusText);

return response.json();

})

.then(json => json);

}

在 src/index.js中,引入上面的模块：

import { getUsers } from "./common/usersAPI";

import "./style.scss";

console.log("Hello webpack!");

getUsers().then(json => console.log(json));

生产方式

如前所述，webpack有两种操作模式：开发(development )和(production)。到目前为止，我们仅在开发模式下工作。

在开发模式中，为了便于代码调试方便我们快速定位错误，不会压缩混淆源代码。相反，在生产模式下，webpac k进行了许多优化：

使用 TerserWebpackPlugin 进行缩小以减小 bundle 的大小

使用ModuleConcatenationPlugin提升作用域

在生产模式下配置webpack，请打开 package.json 并添加一个“ build” 命令：

现在运行 npm run build，webpack 会生成一个压缩的包。

Code splitting

代码拆分(Code splitting)是指针对以下方面的优化技术：

避免出现一个很大的 bundle

避免重复的依赖关系

webpack 社区考虑到应用程序的初始 bundle 的最大大小有一个限制：200KB。

在 webpack 中有三种激活 code splitting 的主要方法:

有多个入口点

使用 optimization.splitChunks 选项

动态导入

第一种基于多个入口点的技术适用于较小的项目，但是从长远来看它是不可扩展的。这里我们只关注第二和第三种方式。

Code splitting 与 optimization.splitChunks

考虑一个使用Moment.js 的 JS 应用程序，Moment.js是流行的时间和日期JS库。

在项目文件夹中安装该库:

npm i moment

现在清除src/index.js的内容，并引入 moment 库：

import moment from "moment";

运行 npm run build 并查看控制的输出内容：

main.js 350 KiB 0 [emitted] [big] main

整个 moment 库都绑定到了 main.js 中这样是不好的。借助optimization.splitChunks，我们可以从主包中移出moment.js。

要使用它，需要在 webpack.config.js 添加 optimization 选项：

const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

module.exports = {

module: {

// ...

},

optimization: {

splitChunks: { chunks: "all" }

},

// ...

};

运行npm run build 并查看运行结果：

main.js 5.05 KiB 0 [emitted] main

vendors~main.js 346 KiB 1 [emitted] [big] vendors~main

现在，我们有了一个带有moment.js 的vendors〜main.js，而主入口点的大小更合理。

注意：即使进行代码拆分，moment.js仍然是一个体积较大的库。有更好的选择，如使用luxon或date-fns。

Code splitting 与动态导入

Code splitting的一种更强大的技术使用动态导入来有条件地加载代码。在ECMAScript 2020中提供此功能之前，webpack 提供了动态导入。

这种方法在 Vue 和 React 之类的现代前端库中得到了广泛使用（React有其自己的方式，但是概念是相同的）。

Code splitting 可用于：

模块级别

路由级别

例如，你可以有条件地加载一些 JavaScript 模块，以响应用户的交互（例如单击或鼠标移动）。或者，可以在响应路由更改时加载代码的相关部分。

要使用动态导入，我们先清除src/index.html，并写入下面的内容：

<!DOCTYPE html>

<head>

<title>Dynamic imports</title>

</head>

<body>

</body>

</html>

在 src/common/usersAPI.js中：

const ENDPOINT = "https://jsonplaceholder.typicode.com/users/";

export function getUsers() {

return fetch(ENDPOINT)

.then(response => {

if (!response.ok) throw Error(response.statusText);

return response.json();

})

.then(json => json);

}

在 src/index.js 中

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {

//

});

如果运行npm run start查看并单击界面中的按钮，什么也不会发生。

现在想象一下，我们想在某人单击按钮后加载用户列表。 “原生”的方法可以使用静态导入从src/common /usersAPI.js加载函数：

import { getUsers } from "./common/usersAPI";

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {

getUsers().then(json => console.log(json));

});

问题在于ES模块是静态的，这意味着我们无法在运行时更改导入的内容。

通过动态导入，我们可以选择何时加载代码

const getUserModule = () => import("./common/usersAPI");

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {

getUserModule().then(({ getUsers }) => {

getUsers().then(json => console.log(json));

});

这里我们创建一个函数来动态加载模块

const getUserModule = () => import("./common/usersAPI");

现在，当你第一次使用npm run start加载页面时，会看到控制台中已加载 js 包：

clipboard.png

现在，仅在单击按钮时才加载/common/usersAPI：

clipboard.png

对应的 chunk 是 0.js

通过在导入路径前面加上魔法注释/ * webpackChunkName：“ name_here” * /，可以更改块名称：

const getUserModule = () =>

import(/* webpackChunkName: "usersAPI" */ "./common/usersAPI");

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {

getUserModule().then(({ getUsers }) => {

getUsers().then(json => console.log(json));

});

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2442)

172020-7

iview按需引入，ie11不兼容，报无效字符问题解决

seo达人

准备工作

//借助插件

npm install babel-plugin-import --save-dev

// .babelrc

{

"plugins": [["import", {

"libraryName": "view-design",

"libraryDirectory": "src/components"

}]]

}

在main.js中引入

import "view-design/dist/styles/iview.css";

import { Button, Table } from "view-design";

const viewDesign = {

Button: Button,

Table: Table

};

Object.keys(viewDesign).forEach(element => {

Vue.component(element, viewDesign[element]);

});

先用google浏览器打开正常，以上操作猛如虎，IE浏览器打开250，好了不废话，下面是解决方案

解决方案

//vue.config.js中配置

chainWebpack: config => {

//解决iview 按需引入babel转换问题

config.module

.rule("view-design") // 我目前用的是新版本的iview ,旧版本的iview，用iview代替view-design

.test(/view-design.src.*?js$/)

.use("babel")

.loader("babel-loader")

.end();

}

问题原因

为什么会有如上问题呢? 这个就和babel转换问题有关了，按需引入时，那些组件里js文件未进行babel转换或转换不彻底就被引入了，ie11对es6+的语法支持是很差的，所以以上方法就是让引入文件前就对view-design的src下的所有js文件进行babel转换，举一反三，当按需引入第三方框架时出现这个问题，都可用这方法解决了，只要把规则和正则中view-design进行替换。

延伸扩展

//全局引入

import ViewUI from "view-design";

Vue.use(ViewUI);

import "view-design/dist/styles/iview.css";

tips:在全局引入时，一定要记住不要在.babelrc文件里配置按需导入，会导致冲突

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2413)

首页

让你的 commit 更有价值

一文读懂 Web 安全

巧用伪元素before和after制作绚丽效果

你不知道的 WebSocket

停止犯下这5个JavaScript风格错误，使你的代码可读和可维护的快速提示

你可能不需要在 JavaScript 使用 switch 语句！

vuex管理状态仓库详解

一.什么是Vuex？

二.不使用vuex时与使用vuex时的差别

不使用vuex时

父子之间传递信息：

兄弟之间传递信息：

VUE-多文件断点续传、秒传、分片上传

初学者应该看的 Webpack 完整指南（2020）

iview按需引入，ie11不兼容，报无效字符问题解决

分类

日历

链接

个人资料

存档