关于javascript:用js判断两个数组中是否有相同的值

<article class=“article fmt article-content”><pre><code>const hasCommonVal = (arr1 = [], arr2 = []) => { return arr1.some((val) => { return arr2.includes(val); }); };const arr1 = [1,2,3]const arr2 = [3,4,5]const arr3 = [8,7];console.log(hasCommonVal(arr1,arr2)) // trueconsole.log(hasCommonVal(arr2,arr3)) // false</code></pre><hr/><h3>some()办法用于检测数组中的元素是否满足指定条件(函数提供)</h3><pre><code>some办法会顺次执行数组中的每个元素 1:如果有一个元素满足条件,则返回true,残余的元素不再执行 2:如果没有满足条件的元素,则返回false</code></pre><hr/><h3>留神:</h3><pre><code>* some不会对空数组进行检测,some不会扭转原数组</code></pre></article>

March 5, 2024 · 1 min · jiezi

关于javascript:JS实现禁止浏览器的一些常规

<article class=“article fmt article-content”><h2>一:屏蔽F12审查元素</h2><pre><code>//屏蔽F12document.onkeydown = function(){ if(window.event && window.event.keyCode == 123) { //将以后窗口跳转置空白页 window.location=“about:blank”; event.keyCode=0; event.returnValue=false; }}</code></pre><h2>二:屏蔽鼠标右键菜单</h2><pre><code>//屏蔽右键菜单document.oncontextmenu = function (event){ return false;}</code></pre><h2>三:屏蔽粘贴文本内容</h2><pre><code>//屏蔽粘贴document.onpaste = function (event){ return false;}</code></pre><h2>四:屏蔽复制文本内容</h2><pre><code>//屏蔽复制document.oncopy = function (event){ return false;}</code></pre><h2>五:屏蔽剪切文本内容</h2><pre><code>//屏蔽剪切document.oncut = function (event){ return false;}</code></pre><h2>六:屏蔽选中文本内容</h2><pre><code>//屏蔽选中document.onselectstart = function (event){ return false;}</code></pre></article>

March 5, 2024 · 1 min · jiezi

关于javascript:axiso封装

<article class=“article fmt article-content”><h2>简介</h2><p>axios拦截器能够让咱们在我的项目中对后端http申请和响应主动拦挡解决,缩小申请和响应的代码量,晋升开发效率同时也不便我的项目前期保护。在申请响应的interceptors(因特塞泼特斯).这个外面的话.他分为申请拦截器和响应拦截器,申请拦截器外面个别在申请头外面携带token值.响应拦截器外面对状态码的判断.比方说返回401的时候就是token没权限.跳转到登录界面。</p><p>封装axiso首先下载</p><pre><code class=“shell”>npm install axios</code></pre><p>创立文件夹request,在文件夹中创立index.ts文件名,开始对axios进行手动封装封装</p><ol><li>首先引入下载好的aixos</li><li>创立实例</li><li><p>申请拦挡,别离蕴含申请胜利 和 申请谬误两个函数</p><ul><li>执行机会为:发动申请时,申请还没有发送进来时执行 申请拦挡</li><li>申请胜利:申请头携带token</li><li>申请谬误:产生谬误申请时,能够解决 4 结尾的谬误</li><li>响应拦挡,别离包响应胜利 和 响应失败两个函数</li></ul></li><li><p>执行机会为:申请完结后,服务器有响应的时候执行</p><ul><li>响应胜利:返回状态码为2xx(200…)携带的数据</li><li>响应失败:响应失败/谬误时,能够对 5 结尾的状态码进行解决、 * 申请超时、谬误状态码的解决。</li></ul></li><li>导出封装好的axios</li></ol><p>手动封装axios代码详情</p><pre><code class=“ts”>// 引入axiosimport axios from axios// 进度条和款式import nProgress from “nprogress” // npm install nprogressimport “nprogress/nprogress.css”// 实例化axiosconst install = axios.create({ // 申请地址的前缀 公共全局的URL baseURL:"", // 申请时长 — 超出定义的时长,申请超时 timeout:5000})// 申请拦挡install.interceptors.request.use( (config)=>{ // 开始进度条 nProgress.start() // 获取token const token = localStorge.getItem(’token’) // 申请头携带token config.headers.Authorization = ‘Bearer ’ + token return config }, (error)=>{ return Promise.reject(error) })// 响应拦挡install.interceptors.response.use( (response)=>{ // 响应胜利敞开进度条 nProgress.done() // 返回响应的数据 return response }, (error)=>{ // 申请超时解决 if(error.message.includes(’timeout’)){ alert(‘申请超时’) return; } // 不同谬误状态码解决 const code = error.response.status; switch(code){ case 400: console.log(‘申请谬误’); break; case 401: console.log(‘未受权’); break; case 403: console.log(‘禁止拜访’); break; case 404: console.log(‘页面隐没’); break; case 500: console.log(‘服务器外部谬误’); break; case 502: console.log(‘网关谬误’); break; } return Promise.reject(error) })// 导出封装好的aixos</code></pre><p>以上是axios两次封装,咱们还能够将他们的申请形式也封装一下,比方在同文件夹内新建一个methods.ts文件,而后如下代码</p><pre><code class=“ts”>// 引入封装好的axiosimport install from “./index”// 定义任意类型接口interface anyType{ [key:string]:any | (string|number)}// 定义类型接口interface dataType{ url:string, // 门路 method?:string, // 申请办法 get / post… headers?:anyType, // 申请头 params?:anyType, // get申请携带参数用的 data?:anyType, // post申请携带参数用的} // 创立 get 申请办法export const get = (data:dataType)=>{ // 定义申请办法 data.method = “GET” // 返回 return install(data)} // 创立post申请办法export const = (data:dataType)=>{ // 定义post申请办法 data.method = “POST” // 返回 return install(data)}</code></pre></article> ...

March 5, 2024 · 1 min · jiezi

关于javascript:ts-封装axios

<article class=“article fmt article-content”><p>当应用TypeScript封装Axios时,你能够创立一个专门的HTTP服务模块,用于治理所有的HTTP申请。上面是一个简略的示例,展现了如何应用TypeScript封装Axios:</p><p>首先,确保你曾经装置了Axios和TypeScript。你能够应用npm或yarn来装置它们:</p><pre><code>bashnpm install axios typescript –save创立一个名为http.service.ts的文件,并增加以下代码:typescriptimport axios, { AxiosRequestConfig, AxiosResponse } from ‘axios’; </code></pre><p>// 创立Axios实例</p><pre><code>const instance = axios.create({ baseURL: ‘https://api.example.com’, // 设置根底URL timeout: 5000, // 设置申请超时工夫 }); </code></pre><p>// 定义申请拦截器</p><pre><code>instance.interceptors.request.use( (config: AxiosRequestConfig) => { // 在发送申请之前做些什么 // 例如,增加申请头、身份验证等 return config; }, (error) => { // 对申请谬误做些什么 return Promise.reject(error); } ); </code></pre><p>// 定义响应拦截器</p><pre><code>instance.interceptors.response.use( (response: AxiosResponse) => { // 对响应数据做点什么 // 例如,解决错误代码、解析JSON数据等 return response.data; }, (error) => { // 对响应谬误做点什么 return Promise.reject(error); } ); </code></pre><p>// 导出Axios实例</p><pre><code> export default instance;</code></pre><p>在下面的代码中,咱们首先创立了一个Axios实例,并设置了根底URL和申请超时工夫。而后,咱们定义了申请拦截器和响应拦截器,用于在发送申请之前和接管响应之后执行一些操作。你能够依据本人的需要自定义这些拦截器的行为。</p><p>在须要应用HTTP申请的文件中,导入刚刚创立的http.service.ts文件,并应用它来发送申请。例如,在api.ts文件中:</p><pre><code>typescriptimport http from ‘./http.service’; </code></pre><p>// 定义一个获取用户列表的函数</p><pre><code> export const getUsers = async () => { try { const response = await http.get(’/users’); return response; } catch (error) { console.error(‘Error fetching user list:’, error); throw error; } };</code></pre><p>在下面的代码中,咱们导入了http实例,并应用它来发送一个GET申请到/users门路。你能够依据本人的API接口来批改门路和申请办法。</p><p>最初,在你的应用程序中应用api.ts文件中定义的函数来发送申请。例如,在组件中:</p><pre><code>typescriptimport { getUsers } from ‘./api’; // 在组件中调用getUsers函数 async componentDidMount() { try { const users = await getUsers(); console.log(‘Users:’, users); } catch (error) { console.error(‘Error fetching user list:’, error); } }</code></pre><p>这样,你就胜利地应用TypeScript封装了Axios,并在你的应用程序中应用了封装后的HTTP服务。你能够依据须要扩大和自定义这个服务,以满足你的我的项目需要。</p></article> ...

March 5, 2024 · 1 min · jiezi

关于javascript:js-map结构和数组互相转换

1.map构造转换为数组并合并数据; // map转数组const mapData = { '2024-03-04': { detail: [ { titId: '1', name: 'aaa', age: 16 }, { titId: '2', name: 'ccc', age: 17 }, ] }, '2024-03-05': { detail: [ { titId: '1', name: 'bbb', age: 18 }, { titId: '2', name: 'ddd', age: 19 }, ] } } let arrayData = [] this.dateDetail = [ { 'titId': '1', 'titName': 'titName1' }, { 'titId': '2', 'titName': 'titName2' } ] for( let i in mapData) { mapData[i].detail.forEach(item => { item.date = i }) arrayData.push(mapData[i]) } console.log(arrayData) arrayData.forEach((item, index) => { // 数据处理 item.detail.forEach((item1, index1) => { item1[`date`+(index+1)] = item1.date item1[`name`+(index+1)] = item1.name item1[`age`+(index+1)] = item1.age delete item1.date delete item1.name delete item1.age // 合并数据 this.dateDetail.forEach((item2, index2) => { if(item2.titId === item1.titId) { let mergedObj = {...item2, ...item1} this.dateDetail.splice(index2, 1, mergedObj) } }) }) }) console.log(this.dateDetail) // 打印后果为: // [ // { titId: '1', 'titName': 'titName1', date1: '2024-03-04', date2: '2024-03-05', name1: 'aaa', name2: 'bbb', age1: 16, age2: 18 }, // { titId: '2', 'titName': 'titName2', date1: '2024-03-04', date2: '2024-03-05', name1: 'ccc', name2: 'ddd', age1: 17, age2: 19 }, // ]2.a数组转map ...

March 4, 2024 · 2 min · jiezi

关于javascript:装配制造业的MES系统中的物料齐套技术

拆卸制造业的MES零碎中的物料齐套技术--万界星空科技MES零碎 拆卸是制作企业波及产品生产加工最为广泛的一种模式,包含汽车、电子、电器、电气等行业。经钻研表明,拆卸在整个产品制作总成本中所占比例超过了50%,所占用的总生产工夫比例在40%-60%,间接影响着产品质量和老本。拆卸制作十分强调人、机、料、法、环的全面管制,而其中物料的齐套性治理更是拆卸制作重中之重。 一.物料齐套技术的定义    物料齐套技术是指在拆卸制作过程中,确保所有所需的零部件、原材料等物料都精确、残缺地到位的一种治理和技术手段。它是通过对供应链的精密治理和预测性的生产打算,实现在生产线上按时、按需地提供所需物料,从而最大水平地降低生产老本、优化生产效率、确保产品质量。二.物料齐套技术的重要性 进步生产效率    通过物料齐套技术,企业可能缩小因物料短缺或错料导致的生产线复工工夫,防止生产过程中频繁更换物料带来的效率损失,从而显著晋升生产效率。降低成本    正当使用物料齐套技术能够防止因物料节约、库存积压等问题带来的额定老本,同时通过优化洽购和生产打算,升高洽购老本和生产成本,实现老本的无效管制。确保产品质量    物料齐套技术不仅可能确保生产过程中所应用的物料合乎产品设计要求,还能够缩小因物料混同或谬误搭配而导致的产品质量问题,进步产品质量稳定性。三.物料齐套技术的关键环节供应链治理    建设稳固的供应链单干关系、建设供应商评估体系、定期进行供应链危险评估等,是确保物料齐套技术无效运作的根底。生产打算    依据市场需求和销售打算,正当制订生产打算,确保所需物料的及时供给和生产进度的顺利推动。库存治理    通过精准的库存治理,防止过多的库存积压和过少的库存短缺,放弃物料齐套的均衡状态。    物料齐套技术在当今制造业中扮演着越来越重要的角色,它不仅仅是简略的“物料供应”,更是一个波及供应链、生产打算、库存治理等多个环节的系统工程。物料齐套治理在古代制造业中占据重要位置,但也面临着诸多挑战。只有深入分析常见问题,并采取相应的改良措施,企业能力更好地晋升生产效率、降低成本,从而在强烈的市场竞争中立于不败之地。如果您的企业也属于流水线拆卸加工的生产模式,同时也打算通过MES零碎来治理整个生产流程,欢送百度万界星空科技官网征询,咱们将安顿业余帮助制订解决方案并发送相干案例材料!

March 4, 2024 · 1 min · jiezi

关于javascript:Vue3使用-Composition-API-不需要-Pinia

在 Vue.js 开发的动静环境中,在单个组件中解决简单的业务逻辑可能会导致轻便的文件和保护噩梦。尽管 Pinia 提供集中式状态治理,但仅依赖它来解决简单的业务逻辑可能会导致代码凌乱。本文探讨了应用 Composition API 的代替办法,阐明开发人员如何将数据和逻辑封装在自定义 hooks 中以实现高效的状态治理。 驾驭简单的业务逻辑在日常开发中,常常会呈现性能变得过于简单而无奈限度在单个 Vue.js 组件中的状况。合成组件是合乎逻辑的解决方案,但这带来了在组件之间共享数据和业务逻辑的挑战。尽管 Pinia 在这方面很受欢迎,但如果宽泛用于所有简单的业务逻辑,它就会变得不堪重负。 拥抱 Composition API 和自定义 Hook一个引人注目的代替计划是利用 Composition API 将数据和业务逻辑封装在自定义 hooks 中。这些钩子(以 useStore 函数为例)成为状态定义、更新和特定业务逻辑的核心。反过来,组件只须要与这些钩子公开的状态和办法进行交互,从而形象出外部的复杂性。 // 应用 Composition API 自定义 hookimport { computed, ref } from "vue";// 在 useStore 函数内部定义 count 变量const count = ref(0);const doubleCount = computed(() => { return count.value * 2;});export const useStore = () => { function increment() { count.value = count.value + 1; } function decrement() { count.value = count.value - 1; } return { count, doubleCount, increment, decrement, };};孤立的 Hook 调用的陷阱当 CountValue 和 CountBtn 等组件在其 setup 函数中独立调用 useStore 挂钩时,就会呈现挑战。本文揭示了每次调用时创立 count 变量的独立实例的陷阱,从而导致组件之间的状态更新不统一。 ...

March 3, 2024 · 2 min · jiezi

关于javascript:闭包

简介闭包的造成有大函数嵌套小函数,小函数应用大函数中的变量,大函数外跟小函数放弃援用关系 闭包的特点变量公有话(放在部分不受全局净化)缩短了变量的申明周期间接的让全局能够拜访局部变量 闭包的弊病每调用一次大函数,就会在内存中造成一个不销毁的执行空间,滥用闭包容易造成内存透露 闭包的应用场景封装防抖节流在循环中绑定事件或者循环中执行异步代码的时候函数柯里化示例: function fn(){ let a = 1 // a 是一个被 fn 创立的局部变量 function bar(){ // bar 是一个外部函数,就是一个闭包 console.log(a); // 应用大函数申明的变量 } return bar() } fn() // 1

March 3, 2024 · 1 min · jiezi

关于javascript:javascript-闭包原理-和示例

闭包(Closure)是计算机科学中的一个重要概念,尤其在函数式编程语言如 JavaScript, Python 等中。简略来说,闭包能够了解为一个能拜访和操作其内部词法环境(lexical environment)的函数。这意味着一个函数外部的函数(或称为内嵌函数)能够拜访其父级函数的变量,甚至在父级函数执行结束后,这些变量仍然能够被内嵌函数拜访。这是因为闭包能够维持一个到其内部作用域的援用。 这个个性使得闭包在编程中有许多利用,比方: 1、数据封装和公有变量:通过闭包,咱们能够创立公有变量,只能通过特定的公开办法进行拜访和批改。这是模块模式的根底。 2、实现回调函数和高阶函数:闭包经常被用来作为回调函数,因为它们能够记住本人的词法环境,包含 this 和内部变量。然而,应用闭包的同时也须要留神内存透露的问题,因为闭包能够使得函数外部的变量在函数执行结束后仍然保留在内存中,如果这些变量不再须要,但又被闭包援用,那么它们就不能被垃圾回收机制回收,从而造成内存透露。因而,在应用闭包时,咱们须要留神及时解除不必要的援用,防止内存透露。 示例: 以下是一个简略的 JavaScript 闭包示例: javascriptfunction outerFunction(outerVariable) { return function innerFunction(innerVariable) { console.log('outerVariable:', outerVariable); console.log('innerVariable:', innerVariable); } } const newFunction = outerFunction('outside'); newFunction('inside'); // logs: outerVariable: outside, innerVariable: inside在这个例子中,outerFunction 是一个内部函数,它承受一个参数 outerVariable。这个函数返回了另一个函数 innerFunction,innerFunction 能够拜访 outerFunction 的作用域,因而能够拜访 outerVariable。当 outerFunction 执行结束后,其执行上下文并不会被销毁,因为 innerFunction 依然援用了 outerVariable。这就是一个闭包。 当咱们调用 outerFunction('outside') 时,它返回了一个新的函数 newFunction,这个新函数就是 innerFunction 的一个实例,它记住了 outerVariable 的值 'outside'。而后咱们能够调用 newFunction('inside'),它会打印出 outerVariable 和 innerVariable 的值。只管 outerFunction 曾经执行结束,然而因为闭包的存在,innerFunction 依然能够拜访 outerVariable。 ...

March 2, 2024 · 1 min · jiezi

关于javascript:数组中子元素通过某个相同字段将子元素中相同的字段放入一个对象内且子元素中的子数组完成合并

案例如下let list = [ { defineCode: "001", defineName: "分级名称1", gradeType: "分级类型1", orgVos: [ { orgCode: "组织编码1", orgName: "组织名称1", }, ], }, { defineCode: "001", defineName: "分级名称1", gradeType: "分级类型1", orgVos: [ { orgCode: "组织编码2", orgName: "组织名称2", }, ], }, { defineCode: "002", defineName: "分级名称2", gradeType: "分级类型2", orgVos: [ { orgCode: "组织编码2", orgName: "组织名称2", }, ], }, ]; const mergedList = list.reduce((acc, curr) => { const existingItem = acc.find(item => item.defineName === curr.defineName); if (existingItem) { existingItem.orgVos = [...existingItem.orgVos, ...curr.orgVos]; } else { acc.push(curr); } return acc; }, []); console.log(mergedList)打印内容如下 ...

March 1, 2024 · 1 min · jiezi

关于javascript:重排和重绘

页面生成的过程:1、将html标签构造解析成一棵DOM树 2、于此同时,将css代码解析成CSSOM款式规定 3、将DOM树和款式规定,合二为一,组成一棵渲染树 4、将渲染树生成一个布局:具体点,就是依据渲染树,计算每个标签的大小、地位、标签和标签之间的关系。。。 5、依据渲染树进行喷绘:相当于给标签上色 6、让喷绘好的图显示在浏览器的画布中 渲染:在页面的生命周期中,网页生成的时候,至多会渲染一次。在用户拜访的过程中,还会一直触发重排(reflow)和重绘(repaint),不论页面产生了重绘还是重排,都会影响性能,最可怕的是重排,会使咱们付出高额的性能代价,所以咱们应尽量避免。 重排比重绘大:重绘:某些元素的外观被扭转,例如:元素的填充色彩重排:从新生成布局,重新排列元素。就如下面的概念一样,单单扭转元素的外观,必定不会引起网页从新生成布局,但当浏览器实现重排之后,将会从新绘制受到此次重排影响的局部。比方扭转元素高度,这个元素乃至周边dom都须要从新绘制。 也就是说: 重绘不肯定导致重排,但重排肯定会导致重绘。 重排(reflow):概念: 当DOM的变动影响了元素的几何信息(元素的的地位和尺寸大小),浏览器须要从新计算元素的几何属性,将其安放在界面中的正确地位,这个过程叫做重排。 重排也叫回流,简略的说就是从新生成布局,重新排列元素。 上面状况会产生重排:页面初始渲染,这是开销最大的一次重排增加/删除可见的DOM元素扭转元素地位扭转元素尺寸,比方边距、填充、边框、宽度和高度等扭转元素内容,比方文字数量,图片大小等扭转元素字体大小扭转浏览器窗口尺寸,比方resize事件产生时激活CSS伪类(例如::hover)设置 style 属性的值,因为通过设置style属性扭转结点款式的话,每一次设置都会触发一次reflow查问某些属性或调用某些计算方法:offsetWidth、offsetHeight等,除此之外,当咱们调用 getComputedStyle办法,或者IE里的 currentStyle 时,也会触发重排,原理是一样的,都为求一个“即时性”和“准确性”。 重排影响的范畴:因为浏览器渲染界面是基于散失布局模型的,所以触发重排时会对四周DOM重新排列,影响的范畴有两种: 全局范畴:从根节点html开始对整个渲染树进行从新布局。部分范畴:对渲染树的某局部或某一个渲染对象进行从新布局 全局范畴重排: <body> <div class="hello"> <h4>hello</h4> <p><strong>Name:</strong>BDing</p> <h5>male</h5> <ol> <li>coding</li> <li>loving</li> </ol> </div></body>当p节点上产生reflow时,hello和body也会从新渲染,甚至h5和ol都会收到影响。 部分范畴重排: 用部分布局来解释这种景象:把一个dom的宽高之类的几何信息定死,而后在dom外部触发重排,就只会从新渲染该dom外部的元素,而不会影响到外界。 重排优化倡议:重排的代价是昂扬的,会毁坏用户体验,并且让UI展现十分缓慢。通过缩小重排的负面影响来进步用户体验的最简略形式就是尽可能的缩小重排次数,重排范畴。上面是一些卓有成效的倡议,大家能够用来参考。 缩小重排范畴:咱们应该尽量以部分布局的模式组织html构造,尽可能小的影响重排的范畴。 尽可能在低层级的DOM节点上,而不是像上述全局范畴的示例代码一样,如果你要扭转p的款式,class就不要加在div上,通过父元素去影响子元素不好。不要应用 table 布局,可能很小的一个小改变会造成整个 table 的从新布局。那么在不得已应用table的场合,能够设置table-layout:auto;或者是table-layout:fixed这样能够让table一行一行的渲染,这种做法也是为了限度reflow的影响范畴。缩小重排次数款式集中扭转不要频繁的操作款式,对于一个动态页面来说,理智且可保护的做法是更改类名而不是批改款式,对于动静扭转的款式来说,相较每次渺小批改都间接涉及元素,更好的方法是对立在 cssText 变量中编辑。尽管当初大部分古代浏览器都会有 Flush 队列进行渲染队列优化,然而有些老版本的浏览器比方IE6的效率仍然低下。 // badvar left = 10;var top = 10;el.style.left = left + "px";el.style.top = top + "px";// 当top和left的值是动静计算而成时...// better el.style.cssText += "; left: " + left + "px; top: " + top + "px;";// betterel.className += " className";拆散读写操作DOM 的多个读操作(或多个写操作),应该放在一起。不要两个读操作之间,退出一个写操作。 ...

March 1, 2024 · 1 min · jiezi

关于javascript:echarts各项配置

echarts各项配置基于版本v4.x 前言吐血整顿。Echarts的各种配置真的是目迷五色,第一次应用的时候,心田真的是解体啊,看到就胆怯。最近开始搞我的项目了,面对一堆图表,更是莫衷一是,才萌发了整顿echarts配置的想法。仅仅整顿了罕用的,后续如果有需要,会进行补充。 各项配置title(蕴含主题目和副标题)title: { target: 'blank', // 指定窗口关上主题目超链接 // 'self'以后窗口关上 // 'blank'新窗口关上[default]textStyle: { // 主题目文字款式 color: '#333', fontStyle: 'normal', // 字体格调 fontWeight: normal, // 粗细 fontFamily: 'sans-serif', // 字体 fontSize: 18, lineHeight: 56, // 行高 textBorderColor: 'transparent', // 文字自身的描边色彩 textBorderWidth: 0, // 文字自身的描边宽度 textShadowColor: 'transparent', // 文字自身的暗影色彩 textShadowBlur: 0, // 文字自身的暗影长度 textShadowOffsetX: 0, // 文字自身的暗影X偏移 textShadowOffsetY: 0, // 文字自身的暗影Y偏移},subtextStyle: { // 副标题款式 align: 'auto', // 文字水平对齐形式 left ¦ center ¦ right verticalAlign: 'auto', // 文字垂直对齐形式 top ¦ middle ¦ bottom},textAlign: 'auto', // 整体(主副标题)的程度对齐textVerticalAlign: 'auto', // 整体(主副标题)的垂直对齐triggerEvent: false, // 是否触发事件padding: 5, // 题目内边距,单位px,默认各方向内边距为5, // 承受`数组`别离设定上右下右边距,同cssitemGap: 10, // 主副标题间距zlevel: 0, // 用于Canvas分层,内存开销大,审慎应用z: 2, // 管制图形的先后顺序,优先级低于zlevelx: 'left', // 程度安放地位,默认为左对齐,可选为: // center ¦ left ¦ right ¦ 像素值y: 'top', // 垂直安放地位,默认为全图顶端,可选为: // top ¦ bottom ¦ center ¦ 像素值left: 'auto', // grid 组件容器左侧的间隔 // center ¦ left ¦ right ¦ 像素值 ¦ %top: 'auto', // grid 组件容器上侧的间隔 // top ¦ middle ¦ bottom ¦ 像素值 ¦ %right: 'auto', // grid 组件容器右侧的间隔 // 像素值 ¦ %bottom: 'auto', // grid 组件容器下侧的间隔 // 像素值 ¦ %backgroundColor: 'transparent', // 题目背景色borderColor: '#ccc', // 题目边框色彩borderWidth: 0, // 题目边框线宽borderRadius: 0, // 圆角半径 单位px // 承受`数组`别离指定4个圆角半径shadowBlur: ..., // 图形暗影的含糊大小shadowColor: ..., // 暗影色彩shadowOffsetX: 0, // 暗影程度方向上的偏移间隔shadowOffsetY: 0 // 暗影垂直方向上的偏移间隔} ...

February 29, 2024 · 5 min · jiezi

关于javascript:什么是重排如何减少重排

“重排”有两种不同的含意,一种是在化学畛域,另一种是在前端开发畛域,以下别离解释这两种含意以及缩小重排的办法。 在化学畛域,重排指的是某种化合物在试剂、温度或其余因素的影响下,产生分子中某些基团的转移或分子内碳原子骨架的扭转的过程。这是分子的碳骨架产生重排生成构造异构体的化学反应,是有机反馈中的一大类。通常波及取代基由一个原子转移到同一个分子中的另一个原子上的过程。在前端开发畛域,重排指的是浏览器在渲染页面时,因为某些元素的款式或构造发生变化,须要从新计算页面的布局和元素的地位,这个过程就是重排。重排是低廉的操作,因为它须要浏览器从新计算页面的布局,这可能会导致页面的渲染速度变慢。为了缩小重排,能够采取以下措施: 批量批改款式: 防止一一批改元素的款式,而是将须要批改的款式一次性利用到一个元素上,这样能够缩小浏览器的重排次数。 应用CSS3动画代替JavaScript动画:CSS3动画能够在不触发重排的状况下实现动画成果,而JavaScript动画通常会触发重排。 防止应用table布局:table布局在调整大小时会触发重排,因而尽量避免应用table布局。 应用transform属性:transform属性能够在不触发重排的状况下扭转元素的地位和大小,因而能够应用transform属性来实现一些动画成果。尽量减少DOM操作: DOM操作是触发重排的次要起因之一,因而尽量减少DOM操作能够缩小重排的次数。请留神,以上措施只是缩小重排的一些常见办法,具体的实现形式可能因页面构造和款式而异。在理论开发中,须要依据具体情况采取适合的措施来缩小重排,进步页面的渲染性能。

February 29, 2024 · 1 min · jiezi

关于javascript:使用DOMParser或仿写vhtml自定义指令实现html标签字符串的解析渲染

前言之前的文章,笔者讲述了渲染带有转义字符的字符串的办法传送门:https://segmentfault.com/a/1190000044471416图示,就是渲染接口返回的这样的: 咱们最终渲染成如下样子: 需要-渲染html字符串当初接口返回的,不是上述类型的了,而是带标签乃至款式的,如下:let str = '<b style=\"background-color: rgb(214, 239, 214);\">白日依山尽</b>'即咱们须要把str字符串,渲染这样的html标签字符串,到页面上最不便的形式,就是间接应用v-html帮咱们渲染v-html='str'当然咱们也能够本人仿写一个简略的v-html计划一:仿写v-html自定义指令 实现对应需要次要是应用innerHTML属性字段 仿写自定义指令如下: export default { // 在绑定元素的插入钩子中进行相应的操作 inserted: function (el, binding) { // 获取传入指令的值(即要渲染的HTML字符串) const htmlStr = binding.value; // 将HTML内容增加到元素外部 el.innerHTML = htmlStr; }, // update钩子中更新变动时,批改内容 update: function (el, binding) { // 当新值不等于旧值时,才更改内容 if (binding.oldValue !== binding.value) { el.innerHTML = binding.value; } }}示例网址:http://ashuai.work:8888/#/myhtml github地址:https://github.com/shuirongshuifu/elementSrcCodeStudy 计划二: 应用DOMParser接口api 实现对应需要什么是DOMParser,干啥的官网文档:https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParserDOMParser顾名思义,就是能够做dom解析相干的除了解析html,还能够解析xml,svg等比方,把html标签字符串解析为html文档如下案例更加通俗易懂: <script> let str = '<p><img style=\"width: 190px;\" src=\"http://ashuai.work/static/img/avantar.png\"><br></p>' let parser = new DOMParser() // 生产dom解析器实例 let doc = parser.parseFromString(str, 'text/html') // 调用对应解析办法,将字符串解析为html文档 console.log(doc); // 查看解析后的文档</script> ...

February 29, 2024 · 1 min · jiezi

关于javascript:js导出文件

总结了自己工作中罕用的三种导出文件的形式 后端返回的单个链接下载function download(url, filename) { let link = document.createElement("a") link.style.display = "none" link.href = `${url}` link.setAttribute("download", `${filename}`) document.body.appendChild(link) link.click() document.body.removeChild(link) link = null}后端返回多个链接,批量下载function batchDownload(data) { data.forEach(item => { download(item.filePath, item.fileName) })}后端返回一个流文件function downloadFileStream(name = "1", content, suffix = "doc") { //文件流文件下载 const blob = new Blob([content]) const fileName = `${name}.${suffix}` const elink = document.createElement("a") elink.download = fileName elink.style.display = "none" elink.href = URL.createObjectURL(blob) document.body.appendChild(elink) elink.click() URL.revokeObjectURL(elink.href) // 开释URL 对象 document.body.removeChild(elink)}

February 29, 2024 · 1 min · jiezi

关于javascript:封装本地存储方法

封装一个js文件 // 对象间接量 创立一个对象const Storage = { // 保留 数据 set(key, data, time = 3000) { localStorage.setItem(key, JSON.stringify({ data, //保留的数据 createTime: new Date() * 1, // 保留的工夫戳 express: time // 过期工夫 })) }, // 提取 get(key) { const item = JSON.parse(localStorage.getItem(key)); console.log(item); if (JSON.parse(localStorage.getItem(key))) { // 判断 如果 提前到了 const { // 解构赋值 获取 保留的 数据 上传的工夫戳 过期工夫 data, createTime, express } = JSON.parse(localStorage.getItem(key)); //提取 并转换为json 对象 // 以后工夫减去 创立工夫 const curTime = +new Date(); // 获取以后工夫的工夫戳 if (curTime - createTime >= express) { // 判断 以后的工夫 - 保留的工夫 大于/等于 获取工夫 localStorage.removeItem(key); // 删除保留的数据 return null; // 输入 null } return data; // 返回未过期的数据 } }}引入和应用 ...

February 28, 2024 · 1 min · jiezi

关于javascript:防抖和节流的概念和实现

防抖(Debounce)和节流(Throttle)是咱们前端日常工作中罕用的两个性能优化性能, 节流:一段时间内只执行一次防抖:一个或事件被间断的操作时,一段时间内只执行最初一次 // 这个事件当输出的内容只有有变动就会触发 -- 触发频率特地高, 相似事件:窗口滚动 / 窗口大小扭转 // 像这种触发频率特地高的事件,通常在我的项目中,通常只须要最初一次触发的后果就好 --- 这个时候 就须要应用 防抖// 防抖原理:利用定时器,每次触发事件的时候还没有到定时器期待的工夫,如果此时下次事件又被触发了,就将定时器革除掉,上一次的执行还没开始,执行下一次的定时器了 防抖(Debounce)和节流(Throttle)是两种罕用的性能优化技术,用于管制事件触发频率,以缩小不必要的资源耗费。这两种技术在前端开发中常常用于解决频繁触发的事件,比方滚动事件、输入框输出事件等。

February 28, 2024 · 1 min · jiezi

关于javascript:防抖和节流

简介在 JavaScript 中,防抖(debounce)和节流(throttle)是用来限度函数执行频率的两种常见技术。 防抖(debounce) 是指在某个时间段内,只执行最初一次触发的函数调用。如果在这个时间段内再次触发该函数,会从新计时,直到等待时间完结才会执行函数。这个技术通常用于解决频繁触发的事件,比方窗口大小调整、搜寻框输出等。防抖能够防止函数执行过屡次,以缩小网络开销和性能累赘。 节流(throttle) 是指在一段时间内限度函数的执行频率,保障肯定工夫内只执行一次函数调用。无论触发频率多高,都会在指定工夫距离内执行一次函数。这个技术通常用于解决间断触发的事件,比方滚动事件、鼠标挪动事件等。节流能够管制函数的执行频率,以缩小资源耗费和进步性能。 防抖<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wi![防抖.gif](/img/bVdbzZB)dth=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button id="btn">防抖</button></body>// 引入lodash文件<script src="/node_modules/lodash/lodash.js"></script><script> btn.onclick = _.debounce(function() { console.log('防抖在某段时间内只执行最初一次'); },1000)</script></html> 节流<!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> <button id="btn">节流</button></body>// 引入lodash文件<script src="/node_modules/lodash/lodash.js"></script><script> btn.onclick = _.throttle(function() { console.log('节流是指在一段时间内限触发的次数'); },1000)</script></html>lodash网址:https://www.lodashjs.com/

February 28, 2024 · 1 min · jiezi

关于javascript:防抖和节流

防抖(Debounce)是指在肯定工夫内,当函数被频繁触发时,只有在最初一次触发后的延迟时间内,函数才会被真正执行。如果在延迟时间内又有触发事件产生,会从新开始计时。 简洁的讲就是:n秒后执行该事件,在n秒内被反复触发,则从新计时。 代码实现: <!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> #btn { width: 100px; height: 40px; margin: 40px; background-color: aqua; cursor: pointer; border: solid 2px #000; border-radius: 5px; } </style></head><body> <div> <button type="button" id="btn">点击我</button> </div> <script type="text/javascript"> //获取 按钮 let btn = document.querySelector('#btn'); // “点击我”的办法 function palyClick() { // console.log(this); console.log('哈哈哈,我被你点击了'); } // 封装防抖函数 // func: 点击按钮要执行的函数 // delay: 延迟时间 function debounce(func, delay) { // 设置定时器标识 let timer = null; //留神这里不能应用箭头函数 否则会扭转this的指向 return function () { let _this = this; // 革除 timer 延时办法 if (timer !== null) { // 革除定时器 clearTimeout(timer); } //设置定时器 timer = setTimeout(() => { func.apply(_this); timer = null; }, delay) } } // 给按钮增加d点击事件监听 点击时,执行debounce函数,延时工夫为1000 btn.addEventListener('click', debounce(palyClick, 2000)); </script></body></html>成果视频: ...

February 28, 2024 · 1 min · jiezi

关于javascript:javascript高级程序设计学习笔记-212错误处理

关注前端小讴,浏览更多原创技术文章错误处理相干代码 → try/catch 语句ES3 新增了try/catch语句,根本语法与 Java 中的 try/catch 一样try { // 可能出错的代码 const a = 3; a = 4;} catch (error) { // 出错时执行的代码 console.log("An error happened!"); // An error happened!}try 块中有代码产生谬误,代码会立刻退出执行并跳到 catch 块中所有浏览器都反对谬误对象的message和name属性try { const a = 3; a = 4;} catch (error) { console.log(error); /* TypeError: Assignment to constant variable. at Object.<anonymous> (c:\Users\43577\Desktop\工作\my_project\my_demos\javascript高级程序设计(第四版)\第21章 错误处理与调试\21.2.错误处理.js:13:5) at Module._compile (internal/modules/cjs/loader.js:1085:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:12) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12) at internal/main/run_main_module.js:17:47 */ console.log(error.name); // TypeError(类型谬误) console.log(error.message); // Assignment to constant variable.(常量被赋值)}finally 子句try/catch 中可选的 finally 子句始终运行,二者均无奈阻止finally 块执行 ...

February 28, 2024 · 5 min · jiezi

关于javascript:Vue3中组件的通信方式

Props形式(父往子) 父组件 <script setup lang="ts"> // 引入组件 import Text from '../components/text.vue' // 定义的数据 const list = '父组件数据'</script><template> <div> <Text :list='list'></Text> </div></template> 子组件 <script lang='ts' setup> // 导入defineProps import { defineProps } from 'vue' // 通过props接管父组件接管的参数 const props = defineProps(['list']) console.log(props.list);</script><template> <div> {{props.list}} </div></template>在 <script setup> 中必须应用 defineProps API 来申明 props,它具备残缺的推断并且在 <script setup> 中是间接可用的。 emit形式(子往父) 子组件 <script lang='ts' setup>import { defineEmits } from "vue"; // 注册一个自定义事件名,向上传递时通知父组件要触发的事件 const emit = defineEmits(['em']) const btn = () =>{ // 参数1:事件名 // 参数2:传给父组件的值 emit('em','子组件') }</script><template> <div> <button @click="btn">子组件按钮</button> </div></template> 父组件 ...

February 27, 2024 · 1 min · jiezi

关于javascript:组件通信

Vue 3 中组件之间的通信形式有很多种,上面我将列举一些罕用的通信形式,包含父传子、子传父、父间接获取子以及应用 pinia 进行状态治理。 父传子(Props)父组件通过 props 将数据传递给子组件。父组件: vue <template> <ChildComponent :message="parentMessage" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from Parent' }; } }; </script>子组件: vue <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] }; </script>子传父(Events)子组件通过触发自定义事件将数据传递给父组件。子组件: vue <template> <button @click="notifyParent">Notify Parent</button> </template> <script> export default { methods: { notifyParent() { const childMessage = 'Hello from Child'; this.$emit('child-event', childMessage); } } }; </script>父组件: ...

February 27, 2024 · 2 min · jiezi

关于javascript:图扑数字孪生光储充一体化智慧充电站

近年来,蔚来、现实、特斯拉等电动汽车凭借独特的劣势已成为寰球消费者的“新宠儿”。随着新能源车保有量迅速增长,充电需要一直回升,充电桩对区域电网的冲击也日益显著。“光储充”一体化模式,即“光伏+储能+汽车充电”,被视为解决新能源汽车与充电桩倒退不均衡问题的现实计划。通过储能电站与电网协同供电,实现削峰填谷,解决光伏发电间歇性和不稳固等问题。那么,储能充电站作为电动汽车要害的充电设施,其安全性、智能化和高效性就成为保障电动汽车倒退的事不宜迟。 成果展现储能充电站的经营涵盖能量输出、贮存、输入等多重简单过程。图扑软件通过自研 HT for Web 产品搭建的轻量化智慧储能充电站数字孪生监控零碎,可能帮忙用户全面监控电动汽车充电站的运行状态,精确理解换电站储备的电池数量、运行健康状况、用户全程换电时长等,并基于数据监测提供精准决策反对。 从而升高能源损耗,大幅晋升充电站的运行效率,确保设施平安高效运行。 基于图扑 HT 搭建的储能充电站环境,对电站内储能能源出入流程、储能电池箱外部结构、电动汽车充换电等业务进行模仿动画展现。同时在三维场景两侧和光伏阵列等模型上辅以二维数据图表,对电站内海量充放电数据以及设施状态进行可视化实时的监控,用户即便足不出户仍旧能够获取到电站各项业务流程以及充放电实时状况。 系统分析储能充电站三维可视化图扑 HT 储能充电站可视化零碎采纳轻量化三维建模技术,依据现场理论的 CAD 图、鸟瞰图、设施三视图等材料进行还原外观建模,如储能电池箱、光伏阵列、风机机组、充电桩、电动汽车、换电站、树木绿化带、写字楼等。 整体三维成果采纳图扑软件自研 HT 渲染引擎进行 PBR 材质成果渲染,通过不同的场景光影渲染成果制作出白天和黑夜两种视觉格调,使整体场景更加真切写实,更富质感。 图扑软件 HT 反对联合 Web 2D、3D、GIS、PBR 材质技术,为智慧城市建设提供定制可视化服务。图扑三维可视化技术采纳 B/S 架构,具备跨平台性,任何桌面和挪动终端都能够关上。用户可通过 PC 、PAD 或是智能手机,只有关上浏览器即可随时随地拜访场景,实现近程监查和管控。 储能充电站业务流程可视化在搭建的三维场景和充电桩等模型根底上,反对针对实际业务流程制作模仿仿真动画,如电车换电流程、储能电池风/光储能流程、电车充电流程等。通过搭载感知元件获取短缺数据,动画成果与理论业务进程同步,实现数字孪生的精准出现。 电动汽车换电数字孪生 依据理论业务流程制作电动汽车换电流程动画:电动汽车进入换电站—卸下电池—挪动托盘取新电池—电池装置实现。流程动画旨在提前让用户理解电车换电过程,以进步现场换电工作效率。调度经营核心通过 HT 可视化平台近程运维,理解换电站产生的所有。一旦监测到异样要害指标,零碎会及时预警告警和定位追踪。买通由虚向实和由实向虚的双向通道,大幅晋升作业感知品质。 科普小常识:借助光伏等可再生能源的配套,储能零碎可能充分利用太阳能和风能。将环保电力贮存于电池中,以供充电站应用,使其可独立运行而不依赖于电网。升高对电网的依赖性,实现充电站的零排放,并大幅推动绿色经营。景色储能业务数字孪生 通过设施间流光线条等动画模式,展现风力发电储能和光伏发电储能的能源流向成果。将理论看不到的能量流成果通过不同色彩的流线和箭头动画进行体现示意。在削减了场景科技感的同时,也体现出各能量流之间传输业务流程。 充电桩充电数字孪生 场景内图扑 HT 制作由电车行驶—辨认进站—领取确认—电车充电整个流程动画,以动画的模式活泼展现车主去往充电站进行充电的全过程。 用户可联合图扑 HT 动静充电桩实时看板,多层次智能信息跟踪查看以后充电电量、充电电流、充电电压、充电金额、充电时长等数据信息,以及实时充电价格、有线充电、无线充电等多样化充电站信息。 储能充电桩充放电信息可视化基于图扑 HT 构建的储能充电站三维可视化场景,精准出现客户关注的充放电要害信息。有针对性制作统一格调的二维数据图表和弹窗内容,辅以场景两侧或模型上方进行展现出现。 图扑 HT 引擎 2D 面板和图表的数据绑定性能,将 2D 与 3D 在三维空间无缝交融,出现一个二维面板与三维场景相结合的智慧可视化平台。 储能发电详情 对储能充电站内光伏阵列和风机机组的发电与储蓄电量进行精准统计、简洁出现。采纳重叠进度条展现风力和光伏的累计发电量,进行每日发电量的具体统计分析。通过双色柱形图直观出现同期环比发电信息,帮忙用户全面理解电站的储能和发电情况,助力深度剖析电站经营态势。 ...

February 27, 2024 · 1 min · jiezi

关于javascript:解决echarts使用tab切换图表样式被压缩的问题

首先要理解dom对象的onrize()事件阐明:onrize()事件会在窗口或框架被调整大小时产生。就是说浏览器大小扭转,便会跟着动静扭转1.原生js的写法: `window.onrize = function(){ javascriptCode}` 2.jquery的写法: `$(window).resize(function(){ javascriptCode})` 用处:这个办法在编写自适应网页时候,十分有用,以往的办法能够用css3媒体查问进行编写,onrize办法通过js办法扭转元素尺寸,进而大袋自适应目标。 回到正题当你应用tab切换时候,发现切换之后,图表被压缩了,这是因为你切换的时候,js立马执行,还没来得及渲染改过的css款式,导致canvas有了本人默认的尺寸,没有获取到理论的尺寸,就会看到图表款式被压缩。 解决办法1.应用onrize()办法,在本人的js文件中定义好这个事件办法, `<script type='text/javascript'>window.onrize = function(){javascriptCode}</script>`而后在执行tab点击事件时,执行window.onrize()办法就能够了。2.应用settimeout提早函数,期待一会在加载js。

February 27, 2024 · 1 min · jiezi

关于javascript:别再用alert做弹窗了浏览器自带的系统级模态框太好用了

摘要在很多场景下,都须要弹窗用于交互,个别UI框架都有模态框,如果你做一个小单页,不引入UI库,你将无奈应用模态框,或者应用JavaScript自带的alert弹出揭示,或者是本人写,这都不是很便当。 dialog 是HTML5新增的语义化双标签,用于展现一个交互式的模态对话框。这是浏览器自带的模态框,十分好用。 上代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>dialog</title> <style> *{ padding: 0; margin: 0; } #modal { border: none; border-radius: 8px; margin: 0 auto; padding: 20px; position: fixed; top: -100%; left: 20%; transform: translateX(-50%); animation: slideIn 0.3s forwards; } @keyframes slideIn { from { top: -100%; } to { top: 10%; } } #modal .modal-header { width: 400px; padding: 10px 0; display: flex; border-bottom: 1px solid #eee; } #modal .modal-header .modal-title { flex: 1; font-size: 20px; } #modal .modal-content { border-bottom: 1px solid #eee; padding: 20px 0; font-size: 15px; } #modal .modal-header .modal-close { width: 50px; font-size: 23px; text-align: right; cursor: pointer; } #modal::backdrop { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; background: rgba(0, 0, 0, 0.2); } </style></head><body> <button onclick="modal.showModal()">关上</button> <dialog id="modal"> <div class="modal-body"> <div class="modal-header"> <div class="modal-title">题目</div> <div class="modal-close" onclick="modal.close()">&times;</div> </div> <div class="modal-content"> 这是内容,这是内容。 </div> </div> </dialog></body></html>这个模态框默认款式是十分丑的,好在能够自定义款式,我对这个默认款式进行了丑化,能够说是丑小鸭变天鹅,我还退出了动画。 ...

February 26, 2024 · 1 min · jiezi

关于javascript:JavaScript-作用域与提升

本文编写的 JavaScript 代码示范均应用 node v18.19.1,遵循 ES6 规范。 Scope 作用域什么是作用域呢?我的了解是:“变量的作用域就是该变量可拜访的范畴,函数对象同理”,作用域的作用是防止不同层级中的变量发生冲突。 JS 中次要分为两种作用域:全局作用域(global scope)和部分作用域(local scope)。 在 JS 中,部分作用域相似于“私人房间”,其中的变量只能在特定的区域内拜访。当咱们在部分作用域中申明变量时,它只能在该代码块、函数或条件语句中拜访。部分作用域中的变量会受到内部代码烦扰,例如: function myFunction() { var localVariable = "我在部分作用域中"; console.log(localVariable);}myFunction();console.log(localVariable);在这段代码中,localVariable在部分作用域中申明,这意味着它只能在myFunction代码块内拜访,尝试在作用域之外应用该变量会抛出ReferenceError: localVariable is not defined的报错。 而全局作用域中中申明的变量能够在代码的任何中央拜访。它能够类比为一个“公共广场”,所有人都能够看到和拜访其中的内容。在全局作用域中申明的变量通常是在任何函数或代码块之外定义的。例如: var globalVariable = "我在全局作用域中";function myFunction() { console.log(globalVariable);}myFunction();console.log(globalVariable);在这个例子中,globalVariable在全局作用域中申明,myFunction中也能够间接拜访它。因为myFunction函数中并没有对globalVariable显示地做出申明,也没有把其当作一个参数,同时满足这两个条件,咱们就能够把globalVariable叫做自在变量(free variable)。 还是在这个例子中,myFunction中应用了globalVariable,但以后作用域中并没有申明该变量,此时它就会向上一级作用域(这里是全局作用域)寻找该变量,如果在上一级没有找到,就向再上一级寻找,直到找到所需变量,或者抛出is not defined报错。这种 xxx-scope -> ... -> global scope的查问形式,会造成一条作用域链(scope chain)。 和 prototype chain 有些相似之处~Block Scope 块级作用域ES6 之前,JS 中只有全局/部分作用域,这会导致一些潜在的问题,如循环变量泄露: for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); // Outputs: 3, 3, 3 }, 100);}在下面的代码中,应用var在for循环中申明的变量i被晋升到函数作用域,其值在循环的所有迭代中共享。这常常导致意外行为,特地是在解决像setTimeout这样的异步操作时。这对开发者来说很不不便,也不利于编写欠缺的代码。 ...

February 26, 2024 · 3 min · jiezi

关于javascript:javascript中的动态集合NodeListHTMLCollection

不晓得你有没有在控制台见到过相似这样的输入咱们会发现,同样都是获取元素的代码,为啥一个是NodeList,一个是HTMLCollection。那么这俩是啥?又有啥区别,本篇文章咱们就聊聊这个。 NodeListNodeList对象是节点的汇合(类数组)。通常是由属性,如Node.childNodes 和 办法(如document.querySelectorAll) 返回的。在一些状况下,NodeList是一个实时汇合,也就是说,如果文档中的节点树发生变化,NodeList 也会随之变动。例如,Node.childNodes 是实时的: var parent = document.getElementById("parent");var child_nodes = parent.childNodes;console.log(child_nodes.length); // 咱们假如后果会是“2”parent.appendChild(document.createElement("div"));console.log(child_nodes.length); // 但此时的输入是“3”在其余状况下,NodeList 是一个动态汇合,也就意味着随后对文档对象模型的任何改变都不会影响汇合的内容。比方 document.querySelectorAll 就会返回一个动态 NodeList。 HTMLCollectionHTMLCollection对象是元素的汇合(类数组),元素程序为文档流中的程序。HTMLCollection是即时更新的,当其所蕴含的文档构造产生扭转时,它会自动更新。 备注: 因为历史起因(DOM4 之前,实现该接口的汇合只能蕴含 HTML 元素),该接口被称为 HTMLCollection。上面这些办法能够返回HTMLCollection. document.getElementsByNamedocument.getElementsByTagNamedocument.getElementsByClassNamedocument.forms、document.forms[0].elements、 document.images、 document.links总结所以,总结下 相同点: 二者都是类数组不同点 NodeList是节点(12种)的汇合、HTMLCollection是元素节点的汇合NodeList有动态的、有动静的,HTMLCollection都是动静汇合参考文档NodeListHTMLCollectionjavascript中的动静汇合——NodeList、HTMLCollection、NamedNodeMap

February 26, 2024 · 1 min · jiezi

关于javascript:社招丨华为

华为OD,投递形式:https://jinshuju.net/f/o38ijj 前端、后端、测试岗位此岗位长期有效 地点西安,深圳,北京,上海,南京,武汉 薪资20-55w 要求统招本科毕业(学校优良年限可放宽), 计算机相关业余 福利双休、六险一金全额缴纳、合同四年起签、加班费、大厂食堂、收费班车,加班有价值50元夜宵赠送 劣势有国内最全面的B2C IT零碎开发平台,笼罩了面向B2C行业的绝大部分IT零碎,蕴含了渠道、营销、批发、服务、供应链、财经、研发IPD、数字化经营等各类业务,视线广阔。可能参加零碎级设计工具开发以及计算设计实现等工作,对集体技术晋升很大,同时重视造就人选的复合型能力。

February 26, 2024 · 1 min · jiezi

关于javascript:提升生产能力的必备工具MES系统自动排产

在古代制造业中,生产能力的晋升对企业倒退至关重要。随着市场竞争的日益强烈,企业不仅须要进步产品质量,还须要进步生产效率。而MES零碎主动排产作为一种先进的生产管理工具,能够帮忙企业高效地安顿生产,实现生产能力的晋升。 什么是MES零碎主动排产 MES零碎主动排产能够依据生产工作、设施状态、工时老本等多种因素进行智能调度,从而实现生产资源的最大化利用和生产效率的最大化晋升。相比传统的手工排产形式,MES零碎主动排产更具备灵活性和高效性,可能疾速适应生产环境的变动,并依据实时数据进行调整和优化。MES零碎能够主动进行生产排产,从四个方面来看,包含智能剖析、实时监控、主动调度和生产预测。本文具体论述了这四个方面,以及MES零碎如何帮忙企业提高效率和降低成本。 1、智能剖析 MES零碎通过收集和剖析生产过程中的数据,可能对生产过程进行智能剖析。MES零碎能够剖析哪些工序须要生产,哪些须要洽购,从而帮忙企业做出更正当的决策。此外,MES零碎还能剖析生产过程中呈现的问题,并提供解决方案,帮忙企业疾速解决生产问题。 MES零碎还能依据市场需求和企业生产能力,智能剖析产品生产的需求量和产能,从而做出正当的排产打算。这样,企业能够依据市场需求进行调整,防止因为生产打算不合理而产生的节约。 2、实时监控 MES零碎可能对生产过程进行实时监控,从而帮忙企业调整生产打算。MES零碎可能收集生产过程中的实时数据,比方设施运行状态、工艺参数等,实时监控生产过程中的异样和问题,并及时告诉相干人员。这样,企业可能及时做出调整,防止生产中断和节约。 3、主动调度 基于智能剖析和实时监控,MES零碎可能主动调度生产资源。MES零碎可能主动对生产打算进行排程,依据理论状况调整计划,可能主动调节设施的开启、进行、切换等操作。MES零碎能够依据不同的生产需要,主动调度产线、工程师以及其余生产资源,达到最大水平的利用这些资源。 4、生产预测 MES零碎可能通过剖析历史数据和市场数据,进行生产预测并生成精确牢靠的生产打算。MES零碎可能预测将来的需求量,并帮忙企业疾速地做出反馈。同时,MES零碎可能预测生产资源的利用率、生产成本和生产过程的效率,疾速调整生产打算和生产过程,从而进步生产效率和降低生产老本。 MES零碎主动排产具备多种性能,包含: 1.生产打算生成:依据客户订单和生产资源状况,主动生成正当的生产打算。通过优化排程,缩小生产工夫和老本,进步生产效率。 2.物料配送管控:依据生产打算和理论物料需要,主动调度物料配送,保障生产线的连续性和稳定性。 3.设施资源管理:实时监控设施状态和应用状况,依照生产打算进行设施调度和资源分配,确保设施的高效利用。 4.生产进度跟踪:通过实时监控生产过程数据,及时反馈生产进度和问题,帮忙企业及时调整生产打算,保障生产进度和品质的达标。 MES零碎主动排产相比传统的手工排产形式,具备以下劣势: 1.进步生产效率:MES零碎主动排产能够疾速生成最优化的生产打算,缩小人为因素的烦扰,并依据实时数据进行调整和优化,进步生产效率。 2.降低生产老本:通过正当调度和优化生产资源的应用,缩小闲置和节约,降低生产老本。 3.晋升生产品质:MES零碎主动排产能够实时监控生产过程数据,及时发现和解决问题,确保生产品质的达标。 4.灵便适应变动:MES零碎主动排产能够依据生产环境的变动,疾速调整生产打算,适应订单变更和紧急情况。 万界星空科技的MES零碎主动排产平台 作为一家致力于提供先进制作解决方案的科技公司,万界星空科技科技推出了本人的MES零碎主动排产平台,帮忙企业实现生产能力的晋升。 万界星空科技MES零碎主动排产平台具备先进的算法和智能调度性能,能够依据企业的具体需要,生成最优化的生产打算,并实时监控生产过程数据,提供生产问题诊断和解决方案。 万界星空科技MES零碎主动排产平台还能够与企业现有的ERP零碎、设施控制系统等进行集成,实现全面的生产治理和管制。 MES零碎主动排产作为晋升生产能力的必备工具,能够帮忙企业实现生产打算的疾速生成和优化,进步生产效率和品质,降低生产老本。

February 26, 2024 · 1 min · jiezi

关于javascript:搞懂前端流媒体字幕

前言公众号:【可乐前端】,期待关注交换,分享一些有意思的前端常识在平时的生存中,咱们遇到的流媒体播放很多都是有字幕的,字幕的呈现能够大幅度的晋升用户的观感。那么在Web中字幕到底是如何出现的?明天就让咱们一起来一探到底。 onTimeUpdate假如咱们有一个这样的json,示意字幕数据: const jsonContent = [ { start: "00:00:01.000", end: "00:00:02.000", text: "这是第一句字幕", }, { start: "00:00:03.500", end: "00:00:04.000", text: "这是第二句字幕", }, { start: "00:00:05.000", end: "00:00:06.000", text: "这是第三句字幕", }, ];其中start示意该条字幕的开始工夫,end示意该条字幕的完结工夫,text示意字幕的内容。在Web的流媒体中,有一个事件叫做onTimeUpdate,它会在媒体播放时以固定的距离触发,咱们能够监听这个事件而后来响应一些播放的变动。 <video id="video" controls autoplay crossorigin="anonymous" src="/test.mp4" width="500"></video>const handleTimeUpdate = () => { const video = document.querySelector("#video"); video.addEventListener("timeupdate", function () { const currentTime = video.currentTime; console.log("currentTime", currentTime); });};handleTimeUpdate(); 从下面的小例子中能够看到onTimeUpdate的触发机制以及后果。依据currentTime的变动,能够找到以后工夫落在了哪一条字幕中,这样就能够实现字幕渲染的性能。 先来改一下dom构造,用一个div来展现字幕 <div class="video-container"> <video id="video" controls autoplay crossorigin="anonymous" src="/test.mp4" width="500" ></video> <div class="subtitle"></div></div>而后解析字幕数据,配合onTimeUpdate实现字幕的展现播放: const findSubtitle = (currentTime, jsonContent) => { for (let i = 0; i < jsonContent.length; i++) { const subtitle = jsonContent[i]; const startTime = parseTime(subtitle.start); const endTime = parseTime(subtitle.end); if (currentTime >= startTime && currentTime < endTime) { return subtitle; } } return null;};const parseTime = (timeStr) => { const [hours, minutes, seconds] = timeStr.split(":").map(parseFloat); return hours * 3600 + minutes * 60 + seconds;};const handleTimeUpdate = () => { const video = document.querySelector("#video"); video.addEventListener("timeupdate", function () { const currentTime = video.currentTime; const res = findSubtitle(currentTime, jsonContent); const subTitle = res.text; const subTitleDom = document.querySelector(".subtitle"); if (res) { subTitleDom.innerHTML = subTitle; } else { subTitleDom.innerHTML = ""; } });};handleTimeUpdate(); ...

February 25, 2024 · 3 min · jiezi

关于javascript:打造图像编辑器一基础架构与图像滤镜

前言公众号:【可乐前端】,期待关注交换,分享一些有意思的前端常识这是一个针对于图像编辑的系列,我会陆陆续续实现包含但不限于:图像滤镜、高级滤镜、图像卷积、图像压缩、水印、Gif操作、图像格式转换等性能。尽量所有的计算都在前端(浏览器)实现,不波及到服务器计算。 其实很多时候让服务器去操作文件会更简略一些,但咱们还是致力不依附服务器,看看能不能实现一个纯前端的图像编辑器!如果你感觉这样的内容有意思的话,点点关注点点赞吧~ 体验地址 基础架构上面咱们先来看整个编辑器的宏观架构,图像编辑器我应用的技术栈是React+Vite+Mobx+antd,这也是本人比拟习惯的技术栈,但其实外围并不在这些框架外面,比方明天实现的操作外围是在Canvas,所以这跟你用什么框架关系不大,感兴趣的话能够急躁看上来。 页面设计整个页面在没有上传图片的时候,只有一个上传框。 在上传完图片之后,会有大抵三个外围的区域: 左侧图像操作区域两头图片预览区域右侧的缩略图区域 代码设计按照下面的交互设计,咱们就能够来实现页面的组件分层,组件的关系大抵如下图: 在划分好组件的职责之后,就要开始更形象的去划分整一个编辑器的构造。首先整体的交互是: 点击上传图片开始预览左侧的操作会影响两头区域的图片预览成果右侧的图片抉择区域能够自由选择以后须要编辑和预览的图片能够下载编辑后的图片这样看来跨组件的通信会相对来说比拟多,所以整个编辑器采纳了Mobx作为状态管理工具。 这里的左侧操作区域跟右侧图像列表区域都会对Mobx的数据产生影响,比如说对以后抉择的图像利用滤镜成果;更换以后抉择的图像等等,在这些数据变更之后,预览区通过监听Mobx的数据变更,来执行相应的UI更新渲染。 那么先来关注一下Mobx里存储了什么货色: FileStore files:上传的图像列表currentFile:以后选中的图像actionMap:图像id对应的操作 type:操作类型,比方FILTER滤镜其余属性骨架搭建依据下面的设计,能够先写出如下的架子: const Home = () => { return ( <Layout> <div className={styles.container}> <Tools /> <Content /> <FileList /> </div> </Layout> );};export default Home;左侧操作区其中Tools的交互依赖了antd的Menu组件,这里我略微批改了一下菜单组件,把具体的图像操作放在了具体的下拉菜单中: 那Tools就能够分解成一个个具体的操作空间,具体的实现代码如下: import { Menu } from "antd";import styles from "./index.module.less";import Filter from "./Filter";import { observer } from "mobx-react-lite";import useStore from "../../store/RootStore";const Tools = () => { const { fileStore } = useStore(); const { currentFile } = fileStore; const items = [ { key: "0", label: "根底滤镜", children: [ { key: "0-0", label: <Filter />, }, ], }, ]; if (fileStore.files.length === 0) { return; } return ( <div className={styles.container}> <Menu key={currentFile?.uid} className={styles.toolMenu} mode="inline" items={items} ></Menu> </div> );};export default observer(Tools);items数组就是所有的操作汇合,具体每一个操作外面的内容则由具体的组件去管制。 ...

February 25, 2024 · 5 min · jiezi

关于javascript:git的使用

简介git是一个工具,用于治理代码版本的工具。 解决的问题:开发版本 性能A ===> V1.0性能A + B ===> V2.0性能C ===> V3.0性能A + C ===> V4.0代码合并。。。仓库:被git工具治理的文件夹 本地仓库:本地计算机硬盘上的文件被git治理将文件夹变成仓库git init被存储的代码分为3个状态: 工作区 暂存区 历史/版本区 查看仓库状态git status将工作区的代码放在暂存区git add .ait add 文件名称或文件夹名称将暂存区代码拿回工作区git reset .git reset 文件名称或文件夹名称将暂存区代码放在历史/版本区git commit -m "版本形容"将暂存区内容全副放在历史区

February 25, 2024 · 1 min · jiezi

关于javascript:Express入门学习记录

Express 简介Express 是一个风行的 Node.js Web 应用程序框架,它提供了一组弱小的性能和工具,用于构建 Web 应用程序和 API。它是建设在 Node.js 的 HTTP 模块之上的,通过简化常见工作和提供灵便的路由机制,使得构建 Web 应用程序变得更加疾速和简略。它是web框架,可能提供后端服务能力,并能以相似JSP模版的模式渲染web页面。 express个性express有两个外围模块——路由和中间件,路由是对申请门路的匹配与解决,中间件则是一个前置办法,比方在申请响应客户端(response to client)之前,你能够通过这个办法对返回的数据进行结构化、过滤或者其余的一些操作。 Express 的根本应用筹备工作首先,确保你的电脑上曾经装置了 Node.js。你能够在 Node.js 的官方网站(https://nodejs.org)上找到装置阐明。 创立一个新的 Express 应用程序mkdir express-democd express-demonpm init -y 这将创立一个名为 my-express-app 的新文件夹,并在其中创立一个新的 Node.js 我的项目。 装置expressnpm install express以上命令会将 Express 框架装置在当前目录的 node_modules 目录中 创立一个简略的 Express 应用程序在 my-express-app 文件夹中创立一个名为 app.js 的新文件 touch app.js并在其中编写以下代码: const express = require('express')const app = express()app.get('/', (req, res) => { res.send('hello world!')})app.listen(3000, () => { console.log('Server running at http://localhost:3000/')})监听 GET 申请 ...

February 25, 2024 · 1 min · jiezi

关于javascript:关于-JavaScript-代码的反混淆技术

在 Web 开发畛域,JavaScript 代码混同是一种常见的安全措施,旨在使代码难以浏览和了解,以此爱护代码不被轻易篡改或盗用。然而,在开发和调试过程中,咱们常常须要将这些被混同的代码还原成原始的、可读性更好的版本以便剖析和批改。本文将探讨如何实现这一过程,包含应用一些古代工具和技术来辅助这个工作。 了解代码混同:代码混同会通过多种技术扭转原始代码的构造而不扭转其性能,包含变量名替换、代码构造重组、字符串加密等。这些操作使得代码对于机器而言依然可执行,但对于人类阅读者来说难以了解。 解决方案概述:将混同后的 JavaScript 代码还原到可读性较高的版本,通常波及两个步骤:反混同和格式化。反混同旨在尽可能复原原始代码的构造和变量名,而格式化则是将代码整顿成一种易于浏览和了解的格局。 反混同工具和技术反混同通常比较复杂,因为混同过程设计无意使逆向工程变得艰难。不过,有一些工具和技术能够帮忙进行反混同: Deobfuscate.io:这是一个在线工具,能够自动识别并尝试还原被混同的 JavaScript 代码。用户只需将混同后的代码粘贴到工具中,它就会尝试还原成更可读的模式。JSNice:是另一个风行的在线服务,它不仅能够反混同代码,还能通过其智能推断零碎猜想原始变量名和函数名。这对于了解混同代码的逻辑构造十分有帮忙。应用源映射(Source Maps):源映射是一种使浏览器可能将压缩或混同后的代码映射回原始源代码的技术。如果开发者在代码压缩或混同时生成了源映射文件,那么通过浏览器的开发者工具就能查看到原始的、未混同的代码。代码格式化工具代码格式化是将代码转换成一种构造清晰、易于浏览的格局的过程。即使是通过反混同工具解决后的代码,也可能须要进一步的格式化以进步可读性。常见的 JavaScript 代码格式化工具包含: Prettier:是一个宽泛应用的代码格式化工具,反对多种编程语言,包含 JavaScript。它能够主动整顿代码格局,使代码看起来更整洁、更统一。ESLint:尽管次要是一个动态代码剖析工具,用于发现代码谬误和不统一的格调,但它也能够用来主动修复代码格局问题,从而进步代码的整体可读性。实战示例假如咱们有一段混同后的 JavaScript 代码,看起来像这样: var a='Hello',b=function(c){console.log(a+', '+c+'!');};b('World');尽管这个例子绝对简略,理论的混同代码会更加简单。咱们能够应用上述的工具和技术来还原这段代码。以 Deobfuscate.io 为例,咱们将混同的代码粘贴到工具中,工具解决后可能会给出相似以下的输入: var greeting = 'Hello';var printGreeting = function(name) { console.log(greeting + ', ' + name + '!');};printGreeting('World');接下来,咱们能够应用 Prettier 对上述代码进行格式化,使其进一步合乎咱们的代码格调规范。最终,咱们失去了既易于浏览又易于了解的代码版本。 论断将混同后的 JavaScript 代码还原成开发版本是一项挑战,但通过古代工具和技术的帮忙,这一工作变得可行。反混同和格式化是复原代码可读性的关键步骤。开发者应依据具体的需要和代码复杂性抉择适合的工具。值得注意的是,只管这些工具十分弱小,但它们不可能完满还原所有混同代码,特地是那些应用了高级混同技术的代码。因而,了解代码的根本逻辑和构造,以及混同的基本原理,对于无效地还原代码至关重要。 通过这些办法和工具,开发者能够更无效地剖析和调试混同后的代码,进步开发效率,保障利用的平安和性能。在 Web 开发的世界里,这些技能和工具是十分贵重的资源。

February 24, 2024 · 1 min · jiezi

关于javascript:JavaScript-关键字-debugger-的作用和使用场景介绍

在深刻探讨 JavaScript 中 debugger 关键字的用法和应用场景之前,咱们须要明确一点:调试是开发过程中不可或缺的一部分,它帮忙开发者了解代码的执行流程,辨认和修复存在的问题。debugger 关键字在 JavaScript 调试过程中扮演着重要的角色,通过它,开发者能够在代码的特定地位强制进行执行,而后在 JavaScript 调试器(例如浏览器的开发者工具)中检查和操作以后的程序状态。 debugger 关键字的根本用法debugger 关键字用于程序代码中,当执行到这个关键字时,如果浏览器的开发者工具是关上的,代码执行将会暂停,这就为开发者提供了查看以后程序执行环境(包含变量值、调用栈、作用域等)的机会。应用 debugger,开发者能够逐渐执行代码(步进、步出、步过),察看代码执行的每一步如何影响程序的状态。 示例代码function testDebugger(a, b) { let result = a + b; debugger; // 执行到此处时会暂停,如果开发者工具是关上的 console.log(`后果是: ${result}`);}testDebugger(5, 3);在下面的示例中,当执行到 debugger; 语句时,代码执行会暂停,这容许开发者在控制台中查看变量 result 的值,并理解程序是如何达到以后状态的。 应用场景调试简单逻辑在解决简单的逻辑或算法时,可能会呈现难以预料的谬误。在这种状况下,仅仅通过查看代码或者增加日志输入可能不足以定位问题。debugger 关键字容许开发者在特定的执行点暂停程序,通过逐渐执行和查看程序状态,更容易地了解问题所在。 性能剖析当须要剖析代码性能,特地是须要理解特定代码块执行效率时,debugger 能够作为一个终点,帮忙开发者在更具体的性能剖析工具(如浏览器的性能剖析工具)中设置断点。 学习和教学对于初学者来说,了解 JavaScript 代码的执行流程尤为重要。通过在示例代码中应用 debugger 关键字,老师能够疏导学生逐渐遍历代码,这有助于学生了解不同代码块是如何被执行的,以及变量是如何在不同阶段扭转的。 与其余调试工具的联合应用只管许多古代的开发环境和编辑器提供了丰盛的断点设置性能,debugger 关键字依然有其独特的劣势。它不依赖于特定的开发环境,能够在任何反对 JavaScript 的环境中应用。此外,debugger 关键字能够依据条件动静地增加到代码中,这在应用动态断点工具时很难做到。 最佳实际尽管 debugger 关键字是一个弱小的工具,但它的应用须要遵循肯定的最佳实际: 仅在开发过程中应用:在生产环境的代码中防止应用 debugger 关键字,因为它会导致程序在用户的环境中意外暂停。及时移除:在问题解决后,应及时移除 debugger 语句,防止影响代码的失常执行和性能。联合日志应用:在某些状况下,与其它调试技巧(如 console.log)联合应用 debugger,能够更高效地定位和解决问题。结语debugger 关键字是 JavaScript 开发者必须把握的调试工具之一。它提供了一种简略间接的形式来暂停代码执行,容许开发者深刻理解程序的外部状态。正确地应用 debugger 能够大大提高调试效率,帮忙开发者疾速定位并解决代码中的问题。然而,像所有弱小的工具一样,它须要审慎应用,并配合其它调试技术和最佳实际来施展最大的成果。

February 24, 2024 · 1 min · jiezi

关于javascript:微芒计划简洁方便的效率待办管理工具免费

微芒打算-简洁不便的效率待办管理工具【收费】 下载地址 我的待办疾速增加待办工作,疾速查看工作进度,摘要等。新增标签,分类,更好治理待办工作。 ☀️OKR指标治理OKR让形象的企业策略明确为高低对齐、打法。明确的指标和要害后果;让团队高低聚焦策略、对立认知,以更麻利高效的协同形式,确保企业策略失去无效的执行与落地。 番茄工作法番茄工作法是简单易行的工夫治理办法。应用番茄工作法,抉择一个待实现的工作,将番茄工夫设为25分钟,专一工作,中途不容许做任何与该工作无关的事,直到番茄时钟响起,而后进行短暂劳动一下(5分钟就行),而后再开始下一个番茄。 习惯治理明确本人的指标,每天打卡保持,督促本人去实现指标,这样会更加有能源,在这里能够为你记录下你养成好习惯的整个过程,到时候回头看看本人一路的致力,真的是十分有成就感的一件事。 日历视图关上日历界面,通过视图的模式查看公历或农历日历下每个日期的待办揭示或工作事项。 ✍️MEMO疾速记录为了更好地帮你捕获想法与灵感,提供了疾速记录的输入框。专一记录想法,无需思考题目和排版。管制记录长度,升高记录压力,疾速捕获。 快来开发你的有限后劲吧!下载地址

February 24, 2024 · 1 min · jiezi

关于javascript:JavaScriptPHP实现视频文件分片上传

摘要视频文件分片上传,整体思路是利用JavaScript将文件切片,而后循环调用上传接口 upload.php 将切片上传到服务器。这样将由原来的一个大文件上传变为多个小文件同时上传,节俭了上传工夫,这就是文件分片上传的其中一个益处。 上代码index.html 通过前端将文件对象切分成多个小块,而后顺次将这些小块的文件对象上传到服务器。 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频文件分片上传</title> <style> *{ padding: 0; margin: 0; } .title { text-align: center; font-size: 25px; margin-top: 50px; } .video_upload { width: 500px; height: 60px; background: #eee; margin: 30px auto 0; border: 2px dashed #ccc; border-radius: 10px; position: relative; cursor: pointer; text-align: center; font-size: 25px; line-height: 60px; color: #666; } #fileInput { width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; } #uploadButton { width: 130px; height: 40px; border: none; outline: none; border-radius: 10px; font-size: 17px; margin: 10px auto; } #ret { text-align: center; font-size: 16px; margin-top: 20px; } #ret video { width: 450px; } </style> </head> <body> <p class="title">javaScript+PHP实现视频文件分片上传</p> <div class="video_upload"> <span class="text"> + </span> <input type="file" id="fileInput" accept="video/*"> </div> <button id="uploadButton" style="display:none;">开始上传</button> <p id="ret"></p> <script> // 定义全局变量 let videoFile = null; let chunkSize = 1024 * 1024; // 1MB 分片大小 // 当文件抉择框的值扭转时触发该函数 function handleFileSelect(event) { const fileList = event.target.files; if (fileList.length > 0) { videoFile = fileList[0]; console.log("抉择了文件: ", videoFile.name); document.querySelector('.video_upload .text').textContent = videoFile.name; document.querySelector('#uploadButton').style.display = 'block'; } } // 分片并上传文件 async function uploadFile() { if (!videoFile) { console.error("请抉择一个视频文件"); return; } const fileSize = videoFile.size; let start = 0; let end = Math.min(chunkSize, fileSize); let chunkIndex = 0; // 获取文件名 const fileName = videoFile.name; while (start < fileSize) { const chunk = videoFile.slice(start, end); // 从文件中截取一个分片 // 应用FormData来构建multipart/form-data格局的申请体 const formData = new FormData(); formData.append('file', chunk); formData.append('chunkIndex', chunkIndex); formData.append('fileName', fileName); // 将文件名作为 formData 的一部分 try { const response = await fetch('upload.php', { method: 'POST', body: formData }); if (!response.ok) { throw new Error('上传失败'); } console.log('上传分片 ', chunkIndex, ' 胜利'); } catch (error) { console.error('上传分片 ', chunkIndex, ' 失败: ', error.message); return; } start = end; end = Math.min(start + chunkSize, fileSize); chunkIndex++; } console.log('文件上传实现'); // 上传实现后发送告诉给服务器进行合并 notifyServerForMerge(fileName); } // 发送告诉给服务器进行合并 async function notifyServerForMerge(fileName) { try { const response = await fetch('merge_chunks.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ fileName: fileName }) }); if (!response.ok) { throw new Error('无奈告诉服务器进行合并'); } const res_data = await response.json(); console.log('已告诉服务器进行合并'); document.querySelector('.video_upload .text').textContent = '分片合并实现!'; document.querySelector('#ret').innerHTML = '<video autoplay controls src="'+res_data.filePath+'"></video>'; document.querySelector('#uploadButton').style.display = 'none'; } catch (error) { console.error('告诉服务器进行合并时产生谬误: ', error.message); } } // 注册文件抉择框的change事件 document.getElementById('fileInput').addEventListener('change', handleFileSelect); // 注册上传按钮的click事件 document.getElementById('uploadButton').addEventListener('click', uploadFile); </script> </body></html>upload.php ...

February 23, 2024 · 3 min · jiezi

关于javascript:数组及其方法详细

javascript 数组及其办法具体简介在 JavaScript 中,除了 Object 之外,数组(Array)应该是最罕用的类型了。数组是一组有序的数据,应用方括号示意[1, 2, 3],可通过索引来拜访每个元素(索引从 0 开始)。 JavaScript 中的数组的长度和元素类型都是非固定的。 数组的创立数组的几种创立办法:字面量形式,Array构造函数,扩大运算符(...),ES6新增的用于创立数组的静态方法from()和of() 数组字面量// 语法const arr = []console.log(arr) // []构造函数// 语法const arr1 = new Array();console.log(arr1) // []const arr2 = Array()console.log(arr2) // []在应用 Array 构造函数时,加不加 new 操作符,后果都一样。 扩大运算符// 语法 ... const arr3 = [1,2,3] console.log(...arr3); // 1,2,3Array静态方法Array.form()Array.from()能够能够接管3个参数 // 第一个参数是必传参console.log(Array.from('arr')); // ['a', 'r', 'r']// 第二个是可选的映射函数参数console.log(Array.from([1,2,3],x => x + x)); // [2, 4, 6]const arr1 = [1,2,3,4]const arr2 = Array.from(arr1,function(x){return x**this.exponent},{exponent:2})console.log(arr2); // [1, 4, 9, 16]Array.of()console.log(Array.of(1,2,3)); // [1,2,3]数组检测// 语法 Array.isArray()console.log(Array.isArray([1,2,3])); // trueconsole.log(Array.isArray({foo:123})); // falseconsole.log(Array.isArray("hello")); // falseconsole.log(Array.isArray(undefined)); // false数组的办法contact() 合并concat它将新数组的元素,增加到原数组的前面,返回一个新的数组,原数组不变 ...

February 23, 2024 · 2 min · jiezi

关于javascript:javascript数组的方法

给你一个数组: let arr=[{ id:1, msg:"张三" },{ id:2, msg:"李四" }]1.forEach()forEach用于循环遍历数组 forEach有3个参数 第一个参数示意数组中每一项 第二个参数示意数组中每一项的下标 第三个参数示意正在遍历的这个数组 arr.forEach((item,index,a)=>{ console.log(item,'数组每项',index,'正在遍历的数组的下标',a,'正在遍历的这个数组'); }) 2.filter()filter用于过滤 问:查找这个数组中id等于1的数据 let a=arr.filter(item=>{ return item.id===1 ) console.log(a,'就是你想要的数据') 3.push()push办法用于给数组中增加数据 let obj={ id:3, msg:"马武" } let cc=arr.push(obj)console.log(arr,'增加胜利后的数据'); 4.splicesplice办法用于删除 arr.splice(0,1)第一个参数不碍事数组中每一项下标,第二个参数是删除几个 console.log(arr,'删除后的新数组'); 5.some()some办法用于检测数组中的元素是否满足条件,满足返回true,不满足返回false let ac=arr.some(item=>item.id<3) console.log(ac,'返回的是true'); let a=arr.some(item=>item.id<0) console.log(a,'返回的是false'); 6.findIndex()findIndex办法用于查找合乎元素的下表 let index=arr.findIndex(item=>item.id===2) console.log(index,'符合条件数据的下标'); 7.every()every办法用于检测数组元素是否都否和条件,然而如果有一项不否合就返回false,残余的不再检测,然而如果所有的元素都合乎则返回true 例子 :let aa=arr.every(item=>item.id===1 ) console.log(aa,'返回false'); 例子 let arr=[{id:"1"},{id:"1"}] let aa=arr.every(item=>item.id===1 ) console.log(aa,'返回true'); 8.find ()find 办法用于返回数组中满足第一个元素的值,如果没有返回undefined let fin=arr.find(item=>item.id===1) console.log(fin,'返回的数据'); 否: 返回undefined因为数组中没有id等于3的 arr.find(item=>item.id===3)9.indexOf()indexOf办法判断数组中是否存在某个值,如果存在返回数组的下标,不存在返回-1 ...

February 23, 2024 · 1 min · jiezi

关于javascript:1把concat-把元素衔接导数组中

// 1.数组的罕用办法 // 把concat() 把元素连接导数组中// concat函数用于连贯一个或多个数组 返回一个新的数组 该办法 不会扭转现有的数组而仅仅返回const arr=[1,3,4];const arr1=[7,5,6];const arr2=[8,11,16];// 将两个数组合并到一个数组外面const str=[1,2,3].concat([4,5,6]);console.log(str);// 连贯多个数组const str1=arr.concat(arr1,arr2,arr)console.log(str1);// 2 过滤数组 const arr=[1,2,3,4,5,1,1];let obj=arr.filter(t=>t===1);console.log(obj);//3 删除数组 const arr=[1,2,3,4,5,1,1];arr.splice(0,3);console.log(arr);//4 截取数组 const arr=[1,2,3,4,5,6,7];let arr1=arr.slice(0,3)console.log(arr1);//5 在尾部增加数字 const arr=[1,2,3,4,5,6,7];arr.push(8);console.log(arr);//6 在头部太耐数字 const arr=[1,2,3,4,5,6,7];arr.unshift(0)console.log(arr);//7 在尾部太耐数字 // const arr=[1,2,3,4,5,6,7];// arr.pop();// console.log(arr);//8 颠倒输入数组中的数字 const arr=[1,2,3,4,5,6,7];arr.reverse();console.log(arr);//9 在头部删除数字 // const arr=[1,2,3,4,5,6,7];// arr.shift();// console.log(arr);//10 颠倒输入数组中的数字 const arr=[1,2,3,4,5,6,7];arr.reverse();console.log(arr);//11 升序输入数组 const arr=[7,0,5,4,3,6,1];arr.sort(function(a,b){ return a-b})console.log(arr);//12 降序输入数组 const arr=[1,3,2,5,4,6,7];arr.sort(function(a,b){ return b-a})console.log(arr);//13 累加输入数组 const arr=[1,3,2,5,4,6,7,2];let sums=arr.reduce((sum,sub)=>{ return sum+sub},0)console.log(sums);// 14.找到符合条件的对象 ...

February 23, 2024 · 1 min · jiezi

关于javascript:DOM映射的特殊情况

DOM映射是前端开发中十分根底的一块内容,然而你晓得吗,DOM映射是有非凡状况的。咱们看个例子:有这样一个构造 <body> <div></div></body>let list = document.querySelectorAll('div');document.body.appendChild(document.createElement('div'));console.log(list); // NodeList [div]想一下,为啥会只有一个div,依照DOM映射的机制,难道不应该两个吗?别急,咱们改行代码,就会发现答案 // querySelectorAll => getElementsByTagNamelet list = document.getElementsByTagName('div');// 以下代码没有变动document.body.appendChild(document.createElement('div'));console.log(list); // HTMLCollection(2) [div, div]把querySelectorAll换成getElementsByTagName之后,便会发现,当初的输入就成了咱们冀望的输入了。通过这个例子咱们发现querySelectorAll是DOM映射的一个非凡case。依据《JavaScript高级程序设计(第三版)》的11章11.1.2的形容咱们得悉:querySelectorAll返回的值实际上是带有所有属性和办法的NodeList,其底层实现则相似于一组元素的快照,而非一直对文档进行搜寻的动静查问。这样实现能够防止应用NodeList对象通常会引起的大多数性能问题。 所以咱们应用这个办法的时候,在数据绑定实现后须要从新获取一次才能够。(须要留神的是,它与原先存在的元素也是映射的,也就是能够批改属性。然而新增或者删除元素不会主动反映到这个汇合中)。 你可能发现了,querySelectorAll返回的是一个NodeList,getElementsByTagName返回的是HTMLCollection。他们之间有何不同呢?这个先挖个坑,下次再讲。那DOM映射还有其余的非凡case吗?没有了,就这一个。顺便咱们再温习一下DOM映射的内容。 什么是DOM映射个别的,咱们从页面获取的元素(包含咱们创立的曾经插入页面的元素)和页面中的元素是有联动关系的,只有批改一个,另一个也会跟着扭转。咱们把这种联动关系称之为DOM映射。举个例子就是 1.扭转元素对象的属性这是咱们最罕用到的一种场景。咱们批改或增加元素属性的时候,个别会从页面中获取到元素对象,对其进行批改,而后就可能主动扭转页面元素的属性。 //=> 批改从页面中获取的元素款式div.style.color = 'red';//=> 批改曾经插入页面的元素的属性var p = document.createElement('p');box.appendChild(p);p.dataset.index = 1; 2. 向页面内增加元素<body> <div id='box'></div></body>let divList = document.getElementsByTagName('div');document.querySelector('#box').appendChild(document.createElement('div'));console.log(divList); // HTMLCollection(2) [div#box, div]咱们向div中插入一个div,插入前只有一个咱们的汇合divList中只有一个元素,插入后再次获取,外面主动就蕴含了咱们新插入的元素。 参考文档DOM的映射机制JavaScript高级程序设计 (第3版)

February 23, 2024 · 1 min · jiezi

关于javascript:数组的方法

罕用数组 1.扩大运算符(...)扩大运算符通常用三个点示意(...),它次要用于开展数组,对象,字符串等,在数组中咱们能够应用它用来合并数组,复制数组(浅拷贝),传递参数给函数,伪数组转换为真正的数组数组。案例: 1.合并数组 // 定义两个数组 let arr = [1, 2, 3] let brr = [4, 5, 6] // 1.合并数组 console.log([...arr, ...brr]); // [1, 2, 3, 4, 5, 6]2.复制数组(浅拷贝数据) // 2.复制数组 let crr = [...arr] console.log(crr); // [1, 2, 3]3.传递参数给函数 // 3.传递参数给函数 function fn(a, b, c) { console.log(a, b, c); // 1 2 3 } fn(...arr) 4.伪数组转换成真正的数组 <body> // 创立多个li标签 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> // 4.伪数组转换成真正的数组 // 获取 多个demo const uls = document.querySelectorAll("ul li") // 失常获取 const lis = [...document.querySelectorAll("ul li")] // 应用扩大运算符 console.log(uls, '检测是否是数组', uls instanceof Array); // false console.log(lis, '检测是否是数组', lis instanceof Array); // true打印后果: ...

February 23, 2024 · 1 min · jiezi

关于javascript:算法

// 工夫复杂度O(n)、 空间复杂度O(n)function twoNumAdd(arr, target) { if (Array.isArray(arr)) { // 应用map将遍历过的数字存起来,空间换工夫let map = {};for (let i = 0; i < arr.length; i++) { // 从map中查找是否有key 等于 target-nums[i],如果有,则条件成立,返回后果 if (map[target - arr[i]] !== undefined) { return [target - arr[i], arr[i]]; } else { // 条件不成立,将该值存起来 map[arr[i]] = i; }}} return [];}

February 23, 2024 · 1 min · jiezi

关于javascript:递归组件组合拳无惧页面嵌套

介绍递归组件在组件内嵌套组件时比拟罕用,我在这里举几个例子:1、后盾管理系统的menu菜单 2、教育零碎的题目列表在遍历生成根底题时,遇到了综合题,综合题蕴含了所有根底题,此时就不必再写一遍根底题,间接调用本身组件即可,这样不管根底题外部嵌套多少层综合题,都能够生成题目列表。 如何实现递归组件?父页面:失常引入组件 // 父页面<template> <div> <Circulation :dataInfo="dataInfo"/> </div></template> <script>import Circulation from '@/views/circulation.vue'export default { components: { Circulation }, data() { return { dataInfo: [ // ...... ] } },}</script>子组件 // circulation页面<template> <div> <div v-for="item in dataInfo"></div> // 其它逻辑...... // 如果遇到children -> 复用本身 <Circulation :dataInfo="item.children"/> </div></template> <script>export default { name: 'Circulation', // 肯定要设置name,于组件名雷同 props: { dataInfo: { type: Array, default: () => { return [] } }, },}</script>下面的代码就实现了递归组件,在子组件中不须要引入本身,只须要设置name,而后通过name复用组件即可上面是你在教育类型我的项目中会遇到的场景: ...

February 23, 2024 · 1 min · jiezi

关于javascript:JavaScript-原型链详解

持续补档,发现这块内容其实蛮多的。前面预计还会有两篇(怎么还有两篇啊喂!),别离是 JavaScript执行原理·补 和 JavaScript局部个性,这周不晓得能不能搞定。 先看 JS 原型链吧。 JS 继承机制设计1994年,网景公司(Netscape)公布了 Navigator v0.9,轰动一时。但过后的网页不具备交互性能,数据的交互全副依赖服务器端,这节约了工夫与服务器资源。 网景公司须要一种网页脚本语言实现用户与浏览器的互动,工程师 Brendan Eich 负责该语言的开发。他认为这种语言不用简单,只需进行一些简略操作即可,比方填写表单。 可能是受过后面向对象编程(object-oriented programming)的影响,Brendan 设计的 JS 外面所有的数据类型都是对象(object)。他须要为 JS 设计一种机制把这些对象连接起来,即“继承”机制。 继承容许子类继承父类的属性和办法,并且能够在子类中增加新的属性和办法,实现代码的重用和扩展性。出于设计的初衷,即“开发一种简略的网页脚本语言”,Brendan 没有抉择给 JS 引入类(class)的概念,而是发明了基于原型链的继承机制。 在 Java 等面向对象的语言中,个别是通过调用 class 的构造函数(construct)创立实例,如: class Dog { public String name; public Dog(String name) { this.name = name; }}public class Main { public static void main(String[] args) { Dog dog = new Dog("Rover"); System.out.println(dog.name); // Rover }}Brendam 为 JS 做了简化设计,间接对构造函数应用new创立实例: function Dog(name) { this.name = name;}var dog = new Dog("Rover");console.log(dog.name) // Rover这种设计防止了在 JS 中引入 class,但这引出一个问题:JS 的实例该如何共享属性和办法?基于构造函数创立的实例都是独立的正本。 ...

February 23, 2024 · 3 min · jiezi

关于javascript:Javascript-使用高阶生成器进行过滤以生成素数

生成器大家都晓得是怎么一回事,然而高阶生成器又是什么货色呢?明天小编就带着大家来一起理解一下吧……先上代码: function* numFrom(start: number) { while (true) yield start++}function* filter(nums: Generator<number>, prime: number) { for (const n of nums) if (n % prime !== 0) yield n}let cur = numFrom(2)for (let i = 0; i < 10; i++) { const prime = cur.next() if (!prime.done) { console.log(i, ':', prime.value) cur = filter(cur, prime.value) }}后果: 0 : 21 : 32 : 53 : 74 : 115 : 136 : 177 : 198 : 239 : 29其中函数 filter 传入一个生成器,返回一个新的生成器,咱们能够把它称为高阶生成器。 ...

February 22, 2024 · 3 min · jiezi

关于javascript:JavaScript-的新数组分组方法

对数组中的我的项目进行分组,你可能曾经做过很屡次了。每次都会手动编写一个分组函数,或者应用 lodash 的 groupBy 函数。 好消息是,JavaScript 当初有了分组办法,所以你再也不用这样做了。Object.groupBy 和 Map.groupBy 这两个新办法将使分组变得更简略,并节俭咱们的工夫或依赖性。 以前的做法假如你有一个代表人的对象数组,你想按年龄对它们进行分组。你能够这样应用 forEach 循环: const people = [ { name: "Alice", age: 28 }, { name: "Bob", age: 30 }, { name: "Eve", age: 28 },];const peopleByAge = {};people.forEach((person) => { const age = person.age; if (!peopleByAge[age]) { peopleByAge[age] = []; } peopleByAge[age].push(person);});console.log(peopleByAge);/*{ "28": [{"name":"Alice","age":28}, {"name":"Eve","age":28}], "30": [{"name":"Bob","age":30}]}*/或者能够像这样来应用reduce: const peopleByAge = people.reduce((acc, person) => { const age = person.age; if (!acc[age]) { acc[age] = []; } acc[age].push(person); return acc;}, {});无论哪种办法,代码都略显蠢笨。你总是要查看对象是否存在分组键,如果不存在,就用一个空数组来创立它。而后再将我的项目推入数组。 ...

February 21, 2024 · 2 min · jiezi

关于javascript:JavaScript-混淆与反混淆

Obfuscation 混同JavaScript 混同(Obfuscation)是指通过一系列技术手段,使 JS 代码变得难以了解和剖析,减少代码的复杂性和混同度,妨碍逆向工程和代码盗用。实际上就是一种爱护 JS 代码的伎俩。 那为什么咱们须要爱护 JS 代码呢 ️ JS 最早被设计进去就是为了在客户端运行,间接以源码的模式传递给客户端,如果不做解决则齐全公开通明,任何人都能够读、剖析、复制、盗用,甚至篡改源码与数据,这是网站开发者不违心看到的。 起源晚期的 JS 代码承当性能少,逻辑简略且体积小,不须要爱护。但随着技术的倒退,JS 承当的性能越来越多, 文件体积增大。为了优化用户体验,开发者们想了很多方法去减小 JS 文件体积,以放慢 HTTP 传输速度。JS 压缩(Minification)技术应运而生。 常见的 JS 压缩伎俩很多,比方: 删除 JS 代码中的空格、换行与正文;替换 JS 代码中的局部变量名;合并 JS 文件;……压缩工具开发的初衷是减小 JS 文件体积,但 JS 代码通过压缩替换后,其可读性也大大降低,间接起到了爱护代码的作用。然而起初支流浏览器的开发者工具都提供了格式化代码的性能,压缩技术所能提供的平安爱护收效甚微。于是专门爱护 JS 代码的技术:JS 加密和 JS 混同。 本文不会介绍 JS 加密技术,只须要晓得这两种技术相辅相成,不事后进行混同的 JS 加密没有意义。常见混同伎俩变量名/函数名的替换,通过将有意义的变量名和函数名替换为随机生成的名称。 /*function calculateArea(radius) { return Math.PI * radius * radius;}console.log(calculateArea(5));*/function _0x2d8f05(_0x4b083b) { return Math.PI * _0x4b083b * _0x4b083b;}console.log(_0x2d8f05(5));字符串混同,将代码中的字符串替换为编码或加密的模式,能够避免字符串被轻易读取。 // console.log("Hello, world!");console.log("\x48\x65\x6c\x6c\x6f\x2c\x20\x77\x6f\x72\x6c\x64\x21");控制流混同,扭转代码的执行程序或构造。例如,能够应用条件语句和循环语句来替换简略的赋值操作。 /*let a = 1;let b = 2;let c = a + b;console.log(c);*/let a = 1;let b = 2;let c;if (a === 1) { if (b === 2) { c = a + b; }}console.log(c);死代码插入,即在源码插入一些不会被执行的代码。 ...

February 21, 2024 · 8 min · jiezi

关于javascript:容易疏漏的地方记录

对find的后果进行判空const items = [ { id: 1, name: 'Ben', age: 25, }, { id: 2, name: 'Lily', age: 20, },];const targetItem = items.find((item) => item.age === 50);console.log(targetItem.name);// Error: Cannot read properties of undefined (reading 'name')下面的代码中,咱们在find的返回值上间接拜访属性,会有可能导致异样。 因为在没有找到指标时,find的返回值会是undefined,在undefined上拜访对象,就会抛出异样。 所以,遵循简略的策略,永远对find的返回值进行判空,防止意外状况。 const targetItem = items.find((item) => item.age === 50);console.log(targetItem?.name);// undefined

February 21, 2024 · 1 min · jiezi

关于javascript:网络攻防模拟与城市安全演练-图扑数字孪生

在数字化浪潮的推动下,网络攻防模仿和城市平安演练成为保护社会稳固的不可或缺的环节。基于数字孪生技术咱们可能在虚拟环境中进行高度实在的网络攻防模仿,为平安业余人员提供实战经验,从而晋升应答网络威逼的能力。同时,在城市平安演练中通过精准模仿各类紧急情况,帮忙城市管理者制订更无效的安全策略。 图扑软件应用自研 HT for Web 产品建设虚构的对战平台,以厦门市范畴作为三维场景,开启强烈的网络攻防模仿和城市平安演练。在此虚拟环境中,参与者能够全方位体验城市平安或网络安全带来的挑战与危机,实现模仿各种攻打和进攻伎俩的实际效果。不仅拓展了对网络攻防技术的意识,还为参与者提供了一个实际和测试各种安全策略的机会。 系统分析网络攻防在网络攻防突飞猛进的背景下,攻击者必须一直寻求翻新路径,以冲破内部网络指标的坚硬防护体系,利用零日破绽、社会工程学手法、供应链攻打、投毒攻打,或者采纳更为隐秘的攻打向量,躲避传统的检测与响应机制。防守方也不再仅仅依赖于传统的进攻策略,如 IP 封闭或简略的入侵检测,而是转向主动防御甚至主动进攻,包含采取被动情报收集、剖析与分享,实时威逼情报监测、云平安服务、容器化防护等平安防护,以应答一直演进的威逼。 蓝方防守方 基于图扑 HT 三维引擎制作炫酷丝滑的入场动画,展现出整个城市的全貌以及防守方节点的地理位置。 以鸟瞰漫游视角对次要防守地位进行镜头特写。 红方进攻方 模仿进攻方部署于岛外,以炮台的款式作为攻打点位,造成网络攻击网络。数字孪生模仿环境,有助于更具象的评估网络系统的防御能力。 攻防战开始 进攻方使用“炮弹”的模式对岛内防守方施加继续网络攻击。该场景形容不仅突显了网络攻击的强度和精准度,同时也强调了攻打的持续性。 防守方启动网络防御机制,开展水利、电力、医院化工、学校等多地联结防守。旨在通过协同多个地点的网络防护系统,造成弱小的联结力量,以更全面、多层次的形式抵挡强烈的网络攻击。 进攻方派出“卫星”增员,定位至防守方基地并进行攻打。展现出进攻方更精准地理解防守方的网络架构和弱点,选用“卫星”部署进步了攻打方的情报获取能力,也使得他们可能更迅速地调整战术,应答防守方可能的变动和反馈。 当红方炮台被击毁时则表明蓝方进攻胜利。 图扑软件 HT 可视化引擎同样反对联合地理信息系统(Geographic Information System,GIS)相干技术,对其进行全方位的数字化建设,把握所有站点的整体运维情况。跨平台、挪动终端均可轻松关上场景,实现触屏设施的单指旋转、双指缩放、三指平移等操作,用户不用再为跨平台交互模式而懊恼。通过 HT SDK 内置交互能力,即可实现鼠标的旋转、平移、拉近拉远操作。 实时战况信息以图扑 HT 2D UI 界面展示网络对战实时数据监控,左侧半区为防守方(蓝方)看板,右侧半区为进攻方(红方)看板,不同波次的网络攻防事件,在 UI 界面上造成了一场又一场的对局。 对战开始 蓝方获胜 红蓝单方赛事积分 通过界面左右两侧对抗的模式,清晰展现了防守方与进攻方在军事、政府、医院、学校、水利、电力、化工等模块中的对战积分。辅助用户实时追踪攻防单方在各要害畛域中的得失,更全面地评估网络安全态势。 红蓝单方战队排行 进攻方和防守方别离下设在不同地点的战队,将积分前三名的战队直观展现在主看板中,明确战队的排名,使用户能高深莫测地理解单方在竞技过程中的体现。防守方看板下方实时统计了每一轮赛事的防守后果,为用户提供对于防守方的粗疏追踪。与此绝对,进攻方看板则展现了实时防御播报的详细信息,显示对方进攻方战术布局、攻打伎俩等实时动静。 图扑 HT 的三维可视化采纳轻量化建模的形式,联合 HT 引擎弱小的渲染能力,保障场景在 Web 中高效流畅地加载运行。 城市反恐演练城市反恐演练数字孪生是通过模仿恐怖袭击等顽劣情景,进行组织、策动和施行的应急演练流动。目标是进步应答恐怖袭击等突发事件的应急响应能力,包含指挥协调、资源调配、人员救济、媒体关系和公众平安等方面。 反恐演练通常采纳实在场景、实在配备和实在人员,通过模仿恐怖袭击事件的产生和处理,以测试和评估政府、执法机构、救济队伍和其余相干机构的应急响应能力。以图扑 HT for Web 2D 和 3D 引擎为根底,搭建的城市平安演练可视化界面,更加直观地展示给观众实时的孪生数据以及模仿的演练成果。 ...

February 21, 2024 · 1 min · jiezi

关于javascript:JavaScript-执行原理

最近在温习 JavaScript 反混同相干内容,正好给执行原理补个档,之前旧版的随旧博客一起遗失了,这里从新写了一篇。 预计之后还会有 JavaScript执行原理·补 和 JavaScript混同/反混同,缓缓写吧。 JavaScriptJavaScript 是一门解释型语言,与 C/Golang 等动态编译语言不同。动态编译型语言通过编译器间接将代码转化为机器码,而后运行在机器上;JS 是先通过编译产生字节码,而后在虚拟机上运行字节码(这点与 Java&JVM 很类似),性能虽不迭动态编译型语言,但取得了更多的灵活性。 前置常识JS Engine 引擎为什么须要 JS Engine️? JS Engine 其实就能够了解为上文中所说的虚拟机。机器底层的 CPU 只能执行指令集中的指令(即对应的汇编代码),无奈间接辨认高级语言。JS Engine 能够将 JS 代码编译为字节码,而后执行代码,同时还提供了分配内存和垃圾回收的性能,极大水平上加重了开发人员的工作量,何乐而不为。 从实质上来讲,JS Engine 就是一段程序,用于实现上述性能。 互联网中最常见、应用最宽泛的 JS Engine 是 Google V8。Google V8 是用 C++ 编写的开源高性能 JS Engine(同时也是 WebAssembly Engine),目前已被用于 Chrome 浏览器、Node.js、MongoDB 等多个出名我的项目。Chrome 占据了寰球浏览器市场 60% 的份额,而 Node.js 未然成为服务器端 JS 代码的执行规范,由此可见 V8 应用之宽泛。 除此之外,还有一些常见的 JS Engine: 由 Mozilla 为 Firefox 开发的 SpiderMonkey为 Safari 浏览器提供反对的 JavaScriptCore为 IE 提供反对的 Chakra本篇接下来的 JS Engine 都默认为 Google V8。 ...

February 21, 2024 · 3 min · jiezi

关于javascript:在普通的html页面用Vue3组合式API写的项目无需Nodejs环境和构建项目

摘要Vue.js的长处有很多,然而其应用门槛对于只学习过一般的我的项目的同学来说,还是比拟有挑战性的,如果你真的想把Vue学的很溜,真的须要一个十分零碎的学习能力使用起来。因为学习Vue你不仅仅是学习他的语法、API和一些开发的标准,你还要学习构建工具的应用、调试、打包等等,有些人连最根本的开发环境都还没能顺利搭建起来。 如果你不想应用Vue弱小的生态和工具,只想在html页面中应用Vue也是能够的,因为Vue也有一个全局的生产环境cdn(vue.global.prod.min.js),你能够应用这个cdn来应用Vue构建比拟小型的我的项目。 我的项目介绍写这篇文章的起因是我应用了Vue3的组合式Api实现了一个非常简单的单页,具体信息如下: 我的项目:围绕广东省3+证书招生考试信息为数据,开发一个招生院校、招生业余信息查问和展现页面。 数据:广东3+证书招生院校目录、招生业余目录。 我的项目截图: 代码构造: 上代码index.html 代码中引入了 vue.global.prod.min.js 用于应用Vue的API,引入了 vue-router.js 实现路由性能,引入了 axios.min.js 实现申请接口获取数据。 在app节点下通过 <router-view></router-view> 渲染对应路由的内容。 要害的代码都在 app.js 中应用Vue3的组合式API实现数据申请和数据响应式渲染。所以通过模块的形式引入了 app.js <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>广东省3+证书(中职)招生打算</title> <script src="js/vue.global.prod.min.js"></script> <script src="js/vue-router.js"></script> <script src="js/axios.min.js"></script> <link rel="stylesheet" href="css/app.css"> <style> .college-card { width: 100%; display: flex; border-bottom: 1px solid #eee; background: #fff; } .college-card .college-logo { width: 90px; } .college-card .college-logo img { width: 55px; height: 55px; margin: 25px 15px 15px 20px; border-radius: 100px; } .college-card .college-info { flex: 1; } .college-card .college-name { width: 100%; height: 45px; line-height: 45px; font-size: 17px; font-weight: bold; color: #333; } .college-card .college-category { width: 100%; height: 25px; } .college-card .college-category .tag { background: #fff4ef; color: #ff7637; padding: 3px 6px; font-size: 12px; margin-right: 8px; border-radius: 5px; } .college-card .college-plan { width: 100%; height: 30px; line-height: 30px; font-size: 14px; color: #999; padding-bottom: 5px; } .college-card .next { width: 30px; background: url('img/next.png')no-repeat; background-size: 80%; background-position: center; opacity: 0.5; } .college-info { background: #fff; } .college-info .info-header { width: 100%; margin: 0 auto; display: flex; border-bottom: 1px solid #eee; padding-top: 15px; } .college-info .info-header .info-logo { width: 90px; } .college-info .info-header .info-logo img { width: 60px; height: 60px; margin: 25px 15px 15px 10px; border-radius: 100px; } .college-info .info-header .info { flex: 1; } .college-info .info-header .info .college-name { width: 100%; height: 45px; line-height: 45px; font-size: 20px; font-weight: bold; color: #333; } .college-info .info-header .info .college-tag { width: 100%; height: 25px; } .college-info .info-header .info .college-tag .info-tag { background: #fff4ef; color: #ff7637; padding: 3px 6px; font-size: 12px; margin-right: 8px; border-radius: 5px; } .college-info .info-header .info .info-plan { width: 100%; height: 30px; line-height: 30px; font-size: 14px; color: #999; } .college-info-nav { width: 100%; display: flex; } .college-info-nav .nav-tag { flex: 1; height: 40px; line-height: 40px; text-align: center; font-size: 15px; color: #666; } .college-info-plan { width: 95%; background: #fff; margin: 15px auto 0; overflow: hidden; border-radius: 10px; } .college-info-plan .college-info-plan-year { width: 93%; height: 30px; margin: 15px auto 0; } .college-info-plan .college-info-plan-year .plan-year { padding: 6px 10px; background: #eee; font-size: 15px; margin-right: 10px; border-radius: 10px; color: #666; } .college-info-plan .college-info-plan { width: 93%; height: 30px; margin: 10px auto; font-size: 14px; } .college-info-plan .college-info-plan-zyz { width: 93%; height: 20px; margin: 10px auto 0; font-size: 15px; color: #ff7637; font-weight: bold; } .college-info-plan .college-info-zyz-plan { width: 93%; height: 20px; margin: 5px auto; font-size: 14px; } .college-info-plan .college-info-zyz-major { width: 93%; margin: 15px auto; font-size: 14px; } .college-info-plan .college-info-zyz-major table{ width: 100%; border-collapse: collapse; border-spacing: 0; text-align: center; margin: 0 auto; position: relative; } .college-info-plan .college-info-zyz-major th{ background: #fff4ef; } .college-info-plan .college-info-zyz-major th,td{ padding: 6px 10px; border: 1px solid #ff7637; } .zyzList { background: #fff; width: 95%; margin: 20px auto 0; overflow: hidden; border-radius: 10px; } .zyzList table { width: 93%; font-size: 13px; text-align: center; border-collapse: collapse; margin: 10px auto; } .zyzList table th { padding: 6px 0; border: 1px solid #eee; } .zyzList table td { border: 1px solid #eee; color: #666; } .majorList { background: #fff; width: 95%; margin: 20px auto 0; overflow: hidden; border-radius: 10px; } .majorList table { width: 93%; font-size: 13px; text-align: center; border-collapse: collapse; margin: 10px auto; } .majorList table th { padding: 6px 0; border: 1px solid #eee; } .majorList table td { border: 1px solid #eee; color: #666; } .list-title { width: 93%; margin: 15px auto 0; display: block; font-size: 15px; color: #ff7637; font-weight: bold; } </style></head><body> <div id="app"> <router-view></router-view> </div> <!--引入Vue利用实例--> <script type="module" src="js/app.js"></script></body></html>app.js ...

February 20, 2024 · 5 min · jiezi

关于javascript:JS模块化系统

JS模块化零碎随着 JavaScript 开发变得越来越宽泛,命名空间和依赖关系变得越来越难以解决。人们曾经开发出不同的解决方案以模块零碎的模式来解决这个问题。 CommonJS(CJS)CommonJS 是一种同步加载模块的标准,次要用于服务器端的 Node.js 环境。 // 模块导出module.exports = { // 模块内容};// 模块导入const module = require('module');top:CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。AMD(Asynchronous Module Definition)AMD 是一种_异步_加载模块的标准,次要用于浏览器端的 JavaScript 开发。它容许模块在加载实现后立刻执行,而不会阻塞页面加载。 // 模块定义define(['dependency1', 'dependency2'], function (dependency1, dependency2) { // 模块内容 return { // 模块导出内容 };});// 模块加载require(['module'], function (module) { // 模块加载实现后执行的逻辑});UMD(Universal Module Definition)UMD 是一种通用的模块定义格局,旨在兼容 CommonJS、AMD 以及全局变量导出的形式。 实现原理为:先判断是否反对node.js的模块,存在就应用node.js;再判断是否反对AMD(define是否存在),存在则应用*AMD的形式加载。这就是所谓的UMD*。 (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['exports', 'module'], factory); } else if (typeof exports === 'object' && typeof module === 'object') { // CommonJS factory(exports, module); } else { // 浏览器环境下裸露到全局变量 factory((root.myModule = {}), root.myModule); }})(this, function (exports, module) { // 模块内容});UMD 本质上创立了一种应用两者之一的办法,同时还反对全局变量定义。因而,UMD 模块可能在客户端和服务器上工作。ESM(ES Module)ESM 是 ECMAScript 官网提供的模块规范,反对异步加载,具备动态导入和导出,使得代码更具可靠性和可预测性。 ...

February 19, 2024 · 1 min · jiezi

关于javascript:netcore免费开源大型多用户商城系统源码

随着电商的不断扩大与市场占有率,当初根本每个企业或商家都会搭建本人的线上商城,而其中的多用户商城零碎,因为能够让不同行业的商家入驻,同时也能够开设多个店铺受到了泛滥企业或商家的青眼。最几年,随着.net core C#的开源,越来越多的软件开发公司应用.net core进行开源多用户多商户的商城源码开发,其中,OctShop的.net core开源多用户多商户大型商城源码也是越来越多企业或商家应用,那么,用.net core开发与抉择多用户商城零碎时,有什么须要留神与关注的呢?怎样才能确保稳固运行和用户满意度呢?一、数据保护和安全性netcore开源多用户多商户大型商城零碎个别会波及大量的商家和订单交易领取信息,还有买家的用户信息等,因而,数据的安全性爱护是很重要的方面,在.net core多用户大型商城零碎中,个别会对敏感的数据,如:明码,领取,登录等信息进行加密解决。比拟在意整个零碎安全性的用户,能够让所有零碎都应用Https加密通信。每个零碎中API接口的通信都应用签名验证,对于服务器的治理应用实时备份,如果不能实时备份的,至多每天创立一个备份。二、多平台多客户端适配个别一个大型的.net core多用户商城零碎都会做不同平台不同零碎的适配,如:小程序端、APP端、公众号端、H5/Wap端、PC电脑端等。netcore开源多用户多商户大型商城零碎要确保在不同零碎中有良好的适配,如:windows、Linux、IOS、Android等。确保在不同的客户端平台,不同的操作系统中都能保持一致的用户体验。在设计开发过程中,要留神挪动端的优化与跨平台兼容性,从而满足不同用户的多样化需要。三、高并发与性能扩展性大型多用户的.net core商城零碎平台,因为零碎比拟大,用户量和浏览量绝对个别的单项目标商城会高出很多,这时零碎就要思考高性能,高并发的反对。大型多用户的.net core商城零碎个别性能会比拟多,随着客户的经营,其性能也是要依据经营需要进行扩大的,所以一个好的底子扩展性强的商城零碎对于客户来说会省下很多经营与开发成本,同时,也会比拟容易的对接第三方零碎或是本人曾经曾经在应用的零碎。四、零碎界面与用户体验对于买家用户来讲,零碎的用户界面是最间接的感观感触,个别能体验企业格调和品牌形象的用户界面更可能吸引消费者的购买欲望,一个简洁、直观、导航精准的界面可能帮忙用户疾速找到本人须要的信息和产品,并且可能疾速实现整个下单领取交易过程。一个大型的多用户商城零碎还须要思考平台的生产群体,针对比拟大的生产群体,尽量做出个性化的用户体验与需要,以达到晋升用户满意度和忠诚度。五、喜爱举荐与搜寻优化netcore开源多用户多商户大型商城零碎,个别会有很多不同行业的商家入驻平台,不同商家会公布不同类目标商品,随着经营工夫的减少,商城零碎零碎的商家店铺以及商品也是会越来越多,怎么在大量的店铺与商品中找到本人想要的店铺与商品就显得十分重要的。这时一个优良的搜寻性能就十分要害了。再者就是零碎能够通过用户的喜爱数据,向买家用户举荐一些个性化并且能满足买家需要的信息,显得十分重要,这样能够很大水平上减少平台销售业绩。六、OctShop收费开源大型多用户.net core商城零碎源码OctShop是一个用.net core C#开发的大型多用户商城零碎,并且开源,根底版源码能够收费提供下载与商用,不须要受权就能够商用的大型商城零碎。OctShop每个版本都有小程序端、APP端、公众号端、H5/Wap端、PC电脑端等。并且同时反对:B2B2C+O2O模式的一体化经营。搜寻OctShop

February 18, 2024 · 1 min · jiezi

关于javascript:对象方法用途记录

entries介绍这是一个静态方法,用于将对象转换为数组。该办法承受一个对象,而后返回一个数组,该数组的每个元素为一组对象的键名和键值。 const arr = Object.entries({name1: 'tom', name2: 'lily'})console.log('arr', arr)// [['name1', 'tom'], ['name2', 'lily']]用处用于联合map、filter、reduce等申明式函数进行无副作用的数据加工。上面是对obj进行遍历并统计每个人的共计得分示例: const obj = { tom: [1, 2, 3], lily: [1, 2] }const items = Object.entries(obj).map(([key, values]) => ({ name: key, value: values.reduce((acc, curr) => acc += curr, 0)}))console.log('items', items)// [{ name: 'tom', value: 6 }, { name: lily, value: 3 }]

February 16, 2024 · 1 min · jiezi

关于javascript:数组方法用途记录

<article class=“article fmt article-content”><h2>slice介绍</h2><pre><code>Array.prototype.slice(startIndex, endIndex = Array.length - 1)</code></pre><p>用于将原数组依照<code>startIndex</code>和<code>endIndex</code>的地位进行提取,重点是<strong>该数组不会批改原数组</strong>,倡议优先思考应用。</p><pre><code class=“js”>const arr = [1, 2, 3]const nextArr = arr.slice(0, 1)console.log(‘arr’, arr)// [1, 2, 3]console.log(’nextArr’, nextArr)// [1]</code></pre><h2>some和every差别是什么?</h2><p>some<br/>承受一个函数,而后<code>some</code>会应用这个函数遍历整个数组,如果该函数至多有一次返回<code>true</code>,则<code>some</code>返回<code>true</code>,否则返回<code>false</code>。</p><p>every<br/>承受一个函数,而后<code>every</code>会应用这个函数遍历整个数组,如果该函数每次都返回<code>true</code>,则<code>every</code>返回<code>true</code>,否则返回<code>false</code>。</p><p>两者的差别<br/>some须要至多找到<strong>至多一次满足函数</strong>的数据项,才返回true。<br/>every须要数组的<strong>所有数据项都满足函数</strong>,才返回true。</p></article>

February 15, 2024 · 1 min · jiezi

关于javascript:低代码与MES系统相结合

<article class=“article fmt article-content”><p>低代码平台通常是指aPaaS平台,通过为开发者提供可视化的利用开发环境,升高或去除利用开发对原生代码编写的需求量,进而实现便捷构建应用程序的一种解决方案。<br/>更加简略点的了解就是“拖拽!搭建利用”。<br/></p><p>一、低代码开发平台概述<br/>低代码开发平台以模型驱动开发为外围,通过可视化界面和预制组件,使开发者能迅速构建和部署简单零碎。这种开发方式升高了技术门槛,进步了开发效率,使更多的业务人员和非专业开发者可能参加到软件开发中来。低代码平台的呈现,为企业疾速响应市场变动、实现业务翻新提供了无力反对。<br/>二、疾速构建MES界面和性能<br/>低代码平台的可视化UI设计和逻辑解决开发能力,使开发者能疾速构建合乎企业理论需要的MES界面和性能。无论是数据采集、设施监控,还是品质治理、生产调度,都能通过简略的拖拽和配置实现。这升高了MES的开发难度,进步了零碎的可维护性和可扩展性。<br/>万界星空科技低代码平台提供了丰盛的组件库和编程接口,反对企业依据理论需要进行二次开发和性能扩大。这让MES不仅能满足通用的生产治理需要,还能依据企业的非凡工艺和业务流程进行定制。通过二次开发,企业能够将本身的行业教训和业务需要融入MES零碎,造成具备企业特色的智能制作解决方案。<br/>三、低代码与MES在智能制作畛域的利用前景<br/>个性化定制生产<br/>随着消费者需要的多样化,个性化定制生产成为制造业的发展趋势。低代码与MES的联合,使企业可能依据客户需要疾速调整生产打算和工艺流程,实现个性化产品的疾速交付。这不仅满足了消费者的个性化需要,还进步了企业的生产效率和经济效益。<br/>柔性制造系统<br/>柔性制造系统是一种可能适应多种产品、多种工艺流程的生产模式。低代码与MES的联合,使企业可能依据市场需求灵便调整生产线和生产打算,实现多种类、小批量生产。这不仅进步了企业的生产能力和市场竞争力,还升高了生产成本和产品周期。<br/>工业物联网利用<br/>工业物联网是智能制作的重要组成部分,通过连贯设施、传感器等终端设备实现生产数据的实时采集和剖析。低代码与MES的联合,使企业可能疾速构建工业物联网利用,实现对设施状态、生产过程等的实时监控和预警。这不仅进步了生产效率和品质稳定性,还为企业的数字化转型提供了无力反对。<br/><br/>万界星空科技专一于制造业生产治理平台(低代码平台)的研发和施行,已胜利帮忙很多企业和工厂解决了外部的治理问题,无效的进步了生产效率,并且节俭了人力。胜利利用于汽车、高科技电子、注塑、电线电缆、造鞋、设施制作、新能源、电梯、家电、家居、纺织、印刷、电气、电机等行业。</p></article>

February 12, 2024 · 1 min · jiezi

关于javascript:汽车零部件MES系统实施方案

<article class=“article fmt article-content”><p>中国汽车业在不断完善晋升汽车制作自动化技术的同时,瞄准汽车零部件系统化开发、模块化制作、集成化供货模式,通过汽车零部件MES零碎的疾速利用,借助全新的设计和工艺流程,对产线要害工位的交互进行严格控制,扭转以往由多个零部件别离实现的性能为单个模块组建实现,从而在技术上突破了集成化和模块化的壁垒,既进步了汽车拆卸的效率,也达到了节能减排的目标<br/><br/>汽车零配件行业MES系统实施流<br/>我的项目准<br/>我的项目筹备阶段是须要对我的项目的施行前做必要的筹备和初始化工作。在这个阶段,须要明确我的项目的总体目标、施行打算及施行策略,以及我的项目施行过程的各种相干束缚及配合要求<br/>方案设计<br/>此阶段次要是实现现场调研、需要剖析、MES零碎选型、方案设计与确定等工作。通过现场调研理解企业信息化现状,并确定其与MES管理系统的关系。理解企业制作部门的需要,做好IT布局、协调与经营。需要剖析工作实现后就要依据理论需要来进行MES选型并设计相应的功能模块。具体的设计方案由慧都提供,客户对其进行确定。<br/>配置实现<br/>此阶段的次要工作是以具体设计报告为根据,在开发环境中把方案设计阶段设计的性能付诸实施,使之成为能够理论运行的MES管理系统。除了软件系统的配置、编码及集成接口等开发外,还包含了单元测试、集成测试等测试工作以及相互商议等一系列治理流动。<br/>零碎试运行<br/>此阶段将MES管理系统部署到工厂的实在生产环境中,最终业务用户理论应用MES零碎进行工作。各种理论的生产数据也开始进入零碎数据库。为保障试运行顺利进行,会对相干岗位员工进行培训,使用户相熟新零碎的应用。<br/>零碎验收<br/>阶段的次要工作是做好数据迁徙和我的项目验收,配合企业用户制订和公布须要的制度和标准。企业须要依据验收规范对MES的性能、性能等诸多方面。<br/>总的来说,MES零碎在汽车和零部件制作畛域中扮演着至关重要的角色它。不仅使得生产流程更加高效、稳固、灵便,而且还为企业提供了科学决策的根据,实现了个性化的生产。<br/>如果您的企业属于汽车零配件行业或者是其余生产制造业,想要理解更多智能制作MES零碎信息,能够百度万界星空科技官网分割咱们哦,咱们能够为您演示以及发送更多相干案例。</p></article>

February 12, 2024 · 1 min · jiezi

关于javascript:作用域-CSS-回来了

首发于公众号 大迁世界,欢送关注。 每周7篇实用的前端文章 ️ 分享值得关注的开发工具 分享集体守业过程中的趣事快来收费体验ChatGpt plus版本的,咱们出的钱 体验地址: https://chat.waixingyun.cn 能够退出网站底部技术群,一起找bug,另外新版作图神器已上线 https://cube.waixingyun.cn/home 几年前,隐没的作用域 CSS,现在它回来了,而且比以前的版本要好得多。 更好的是,W3C标准根本稳固,当初Chrome中曾经有一个工作原型。咱们只须要社区略微关注一下,诱惑其余浏览器构建它们的实现,并实现这项工作。 这是什么思路?作用域为CSS带来了两个关键点: 更好地管制哪些选择器针对哪些元素(即更好地操作级联)。一组款式能够基于DOM中的地位笼罩另一组款式。部分款式容许你在页面上的单个组件内蕴含一组款式。你能够应用.title选择器,它只在Card组件内工作,并应用另一个.title选择器,它只在 Accordion 中工作。你能够阻止一个组件的选择器针对子组件中的元素,或者如果须要,也能够容许它们达到。 你不再须要BEM格调的类名。 此外,近度在级联中变成了一等公民。如果两个组件针对同一个元素(具备雷同的特异性),外部组件的款式将笼罩内部组件的款式。 它是如何工作的?所有都始于@scope规定和一个选择器,如下: @scope (.card) { /* 将以下款式局限于`.card`外部 */ :scope { padding: 1rem; background-color: white; } .title { font-size: 1.2rem; font-family: Georgia, serif; }}这些款式都限度在.card元素中。:scope是一个非凡的伪类,针对.card元素自身,.title针对题目外部的题目。 @scope规定自身不减少这些选择器的特异性,所以它们都是(0, 1, 0)。是的,特异性依然很重要,但这是坏事™️。稍后再说。 此时,你能够应用一般的后辈选择器来实现这一点。但当你在范畴内利用外部边界或在页面上重叠多个范畴时,新的、以前不可能的选项开始呈现。让咱们看看它们是怎么做的... 外部范畴边界假如你预计将其余组件放入你的Cards中,所以你不心愿.title 选择器针对除属于Card的那个题目之外的任何货色。为此,你在范畴上设置了一个外部边界,如下: @scope (.card) to (.slot) { /* 限定的款式只在`.card`外部,但不在`.slot`外部 */ :scope { padding: 1rem; background-color: white; } .title { font-size: 1.2rem; font-family: Georgia, serif; }}把这里的 to 关键字看作 直到:这个范畴是从.card到.slot定义的。当初,没有一个局限的选择器会针对Card的.slot元素外部的任何货色。所以你能够这样构建你的卡片: ...

September 28, 2023 · 1 min · jiezi

关于javascript:50-种-ES6-模块面试被问麻了

首发于公众号 大迁世界,欢送关注。 每周一篇实用的前端文章 ️ 分享值得关注的开发工具 分享集体守业过程中的趣事快来收费体验ChatGpt plus版本的,咱们出的钱 体验地址:https://chat.waixingyun.cn能够退出网站底部技术群,一起找bug,... 如果你问开发人员:"对你来说最难的 JS 题目是什么?",你绝不会听到他说是 ES6 模块。但统计数据更能阐明问题!咱们统计了咱们电报频道中各种主题的问答谬误答案数量,发现 ES6 模块是最难的主题之一。 测验 #1: 53%的答案正确// index.mjsimport { default } from './module.mjs';console.log(default);// module.mjsexport default 'bar';首先,让咱们记住各种导入和导出语法: 如果检查表中的 Import 语法,就会发现没有与咱们的代码相匹配的语法: import { default } from ‘./module.mjs’;因为禁止应用这种语法。测验代码会呈现以下谬误: SyntaxError: Unexpected reserved word在 import { default } from ‘./module.mjs’; 行中, default 是 export 的名称,也是该作用域中的变量名称,这是被禁止的,因为 default 是一个保留字。解决办法很简略: import { default as foo } from ‘./module.mjs’;当初, default 是导出的名称, foo 是变量的名称。换句话说,如果你想在默认导出中应用命名导入语法,就必须重命名它。就是这样,非常简单! 测验 #2:35% 的正确答案// index.jsconsole.log('index.js');import { sum } from './helper.js';console.log(sum(1, 2));// helper.jsconsole.log('helper.js');export const sum = (x, y) => x + y;没有多少开发人员晓得的一个重要的细微差别是,导入是被晋升的。也就是说,在引擎解析代码时,导入就会被加载。所有依赖项都将在代码运行前加载。 ...

September 28, 2023 · 5 min · jiezi

关于javascript:JavaScript-正则表达式

JavaScript 正则表达式正则表达式速查与一些应用技巧解说RegExp 对象RegExp 对象示意正则表达式,它是对字符串执行模式匹配的弱小工具。语法/pattern/attributes创立 RegExp 对象的语法new RegExp(_pattern_, _attributes_);参数参数 _pattern_ 是一个字符串,指定了正则表达式的模式或其余正则表达式。参数 _attributes_ 是一个可选的字符串,蕴含属性"g"、"i" 和 "m",别离用于指定全局匹配、辨别大小写的匹配和多行匹配。ECMAScript 标准化之前,不反对 m 属性。如果 _pattern_ 是正则表达式,而不是字符串,则必须省略该参数。修饰符修饰符用于规定正则表达式的局部匹配规定(模式)修饰符形容i执行对大小写不敏感的匹配。g执行全局匹配(查找所有匹配而非在找到第一个匹配后进行)。m执行多行匹配。方括号方括号用于查找某个范畴内的字符表达式形容[abc]查找方括号之间的任何字符。[^abc]查找任何不在方括号之间的字符。[0-9]查找任何从 0 至 9 的数字。[a-z]查找任何从小写 a 到小写 z 的字符。[A-Z]查找任何从大写 A 到大写 Z 的字符。[A-z]查找任何从大写 A 到小写 z 的字符。[abcd]查找给定汇合内的任何字符。[^abcd]查找给定汇合外的任何字符。`(red\blue\green)`查找任何指定的选项。元字符元字符(Metacharacter)是领有非凡含意的字符元字符形容.查找单个字符,除了换行和行结束符。\w查找单词字符。\W查找非单词字符。\d查找数字。\D查找非数字字符。\s查找空白字符。\S查找非空白字符。\b匹配单词边界。\B匹配非单词边界。\0查找 NUL 字符。\n查找换行符。\f查找换页符。\r查找回车符。\t查找制表符。\v查找垂直制表符。\xxx查找以八进制数 xxx 规定的字符。\xdd查找以十六进制数 dd 规定的字符。\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。量词量词用于规定某段内容呈现的数量/次数量词形容n+匹配任何蕴含至多一个 n 的字符串。n*匹配任何蕴含零个或多个 n 的字符串。n?匹配任何蕴含零个或一个 n 的字符串。n{X}匹配蕴含 X 个 n 的序列的字符串。n{X,Y}匹配蕴含 X 至 Y 个 n 的序列的字符串。n{X,}匹配蕴含至多 X 个 n 的序列的字符串。n$匹配任何结尾为 n 的字符串。^n匹配任何结尾为 n 的字符串。hxb(?=n)匹配 hxb 其后紧接指定字符串 n 的字符串。hxb(?!n)匹配 hxb 其后没有紧接指定字符串 n 的字符串。(?<=n)hxb匹配 hxb 其前有指定字符串 n 的字符串。(?<!n)hxb匹配 hxb 其前没有指定字符串 n 的字符串。RegExp 对象属性属性形容globalRegExp 对象是否具备标记 g。ignoreCaseRegExp 对象是否具备标记 i。lastIndex一个整数,标示开始下一次匹配的字符地位。multilineRegExp 对象是否具备标记 m。source正则表达式的源文本。RegExp 对象办法办法形容compile编译正则表达式。exec检索字符串中指定的值。返回找到的值,并确定其地位。test检索字符串中指定的值。返回 true 或 false。反对正则表达式的 String 对象的办法办法形容search检索与正则表达式相匹配的值。match找到一个或多个正则表达式的匹配。replace替换与正则表达式匹配的子串。split把字符串宰割为字符串数组。其余谈谈 ?=、?!、?<=、?<! 量词后面咱们有提到此量词,那么具体说一下他们的应用吧,后面的两个个别是向后匹配,而前面两个是向前匹配。// 假如一种利用场景:咱们须要去除一个字符串中的空格,然而如果是字符串两头的空格,咱们须要保留,那么咱们能够应用此量词来实现。' 前空格 两头有三个空格保留一个 后空格 '.replace(/(^\s*)|(\s*$)|\s(?=\s)/g, ''); // '前空格 两头有三个空格保留一个 后空格'; // 其中 \s(?=\s) 示意空格前面还有空格的咱们才替换掉。// 在看一下第二个量词,示意不等于。'helloworld helloothers'.replace(/hello(?!world)/, ''); // 'helloworld others'; 找到前面不是 world 的 hello 替换掉。// 第三个与第四个恰恰相反'helloworld testworld'.replace(/(?<=test)world/, ''); // 'helloworld test'; 找到后面是 test 的 world 替换掉。'helloworld testworld'.replace(/(?<!hello)world/, ''); // 'helloworld test'; 找到后面不是 hello 的 world 替换掉。replace 的应用'123@456@789'.replace(/\d+/g, function (a, b, c) { // 没有组的时候,a 为每次匹配的内容,b 为每次匹配到的字符地位,c 为原始字符串。 console.log({ a, b, c }); // {a: '123', b: 0, c: '123@456@789'} // {a: '456', b: 4, c: '123@456@789'} // {a: '789', b: 8, c: '123@456@789'} switch (a) { case '123': return 'test1'; case '456': return 'test2'; case '789': return 'test3'; } return 'test';}); // test1@test2@test3'123@456@789'.replace(/(\d+)/g, function (a, b, c, d) { // 如果咱们写成组的时候,a 为每次匹配的内容,b 为每次组的内容,c 为每次匹配到的字符地位,最初 d 为原始字符串。 console.log({ a, b, c, d }); // {a: '123', b: '123', c: 0, d: '123@456@789'} // {a: '456', b: '456', c: 4, d: '123@456@789'} // {a: '789', b: '789', c: 8, d: '123@456@789'} switch (a) { case '123': return 'test1'; case '456': return 'test2'; case '789': return 'test3'; } return 'test';}); // test1@test2@test3/* ------------------------------ 分割线 ------------------------------ */'123456@qq.com'.replace(/^([\dA-Za-z]\w*)@(qq\.com)$/, function (a, b, c, d, e) { // 当有组的时候,a 为匹配字符串,b 为第一个组的内容,c 为第二个组的内容,以此类推。 // 最初的两个别离为匹配到字符的地位、原始字符串(此处为 d e)。 console.log({ a, b, c, d, e }); // {a: '123456@qq.com', b: '123456', c: 'qq.com', d: 0, e: '123456@qq.com'} return `qq:${b};domain:${c}`;}); // qq:123456;domain:qq.com'123456@qq.com'.replace(/^(?<qq>[\dA-Za-z]\w*)@(?<domain>qq\.com)$/, function (a, b, c, d, e, f) { // 如果咱们给组命名了,那么 a 为匹配字符串,b 为第一个组的内容,c 为第二个组的内容,以此类推。 // 最初的三个别离为匹配到字符的地位、原始字符串(此处为 d e)、以组名为 key 的对象(此处为 f)。 console.log({ a, b, c, d, e, f }); // {a: '123456@qq.com', b: '123456', c: 'qq.com', d: 0, e: '123456@qq.com', f: {qq: '123456', domain: 'qq.com'}} return `qq:${b};domain:${c}`;}); // qq:123456;domain:qq.com多说一点组的应用当咱们小括号时,每个小括号外面的内容标识一个组,咱们能够对组进行命名,甚至援用。// 假如咱们匹配一个邮箱号,咱们在正则中增加两组小括号。'123456@qq.com'.match(/^([\dA-Za-z]\w*)@(qq\.com)$/);// 那么对应 组1 的内容则是咱们匹配的 qq 局部,组2 则是域名局部。console.log(RegExp.$1); // 123456; 为啥此处组是从 1 开始而不是从 0 呢?因为若从 0 开始,\0 与 NUL 示意符有抵触,且 0 其实就代表字符串自身,没有意义。console.log(RegExp.$2); // qq.com// 咱们甚至能够这样做,进行组的援用或替换。'XiongBiao He'.replace(/(\w+) (\w+)/, '$2$1'); // HeXiongBiao/(helloworld) \1/.test('helloworld helloworld'); // true // \1 代表 组1 的内容,所以以下匹配是谬误的。/(helloworld) \1/.test('helloworld helloothers'); // false// 如果咱们无可奈何写了好几个组,然而只需其中一个,那么咱们能够应用 ?: 来示意对该组不记录。/^(?:red|green|blue) (#[\w\d]{3,6})$/.test('red #F00'); // trueconsole.log(RegExp.$1); // #F00,原本此处应该是 red,然而因为咱们应用了 ?: 操作符来回绝记录,所以此处变成了 #F00。// 咱们还能够对组进行命名,实用于咱们组特地多且难以分辨计算的状况,也不便了解。'123456@qq.com'.match(/^(?<qq>[\dA-Za-z]\w*)@(?<domain>qq\.com)$/);// 当然组名也能够进行援用,然而须要应用 \k 符号。/(?<groupName>helloworld) \k<groupName>/.test('helloworld helloworld'); // true ...

September 28, 2023 · 3 min · jiezi

关于javascript:JavaScript-Promise

JavaScript Promise简略介绍一下 Promise 以及他的应用、异样解决、同步解决等等...介绍 咱们都晓得 JavaScript 是一种同步编程语言,上一行出错就会影响下一行的执行,然而咱们须要数据的时候总不能每次都等上一行执行实现,这时就能够应用回调函数让它像异步编程语言一样工作。 像 NodeJS 就是采纳异步回调的形式来解决须要期待的事件,使得代码会持续往下执行不必在某个中央期待着。然而也有一个不好的中央,当咱们有很多回调的时候,比方这个回调执行完须要去执行下个回调,而后接着再执行下个回调,这样就会造成层层嵌套,代码不清晰,很容易进入“回调监狱”。。。 所以 ES6 新出的 Promise 对象以及 ES7 的 async、await 都能够解决这个问题。 Promise 是用来解决异步操作的,能够让咱们写异步调用的时候写起来更加优雅,更加好看便于浏览。Promise 为承诺的意思,意思是应用 Promise 之后他必定会给咱们回答,无论胜利或者失败都会给咱们一个回答,所以咱们就不必放心他跑了哈哈。 Promise 有三种状态:pending(未决定),resolved(实现fulfilled),rejected(失败)。只有异步返回时才能够扭转其状态,因而咱们收到的 Promise 过程状态个别只有两种:pending->fulfilled 或者 pending->rejected。 应用简略应用间接上代码function promiseTest(boolType = true) { return new Promise(function (resolve, reject) { // do something 而后返回一个 Promise 对象 if (boolType) { resolve('胜利'); } else { reject('失败'); } });}// Promise 的 then 承受两个参数// 第一个是胜利的 resolved 的胜利回调// 另一个是失败的 rejected 的失败回调【可选】。// 并且 then 也能够返回 Promise 对象,这样就能够实现链式调用。// 栗子如下promiseTest(true).then((value) => console.log(`${value}后的解决A`));promiseTest(false).then( (value) => console.log(`${value}后的解决B`), (value) => console.log(`${value}后的解决B`));promiseTest(false).catch((value) => console.log(`${value}后的解决C`));// 链式调用,这种写法是不是比咱们嵌套回调天堂柔美多啦~promiseTest(false) .catch((value) => promiseTest(true)) .then(() => console.log('第一次调用失败后尝试第二次胜利了!'));// catch 不仅能够捕捉失败和 return Promise,也能够捕捉异样。promiseTest(true) .then((value) => value1) .catch((e) => console.log(e));/* ---打印后果--- */胜利后的解决A失败后的解决B失败后的解决C第一次调用失败后尝试第二次胜利了!ReferenceError: value1 is not defined at .../* ---打印后果--- */另外当咱们须要在办法中期待 Promise 返回时,须要给办法增加 async 润饰,并应用 await 期待。async function asyncFunc() { // 只有增加了 async 关键字,该办法的返回值就是一个 Promise。 let result = await new Promise((resolve, reject) => { setTimeout(() => resolve(123), 2000); }); return result;}asyncFunc(); // Promise {<pending>}asyncFunc().then((value) => console.log(value)); // 123await asyncFunc(); // 123Api 办法Promise.resolve将现有对象转为 Promise 对象 resolved,Promise.resolve('test') 相当于 new Promise((resolve) => resolve('test'));Promise.reject将现有对象转为 Promise 对象 rejected,Promise.rejected('test') 相当于 new Promise((rejected) => rejected('test'));Promise.prototype.thenthen() 办法返回一个 Promise,它最多须要有两个参数:Promise 的胜利和失败状况的回调函数。// promiseTest.then(onFulfilled[, onRejected]);promiseTest.then(value => { // fulfillment}, reason => { // rejection});onFulfilled 可选 ...

September 28, 2023 · 6 min · jiezi

关于javascript:JavaScript-Function

JavaScript Function聊一下函数...函数申明形式具名函数 function 前面有函数名字的,不是间接跟括号的的就是具名函数。如果把一个具名函数赋值给一个变量,那么这个具名函数的作用域就不是 window 了(严格模式下 this 指向 undefined),且函数调用的名字也为变量名,对象中定义同理,不论有没有函数名称,最终调用的函数名均为此变量或属性名称。 具名函数的 this 指向是当咱们调用函数的时候确定的,调用形式的不同决定了 this 不同的指向,个别指向咱们的调用者。 let fun = function fun1() { console.log('function1');};console.log(fun.name); // fun1console.log(fun1.name); // Uncaught ReferenceError: fun1 is not definedfun(); // function1fun1(); // Uncaught ReferenceError: fun1 is not definedlet obj = { fun: function test() { console.log(this.name); }, hello: function () { console.log('hello'); }, name: 'test'};console.log(obj.fun.name); // testconsole.log(obj.hello.name); // helloobj.fun(); // testobj.hello(); // helloobj.fun.call({ name: 'hxb' }); // hxbtest(); // Uncaught ReferenceError: test is not defined箭头函数箭头函数是 ES6 知识点,具备以下几个特点。如果只有一个参数,能够省略小括号。如果有至多有两个参数,必须加小括号。如果函数体只有一句话能够省略花括号,并且这一句作为返回值 return。如果函数体至多有两句必须加上花括号。箭头函数没有本人的 this,它的 this 继承于运行时的外层代码库的第一个 this,由上下文决定,所以也不能用call、apply、bind 去扭转 this 的指向。箭头函数不能应用 arguments、super 和 new.target,也不能用作构造函数。箭头函数没有 prototype 属性。let fun = e => e + 1;console.log(fun(1)); // 2let fun1 = (i, j) => i + j;console.log(fun1(1, 2)); // 3let fun2 = (i, j) => { i += 1; j += 2; return i + j;};console.log(fun2(1, 2)); // 6匿名函数function 前面间接跟括号,两头没有函数名的就是匿名函数。因为匿名函数的执行环境具备全局性,所以匿名函数的 this 指向个别都是 window。let fun1 = function () { console.log('test');};function hasNameFun() { console.log('test');}let fun2 = fun1;let fun3 = hasNameFun;fun1(); // testfun2(); // testhasNameFun(); // testfun3(); // testconsole.log(fun1.name); // fun1console.log(fun2.name); // fun1,fun1 和 fun2 指向的是同一个 function。console.log(hasNameFun.name); // fun1console.log(fun3.name); // fun1,fun1 和 fun2 指向的是同一个 function。var test = 'window';function testFun() { let test = 'has_name'; console.log('具名函数', this.test, test); (function () { let test = 'no_name'; console.log('匿名函数', this.test, test); })();}testFun.call({ test: '扭转指向的test' });// 具名函数 扭转指向的test has_name// 匿名函数 window no_namethis、arguments、new.target、caller函数调用在 ES5 中,函数有四种调用形式。fun(arg1, arg2); // 等价于 fun.call(undefined, arg1, arg2); || fun.apply(context, [arg1, arg2]);obj.fun(arg1, arg2);fun.call(context, arg1, arg2);fun.apply(context, [arg1, arg2]);// 第三和第四种才是失常的 js 函数调用形式,其余两种就是语法糖。如果你传的 context 是 null 或者 undefined,那么 window 对象就是默认的 context (严格模式下默认 context 是 undefined)。thisthis 就是一个指针,指向调用函数的对象,并不是指向本身。各个函数的个别指向后面也都有介绍,上面咱们来看看一些小栗子。let obj = { fun: function () { console.log(this); }};let fun1 = obj.fun;obj.fun(); // 打印出的 this 是 objfun1(); // 打印出的 this 是 window在执行函数的时候,this是暗藏的一个参数,且必须是一个对象,如果不是,js 是主动把它转为对象。function fun() { console.log(this); console.log(arguments);}fun.call(1, 2, 3);// Number {1}// Arguments(2) [2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]this 的绑定有以下几种形式默认绑定隐式绑定显式绑定(硬绑定)new 绑定箭头函数的 thisvar name = 'World';var obj = { name: 'Obj', sayHi: sayHi};function sayHi() { console.log('Hello', this.name);}// 默认绑定sayHi(); // Hello World// 隐式绑定obj.sayHi(); // Hello Obj// 显式绑定var hi = obj.sayHi;hi(); // Hello Worldhi.call({ name: 'DoubleAm' }); // Hello DoubleAm// Ps: 如果咱们将 null 或者是 undefined 作为 this 的绑定对象传入 call、apply 或者是 bind,这些值在调用时会被疏忽,理论利用的是默认绑定规定。(严格模式下则不会疏忽)hi.call(null); // Hello World// new 绑定function sayHi(name) { this.name = name;}var newHi = new sayHi('newName');console.log('Hello', newHi.name); // Hello newName// 箭头函数,咱们能够看作为找外层一般函数的第一个 this。var obj = { hi: function () { console.log(this); return () => { console.log(this); }; }, sayHi: function () { return function () { console.log(this); return () => { console.log(this); }; }; }, say: () => { console.log(this); }};let hi = obj.hi(); // 输入 obj 对象hi(); // 输入 obj 对象let sayHi = obj.sayHi();let fun1 = sayHi(); //输入 windowfun1(); // 输入 windowobj.say(); // 输入 window参考 this 绑定arguments arguments 是传入的参数,它是伪数组它相似于 Array,但除了 length 属性和索引元素之外没有任何 Array 属性。 call 和 apply、bind 外面除了第一个参数之外的都是 arguments,如果 arguments 的个数少倡议应用call,参数少时性能更高,应用 apply 也能够,如果不确定就应用 apply。 ...

September 28, 2023 · 7 min · jiezi

关于javascript:写几个获取搜索引擎提示关键词列表的方法方便以后使用

什么是关键词#当你在搜索引擎中输出字符的时候,会有一个下拉框显示一些和关键词列表,用来提醒你想搜啥。 间接上代码 /** * 获取各大搜索引擎的关键字列表 *//** 获取随机小写字母 */function getRandomLetters(number) { const alphabet = 'abcdefghijklmnopqrstuvwxyz'; let value = ''; for (let i = 0; i < number; i++) { value = value + alphabet[Math.floor(Math.random() * alphabet.length)]; } return value;}/** 获取百度关键词列表 */let dataMap = {}; //缓存列表function getBaiDuSug(searchValue){ return new Promise((r)=>{ if(dataMap[searchValue]){ r(dataMap[searchValue]); return; } /** 创立一个惟一标识用于承受数据,避免数据对应不齐 */ let sign = `sug_sign_${getRandomLetters(3)}_${new Date().getTime()}`; window[sign] = (data)=>{ setTimeout(()=>{sug.remove();},1000); //删除元素 let list = data.s || []; dataMap[searchValue] = list; r(list); } let sug = document.createElement('script'); sug.src = `https://suggestion.baidu.com/su?wd=${encodeURIComponent(searchValue || '')}&cb=window.${sign}`; document.getElementsByTagName('body')[0].appendChild(sug); });}/** 获取bing关键词列表 */let dataMap_1 = {}; //缓存列表function getBingSug(searchValue){ return new Promise((r)=>{ if(dataMap_1[searchValue]){ r(dataMap_1[searchValue]); return; } /** 创立一个惟一标识用于承受数据,避免数据对应不齐 */ let sign = `sug_sign_${getRandomLetters(3)}_${new Date().getTime()}`; window[sign] = (data)=>{ setTimeout(()=>{sug.remove();},1000); //删除元素 let list = []; let list_1 = data.AS.Results || []; list_1.forEach(item=>{ list.push(...item.Suggests.map(item_=>{ return item_.Txt; })); }); dataMap_1[searchValue] = list; r(list); } let sug = document.createElement('script'); sug.src = `https://api.bing.com/qsonhs.aspx?type=cb&q=${encodeURIComponent(searchValue || '')}&cb=window.${sign}`; document.getElementsByTagName('body')[0].appendChild(sug); });}/** 获取360关键词列表 */let dataMap_2 = {}; //缓存列表function get360Sug(searchValue){ return new Promise((r)=>{ if(dataMap_2[searchValue]){ r(dataMap_2[searchValue]); return; } /** 创立一个惟一标识用于承受数据,避免数据对应不齐 */ let sign = `sug_sign_${getRandomLetters(3)}_${new Date().getTime()}`; window[sign] = (data)=>{ setTimeout(()=>{sug.remove();},1000); //删除元素 let list = []; let list_1 = data.result || []; list_1.forEach(item=>{ list.push(item.word || ''); }); dataMap_2[searchValue] = list; r(list); } let sug = document.createElement('script'); sug.src = `https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8&format=json&word=${encodeURIComponent(searchValue || '')}&callback=window.${sign}`; document.getElementsByTagName('body')[0].appendChild(sug); });}/** 获取淘宝关键词列表 */let dataMap_3 = {}; //缓存列表function getTaoBaoSug(searchValue){ return new Promise((r)=>{ if(dataMap_3[searchValue]){ r(dataMap_3[searchValue]); return; } /** 创立一个惟一标识用于承受数据,避免数据对应不齐 */ let sign = `sug_sign_${getRandomLetters(3)}_${new Date().getTime()}`; window[sign] = (data)=>{ setTimeout(()=>{sug.remove();},1000); //删除元素 let list = []; let list_1 = data.result || []; list_1.forEach(item=>{ list.push(item[0] || ''); }); dataMap_3[searchValue] = list; r(list); } let sug = document.createElement('script'); sug.src = `https://suggest.taobao.com/sug?code=utf-8&q=${encodeURIComponent(searchValue || '')}&callback=window.${sign}`; document.getElementsByTagName('body')[0].appendChild(sug); });}不便当前间接复制应用,应用例子 ...

September 27, 2023 · 2 min · jiezi

关于javascript:canvas自动裁剪图片空白区域

<!DOCTYPE html><html><head> <title>canvas主动裁剪图片空白区域</title></head><body> <input type="file" id="imageInput" accept="image/*"><canvas id="canvas" style="display:none;"></canvas><div style="margin: 20px 0"> <img id="outputImage" src="" alt="剪切后的图片"></div><script> const imageInput = document.getElementById('imageInput'); const canvas = document.getElementById('canvas'); const outputImage = document.getElementById('outputImage'); const ctx = canvas.getContext('2d'); imageInput.addEventListener('change', function (e) { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = function (event) { const img = new Image(); img.src = event.target.result; img.onload = function () { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); // 获取图像的像素数据 const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; // 找到非红色像素的边界 let minX = canvas.width; let minY = canvas.height; let maxX = -1; let maxY = -1; for (let y = 0; y < canvas.height; y++) { for (let x = 0; x < canvas.width; x++) { const index = (y * canvas.width + x) * 4; // 每个像素有4个通道(RGBA) const red = data[index]; const green = data[index + 1]; const blue = data[index + 2]; // 判断像素是否为红色 (255, 255, 255) if (red === 255 && green === 255 && blue === 255) { // 此像素是红色,跳过 } else { // 非红色像素 minX = Math.min(minX, x); minY = Math.min(minY, y); maxX = Math.max(maxX, x); maxY = Math.max(maxY, y); } } } // 计算剪切后的图像宽度和高度 const croppedWidth = maxX - minX + 1; const croppedHeight = maxY - minY + 1; // 创立一个新的Canvas,将非红色区域绘制到新Canvas上 const newCanvas = document.createElement('canvas'); const newCtx = newCanvas.getContext('2d'); newCanvas.width = croppedWidth; newCanvas.height = croppedHeight; newCtx.drawImage(canvas, minX, minY, croppedWidth, croppedHeight, 0, 0, croppedWidth, croppedHeight); // 将解决后的图像显示在页面上的<img>元素中 outputImage.src = newCanvas.toDataURL(); }; }; reader.readAsDataURL(file); });</script></body></html> ...

September 27, 2023 · 2 min · jiezi

关于javascript:JS中的异步编程与Promise

一、JavaScript的异步编步机制在理解JavaScript的异步机制之前,咱们首先须要了解JavaScript是一种单线程语言。单线程就意味着所有的工作须要依照程序一次执行,如果前一个工作没有实现,后一个工作就无奈开始。这个个性在执行大量或耗时工作时可能会导致阻塞或者界面卡死,这显然是不可取的。 为了解决这个问题,JavaScript引入了异步编程的机制。简略地说,异步就是你当初收回了一个“命令”,然而并不期待这个“命令”实现,而是继续执行下一个“命令”。只有在“听到”之前的那个“命令”实现了的音讯时,才会回过头来解决这个“命令”的后果。这就是所谓的异步编程。 二、事件循环(Event Loop)和工作队列(Task Queue)这种异步的机制是如何实现的呢?关键在于事件循环(Event Loop)和工作队列(Task Queue)。 事件循环是 JavaScript 外部的一个处理过程,零碎会在此处一直地循环期待,查看工作队列中是否有工作,如果有,就解决它。 而工作队列,就是一个存储待处理工作的队列,当咱们应用 setTimeout、setInterval、ajax等API时,实际上是向工作队列中增加了一个工作。 当主线程闲暇时(也就是同步工作都执行结束),便会去看工作队列里有没有工作,如果有,便将其取出执行;没有的话,则持续期待。 这个模型能够简略地用上面的代码示意: while (true) { let task = taskQueue.pop(); execute(task);}三、宏工作和微工作在工作队列中,工作被分为两类:宏工作(MacroTask)和微工作(MicroTask)。两者的区别在于,宏工作在下一轮事件循环开始时执行,微工作在本轮事件循环完结时执行。这意味着微工作的优先级高于宏工作。 常见的宏工作有:script全文(能够看作一种宏工作)、setTimeout、setInterval、setImmediate(Node.js 环境)、I/O、UI渲染。 常见的微工作有:Promise、process.nextTick(Node.js环境)、MutationObserver(html5新个性)。 事件循环的程序,决定了 JavaScript 代码的执行程序。过程如下: 执行同步代码,这属于宏工作执行栈为空,查问是否有微工作须要执行执行所有微工作必要的话渲染UI而后开始下一轮 Event loop,执行宏工作中的异步代码 代码示例如下: console.log('script start'); // 宏工作setTimeout(function() { console.log('setTimeout'); // 宏工作}, 0);Promise.resolve().then(function() { console.log('promise1'); // 微工作}).then(function() { console.log('promise2'); // 微工作});console.log('script end'); // 宏工作输入程序为:script start -> script end -> promise1 -> promise2 -> setTimeout。这是因为JavaScript执行机制决定了微工作比宏工作优先执行。 四、requestAnimationFramerequestAnimationFrame是一个优化动画成果的函数,也有它在事件循环中的地位。 requestAnimationFrame 的调用是有频率限度的,在大多数浏览器里,这个频率是60Hz,也就是说,每一次刷新距离为1000/60≈16.7ms。requestAnimationFrame 的执行机会是在下一次重绘之前,而不是立刻执行。 requestAnimationFrame 的长处是由零碎来决定回调函数的执行机会。如果零碎忙到肯定水平,可能会两次“刷新”之间屡次执行回调函数,这时就能够省略掉一些回调函数的执行。这种机制能够无效节俭 CPU 开销,进步零碎的性能。 ...

September 27, 2023 · 1 min · jiezi

关于javascript:使用vite插件进行低代码平台自定义开发手机版自定义范例

前言Youtube上的前端网红「Theo」在React文档仓库发动了一个Pull request,号召React文档不要再默认举荐CRA(create react app),而是应该将Vite作为构建利用的首选。vite的影响力曾经从vue蔓延到了react,可见在前端工程化开发中,它曾经越来越风行,是时候该从webpack切换到vite了。 为什么应用viteVite 采纳了基于ES Module的开发服务器。进行本地开发时,应用HMR,速度快了很多。相较于webpack,有很多劣势: 更快的热更新机制更快的打包效率更简略的配置在做kintone开发时,我也很想尝试应用vite进行开发,构建。所以也查问了一些相干文章。然而只看到了一些介绍如何应用vite(rollup)打包kintone自定义js的文章。然而却没有看到如何利用vite进行kintone开发的文章。所以我想到开发一个vite插件来解决这个问题。 vite-plugin-kintone-devnpm链接:https://www.npmjs.com/package/vite-plugin-kintone-dev 这个插件实现的性能: 反对应用vite创立kintone自定义js,hmr让你的开发快如闪电反对react,vue等不同的前端框架构建时反对打包并主动上传kintone实际:kintone手机版自定义这次咱们联合vite插件,以kintone手机版的自定义开发为范例,给大家做演示。技术栈:vite4 + vue3 + vant4 1. 应用vite脚手架初始化vue我的项目首先通过vite脚手架工具。创立一个vue我的项目npm create vue@latest 设置我的项目名: kintone-mobile-custom(这是我的预设)抉择vue,TypeScript。而后依据需要进行抉择。并进行初始化装置.cd kintone-mobile-customnpm install 2. 装置kintone开发的vite插件npm install -D vite-plugin-kintone-dev 第一次启动时,会主动查看你的env文件的设置模版。如果没有配置,会启动命令行交互,让你输出配置信息。同时自动更新你的env文件。如果你的env文件设置有误,能够自行去批改。 (serve模式下为".env.development"文件, build模式下为".env.production"文件) 插件的参数阐明 { outputName: "mobile", //最初打包的名字 upload: true}配置vitevite.config.ts import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import kintoneDev from "vite-plugin-kintone-dev";// https://vitejs.dev/config/export default defineConfig({ plugins: [ vue(), kintoneDev({ outputName: "mobile", upload: true }), ],});3. 装置其余的一些库图片库接下来咱们再配置一个图片库。十分罕用的一个插件图库插件Unplugin Icons npm install -D unplugin-icons unplugin-vue-components它的具体设置,请参考它的官网。增加所有icon资源,不必放心,真正打包时,它是按需加载的。npm i -D @iconify/json ...

September 27, 2023 · 2 min · jiezi

关于javascript:小程序优化的思考总结

背景在开发小程序的时候,用户体验是一个重要的关注点。蹩脚的用户体验会让用户应用小程序的志愿大大降低,甚至不再应用。优化用户体验是一门简单的学识,波及到产品交互设计、程序性能等等各方面的工作,很难欲速不达,只能在各个场景下,对于不同的关注点,别离去采取对应措施进行优化,并且还要辅以对应的设计规范、防劣化措施等等,使得体验可能始终维持在设立的基线之上。明天想要分享的体验优化以我的项目中的图片为切入点,针对图片加载场景,优化用户在应用小程序时浏览图片相干的体验。 如何优化图片浏览体验的次要优化指标有两点: 让图片加载更快,可能疾速为用户提供内容,晋升加速度,进而进步转化率;在加载过程中给用户明确的反馈和预期,如加载时的动画、加载失败的提醒; 给用户带来焦虑的体验 达到以上指标,咱们能够从图片资源自身以及图片加载过程这两个角度去思考优化措施。 图片资源优化图片资源优化的目标是减小传输内容的大小,从而缩小图片下载耗时,进而放慢图片展现。扭转图片资源的体积有三大办法,次要波及压缩品质、图片资源的格局、图片分辨率。我应用了火山引擎的 veImageX 来解决图片,通过肯定配置之后,只须要批改 URL 里的参数,就能够动静批改图片的格局、品质等等参数,很不便,搜索引擎,搜寻关键词“火山引擎 ImageX”,能够找到他们的体验版本,不必注册就能用。 适合的图片品质咱们给用户提供的图片品质,应该与各种场景挂钩。比方,当咱们检测到用户处于弱网环境时、亦或者以后图片场景(比方列表预览)并不需要高质量品质图片时,能够给用户提供小体积而品质稍差的图片,升高图片传输的老本;当用户处于wifi环境、或者是须要预览高清大图时,提供高质量的图片以强化用户的看图体验。具体的图片加载品质应该有着各种各样的场景化策略。veImageX 反对在 URL 中传入品质参数值来管制下发的图片品质,转换了一张 lena 的 jpeg 格局图片来比照下成果。 压缩品质2550 758595100图片体积35KB49KB77KB116KB250KB583KB这几张图片别离应用了 25、50、75、85、95、100 的品质参数,体积也是随着品质参数的增大而收缩。咱们能够看到 25、50、75 这几张图片的品质差别还是相当显著的,高质量图片中的色块和噪点一样的货色显著缩小了,而品质 75 以上的几张图片,说实话肉眼看区别不太大,然而体积却收缩了不少。所以个别状况下应该抉择 80 左右的品质参数就差不多了。 更优的图片格式我放了张常见的 720*862 的图片转换了一下格局,下载下来比照文件大小。能够看到,古代图片格式(webp、avif、heic)的图片体积显著比 png、jpeg 这些格局要小不少。而且图片品质上,肉眼根本看不出差别。 压缩品质75 png(有损)jpegwebpavifheic 图片信息体积219KB102KB69KB32KB26KB与png相比--53%-68%-85%-88%解决的图片,分辨率不变的前提下最多比 png 格局图片缩小了 88% 的大小(heic 格局),并且肉眼看不出品质的显著差别。如果可能用上这些高压缩率的图片格式,必定可能节俭图片下载的网络耗时。 编解码性能除了关注图片的体积之外也依然须要关注不同图片格式在终端的性能,这里编码和解码都用开发机进行测试了,咱们找了几千张图片在服务端的测试后果,测试图片以分辨率 400x300、1200x700 为界,在三个区间内取雷同图片样本量。测试环境:开发机,8C16G,Intel(R) Xeon(R) Platinum 8260 CPU @ 2.40GHz 图片格式品质参数压缩比例解码耗时ms编码耗时msPSNRjpeg3030%11.015.138 5040%12.015.040 7560%12.016.246 90100%13.516.751webp3020%16.9170.139 5028%19.3179.241 7538%21.5190.242 9076%29.4221.947HEIC/BVC13010%58.913.938 5010%60.813.938 7522%70.913.842 9043%78.214.345AVIF307%60.61224.936 5018%65.41413.540 7524%67.31497.842 9044%76.41382.346所以从表格上来看,在解码性能上抉择:jpeg<webp<HEIC<AVIF从编码性能上抉择,在编码性能上抉择:HEIC>>jpeg >webp>AVIF,(图片加载应用云服务的状况下每次都是同步解决的,这个指标十分影响用户首次加载的耗时);最初在决策抉择上,咱们优选体积小、解码耗时和编码耗时尽可能短的格局。 自适应的图片分辨率 一张分辨率为 3648*2736 的壁纸,体积为 8M ...

September 26, 2023 · 2 min · jiezi

关于javascript:js-数组方法

js 中会扭转原数组的办法:1.push(): 将一个或多个元素增加到数组的开端,并返回新的长度。2.pop(): 删除数组的最初一个元素,并返回删除的元素。3.shift(): 删除数组的第一个元素,并返回删除的元素。4.unshift(): 将一个或多个元素增加到数组的结尾,并返回新的长度。5.splice(): 从数组中增加或删除元素。能够用于删除、替换或插入元素。6.fill(): 用指定的值填充数组中的所有元素。7.sort(): 对数组进行排序。8.reverse(): 颠倒数组中元素的程序。9.copyWithin(): 将数组的一部分元素复制到同一数组中的另一个地位。 js 中不会扭转原数组的办法:1.map(): 创立一个新数组,其后果是调用提供的函数对每个元素进行解决。2.filter(): 创立一个新数组,其中蕴含通过所提供函数实现的测试的所有元素。3.slice(): 返回一个从原始数组中指定开始和完结地位抉择的新数组。4.concat(): 用于合并两个或多个数组,并返回一个新数组。5.reduce(): 对数组中的每个元素执行一个提供的累加器函数,将其后果汇总为单个值。6.join() 办法用于把数组中的所有元素转换一个字符串,元素是通过指定的分隔符进行分隔的。7.forEach() 办法用于调用数组的每个元素,并将元素传递给回调函数。8.findIndex 接管一个测试函数,也能够叫做条件函数,最终返回满足该测试函数的元素的索引地位,如果没有找到符合条件的元素,则返回-1。如果满足条件的有多个,那么只会返回第一个满足条件的元素索引。9.find() 办法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。10.some() 办法返回 true 或 false,示意数组中是否至多存在一个元素满足提供的测试函数。该办法承受一个回调函数作为参数,该回调函数在数组的每个元素上执行,并且只有其中一个元素的测试函数返回 true,some() 办法就会立刻返回 true。11.every() 办法也返回 true 或 false,但它要求数组中的所有元素都必须满足提供的测试函数。如果有任何一个元素的测试函数返回 false,则 every() 办法会立刻返回 false。 es2023 提供 对数组的纯函数办法:1、排序,sort 办法会对扭转原数组。toSorted 会返回一个新数组并且不会扭转原数组。2、数组反序,reverse 办法会扭转原数组。toReversed 会返回一个新数组并且不会扭转原数组。3、截取数组,splice 办法会扭转原数组。toSpliced 会返回新数组并且不扭转原数组。4、更改数组的某一项扭转原数组 arr = [1,2,3]arr[0] = '哈哈'with 办法返回新数组并且不扭转原数组 arr = [1,2,3]arr.with(0,'h嘿嘿')

September 25, 2023 · 1 min · jiezi

关于javascript:甘特图的这些新玩法你都知道吗

摘要:本文由葡萄城技术团队于思否公布。转载请注明出处:葡萄城官网,葡萄城为开发者提供业余的开发工具、解决方案和服务,赋能开发者。前言 甘特图是项目管理、生产排程、节点治理中十分常见的一个性能。那么,有没有一种办法可能帮忙将甘特图引入到零碎中,让数据的进度、排程数据的展现更加直观,让治理更加高效。 本葡萄明天为大家带来一个新的插件——甘特图插件。该插件是联合 SpreadJS 自身弱小电子表格能力提供的一种全新的可视化展现计划,可能无效地将生产打算、估算排期中的日程治理信息展现进去,显示要害门路上要害节点的停顿或状态。其数据来自与集算表同源的数据管理器(DataManager),通过绑定 -\> 视图的形式,将层级化的工作数据通过甘特图插件进行展现。 (通过甘特图插件展现层级化的数据) 1. 缩放和工夫刻度滚动 (通过甘特图插件实现缩放及刻度滚动) JavaScript代码: var myTable;var ganttSheet;var adjustTierUnit = true;window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); initSpread(spread); initSplitView(spread);};function initSpread(spread) { spread.suspendPaint(); initDataSource(spread); initGanttSheet(spread); spread.resumePaint();}function initDataSource(spread) { var tableName = "Gantt_Id"; var baseApiUrl = getBaseApiUrl(); var apiUrl = baseApiUrl + "/" + tableName; var dataManager = spread.dataManager(); myTable = dataManager.addTable("myTable", { batch: true, remote: { read: { url: apiUrl } }, schema: { hierarchy: { type: "Parent", column: "parentId" }, columns: { id: { isPrimaryKey: true }, taskNumber: { dataType: "rowOrder" } } } });}function initGanttSheet(spread) { ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet); var view = myTable.addView("ganttView", [ { value: "taskNumber", caption: "NO.", width: 60 }, { value: "name", caption: "Task Name", width: 200 }, { value: "duration", caption: "Duration", width: 90 }, { value: "predecessors", caption: "Predecessors", width: 120 } ]); view.fetch().then(function() { ganttSheet.bindGanttView(view); }).then(function() { ganttSheet.project.timescale.zoomOut(); }); initSidePanel(ganttSheet);}2.任务栏和网格线的款式调整 ...

September 25, 2023 · 11 min · jiezi

关于javascript:前端持久化缓存优化

缓存是晋升 web 应用程序无效办法之一,尤其是用户受限于网速的状况下。晋升零碎的响应能力,升高网络的耗费。当然,内容越靠近于用户,则缓存的速度就会越快,缓存的有效性则会越高。 之前集体写过 前端 api 申请缓存计划。介绍的了内存中的缓存以及过期逻辑。后续也写过 手写一个前端存储工具库,该工具利用了适配器解决了不同的存储介质(内存,IndexedDB, localStorage 等)。 不过,在某些特定场景下缓存还须要优化,例如:用户须要在登录或者填写表单时须要通过某些接口获取必要数据,而这些接口是由第三方平台提供的。这些接口可能会呈现谬误或超时的状况。如果以后数据有很强实时性,开发者就必须重试或者分割第三方平台来解决对应的谬误。如果数据的实时性不强,以后就能够应用本地缓存。 一般来说,当获取时效性缓存时候,咱们会查看并删除以后数据。代码简写如下所示: // 缓存对应的的模块以及性能const EXTRA_INFO_CACHE_KEY = 'xxx.xxx.xxx';// 缓存时长为 7 天const CACHE_TIME = 7 * 24 * 60 * 60 * 1000;const getCachedExtraInfo = () => { const cacheStr = localStorage.getItem(`${EXTRA_INFO_CACHE_KEY}.${userId}`); if (!cacheStr) { return null; } let cache = null; try { cache = JSON.parse(cacheStr); } catch () { return null; } if (!cache) { return null; } // 缓存过期了,间接返回 null if ((cache.expiredTime ?? 0) < new Date().getTime()) { return null; } return cache.data;}const getExtraInfo = () => { const cacheData = getCachedExtraInfo(); if (cacheData) { return Promise.resolve(cacheData); } return getExtraInfoApi().then(res => { localStorage.setItem(`${EXTRA_INFO_CACHE_KEY}.${userId}`, { data: res, expiredTime: (new Data()).getTime() + CACHE_TIME, }); return res; });}如果这时候接口呈现了拜访谬误问题,很多数据到期的用户就无奈失常应用性能了,这时候增加重试性能可能会解决某些谬误。这时候咱们先不思考重试的逻辑。 ...

September 24, 2023 · 2 min · jiezi

关于javascript:2023-年前端-UI-组件库概述百花齐放

UI组件库提供了各种常见的 UI 元素,比方按钮、输入框、菜单等,只须要调用相应的组件并依照需要进行配置,就可能疾速构建出一个功能完善的 UI。 尽管市面上有许多不同的UI组件库可供选择,但在2023年底也并没有呈现一两个明确的解决方案可能实用于所有状况。因为不同的前端框架(例如React、Angular、Vue等)都有本人的劣势和实用场景,所以对应的UI组件库也会有所不同。 本文就来简要概述以后前端生态系统的款式解决方案,并介绍一些常见和风行的UI库。 UI 库概述CSS 框架和库历史过来,网页设计师须要手写 CSS 款式,这是一个波折的过程。随后,呈现了一些CSS框架,如Blueprint、960 Grid System、YUI Grids等,它们引入了响应式网格和简洁的UI元素,扭转了网页设计的形式。 而后,像 Twitter Bootstrap、Foundation 和 Bulma 这样的巨头呈现了。它们提供了疾速开发和统一的款式,但也导致了一些问题,即网站开始感觉过于类似和对立。 为了解决这个问题,社区引入了一些方法论,例如BEM,用于注入独特性和模块化格调,以使网页设计更加个性化和灵便。 总而言之,CSS框架和库从最后只满足布局需要,逐步倒退为提供全面的UI工具包。与此同时,涌现出更多的办法和技术,以实现更定制化和模块化的款式。 JavaScript框架扭转了规定随着Angular、React和Vue等JavaScript框架的呈现,开发人员须要一种更细粒度的办法来应答这些新的组件模型。传统的CSS中最重要的个性之一是层叠,但对于这些新的框架来说,层叠机制却带来了一些问题。 为了解决这个问题,呈现了一种新的解决方案,即CSS in JS。在React生态系统中,像Styled Components和Emotion这样的库变得十分风行,它们容许开发人员将款式与组件作用域相关联,从而解决了层叠问题。 原子化设计原子化设计是一种组件化设计办法,由 Brad Frost 提出。它的核心思想是将 UI 元素分解成不同的档次,并将其视为原子、分子和有机体等不同的组件。 一个原子代表着最根本的、不可再分的元素,比方按钮、输入框等。一个分子则由多个原子组合而成,代表了绝对简单的组件,例如一个带有图片、文本和按钮的卡片。而有机体则由多个分子组成,代表了更高级的 UI 元素,比方整个页面或利用。 通过将 UI 设计拆解成组件的层次结构,开发人员和设计师能够更加系统地构建和治理 UI。这种办法提倡重用和组合,使得开发过程更高效,同时也使得 UI 更容易保护和扩大。 Tailwind CSS 等 CSS 框架采纳了原子设计理念,提供了一系列的原子级款式类,开发人员能够依据须要组合这些款式类来构建 UI。这种形式使得款式的复用和调整更加灵便和准确,并且能够缩小冗余的款式代码。 真的须要 UI 库吗?那咱们真的须要一个 UI 组件库吗?答案可能是不须要。 在软件开发中,很多时候都须要视状况而定,是否应用 UI 组件库也用过视状况而定。如果心愿可能疾速启动我的项目并且不须要过多的自定义,那么应用一个成熟、易用的UI组件库是一个不错的抉择。但如果谋求独特的设计和齐全自定义的外观,UI 组件库可能就不适宜你。 UI 库的分类UI 库能够分为以下类型: CSS的扩大:像Sass、Less、Tailwind和CSS Modules这样的工具能够帮忙开发者以自定义的形式为网页增加款式。它们提供了更弱小和灵便的CSS性能,使开发者可能更不便地治理和重用款式。行为库/无款式库:如HeadlessUI、Radix 和 React Aria,它们专一于实现 UI 元素的行为逻辑,而不关注它们的具体款式。能够应用这些库来解决用户交互、表单验证、状态治理等性能。款式零碎:例如TailwindUI和DaisyUI,它们提供了一套内置的款式和行为模板,使你能够疾速构建具备对立外观和行为的 UI。能够依据须要抉择和组合这些款式模板,从而节俭开发工夫和工作量。组件库:像MUI、Ant Design和Mantine这样的组件库是独立的实体,它们提供了一整套可重用的UI组件,如按钮、输入框、表格等。须要学习如何正确应用这些组件,并依照它们的文档和示例进行开发。 ...

September 24, 2023 · 1 min · jiezi

关于javascript:大专生自学前端求职历险记

对于我因为高中的不务正业、真才实学,没有考上大学。去了一所专科学校,本认为本人可能浪子回头,在学校好好学习。惋惜的是,来到一个生疏又充斥引诱的城市后,迅速的迷失了本人,天天埋头打游戏,学习的事件早已抛之脑后。 一晃眼,到了2020年,疫情的接踵而至,让我这个原本没有任何技术、学历的“闲散人士”更加雪上加霜。豪不夸大的说,过后去实习,就差跪着求人家要我,说本人不要薪资。经验过一个月后,也就是2020年5月底,我找到了一份前端开发工作,从此开启了我的前端开发工作之旅。 在专科学校里的工夫,我并没有意识到社会市场的残暴,甚至天真的认为本人还是可能辛苦点的找到一份工作。可是,事实给了我当头一棒,没有技术、没有学历、疫情打击。那一段时间应该是真的认知本人的工夫,家里也没什么闲钱供我去培训班,我也不晓得我进来能干嘛。去看了一圈市场,与跟同学的理解,理解到了前端开发工作,所以就一股脑扎进这个行业当中。 求职之旅跟大多数人一样,并不知道应该从何处下手,过后在我的认知当中就晓得一个 JQuery,所谓的 MVVM 框架几乎是无所不知。点开小破站,找到点击率最高的视频,开始自学起来。 理解到一点框架的皮毛、而后死记硬背一点根底,通通写进简历当中。 所以我的学习曲线是如图下所示 graph TD框架 --> 框架根底 --> JS,CSS,HTML跟大多数人一样,我是间接通过框架起手学习的前端。导致了我对于问题的解决能力简直为零,遇到问题间接就双手来到键盘。看不懂,是真的看不懂(如果有雷同感触的能够在评论抠一个 1)。 对着视频学了十天左右,写了一个 demo,屁颠颠的去求职。后果也是可想而知,人家也不是傻子一眼识破。到处碰壁,简历丢进来,基本没人看。兜兜转转继续了一个月左右,终于有一家小公司违心给一个面试机会,快马加鞭的登程去面试,坐了一个小时左右的地铁到达一个破旧不堪的写字楼,过后要不是看到四周还有一个高校,我还认为我去了一个搞传销的中央。。。推开一个破旧的们,一个很小的房间,两个人坐在外面给我面试。我也很直白的说本人只会一点点皮毛,他们也很直白的通知我:咱们条件无限,相当于是各取所需。其实诚实说,我挺打动的,没有给我画大饼,也很直白的说我图他们要我,他们图我不要啥钱。 最终,我也算是如愿找到了这份实习工作,一个月 2000。也算是不错的后果了。 实习我的项目开发去到公司当前,也快马加鞭的开始了开发工作。首先就是让我从一个简略的后盾管理系统开始动手。然而问题也来了,我基本不晓得什么叫管理系统,连我的项目搭建我都不会,而后就是两眼一抹黑。不停的去百度,查看如何搭建一个后盾管理系统。 诚实说,我过后连路由是什么我都不分明,更别说加一堆乌七八糟的性能在外面了。哪个过程可想而知,如许的折磨人。经验了半个月,模板被我折腾起来了一个简略的样子,对着人家的管理系统样子进行高明的模拟。然而 bug 满天飞也是防止不了的问题。并且没有丝毫的设计可言,纯纯的依靠问难。 最初的最初,切实是看不下去了(包含我本人),去网上扒了一个模板开始本人去折腾。为什么一开始不思考应用模板呢?因为我看不懂代码,下不去手。 尽管最初趔趔趄趄的我的项目启动起来了,然而也算是我第一次我的项目开发的经验吧。后续继续的增加一些性能,改变一些简略的款式,还好老板也很佛系,没有尴尬我,基本上没有魔改模板。所以也算是顺利的实现了后盾管理系统的开发工作。 小插曲在实习工作的期间,在技术群中意识了一个很牛的大佬。常常我在群里问一些傻逼问题(因为本人根底太差了),然而他都会很急躁的给我解说,甚至是上班后抽出工夫给我近程讲课。也算是我的半个引路人吧,让我晓得了如何去玩儿前端。在这里手动抠一个感激。 步入正轨在经验过第一个我的项目开发后,也算是晓得了框架应该如何去玩儿(也就是晓得了框架的 api 如何去调用)。也晓得了如何去学好前端,所以缓缓的回头去理解基前端的三大基础知识 js css html。 其实我置信很多人跟我一样,开始都是赶鸭子上架的模式去开发我的项目,遇到问题大刀阔斧;遇到 bug 不晓得如何去排查;遇到不晓得如何去实现。。。最初我也总结出了问题所在,那就是根底的不扎实,学习程序的问题,导致了这些问题。 啰嗦一句哪怕是当初,我有时候跟网友聊天的时候也能听到一些让人不能了解的观点:前端那么简略有什么难度?前端不就是写写页面?前端。。。。 从我的观点登程而言,前端这个岗位的确是属于,宽进严出。想入行的确很容易,毕竟像我这样啥也不懂的,通过十来天的学习都能去做前端开发的事件。 然而,然而,然而,重要的话说三遍,前端的简略是因为它的入行门槛低。然而入门和会还是有实质的区别,绝大多数前端开发工作都是写 后盾管理系统,这种开发,都是间接套用现成模板与组件就可能写。如果是定制化开发,脱离了后盾管理系统的开发,那还是有手就行吗? 持续步入正轨在工作的工夫中,也意识了很多互联网大厂的大牛:滴滴、网易、腾讯等,常常厚着脸皮去求教他们。然而他们回应最多的是:多看根底,看书! 大佬们都这么说,那还等什么!间接开始口头。 绿宝书:犀牛书红宝书:javascript高级程序设计黄宝书:你不晓得的js间接搞起来!尽管我很厌恶看书,然而看到本人实习的 2k 工资,我还不动起来,那可能真就废了。 所以每天上班后,回家打开书籍,开始看。果不其然,一看就打瞌睡,生涩、干燥的常识内容。没方法,持续去求教如何看书学习,失去的答案就是:好忘性,不如烂笔头。 而后读书的时候,边看边写,跟做笔记一样。成果果然好多了,没那么容易打瞌睡。而且我也买了一些零食(口香糖、耐嚼的肉干之类的)边看边吃,让本人集中注意力。总之是为了可能学到真常识,想尽了各种方法。 半个月后,看了几章节根底,感觉的确耳濡目染的扭转了一些。写代码的时候不会那么的茫然;重复调试的次数少了一些;晓得了更多好用的 api ,代码品质有肯定的进步。 读书笔记分享读书笔记 在这里分享一篇,本人从零开始写的一些笔记。不过本人曾经停更很久了。 实习总结通过两个月的实习后,工夫也来到了 2020年7月,我毕业了。我也学到了很多货色,然而我感觉,这样子的工作状态并不是我喜爱的。 回学校简略拾掇了一下,也决定了辞职。去找一份更加有前途的工作,当然这里必定有很多人纳闷:你凭什么啊?的确是如此,包含我的父母,也是很纳闷并且还质疑的问道:你上几个月班,忘了本人的理论状况了? 我也开始反思,本人真的就那么的蠢、那么的不堪吗? 果决辞职通过我的三思而行后,还是在毕业后辞职了。在出租屋积淀了一个月,这一个月基本上每天只睡了五六个小时,其余工夫都花在了根底的夯实下面,狠狠的补充前端基础知识。每天醒来就是:看书、写 demo、求教大佬,每天如此,手不释卷。 一个月后,整顿本人的简历,而后又开始了本人的求职之旅。 二次求职求职之路,也并没有本人想的那么顺利。他人也没有因为我简历写的货色多了那么一点可怜的货色而青眼你。 我也在开始反思,本人的辞职是否正确。因为我的实质问题并没有解决:没有学历、没有教训。期间也在自我狐疑、自我安慰,也在凌晨的时候,抓耳挠腮,头发也在开始一大把一大把的掉。 就这样继续了一个月左右,我终于又收到了一份面试邀请。快马加鞭的前去面试,后果却出乎我的预料,他们并没有问我八股文,反而是对我所说的经验感兴趣。我也是添枝加叶的说了一顿我的实习经验、辞职后的这一个月的学习经验。 最初的最初,他们通过了我的初试。给我说须要老大亲自面试,我开始很忐忑。然而见到老大后,他是一个很和善的老师,并没有刁难我,也没有问我刁钻问题,只是跟我谈了一下根本状况、理解了我的根本状况,就通过了我的二次面试。 二次求职之旅后果我很侥幸,因为,让我去打工的中央是一个资源丰盛的高校。我的老大也是院长,首次面试的两位也是两位老师。我也如愿以偿的又有了一份新的工作,接触到了极其丰富的资源。 老师们也很违心传授常识,让我的技术再次的突飞猛进。 开发我的项目: 北京冬奥会水立方保电零碎基于负荷聚合的园区能量态势感知与交易系统电压暂降仿真模拟系统薪资变动毕业后,我的薪资也算是以每年翻倍的涨幅提高。也算是我的学习换来的回报吧。还是挺不错的~ 当初截至目前,通过三年零两个月的工作工夫,也算是勉强迈入了高级前端开发的门槛吧。一直的学习中,也在踊跃的参加开源的奉献。 Ray TemplateVue3 Next QRcodeVue Hooks Plus这些都是自己参加开发、奉献的我的项目,有趣味能够点开看看。如果感觉有用也能够点一个小星星~~~ ...

September 24, 2023 · 1 min · jiezi

关于javascript:实现一个响应式的瀑布流组件

在图片网站中,通常是应用瀑布流的形式来显示图片,等宽度不等高,这样显得错落有致 明天 应用Vue3实现一个瀑布流组件,并公布为一个npm包 grid布局反对响应式参考自react-plock 1、window.matchMediawindow.matchMedia(mediaQueryString)办法返回一个MediaQueryList对象,示意指定css媒体查问字符串的后果 其中参数mediaQueryString示意CSS @media规定的任何媒体查问选项,比方: min-width、min-height、orientation等const media = window.matchMedia("(max-width: 850px)") 在MediaQueryList对象中有两个属性: matches:返回查问后果,是一个布尔值media:媒体查问的字符串所以,依据matches咱们就能够晓得是否命中以后的媒体查问选项 并且,咱们还能够通过addEventListener监听mediaQuery查问后果的变动 media.removeEventListener('change', () => { console.log(media.matches)});2、瀑布流组件响应式管制依据屏幕大小确定图片的列数 export interface PropConfigType { gap: number[]; // 行列的间距 columns: number[]; // 不同媒体查问选项对应的列数 medias?: number[]; // 媒体查问选项}import { reactive, onUnmounted } from 'vue';export function useMediaValues(config: PropConfigType) { const info = reactive({ columns: 1, gap: 1 }); const { columns, gap, media } = config; if (!media) { return setInfo(0); } // 循环查问medias const mediaQueries = media.map(media => window.matchMedia(`(min-width: ${media}px)`) ); const onSizeChange = () => { // 记录匹配到的哪一个media let matches = 0; mediaQueries.forEach(mediaQuery => { mediaQuery.matches && matches++; }); // 优先匹配前面的 const idx = Math.min(mediaQueries.length - 1, matches); setInfo(idx); }; onSizeChange(); // 监听查问后果 for (let mediaQuery of mediaQueries) { mediaQuery.addEventListener('change', onSizeChange); } onUnmounted(() => { for (let mediaQuery of mediaQueries) { mediaQuery.removeEventListener('change', onSizeChange); } }); function setInfo(idx: number) { info.columns = columns[idx]; info.gap = gap[idx]; return info; } return info;}数据结构info.columns计算出瀑布流的数据结构,每列为一个数组,并存储到dataColumns ...

September 24, 2023 · 2 min · jiezi

关于javascript:微软最热门的10款前端开源项目

本文来盘点微软开源的十大前端我的项目,这些我的项目在 Github 上取得了超过 45 万 Star! Visual Studio CodeVisual Studio Code 是一款由微软开发的开源的代码编辑器。它反对多种编程语言,如C、C++、C#、Python、JavaScript 和 TypeScript 等,并提供丰盛的插件生态系统来扩大性能。VS Code具备丰盛的编辑性能,包含语法高亮、智能代码补全、代码导航、调试性能等。它还提供了集成的终端窗口、Git 版本控制工具和丰盛的主题和扩大插件,可能满足开发者的各种需要。 Github(151k ⭐️): https://github.com/microsoft/vscode TypeScriptTypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的扩大。它提供了动态类型检查和更多的面向对象个性,以进步开发工具和开发体验。通过类型注解和类型推断性能,可能在编译阶段发现潜在的类型谬误,并提供更好的编辑提醒和主动补全性能。TypeScript 能够编译成 JavaScript,与现有的代码库无缝集成,如 React、Vue.js 等。应用 TypeScript 能够编写更平安、更强壮的 JavaScript 利用。 Github(94.2k⭐️):https://github.com/microsoft/TypeScript Web-Dev-For-BeginnersWeb-Dev-For-Beginners 是由微软开源的一个针对初学者的 Web 开发学习我的项目,蕴含 12 周 24 节课,旨在帮忙初学者把握 Web 开发的基础知识和技能,并提供实践经验和示例代码。 Github(76.8k⭐️): https://github.com/microsoft/Web-Dev-For-Beginners PlaywrightPlaywright 是一个由微软开源的跨浏览器自动化测试工具,它能够模仿各种浏览器的用户行为和交互,并且能够在多种平台(包含 Windows、Linux、macOS 等)上运行。与其余相似的工具相比,Playwright 具备更好的性能、稳定性和可扩展性,反对多浏览器、多语言、多平台等个性。 Github(55k⭐️): https://github.com/microsoft/playwright Monaco EditorMonaco Editor 是一个由微软开源的基于 Web 技术的代码编辑器。它是 Visual Studio Code 的外围编辑组件,能够在 Web 利用中集成和应用。其具备许多先进的编辑性能,包含语法高亮、主动实现、代码提醒、代码折叠、缩进调整、代码格式化等。它反对多种编程语言,并提供了丰盛的扩展性,能够通过插件和自定义款式进行性能扩大和界面定制。 ...

September 23, 2023 · 1 min · jiezi

关于javascript:JavaScript-终于原生支持数组分组了

在日常开发中,很多时候须要对数组进行分组,每次都要手写一个分组函数,或者应用lodash的groupBy函数。好消息是,JavaScript 当初正在引入全新的分组办法:Object.groupBy和Map.groupBy,当前再也不须要手写分组函数了,目前最新版本的 Chrome(117)曾经反对了这两个办法! 以前的数组分组假如有一个由示意人员的对象组成的数组,须要依照年龄进行分组。能够应用forEach循环来实现,代码如下: const people = [ { name: "Alice", age: 28 }, { name: "Bob", age: 30 }, { name: "Eve", age: 28 },];const peopleByAge = {};people.forEach((person) => { const age = person.age; if (!peopleByAge[age]) { peopleByAge[age] = []; } peopleByAge[age].push(person);});console.log(peopleByAge);输入后果如下: { "28": [{"name":"Alice","age":28}, {"name":"Eve","age":28}], "30": [{"name":"Bob","age":30}]}也能够应用reduce办法: const peopleByAge = people.reduce((acc, person) => { const age = person.age; if (!acc[age]) { acc[age] = []; } acc[age].push(person); return acc;}, {});无论哪种形式,代码都略显繁琐。每次都要查看对象,看分组键是否存在,如果不存在,则创立一个空数组,并将我的项目增加到该数组中。 ...

September 22, 2023 · 1 min · jiezi

关于javascript:如何实现浏览器标签页之间的通信

浏览器标签页之间通信的实现应用场景 前端开发过程中,总是防止不了要进行前端标签页之间的通信,最经典的例子莫过于音乐播放网站中,当第一次点击播放列表中的歌曲时,它会关上一个新的标签页进行播放,而当在列表中再次点击歌曲播放时,并不会再多关上一个标签页,而是会在方才新关上的标签页上播放歌曲。 形式办法这里跳转新页面均应用window.open1办法,这里略微说下window.open办法的参数 url(可选) 一个字符串,示意要加载的资源的 URL 或门路。如果指定空字符串("")或省略此参数,则会在指标浏览上下文中关上一个空白页。target(可选) 一个不含空格的字符串,用于指定加载资源的浏览上下文的名称。如果该名称无奈辨认现有的上下文,则会创立一个新的上下文,并赋予指定的名称。还能够应用非凡的 target 关键字:_self、_blank、_parent 和 _top。 该名称可用作<a>或<form>元素的target属性。 windowFeatures(可选) 一个字符串,蕴含以逗号分隔的窗口个性列表,模式为 name=value,布尔个性则仅为 name。这些个性包含窗口的默认大小和地位、是否关上最小弹出窗口等选项。 在上面的例子中采纳audio作为浏览上下文的名称,让他从始至终只创立一个新的标签页 1.应用路由上的query传参list.html const broadCastChannel = new BroadcastChannel('audio')function showAudio(){ //形式一:通过query,毛病会刷新已关上的页面,但并没有同源策略影响 window.open('/audio.html?name=张三&id=555','audio')}audio.html const app = document.getElementById('app')const query = new URLSearchParams(window.location.href.split('?')[1])app.innerText = query.get('name')长处:每次关上,audio页面都会变为以后流动标签页 毛病: 每次关上,audio页面都会被刷新,从新加载如果新关上的浏览上下文不共享雷同的源2,则关上脚本将无奈与浏览上下文的内容进行交互(读取或写入)。2.应用localStroage监听利用同源页面2共享localStroage的个性,利用windw.addEventLister监听stroage3的变动,来实现两个标签页的通信,具体查看上面例子: list.html function showAudio(){ if(!localStorage.getItem('hasAudio')){ window.open('/audio.html','audio') localStorage.setItem('hasAudio',1) } setTimeout(()=>{ localStorage.setItem('name','李四') },3000)}audio.html window.onunload = () =>{ localStorage.removeItem('hasAudio') localStorage.removeItem('name')}const app = document.getElementById('app')window.addEventListener('stroage',e=>{ const app = document.getElementById('app') app.innerText = e.newValue})长处: 第一次关上,之后再传参无需刷新界面从新加载资源毛病: 关上页面的需为同源页面,localStroage在同源页面中共享同源页面需通过localStroage检控通信,管制麻烦,简单场景应用不不便3.应用BroadcastChannelBroadcastChannel 接口代理了一个命名频道,能够让指定 origin 下的任意 browsing context 来订阅它。它容许同源2的不同浏览器窗口,Tab 页,frame 或者 iframe 下的不同文档之间互相通信。通过触发一个 message 事件,音讯能够播送到所有监听了该频道的 BroadcastChannel 对象。 ...

September 21, 2023 · 1 min · jiezi

关于javascript:你真的了解箭头函数和普通函数吗

1. 箭头函数ES6中容许应用箭头函数 => 来定义函数,箭头函数相当于匿名函数,并且简化了函数定义。 例: const add = (x, y) => x + yconst fn = (name) => ({ name })个性: 语法简洁,代码量少。没有本人的 this,它会继承外层作用域的 this。不能作为构造函数,不能用 new 关键字创建对象实例,也不能用作构造函数。不能应用 arguments 对象,它没有本人的 arguments 对象,会继承外层作用域的arguments适宜短小的函数、或者作用回调函数2. 一般函数函数的定义形式通常有三种,函数申明形式、函数表达式、应用 Function 构造函数; 2.1、 函数申明形式function add(a, b) { return a + b}2.2、 函数表达式const fn = function(name) { return { name }}2.3、 应用Function构造函数const sum = new Function("num1", "num2", "return num1 + num2")2.4、 三种形式的区别次要从作用域、效率、加载程序来辨别 2.4.1、 作用域函数申明、函数表达式申明、Function() 应用的都是局部变量 var name = "我是全局变量name"// 申明式function a() { var name = "我是函数a的name" return name;}console.log(a()) // 我是函数a的name// 表达式var b = function() { var name = "我是函数b的name"; return name;}console.log(b()) // 我是函数b的name// Function 构造函数var c = new Function("const name = '我是函数c的name';return name;")console.log(c()); // 我是函数c的name2.4.2、 执行效率Function() 构造函数效率要低于其余两种形式,尤其是在循环中,因为构造函数每执行一次都要从新编译,并生成新的函数对象 ...

September 20, 2023 · 3 min · jiezi

关于javascript:记录一下浏览器缩放和移动端缩放的区别其实两者是有很大的不同的之前一直搞不明白

间接问AI它们之间的区别的话,是这么答复的浏览器缩放和挪动端缩放是两种不同的概念,它们波及到用户在不同设施上扭转网页内容大小的形式。以下是它们的次要区别: 浏览器缩放(Desktop Browser Zoom): 浏览器缩放是指在桌面计算机浏览器上,用户通过调整浏览器窗口的缩放级别来扭转网页内容的大小。用户能够应用浏览器的缩放性能,通常通过按住Ctrl键(在Windows上)或Command键(在Mac上)并滚动鼠标滚轮或应用快捷键来实现。也能够在浏览器菜单中找到缩放选项。浏览器缩放会同时扭转网页的文本、图像和布局大小,以适应用户的缩放设置。这能够用来增大或减小整个页面,包含文字和图像。挪动端缩放(Mobile Device Zoom): 挪动端缩放是指在挪动设施(如智能手机或平板电脑)上,用户通过手势来放大或放大网页内容,而不是调整浏览器窗口的大小。用户能够应用手指捏合或开展手势来管制网页的缩放级别。将两个手指捏合在一起会放大页面,将它们开展会放大页面。挪动端缩放通常只扭转网页的视觉出现,而不会扭转网页的理论布局或文本大小。这意味着页面元素的物理大小和排列形式不会扭转,只是视觉上会变得更大或更小。总的来说,浏览器缩放和挪动端缩放是用于不同类型设施和交互方式的调整页面大小的办法。浏览器缩放更实用于桌面计算机,而挪动端缩放则更实用于触摸屏设施,它们的成果和用户体验有所不同。在网页设计中,须要思考到这些不同的缩放形式,以确保用户在不同设施上都能取得良好的用户体验。 以下是我的了解首先浏览器缩放会扭转分辨率我说的分辨率是浏览器为以后网页容器设置的分辨率,而不是屏幕的物理分辨率哟。 很显著,假如当我css设置100vw,100vh后,相应元素占满全屏,此时元素宽高为100px,200px。那我缩放大小为50%后,还是占满屏,且宽高为200px,400px。所以分辨率此时是变了的。 而挪动端只会像放大镜似的放大放大看下挪动端像方才的设置,挪动端放大放大其实分辨率是没有扭转的,页面加载后它就设置好了视口分辨率,放大放大只是将该视口进行像放大镜似的放大放大,放大后被遮挡的局部就能够左右滑动来浏览了。所以像我方才设置的元素在浏览器上无论怎么放大放大,它所有内容都能一眼看到,而在挪动端上放大了就看不全了,只能上下左右滑动来看全,放大的话占不满它又主动回弹去占满视口了。 优缺点浏览器的话放大放大会导致元素排列发生变化,因为设置固定宽度和百分比宽度的元素在某一分辨率下长的差不多,分辨率一变就大变样了,而挪动端的话放大放大就对网页元素的排列没影响了,只是把所有内容都放大了嘛。 挪动端呢,能够在head里增加以下标签来限度初始分辨率,具体属性能够百度查看 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=0.5, user-scalable=yes">以上就是我的简略了解,记录以下避免遗记。 原文链接

September 20, 2023 · 1 min · jiezi

关于javascript:2023Springboot视频mybatis-plusvue3elementpluspiniats实战

https://www.bilibili.com/video/BV1x14y1Z74z/?aid=783148469&ci...咱们分三个步骤学习第一步:搭建后端脚手架第二步:搭建前端脚手架第三步:登录注册用户分页实战后端技术栈:Springboot2、mybatisplus、redis前端技术栈:vue3、vite4、typescript5、axios、elementplus、vue router

September 20, 2023 · 1 min · jiezi

关于javascript:javaScript中FormData使用

1.电脑系统 windows11专业版2.开发环境 vue2+element23.在开发的过程中,咱们须要应用到FormData来存储数据,上面我来分享下FormData的应用办法。4.创立FormData let formdata = new FormData();//能够通过append()办法来追加数据formdata.append("name","张三");//通过get办法对值进行读取console.log(formdata.get("name")); // 张三//通过set办法对值进行批改formdata.set("name","李四");console.log(formdata.get("name")); // 李四// 也能够应用遍历对象的办法来进行增加let data = { name:"张三", age:26, sex:"男"}const formData = new FormData();Object.keys(data).forEach((key) => { formData.append(key, data[key]);});4-1.获取绝对应的值 formData.get("name"); // 获取key为name的第一个值formData.getAll("name"); // 返回一个数组,获取key为name的所有值4-2.判断是否存在对应的 key 值 let formdata = new FormData();formdata.append("name","李四");console.log(formdata.has("name")); // trueconsole.log(formdata.has("age")); // false4-3.删除数据 let formdata = new FormData();formdata.append("name","李四");console.log(formdata.get("name")); // 李四formdata.delete("name");console.log(formdata.get("name")); // null99.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

September 19, 2023 · 1 min · jiezi

关于javascript:浅析Element-UI-源码

仓库地址:GitHub 1、代码构造 2、逐渐解析2.1.package.json 形容配置:name、version、description、repository(仓库地址)、keywords、homepage(官网)、bugs、license(许可证);文件配置:files(指定须要追随一起公布的内容、管制npm包大小)、typings(TypeScript 的入口文件)、main(我的项目的入口文件、默认为根目录下的 index.js)、faas(用于faas deploy 配置)、style(款式入口文件)、依赖:dependencies(运行依赖,也就是我的项目生产环境下须要用到的依赖)、devDependencies(开发依赖,我的项目开发环境须要用到而运行时不须要的依赖,用于辅助开发)、peerDependencies(伙伴依赖,不会被主动装置,通常用于示意与另一个包的依赖与兼容性关系来警示使用者)脚本配置:scripts(我的项目的一些内置脚本命令)其余:unpkg(cdn优化服务,让 npm 上所有的文件都开启 CDN 服务)参考:Element-ui源码剖析01.Element UI 我的项目工程化分析之我的项目概览、package.json、npm scriptpackage.json 配置齐全解读package.json 指南

September 19, 2023 · 1 min · jiezi

关于javascript:别再用-display-contents-了

首发于公众号 大迁世界,欢送关注。 每周一篇实用的前端文章 ️ 分享值得关注的开发工具 分享集体守业过程中的趣事快来收费体验ChatGpt plus版本的,咱们出的钱 体验地址:https://chat.waixingyun.cn能够退出网站底部技术群,一起找bug,... 文章探讨了在网站上应用"display: contents"属性可能导致的潜在问题。作者强调了这种做法可能毁坏网页的语义构造,并可能对可拜访性产生不利影响。文章还提到了一些潜在的解决方案,以帮忙开发人员防止这些问题。 https://ericwbailey.website/published/display-contents-consid... 上面是注释~~ display: contents 介绍CSS(层叠样式表)中的 display: contents 是一个绝对较新的属性值,它对元素的布局和可视化有非凡的影响。当你对一个元素利用 display: contents,这个元素自身就像从DOM(文档对象模型)中隐没了一样,而它的所有子元素则会降级到DOM构造中的下一个层级。换句话说,该元素的盒模型将被疏忽,它的子元素会取而代之,就像直接插入到父元素中一样。 假如咱们有这样一个HTML构造: <div id="parent"> <div id="child1">Child 1</div> <div id="child2">Child 2</div></div>失常状况下,#parent 是 #child1 和 #child2 的父元素,它们在DOM和布局中有一个明确的层级关系。 当初,如果咱们对 #parent 利用 display: contents: #parent { display: contents;}在这种状况下,#parent 在页面布局中就像是“隐没了”一样。它的所有子元素(这里是 #child1 和 #child2)会间接降级到 #parent 所在的DOM层级。也就是说,在布局和渲染过程中,#child1 和 #child2 将不再被视为 #parent 的子元素,而是像直接插入到 #parent 的父元素中一样。 这样做的后果是,任何利用于 #parent 的布局和款式都不会影响到页面的渲染,但 #child1 和 #child2 会像失常元素一样被渲染。 主要用途: 语义改良:可能改良HTML构造,使其更合乎语义,但不影响布局和款式。布局优化:在某些简单的布局场景中,它能够简化DOM构造,进步渲染性能。display: contents 和可拜访性的长期问题从字面上看,这个CSS申明扭转了其利用到的元素的显示属性。它使元素“隐没”,将其子元素晋升到DOM中的下一层级。 这种申明在很多方面都可能是有用的。讥刺的是,其中一个用例就是改善你工作的底层语义。然而,这个申明一开始的成果有点过头了。 CSS和可拜访性不是每个人都意识到这一点,但某些CSS会影响辅助技术的工作形式。就像烧毁你的房子的确会胜利地除去其中可能存在的蜘蛛一样,应用 display: contents 可能会齐全打消某些元素被辅助技术辨认的要害属性。 简而言之,这会导致按钮不被申明为按钮,表格不被申明和导航为表格,列表也是如此,等等。 ...

September 12, 2023 · 1 min · jiezi

关于javascript:simpleimagelabel让图片标注变得简单

演示地址https://king2088.github.io/simple-image-label/ 演示图 开发背景:最近公司要做一个AI在线标注零碎,须要对图片进行标注,本人在github找了一些,然而大部分都是很久没有更新或者是不太适宜自定义等。当然我也看过CVAT本人的标注,它是采纳canvas开发的,不过对于咱们目前的我的项目来说,并不需要canvas,也不须要较为简单的框选,只须要反对矩形框标注即可,于是本人开发了一个web版的。 简介:simple-image-label是一个基于Web的用户敌对型组件,简化了指标检测和深度学习工作中的图片标注过程。该组件采纳HTML和JavaScript开发,使用户可能轻松地对图片进行标注并生成标注信息,实用于各种利用场景。 次要特点:用户敌对的界面:simple-image-label提供直观易用的界面,使图片标注变得轻而易举。其简洁性确保用户无论程度如何,都能轻松地应用该工具。高效标注:借助simple-image-label,用户能够高效地对图片进行标注,增加标签并生成指标检测工作所需的坐标。它简化了标注流程,节俭了贵重的工夫和精力。多样兼容性:该组件反对多种标注格局,包含风行的YOLO和VOC等格局。这种兼容性确保了与现有工作流程和深度学习框架的无缝集成。网页便捷性:simple-image-label作为一个基于Web的工具,无需简单的装置或设置。用户能够间接从Web浏览器中拜访和应用该组件,使其便捷且随时可用。开发过程:simple-image-label的开发过程能够分为以下几个步骤: 创立HTML构造:首先,咱们须要创立一个蕴含图像和标注区域的HTML构造。能够应用以下代码作为终点: <div class="__simple-image-label__"> <div class="s-image-content"> <img id="label-bg_img" src=""> <div id="labelsContainer" class="label-content"></div> </div></div>初始化组件:在JavaScript中,咱们须要初始化simple-image-label组件,为其绑定相干的事件和性能。以下是一个根本的初始化代码示例:首先先再创label时,指定其矩形的左上顶点x,y轴坐标,以及矩形的宽高,而后将其增加到labelsContainer中 this.labelItem = { uuid: '', // 随机生成 x: 0, // 百分比 = 左上角x轴坐标 / 以后图片宽度 y: 0, // 百分比 = 左上角y轴坐标 / 以后图片高度 width: 0, // 矩形宽度百分比 = 矩形宽度 / 以后图片宽度 height: 0, // 矩形高度百分比 = 矩形高度 / 以后图片高度 name: '', // 矩形名称 color: '' // 矩形色彩};this.labelsContainer.appendChild(this.labelItem);须要留神的是,初始化之前须要期待图片load实现后再执行,避免图片还未load实现,就曾经看到所有标签,另外则是为了获取到图片的宽高,不便 // 初始化this.$w = this.labelsContainer.clientWidth;this.$h = this.labelsContainer.clientHeight;this.startPoint = { x: 0, y: 0 };this.endPoint = { x: 0, y: 0 };this.labelItem = { uuid: '', x: 0, y: 0, width: 0, height: 0, name: '', color: '' };this.labelsContainer.onmousedown = (e) => this.mousedown(e);// 鼠标挪动事件this.labelsContainer.onmousemove = (e) => this.mousemove(e);// 鼠标抬起事件this.labelsContainer.onmouseup = (e) => this.mouseup(e);// 右键点击this.labelsContainer.oncontextmenu = (e) => { e.preventDefault(); if (this.contextmenu && typeof this.contextmenu === 'function') { this.contextmenu(e) }};if (this.readOnly) { window.removeEventListener('resize', this.resize.bind(this), false); this.labelsContainer.style.cursor = 'default'; this.clearAllLabelActive();} else { this.labelsContainer.style.cursor = 'crosshair';}// 监听浏览器缩放,扭转label的宽高window.addEventListener('resize', this.resize.bind(this), false);this.resizeDotDisplayStatus();当鼠标左键按下时,咱们记录下鼠标的地位,并记录鼠标左键按下时的坐标,用于后续计算。 ...

September 11, 2023 · 3 min · jiezi

关于javascript:Js中的浅拷贝与深拷贝

浅拷贝浅拷贝是一种复制对象的形式,创立一个新的对象,并将原始对象的属性值复制到新对象中。然而,如果属性值是对象或者数组,浅拷贝只会复制他们的援用而不是创立正本。换句话说,浅拷贝只复制了对象外表层级,而不会递归复制外部的嵌套对象。简略来说,浅拷贝只复制对象的一层,如果原始对象中的属性值是对象,那么拷贝后的对象与原始对象共享雷同的援用,批改其中一个对象的属性值会影响到另一个对象。 对象浅拷贝形式?应用Object.assign()const obj = { name: "土豆", age: "18" };const obj2 = Object.assign({}, obj);console.log(obj2);应用...运算符const obj1 = { name: "土豆", age: "18" };const obj2 = { ...obj1 };应用for...inconst obj = { name: "土豆", age: "18" };const obj2 = {};for (const key in obj) { if (obj.hasOwnProperty(key)) { obj2[key] = obj[key]; }}应用Object.keysconst obj = { name: "土豆", age: "18" };const obj2 = {};Object.keys(obj).forEach((key) => { obj2[key] = obj[key];});console.log(obj2);数组浅拷贝实现形式?应用slice()办法const arr = ["土豆", "番茄", "向日葵"];const arr2 = arr.slice();应用concat()办法const arr = ["土豆", "番茄", "向日葵"];const arr2 = [].concat(arr);应用...运算符const arr = ["土豆", "番茄", "向日葵"];const arr2 = [...arr];深拷贝深拷贝的实现形式应用JSON.parse(JSON.stringify())const person = { name: "土豆", age: "18", address: { city: "江苏南京", country: "中国", },};const person2 = JSON.parse(JSON.stringify(person));person2.address.city = "安徽芜湖";console.log(person2);console.log(person);应用JSON.parse(JSON.stringify())弊病 ...

September 11, 2023 · 1 min · jiezi

关于javascript:聊聊版本号的作用与价值

在我的项目开发和运行的过程中,总是少不了各类降级。例如某个性能组件须要更高的依赖库、数据项须要进行兼容等等问题。遇到此类问题开发者须要应用版本号来解决。明天咱们就来剖析一下我的项目迭代过程中会遇到的各类降级问题以及如何应用版本号来解决。 通常来说降级会波及到三个点: 向下兼容协商降级拒绝服务依赖降级开发者在产品演进的过程中会一直的降级工具依赖,以 npm 版本为例。版本号通常由三局部组成: 主版本号、次版本号和订正版本号。 Major.Minor.Patch其中,Major 示意主版本,当你做了不兼容的 API 批改时,就须要降级这个版本号。Minor 示意次版本,当你做了向下兼容的功能性新增时,就须要降级这个版本号。而 Patch 示意订正版本,当你做了向下兼容的问题修改时,就须要降级这个版本号。 每次在应用 npm install 时都会下载package.json 中的依赖。而在在依赖中有 ^ 和 ~ 符号。其中 ^ 代表次版本兼容,~ 是订正版本兼容。 { "devDependencies": { "lib1": "0.15.3", "lib2": "^0.15.3", "lib3": "~0.15.3" }}如果以后三个库都有几个高版本,如: 0.15.30.15.40.16.11.0.0在我的项目下载后执行 install ,下载的对应版本则是 lib1 0.15.3lib2 0.16.1lib3 0.15.4尽管 ^ 和 ~ 都不会降级破坏性依赖,但版本号只是“小人协定”。还是倡议大家不要应用这些符号。同时之前也遇到过组件库在某个订正版本中呈现了 bug。尽管很快修复好了。然而定位问题还是须要破费肯定工夫的。 数据缓存很多状况,开发者为了缩小网络申请都会应用数据缓存。如果是一个较为稳固的数据。咱们能够增加版本号进行缓存(同时增加一个足够长的过期工夫不便从新获获取)。 以 localStorage 为例,代码如下所示: interface Store<T> { /** 存储数据 */ data: T; /** * 以后版本数据,能够是一个数字或一个日期字符串 '220101-1' * 后续的 -1 是为了当天公布多个版本而筹备的。 */ version: string | number; /** * 过期工夫 * 能够应用 工夫戳(天数),天数 dayjs 等 */ expries: string | number;}/** * 理论存储 key 值 */const XXX_STORAGE_KEY = 'storageKey';const isNeedUpgrade = async <T>(): Promise<boolean> => { const storeJSONStr = localStorage.getItem(XXX_STORAGE_KEY); // 没有存储 JSON 字符串 if (storeJSONStr === null) { return true; } let store: Partial<Store<T>> = {}; try { store = JSON.parse(storeJSONStr) } catch (e) { // JSON 字符串解析失败 return true; } const { expries, version: localVersion } = store; // 没有过期工夫获取以后工夫超过过期工夫 if (!expries || isOverTime(expries)) { return true; } // 没有缓存本地版本 if (!localVersion) { return true; } const currentVersion = await getCurrentVersionForXXXStore(); // 版本不统一 if (currentVersion !== localVersion) { return true; } // 无需降级 return false;}以后代码其实就波及到了上述所说的协商降级。 ...

September 10, 2023 · 2 min · jiezi

关于javascript:没登录网页也能个性化推荐5分钟带你了解浏览器指纹

公众号 小册这是我整顿的学习材料,十分零碎和欠缺,欢送一起学习古代JavaScript高级小册深入浅出Dart古代TypeScript高级小册linwu的算法笔记引言不晓得大家有没有遇到这种场景,我无痕形式拜访某个网站,该网站仍然可能精准对我进行个性化举荐?这是为什么呢?接下来,本文将介绍浏览器指纹无关知识点 什么是浏览器指纹?浏览器指纹是一种用于辨认用户设施的浏览器的惟一标识符。它通过收集设施和浏览器的各种信息,如用户代理、屏幕分辨率、字体、插件列表等,以创立一个惟一的标识符。浏览器指纹可用于多种用处,包含用户身份验证、设施追踪和数据分析。fingerprint咱们关上fingerprint网站,能够看到在失常和无痕模式下,指纹都是惟一的 <script> // Initialize the agent at application startup. const fpPromise = import('https://openfpcdn.io/fingerprintjs/v4') .then(FingerprintJS => FingerprintJS.load()) // Get the visitor identifier when you need it. fpPromise .then(fp => fp.get()) .then(result => { // This is the visitor identifier: const visitorId = result.visitorId console.log(visitorId) }) .catch(error => console.error(error))</script>浏览器指纹的工作原理信息收集:浏览器指纹技术通过收集用户设施和浏览器的各种信息来创立惟一标识。这些信息能够包含用户代理字符串、屏幕分辨率、操作系统、字体列表、插件列表、硬件配置等等。信息组合:收集到的信息会通过肯定的解决和筛选,以便生成稳固的浏览器指纹。通常,某些信息会被排除,而其余信息会被退出到最终的指纹中。信息哈希化:一旦收集到足够的信息并造成了浏览器指纹的根底数据,这些数据将被组合在一起,并通过哈希函数的解决,生成一个惟一的哈希值。这个哈希值就是用户的浏览器指纹。指纹存储:生成的浏览器指纹通常会被存储在用户设施上,通常是在浏览器的本地存储(如localStorage)中。这样,网站能够在用户下次访问时查看指纹,以进行身份验证或个性化举荐等操作。指纹比对:当用户再次拜访网站时,网站会申请并获取浏览器指纹信息,而后将其与之前存储的指纹进行比对。如果两个指纹匹配,网站就能够确认这是同一用户。

September 10, 2023 · 1 min · jiezi

关于javascript:游戏开发入门CocosCreator实现

课程介绍课前介绍为什么要开这门课?其实市面上曾经有很多对于游戏开发的课程了,而且都各有千秋。然而。 目前市面上的编程课很多标榜的零根底,然而很多名词都没有做相应的解释。我感觉对于初学者来说,可能还是有些难度。课程和课程之间没有一个循序渐进的关系。学员无奈通过学习课程造成本人的思想体系。课程特点起码常识准则:尽量不引入太多名词,免得初学者疑惑不解。需要驱动:跟着需要去学习,这样能力加深记忆,容易了解。课程适应人群学生,晓得加减乘除即可策动和美术刚入行的程序员 课程目标制作一个静止的小球。尽管静止的小球非常简单,然而对于初学者意识游戏开发,初步理解编程语言,开发工具还是十分有帮忙的;而且对于初学者来说,也不宜学习太简单的内容,一旦过于简单,难以听懂,很容易令初学者产生退却的想法。所以咱们还是以简略、易懂为主。 课程介绍通过解说小球的静止,能够让初学者初步意识CocosCreator,TypeScript语言、运动学、坐标系,分辨率等常识。对持续深刻学习游戏开发有十分大的帮忙。重在入门,造成编程思维,达到一通百通的目标。 课程成果课程成果很简略,一个在窗口内运行的小球。对于有教训的人来说,很容易做出这样的货色,然而对于刚开始入门的人来说,还是很艰难的。 课程内容CocosCreator的装置和启动CocosCreator编辑器介绍VSCode代码编辑器的装置屏幕分辨率与坐标系节点和组件的介绍UI变换组件的介绍场景制作脚本解析直线运动小球静止的实现联系方式如果您在学习的过程中遇到问题,能够退出QQ群895174321分割我,我会尽力解答。也能够关注我的集体微信公众号《微笑游戏》给我留言。开发工具Cocos引擎版本:CocosCreator3.7.4开发语言:TypeScript课时数:10网盘地址:链接: https://pan.baidu.com/s/1skKndeScvL54SAh0IJw8xQ?pwd=xeye 提取码: xeye 在开始学习之前,先下载好须要的工具,能够晦涩的学习课程内容。我曾经将工具下载完都放到了我的网盘中。结语尽管本课程曾经做了屡次的查看,然而也不免有不正确的中央,还请大家海涵。课堂网易云课堂CCTalk欢送扫码关注GZH《微笑游戏》,浏览更多内容。

September 10, 2023 · 1 min · jiezi

关于javascript:hsvue3framework写一个框架要注意什么

文档,文档,文档 hs-vue3-framework HS Vue3 Framework简介:HS Vue3 Framework,是基于HS Vue3系列中最成熟和欠缺的中后盾框架,全面的系统配置,优质模板,罕用组件,真正一站式开箱即用 采纳时下最风行的 Vue3 UI 库--Element Plus 应用了当今最风行的技术框架: Vue3 + Vite + Typescript + Element Plus 个性:简化开发 通过配置环境,I18n, 路由等,就能启动利用,只需专一于业务开发预设款式 款式美观大方,无缝对接 Element Plus,随便组合页面,得心应手布局计划 丰盛的布局模式,具备高可配性,满足您的各类布局需要主题配置 丰盛的主题配置及光明主题适配技术支持 TODO我的项目地址: 文档地址 TODO 演示地址(Vue3.x + Typescript + Vite + ElementPlus)其它演示地址 Vue Pdf 演示地址(Vue3.x + Typescript + Vite + Pdfjs) Vue Ofd 演示地址(Vue3.x + Typescript + Vite + jszip + jsrsasign)当初微信技术交换群须要增加好友之后邀请,如须要入群探讨请关注微信公众号增加好友。TODO 请关注咱们的微信公众号TODO 适宜人群正在以及想应用 vue/element-plus 开发,最好是有肯定的编程常识,或者原来只从事切图写动态页的人想进步本人的前端能力。相熟 Vue.js 技术栈,应用它开发过几个理论我的项目。对原理技术感兴趣,想进阶和晋升的同学。下载&装置下载 git clone https://gitee.com/hs-xhl/hs-vue3-framework.git进入我的项目目录 ...

September 9, 2023 · 1 min · jiezi

关于javascript:js中两个对象数组如何比对合并

情景有时候,从后端的数据并非是能够间接应用渲染的,须要通过解决之后才可应用,比如说以下这种状况 //须要将这个数组中的字段合并,渲染在列表中const array1 = [{id:1,name:'张三'},{id:2,name:'李四'}]const array2 = [{id:1,age:6,desc:'形容1'},{id:2,age:7,desc:'形容2'}]办法办法1应用嵌套循环的形式去查找比对,我这里采纳Array.map办法嵌套Array.find办法来实现,此时的工夫复杂度为 O(m*n) //formArray:主数组,compareArray:须要联结的数组,key:比对的属性,isExpand是否将属性开展到item中function compareArrayUnion(formArray, compareArray, key,isExpand) { const resultArray = formArray?.length ? compareArray.map(item=>{ const result = compareArray.find(i=>i[key] === item[key]) ?? {} if(isExpand){ item = { ...item, ...result } }else{ item.result = result } return item }):[] return resultArray;}办法2应用Array.reduce将联结的数组开展为一个对象,主数组应用属性索引的形式查找,此时的工夫复杂度为 O(m+n) //formArray:主数组,compareArray:须要联结的数组,key:比对的属性,isExpand是否将属性开展到item中function compareArrayUnion(formArray, compareArray, key,isExpand) { const compareObj = compareArray?.length ? compareArray.reduce((acc, cur) => { return { ...acc, [cur[key]]: cur, }; }, {}) : {}; const resultArray = formArray?.length ? formArray.map((item) => { if(isExpand){ item = { ...item, ...compareObj[item[key]] } }else{ item.result = compareObj[item[key]] ?? {}; } return item; }) : []; return resultArray;}总结以这两种形式来比拟的话,我比拟举荐第二种,第一种形式的尽管写的语句少,然而它每次执行主数组每一项时,用来联结的数组都会跟着循环一次,因而它的工夫复杂度为O(m*n);而第二种形式,它的两个数组,由始至终都只是遍历了一次,因而它的工夫复杂度为O(m+n);由此可得第二种形式的执行效率较高 ...

September 9, 2023 · 1 min · jiezi

关于javascript:超全60000多字详解-14-种设计模式-多图代码总结Demo

超全60000多字详解 14 种设计模式 (多图+代码+总结+Demo) 之前读耗子叔文章时,看到过有句话没有实际,再多的实践都是扯淡,集体很同意。你感觉本人学会了,但实际与学会之间有着很大差异。单例模式 (Singleton Pattern)定义或概念单例模式:保障一个类仅有一个实例,并提供一个拜访的全局拜访点。实现的关键步骤:实现一个规范的单例模式其实就是用一个变量来示意是否曾经为以后类创立过实例化对象,若创立过,在下次获取或创立实例时间接返回之前创立的实例化对象即可,若没有创立过,则间接创立。 UML类图 Demo// 透明版 单例模式var CreateStr = (function () {var instance = null;return function (str) { if (instance) { return instance; } this.str = str; return instance = this;}})();CreateStr.prototype.getStr = function () {console.log(this.str);}let a = new CreateStr('s1');let b = new CreateStr('s2');console.log('a ------>', a); // { str: 's1' }console.log('b ------>', b); // { str: 's1' }a.getStr(); // s1b.getStr(); // s1console.log(a === b); // true// 代理版 单例模式function CreateStr(str){this.str = str;this.getStr();}CreateStr.prototype.getStr = function (){console.log(this.str);}var ProxyObj = (function () {var instance = null;return function (str) { if (!instance) { instance = new CreateStr(str); } return instance;}})();var a = new ProxyObj('s1');var b = new ProxyObj('s2');console.log('a ------>', a); // CreateStr { str: 's1' }console.log('b ------>', b); // CreateStr { str: 's1' }a.getStr(); // s1b.getStr(); // s1console.log('b ------>', a === b); // true最佳实际jQuery, lodash, moment ....电商中的购物车(因为一个用户只有一个购物车)Vue 或 React 中全局状态治理(Vuex、Redux、Pinia)全局组件 ...

September 8, 2023 · 13 min · jiezi

关于javascript:如何正确判断元素是否包含class

✅正确做法document.querySelector('#ele').classList.contains('red');❌错误做法document.querySelector('#ele').className.indexOf('red') > -1;为什么因为 className 不肯定是字符串,当查看 svg 元素时。 所以咱们要应用 classList 来判断,因为 classList 始终返回 DOMTokenList 对象

September 8, 2023 · 1 min · jiezi

关于javascript:新版Nodejs内置支持env文件

随着版本 v20.6.0 的公布,Node.js 当初内置了对.env文件的反对。当初,您能够齐全无依赖地将环境变量从.env文件加载到Node.js 应用程序中。process.env 加载.env文件当初非常简单: node --env-file .env1.什么是.env 文件?.env文件用于配置正在运行的应用程序中存在的环境变量。这个想法来自“The Twelve-Factor App”方法论,该方法论示意将在环境中的部署(例如开发、测试、生产)之间可能发生变化的所有内容存储起来。 配置不应成为利用程序代码的一部分,也不应签入版本控制。API 凭证或其余秘密等内容应独自存储并加载到须要它们的环境中。文件.env可让您治理无奈在环境中设置变量的应用程序的配置,例如开发计算机或CI。 许多不同语言的库都反对应用.env文件将变量加载到环境中,它们通常称为“dotenv”,Node.js罕用的NPM包有 cross-env, dotenv. 2.如何应用 .env 文件?一个.env文件看起来长这样: # 开发环境 .env.developmentNODE_ENV=developmentSECRET_KEY=rv3O62d1gu7s8vWpx通用咱们会将.env文件搁置到我的项目的根目录中,能够自定义文件命名,通过 --env-file 参数指定 .env 文件,待 Node.js 程序启动后,就能够从 process.env 中获取最新的环境变量。 $ node --env-file .env.development Welcome to Node.js v20.6.0.Type ".help" for more information.> console.log(process.env.NODE_ENV, process.env.SECRET_KEY)development rv3O62d1gu7s8vWpx> 3.与 dotenv 比照和dotenv相比,.env 文件反对的性能还相当根底。次要体现如下: 您以后无奈应用多行值不能应用变量扩大您一次只能指定一个文件。Node.js 将仅应用最初传递的 .env 文件,如下示例中,仅应用 .env.production 的变量:$ node --env-file .env.development --env-file .env.productionWelcome to Node.js v20.6.0.Type ".help" for more information.> console.log(process.env.NODE_ENV, process.env.SECRET_KEY)production grv3O62d1gu7s8vWpd如果在环境和文件中定义了雷同的变量,则环境中的值优先,Node.js 中 .env 的实现并非如此,而是会将环境中的笼罩掉。随着 Node.js 版本迭代,.env 文件的个性反对还有很多工作要欠缺,并且可能会增加其中一些性能。您能够点击左下角的“浏览原文”查看 Github 上更多探讨。 ...

September 8, 2023 · 1 min · jiezi

关于javascript:10-个功能强大的-JavaScript-动画库打造引人入胜的用户体验

大家好,我是大冶,一个酷爱前端开发和分享的工程师。我有一个专一于前端技术的公众号 【大迁世界】 ,心愿能与更多同行或者感兴趣的敌人们一起提高。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。 动画。从人群中怀才不遇、吸引访客注意力的绝佳形式。通过富裕创意的物体静止和晦涩的页面转换,不仅能为咱们的网站削减独特的美感,还能进步用户参与度,发明令人难忘的第一印象。 有了这 10 个功能强大的 JavaScript 库,创立动画再简略不过了。滚动动画、手写动画、SPA 页面转换、打字动画、色彩动画、SVG 动画......它们的性能无穷无尽。 1.Anime.js 地址:https://animejs.com/ Anime.js 在 GitHub 上有超过 4.3 万颗星,是最受欢迎的动画库之一。 它是一个轻量级 JavaScript 动画库,具备简略的 API,可用于为 CSS 属性、SVG、DOM 属性和 JavaScript 对象制作动画。应用 Anime.js,咱们能够播放、暂停、重启或反转动画。该库还提供了惊人的性能,可通过跟进和重叠动作为多个元素制作动画。该库还蕴含各种与动画相干的事件,咱们能够应用回调和承诺来监听这些事件。 2. Lottie地址:https://airbnb.io/lottie/ Lottie 是一个库,能够解析应用 Bodymovin 插件以 JSON 格局导出的 Adobe After Effects 动画,并在挪动和网络应用程序上进行原生渲染。这样,用户就无需手动从新制作由业余设计师在 After Effects 中创立的高级动画。仅网络版在 GitHub 上就有超过 27k 个星。 3. Velocity地址:http://velocityjs.org/ 应用Velocity,你能够创立色彩动画、变换、循环、弛缓、SVG动画等。它应用的 API 与 jQuery 库中的 $.animate() 办法雷同,如果 jQuery 可用,它还能够与之集成。该库提供突变、滚动和滑动成果。除了能管制动画的持续时间和提早外,还能在动画实现后的某个工夫反转动画,或在动画进行时齐全进行。该库在 GitHub 上有 17k 多颗星,是 Anime.js 的现实替代品。 ...

September 8, 2023 · 1 min · jiezi

关于javascript:基于高德地图API开发纯内网离线应用

我的项目应用环境为纯内网内网环境开发必备:本地离线地图瓦片资源、离线API一、本地离线地图瓦片资源高德地图官网API是反对OGC规范WMTS地图、XYZ格栅图层。1、通过biegmap等地图资源下载地图瓦片进行本地部署搭建离线地图服务。2、通过API进行加载XYZ格栅图层形式,拜访本地瓦片即可实现离线地图资源加载。二、地图渲染事件操作1、下载官网JS API本地部署失常拜访即可2、增加格栅图层 var map = new AMap.Map('container', { resizeEnable: true, layers: [new AMap.TileLayer.Satellite()] }); var xyzTileLayer = new AMap.TileLayer({ // 图块取图地址 getTileUrl: 'https://wprd0{1,2,3,4}.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&size=1&scl=1&style=8&ltype=11', zIndex: 100 }); // 增加图层 function addXYZTileLayer() { map.add(xyzTileLayer); }

September 6, 2023 · 1 min · jiezi

关于javascript:10个很少使用的JavaScript-Console-方法

大家好,我是大冶,一个酷爱前端开发和分享的工程师。我有一个专一于前端技术的公众号 【大迁世界】 ,心愿能与更多同行或者感兴趣的敌人们一起提高。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。 你肯定据说过 console.log() ,而且可能始终在应用它。它十分风行,在集成开发环境中键入时,Visual Studio Intellicode 等工具通常会在其余控制台办法之前举荐应用它。 在本文中,咱们将探讨一些最有用的控制台办法,以及它们在数据可视化、调试等方面的用处。 1. table()当你须要在代码中以表格模式(如对象数组)显示一组对象时, console.table() 办法就会派上用场。以汽车列表为例: const cars = [ { color: 'red', age: 4, maxSpeed: 120, }, { color: 'blue', age: 2, maxSpeed: 100, }, { color: 'yellow', age: 3, maxSpeed: 160, },];如何在控制台中查看它们? console.log() 是一种典型的办法: console.log(cars);在 Chrome 浏览器开发者控制台中,咱们能够查看咱们记录的对象的各种属性,档次不限。 咱们能够在 Node.js 终端中查看属性,还能够取得色调: 这是一种能够承受的办法,但 console.table() 办法提供了一种更优雅的代替办法: console.table(cars);console.table() 在 Chrome 浏览器控制台中: console.table() in Node.js Node.js 中的 ...

September 6, 2023 · 2 min · jiezi

关于javascript:来了解一下-Island-Architecture-孤岛架构

原文题目:Island Architecture 原文:Island Architecture | Maina Wycliffe Blog 作者:Maina Wycliffe 建设一个网站有不同的办法,其中之一便是多页应用程序(MPA),它大概在十年前就过期了,当初又从新流行起来。MPA曾经被Angular和React以及其余古代框架所遍及的单页利用(SPA)办法所取代。 因为应用软件迭代趋势的运作形式,办法/工具很容易过期。这并不是因为它的效率低,而是因为开发人员不再应用它们来反对其余货色。这就是多页利用(MPA)所产生的事件,开发人员开始采纳风行的Web框架,如Angular、React、Vue等。这导致了SPA应用的回升,因为框架变得越来越风行。 因为SPA的工作形式,导致咱们发送到浏览器的 Javascript 数量减少了。也就是说,如果没有 React 来治理状态和渲染,你就不能有一个 React Web 应用程序。SPA 应用 Javascript 来出现要在浏览器中显示的 HTML。在许多状况下,这是可取的,例如,在 Facebook 或 YouTube 等网络应用程序中,治理状态至关重要。但在其余状况下,这没有意义,例如博客、集体作品集等。 SSR Server-Side Rendering 服务端渲染当应用 Angular 或 React 等SPA框架时,服务器做的很少,所有的渲染都是在客户端实现的,也就是所谓的客户端渲染。要查看内容,你首先须要下载框架的运行态(JS须要撑持你的web应用程序),还须要一个渲染内容的环境,也就是浏览器。 这有一些毛病,值得注意的是它在屏幕上显示一些货色的速度很慢,这对低端设施和较慢的网络情况和搜索引擎优化的影响更糟——机器人和爬虫通常无奈渲染这些页面,也不能通过解析内容来获取显示后果。 咱们有两个规范的解决方案来解决上述问题:服务器端渲染(SSR)和构建时渲染(SSG)。SSG 相似于 SSR,但在构建时,不须要在服务器上对每个申请进行渲染。SSG 通常用于内容不那么动静的网站。这两种解决方案的问题在于,它们不能解决 SPA 的问题,而是推延它。 如果你想要领有任何模式的交互性,比方关上和敞开网页利用上的导航栏,你就须要从SSG或SSR中为渲染的利用润色。这其实是疏导你正在应用的框架的过程,从服务器传输状态,以便框架能够接管。这通常产生在绘制第一个内容之后(从服务器出现服务器端出现的 HTML 之后),但在 Web 利用中的交互性之前。 这意味着必须下载和解析框架所需的JS,并且用户必须期待所有这些事件产生后能力与您的Web应用程序进行交互。这意味着即便在咱们不须要交互性的页面上,即“对于咱们”页面、条款等等,依然须要执行所有这些下载和解析操作,这有点没有必要。 岛屿 Islands这就是孤岛架构(Islands Architecture)的用武之地了。设想一下:你能够应用纯 HTML 和 CSS 为所有动态内容创立 Web 应用程序,而后增加动静内容或交互区域(孤岛),这些区域能够应用框架来增加交互性,并且这些区域能够应用任何框架,运行态框架只有在应用到它的页面上才会被下载,而不是在网站的初始加载中。 Astro(我的网站是用Astro构建的)、Marko和最近的Qwik等Web框架都在实现这种架构办法。以Astro为例,Astro组件应用JSX的某些变体,但没有客户端状态,因而没有运行态。 Astro 框架Astro应用JS抉择退出的概念,这意味着在默认状况下,不会生成Javascript,除非你被动通知Astro须要蕴含这些Javascript。如下所示: <script> document.getElementById("menuToggle").addEventListener("click", () => { const collapsibleMenu = document.getElementById("collapsibleMenu"); collapsibleMenu.classList.toggle("navbar-menu-show"); collapsibleMenu.classList.toggle("navbar-menu-hidden"); });</script>以上JS代码片段来切换挪动菜单的关上和敞开 ...

September 5, 2023 · 1 min · jiezi

关于javascript:前端面试十万字书籍总结

JavaScript专题防抖你是否在⽇常开发中遇到⼀个问题,在滚动事件中须要做个简单计算或者实现⼀个按钮的防⼆次点击操作。 这些需要都能够通过函数防抖动来实现。尤其是第⼀个需要,如果在频繁的事件回调中做简单计算,很有可能导致⻚⾯卡顿,不如将屡次计算合并为⼀次计算,只在⼀个准确点做操作。 PS:防抖和节流的作⽤都是防⽌函数屡次调⽤。区别在于,假如⼀个⽤户⼀直触发这个函数,且每次触发函数的距离⼩于wait,防抖的状况下只会调⽤⼀次,⽽节流的 状况会每隔⼀定工夫(参数wait)调⽤函数。 咱们先来看⼀个袖珍版的防抖了解⼀下防抖的实现: // func是⽤户传⼊须要防抖的函数// wait是等待时间const debounce = (func, wait = 50) => { // 缓存⼀个定时器id let timer = 0 // 这⾥返回的函数是每次⽤户理论调⽤的防抖函数 // 如果曾经设定过定时器了就清空上⼀次的定时器 // 开始⼀个新的定时器,提早执⾏⽤户传⼊的⽅法 return function (...args) { if (timer) clearTimeout(timer) timer = setTimeout(() => { func.apply(this, args) }, wait) }}// 不难看出如果⽤户调⽤该函数的距离⼩于wait的状况下,上⼀次的工夫还未到就被革除了,并不会执⾏函数这是⼀个简略版的防抖,然而有缺点,这个防抖只能在最初调⽤。⼀般的防抖会有immediate选项,示意是否⽴即调⽤。这两者的区别,举个栗⼦来说: 例如在搜索引擎搜寻问题的时候,咱们当然是心愿⽤户输⼊完最初⼀个字才调⽤查问接⼝,这个时候适⽤ 提早执⾏ 的防抖函数,它总是在⼀连串(距离⼩于wait的)函数触发之后调⽤。例如⽤户给interviewMap点star的时候,咱们心愿⽤户点第⼀下的时候就去调⽤接⼝,并且胜利之后扭转star按钮的样⼦,⽤户就能够⽴⻢失去反馈是否star胜利了,这个状况适⽤ ⽴即执⾏ 的防抖函数,它总是在第⼀次调⽤,并且下⼀次调⽤必须与前⼀次调⽤的工夫距离⼤于wait才会触发。下⾯咱们来实现⼀个带有⽴即执⾏选项的防抖函数 // 这个是⽤来获取以后工夫戳的function now() { return new Date()}/** * 防抖函数,返回函数间断调⽤时,闲暇工夫必须⼤于或等于 wait,func 才会执⾏ * * @param {function} func 回调函数 * @param {number} wait 示意工夫窗⼝的距离 * @param {boolean} immediate 设置为ture时,是否⽴即调⽤函数 * @return {function} 返回客户调⽤函数 */function debounce(func, wait = 50, immediate = true) { let timer, context, args // 提早执⾏函数 const later = () => setTimeout(() => { // 提早函数执⾏结束,清空缓存的定时器序号 timer = null // 提早执⾏的状况下,函数会在提早函数中执⾏ // 使⽤到之前缓存的参数和高低⽂ if (!immediate) { func.apply(context, args) context = args = null } }, wait) // 这⾥返回的函数是每次理论调⽤的函数 return function (...params) { // 如果没有创立提早执⾏函数(later),就创立⼀个 if (!timer) { timer = later() // 如果是⽴即执⾏,调⽤函数 // 否则缓存参数和调⽤高低⽂ if (immediate) { func.apply(this, params) } else { context = this args = params } // 如果已有提早执⾏函数(later),调⽤的时候革除原来的并从新设定⼀ // 这样做提早函数会从新计时 } else { clearTimeout(timer) timer = later() } }}整体函数实现的不难,总结⼀下。 ...

September 4, 2023 · 9 min · jiezi

关于javascript:8月API漏洞汇总

随着网络信息安全边界一直弱化,平安防护对象一直减少,攻击面愈发放大,对数据安全、信息安全提出了微小挑战,同时也为网络信息安全市场关上了新的增量空间。API曾经成为其面向内外部继续进步能力输入、数据输入、生态维系的重要载体。API经济已是产业互联网中一个重要的组成部分,通过API经济,促成各行各业的数据变更和业务降级。为了更好的帮忙企业爱护好API资产和数据安全,防止因API平安问题给企业带来不必要的损失,星阑科技为大家整顿了最新一期8月份的API破绽报告,以便企业更好的进行查漏补缺,帮忙企业建设网络安全全局观,一直强化行业自律,更好地进行数字化转型。 1.【破绽】Roblox未受权信息泄露破绽破绽详情:据PC Gamer报道,大型在线游戏平台 Roblox(罗布乐思)近日遭逢重大数据泄露,约4000名开发者个人隐私信息被公开,其中包含 2017-2020 年期间加入过Roblox开发者大会的开发者信息,涵盖其姓名、电话号码、电子邮件地址、出生日期和理论地址。破绽危害:该破绽最后产生在2020年12月18日,大概3943个账户被泄露。裸露的数据包含姓名、用户名、电话号码、电子邮件ID、IP地址、家庭地址、出生日期和T恤尺寸等敏感细节。Roblox示意他们曾经分割了所有受影响的集体。受影响较小的用户收到一封表白歉意的电子邮件;受影响更重大的用户,他们收到赔罪的同时失去了一年的身份爱护。Roblox抵赖,第三方平安问题导致未经受权拜访其创建者的集体数据子集。影响范畴:此次入侵次要影响了2017-2020年间为Roblox开发者举办的以往会议的与会者,他们当初面临着骚扰和身份偷盗等网络欺骗的危险。小阑修复倡议:正确配置访问控制:确保正确设置拜访权限和受权策略。应用最小权限准则,只给予用户必要的拜访权限。启用身份验证:强制应用平安的认证办法,例如用户名和明码、拜访密钥等。加密数据:采纳加密措施对敏感数据进行加密,即便数据被盗取,也无奈解密和应用。定期审查权限和拜访日志:定期审查访问控制设置和拜访日志,及时发现异常流动并采取相应措施。更新降级:定期降级最新版本,以取得修复破绽和平安强化的补丁。 2.【破绽】Twitter API中断阻止登录破绽破绽详情:寰球范畴内的Twitter用户在登录、退出账号、分享推文、点击链接以及查看图片时,遇到了一系列问题,Twitter API的中断阻止了用户的拜访。这种影响范畴宽泛,简直波及到了所有应用Twitter的用户。因为对API后端进行了一些绝对较小的更改,却引发了重大的中断问题,影响到了用户应用API以及挪动和Web应用程序。破绽危害:寰球范畴内都有报告指出这次中断,用户们看到了与API拜访相干的各种错误信息。甚至Twitter的反对人员在他们的Twitter帖子中抵赖了这次中断,埃隆·马斯克起初也示意“一个小小的API更改居然会产生如此微小的影响,并且最终须要齐全重写”。影响范畴:这次中断产生在Twitter发表打算敞开收费拜访层之后不久。很显然,思考到Twitter的规模,从新设计整个API零碎将导致肯定水平的不稳固。这对于用户来说会带来一系列问题:服务不可用:因为API的中断,用户将无奈应用相干的挪动应用程序、网站或其余基于该API构建的服务。这将使他们无奈实现所需的操作或获取必要的信息。谬误音讯:在中断期间,用户可能会遇到与API拜访相干的各种谬误音讯。这些谬误音讯会给用户带来困惑和不便,因为他们无奈取得预期的后果或性能。影响业务流程:对于那些依赖于API的企业和组织而言,中断可能会重大影响其业务流程。如果他们的外围性能依赖于API,中断将导致业务停滞,造成损失并影响用户体验。小阑修复倡议:定期备份和监控:确保对API进行定期备份,这样在呈现中断时能够疾速还原至最近的可用状态。同时,设置监控零碎来实时监测API的运行状态,及时发现并解决潜在问题。逐渐更新和测试:当须要对API进行更改时,采取逐渐更新的形式,而不是一次性全面批改。在每个小的更改后,进行充沛的测试,以确保更改不会引发不可意料的问题。分布式容错策略:建设容错机制,以避免单点故障和中断。例如,能够思考应用多个服务器或云平台,并在其中一个呈现故障时主动切换至备用服务器。实时告诉和反对:在API中断期间,及时向用户提供精确的错误信息和状态更新。同时,提供疾速响应和反对,帮忙用户解决遇到的问题。 3.【破绽】PrestaShop SQL注入破绽破绽详情:PrestaShop/paypal是PrestaShop网络商务生态系统的一个开源模块,提供paypal领取反对。在3.12.0至3.16.3版本的PrestaShop paypal模块中发现了一个SQL注入破绽,容许近程攻击者取得权限,批改数据,并可能影响零碎可用性。这个问题的起因是,用没有通过正确过滤的用户输出来构建SQL查问。破绽危害:攻击者能够在易受攻击的零碎上执行任意 SQL 语句。依据正在应用的后端数据库, SQL 注入破绽会导致攻击者拜访不同级别的数据/零碎。在某些状况下,能够读入或写出文件,或者在底层操作系统上执行 shell 命令。通过 SQL 注入攻打,黑客能够绕过验证登录后盾,非法篡改数据库中的数据;还能执行任意的 SQL 语句,盗取用户的隐衷数据影响公司业务等等。影响范畴:3.12.0 <= PrestaShop/paypal <= 3.16.3小阑倡议:所有的查问语句都应用数据库提供的参数化查问接口,参数化的语句应用参数而不是将用户输出变量嵌入到 SQL 语句中。对进入数据库的特殊字符'"\<>&*; 等进行本义解决,或编码转换。确认每种数据的类型,比方数字型的数据就必须是数字,数据库中的存储字段必须对应为 int 型。数据长度应该严格规定,能在肯定水平上避免比拟长的 SQL 注入语句无奈正确执行。网站每个数据层的编码对立,倡议全副应用 UTF-8 编码,上上层编码不统一有可能导致一些过滤模型被绕过。严格限度网站所用数据库账号的权限,给此用户仅提供可能满足其工作的权限,从而最大限度的缩小注入攻打对数据库的危害。防止网站显示 SQL 错误信息,比方类型谬误、字段不匹配等,避免攻击者利用这些错误信息进行一些判断。 4.【破绽】Johnson Controls iSTAR Ultra未受权破绽破绽详情:Johnson Controls Metasys ADS/ADX/OAS Servers是美国江森自控(Johnson Controls)公司的一种应用程序和数据服务器。Johnson Controls Metasys ADS/ADX/OAS servers 10.1.5之前的10系列版本和11.0.1之前的11系列版本存在安全漏洞,攻击者利用该破绽可容许通过身份验证的用户将其余用户锁定在零碎之外并接管他们的帐户。破绽危害:Johnson Controls Metasys ADS/ADX/OAS Servers的特定10系列版本和11系列版本存在安全漏洞,攻击者胜利利用这些破绽会通过应用程序可编程接口获取明文凭证。影响范畴:以下版本的 Metasys ADS/ADX/OAS 服务器受到影响:Metasys ADS/ADX/OAS 版本X:10.1.6 之前的所有版本Metasys ADS/ADX/OAS 版本X:11.0.3 之前的所有版本小阑修复倡议:限度用户对敏感零碎的拜访:避免攻击者未受权拜访企业零碎或设施的另一个无效策略是,零碎设立之初就限度受权拜访,要求只有最值得信赖的员工才有权力拜访,这种做法对于爱护敏感的数据库和设施非常无效。使用IP白名单:IP白名单与Web利用防火墙(WAF)能够让企业组织中的非法用户拜访更加便当,在近程工作环境下特地有用,然而对于应用动静IP、拜访代理或VPN的用户来说行不通。因而,近程用户最好是寻求固定的IP地址,无论这些IP地址是来自其本身的ISP,还是来自VPN/代理服务提供商。监控登录流动:企业组织应该可能通过监控来发现异常的登录流动。例如,组织在部署了监控零碎之后,就能够及时发现企业零碎或设施中存在的可疑账户登录或异样登录流动,并采取相应的补救策略,如撤销账户拜访权限以防止攻打。定期运行破绽扫描:因为攻击者总是在不停地伺机寻找未修补的破绽,进而对指标网络施行未受权拜访。因而,企业组织应定期进行破绽扫描或抉择延聘第三方业余人员,帮助IT员工治理IT平安。及时更新应用软件版本:未及时对存在破绽的零碎进行修补是对业务平安形成最大威逼的起因之一,同时也是最容易被企业组织漠视的一个问题。5.【破绽】Apache RocketMQ近程命令执行破绽破绽详情:Apache RocketMQ是一款开源的分布式音讯和流解决平台,提供了高效、牢靠、可扩大的低提早音讯和流数据处理能力,广泛应用于异步通信、利用解耦、系统集成以及大数据、实时计算等场景。该破绽编号为CVE-2023-37582(CNNVD编号: CNNVD-202307-1076)。胜利利用此破绽的攻击者,最终可近程在指标零碎上执行任意代码。破绽危害:该破绽影响的是RocketMQ的NameServer服务(默认9876端口),如果NameServer服务端口裸露在外网,并且不足无效的身份认证机制,攻击者能够利用更新配置性能,以RocketMQ运行的零碎用户身份执行命令。影响范畴:0.0 <= Apache RocketMQ <= 4.9.60.0 <=Apache RocketMQ <= 5.1.1小阑修复倡议:增加身份认证机制,确保只有受权用户能力拜访和操作RocketMQ的音讯队列。官网已公布漏洞补丁及修复版本,请评估业务是否受影响后,酌情降级至平安版本。(4.x版本的用户倡议降级RocketMQ 至9.7或以上版本,5.x版本的用户倡议降级RocketMQ 至5.1.2或以上版本)。倡议在降级前做好数据备份工作,防止出现意外。 ...

September 4, 2023 · 1 min · jiezi

关于javascript:程序员的-4-种实用工具

微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势,学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。快来收费体验ChatGpt plus版本的,咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群,一起找bug,另外新版作图神器,ChatGPT4 已上线 https://cube.waixingyun.cn/home 我最近发现了这四款杰出的工具,并将它们增加到了我的清单中。你也肯定会喜爱应用这些神奇而实用的工具。 1. 生成 RegExRegexGPT 是编写 RegEx 模式的绝佳工具。它真的令人难以置信。试一试,你就晓得了。它的工作原理是:给它一个示例文本,输出预期后果,你也能够略微解释一下,这取决于你,而后抉择要生成 RegEx 的语言,点击生成按钮。 地址:https://regexgpt.app/ 上面举例说明如何应用它: 输入 2.生成调色板 - ColPat地址:https://colpat.itsvg.in/tpg?col1=%23752ed0&col2=%2366d9b8&col... TailwindCSS 正在流行,对吗?这里还有一个神奇的工具。它能够帮忙创立 TailwindCSS 调色板。家喻户晓,为一个项目选择配色计划并不那么简略。对其他人来说,这可能不是什么小事,但对我来说,这就是小事。 只需抉择色彩,而后点击 "生成 "即可。它将创立一个 TailwindCSS 调色板,你只需点击一下即可复制。十六进制、RGB和HSL是你能够抉择的三个选项。你能够从色轮中抉择,也能够输出你本人的色彩。 请看上面的截图: 以下是上述调色板的示例: { "primary": { "50": "#f9f7fd", "100": "#f1eafa", "200": "#e3d5f6", "300": "#cdb4ee", "400": "#9b68de", "500": "#6b2ac0", "600": "#4d1e8a", "700": "#381664", "800": "#210d3b", "900": "#10061d", "950": "#090411" }, "secondary": { "50": "#f7fdfb", "100": "#ebfaf6", "200": "#d6f5ec", "300": "#b6eddd", "400": "#6cdabb", "500": "#2fbc94", "600": "#22876a", "700": "#18624d", "800": "#0e392d", "900": "#071d16", "950": "#04100d" }, "tertiary": { "50": "#fafafa", "100": "#f2f2f2", "200": "#e6e6e6", "300": "#d1d1d1", "400": "#a3a3a3", "500": "#757575", "600": "#545454", "700": "#3d3d3d", "800": "#242424", "900": "#121212", "950": "#0a0a0a" }, "quaternary": { "50": "#f6fefb", "100": "#e7fdf5", "200": "#d0fbeb", "300": "#aaf8dc", "400": "#55f1b8", "500": "#12d990", "600": "#0d9c67", "700": "#09714b", "800": "#05422c", "900": "#032116", "950": "#02130d" }, "quinary": { "50": "#fbf5ff", "100": "#f4e5ff", "200": "#e9ccff", "300": "#d7a3ff", "400": "#af47ff", "500": "#8500eb", "600": "#5f00a8", "700": "#45007a", "800": "#280047", "900": "#140024", "950": "#0c0014" }}3.理解代码库 - bloop.aiBloop 是一个基于 Rust 的疾速代码搜索引擎。它容许疾速搜寻代码,并使代码更易于了解。他们有三种打算:集体(收费)、初创企业(45 美元)和企业(美元)。 ...

September 4, 2023 · 1 min · jiezi