chatgpt,aigc,云计算,大数据,php,java,go,javascript,python,mysql,redis,linux技术文件分享

CSS background属性详解

前端
24956 阅读

1、CSS 背景<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果:<pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">background-color background-image background-repeat background-attachment background-position</pre><a class="reference-link" style="box-sizing: border-box; color: rgb(51, 202, 187); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; transition: all 0.3s linear 0s; outline: none !important;"></a>2. 背景颜色<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">background-color 属性定义了元素的背景颜色。 页面的背景颜色使用在body的选择器中:<ul style="box-sizing: border-box; margin-bottom: 16px; padding: 0px 0px 0px 2em; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;" class=" list-paddingleft-2"><li>实例</li></ul><pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">body {     background-color:#b0c4de; }</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">CSS中，颜色值通常以以下方式定义: 十六进制 - 如："#ff0000" RGB - 如："rgb(255,0,0)" 颜色名称 - 如："red" 以下实例中, h1, p, 和 div 元素拥有不同的背景颜色：<ul style="box-sizing: border-box; margin-bottom: 16px; padding: 0px 0px 0px 2em; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;" class=" list-paddingleft-2"><li>实例</li></ul><pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">h1 {     background-color:#6495ed; } p {     background-color:#e0ffff; } div {     background-color:#b0c4de; }</pre><a class="reference-link" style="box-sizing: border-box; color: rgb(51, 202, 187); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; transition: all 0.3s linear 0s; outline: none !important;"></a>3. 背景图像<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">background-image 属性描述了元素的背景图像。 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。 页面背景图片设置实例:<ul style="box-sizing: border-box; margin-bottom: 16px; padding: 0px 0px 0px 2em; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;" class=" list-paddingleft-2"><li>实例</li></ul><pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">body {     background-image:url('paper.gif'); }</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">下面是一个例子是一个糟糕的文字和背景图像组合。文本可读性差：<ul style="box-sizing: border-box; margin-bottom: 16px; padding: 0px 0px 0px 2em; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;" class=" list-paddingleft-2"><li>实例</li></ul><pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">body {     background-image:url('bgdesert.jpg'); }</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">背景图像 - 水平或垂直平铺 默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。 一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示：<ul style="box-sizing: border-box; margin-bottom: 16px; padding: 0px 0px 0px 2em; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;" class=" list-paddingleft-2"><li>实例</li></ul><pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">body{         background-image:url('gradient2.png'); }</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:<ul style="box-sizing: border-box; margin-bottom: 16px; padding: 0px 0px 0px 2em; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;" class=" list-paddingleft-2"><li>实例</li></ul><pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">body{         background-image:url('gradient2.png');         background-repeat:repeat-x; }</pre><a class="reference-link" style="box-sizing: border-box; color: rgb(51, 202, 187); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; transition: all 0.3s linear 0s; outline: none !important;"></a>4.背景图像 - 设置定位与不平铺<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">让背景图像不影响文本的排版 如果你不想让图像平铺，你可以使用 background-repeat 属性:<ul style="box-sizing: border-box; margin-bottom: 16px; padding: 0px 0px 0px 2em; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;" class=" list-paddingleft-2"><li>实例</li></ul><pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">body{         background-image:url('img_tree.png');         background-repeat:no-repeat; }</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。 可以利用 background-position 属性改变图像在背景中的位置:<ul style="box-sizing: border-box; margin-bottom: 16px; padding: 0px 0px 0px 2em; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;" class=" list-paddingleft-2"><li>实例</li></ul><pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">body{         background-image:url('img_tree.png');         background-repeat:no-repeat;         background-position:right top; }</pre><a class="reference-link" style="box-sizing: border-box; color: rgb(51, 202, 187); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; transition: all 0.3s linear 0s; outline: none !important;"></a>5. 背景 - 简写属性<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。 为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中。 背景颜色的简写属性为 “background”:<ul style="box-sizing: border-box; margin-bottom: 16px; padding: 0px 0px 0px 2em; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;" class=" list-paddingleft-2"><li>实例</li></ul><pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">body {     background:#ffffff url('img_tree.png') no-repeat right top; }</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">当使用简写属性时，属性值的顺序为：<pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">background-color background-image background-repeat background-attachment background-position</pre><p style="box-sizing: border-box; margin-top: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap; margin-bottom: 0px !important;">以上属性无需全部使用，你可以按照页面的实际需要使用。

document.cookie

前端
26374 阅读

<blockquote style="box-sizing: border-box; margin-right: 0px; margin-bottom: 16px; margin-left: 0px; border-left: 4px solid rgb(238, 238, 238); font-size: 14px; padding: 0px 15px 0px 20px; color: rgb(102, 102, 102); font-style: italic; font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; text-wrap: wrap; margin-top: 0px !important;">Cookie 是一个请求首部，其中含有先前由服务器通过 Set-Cookie 首部投放并存储到客户端的 HTTP cookies。</blockquote><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">cookie 可以作为单独知识了解，这里其实介绍的是 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">document.cookie</code> 。<a class="reference-link" style="box-sizing: border-box; color: rgb(51, 202, 187); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; transition: all 0.3s linear 0s; outline: none !important;"></a>1. document.cookie<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">通过 document.cookie 可以获取与设置 cookie 。<a class="reference-link" style="box-sizing: border-box; color: rgb(51, 202, 187); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; transition: all 0.3s linear 0s; outline: none !important;"></a>2. 获取 cookie<pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">document.cookie;</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">通过 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">document.cookie</code> 获取到的 cookie 由 cookie 的名称和值组成，由等号<code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">=</code>分隔，并且可以有多条，每条 cookie 之间用分号 ‘;’ 分隔。<a class="reference-link" style="box-sizing: border-box; color: rgb(51, 202, 187); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; transition: all 0.3s linear 0s; outline: none !important;"></a>3. 设置cookie<pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">var cookie = 'cookie名称=cookie值'; document.cookie = cookie;</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">设置 cookie 采用<code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">键值对</code>的形式。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">对应的就是 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">cookie的名称</code> 和 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">cookie值</code> 。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">每次只能设置一条 cookie ，但可以同时设置这条 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">cookie的属性</code> 。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">如果需要设置多条 cookie ，则再次给 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">document.cookie</code> 赋一个新值即可，但如果是相同名称的 cookie ，值就会被覆盖。<a class="reference-link" style="box-sizing: border-box; color: rgb(51, 202, 187); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; transition: all 0.3s linear 0s; outline: none !important;"></a>4. 设置 cookie 属性<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">设置 cookie 的同时可以设置这条 cookie 的属性。<pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">document.cookie = '名称=值; 属性1=属性值1; 属性2=属性值2';</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">看起来是可以设置多条 cookie 一样，其实只有第一对值才是 cookie 的值，后面跟的都是这条 cookie 的属性。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">可以跟随的属性有：<ul style="box-sizing: border-box; margin-bottom: 16px; padding: 0px 0px 0px 2em; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;" class=" list-paddingleft-2"><li><code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">path</code> cookie 生效的路径</li><li><code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">domain</code> cookie 生效的域名</li><li><code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">max-age</code> 过期时间，单位是秒</li><li><code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">expires</code> 过期时间，为一个 UTC 时间</li><li><code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">secure</code> 是否只能通过 https 来传递这条 cookie</li></ul><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">这些属性具体作用可以参考 cookie 相关的内容。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">设置完属性可以通过开发者工具查看。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">在开发者工具的 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">Application</code> 面板，<code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">cookie</code> 分类下，每一条 cookie 都可以看到对应的属性。<a class="reference-link" style="box-sizing: border-box; color: rgb(51, 202, 187); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; transition: all 0.3s linear 0s; outline: none !important;"></a>5. 注意点:<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">由于设置 cookie 是具有一定格式的，所以不能有字符来干扰这个格式。<pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">var cookie = 'code=var a = 1; var b = 2;'; document.cookie = cookie;</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">这种情况下，cookie 就不符合预期了，被切断。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">cookie 中不应该含有空格、分号、逗号这些符号。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">借助 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">encodeURIComponent</code> 方法，对 cookie 的值进行编码就可以避免这类问题。<pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">var cookie = 'code=' + encodeURIComponent('var a = 1; var b = 2;'); document.cookie = cookie;</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">后续需要使用到这一条 cookie 的地方，再做一次解码操作即可。<blockquote style="box-sizing: border-box; margin: 0px 0px 16px; border-left: 4px solid rgb(238, 238, 238); font-size: 14px; padding: 0px 15px 0px 20px; color: rgb(102, 102, 102); font-style: italic; font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; text-wrap: wrap;">注意：对字符串编码还可以使用 escape 方法，但已经从标准中移除，目前浏览器虽然还支持这个方法，但无法保证永远会保留这个方法，最好避免使用 escape 方法。</blockquote><a class="reference-link" style="box-sizing: border-box; color: rgb(51, 202, 187); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; transition: all 0.3s linear 0s; outline: none !important;"></a>6. 总结：<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">随着前端存储方案的增加，前端程序员访问 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">document.cookie</code> 相对曾经减少了很多。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">给 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">document.cookie</code> 赋值可以增加一条 cookie，同时通过 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">;</code> 相隔，来设置这条 cookie 的属性。<p style="box-sizing: border-box; margin-top: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap; margin-bottom: 0px !important;">当设置的 cookie 带有特殊字符的时候，如 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">;</code> 或者 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">=</code>，应采用 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">encodeURIComponent</code> 对内容编码，建议所有的 cookie 都进行编码。

JavaScript with解析

前端
13344 阅读

<blockquote style="box-sizing: border-box; margin-right: 0px; margin-bottom: 16px; margin-left: 0px; border-left: 4px solid rgb(238, 238, 238); font-size: 14px; padding: 0px 15px 0px 20px; color: rgb(102, 102, 102); font-style: italic; font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; text-wrap: wrap; margin-top: 0px !important;">with 语句就可以扩展一个语句的作用域链。——MDN</blockquote><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">with 可以指定代码块的作用域，特别是在访问对象成员时，它使得代码非常简洁。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">1、基本语法<pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">with (表达式) {  代码块;}</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">表达式通常会直接给定一个对象。<pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">var person = {  name: '小明',  age: 666,  major: 'english',}; with (person) {       console.log(name); // 输出："小明"       console.log(age); // 输出：666       console.log(major); // 输出："english" }</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">可以看到，with 代码块内输出的变量，实际上是 <code style="box-sizing: border-box; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; color: rgb(232, 62, 140); overflow-wrap: break-word; padding: 3px; margin: 0px 4px 0px 5px; background: rgb(246, 246, 246); border-radius: 3px; border: 1px solid rgb(238, 238, 238);">person</code> 对象的属性。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">在 with 语句中，访问变量会先去看这个变量是不是在给定的对象中作为属性存在，如果存在，则取对象中属性的值，否则继续往上层找。不推荐使用 with<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">尽管 with 很方便，但 with 会造成诸多的问题。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">2.1 造成语义不明<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">先看这段代码：<pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">function fn(block, height) {  with (block) {    console.log(height);  }}</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">这样的代码，有点让阅读代码的人难以理解具体含义。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">阅读代码的时候，无法确定 height 要取 block 下的属性，还是要取形参 height。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">2.2 造成污染<pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">function fn(obj) {       with (obj) {    b = 1;  } }</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">这个场景其实和上面的类似，假如 obj 中没有属性 b ，则会造成上层作用域的污染。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;"><img src="https://www.maxiaoke.com/uploads/images/20230214/2679de3a45c62b24b6717e623e4e3a54.jpeg" alt=""/><hr/><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">事实上很少有前端开发者会使用 with，在很长篇幅的代码中，with 会让代码逻辑变得不清晰，需要反复确认作用域。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">尽可能的避免使用 with ，使用短变量名和合理的空行来使代码变得整洁易懂。<pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 11.9px; line-height: 1.6; font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; margin-top: 0px; margin-bottom: 16px; overflow: auto; color: rgb(47, 111, 159); background-color: rgb(246, 246, 246); border: 1px solid rgb(238, 238, 238); padding: 10px; border-radius: 3px; overflow-wrap: break-word; text-wrap: wrap;">var family = [{         seniority: '子',         name: '小明',         detail: {          birth: '1192/01/22',               sex: 'man',               hand: 8,               leg: 44,               deposit: 9999        },   }]; // 不好的表述形式 family[0].detail.birth = '1122/22/11'; family[0].detail.sex = '?'; var deposit = family[0].detail.family[0].detail; // 取出要操作的数据并控制空行 var detail = family[0].detail; detail.birth = '2312/22/33'; detail.sex = '未知性别'; var deposit = detail.deposit;</pre><a class="reference-link" style="box-sizing: border-box; color: rgb(51, 202, 187); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; transition: all 0.3s linear 0s; outline: none !important;"></a>总结：<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">with 的使用需要谨慎，尽量在可控范围内使用。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; text-wrap: wrap;">使用 with 常见的遇到问题的情况，都是恰巧污染了上层作用域，又恰巧污染的是同名的变量，这也产生的 bug 定位也相对困难。<blockquote style="box-sizing: border-box; margin-top: 0px; margin-right: 0px; margin-left: 0px; border-left: 4px solid rgb(238, 238, 238); font-size: 14px; padding: 0px 15px 0px 20px; color: rgb(102, 102, 102); font-style: italic; font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Monaco, monospace, Tahoma, STXihei, 华文细黑, STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, 宋体, Heiti, 黑体, sans-serif; text-wrap: wrap; margin-bottom: 0px !important;">前端框架 Vue 将 template 转化成 render 函数的时候就用到了 with。</blockquote>

JavaScript基础 -- Break和Continue

前端
19449 阅读

break 与 continue 用来控制循环流程。1、breakbreak 用来中断循环，在 for 循环和 while 循环中都适用。 如：从列表中寻找 id 为 n 的项（每一项的 id 是唯一的）   <pre class="brush:js;toolbar:false">var list = [{ id: 1 }, { id: 4 }, { id: 9 }, { id: 2 }]; var n = 9; var i = 0, len = list.length; for (; i < len; i++) {   console.log(i);   if (list[i].id === n) {     console.log(list[i]);     break;   } }</pre>其实即便没有 break，上面的语句也可以正常执行，因为 id 是唯一的，即便将整个数组遍历完，也只有一个目标项。但是如果整个列表有'上万'条数据，除了获取 id ，还有一些消耗性能的操作，那 break 就变得很关键。  假如最好的情况，寻找的项就在第一项，这时候碰到 break ，剩下无用的寻找操作就都不会执行了，也没有必要执行。将 break 应用在 while 中也是同理，满足某些条件的时候用来中断 while 循环。 如：游戏中的怪物产生了 4 次连击，伤害由四个随机 100 至 2000 的值累加构成，假如在累加的伤害过程中值达到 5000，则直接取当前累加结果作为最终伤害。<pre class="brush:js;toolbar:false">var total = 0; // 累积伤害 var time = 1; // 累加次数      while (time <= 4) {   var one = Math.floor(Math.random() * 2001 + 100);   console.log(one);   total += one;   if (total > 5000) {     break;   }   time++; }</pre>通过 break，可以很容易的达到这个需求。当然不使用 break 也是可以的，可以在达到条件后，将 `time` 变量累加到一个循环条件不成立的情况，也会跳出循环，但是建议使用 break ，否则可能还要去控制 break 之后的逻辑，因为break 之后不一定就是循环结束了，也许还有其他操作。2、continue 当循环中碰到 continue ，则会跳过这次循环，进入下一次循环。如：输出 0 至 100 之间的奇数  <pre class="brush:js;toolbar:false">var i; for (i = 0; i <= 100; i++) {  if (i % 2 === 0) {    continue;   }  console.log(i); }</pre>当碰到偶数的时候，则跳过这次循环，反之则为奇数的情况，会输出值。这个例子比较简单，当一个逻辑复杂的循环体出现的时候，continue 可以让代码块变得稍微简洁。如：对用户列表进行批量操作，只操作 id (id 一定是数字) 末尾为 1 的用户。  <pre class="brush:js;toolbar:false">// 这是一份伪代码 var users = [ ... 很多用户 ];  var i, len; for (i = 0, len = users.length; i < len; i++) {   var user = users[i];   if (user.id % 10 === 1) { // 取到末尾     continue;   }   if (user.edition) { // 如果用户的版本不是免费的 0是免费 其他则是收费     // 做一些操作   }   if (user.money) { // 如果用户有余额     // 做一些操作   }   // ... }</pre>像这样，通过 continue 就可以让流程更清晰。在 while 中的应用是一样的，continue 也可以在 while 中跳过当前循环。使用 while 输出 0 至 100 的奇数：<pre class="brush:js;toolbar:false">var num = -1; while (num < 100) {   num++;   if (num % 2 === 0) {     continue;   }    console.log(num); }</pre>整个流程与 for 循环非常相似。许多代码规范不提倡使用 continue ，因为开发者水平的参差不齐，常有开发者在使用 continue 的时候，让整体逻辑产生了跳跃性，这不利于未来的代码维护者来对代码做阅读理解。3、总结：break 和 continue 适用于 for 循环和 while 循环。continue 的使用没有 break 频繁，使用 continue 的时候需要注意，尽量不要使程序跳跃幅度过大，不利于后期维护。所有需要使用 continue 的地方，都可以不使用 continue 实现。switch 语句中也可以使用 break 来结束 switch 语句的执行。

sshd服务剖析

后端
23809 阅读

什么是ssh服务？ ssh是secure shell protocol的简写，是安全的shell协议。由 IETF 网络工作小组（Network Working Group )制定。sshd中d的含义：d表示守护进程：daemon。一直在内存里运行的程序，除非人为的停止。简单的理解，sshd服务可以让我们通过ssh协议，使用ssh客户端，远程登录到服务器。查看sshd服务：一般的Linux服务器，在安装完系统，需要手动安装sshd服务。查看sshd服务是否在运行：<pre class="brush:ps;toolbar:false">u1@localhost:~/Documents$ ps -ef | grep sshd root 753 1 0 11月26 ? 00:00:00 sshd: /usr/sbin/sshd -D [listener] 0 of 10-100 startups</pre>安装sshd服务：<pre class="brush:ps;toolbar:false">sudo apt install  openssh-server</pre>查看sshd服务状态<pre class="brush:ps;toolbar:false">u1@localhost:~/Documents$ service sshd status ssh.service - OpenBSD Secure Shell server Loaded: loaded (/lib/systemd/system/ssh.service; enabled; vendor preset: enabled) Active: active (running) since Sat 2022-11-26 15:38:54 CST; 9h ago Docs: man:sshd(8)</pre>启动、停止、重启sshd服务：<pre class="brush:ps;toolbar:false">service sshd start service sshd stop service sshd restart</pre>注意，如果已经登录到服务器，此时停止sshd服务，连接将被断开。使用客户端登录到服务器： 如果你的系统可以运行Linux命令，只需要打开终端，使用ssh命令登即可。如果是windows系统，需要使用支持ssh协议的客户端进行连接。ssh登录服务器命令格式：<pre class="brush:ps;toolbar:false">ssh user@server-ip</pre>ssh客户端登录服务器的ssh客户端不限，只要能运行ssh命令即可，如下软件均可登录到服务器：<ul class=" list-paddingleft-2" style="list-style-type: disc;"><li>Windows Power Shell</li><li>微软开发的Terminal</li><li>Tabby</li><li>Xshell</li><li>git客户端等</li></ul>示例： 登录到虚拟机ubuntu服务器：<pre class="brush:ps;toolbar:false">ssh u1@192.168.31.101</pre>ssh免密登录1、生成密钥对<pre class="brush:ps;toolbar:false">ssh-keygen</pre>2、切换到.ssh目录,使用ssh-copy-id上传密钥文件<pre class="brush:ps;toolbar:false">ssh-copy-id -i ./id_rsa.pub root@192.168.31.100</pre>3、修改config文件,配置别名,指定密钥<pre class="brush:ps;toolbar:false">C:/Users/admin/.ssh/config Host vb HostName 192.168.31.100 User root IdentityFile ./id_rsa</pre>4、使用命 ssh vb 即可不用输入密码，直接登录到服务器 5、demo:<pre class="brush:ps;toolbar:false">Host vb HostName 192.168.31.101 User root IdentityFile c:/Users/86158/.ssh/id_rsa</pre>

SSH终端

后端
26295 阅读

SSH概述 Secure Shell的缩写即为SSH，此网络安全协议是由IETF的网络小组（Network Working Group）制作修订的,SSH 为建立在应用层基础上的安全协议。SSH 相比较是可靠的，并且为远程登录会话以及其他的网络服务提供安全性的协议。利用 SSH 协议可以很有效地防止远程管理过程中的账号密码安全问题，SSH 最开始是在 UNIX 操作系统上的一个软件程序，后来快速发展至其他操作系统， SSH在正确使用时可弥补网络中的漏洞 SSH 客户端适用于多种平台，几乎所有 UNIX 平台包括 HP-UX、Linux、AIX、Solaris、Digital UNIX、Irix，且都可运行 SSH。选择终端 登录Linux服务器需要终端软件支持。大家可以选择自己比较习惯的终端，只要能正常输入ssh命令的软件都可以。比如：<ul class=" list-paddingleft-2" style="list-style-type: disc;"><li>Windows自带的PowerShell</li><li>Windows的Terminal</li><li>自己下载的xshell软件</li><li>Tabby软件</li><li>git客户端</li><li>编辑器自带的终端，如vscode等</li></ul>简单地区分，只要你的终端，即命令行工作，能够支持ssh命令，即可以使用该终端登录远程服务器。如何本地电脑 SSH 命令远程登录 Linux 首先确保前面配置服务器处于开机状态，其次，需要保证开启了sshd服务，登录命令如下： <pre class="brush:ps;toolbar:false">ssh -p port user@ip</pre>Tips：其中`-p port` 表示输入远程连接的端口号，一般默认为 22, `user` 表示登录用户名， `ip` 表示远程 Linux 系统的 ip 地址。测试：登录远程服务器：<pre class="brush:ps;toolbar:false">ssh root@182.92.223.149</pre>这是一台阿里云服务器，安装的Linux系统版本为：CentOS

小白一看就懂的虚拟机网络配置

后端
29005 阅读

确认虚拟机网络是否正常： <ul class=" list-paddingleft-2" style="list-style-type: disc;"><li>虚拟机是否可以访问外网</li><li>虚拟机是否与windows网络互通。</li></ul>查看ip:<pre class="brush:ps;toolbar:false">ifconfig</pre>提示命令未找到，安装net-tools:<pre class="brush:ps;toolbar:false">sudo apt install net-tools</pre>windows下查看IP：<pre class="brush:ps;toolbar:false">ipconfig</pre>测试虚拟机是否可以访问外网：<pre class="brush:ps;toolbar:false">ping www.baidu.com</pre>测试虚拟机与windows主机是否互通：互相ping对方ipWindows power shell: ping 虚拟机ip；虚拟机：ping windows ip将虚拟机的ip改为固定ip 如果你的虚拟机每次重启的时候，ip地址可能会发生变化。当我们访问一个项目的时候，由于虚拟机的ip发生了变化，会导致项目访问不到的情况。这样操作会很麻烦，如果能把虚拟机的ip改成固定的就好了。 下面是修改的步骤： 第一步：在windows中打开cmd，使用ipconfig /all命令查看windows机器ip，如：10.1.53.218第二步：确认网卡设置为桥接网卡第三步：进入ubuntu桌面，点击右上角网络图标，点有线设置，如下图： <img src="/uploads/images/20230212/409e5c3849fcfd30100c2f1754d43079.png" title="1.png" alt="" width="859" height="520"/>第四步.设置ip，子网掩码，网关：1.切换到ipv4选项卡，ipv4，由自动改为手动。2.填写固定ip，如第一步查看到的windows的ip为**10.1.53.218**我们虚拟机这里的ip要保持和windows在一个网段，如设置为：10.1.53.132(与windows机器ip保持在同一网段，即前三位相同，最后一位填写1-255中间的一个值)，3.子网掩码、网关与windows保持一致4.DNS填写114.114.114.114即可如图：<img src="/uploads/images/20240616/91601151da34a520b2cab5d5a1d9c2a7.png" title="image.png" alt=""/>最后，重启虚拟机，再次输入ifconfig命令查看虚拟机ip，ip被设置为10.1.53.132，并使用'ping www.baidu.com'测试是否可以连网，如果有返回结果，即设置成功。以后再重启虚拟后，ip将保持固定不变。

Vue间组件通信之findComponents

前端
12622 阅读

Vue中组件间通信的方法：provide / inject 和 dispatch / broadcast。它们有各自的使用场景和局限，比如前者多用于子组件获取父组件的状态，后者常用于父子组件间通过自定义事件通信。 本文将介绍第 3 种组件通信方法，也就是 findComponents 系列方法，它并非 Vue.js 内置，而是需要自行实现，以工具函数的形式来使用，它是一系列的函数，可以说是组件通信的终极方案。findComponents 系列方法最终都是返回组件的实例，进而可以读取或调用该组件的数据和方法。它适用于以下场景：*   由一个组件，向上找到最近的指定组件；*   由一个组件，向上找到所有的指定组件；*   由一个组件，向下找到最近的指定组件；*   由一个组件，向下找到所有指定的组件；*   由一个组件，找到指定组件的兄弟组件。5 个不同的场景，对应 5 个不同的函数，实现原理也大同小异。实现5 个函数的原理，都是通过递归、遍历，找到指定组件的 `name` 选项匹配的组件实例并返回。在目录 `src` 下新建文件夹 `utils` 用来放置工具函数，并新建文件 `assist.js`，本文所有函数都在这个文件里完成，每个函数都通过 `export` 对外提供（如果你不了解 export，请查看扩展阅读）向上找到最近的指定组件——findComponentUpward 先看代码：<pre class="brush:js;toolbar:false">// assist.js // 由一个组件，向上找到最近的指定组件 function findComponentUpward (context, componentName) {   let parent = context.$parent;   let name = parent.$options.name;   while (parent && (!name || [componentName].indexOf(name) < 0)) {     parent = parent.$parent;     if (parent) name = parent.$options.name;   }   return parent; } export { findComponentUpward };</pre>findComponentUpward 接收两个参数，第一个是当前上下文，比如你要基于哪个组件来向上寻找，一般都是基于当前的组件，也就是传入 `this`；第二个参数是要找的组件的 `name` 。findComponentUpward 方法会在 while 语句里不断向上覆盖当前的 `parent` 对象，通过判断组件（即 parent）的 name 与传入的 componentName 是否一致，直到直到最近的一个组件为 止。与 dispatch 不同的是，findComponentUpward 是直接拿到组件的实例，而非通过事件通知组件。比如下面的示例，有组件 A 和组件 B，A 是 B 的父组件，在 B 中获取和调用 A 中的数据和 方法：<pre class="brush:js;toolbar:false"> <template>   <div>     组件 A     <component-b></component-b>   </div> </template> <script>   import componentB from './component-b.vue';   export default {     name: 'componentA',     components: { componentB },     data () {       return {         name: 'Aresn'       }     },     methods: {       sayHello () {         console.log('Hello, Vue.js');       }     }   } </script>  <template>   <div>     组件 B   </div> </template> <script>   import { findComponentUpward } from '../utils/assist.js';   export default {     name: 'componentB',     mounted () {       const comA = findComponentUpward(this, 'componentA');       if (comA) {         console.log(comA.name);  // Aresn         comA.sayHello();  // Hello, Vue.js       }     }   } </script></pre>使用起来很简单，只要在需要的地方调用 findComponentUpward 方法就行，第一个参数一般都是传入 this，即当前组件的上下文（实例）。上例的 comA，保险起见，加了一层 `if (comA)` 来判断是否找到了组件 A，如果没有指定的组件而调用的话，是会报错的。findComponentUpward 只会找到最近的一个组件实例，如果要找到全部符合要求的组件，就需要用到下面的这个方法。向上找到所有的指定组件——findComponentsUpward代码如下：<pre class="brush:js;toolbar:false">// assist.js // 由一个组件，向上找到所有的指定组件 function findComponentsUpward (context, componentName) {   let parents = [];   const parent = context.$parent;   if (parent) {     if (parent.$options.name === componentName) parents.push(parent);     return parents.concat(findComponentsUpward(parent, componentName));   } else {     return [];   } } export { findComponentsUpward };</pre>与 findComponentUpward 不同的是，findComponentsUpward 返回的是一个数组，包含了所有找到的组件实例（注意函数名称中多了一个“s”）。findComponentsUpward 的使用场景较少，一般只用在递归组件里面（后面小节会介绍），因为这个函数是一直向上寻找父级（parent）的，只有递归组件的父级才是自身。事实上，iView 在使用这个方法也都是用在递归组件的场景，比如菜单组件 Menu。由于递归组件在 Vue.js 组件里面并不常用，那自然 findComponentsUpward 也不常用了。向下找到最近的指定组件——findComponentDownward代码如下：<pre class="brush:js;toolbar:false">// assist.js // 由一个组件，向下找到最近的指定组件 function findComponentDownward (context, componentName) {   const childrens = context.$children;   let children = null;   if (childrens.length) {     for (const child of childrens) {       const name = child.$options.name;       if (name === componentName) {         children = child;         break;       } else {         children = findComponentDownward(child, componentName);         if (children) break;       }     }   }   return children; } export { findComponentDownward };</pre>`context.$children` 得到的是当前组件的全部子组件，所以需要遍历一遍，找到有没有匹配到的组件 `name`，如果没找到，继续递归找每个 $children 的 $children，直到找到最近的一个为止。来看个示例，仍然是 A、B 两个组件，A 是 B 的父组件，在 A 中找到 B：<pre class="brush:js;toolbar:false"> <template>   <div>     组件 B   </div> </template> <script>   export default {     name: 'componentB',     data () {       return {         name: 'Aresn'       }     },     methods: {       sayHello () {         console.log('Hello, Vue.js');       }     }   } </script>  <template>   <div>     组件 A     <component-b></component-b>   </div> </template> <script>   import componentB from './component-b.vue';   import { findComponentDownward } from '../utils/assist.js';   export default {     name: 'componentA',     components: { componentB },     mounted () {       const comB = findComponentDownward(this, 'componentB');       if (comB) {         console.log(comB.name);  // Aresn         comB.sayHello();  // Hello, Vue.js       }     }   } </script></pre>示例中的 A 和 B 是父子关系，因此也可以直接用 `ref` 来访问，但如果不是父子关系，中间间隔多代，用它就很方便了。向下找到所有指定的组件——findComponentsDownward如果要向下找到所有的指定组件，要用到 findComponentsDownward 函数，代码如下：<pre class="brush:js;toolbar:false">// assist.js // 由一个组件，向下找到所有指定的组件 function findComponentsDownward (context, componentName) {   return context.$children.reduce((components, child) => {     if (child.$options.name === componentName) components.push(child);     const foundChilds = findComponentsDownward(child, componentName);     return components.concat(foundChilds);   }, []); } export { findComponentsDownward };</pre>这个函数实现的方式有很多，这里巧妙使用 `reduce` 做累加器，并用递归将找到的组件合并为一个数组并返回，代码量较少，但理解起来稍困难。用法与 findComponentDownward 大同小异，就不再写用例了。找到指定组件的兄弟组件——findBrothersComponents代码如下：<pre class="brush:js;toolbar:false">// assist.js // 由一个组件，找到指定组件的兄弟组件 function findBrothersComponents (context, componentName, exceptMe = true) {   let res = context.$parent.$children.filter(item => {     return item.$options.name === componentName;   });   let index = res.findIndex(item => item._uid === context._uid);   if (exceptMe) res.splice(index, 1);   return res; } export { findBrothersComponents };</pre>相比其它 4 个函数，findBrothersComponents 多了一个参数 `exceptMe`，是否把本身除外，默认是 true。寻找兄弟组件的方法，是先获取 `context.$parent.$children`，也就是父组件的全部子组件，这里面当前包含了本身，所有也会有第三个参数 exceptMe。Vue.js 在渲染组件时，都会给每个组件加一个内置的属性 `_uid`，这个 \_uid 是不会重复的，借此我们可以从一系列兄弟组件中把自己排除掉。举个例子，组件 A 是组件 B 的父级，在 B 中找到所有在 A 中的兄弟组件（也就是所有在 A 中的 B 组件）：<pre class="brush:js;toolbar:false"> <template>   <div>     组件 A     <component-b></component-b>   </div> </template> <script>   import componentB from './component-b.vue';   export default {     name: 'componentA',     components: { componentB }   } </script>  <template>   <div>     组件 B   </div> </template> <script>   import { findBrothersComponents } from '../utils/assist.js';   export default {     name: 'componentB',     mounted () {       const comsB = findBrothersComponents(this, 'componentB');       console.log(comsB);  // ① []，空数组     }   } </script></pre>在 ① 的位置，打印出的内容为空数组，原因是当前 A 中只有一个 B，而 findBrothersComponents 的第三个参数默认是 true，也就是将自己除外。如果在 A 中再写一个 B：<pre class="brush:js;toolbar:false"> <template>   <div>     组件 A     <component-b></component-b>     <component-b></component-b>   </div> </template></pre>这时就会打印出 `[VueComponent]`，有一个组件了，但要注意在控制台会打印两遍，因为在 A 中写了两个 B，而 `console.log` 是在 B 中定义的，所以两个都会执行到。如果你看懂了这里，那应该明白打印的两遍 `[VueComponent]`，分别是另一个 `<component-b>`（如果没有搞懂，要仔细琢磨琢磨哦）。如果将 B 中 findBrothersComponents 的第三个参数设置为 false：<pre class="brush:js;toolbar:false">// component-b.vue export default {   name: 'componentB',   mounted () {     const comsB = findBrothersComponents(this, 'componentB', false);     console.log(comsB);   } }</pre>此时就会打印出 `[VueComponent, VueComponent]`，也就是包含自身了。以上就是 5 个函数的详细介绍，get 到这 5 个，以后就再也不用担心组件通信了。 扩展阅读*   [ES6 Module 的语法](http://es6.ruanyifeng.com/#docs/module)

Vue实战篇：Form表单数据校验

前端
14089 阅读

实战：具有数据校验功能的表单组件——Form本文基于这组件间的通信方法，来实现一个具有数据校验功能的表单组件——Form。Form 组件概览表单类组件在项目中会大量使用，比如输入框（Input）、单选（Radio）、多选（Checkbox）、下拉选择器（Select）等。在使用表单类组件时，也会经常用到数据校验，如果每次都写校验程序来对每一个表单控件校验，会很低效，因此需要一个能够校验基础表单控件的组件，也就是本节要完成的 Form 组件。一般的组件库都提供了这个组件，比如 iView，它能够校验内置的 15 种控件，且支持校验自定义组件。Form 组件分为两个部分，一个是外层的 `Form` 表单域组件，一组表单控件只有一个 Form，而内部包含了多个 `FormItem` 组件，每一个表单控件都被一个 FormItem 包裹。基本的结构看起来像：<pre class="brush:js;toolbar:false"><i-form>   <i-form-item>     <i-input v-model="form.name"></i-input>   </i-form-item>   <i-form-item>     <i-input v-model="form.mail"></i-input>   </i-form-item> </i-form></pre>Form 要用到数据校验，并在对应的 FormItem 中给出校验失败的提示，校验我们会用到一个开源库[async-validator](<a href="https://github.com/yiminghe/async-validator)，" style="text-wrap: nowrap;">https://github.com/yiminghe/async-validator)，</a> 基本主流的组件库都是基于它做的校验。使用它很简单，只需按要求写好一个校验规则就好，比如：<pre class="brush:js;toolbar:false">[   { required: true, message: '邮箱不能为空', trigger: 'blur' },   { type: 'email', message: '邮箱格式不正确', trigger: 'blur' } ]</pre>这个代表要校验的数据先判断是否为空（required: true），如果为空，则提示“邮箱不能为空”，触发校验的事件为失焦（trigger: 'blur'），如果第一条满足要求，再进行第二条的验证，判断是否为邮箱格式（type: 'email'）等等，还支持自定义校验规则。更详细的用法可以参看它的文档。接口设计 我们先使用最新的 Vue CLI 3 创建一个空白的项目（如果你还不清楚 Vue CLI 3 的用法，需要先补习一下了，可以阅读文末的扩展阅读 1），并使用 `vue-router` 插件，同时安装好  `async-validator` 库。在 `src/components` 下新建一个 `form` 文件夹，并初始化两个组件 `form.vue` 和 `form-item.vue`，然后初始化项目，配置路由，创建一个页面能够被访问到。编写一个 Vue.js 组件，最重要的是设计好它的接口，一个 Vue.js 组件的接口来自三个部分：props、slots、events。而 Form 和 FormItem 两个组件主要做数据校验，用不到 events。Form 的 slot 就是一系列的 FormItem，FormItem 的 slot 就是具体的表单控件，比如输入框 `<i-input>` 。那主要设计的就是 props 了。在 `Form` 组件中，定义两个 props：*   model：表单控件绑定的数据对象，在校验或重置时会访问该数据对象下对应的表单数据，类型为 Object。*   rules：表单验证规则，即上面介绍的 async-validator 所使用的校验规则，类型为 Object。在 `FormItem` 组件中，也定义两个 props：*   label：单个表单组件的标签文本，类似原生的 `<label>` 元素，类型为 String。*   prop：对应表单域 Form 组件 model 里的字段，用于在校验或重置时访问表单组件绑定的数据，类型为 String。定义好 props，就可以写出大概的用例了： <pre class="brush:js;toolbar:false"><template>   <div>     <i-form :model="formValidate" :rules="ruleValidate">       <i-form-item label="用户名" prop="name">         <i-input v-model="formValidate.name"></i-input>       </i-form-item>       <i-form-item label="邮箱" prop="mail">         <i-input v-model="formValidate.mail"></i-input>       </i-form-item>     </i-form>   </div> </template> <script>   import iForm from '../components/form/form.vue';   import iFormItem from '../components/form/form-item.vue';   import iInput from '../components/input/input.vue';   export default {     components: { iForm, iFormItem, iInput },     data () {       return {         formValidate: {           name: '',           mail: ''         },         ruleValidate: {           name: [             { required: true, message: '用户名不能为空', trigger: 'blur' }           ],           mail: [             { required: true, message: '邮箱不能为空', trigger: 'blur' },             { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }           ],         }       }     }   } </script></pre>有两点需要注意的是：1.  这里的 `<i-input>` 并不是原生的 `<input>` 输入框，而是一个特制的输入框组件，之后会介讲解的功能和代码；2.  `<i-form-item>` 的属性 `prop` 是字符串，所以它前面没有冒号（即不是 `:prop="name"`）。当前的两个组件只是个框框，还没有实现任何功能，不过万事开头难，定义好接口，剩下的就是补全组件的逻辑，而对于使用者，知道了 props、events、slots，就已经能写出上例的使用代码了到此，Form 和 FormItem 的代码如下：<pre class="brush:js;toolbar:false"> <template>   <form>     <slot></slot>   </form> </template> <script>   export default {     name: 'iForm',     props: {       model: {         type: Object       },       rules: {         type: Object       }     }   } </script></pre><pre class="brush:js;toolbar:false"> <template>   <div>     <label v-if="label">{{ label }}</label>     <div>       <slot></slot>     </div>   </div> </template> <script>   export default {     name: 'iFormItem',     props: {       label: {         type: String,         default: ''       },       prop: {         type: String       }     }   } </script></pre>在 Form 中缓存 FormItem 实例`Form` 组件的核心功能是数据校验，一个 Form 中包含了多个 FormItem，当点击提交按钮时，要逐一对每个 FormItem 内的表单组件校验，而校验是由使用者发起，并通过 `Form` 来调用每 一个 `FormItem` 的验证方法，再将校验结果汇总后，通过 `Form` 返回出去。因为要在 Form 中逐一调用 FormItem 的验证方法，而 Form 和 FormItem 是独立的，需要预先将 FormItem 的每个实例缓存在 Form 中，这个操作就需要用到第 4 节的组件通信方法。当每个 FormItem 渲染时，将其自身（this）作为参数通过 `dispatch` 派发到 Form 组件中，然后通过一个数组缓存起来；同理当 FormItem 销毁时，将其从 Form 缓存的数组中移除。相关代码如下：<pre class="brush:js;toolbar:false">// form-item.vue，部分代码省略 import Emitter from '../../mixins/emitter.js'; export default {   name: 'iFormItem',   mixins: [ Emitter ],   // 组件渲染时，将实例缓存在 Form 中   mounted () {     // 如果没有传入 prop，则无需校验，也就无需缓存     if (this.prop) {       this.dispatch('iForm', 'on-form-item-add', this);     }   },   // 组件销毁前，将实例从 Form 的缓存中移除   beforeDestroy () {     this.dispatch('iForm', 'on-form-item-remove', this);   } }</pre>注意，Vue.js 的组件渲染顺序是由内而外的，所以 FormItem 要先于 Form 渲染，在 FormItem 的 mounted 触发时，我们向 Form 派发了事件 `on-form-item-add`，并将当前 FormItem 的实例（this）传递给了 Form，而此时，Form 的 mounted 尚未触发，因为 Form 在最外层，如果在 Form 的 mounted 里监听事件，是不可以的，所以要在其 created 内监听自定义事件，Form 的 created 要先于 FormItem 的 mounted。所以 Form 的相关代码为：<pre class="brush:js;toolbar:false">// form.vue，部分代码省略 export default {   name: 'iForm',   data () {     return {       fields: []     };   },   created () {     this.$on('on-form-item-add', (field) => {       if (field) this.fields.push(field);     });     this.$on('on-form-item-remove', (field) => {       if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);     });   } }</pre>定义的数据 `fields` 就是用来缓存所有 FormItem 实例的。触发校验 Form 支持两种事件来触发校验： *   **blur**：失去焦点时触发，常见的有输入框失去焦点时触发校验； *   **change**：实时输入时触发或选择时触发，常见的有输入框实时输入时触发校验、下拉选择器选择项目时触发校验等。以上两个事件，都是有具体的表单组件来触发的，我们先来编写一个简单的输入框组件 `i-input`。在 `components` 下新建目录 `input`，并创建文件 `input.vue`： <pre class="brush:js;toolbar:false"> <template>   <input          type="text"          :value="currentValue"          @input="handleInput"          @blur="handleBlur"          /> </template> <script>   import Emitter from '../../mixins/emitter.js';   export default {     name: 'iInput',     mixins: [ Emitter ],     props: {       value: {         type: String,         default: ''       },     },     data () {       return {         currentValue: this.value       }     },     watch: {       value (val) {         this.currentValue = val;       }     },     methods: {       handleInput (event) {         const value = event.target.value;         this.currentValue = value;         this.$emit('input', value);         this.dispatch('iFormItem', 'on-form-change', value);       },       handleBlur () {         this.dispatch('iFormItem', 'on-form-blur', this.currentValue);       }     }   } </script></pre>Input 组件中，绑定在 `<input>` 元素上的原生事件 `@input`，每当输入一个字符，都会调用句柄 `handleInput`，并通过 `dispatch` 方法向上级的 FormItem 组件派发自定义事件 `on-form-change`；同理，绑定的原生事件 `@blur` 会在 input 失焦时触发，并传递事件 `on-form-blur`。基础组件有了，接下来要做的，是在 FormItem 中监听来自 Input 组件派发的自定义事件。这里可以在 mounted 中监听，因为你的手速远赶不上组件渲染的速度，不过在 created 中监听也是没任何问题的。相关代码如下：<pre class="brush:js;toolbar:false">// form-item.vue，部分代码省略 export default {   methods: {     setRules () {       this.$on('on-form-blur', this.onFieldBlur);       this.$on('on-form-change', this.onFieldChange);     },   },   mounted () {     if (this.prop) {       this.dispatch('iForm', 'on-form-item-add', this);       this.setRules();     }   } }</pre>通过调用 `setRules` 方法，监听表单组件的两个事件，并绑定了句柄函数 `onFieldBlur` 和 `onFieldChange`，分别对应 blur 和 change 两种事件类型。当 onFieldBlur 或 onFieldChange 函数触发时，就意味着 FormItem 要对**当前的数据**进行一次校验。当前的数据，指的就是通过表单域 Form 中定义的 props：model，结合当前 FormItem 定义的 props：prop 来确定的数据，可以回顾上文写过的用例。因为 FormItem 中只定义了数据源的某个 key 名称（即属性 prop），要拿到 Form 中 model 里的数据，需要用到第 3 节的通信方法 provide / inject。所以在 Form 中，把整个实例（this）向下提供，并在 FormItem 中注入：<pre class="brush:js;toolbar:false">// form.vue，部分代码省略 export default {   provide() {     return {       form : this     };   } } // form-item.vue，部分代码省略 export default {   inject: ['form'] }</pre>准备好这些，接着就是最核心的校验功能了。blur 和 change 事件都会触发校验，它们调用同一个方法，只是参数不同。相关代码如下：<pre class="brush:js;toolbar:false">// form-item.vue，部分代码省略 import AsyncValidator from 'async-validator'; export default {   inject: ['form'],   props: {     prop: {       type: String     },   },   data () {     return {       validateState: '',  // 校验状态       validateMessage: '',  // 校验不通过时的提示信息     }   },   computed: {     // 从 Form 的 model 中动态得到当前表单组件的数据     fieldValue () {       return this.form.model[this.prop];     }   },   methods: {     // 从 Form 的 rules 属性中，获取当前 FormItem 的校验规则     getRules () {       let formRules = this.form.rules;       formRules = formRules ? formRules[this.prop] : [];       return [].concat(formRules || []);     },     // 只支持 blur 和 change，所以过滤出符合要求的 rule 规则     getFilteredRule (trigger) {       const rules = this.getRules();       return rules.filter(rule => !rule.trigger || rule.trigger.indexOf(trigger) !== -1);     },     /**      * 校验数据      * @param trigger 校验类型      * @param callback 回调函数      */     validate(trigger, callback = function () {}) {       let rules = this.getFilteredRule(trigger);       if (!rules || rules.length === 0) {         return true;       }       // 设置状态为校验中       this.validateState = 'validating';       // 以下为 async-validator 库的调用方法       let descriptor = {};       descriptor[this.prop] = rules;       const validator = new AsyncValidator(descriptor);       let model = {};       model[this.prop] = this.fieldValue;       validator.validate(model, { firstFields: true }, errors => {         this.validateState = !errors ? 'success' : 'error';         this.validateMessage = errors ? errors[0].message : '';         callback(this.validateMessage);       });     },     onFieldBlur() {       this.validate('blur');     },     onFieldChange() {       this.validate('change');     }   } }</pre>在 FormItem 的 `validate()` 方法中，最终做了两件事：1.  设置了当前的校验状态 `validateState` 和校验不通过提示信息 `validateMessage`（通过值为空）； 2.  将 validateMessage 通过回调 callback 传递给调用者，这里的调用者是 onFieldBlur 和 onFieldChange，它们只传入了第一个参数 `trigger`，callback 并未传入，因此也不会触发回调，而这个回调主要是给 Form 用的，因为 Form 中可以通过提交按钮一次性校验所有的 FormItem（后文会介绍）这里只是表单组件触发事件时，对当前 FormItem 做校验。除了校验，还可以对当前数据进行重置。重置是指将表单组件的数据还原到最初绑定的值，而不是清空，因此需要预先缓存一份初始值。同时我们将校验信息也显示在模板中，并加一些样式。相 关代码如下：<pre class="brush:js;toolbar:false"> <template>   <div>     <label v-if="label" :class="{ 'i-form-item-label-required': isRequired }">{{ label }}</label>     <div>       <slot></slot>       <div v-if="validateState === 'error'" class="i-form-item-message">{{ validateMessage }}</div>     </div>   </div> </template> <script>   export default {     props: {       label: {         type: String,         default: ''       },       prop: {         type: String       },     },     data () {       return {         isRequired: false,  // 是否为必填         validateState: '',  // 校验状态         validateMessage: '',  // 校验不通过时的提示信息       }     },     mounted () {       // 如果没有传入 prop，则无需校验，也就无需缓存       if (this.prop) {         this.dispatch('iForm', 'on-form-item-add', this);         // 设置初始值，以便在重置时恢复默认值         this.initialValue = this.fieldValue;         this.setRules();       }     },     methods: {       setRules () {         let rules = this.getRules();         if (rules.length) {           rules.every((rule) => {             // 如果当前校验规则中有必填项，则标记出来             this.isRequired = rule.required;           });         }         this.$on('on-form-blur', this.onFieldBlur);         this.$on('on-form-change', this.onFieldChange);       },       // 从 Form 的 rules 属性中，获取当前 FormItem 的校验规则       getRules () {         let formRules = this.form.rules;         formRules = formRules ? formRules[this.prop] : [];         return [].concat(formRules || []);       },       // 重置数据       resetField () {         this.validateState = '';         this.validateMessage = '';         this.form.model[this.prop] = this.initialValue;       },     }   } </script> <style>   .i-form-item-label-required:before {     content: '*';     color: red;   }   .i-form-item-message {     color: red;   } </style></pre>至此，FormItem 代码已经完成，不过它只具有单独校验的功能，也就是说，只能对自己的一个表单组件验证，不能对一个表单域里的所有组件一次性全部校验。而实现全部校验和全部重置的功能，要在 Form 中完成。上文已经介绍到，在 `Form` 组件中，预先缓存了全部的 FormItem 实例，自然也能在 Form 中调用它们。通过点击提交按钮全部校验，或点击重置按钮全部重置数据，只需要在 Form 中，逐一 调用缓存的 FormItem 实例中的 `validate` 或 `resetField` 方法。相关代码如下：<pre class="brush:js;toolbar:false">// form.vue，部分代码省略 export default {   data () {     return {       fields: []     };   },   methods: {     // 公开方法：全部重置数据     resetFields() {       this.fields.forEach(field => {         field.resetField();       });     },     // 公开方法：全部校验数据，支持 Promise     validate(callback) {       return new Promise(resolve => {         let valid = true;         let count = 0;         this.fields.forEach(field => {           field.validate('', errors => {             if (errors) {               valid = false;             }             if (++count === this.fields.length) {               // 全部完成               resolve(valid);               if (typeof callback === 'function') {                 callback(valid);               }             }           });         });       });     }   }, }</pre>虽然说 Vue.js 的 API 只来自 prop、event、slot 这三个部分，但一些场景下，需要通过 `ref` 来访问这个组件，调用它的一些内置方法，比如上面的 `validate` 和 `resetFields` 方法，就需要使用者来主动调用。resetFields 很简单，就是通过循环逐一调用 FormItem 的 resetField 方法来重置数据。validate 稍显复杂，它支持两种使用方法，一种是普通的回调，比如： <pre class="brush:js;toolbar:false"><template>   <div>     <i-form ref="form"></i-form>     <button @click="handleSubmit">提交</button>   </div> </template> <script>   export default {     methods: {       handleSubmit () {         this.$refs.form.validate((valid) => {           if (valid) {             window.alert('提交成功');           } else {             window.alert('表单校验失败');           }         })       }     }   } </script></pre>同时也支持 Promise，例如：<pre class="brush:js;toolbar:false">handleSubmit () {   const validate = this.$refs.form.validate();   validate.then((valid) => {     if (valid) {       window.alert('提交成功');     } else {       window.alert('表单校验失败');     }   }) }</pre>在 Form 组件定义的 Promise 中，只调用了 resolve(valid)，没有调用 reject()，因此不能直接使用 `.catch()` ，不过聪明的你稍作修改，肯定能够支持到！完整的用例如下： <pre class="brush:js;toolbar:false"><template>   <div>     <h3>具有数据校验功能的表单组件——Form</h3>     <i-form ref="form" :model="formValidate" :rules="ruleValidate">       <i-form-item label="用户名" prop="name">         <i-input v-model="formValidate.name"></i-input>       </i-form-item>       <i-form-item label="邮箱" prop="mail">         <i-input v-model="formValidate.mail"></i-input>       </i-form-item>     </i-form>     <button @click="handleSubmit">提交</button>     <button @click="handleReset">重置</button>   </div> </template> <script>   import iForm from '../components/form/form.vue';   import iFormItem from '../components/form/form-item.vue';   import iInput from '../components/input/input.vue';   export default {     components: { iForm, iFormItem, iInput },     data () {       return {         formValidate: {           name: '',           mail: ''         },         ruleValidate: {           name: [             { required: true, message: '用户名不能为空', trigger: 'blur' }           ],           mail: [             { required: true, message: '邮箱不能为空', trigger: 'blur' },             { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }           ],         }       }     },     methods: {       handleSubmit () {         this.$refs.form.validate((valid) => {           if (valid) {             window.alert('提交成功');           } else {             window.alert('表单校验失败');           }         })       },       handleReset () {         this.$refs.form.resetFields();       }     }   } </script></pre>项目基于 Vue CLI 3 构建，下载安装依赖后，通过 npm run serve 可访问。

Vue间组件通信之派发与广播

前端
29220 阅读

组件的通信：派发与广播——自行实现 dispatch 和 broadcast 方法上一讲的 provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。然后有两种场景它不能很好的解决：*   父组件向子组件（支持跨级）传递数据；*   子组件向父组件（支持跨级）传递数据。这种父子（含跨级）传递数据的通信方式，Vue.js 并没有提供原生的 API 来支持，而是推荐使用大型数据状态管理工具 Vuex，而我们之前已经介绍过 Vuex 的场景与在独立组件（或库）中使用 的限制。本小节则介绍一种在父子组件间通信的方法 `dispatch` 和 `broadcast`。$on 与 $emit 如果您使用过较早的 Vue.js 1.x 版本，肯定对 _$dispatch_ 和 _$broadcast_ 这两个内置的方法很熟悉，不过它们都在 Vue.js 2.x 里废弃了。在正式介绍主角前，我们先看看 `$on` 与 `$emit` 这 两个 API，因为它们是本节内容的基础。`$emit` 会在**当前组件**实例上触发自定义事件，并传递一些参数给监听器的回调，一般来说，都是在父级调用这个组件时，使用 `@on` 的方式来监听自定义事件的，比如在子组件中触发事件：<pre class="brush:js;toolbar:false">// child.vue，部分代码省略 export default {   methods: {     handleEmitEvent () {       this.$emit('test', 'Hello Vue.js');     }   } }</pre>在父组件中监听由 _child.vue_ 触发的自定义事件 **test**：<pre class="brush:js;toolbar:false"> <template>   <child-component @test="handleEvent"> </template> <script>   export default {     methods: {       handleEvent (text) {       console.log(text);  // Hello Vue.js       }     }   } </script></pre>这里看似是在父组件 _parent.vue_ 中绑定的自定义事件 **test** 的处理句柄，然而事件 test 并不是在父组件上触发的，而是在子组件 _child.vue_ 里触发的，只是通过 `v-on` 在父组件中监听。既然是子组件自己触发的，那它自己也可以监听到，这就要使用 `$on` 来监听实例上的事件，换言之，组件使用 `$emit` 在自己实例上触发事件，并用 `$on` 监听它。听起来这种神（sāo）操作有点多此一举，我们不妨先来看个示例： （也可通过在线链接 [https://run.iviewui.com/ggsomfHM](https://run.iviewui.com/ggsomfHM) 直接运行该示例） <pre class="brush:js;toolbar:false"><template>   <div>     <button @click="handleEmitEvent">触发自定义事件</button>   </div> </template> <script>   export default {     methods: {       handleEmitEvent () {         // 在当前组件上触发自定义事件 test，并传值         this.$emit('test', 'Hello Vue.js')       }     },     mounted () {       // 监听自定义事件 test       this.$on('test', (text) => {         window.alert(text);       });     }   } </script></pre>`$on` 监听了自己触发的自定义事件 test，因为有时不确定何时会触发事件，一般会在 `mounted` 或 `created` 钩子中来监听。仅上面的示例，的确是多此一举的，因为大可在 handleEmitEvent 里直接写 window.alert(text)，没必要绕一圈。之所以多此一举，是因为 handleEmitEvent 是当前组件内的 `<button>` 调用的，如果这个方法不是它自己调用，而是其它组件调用的，那这个用法就大有可为了。了解了 `$on` 和 `$emit` 的用法后，我们再来看两个“过时的” API。Vue.js 1.x 的 $dispatch 与 $broadcast虽然 Vue.js 1.x 已经成为过去时，但为了充分理解本节通信方法的使用场景，还是有必要来了解一点它的历史。在 Vue.js 1.x 中，提供了两个方法：`$dispatch` 和 `$broadcast` ，前者用于向上级派发事件，只要是它的父级（一级或多级以上），都可以在组件内通过 `$on` （或 events，2.x 已废弃）监听到，后者相反，是由上级向下级广播事件的。来看一个简单的示例：<pre class="brush:js;toolbar:false">  <template>   <button @click="handleDispatch">派发事件</button> </template> <script> export default {   methods: {     handleDispatch () {       this.$dispatch('test', 'Hello, Vue.js');     }   } } </script>  <template>   <child-component></child-component> </template> <script>   export default {     mounted () {       this.$on('test', (text) => {         console.log(text);  // Hello, Vue.js       });     }   } </script></pre>$broadcast 类似，只不过方向相反。这两种方法一旦发出事件后，任何组件都是可以接收到的，就近原则，而且会在第一次接收到后停止冒泡，除非返回 true。这两个方法虽然看起来很好用，但是在 Vue.js 2.x 中都废弃了，官方给出的解释是： 因为基于组件树结构的事件流方式有时让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。 虽然在业务开发中，它没有 Vuex 这样专门管理状态的插件清晰好用，但对独立组件（库）的开发，绝对是福音。因为独立组件一般层级并不会很复杂，并且剥离了业务，不会变的难以维护。 知道了 _$dispatch_ 和 _$broadcast_ 的前世今生，接下来我们就在 Vue.js 2.x 中自行实现这两个方法。 自行实现 dispatch 和 broadcast 方法 自行实现的 dispatch 和 broadcast 方法，不能保证跟 Vue.js 1.x 的 _$dispatch_ 和 _$broadcast_ 具有完全相同的体验，但基本功能是一样的，都是解决父子组件（含跨级）间的通信问题。 通过目前已知的信息，我们要实现的 dispatch 和 broadcast 方法，将具有以下功能： *   在子组件调用 dispatch 方法，向上级指定的组件实例（最近的）上触发自定义事件，并传递数据，且该上级组件已预先通过 `$on` 监听了这个事件； *   相反，在父组件调用 broadcast 方法，向下级指定的组件实例（最近的）上触发自定义事件，并传递数据，且该下级组件已预先通过 `$on` 监听了这个事件。实现这对方法的关键点在于，如何正确地向上或向下找到对应的组件实例，并在它上面触发方法。在设计一个新功能（features）时，可以先确定这个功能的 API 是什么，也就是说方法名、参 数、使用样例，确定好 API，再来写具体的代码。因为 Vue.js 内置的方法，才是以 `$` 开头的，比如 `$nextTick`、`$emit` 等，为了避免不必要的冲突并遵循规范，这里的 dispatch 和 broadcast 方法名前不加 `$`。并且该方法可能在很多组件 中都会使用，复用起见，我们封装在混合（mixins）里。那它的使用样例可能是这样的：<pre class="brush:js;toolbar:false">// 部分代码省略 import Emitter from '../mixins/emitter.js' export default {   mixins: [ Emitter ],   methods: {     handleDispatch () {       this.dispatch();  // ①     },     handleBroadcast () {       this.broadcast();  // ②     }   } }</pre>上例中行 ① 和行 ② 的两个方法就是在导入的混合 **emitter.js** 中定义的，这个稍后我们再讲，先来分析这两个方法应该传入什么参数。一般来说，为了跟 Vue.js 1.x 的方法一致，第一个参数应当是自定义事件名，比如 “test”，第二个参数是传递的数据，比如 “Hello, Vue.js”，但在这里，有什么问题呢？只通过这两个参数，我们没办法知道要在哪个组件上触发事件，因为自行实现的这对方法，与 Vue.js 1.x 的原生方法机理上是有区别的。上文说到，实现这对方法的关键点在于准确地**找到组件实例**。那在寻找组件实例上，我们的“惯用伎俩”就是通过遍历来匹配组件的 `name` 选项，在独立组件（库）里，每个组件的 `name` 值应当是唯一的，name 主要用于递归组件，在后面小节会单独介绍。先来看下 **emitter.js** 的代码： <pre class="brush:js;toolbar:false">function broadcast(componentName, eventName, params) {   this.$children.forEach(child => {     const name = child.$options.name;     if (name === componentName) {       child.$emit.apply(child, [eventName].concat(params));     } else {       broadcast.apply(child, [componentName, eventName].concat([params]));     }   }); } export default {   methods: {     dispatch(componentName, eventName, params) {       let parent = this.$parent || this.$root;       let name = parent.$options.name;       while (parent && (!name || name !== componentName)) {         parent = parent.$parent;         if (parent) {           name = parent.$options.name;         }       }       if (parent) {         parent.$emit.apply(parent, [eventName].concat(params));       }     },     broadcast(componentName, eventName, params) {       broadcast.call(this, componentName, eventName, params);     }   } };</pre>因为是用作 mixins 导入，所以在 methods 里定义的 dispatch 和 broadcast 方法会被混合到组件里，自然就可以用 `this.dispatch` 和 `this.broadcast` 来使用。这两个方法都接收了三个参数，第一个是组件的 `name` 值，用于向上或向下递归遍历来寻找对应的组件，第二个和第三个就是上文分析的自定义事件名称和要传递的数据。 可以看到，在 dispatch 里，通过 _while_ 语句，不断向上遍历更新当前组件（即上下文为当前调用该方法的组件）的父组件实例（变量 parent 即为父组件实例），直到匹配到定义的  `componentName` 与某个上级组件的 `name` 选项一致时，结束循环，并在找到的组件实例上，调用 `$emit` 方法来触发自定义事件 `eventName`。broadcast 方法与之类似，只不过是向下遍历寻找。来看一下具体的使用方法。有 **A.vue** 和 **B.vue** 两个组件，其中 B 是 A 的子组件，中间可能跨多级，在 A 中向 B 通信： <pre class="brush:js;toolbar:false"> <template> <button @click="handleClick">触发事件</button> </template> <script>   import Emitter from '../mixins/emitter.js';   export default {     name: 'componentA',     mixins: [ Emitter ],     methods: {       handleClick () {         this.broadcast('componentB', 'on-message', 'Hello Vue.js');       }     }   } </script> // B.vue export default {   name: 'componentB',   created () {     this.$on('on-message', this.showMessage);   },   methods: {     showMessage (text) {       window.alert(text);     }   } }</pre>同理，如果是 B 向 A 通信，在 B 中调用 dispatch 方法，在 A 中使用 $on 监听事件即可。以上就是自行实现的 dispatch 和 broadcast 方法，相比 Vue.js 1.x，有以下不同：*   需要额外传入组件的 name 作为第一个参数；*   无冒泡机制；*   第三个参数传递的数据，只能是一个（较多时可以传入一个对象），而 Vue.js 1.x 可以传入多个参数，当然，你对 emitter.js 稍作修改，也能支持传入多个参数，只是一般场景传入一个对象足以。

文章列表