搜索到
27
篇与
的结果
-
拿来就能用的网页炫酷特效代码 前言：网上收集能美化网页的代码，比如给网页加个背景，给鼠标加个特效，来来回回也收集到了一些“使用简单”，“效果爆炸” 的页面，给大家分享出来。{collapse}{collapse-item label="鼠标点击弹出爱心"}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 网页鼠标点击特效（爱心） --> <script type="text/javascript"> ! function (e, t, a) { function r() { for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[ e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e] .scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999"); requestAnimationFrame(r) } function n() { var t = "function" == typeof e.onclick && e.onclick; e.onclick = function (e) { t && t(), o(e) } } function o(e) { var a = t.createElement("div"); a.className = "heart", s.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: c() }), t.body.appendChild(a) } function i(e) { var a = t.createElement("style"); a.type = "text/css"; try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e } t.getElementsByTagName("head")[0].appendChild(a) } function c() { return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math .random()) + ")" } var s = []; e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e .mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60) }, i( ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}" ), n(), r() }(window, document); </script> </body> </html>{/collapse-item}{/collapse}{dotted startColor="#ff6c6c" endColor="#1989fa"/}{collapse}{collapse-item label="鼠标点击弹出文字"}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> (function () { var a_idx = 0; window.onclick = function (event) { var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤"); var heart = document.createElement("b"); //创建b元素 heart.onselectstart = new Function('event.returnValue=false'); //防止拖动 document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上 a_idx = (a_idx + 1) % a.length; heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式 var f = 16, // 字体大小 x = event.clientX - f / 2, // 横坐标 y = event.clientY - f, // 纵坐标 c = randomColor(), // 随机颜色 a = 1, // 透明度 s = 1.2; // 放大缩小 var timer = setInterval(function () { //添加定时器 if (a <= 0) { document.body.removeChild(heart); clearInterval(timer); } else { heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");"; y--; a -= 0.016; s += 0.002; } }, 15) } // 随机颜色 function randomColor() { return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math .random() * 255)) + ")"; } }()); </script> </body> </html>{/collapse-item}{/collapse}{dotted startColor="#ff6c6c" endColor="#1989fa"/}{collapse}{collapse-item label="鼠标小星星拖尾跟随"}<!DOCTYPE html> <html lang="en"> <head> </head> <body> <span class="js-cursor-container"></span> <script> (function fairyDustCursor() { var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"] var width = window.innerWidth; var height = window.innerHeight; var cursor = { x: width / 2, y: width / 2 }; var particles = []; function init() { bindEvents(); loop(); } // Bind events that are needed function bindEvents() { document.addEventListener('mousemove', onMouseMove); window.addEventListener('resize', onWindowResize); } function onWindowResize(e) { width = window.innerWidth; height = window.innerHeight; } function onMouseMove(e) { cursor.x = e.clientX; cursor.y = e.clientY; addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]); } function addParticle(x, y, color) { var particle = new Particle(); particle.init(x, y, color); particles.push(particle); } function updateParticles() { // Updated for (var i = 0; i < particles.length; i++) { particles[i].update(); } // Remove dead particles for (var i = particles.length - 1; i >= 0; i--) { if (particles[i].lifeSpan < 0) { particles[i].die(); particles.splice(i, 1); } } } function loop() { requestAnimationFrame(loop); updateParticles(); } /** * Particles */ function Particle() { this.character = "*"; this.lifeSpan = 120; //ms this.initialStyles = { "position": "fixed", "display": "inline-block", "top": "0px", "left": "0px", "pointerEvents": "none", "touch-action": "none", "z-index": "10000000", "fontSize": "25px", "will-change": "transform" }; // Init, and set properties this.init = function (x, y, color) { this.velocity = { x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2), y: 1 }; this.position = { x: x + 10, y: y + 10 }; this.initialStyles.color = color; this.element = document.createElement('span'); this.element.innerHTML = this.character; applyProperties(this.element, this.initialStyles); this.update(); document.querySelector('.js-cursor-container').appendChild(this.element); }; this.update = function () { this.position.x += this.velocity.x; this.position.y += this.velocity.y; this.lifeSpan--; this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px, 0) scale(" + (this.lifeSpan / 120) + ")"; } this.die = function () { this.element.parentNode.removeChild(this.element); } } /** * Utils */ // Applies css `properties` to an element. function applyProperties(target, properties) { for (var key in properties) { target.style[key] = properties[key]; } } if (!('ontouchstart' in window || navigator.msMaxTouchPoints)) init(); })(); </script> </body> </html>{/collapse-item}{/collapse}{dotted startColor="#ff6c6c" endColor="#1989fa"/}{collapse}{collapse-item label="鼠标笑脸跟随+仙女棒+泡泡+雪花+点击烟花效果（自由组合）"}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!--光标特效仙女棒--> <script src="https://blog-static.cnblogs.com/files/axqa/fairyDustCursor.js"></script> <!--光标之泡泡--> <script src="https://blog-static.cnblogs.com/files/axqa/bubbleCursor.js"></script> <!--笑脸--> <script src="https://blog-static.cnblogs.com/files/axqa/emojiCursor.js"></script> <!--雪花--> <script src="https://blog-static.cnblogs.com/files/axqa/snowflakeCursor.js"></script> <!-- 点击后出现烟花效果 --> <script src="https://blog-static.cnblogs.com/files/axqa/cursor-effects.js"></script> </body> </html>{/collapse-item}{/collapse} -
-
-
Async/Await 在前端中的应用 async/await 是 ECMAScript 2017 中新增的语法糖，旨在简化异步编程。它基于 Promise ，并通过引入 async 和 await 关键字来使异步代码看起来更像同步代码。使用 async/await使用 async/await 的前提条件是要有异步操作，比如发起 AJAX 请求或操作 DOM 。下面是一个简单的例子，展示如何使用 async/await 发起 AJAX 请求：async function getData(url) { try { const response = await fetch(url); const data = await response.json(); return data; } catch (error) { console.error(error); } } const data = getData('https://example.com/data'); data.then((result) => console.log(result));在上面的例子中，我们定义了一个名为 getData 的异步函数，并将其声明为 async 。该函数接受一个 URL 参数，使用 fetch 函数向服务器发送请求，然后等待响应。一旦响应返回，代码就会继续执行，解析 JSON 数据并将其返回。注意，在 try 代码块中使用了 await 关键字，这告诉 JavaScript 引擎等待该行代码的结果，然后继续执行接下来的代码。如果出现错误， catch 代码块会捕获并处理它们。在上述代码中，我们调用了 getData 函数，并使用 .then() 方法处理返回值。由于 getData 函数返回一个 Promise ，因此可以使用 .then() 处理它的结果。错误处理与 Promise 一样，Async/Await 也需要正确地处理错误。如果一个异步操作失败，它将返回一个拒绝（ rejected ）状态的 Promise 。为了处理异步操作的错误，我们通常会在 try/catch 块中使用 await 。下面是一个错误处理的例子：async function getData(url) { try { const response = await fetch(url); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); return data; } catch (error) { console.error(error); } }在上述代码中，我们使用 if 语句检查是否从服务器收到了正常响应。如果没有，我们抛出一个错误。这会触发 catch 代码块，允许我们处理错误。并行处理异步任务在很多情况下，我们需要同时处理多个异步任务。这时，可以使用 Promise.all() 方法来并行执行异步任务，并等待它们全部完成后再继续执行代码。下面是一个例子，展示如何同时发起多个 AJAX 请求并等待它们全部完成：async function fetchData() { const urls = ['https://example.com/data1', 'https://example.com/data2', 'https://example.com/data3']; const promises = urls.map(url => fetch(url)); const responses = await Promise.all(promises); const data = await Promise.all(responses.map(response => response.json())); return data; } const data = fetchData(); data.then((result) => console.log(result));在上述代码中，我们首先定义了一个包含多个 URL 的数组。然后，我们使用 map() 方法将每个 URL 转换为一个 fetch() 方法调用，并将这些调用存储在一个新的数组中。接着，我们使用 Promise.all() 方法等待所有 fetch() 调用都返回结果。然后，我们使用 map() 方法将每个响应解析为 JSON 数据，并将这些数据存储在一个新的数组中。最后，我们将包含所有数据的数组返回到调用方。使用 async/await 处理动画效果在 Web 开发中，通常需要在 DOM 元素上应用动画效果。使用传统的 JavaScript 回调函数和 setTimeout() 方法来实现这些效果可能会导致出现回调地狱的问题。通过使用 async/await，我们可以更轻松地在 DOM 上应用动画效果。例如，下面是一个简单的例子，展示如何使用 async/await 实现淡入动画效果：async function fadeIn(element, duration) { element.style.opacity = 0; element.style.display = 'block'; const start = performance.now(); while (performance.now() - start < duration) { const percentage = (performance.now() - start) / duration; element.style.opacity = Math.min(percentage, 1); await new Promise(resolve => requestAnimationFrame(resolve)); } element.style.opacity = 1; }在上述代码中，我们定义了一个名为 fadeIn 的异步函数，并将其声明为 async。该函数接受两个参数：一个 DOM 元素和一个表示动画持续时间的数字（以毫秒为单位）。在函数的主体中，我们首先设置元素的初始状态：将其不透明度设置为 0，并将其显示出来（通过将其 display 样式设置为 "block" ）。接着，我们使用 performance.now() 函数获取当前时间，并在每个帧之间进行循环。在循环内部，我们计算从动画开始到当前帧的时间百分比，并使用该百分比来计算元素应该具有的不透明度值。然后，我们使用 requestAnimationFrame() 函数等待下一帧，并将其封装在一个 Promise 中，以便在下一帧完成时恢复函数的执行。最后，我们将元素的不透明度设置为 1 ，以确保最终状态正确。结论Async/await 是现代 JavaScript 中非常有用的功能，它使异步编程变得更加容易和直观。除了处理 AJAX 请求外，在动画效果和其他异步操作方面也非常有用。希望本文对您有所帮助！
-
前端 Promise 最佳实践 本文将从 Web 前端入手，介绍如何使用 JavaScript 中的 Promise 对象来处理异步请求，同时提供一些使用 Promise 的最佳实践。如何使用 Promise 处理异步请求Web 前端开发经常涉及到处理异步请求的场景，例如从后端获取数据或调用浏览器 API 等。在 JavaScript 中，Promise 对象是一种用于处理异步操作的特殊对象，它可以使异步操作更加简单和可读。下面将介绍如何使用 Promise 处理异步请求，并提供一些最佳实践供您参考。Promise 简介Promise 对象是一种用于处理异步操作的特殊对象，它有三种状态：pending（进行中）：初始状态，不是成功或失败状态。fulfilled（已成功）：意味着操作成功完成。rejected（已失败）：意味着操作失败。当 Promise对象 处于 pending 状态时，可以使用 then() 方法指定成功和失败的回调函数。如果 Promise对象 已经处于 fulfilled 或 rejected 状态，将立即执行相应的回调函数。下面是一个使用 Promise 处理异步请求的示例代码：function getData(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.onload = () => { if (xhr.status === 200) { resolve(xhr.responseText); } else { reject(new Error(xhr.statusText)); } }; xhr.onerror = () => reject(new Error("Network Error")); xhr.send(); }); } getData("https://example.com/todos/1") .then((data) => console.log(data)) .catch((error) => console.error(error));Promise 的最佳实践下面是一些使用 Promise 的最佳实践：1. 将 Promise 封装在函数中将 Promise 封装在函数中可以使代码更易读和易维护。下面是一个获取用户信息的函数示例：function getUserInfo(userId) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open("GET", `/api/users/${userId}`); xhr.onload = () => { if (xhr.status === 200) { resolve(JSON.parse(xhr.responseText)); } else { reject(new Error(xhr.statusText)); } }; xhr.onerror = () => reject(new Error("Network Error")); xhr.send(); }); } getUserInfo(1) .then((userInfo) => console.log(userInfo)) .catch((error) => console.error(error));2. 使用 Promise.all() 并行执行多个请求Promise.all() 方法可以并行执行多个 Promise 对象，并在所有 Promise 对象都成功时返回结果。下面是一个并行执行多个请求的示例代码：const promise1 = getData("/api/data1"); const promise2 = getData("/api/data2"); Promise.all([promise1, promise2]) .then(([data1, data2]) => { console.log(data1); console.log(data2); }) .catch((error) => console.error(error));3. 使用 Promise.race() 竞速执行多个请求Promise.race() 方法可以 竞速执行多个Promise对象 ，并返回第一个完成的 Promise 对象的结果。下面是一个竞速执行多个请求的示例代码：const promise1 = new Promise((resolve) => setTimeout(() => resolve("result1"), 1000)); const promise2 = new Promise((resolve) => setTimeout(() => resolve("result2"), 500)); Promise.race([promise1, promise2]) .then((result) => console.log(result)) .catch((error) => console.error(error));4. 使用 async/await 简化 Promise 的使用async/await 是一种基于 Promise 的语法糖，可以更简单地编写异步代码。使用 async/await，可以将 Promise 链式调用改为顺序调用，并使用 try/catch 语句处理错误。下面是一个使用 async/await 处理异步请求的示例代码：async function getUserInfo(userId) { try { const response = await fetch(`/api/users/${userId}`); const userInfo = await response.json(); return userInfo; } catch (error) { console.error(error); } } getUserInfo(1).then((userInfo) => console.log(userInfo));总结Promise 是一种用于处理异步操作的特殊对象，它可以使异步操作更加简单和可读。最佳实践包括将 Promise 封装在函数中、使用 Promise.all() 并行执行多个请求、使用 Promise.race() 竞速执行多个请求和使用 async/await 简化 Promise 的使用。使用这些技巧可以使异步代码更加易读和易维护。希望本篇文章对您有所帮助，如果您有任何疑问或建议，请随时在评论区留言。
-
七种JS实现数组去重的方式 目录1.利用Set() + Array.from()2.利用两层循环 + 数组的splice方法3.利用数组的indexOf方法4.利用数组的includes方法5.利用数组的filter() + indexOf()6.利用Map()7.利用对象例：将下面数组去除重复元素（以多种数据类型为例）const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]1.利用 Set() + Array.from()Set对象： 是值的集合，你可以按照插入的顺序迭代它的元素。Set中的元素只会出现一次，即Set中的元素是唯一的。Array.from()方法： 对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。const result = Array.from(new Set(arr)) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]注意：以上去方式对NaN和undefined类型去重也是有效的，是因为NaN和undefined都可以被存储在Set中， NaN之间被视为相同的值（尽管在js中：NaN !== NaN）。2.利用两层循环 + 数组的splice方法通过两层循环对数组元素进行逐一比较，然后通过splice方法来删除重复的元素。此方法对NaN是无法进行去重的，因为进行比较时NaN !== NaN。function removeDuplicate(arr) { let len = arr.length for (let i = 0; i < len; i++) { for (let j = i + 1; j < len; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1) len-- // 减少循环次数提高性能 j-- // 保证j的值自加后不变 } } } return arr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]3.利用数组的indexOf方法新建一个空数组，遍历需要去重的数组，将数组元素存入新数组中，存放前判断数组中是否已经含有当前元素，没有则存入。此方法也无法对NaN去重。indexOf() 方法：返回调用它的 String 对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。function removeDuplicate(arr) { const newArr = [] arr.forEach(item => { if (newArr.indexOf(item) === -1) { newArr.push(item) } }) return newArr // 返回一个新数组 } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]4.利用数组的includes方法此方法逻辑与 indexOf 方法去重异曲同工，只是用 includes 方法来判断是否包含重复元素。includes() 方法：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true ，否则返回 false 。function removeDuplicate(arr) { const newArr = [] arr.forEach(item => { if (!newArr.includes(item)) { newArr.push(item) } }) return newArr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]注意：为什么includes能够检测到数组中包含NaN，其涉及到includes底层的实现。如下图为includes实现的部分代码，在进行判断是否包含某元素时会调用sameValueZero方法进行比较，如果为NaN，则会使用isNaN()进行转化。简单测试includes()对NaN的判断：const testArr = [1, 'a', NaN] console.log(testArr.includes(NaN)) // true5.利用数组的filter() + indexOf()filter 方法会对满足条件的元素存放到一个新数组中，结合 indexOf 方法进行判断。filter() 方法：会创建一个新数组，其包含通过所提供函数实现的测试的所有元素。function removeDuplicate(arr) { return arr.filter((item, index) => { return arr.indexOf(item) === index; }) } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined ]注意：这里的输出结果中不包含NaN，是因为indexOf()无法对NaN进行判断，即arr.indexOf(item) === index返回结果为false。测试如下：const testArr = [1, 'a', NaN] console.log(testArr.indexOf(NaN)) // -16.利用Map()Map对象是JavaScript提供的一种数据结构 ，结构为键值对形式，将数组元素作为map的键存入，前端培训然后结合 has() 和 set() 方法判断键是否重复。Map对象用于保存键值对，并且能够记住键的原始插入顺序。 任何值（对象或者原始值）都可以作为一个键或一个值。function removeDuplicate(arr) { const map = new Map() const newArr = [] arr.forEach(item => { if (!map.has(item)) { // has()用于判断map是否包为item的属性值 map.set(item, true) // 使用set()将item设置到map中，并设置其属性值为true newArr.push(item) } }) return newArr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]注意：使用Map()也可对NaN去重，原因是Map进行判断时认为NaN是与NaN相等的，剩下所有其它的值是根据 === 运算符的结果判断是否相等。7.利用对象其实现思想和Map()是差不多的，主要是利用了对象的属性名不可重复这一特性。function removeDuplicate(arr) { const newArr = [] const obj = {} arr.forEach(item => { if (!obj[item]) { newArr.push(item) obj[item] = true } }) return newArr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]到此这篇关于七种JS实现数组去重的方式的文章就介绍到这了。
-
你应该知道的if-else简洁写法 本文并不肯定或者否定哪一种写法，仅仅为大家提供一些其他的编码思路或者一些值得借鉴的点子。设计更好的软件，替换 If-Else 的 5 种方法，从入门到高级示例If-Else 通常是一个糟糕的选择，它导致设计复杂，代码可读性差，并且可能导致重构困难。但是，If-Else 已成为事实上的代码分支解决方案，这确实是有道理的。这是向所有有抱负的开发人员讲授的第一件事。不幸的是，许多开发人员从来没有前进到更合适的分支策略。有些人的口头禅是：If-Else 是一把锤子，一切都是钉子。我将向大家展示一些技巧和模式，这些技巧和模式将终结这种可怕的做法。每个示例的难度都会增加。完全不必要的 Else 块这也许是那些初级开发人员最负罪的之一。下面的示例很好地说明了当你被认为 If-Else 很棒时会发生什么：只需删除 else 块即可简化此过程，如下图：看起来更专业吧？你会发现，实际上根本不需要其他块。像在这种情况下一样，你想要在满足特定条件的情况下执行某些操作并立即返回。价值分配如果你要根据提供的某些输入为变量分配新值，请停止 If-Else 废话，一种更具可读性的方法。尽管很简单，但它却很糟糕。首先，If-Else 很容易在这里被开关取代。但是，我们可以通过完全删除 else 来进一步简化此代码。如果不使用 else，则我们将剩下干净的可读代码。请注意，我也将样式更改为快速返回而不是单返回语句。如果已经找到正确的值，继续测试一个值根本没有意义。前提条件检查通常，我发现，如果方法提供了无效的值，则继续执行是没有意义的。假设我们从以前就有了 DefineGender 方法，要求提供的输入值必须始终为 0 或 1。应用保护子句防御性编码技术，你将检查方法的输入值，然后继续执行方法。至此，我们确保仅在值落在预期范围内时才执行主逻辑。现在，IF 也已被三元代替，因为不再需要在结尾处默认返回"未知"。将 If-Else 转换为字典，完全避免 If-Else假设您需要执行一些操作，这些操作将根据某些条件进行选择，我们知道以后必须添加更多操作。也许有人倾向于使用久经考验的 If-Else。如果添加新操作，则只需简单地添加其他内容即可。很简单 但是，就维护而言，这种方法不是一个好的设计。知道我们以后需要添加新的操作后，我们可以将 If-Else 重构为字典。可读性已大大提高，并且可以更轻松地推断出该代码。注意，仅出于说明目的将字典放置在方法内部。您可能希望从其他地方提供它。扩展应用程序，完全避免使用 If-Else这是一个稍微高级的示例。通过用对象替换它们，知道何时甚至完全消除 If。通常，您会发现自己不得不扩展应用程序的某些部分。作为初级开发人员，您可能会倾向于通过添加额外的 If-Else（即 else-if）语句来做到这一点。举这个说明性的例子。在这里，我们需要将 Order 实例显示为字符串。首先，我们只有两种字符串表示形式：JSON 和纯文本。在此阶段使用 If-Else 并不是什么大问题，如果我们可以轻松替换其他，只要如前所述即可。知道我们需要扩展应用程序的这一部分，这种方法绝对是不可接受的。上面的代码不仅违反了"打开/关闭"原则，而且阅读得不好，还会引起可维护性方面的麻烦。正确的方法是遵循 SOLID 原则的方法，我们通过实施动态类型发现过程（在本例中为策略模式）来做到这一点。重构这个混乱的过程的过程如下：使用公共接口将每个分支提取到单独的策略类中。动态查找实现通用接口的所有类。根据输入决定执行哪种策略。替换上面示例的代码如下所示。是的，这是更多代码的方式。它要求您了解类型发现的工作原理。但是动态扩展应用程序是一个高级主题。我只显示将替换 If-Else 示例的确切部分。如果要查看所有涉及的对象，请查看此要点。让我们快速浏览一下代码。方法签名保持不变，因为调用者不需要了解我们的重构。首先，获取实现通用接口 IOrderOutputStrategy 的程序集中的所有类型。然后，我们建立一个字典，格式化程序的 displayName 的名称为 key，类型为 value。然后从字典中选择格式化程序类型，然后尝试实例化策略对象。最后，调用策略对象的 ConvertOrderToString。
-
网站都变成灰色了，它是怎么实现的？ 每逢大事时，全网网站和APP都会出现变灰的画面，具体怎么实现可参照以下。 先来感受一下变灰后的效果。 这种灰色的效果怎么实现的呢？如何做到图片、文字、按钮都变灰的效果呢？方案1：换一套灰色的 UI，那显然成本太大了，用脚指头想一想就知道不太可能。方案2：用魔法！！不好意思，还真被你猜中了！在网页端按下 F12，打开开发者模式，用元素选择器定位到 HTML 标签上，在「样式」的面板中往下翻，就可以看到这样一段代码。代码-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);那这段代码是什么意思呢？直接把 filter grayscale 复制到搜索引擎里看一下。当参数为 0 的时候，颜色是正常的。然后依次试一下 60% 100% 可以看到图片逐渐变成灰黑色filter 函数可以用来改变图像的显示效果，用于 CSS 的 filter 属性。除了 grayscale 函数，可选项还有以下这些：可以看到，目前的主流浏览器版本都支持 grayscale 函数，比如说 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等，除了 IE。 下面介绍几种让整个网页变黑的方法，直接贴代码第一种：修改CSS文件html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }第二种：在网页的标签内加入以下代码<style type="text/css"> html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);} </style>第三种：修改标签加入内联样式<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);">第四种：作者本人用的CSS代码body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms-filter: grayscale(100%); /*ie9*/ -o-filter: grayscale(100%); /*opera*/ filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter:gray; /*ie9- */ }
-
vue项目中使用elementUI的el-tabs组件跳转卡死问题 解决方案1：在页面上使用了el-tabs元素的页面(log.vue)，使用el-row el-col元素来包裹el-tabs元素，也可以解决页面卡死问题<tempalte> <div class="log-box"> <el-row> <el-col :span="24"> <el-tabs> <el-tab-pane>1111</el-tab-pane> <el-tab-pane>22222</el-tab-pane> </el-tabs> </el-col> </el-row> </div> </template>解决方案2：在el-tabs标签上面，加一个兄弟节点–空的块级元素<tempalte> <div class="log-box"> <div> </div> <el-tabs> <el-tab-pane>1111</el-tab-pane> <el-tab-pane>22222</el-tab-pane> </el-tabs> </div> </template>此块级元素，要占位dom内容，但不设置宽高，即不影响页面为主；解决方案3：降级elementUI版本到2.6.3，或者升级vue版本到2.6x+解决方案4：vue(2.5.2)版本过低时 elment版本过高，会出现这个问题，解决方法：终端输入 npm audit fix 命令执行即可
-
Docker部署 Mysql、redis、Rabbitmq、Vue、Java 项目 Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux 或 Windows 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。本文主要讲解如何在Linux环境下使用 Docker 部署前后端分离项目，其中涉及到使用 Docker 安装本人项目相关的一些环境 ，例如mysql、rabbitmq、redis，基于CenterOS7.0。Docker 环境安装1.安装 Docker 客户端# step 1: 安装必要的一些系统工具 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 # Step 2: 添加软件源信息 sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo # Step 3: 更新并安装 Docker-CE sudo yum makecache fast sudo yum -y install docker-ce # Step 4: 开启Docker服务 sudo service docker start2.配置镜像加速器sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-'EOF' { "registry-mirrors": ["https://sq2b0kv9.mirror.aliyuncs.com"] } EOF sudo systemctl daemon-reload sudo systemctl restart docker安装 PortainerPortainer 是一个轻量级 Web 端的 Docker 管理 UI，Portainer 够轻松地管理不同的 Docker 环境(Docker 主机或集群)。Portainer 的部署和使用十分简单。Portainer 可以部署为 Linux 容器或 Windows 本机容器，也支持其他平台。Portainer 允许您管理所有 Docker 资源(容器、映像、卷、网络等)!它与独立的 Docker 引擎和 Docker 集群模式兼容。1.安装# 拉取官方镜像 docker pull portainer/portainer # 运行镜像到容器 docker run -d -p 9000:9000\ --restart=always\ -v /var/run/docker.sock:/var/run/docker.sock\ -m 20M --oom-kill-disable --memory-swap=-1\ --name portainer\ portainer/portainer2.访问页面访问地址：http://localhost:9000，第一次打开需要设置用户名、密码，docker 模式我一般选择 Local 本机模式。通过此工具我们可以更加简便的对镜像和容器进行操作和管理。登录页 面板页 安装 mysql# docker search mysql 可通过此命令查看可用版本 # 拉取mysql镜像，默认会拉取最新版本，我这里加上版本号 docker pull mysql:8.0.0 # 查看镜像是否拉取成功 docker images # 在/home/docker/mysql目录下创建mysql挂载目录 mkdir {data,logs,conf} # 运行容器 docker run -d -p 3306:3306 -v /home/docker/mysql/my.cnf:/etc/mysql/conf.d/mysqld.cnf -v /home/docker/mysql/data:/var/lib/mysql -v /home/docker/mysql/logs:/var/log/mysql -e MYSQL_ROOT_PASSWORD=12345 --name mysql_test mysql:8.0.0说明：--name：容器名-e：配置信息，此处配置 mysql 的 root 用户登陆密码-d：后台运行容器，保证在退出终端后容器继续运行-p：端口映射，此处映射 主机 3306 端口 到 容器的 3306 端口-v：挂载目录此处需要注意不要直接挂载容器中的 mysql 配置文件目录，可能会将容器内的配置文件目录清空。个人建议将容器中的 my.cnf 文件复制出来进行选择性的修改，再挂载 mysql.cnf 文件即可。docker cp :用于容器与主机之间的数据拷贝。# 语法 docker cp [OPTIONS] CONTAINER:SRC_PATH DEST_PATH|- # 实例 docker cp 96f7f14e99ab:/etc/mysql/conf.d/mysqld.cnf /home/docker/mysql/my.cnf安装 redis因为 redis 默认配置只能够本地连接，不能进行远程访问，使用 Redis 客户端工具连接都会报错，因此需要手动挂载 redis 配置文件。# /home/docker/redis目录下新增挂载文件夹 mkdir {data,conf} # 下载最新版本的Redis镜像 docker pull redis # 新增redis配置文件 cd /home/docker/redis/conf touch redis.conf vim redis.conf添加以下内容#bind 127.0.0.1 protected-mode no appendonly yes requirepass 123456说明：bind 127.0.0.1 ，注释掉这部分，这是限制 redis 只能本地访问protected-mode：默认 yes，开启保护模式，限制为本地访问appendonly：redis 持久化（可选）requirepass：设置访问密码为 123456运行容器docker run --name myredis -p 6379:6379 -v /home/docker/redis/data:/data -v /home/docker/redis/conf/redis.conf:/etc/redis/redis.conf -d redis redis-server /etc/redis/redis.conf说明：--name：容器名称-p ：表示将服务器的 6379（冒号前的 6379）端口映射到 docker 的 6379（冒号后的 6379）端口-d ：表示以后台服务的形式运行 redis-v ：挂载宿主机目录redis redis-server /etc/redis/redis.conf：表示运行 redis 服务器程序，并且指定运行时的配置文件经过以上步骤，便可以通过 redis 客户端工具进行连接，如果连接不上，检查安全组和服务器防火墙端口是否开放安装 rabbitmq# 拉取带图形化管理界面的镜像 docker pull rabbitmq:3.7.7-management # 根据下载的镜像创建和启动容器 docker run -d --name rabbitmq3.7.7 -p 5672:5672 -p 15672:15672 -v `pwd`/data:/var/lib/rabbitmq --hostname myRabbit -e RABBITMQ_DEFAULT_VHOST=my_vhost -e RABBITMQ_DEFAULT_USER=admin -e RABBITMQ_DEFAULT_PASS=admin df80af9ca0c9说明：-d：后台运行容器；--name：指定容器名；-p：指定服务运行的端口（5672：应用访问端口；15672：控制台 Web 端口号）；-v：映射目录或文件；--hostname ：主机名（RabbitMQ 的一个重要注意事项是它根据所谓的 “节点名称” 存储数据，默认为主机名）；-e：指定环境变量；（RABBITMQ_DEFAULT_VHOST：默认虚拟机名；RABBITMQ_DEFAULT_USER：默认的用户名；RABBITMQ_DEFAULT_PASS：默认用户名的密码）Rabbitmq 访问地址：http://localhost:15672 至此，基本的运行环境都安装完毕，下面就是关键的打包步骤了。Vue 前端项目打包将 dist 下的所有文件目录拷贝到 SpringBoot 后端项目的 resources\static 目录下，static 目录需要新建。如果你的项目中用到了 shiro 或者 spring security 等安全框架，需要对静态资源放行。以上配置完成后，先在本地运行，再用 maven 进行打包。将 jar 包上传到服务器后，就要开始制作自己的镜像了，首先在与 jar 包同目录下新建 Dockerfile 文件。# 新建Dockerfile文件 touch Dockerfile # 编写Dockerfile文件 vim Dockerfile加入以下内容# Docker image for springboot file run # VERSION 0.0.1 FROM java:8 # VOLUME 指定了临时文件目录为/tmp。 # 其效果是在主机 /var/lib/docker 目录下创建了一个临时文件，并链接到容器的/tmp VOLUME /tmp # 将jar包添加到容器中并更名为app.jar ADD demo-01.jar app.jar # 运行jar包 RUN bash -c 'touch /app.jar' ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]执行 docker build -t [镜像名称] . ，至此镜像文件就制作完成了。docker images查看镜像是否存在。最后一步，创建并启动容器，docker run --name [容器名称] -d -p 80:8080 [镜像名]。
