vue组件封装常用到slot标签，为了不影响组件内部的样式通常使用：
<span v-if="$slots.default"> <slot><slot></span>
相关文章
-
JavaScript下拉菜单实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript下拉菜单</title> <style type="text/css"> * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:20px; } #navigation li { float:left; text-align:center; position:relative; } #navigation li a:link, #navigation li a:visited { display:block; text-decoration:none; color:#000; width:120px; height:40px; line-height:40px; border:1px solid #fff; border-width:1px 1px 0 0; background:#c5dbf2; padding-left:10px; } #navigation li a:hover { color:#fff; background:#2687eb; } #navigation li ul li a:hover { color:#fff; background:#6b839c; } #navigation li ul { display:none; position:absolute; top:40px; left:0; margin-top:1px; width:120px; } #navigation li ul li ul { display:none; position:absolute; top:0px; left:130px; margin-top:0; margin-left:1px; width:120px; } </style> <script type="text/javascript"> function displaySubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "block"; } function hideSubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "none"; } </script> </head> <body> <ul id="navigation"> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目1</a> <ul> <li><a href="#">栏目1->菜单1</a></li> <li><a href="#">栏目1->菜单2</a></li> <li><a href="#">栏目1->菜单3</a></li> <li><a href="#">栏目1->菜单4</a></li> </ul> </li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目2</a> <ul> <li><a href="#">栏目2->菜单1</a></li> <li><a href="#">栏目2->菜单2</a></li> <li><a href="#">栏目2->菜单3</a></li> <li><a href="#">栏目2->菜单4</a></li> <li><a href="#">栏目2->菜单5</a></li> </ul> </li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目3</a> <ul> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目3->菜单1</a> <ul> <li><a href="#">菜单1->子菜单1</a></li> <li><a href="#">菜单1->子菜单2</a></li> <li><a href="#">菜单1->子菜单3</a></li> <li><a href="#">菜单1->子菜单4</a></li> </ul> </li> <li><a href="#">栏目3->菜单2</a></li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目3->菜单3</a> <ul> <li><a href="#">菜单3->子菜单1</a></li> <li><a href="#">菜单3->子菜单2</a></li> <li><a href="#">菜单3->子菜单3</a></li> </ul> </li> </ul> </li> </ul> </body> </html> -
JavaScript日期格式转换
今天做页面需要把JS里面的Date规范输出为“YYYY-MM-DD HH:mm:SS”的字符串，本来想上网百度一个现成的，结果搜出来的全是错的 :( 自己写了一个，贴在这里，方便后面搜索的人： 把下面的代码复制到你的JS里，Date对象就可以直接调用toCommonCase(): Date.prototype.toCommonCase=function(){ var xYear=this.getYear(); xYear=xYear+1900; var xMonth=this.getMonth()+1; if(xMonth<10){ xMonth="0"+xMonth; } var xDay=this.getDate(); if(xDay<10){ xDay="0"+xDay; } var xHours=this.getHours(); if(xHours<10){ xHours="0"+xHours; } var xMinutes=this.getMinutes(); if(xMinutes<10){ xMinutes="0"+xMinutes; } var xSeconds=this.getSeconds(); if(xSeconds<10){ xSeconds="0"+xSeconds; } return xYear+"-"+xMonth+"-"+xDay+" "+xHours+":"+xMinutes+":"+xSeconds; } -
JavaScript避免嵌套代码浅析
目录前言一、何为嵌套代码二、避免嵌套1.提炼抽取2.反转排列前言 看过不少过度嵌套的代码, 我真正意识到问题的严重性是刚入职那会, 我在一个老项目里看到了40个连续的else if, 套了6层的if, for和forEach, 因为我们并没有做什么限制代码嵌套的提前约定. 呃, 那之后认识到会写代码和代码写得好完全是两种概念, 能够实现复杂的需求也并不能说明代码写得好, 开始注重代码结构方面. 事实是, 很多时候需要编写的逻辑本身就很恶心, 乍看之下, 堆页岩般的判定嵌套里似乎每一层都是必要的, 也只能说尽量让它看起来不那么恶心. 嗯, 比如少来几次Tab. 一、何为嵌套代码 嵌套代码是在函数内部添加更深层级的代码块, 放在javascript里, 常用的嵌套手段都包含符号’{‘, 那么对于一个代码块, 刨除平级的情况, 其内部的’{'越多就说明这个代码块的嵌套深度越大. 也就是: 禁止套娃. 对于以下代码, 它的嵌套深度为1: function fun1 () { console.log(1); } 而如果在内部加上if语句, 其深度将变为2: function fun1 () { if (true) { console.log(1); } } 而如果再加一个循环进去, 深度将变为3: function fun1 () { if (true) { for (let i = 0; i < 5; i++) { console.log(1); } } else { console.log(2); } } 而… 好的各位, 我最多最多就到这了, 再套下去我就要开始觉得恶心了.在这里可能没有那么直观, 而这段代码放在编辑器里, console.log前面已经有三道竖线了, 光是tab提行就已经开始不舒服了. 在三层嵌套以上, 你所做的一切就不再是一套单一的算法, 这已经开始逐渐演变为多个算法的组合了, 是可以做一些封装抽离而最好不要就这样混写在一起. 实战中三层嵌套绝对连半数以下的计算都处理不了, 那如果还有逻辑没编写呢. 二、避免嵌套 1.提炼抽取 提炼(Extraction), 我一般管这叫抽离, 当然, 不一定要抽到外面, 只要能维持嵌套深度处于稳定的水平就好(不过函数内实在不能在消减嵌套深度那还是抽到外面形成另外一个函数吧). 比如这段嵌套: function fun1() { const arr = [1, 2, 3, 4] if (arr.length = 4) { arr.forEach((ele) => { if (a === 4) { console.log(4); } }); } } fun1(); 可以改为这样: function fun1() { const arr = [1, 2, 3, 4] const xxx = (a) => { if (a === 4) { console.log(4); } } if (arr.length = 4) { arr.forEach(xxx); } } fun1(); 嵌套深度由4减小为3. 原理十分明了, 就好像在原生环境获取DOM, 有的人喜欢这样: function change() { document.querySelector("#scar").style.display = 'none'; } 有的人喜欢: function change() { const scar = document.querySelector("#scar"); scar.style.display = 'none'; } 抽离提炼就类似于将前者转化为了后者. 封装axios也是一样的道理(不过那更多还是为了避免接口变动导致的被动局面). 2.反转排列 反转(Inversion), 对于判定语句, 把正面条件排在负面条件前通常会需要更多的判定, 所以改为优先处理负面条件. 先把正面条件放前面: function justice(e) { if(e.length > 5) { for(let i = 0; i < e.length; i++) { console.log(e); } } else if (e.length === 2){ return 2; } else { return false } } 但是如果先进行负面条件判定: function justice(e) { if(e.length === 2) { return 2; } else if (e.length < 5) { // 这里也可以另起一个if, 不过这样可以节约一行 ) return false; } for(let i = 0; i < e.length; i++) { console.log(e); } } 可以看到现在深度层级由3减小到2. 这种优化方法需要先把少数, 需要特殊处理的情况在前面解决完及时退出, 剩下的多数情况就可以不放在判定语句中. 而在这个过程中, 需要把最特殊, 且不将其他特殊情况包含在内的情况写在前面, 越特殊, 越提前处理, 此处e.length === 2为最特殊, 而e.length < 5这个特殊情况将e.length === 2包含在内, 所以应当第二个处理. 我在前面也写过这种做法, 将判定嵌套改为平次的卫语句, 称作validation gatekepping, 感兴趣的话可以去看这篇: JavaScript多级判定代码优化浅析 不过还可以在平次判定这个基础上使用这个技巧, 我们把负面情况放在靠前的平次判定处理, 如果处理中途出现过多嵌套, 那就提炼抽离, 把正面条件放最后: function justice(e) { if(e.length === 2) { return 2; } if(e.length === 3) { return 3; } if (e.length < 5) { return false; } for(let i = 0; i < e.length; i++) { console.log(e); } } 截取最近项目里的代码作为例子, 现在有两个world, 一个新一个旧, 如果需要让旧world的视图更新, 那么需要将新world的world.webglGroup.children内的元素部分替换, 其他除world.frameInfo外也要全替换. async changeWorld(oldFrame, newWorld) { for (const key in newWorld) { if (key === 'frameInfo') { } else if (key === 'webglGroup') { for (const pro in newWorld[key]) { if (pro === 'children') { this.worldList[oldWorldIndex][key][pro] = this.worldList[oldWorldIndex][key][pro].filter((ele) => { return ele.type !== 'Group' }); this.worldList[oldWorldIndex][key][pro].push(...newWorld[key][pro].filter((ele) => { return ele.type === 'Group' })); } else { this.worldList[oldWorldIndex][key][pro] = newWorld[key][pro]; } } } else { this.worldList[oldWorldIndex][key] = newWorld[key]; } } } 以上是初版, 现在用Extraction提炼和Inversion反转去尝试降低嵌套深度: 先把world.webglGroup.children局部替换的代码提炼为replace, 已知world.frameInfo不需要替换, 那么正常的负面条件写法应当为key === 'frameInfo', 但即便如此key === 'frameInfo'和key === 'webglGroup'也是必须用else if处理的, 如果改成平次if又不能终止执行, 那么这两个特殊条件在一轮循环中都会被执行. 本着要把正面条件处理方案写最后的原则, 直接在最后一个特殊条件不满足(按照上文所述写法, 最后一个特殊条件不满足说明前面所列特殊条件均不满足)时执行正面条件处理方案. else if (key !== 'frameInfo') { this.worldList[oldWorldIndex][key] = newWorld[key]; } async changeWorld(oldFrame, newWorld) { let oldWorldIndex = this.worldList.findIndex((w) => w.frameInfo.frame === oldFrame); const replace = () => { this.worldList[oldWorldIndex][key]['children'] = this.worldList[oldWorldIndex][key]['children'].filter((ele) => { return ele.type !== 'Group'; }); this.worldList[oldWorldIndex][key]['children'].push(...newWorld[key]['children'].filter((ele) => { return ele.type === 'Group'; })); } for (const key in newWorld) { if (key === 'webglGroup') { replace(key); } else if (key !== 'frameInfo') { this.worldList[oldWorldIndex][key] = newWorld[key]; } } return this.worldList[oldWorldIndex]; } 只是判定需求不同罢了. 上面这种写法是在所有负面条件不满足时执行正面条件处理方案. 前面反转的例子是在任意负面条件不满足时结束执行. 但遵循两种优化手段的原则都可以实施优化. 到此这篇关于JavaScript避免嵌套代码浅析的文章就介绍到这了,更多相关JS避免嵌套代码内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！ -
JavaScript多级判定代码优化浅析
目录一、场景二、优化多级判定1.优化if-else结构2.二元运算符简化一、场景 业务代码里, 一次操作可能会前置多个判定, 我以前只是在函数的开头使用if语句去做这些事情, 虽然只是拦截一下不需要做else, 但是好多个判定堆在一起看着会有点…low, 而且, 如果这些东西堆在函数开头的话, 看起来就像这样: xxx () { xxx xxx xxx xxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx } 像在竖大拇指 ), 咳…说回这种方法. 这其实是使用二元运算符 "&&"完成的一种简化写法, 可以理解为一种没有else的三元运算(因为我的逻辑里需要这种没有处理办法的写法), 我原本以为它需要void来驱动…的确可以在这种表达式外围包裹void, 我的确是这么做的, 整整一天. void 运算符对给定的表达式进行求值，然后返回 undefined。 但其实根本没必要, void与否并不干扰执行. 在Vue源码(此处仅指Vue2.6版, 我最近在看这个)里有大量的运用逻辑运算符来表达 “那么” 或者 “so” 的写法, 比如 src/core/vdom/patch.js中的这个函数. function sameInputType (a, b) { if (a.tag !== 'input') return true let i const typeA = isDef(i = a.data) && isDef(i = i.attrs) && i.type const typeB = isDef(i = b.data) && isDef(i = i.attrs) && i.type return typeA === typeB || isTextInputType(typeA) && isTextInputType(typeB) } 二、优化多级判定 最初我在使用这种改进后的if结构, 不再使用包裹式, 而是这种像闸口一样的结构. 当然特殊情况也还是要用if-else结构, 能优化就优化, 不能也不要强求. 1.优化if-else结构 就像这样: if() { if() { } else if() { } else if() { }} else if () { if() { } else if() { } else { }} 再复杂一些, 再在内部加入各种逻辑, 就有些头疼了. 完全可以把每个条件单独分出一个if, 顺序不变, 比如以上可以优化为: if () { if () { } if () { } if() { }}if () { if () { } if () { } else { // else一般没什么办法... }} else if里的"或"关系也可以单独拆一个 if 出来, 在看起来很复杂的情况下, 提升可读性. 图示一下的话, if-else-if结构就像深墙老院: 优化后的if结构更像是关隘: 有一个专有名词validation gatekeeping(验证守护), 即是描述这种验证结构. 但是一定注意判定条件的次序, 有些地方是必须用else if的, 否则会出现一个条件同时执行了多套处理方案的情况比如下面这个例子: for (const key in newWorld) { if (key === 'webglGroup') { this.worldList[oldWorldIndex][key]['children'] = this.worldList[oldWorldIndex][key]['children'].filter((ele) => { return ele.type !== 'Group' }); this.worldList[oldWorldIndex][key]['children'].push(...newWorld[key]['children'].filter((ele) => { return ele.type === 'Group' })); for (const pro in newWorld[key]) pro !== 'children' && pro !== 'position' && pro !== 'rotation' && pro !== 'quaternion' && pro !== 'scale' && (this.worldList[oldWorldIndex][key][pro] = newWorld[key][pro]); } else if (key !== 'frameInfo') this.worldList[oldWorldIndex][key] = newWorld[key]; } 这里把else if替换成if就会导致key为webglGroup时两条逻辑均会被执行. 所以原则还是能优化的优化. 2.二元运算符简化 嵌套else-if结构不太好用这种方式, 对于优化后的if结构用二元运算符重写, 个人觉得外层的大判定还是用if可读性会更好, 内部小判定用二元符简洁, 但其实你要是用二元运算符做嵌套判定结构的话, 层级问题会难以处理, 多个’&&'运算连在一起的时候JavaScript会将其解析为 仅最后一个&&为判定, 其他&&全表示 ‘和’ 关系. 当然如果你愿意在里面写函数的话是可以解决这个问题的, 用三元运算符做大判定也是可以的, 但是不好… 重写成如下: if (10 > a > 0) { a > 1 && b > 3 && console.log('HelloWorld_1'); (a > 2 && b > 4 || a === 100 && b > 10) && console.log('HelloWorld_2') // 这句可以再拆一个if出来的, 只是为了说明判定原理, 括号需要加 // a大于2并b大于4 或 a等于100并b大于10 均可输出HelloWorld_2 } if (a > 10) { // 可以结合三元运算符 a === 12 ? c === 3 && console.log("a") : (b === 6 || c === 3 && a !== 15) && console.log("b") // 如何让前端同事追杀自己 // 如果a等于12, 判定如果c等于3输出a // 如果a不等于12, 判定b等于6或c等于3并且a不为15,输出b } 但是这种逻辑运算符我现在没有找到能在判定完成之后跳出执行的方法, 也就是说你可以用这个方法沿路做一些顺手的操作, 但是不能像在if里那样做完判定可以return跳出函数. const a = 3 < 4 && 1 console.log(a) 然后, 额, 你可以用这种方法返回值 目的是提升可读性和简洁化代码, 如果一个很长的处理方案或者很长的条件就这样安插在二元运算符中间, 适得其反. 到此这篇关于JavaScript多级判定代码优化浅析的文章就介绍到这了,更多相关JS多级判定内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！ -
JavaScript快速实现一个颜色选择器
目录颜色模型HSV 与 HSL 的区别实现选择器色相饱和度和明亮度hsv转rgb透明度基于HSL的颜色选择器使用canvas在做前端界面开发的时候，遇到需要改变颜色的需求，就需要使用颜色选择器。 针对这个问题，第一想法，自然是H5提供了input color，可以实现。但不出意外的，IE并不支持。而且，chrome的实现方式和firefox也不太一样，见下图： 左图是chrome的，浏览器自身实现的一个颜色选择器控件；右图是firefox的，引入的是操作系统自带的颜色选择器控件。 鉴于这些差异性，就很有必要实现一个统一的颜色选择器组件，譬如我们来实现一个类似chrome浏览器自带的这种选择器。 要做这个组件，首先需要了解的一个知识点，就是颜色模型。 颜色模型 我们前端开发，最常见的颜色模型就是RGB，即红绿蓝三基色模型，而前端浏览器能支持颜色显示的颜色模型只有两种：RGB和HSL。 其中，RGB模型是以三色的值在0-255以内的范围内，混合成一种颜色，对机器较友好，但并不太适合人直观的进行颜色选择。所以，通常的颜色选择器一般会使用另外两种更面向视觉感知的模型：HSV 和 HSL。关于颜色模型的详细知识，可见 颜色模型的基础知识。 而chrome浏览器自带的颜色选择器，就是基于HSV的。 HSV 与 HSL 的区别 HSV是基于色相H(hue)、饱和度S(saturation)、明度V(Value)；HSL基于色相H(hue)、饱和度S(saturation)、亮度L(lightness)。 其中色相是一样的，本质都是一种颜色值。 在这两个模型中，色相是以六大主色为基础，分别按60度的间隔排列在圆环上。 这六大主色分别是：0°红、60°黄、120°绿、180°青、240°蓝、300°洋红、360°红。 而在前端进行布局设计时，常常把圆环处理成长方形的色块，通过颜色的线性渐变方式进行分段处理，角度换算成一定的比例，如下所示： 而饱和度和明亮度都是有区别的，为方便理解颜色选择器，本文概括简单的描述，如下： HSV中的S饱和度，反映色相颜色中混入白色的值，呈现白色到色相(H)颜色的变化；HSL中的S饱和度，反映色相颜色中混入灰色的值，呈现的是一种从灰色到色相(H)颜色的变化。HSV中的V明度，体现的是从黑色到色相(H)颜色的过渡。HSL中的L亮度，体现的是从黑色到色相(H)颜色再到白色的过渡。 另外需要明确的是，各个部分的取值范围：Hue色相：0 - 360；饱和度和明亮度都是：0 ~ 100%。 具体的实现上的差别，我们可以接着往下看。 实现选择器 色相 色相的原理上面已经介绍了，HSV和HSL一样。落实到代码层面的话，也是很好实现的，以css和div的方式，只需要进行颜色的线性渐变即可： <div class="div-bar"> <!-- 色相柱 --> <div id="colorBar" class="color-bar"></div> <!-- 滑动块 --> <div id="divSlider" class="div-slider"></div> </div> .div-bar { position: relative; width: 10px; height: 200px; margin-left:15px; cursor: pointer; } .color-bar { background: linear-gradient(180deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); width: 10px; height: 200px; margin-left: 20px; } .div-slider { ... width: 8px; height: 8px; } 这里是竖向的色相柱，宽高10 * 200，如果需要横向的改动宽高布局即可。 计算色相柱的滑块位置 要想移动滑块获取位置信息，首先需要监听色相柱上的鼠标事件，具体如下： colorBar.addEventListener('mousedown', function(e) { setHueSlider(e) document.addEventListener('mousemove', setHueSlider) }) document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', setHueSlider) }) 在setHueSlider函数中需要处理的，就是滑块点在色相柱上的位置，然后通过计算比例得到一个hue值： const clientRect = colorBar.getBoundingClientRect() // 获取位置信息，色柱高度-colorBarHEIGHT let yDiff = event.clientY - clientRect.top yDiff = yDiff > colorBarHEIGHT ? colorBarHEIGHT : (yDiff < 0 ? 0 : yDiff) // 设置滑块的位置，防止滑块脱离色柱 const yTop = yDiff < 9 ? 0 : (yDiff - 9) divSlider.style.top = yTop + 'px' // 色相在360度以内，计算对应的比例值， 0 - 360 color.hue = Math.round((yDiff / colorBarHEIGHT) * 360 * 100) / 100 | 0 通过色相柱的滑块位置比例的计算，我们就能得到对应的色相值了。 饱和度和明亮度 除了色相柱以外，我们还需要设定一个基于饱和度和明亮度的颜色面板，这时候，上面对于这两块的区别介绍，就有了用武之地。 颜色面板一般是一个长方形的区域，以HSV为例，上面提到，HSV的饱和度可以简化为白色到色相颜色的变化，如果当前的色相颜色是红色，则饱和度就是白色到红色的变化；而明亮度则体现的是黑色到红色的变化。我们在设计面板的时候，以一个长方形的面板区域： 如果把面板的背景色设置为色相颜色-红色；从左到右设置饱和度，可在白色上设置从左至右的透明度变化，即最左边白色，到最右边的完全透明，线性渐变；从下到上设置明亮度，就可在最下面黑色，到最上面的完全透明，线性渐变。 如此则可简化HSV模型里的颜色面板，在具体的实现上，可以通过下面的这个图来理解： 当然，饱和度和明亮度在水平或者垂直方向上是可以调换的。 要设置颜色面板，使用div+css即可，在代码实现上有多种方式，下面介绍的只使用一个div的方式，实现一个宽高300 * 200的颜色面板，(其他的方式还有使用两个div或者使用伪类等等)： <div class="div-panel"> <!-- 颜色面板 --> <div id ="colorPanel" class="color-panel" style="background-color: #f00;"></div> <!-- 滑块 --> <div id="divPicker" class="div-picker"></div> </div> .div-panel { position: relative; width: 300px; height: 200px; cursor: pointer; overflow: hidden; } .color-panel { position: relative; height: 200px; width: 300px; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #FFF, transparent); } .div-picker { ... width: 12px; height: 12px; } 计算这两个值 仍然是需要监听鼠标事件，获取鼠标位置信息，事件监听与色相的基本一样，都是监听鼠标的三个事件，这里略过。 直接看如何计算饱和度和明亮度，根据前面的介绍与布局实现，我们定义的面板横向X轴是饱和度，面板纵向Y轴是明亮度，于是可以如下计算： // 计算鼠标移动位置，面板宽度panelWIDTH，高度panelHEIGHT const clientRect = colorPanel.getBoundingClientRect() let yDiff = event.clientY - clientRect.top let xDiff = event.clientX - clientRect.left xDiff = xDiff > panelWIDTH ? panelWIDTH : (xDiff < 0 ? 0 : xDiff) yDiff = yDiff > panelHEIGHT ? panelHEIGHT : (yDiff < 0 ? 0 : yDiff) // 设置滑块位置，保证滑块至少一半在面板内 const yTop = yDiff - 6 const xLeft = xDiff - 6 divPicker.style.top = yTop + 'px' divPicker.style.left = xLeft + 'px' // 饱和度和明度，这里没有取百分比的值，后续转换时需要注意 color.saturation = Math.round(xDiff / panelWIDTH * 100) color.value = Math.round((1 - yDiff / panelHEIGHT) * 100) hsv转rgb 通过这样的计算，就能获取HSV对应的三个值了，后面就可以进行转换成对应RGB颜色值。 const hsvToRgb = function (hue, saturation, value) { saturation = saturation * 255 / 100 | 0 value = value * 255 / 100 | 0 if (saturation === 0) { return [value, value, value] } else { satVal = (255 - saturation) * value / 255 | 0 ligVal = (value - satVal) * (hue % 60) / 60 | 0 if (hue === 360) { return [value, 0, 0] } else if (hue < 60) { return [value, satVal + ligVal, satVal] } else if (hue < 120) { return [value - ligVal, value, satVal] } else if (hue < 180) { return [satVal, value, satVal + ligVal] } else if (hue < 240) { return [satVal, value - ligVal, value] } else if (hue < 300) { return [satVal + ligVal, satVal, value] } else if (hue < 360) { return [value, satVal, value - ligVal] } else { return [0, 0, 0] } } } 透明度 在RGB\HSV\HSL三种颜色模型里，透明度都是独立的一个属性，不会影响到具体颜色的实现，可以单独处理这个值。所以，如果我们需要透明度，在布局上可以和色相柱一样，使用长条状的div，通过计算位置比例来计算当前选中的透明度值，布局如下： <div class="div-alpha"> <!-- 透明柱状 --> <div id="alphaBar" class="alpha-bar" style="linear-gradient(180deg, #f00, transparent)"></div> <!-- 滑块 --> <div id="divAlphaSlider" class="div-slider"></div> </div> .div-alpha { background-image: linear-gradient( 45deg,#c5c5c5 25%,transparent 0,transparent 75%,#c5c5c5 0,#c5c5c5),linear-gradient( 45deg,#c5c5c5 25%,transparent 0,transparent 75%,#c5c5c5 0,#c5c5c5); } 在计算上，也基本和色相柱一样，只是透明度取值在0-100： color.alpha = Math.round(100 - yDiff / alphaBarHEIGHT * 100) / 100 有了透明度的值，获取颜色值时，在RGBA或这HSLA中加入透明度即可。 基于HSL的颜色选择器 上面讲解过HSV和HSL的区别，根据各自的特点，要实现HSL的选择器，只需要进行少许的改动。 首先，Hue色相和透明度，两者没有区别，一模一样，不需要做任何改动。 其次，需要改动饱和度和明亮度的颜色面板，HSL在布局时只需要改动一点，即面板的css样式： .color-panel { position: relative; height: 200px; width: 300px; /*横向X轴饱和度设置为灰的渐变，纵向Y轴设置为白到透明到黑*/ background: linear-gradient(to bottom, #fff 0%, transparent 50%, transparent 50%, #000 100%), linear-gradient(to right, #808080 0%, transparent 100%); } 改变颜色面板以后，获取HSL的色相、饱和度、亮度、透明度的值的方式，都与在HSV模式下一样。 注意，这时候获取的HSLA的颜色，如果要使用到RGBA，就需要进行HSL到RGB的转换，转换函数详见 颜色模型的基础知识。 综上，则完成了一个颜色选择器的。 使用canvas 除了基于div+css布局颜色选择器以外，我们还可以使用canvas来处理颜色选择器。 在布局上，色相、面板、透明度，都使用canvas来替换，由于canvas也可以使用线性渐变，所以在设置色彩的UI布局上是没有任何问题的。 在滑块的设计上也大致相同，只需要微小的改动，因为使用canvas以后，获取颜色的方式就不一样了。 在canvas的色相和面板中，可以直接获取到canvas对应位置的像素点，而该像素点本身就是一个rgba的颜色值。 所以这个带来的好处就是，我们可以省略转换过程，而直接获取到可用的颜色值。当然，不管是div还是canvas，因为布局方式和获取颜色值的方式不一样，在所能得到的颜色值的数量上会有差别，特别是canvas方式，和画布本身的像素点有关。 但是，两种方式都可以在几百万以上的颜色值，完全满足我们的需求。 以上就是JavaScript快速实现一个颜色选择器的详细内容，更多关于JavaScript颜色选择器的资料请关注本站其它相关文章！ -
JavaScript和ECMAScript之间的关系
本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于JavaScript和ECMAScript之间关系的相关问题，ECMAScript 也是一门脚本语言，缩写为ES，通常看做JavaScript的标准化规范，下面一起来看一下，希望对大家有帮助。前端（vue）入门到精通课程：进入学习一、JavaScript是ECMAScript的扩展语言ECMAScript 也是一门脚本语言，缩写为ES，通常看做JavaScript的标准化规范。但实际上JavaScript是ECMAScript的扩展语言，因为ECMAScript只提供了最基本的语法，通俗点说只是约定了我们的代码如何编写，比如定义变量和函数，循环和分支…它只是停留在语言层面，并不能用来完成我们应用中的实际功能开发。JavaScript实现了ECMAScript的语言标准，并且在这个基础之上做了一些扩展，使得我们可以在浏览器环境中操作DOM 和 BOM，在node环境中可以做读写文件之类的操作。在浏览器环境中，JavaScript = ECMAScript + BOM + DOM 在node环境中，JavaScript = ECMAScript + Node APIs所以说，JavaScript中语言本身指的就是ECMAScript。二、ECMAScript的发展过程 ECMAScript2015 是值得我们单独拿出来了解的因为ES2015 距离上一个版本相隔时间过长，发布的内容过多，导致这个版本包括了很多颠覆式的新功能。值得注意的是，ES2015 开始按照年份命名，不再按照版本号命名。随着web的快速发展，从2015年开始， ES保持每年一个版本的迭代。扩展总结1996年11月，JavaScript的创造者——Netscape公司，决定将JavaScript交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布了262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。该标准从一开始就是针对JavaScript语言制定的，但是并没有称其为JavaScript,主要有以下两个原因：一是商标，Java是Sun公司的注册商标，根据授权协议，只有Netscape公司可以合法的使用JavaScript这个名字，而且JavaScript本身也已被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA,而不是Netscape，这样有利于保证这门语言的开放性和中立性。两者的关系可以总结为：ECMAScript是JavaScript的规格，JavaScript是ECMAScript的实现。（ECMAScript还有方言名字JScript和ActionScript）
