|
|| 页面从最低适配开始
=============================================== || openlayers 官网：https://openlayers.org/ || openlayers API整理：https://segmentfault.com/a/1190000020297846 =============================================== || css 纯Css编写：https://techbrood.com/ =============================================== || Vuetify 官网：https://vuetifyjs.com/zh-Hans/getting-started/quick-start/ =============================================== || 若是数据库字段名字不规范，一定要改过来，就算会伤到数据（当然，这是在开发模式下且数据量比较少的情况下。如果数据多了，且名字命名有误的情况下，没办法，记得留个注释说明） =============================================== || 有关 Git：https://www.softwhy.com/article-8637-1.html =============================================== || 知道 nodejs 和 web端js 区别和共性? http://www.imooc.com/article/304315 =============================================== || 变量命名神器 CodedIF =============================================== || 前端开发注意事项: || # 涉及到功能模块： || ## 1. 检测用户是否已登录 || ## 2. 功能触发前提条件是否以满足 || ## 3. 样式统一 =============================================== 2019-09-24 1. 组件之间的引用注册 使用的时候，使用 注册 的名字 2. 项目中 一个页面由很多组件构成时，找不到对应功能时，到对应的组件中去找，去阅读代码。 3. vue中的有 watch ，它里面的方法都带有两个参数 ：new（新的） 和 old（之前的） 是监听的意思，可以理解成 放哨者 ，被监控的目标有一点风吹草动都会被监控到，不过这个哨兵记性不大好。 // # 比如：在 data 中，写了一个 initwidth : window.innerwidth // # 在 watch 中监听 initwidth watch：{ initwidth （newValue, old）{ console.log （new，old） } } 只要被监听的对象发生了变化，watch就会生监听就会生效 4. this.imageCache = JSON.parse(JSON.stringify(image)) 解引用 // # 解引用 this.imageCache = JSON.parse(JSON.stringify(image) 这样做的好处是，在改变 image 给 this.imageCache 的属性时，不会影响到 image 的属性 5. if（a）{ } 其中的 if 中的 a 表示：a == null a是否为空的判定。 6. :style="{font: ann.font, color: 'red' }" :style="{font: ann.font, color: 'red' }" 注意写法 color 和 font 的写法，color 不是动态变量，font 是动态变量。其次，如果 red 不加 单引号的话，是不能识别到 red 这个颜色的，识别到的会是 黑色。 7. 今天接受了一个新知识，页面中的象限问题。从页面上来看，整个页面都是在第四象限中的。按左上角的坐标 （ 0,0 ）来看，在第四象限中， x 轴为 正 ，y 轴为 负 。 8. moment 格式化时间 // 默认格式化当前时间的两种方式 .moment()format('YYYY-MM-DD HH:MM:SS') .moment(Date.now()).format('YYYY-MM-DD HH:MM:SS') // # HH 24小时制 hh 12小时制 9. 手动实现宽度自适应、 var 对象 = window.innerwidth 高度也是一样的做法；这个对象会随着窗口宽度的改变而改变。完全是动态的 10. 在 switch case 中写函数的时候，不能少了’{}‘ 就像这样： switch （条件表达式）{ // 这里的 ’1‘ 是数字型（Number），一定要注意 case 1： { 函数 break } } （这段是在vue中写的，所以就没有用到分号，在js中，我们需要用到分毫来分隔他们） 11. 在我们需要跳转页面面的时候，我们可以 let 一个对象 = xxx/xxxx/ ${id}xxx.html 这样做可以使更加灵活。 let a = xxx/xxxx/ ${id}xxx.html 12. TypeError: Cannot read property '$createElement' of undefined 出现这个错误 ，是因为 路由里的 component 多了个 ‘s’ 13. 文本居中 text-align：center 14. 使用插件的时候，遇到没有办法操作的 css 时，可以操作 插件里的 css 来达到目的。 如果依然不行的话，可以看他是否有插槽，就像 vuetify 里的 面包屑 一样 15. props 的规范写法（唐哥说的规范写法） props： { bin：{ type：bin 的类型（比如：Array，String 啥的） } } 17. v-for 循环时，连带着标签中的函数也会一起复制，那么当我们要操作循环出来的代码块中的一个 动态变量的时候，就会遇到，操作一个，多有的都会变动，因为他们是双向绑定的，因此，我们可以把 这个 动态变量 变成 当前对象（item）的原型属性，这样的话，就可以做到只触发 当前 item 的动态变量。 item中本没有toggle，无中生有的，这种写法就是把 toggle 变成 这个 item 的一个原型属性了 item中有toggle的，那么，这种写法就是更改 item 里这个属性的 value（值）。 （需要注意的是：通过这个函数 无中生有的 toggle 是不会被渲染到数据库的，因为这个是在页面上添加的，） 19. set方法 强制刷新（强制监听刷新） 这是一种格式：this.set(this.modelManger, 'myModel',[数据]) // # 举个例子（只是其中一种用法的表现形式）： items:['a', 'b', 'c'] this.$set(items, 1, xxx) 2019-10-25 20. 向 数据库 里 存放 字段 在 MIntelliphileWeb 项目中，前辈们已经开发好接口文档，调用相应的接口文档进行数据读取，但是有的时候，可能数据库里没有这个字段，在使用更新update的时候，我们只需要把需要添加的字段添加到更新的内容中去，一般来说都是可以添加到里面的 （需要注意的是，这是后端数据允许的情况下，） 21. $set 方法 $set 方法，在使用的时候需要注意一点，就是它在 data中没有某个返回对象时，我们又想更新某个对象，就可以用到set方法，有一点需要注意的是，this.$set(data里有的数据对象, 被更新的目标, 值) 22. 调用后台数据 点击按钮获取数据，并在页面上显示数据时，需要注意一点：我们需要在点击的时候请求后台数据，这样才能将数据请求到页面上去，没有请求的话，数据都是空的。 23. F5 和 CTRL+F5 刷新页面的区别 因为浏览器带有缓存机制，当访问一个重来没有访问过的页面时，浏览器就会在第一次访问的时候将一些数据缓存下来。 那么在按 F5 刷新页面的时候，它调用的就是缓存下来的一些数据。 而 Ctrl+F5 刷新 则是直接请求服务器，使用最新的数据。 具体查看：https://blog.csdn.net/guanfl/article/details/78487855 24. 用css对鼠标指针样式操作 Css cursor鼠标指针鼠标光标样式 cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url) 1）、div{ cursor:default }默认正常鼠标指针 2）、div{ cursor:hand }和div{ cursor:text } 文本选择效果 3）、div{ cursor:move } 移动选择效果 4）、div{ cursor:pointer } 手指形状 链接选择效果 5）、div{ cursor:url(url图片地址) }设置对象为图片 3、鼠标指针说明 cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 4、布局结构 p { cursor: text; } // # css注释： 设置鼠标移动到html p对象时鼠标变为文本选择样式 */ a { cursor: pointer; } // # css注释： 设置鼠标移动到a超链接对象时鼠标变为手指形状（链接选择） */ body { cursor: url("小图片地址")} //# 设置鼠标指针默认为一个小图片 */ 25.webstorm 批量修改， 当前修改： Ctrl+H -> Ctrl+R 批量修改: Ctrl+Shift+H -> Ctrl+Shift+R 26. 使用 路由 传参 路由 传参有两个参数，params 和 query 在使用的时候，需要注意几点 1）：params 不能像 query 那样 都可以用 name 和 path，它只能用 name，用了 path，会无视掉 params 里的内容 2）：params 传值就像 post 一样，query 传值就像 get 一样，把值带过去后，在那个页面刷新页面，页面路径上也还是会有带过来的值，而 params 就不一样，就算带过来了，刷新页面后，谁也不认识谁。 3）： 使用 params 格式是这样的 this.$router.push ({name: '', params: { id: '', select: ''}}) 里面的 id ，select 是要传的值 路由里的路径也要带上相应的内容 { path: '/路径/：id/：select'} 对应页面要用带过来的东西的话，就这样写 this.$route.params.id this.$route.params.select (这样写，就能把带过来的东西拿出来用) 使用 query 格式： 由于它两个都可用，所以只写一个 this.$router.push ({path: '', query: { id: '', select: ''}}) 对应页面要用带过来的东西的话，就这样写 this.$route.query.id this.$route.query.select (这样写，就能把带过来的东西拿出来用) 2019-10-28 27. 出现滚动条 思路：当内容 width 大于 容器width 时 设置 overflow 会有滚动条出现 不过需要注意的是，它里面包含了 x轴 和 y轴的，因此，如果需要哪条轴消失不见，可以这样写： overflow-x：hidden 把X轴的滚动条隐藏起来 2019-10-31 28. 数组去重 set 该方法属于效率很高的一类数组去重 function 函数名 () { this.abc = Array.from(new Set( arr )) } 29. 关闭 webstorm中的 黄标警告 Unterminated statement File > Settings > Editor > Inspections > JavaScript > Code style issues > 勾选掉 Unterminated statement 2019-11-04 30. Object.keys()循环对象 当遇到这种，对象本来就是空的，但是在生成的时候，自己给了一些原型属性在里面，那么我们怎么来判断它是否为空呢？那么就可以用到这个 Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。 用法是这样的： Object.keys(arr) 根据它返回得到，看它的长度就可以判断它是否为空了。 31. Object.keys() 循环操作 可以直接获取它的key和值 Object.keys(object).forEach((key)=>{ console.log(key);//我是key key 就是对象中的{ id： ‘值’ } console.log(object[key]);//我是值 值 就是对象中的{ id： ‘值’ } }) 关于属性的总结： 添加属性 ：obj.属性名=属性值； 取读属性：obj.属性名 例如：console.log(obj.gender);注意：如果没有该属性会返回undefined并不会报错。 修改属性：obj.属性名=新的属性值； 删除属性：delete obj.属性名 可继续查看 No:63 32. vuetify 扩展面板 回收 给 v-expansion-panels 添加一个 v-model='panel' multiple 即可， 需要注意的是，panel 是一个数组，里面放 panel = [数字型] （当然，可能不止数字型） 可继续查看 No:35 33. 锚点连接 vurtify 中 中文翻译为：程序滚动 的组件可以做 锚点链接 34. vuex state初始值 初始值的时候，要注意，如果不是要求什么类型的话，一般给的值都是 null， 35. 使用 vuetify中的 扩展面板时，需要注意 打开单个，使用 null 多个使用，[] 36. 数组截取 slice 和 filter slice 是截取数组的一段，并生成一个新数组 （结束位 - 起始位 = 截取多少个） filter 是过滤掉不满足条件的数组，并生成一个新数组。 37. adoble AI 运行时，报 错误：16， 解决方法：以管理员身份运行 38. 给目标添加背景图片 style="background-repeat: no-repeat; background-size: 100% 100%; " :style="{backgroundImage: 'url(' + require('../../assets/img/AI-text-img/Groupleft1.png') + ')'}" 39. 给 img 添加图片，在这种情况下会用到： // # html < img :src='img' alt=''> // # Js this.img = require('路径') 40. 边框圆角 border-radius: 5px; 41. 判断输入 // # 只能输入数字字母汉字 onInputRules (name) { let pattern = /^[A-Za-z0-9\u4e00-\u9fa5]+$/ name.config.model_name = name.config.model_name.replace(/\s+/g, '') this.inputRu = pattern.test(name.config.model_name) }, // # 是否是数字 isNotNumber () { let re = /^[1-9]\d*$/ this.message = this.message.replace(/\s+/g, '') this.isNumber = re.test(this.message) }, 42. <style scoped> </style> 在vue组件中，为了使样式私有化，不对全局照成污染，在一在style标签上添加scoped属性以表示它只属于当下的模块。 45. 数组 push 之后赋值给新变量时输出为数字的问题 push（）方法可实现数组末尾添加一个或多个元素，并返回新的长度 Eg: // 在 push 前需要确认前面的 变量 是一个类型的，是 数组 还是 对象 this.arr = [1, 3] this.arr.push (4) ----> this.arr = [1, 3, 4] this.abc = this.arr.push(4) ----> 3 这个 ‘3’ 是 数组 arr 的长度) 46. 在严格模式下，if 中的条件语句 需要注意： ‘===’，‘!==’ 47. 使用 Vuetify 中的 v-select 组件，去掉自带的 message 框 // 1）给它的父级元素绑定一个 ‘id’，（这个 ‘id’ 的作用表示作用域） // 2）<style>（注意：这里的 style 没有 scope） <style> #id .v-text-field_details{ display: none; } </style> 48. 截取字符串 this.str.slice(start, 10) // ## 从 第0个开始截取到底9个 // ## start ： 从哪个 下标（index）开始 // ## 10 ：从 start 开始 取 10 个 出来 // # 补充 不会改变原来数组的有：concat()---连接两个或更多的数组，并返回结果。 every()---检测数组元素的每个元素是否都符合条件。（--注意关键词：是否都--）（全部都符合条件了才会返回 true，否则都是 false） some()---检测数组元素中是否有元素符合指定条件（--注意关键词：是否有--）。 filter()---检测数组元素，并返回符合条件所有元素的数组。 indexOf()---搜索数组中的元素，并返回它所在的位置。 join()---把数组的所有元素放入一个字符串。 toString()---把数组转换为字符串，并返回结果。 lastIndexOf()---返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。 map()---通过指定函数处理数组的每个元素，并返回处理后的数组。 slice()---选取数组的的一部分，并返回一个新数组。 // # 注意 // ## substring() 同 slice() 方法差不多，只不过，它不接受 负参数 valueOf()---返回数组对象的原始值。 --------------------------------------------分割线---------------------------------------------------- 会改变原来数组的有：pop()---删除数组的最后一个元素并返回删除的元素。 push()---向数组的末尾添加一个或更多元素，并返回新的长度。 shift()---删除并返回数组的第一个元素。 unshift()---向数组的开头添加一个或更多元素，并返回新的长度。 reverse()---反转数组的元素顺序。 sort()---对数组的元素进行排序。 splice()---用于插入、删除或替换数组的元素。 // # 用了会改变原来数组的方法后，需要对该数组重新赋值 // ## Eg：let ccc = [1, 2, 3, 4, 5] // ## ccc = ccc.splice(0, 1) 49. 用console.log(document.getElementByxxxx)时出现 HTMLCollection [ ] ，能看到值和长度，却没办法操作 的问题 原因：HTMLCollection [ ] 里面的东西都是在渲染之前打印的，因此，能看到东西，但是这个Dom还没有加载完毕，Js就执行了， // 解决方法：同步操作 setTimeOut(()=>{ console.log(...) }) // 这里这个定时器不需要给 时间 50. 动态绑定 style // 正确的例子： :style="{'max-height': 变量chipsHeight*2+12*3 + 'px'}" // 错误的例子： :style="{'max-height': (变量chipsHeight*2+12*3) + 'px'}" // 在渲染的时候，这个 style好像是无效的 51. border 线 border-style:dotted solid double dashed; <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-style:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;} </style> </head> <body> <p class="none">无边框。</p> <p class="dotted">虚线边框。</p> <p class="dashed">虚线边框。</p> <p class="solid">实线边框。</p> <p class="double">双边框。</p> <p class="groove"> 凹槽边框。</p> <p class="ridge">垄状边框。</p> <p class="inset">嵌入边框。</p> <p class="outset">外凸边框。</p> <p class="hidden">隐藏边框。</p> </body> </html> 效果如下： 52. vuetify弹窗中有使用到组件，且用到 ref，在使用 this.$refs 指向组件中的方法的时候，可能会报错，说这个函数没有定义什么的，可以用 延迟 计时器来解决。 setTimeOut(()=>{ this.$refs.XXX.XXX() // $refs 后面跟的第一个 XXX 是 ref = 'XXX' // 第二个 XXX ，比如像这样的：this.$refs.XXX.offsetHeight() 获取高度 }) 53. 隐藏滚动条 /*-- 兼容 webkit --*/ body::-webkit-scrollbar, #list-company::-webkit-scrollbar{ display: none; } /*-- 兼容 IE10/IE10/IE12 --*/ #list-company{ -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; overflow: auto; } 54. em rem 1）在body选择器中声明 font-szie = 62.5% 2）将原来的数值除以10（这是为了方便计算），然后换上em作为单位 3）重新计算那些被放大字体的em数值，避免 1.2*1.2=1.44的情况出现。 在 #content 中声明字体大小为1.2em，那么声明 p 的字体大小只能是 1em，而不是 1.2em，因为 继承 #content 的字体高而变为了 1em（=12px：1 * 1.2em = 12px ），另外这里的 em 不是 1.2em 的 em 同样的，rem 也是差不多的，在不考虑低版本浏览器的情况下，rem 是比较适用于当下的 web 开发的一种字体单位 12/16 = 0.75 rem 14/16 = 0.875 rem rem是相对的也是绝对的，因此，在多数情况下放大或缩小页面对 字体 的完整性保护的都比较好 需要在 根元素 上设定一个计算范围，一般来说，为了计算方便 font-szie = 62.5% 12/10 = 1.2rem 55. 正则表达式 验证 let reg = new RegExp(/^[a-zA-Z0-9]+$/) reg.test(需要被验证的值) // 注意：reg.test(需要被验证的值) 返回的是布尔值 // 可查看No:75 || No:83 56. async 与 await 57. 谷歌无法上网，设置也打不开 首先：谷歌浏览器右键打开属性，在箭头所指的位置复制粘贴 -no-sandbox。（需要空一格再写入 -no-sandbox） 其次：你打开谷歌浏览器可以看到如下提醒，提醒你，稳定性和安全性会有所下降，但表担心，只要能打开浏览器就很惊喜了！ 剩下的问题就很好解决了 ！！点击右上角的三个点---》点击设置---》拖到最下边高级设置---》再拖到最下边重置---》完美 最后，打开浏览器就可以用了 58. 使用 vuetify 的时候，用了 v-text-field 作为组件的名字，这是不被承认的，当运行的时候就会报错。 Uncaught RangeError: Maximum call stack size exceeded 因此不能把插件的名字用作组件的名字。 59. 13位时间戳转换成标准时间 var 对象 = new Date(13位时间戳) let a = new Date().getTime() 先获取时间，getTIme将时间转成13位的数字时间戳 60. Object.keys() 将 对象 中的 属性（k）取出来：A: {a: '1', b: '1'} 得到的是：['a', 'b'] 如果是要得到它的值（value），A[k] 可查看 No:63 61. filter 方法 过滤 JS let arr = ['a', 'b', 'c', 'd'] console.log(arr.filter(item => item === 'a')) 过滤出满足条件的 62. map 方法 JS let arr = ['a', 'b', 'c', 'd'] console.log(arr.map(item => item === 'a')) 62. 去除字符串中的空格 trim（）方法 去掉字符串头尾的空格(只能删除字符串两侧的代码) 用法： let str = ' 123 ' str.trim() 正则 replace 方法 // 第一种：去掉所有空格 str.replace(/\s*/g, '');; // 第二种：去掉两头空格 str.replace(/^\s*|\s*$/g, ''); // 第三种：去掉头部空格 str.replace(/^\s*/g, '') // 第四种：去掉尾部空格 str.replace(/\s*$/g, ''); ES6 处理空格 let str = ' a b c' let arr = Array.from(new Set(str.split(''))).filter(val => val && val.trim()) str = arr.join('') 63. 得到对象中的 属性 和 值 let object = {'text': '文本1', 'value': 1, 'id': 0} // 1,0 为 数字 1,0 怎么得到对象中的 属性 和 值 呢？ 方法： let arr = [] //用来存放取出来的 属性 和 值，其目的就是为了让他变成数组的形式 Object.keys(object).forEach(key => { arr.push({'属性': key, '值': object[key]}) }) 64. endsWith() 方法 返回值一般是 布尔值 用来检测 字符串 是否已指定的 后缀 结束 比如： let str = 'www.baidu.com' str.endsWith('baidu') // false str.endsWith('com') // true // 同样的 startsWith() 方法 也是如此，用于检测 字符串 是否有指定的 前缀 65. 面对 ’!== null‘ 的时候，是不需要 这种写法的，虽然这种写法不会错，但可以是这样 ’!= null‘ 66. some() 方法 用于检测数组中的元素是否满足指定的条件； 会依次执行数组的每个元素； 如果有一个元素满足条件，则返回 true ，之后的便不会执行， 如果没有满足条件的，就返回 false some() 方法不会对空数组进行检测，也不会改变原数组 比如： let str = [3, 10, 18, 20] if (str.some(item => item === 10)) { console.log('满足条件执行') } // str.some(item => item === 10) // 判断 str 这个数组中是否有 10 ，有的话会返回 true，并退出不在执行后面的循环 67. 天数 + 10 计算日期 calcDate (num, date) { var s1 = document.getElementById("d").value; s1 = new Date(s1.replace(/-/g, "/")); s2 = new Date(); var days = s2.getTime() - s1.getTime(); var time = parseInt(days / (1000 * 60 * 60 * 24)); document.getElementById("demo").innerHTML = '天数：'+time; if (!date) { date = new Date() date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() } date += ' 00:00:00' date = Date.parse(new Date(date)) / 1000 date += (86400) * num var newDate = new Date(parseInt(date) * 1000) this.c = newDate.getFullYear() + '-' + (newDate.getMonth() + 1) + '-' + newDate.getDate() console.log(this.c) } 68. 得到天数（相减） let cDate = new Date(Moment(r.creation_time).format('YYYY-MM-DD HH:mm:ss')).getTime() // 已有时间 let nowDate = new Date().getTime() // 当前时间 let days = nowDate - cDate // 相减的时间戳 r.date = parseInt(days / (1000 * 60 * 60 * 24)) // 天数 69. vuetify v-data-table 复写 tbody <v-data-table :headers="headers" :items="searchData.data" hide-default-footer> <template v-slot:body="{ items }"> <tbody> <tr v-for="(item, index) in items" :key="index" style="text-align: center"> <td v-if="(item.complete_time == null || item.complete_time === '') && item.date >= 10" class="td-color">pw_item.task_id</td> <td v-else>pw_item.task_id</td> </tr> </tbody> </template> </v-data-table> js. data () { headers: [ {align: 'center', text: '工单号', sortable: false, value: 'task_id'}, {align: 'center', text: '项目名称', sortable: false, value: 'case.project.name'}, {align: 'center', text: '患者编号', sortable: false, value: 'case.patient_number'}, {align: 'center', text: '创建时间', sortable: false, value: 'creation_time'}, {align: 'center', text: '完成时间', sortable: false, value: 'complete_time'}, {align: 'center', text: '状态', sortable: false, value: 'status2'}, {align: 'center', text: '工单发起人', sortable: false, value: 'user.userprofile.realname'}, {align: 'center', text: '工单处理人', sortable: false, value: 'handler'} ] } 70. 功能强大的表格 https://github.com/xuliangzhan/vxe-table https://xuliangzhan.com/vxe-table/index.html#/table/start/install 71. 在使用npm过程红连续产生多行报错 原因：npm版本配置不一致导致的，可以尝试重新安装npm解决 npm cache clean -f npm install -g npm 72. 超链接 点击前中后链接颜色 a:link，定义正常链接的样式； a:visited，定义已访问过链接的样式； a:hover，定义鼠标悬浮在链接上时的样式； a:active，定义鼠标点击链接时的样式。 a:link { color:#FF0000; text-decoration:underline; } a:visited { color:#00FF00; text-decoration:none; } a:hover { color:#000000; text-decoration:none; } a:active { color:#FFFFFF; text-decoration:none; } // 上面示例中 // 定义的链接颜色是红色，访问过后的链接是绿色， // 鼠标悬浮在链接上时是黑色，点击时的颜色是白色。 // 如果正常链接和已访问过的链接样式相同，鼠标悬浮和点击时的样式相同， // 也可以将它们合并起来定义： a:link, a:visited { color:#FF0000; text-decoration:underline; } a:hover, a:active { color:#000000; text-decoration:none; } 链接定义的顺序 这四项的书写顺序稍有差错，链接的效果可能就没有了，所以每次定义链接样式时务必确认定义的顺序，link--visited--hover-active 74. setAttribute （DOM操作）创建属性 const link = document.createElement('a') // 创建一个 a 标签 link.setAttribute('href', url) // 创建 herf 属性，并赋予路径 link.setAttribute('target', targetMode) // 创建 跳转方式 属性，并赋予跳转方式 link.setAttribute('rel', 'noopener') 75. 正则表达式 模糊匹配 字符串 模糊匹配 ^(.*张三. *name)$ 76. toFixed（） 可以把 Number（数字型） 四舍五入为指定小数位数的数字 let Num = 123456.789 Num.toFixed(2) // 123456.79 // 需要注意的是，转换后 String（字符型） 77. HTML提供5种空格实体       ‌‍ HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（      ‌‍）在不同浏览器中宽度各异。 它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。 它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。 它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。 它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。 它叫零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： ‌ 它叫零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ‍ ‍）。 此外，浏览器还会把以下字符当作空白进行解析：空格（ ）、制表位（	）、换行（
）和回车（
）还有（　）等等。 78. 统计 数组 中键值对的属性值出现的次数 var arr = [{a: 'q'}, {a: 'w'}, {a: 'e'}, {a: 'r'}, {a: 't'}] let count = {} arr.forEach(ar =>{ if (count[ar.a]) { count[ar.a]++ } else { count[ar.a] = 1 } }) console.log(count) // {q: 1, w: 1, e: 1, r: 1, t: 1} Object.keys(count).forEach(c =>{ console.log(c + ' 出现了 ' + count[c] + ' 次') }) // 比较适用于 统计 某一个 // 如果是统计多个的话： let annInfo = [] this.annInfo.forEach(a => { let count = 0 this.annInfo.forEach(a2 => { if (a.tag === a2.tag && a.note === a2.note) { count++ } }) annInfo.push({note: a.note, tag: a.tag, num: count}) }) console.log(annInfo) 79. 取整 parseInt(number) // # 取整 ceil(number) // # 向上取整 Math.floor(number) // # 向下取整 Math.round(number) // #四舍五入 Math.max(1, 2) // # 两者中较大的值 Math.min(1, 2) // # 两者中较小的值 Math.random() // # 随机数（0~1） Math.abs(-1) // # 绝对值 Math.log(x) // # 例如：Math.log(8) / Math.log(2) => 3 // 得到的是个次方 Math.Pi // # π let pro = [{}, {}] Math.max.apply(Math, pro.map((p) => { return p.progress })) // # 取最大值 80. sort() 排序 let number = [] 对数字而言： number.sort(function(a, b) { return a - b // 升序 return b - a // 降序 }) 对字符串而言： 是按照ASCALL来进行排序的 let number = [11, 15, 23 , 18, 9] number.sort() // ''11", ''15'', ''18'', ''23'', ''9'' 大概就是这样 如果是数组对象怎么办呢！ number = [{xx: 'xx'}] number.sort((a, b) => { return a.xx - b.xx // 升序 return b.xx - a.xx // 降序 }) 如果被排序的数组对象中这个属性不存在怎么办呢，可以看下有没有其他的属性可以用来排序的 number.sort(props => { return ((a, b) => { return a[props] - b[props] // 升序 return b[props] - a[props] // 降序 }) }) 81. cnpm 不是内部或命令 使用淘宝镜像安装cnpm ， 使用命令：(在CMD中运行或者Webstorm中运行都是可以的) $ npm install cnpm -g --registry=https://registry.npm.taobao.org 82. 由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。 Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上 83. Empty tag doesn't work in some browsers 空标签在某些浏览器中可能没有效果 （该闭合的标签要闭合） 84. media 媒体查询器 响应式设计 @media screen and (min-width: XXXpx) { .div{ background: orange; } } @media screen and (min-width: XXXpx and max-width: XXXpx) { .div{ background: orange; } } 85. css3系列之transform 详解scale - 杨耿 - 博客园 https://www.cnblogs.com/yanggeng/p/11277199.html 86. 正则表达式 知乎正则表达式：https://zhuanlan.zhihu.com/p/57149231 87. 出现NAN 01. 两个值的类型对不上号 02. 其中有一个值是NAN 03. 0 / 0 得到的是 NAN（1 / 0 得到是 Infinity） 88. 在开发过程中如果在API中找不到插件方法，就尝试自己写一个出来，需要数据的时候，用插件里的方法得到数据，放到自己写的代码中去。 89. 有的时候表面看上去它是属于类似交互的功能数据，或许它可能是显示的时候就会带有的数据。 91. 查看项目里的代码 用 git 统计代码行数（算是比较准确的统计方法了） 使用wc -l 直接统计代码行数（注： -c 统计字节数 -l 统计行数 -w统计字数） 统计当前目录下的 php 文件的行数 # cat index.php |wc -l 统计web目录下 JS 文件数量 # find web/ -name "*.js" |wc -l 统计web目录下 JS 文件代码行 # find web/ -name "*.js" |xargs cat|wc -l 或 wc -l `find web/ -name "*.js"`|tail -n1 统计web目录下 JS 文件 过滤空行 # find web/ -name "*.js" |xargs cat|grep -v ^$|wc -l 统计web目录下 JS 文件 过滤注释行 # find web/ -name "*.js" |xargs cat|grep -v -e ^$ -e ^\s*\/\/.*$|wc -l 附__转载自：https://www.cnblogs.com/kevingrace/p/6768005.html 92. parseInt（number， radix） number radix 15 16 => parseInt(15, 16) // 1 * 16 + 5 = 21 23 28 => parseInt(23, 28) // 2 * 28 + 3 = 59 以此类推~~~ 需注意：radix 的值 不能 <= number值的第一个数 （比如：parseInt(23, 28)中，radix的值就不能 小于等于 2，如果小于了，得到是 NAN，radix可以是 零，得到的值是 number 本身） 其次是如果是这样的 parseInt(3, 4) => 0 * 4 + 3 = 3 得到的永远是其本身（这种情况的 number 取值范围在 0~9） 如果number 是百位： parseInt(110, 16) => 1*16*16 + 1*16 + 0 = 272 那么千位应该也是如此 93. 获取当前 URL window.location.href 94. 什么是‘热点代码’ 热点代码有两类： 被多次调用的方法； 被多次执行的循环体； 判断是否为热点代码，需不需要出发即时编译？ 1. 基于采样的热点探测：周期性去栈顶采样 2. 基于计数器的热点探测：为方法建立计数器，超过阈值则为热点 2020-04-20 更新 ☞ 94. 什么是'热点代码' 95. jQuery 获取元素高度 $("#divId").height(); //不包括内边距、边框或外边距 $("#divId").innerHeight();//包括内边距 $("#divId").outerHeight();//包括内边距和边框 height()/ width() 取得第一个匹配元素当前计算的高度/宽度值（px） height(val)/ width(val) 为每个匹配的元素设置CSS高度(hidth)属性的值 $("#mydiv").height(); $("#mydiv").height(10); 等效于 $("#mydiv").css("height","10px"); css(properties) 把一个“名/值对”对象设置为所有匹配元素的样式属性 ---在所有匹配的元素上设置大量样式属性的最佳方式! $("#mydiv").css({ height: "10px", background: "blue" }); 2020-04-21 更新 ☞ 95. jQuery 获取元素高度 96. __proto__ prototype 尽可能的在不使用 '__proto__' , '__proto__' 可以访问到对象的原型，可这大概是设计上的一个失误，导致 '__proto__' 属性是可以被修改的，可能会让 js 的属性查找机制因此 ‘瘫痪’， 如果确定需要 通过 一个对象访问其原型，ES中： Object.getPrototypeOf(obj) 如果需要支持实现该 '__proto__' 属性而不支持 'Object.getPrototypeOfor' 的旧版浏览器，则可能需要关闭此规则 'Object.setPrototypeOf'。 统一一下所使用的术语（至少在本文范围内）：
例如：
统一术语的原因在于，尽管 Foo.prototype 和 f.__proto__ 是等价的，但是 prototype 和 __proto__ 并不一样。当考虑一个固定的对象时，它的 prototype 是给原型链的下方使用的，而它的 __proto__ 则指向了原型链的上方；因此，一旦我们说“原型属性”或者“原型对象”，那么就暗示着这是给它的子子孙孙们用的，而说“原型”则是暗示这是从它的父辈继承过来的。 再换一种说法：对象的原型属性或原型对象不是给自己用的，而对象的原型是可以直接使用的。 点击前往： 原型和原型对象（__proto__和prototype）转 || Disallow Use of __proto__ (no-proto) 97.ub 登录 无限循环 https://blog.csdn.net/qq_41854291/article/details/103171382 98. 给 input 赋值 $("#iinputID").val(“值”); // 不推荐使用 // 这种写法有时会失效,特别是他的父元素的属性是dosplay:none时， // 本人在开发中就遇到了这种问题，多次检查都没有前端的显示效果出来 // 推荐使用 // 可正常赋值 $("#inputID").attr("value","值"); // js原始写法 document.getElementById(“inputID”).value=“值”; 99. 点击时 获取 内容 $("ul").on("click","li",function () { console.log(this.innerHTML); }); // 这是一个 ul 的事件委托 100. input raido 单选框 有若干 radio 的时候，通过 name 控制 input 的选中项 <div> <input type="radio" name="terms_label_type" value="${terms_set_selectArr[index]}" id="label_" name="terms_label_type"/> <label for="label_">${terms_set_selectArr[index]}</label> </div> 101. JQuery 获取 值， 赋值 $('#div').attr('id') // # 获取 ID $('#div').attr('value') // # 获取 value 102. 查看占用端口，然后关闭端口 1. Win + R 2. netstat -aon // # 查看 所有进程 3. 找到对应进程后：taskkill /pid 进程号 -F 103. form 表单 input 回车提交造成的问题 遇到的情况是这样的： 在文本框中输入 内容 后 按回车，页面自动刷新了 解释： 一个表单下，如果只有一个文本框时，按下回车时将触发表单的提交事件。 解决方法： 再 添加 一个 文本框， 然后 style="dispaly: none; " <input id='displayInput' style="display: none; " /> 当然也可以不用 form 表单，就不用添加 ‘<input id='displayInput' style="display: none; " />’ 如果一定要使用到 form 表单，可以尝试添加一下， 不过这就像 清除浮动的哪个 div 一样，会增加一些 无意义 的 代码块，那么，你可以尝试在 form 表单 中 添加 onsubmit="return false; ",来阻止 回车提交事件 // # 方法 2 function clearOnKey_ (e) { let e = e || event let currkey = e.keyCode || e.which || e.charCode if (currkey == 13) { return false } // # ========== # if (e.keyCode === 13) { return false } } <input id='inputXXX' onkeydown="return clearOnKey(event)" /> 104. JS 监听全局的点击事件 window.addEventListener('click', function (e) { console.log(e.target.tagName) // # 获取点击目标的标签名 }) 105. 鼠标按下触发，鼠标移动触发，鼠标松开触发 window.onmousedown = function (event) { } winodw.onmousemove = function (event) { } window.onmouseup = function (event) { } // # 不仅仅是 window 可以用， // # 通过 document.getElememt 方式获取的 dom 节点可以用的 106. 构造函数不应该是小写开头 // # 这是一个构造函数 name.js(js名字你是自定义的) export default function () { /** * @description # 判断是否为数组 # * @param {Array} arr - 数组 * @returns {boolean} */ this.isArrayZexu = function (arr) { return Array.isArray(arr) } } // # 模拟 vue某个组件引入name.js 有脚手架 vue-cli // # import generalJSZeXuStatic from '../../../js/name' // # 注意：generalJSZeXuStatic 有规定说首字母不能小写 =》GeneralJSZeXuStatic // # import generalJSZeXuStatic from '../../../js/name' 另外一种暴露函数的方式 let cc = function () {} export default { cc } 107. 转码函数 // # 1、将%%%%的utf-8或者GB2312等编码解析成中文 decodeURI() // # 2、将中文解析成%%%%utf-8或者GB2312等编码 encodeURI() 108. 终端上修改 mysql 密码 1.重置密码的第一步就是跳过MySQL的密码认证过程，方法如下： #vim /etc/my.cnf(注：windows下修改的是my.ini) 在文档内搜索mysqld定位到[mysqld]文本段： /mysqld(在vim编辑状态下直接输入该命令可搜索文本内容) 在[mysqld]后面任意一行添加“skip-grant-tables”用来跳过密码验证的过程， 保存文档并退出： #:wq 2.接下来我们需要重启MySQL： # 查看：109 3.重启之后输入#mysql即可进入mysql。 4.接下来就是用sql来修改root的密码（注意每个语句后面要有分号） mysql> use mysql; mysql> update user set password=password("你的新密码") where user="root"; mysql> flush privileges; mysql> quit 到这里root账户就已经重置成新的密码了。 5.编辑my.cnf,去掉刚才添加的内容，然后重启MySQL。大功告成！ 109. 终端重启mysql https://blog.csdn.net/qq_25600055/article/details/80618759 一、启动方式 1、使用 service 启动：service mysqld start 2、使用 mysqld 脚本启动：/etc/inint.d/mysqld start 3、使用 safe_mysqld 启动：safe_mysqld& 二、停止 1、使用 service 启动：service mysqld stop 2、使用 mysqld 脚本启动：/etc/inint.d/mysqld stop 3、 mysqladmin shutdown 三、重启 1、 使用 service 启动：service mysqld restart 2、使用 mysqld 脚本启动：/etc/inint.d/mysqld restart 如何启动/停止/重启MySQL 一、 启动方式 1、使用 service 启动：service mysqld start 2、使用 mysqld 脚本启动：/etc/inint.d/mysqld start 3、使用 safe_mysqld 启动：safe_mysqld& 二、停止 1、使用 service 启动：service mysqld stop 2、使用 mysqld 脚本启动：/etc/inint.d/mysqld stop 3、 mysqladmin shutdown 三、重启 1、使用 service 启动：service mysqld restart 2、使用 mysqld 脚本启动：/etc/inint.d/mysqld restart 110. ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' 有可能是 my.cnf 配置文件中设置了 [mysqld] 的参数 socket ，而没有设置[client]的参数socket mysql.sock 文件有什么用： mysql 支持 socket 和 TCP/IP 连接。那么 mysql.sock 这个文件有什么用呢？连接localhost通常通过一个Unix域套接字文件进行，一般是/tmp/mysql.sock。如果套接字文件被删除了，本地客户就不能连接。/tmp 文件夹属于临时文件，随时可能被删除。 1.TCP 连接(如果报错 /tmp/mysql.sock，你可以尝试这种方式连接) mysql -uroot -h 127.0.0.1 -p 2.socket 连接 mysql -uroot -p 解决方式： 添加 [client] 配置项，如下所示 配置前：(配置 [client] 前，会报错'/tmp/mysql.sock' (2)) [mysqld] datadir=/usr/local/mysql/data basedir=/usr/local/mysql socket=/var/lib/mysql/mysql.sock user=mysql # Disabling symbolic-links is recommended to prevent assorted security risks symbolic-links=0 [mysqld_safe] log-error=/var/log/mysqld.log pid-file=/var/run/mysqld/mysqld.pid 配置后：(配置 [client] 后，重启 mysql服务) [mysqld] datadir=/usr/local/mysql/data basedir=/usr/local/mysql socket=/var/lib/mysql/mysql.sock（跟这个socket路径一样） user=mysql # Disabling symbolic-links is recommended to prevent assorted security risks symbolic-links=0 [mysqld_safe] log-error=/var/log/mysqld.log pid-file=/var/run/mysqld/mysqld.pid [client] port=3306 socket=/var/lib/mysql/mysql.sock 保存后执行 ： 1. service mysqld stop；2. service mysqld start 111. Centos 系统 杀死进程 Kill 方法大全：https://www.cnblogs.com/lijunji/p/11470969.html 112. Express 连接数据库 npm install mysql --save 在 nodejs 的 express 目录下新建一个 db 文件夹，在里面创建一个 configSQL.js // # configSQL.js const mysql = require('mysql2') const pool = mysql.createConntection({ host: 'IP地址', // # 如果是云服务器，就是云服务的 公网 地址 user: 'root', password: 'root', // # 第一次使用mysql的时候，需要你设置下你的密码，重置密码的方法后面会说到 port: 3306, database: 'test' // # 被连接的 MYSQL 中的 test 数据源 }) pool.connection() // # 连接到数据库 module.exports = pool // # 暴露文件 完成之后，在同目录下创建一个：query.js // # query.js const pool = require('./configSQL') let SQL = null let querySQL = (SQL, callback) => { pool.query(SQL, (err, result) => { callback(err, result) }) } // 查看 某数据表中的全部数据 let show = (callback) => { SQL = 'SELECT * FROM 表名' querySQL(SQL, callback) } // 新增 let add = (attributeNames, attributes, callback) => { // # 注意：这里的 SQL 中用到的引号 是 反引号(英文状态下的 ‘~’ 键) SQL = `INSERT INTO t_page_data(${attributeNames}) VALUES('${attributes}');` querySQL(SQL, callback) } // 删除 let del = (ID, callback) => { SQL = `DELETE FROM t_page_data WHERE id = ${ID};` querySQL(SQL, callback) } module.exports = { show, add, del } router 文件里面的 index.js（也有可能叫 router.js） // # index.js/router.js const express = require('express') const royter = express.Router() const dbQuery = require('../db/query') router.get('/show', (req, res, next) => { dbQuery.show((err, result) => { console.log(err, result) res.send(result) }) }) router.get('/a |
|
|
沙发#
发布于：2020-07-27 10:14
doubleyong：楼主，超干货文章哦，才看到回到原帖O(∩_∩)O哈哈~， |
|
|
板凳#
发布于：2020-07-24 16:10
楼主，超干货文章哦，才看到
|
|
|
