分类 学习 下的文章 - 浮川的小窝

ServiceWorker 缓存策略 项目中用到了ServiceWorker 在离线环境中能够加载出最新的文件缓存 避免直接大白瓶或显示404无法访问；在首次首页加载后，也将大部分资源缓存下来，增加后续网站渲染速度，增加用户体验 使用过程中遇到了一个坑 :@(内伤)const plugins = [ new GenerateSW({ cacheId: 'hwork-portal', swDest: 'service-worker.js', sourcemap: false, clientsClaim: true, skipWaiting: true, cleanupOutdatedCaches: true, // maximumFileSizeToCacheInBytes: 2621440, // 2.5Mb，默认值是 2097152(2Mb) runtimeCaching: [{ handler: 'CacheFirst', options: { cacheName: 'js' }, urlPattern: () => { const pathname = url.pathname || '' if (pathname.includes('xxx')) { const file = pathname.split('?')[0] || '' const fileType = file.split('.')[1] || '' if (fileType === 'js') { return true } } } }, { handler: 'CacheFirst', options: { cacheName: 'css' }, urlPattern: () => { const pathname = url.pathname || '' if (pathname.includes('xxx')) { const file = pathname.split('?')[0] || '' const fileType = file.split('.')[1] || '' if (fileType === 'css') { return true } } } }, { handler: 'StaleWhileRevalidate', options: { cacheName: 'images' }, urlPattern: () => { const pathname = url.pathname || '' if (pathname.includes('xxx')) { const file = pathname.split('?')[0] || '' const fileType = file.split('.')[1] || '' if (['webp', 'png', 'jpg'].includes(fileType)) { return true } } } }] }),上面是webpack中的部分plugins配置 由于项目使用的是微前端 所以最上级应用中配置了sw.js 加载二级应用时 发现了一个很奇怪的现象 js存在缓存的情况下是正常的 当有缓存时直接返回缓存值 但是css就很奇怪了 有缓存 但是sw还是又重新发起了一遍fetch请求 然后我就一通找啊找 :@(吐血倒地) :@(吐血倒地) 最后经过部门老大的提示 发现是二级应用打包的时候 base路径的三级域名并没有跟最上级应用一样 至于不同域名下js为啥能加载出来 目前没有找到原因 但是改过打包后 情况就正常了特此记录一下

二次封装省市区组件 最新正在搭一个系统，用的h5纯原生开发的就没使用框架 也不想引用现成的ui框架 踌躇满志 :@(坐等) 磨拳擦掌 :@(欢呼) 力排众议 :@(深思) 直接选择自己手写 然后完犊子了 :@(脸红) :@(脸红) :@(脸红) 工期赶任务中 有思路知道怎么实现但是这个手啊就是敲不下去 遂又 垂头丧气 :@(小怒) 不自量力 :@(吐血倒地) 唯唯诺诺 :@(喜极而泣) 的光速打脸 遇到下拉框联动省市区的时候傻眼了麻爪了 网上一顿搜 没有合适的组件库 一度想要引入element然后直接vue完事了 但是最终还是选择了multiple-select.js 不过这个库依赖jquery 退而求其次 那就原生 jquery混写呗 下面是代码 处理过的省市区数据CITY_CODE.js<link rel="stylesheet" href="https://unpkg.com/multiple-select@1.6.0/dist/multiple-select.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://unpkg.com/multiple-select@1.6.0/dist/multiple-select.min.js"></script> <script src="https://snowlove.synology.me:5106/usr/uploads/2023/11/1528140937.js"></script> <style> .city-code_wapper.city-code_wapper_citycode .multiple-select.city-code_wapper_citycode .multiple-select:last-child.city-code_wapper_citycode button.city-code_wapper_citycode button span.city-code_wapper_address.city-code_wapper_address label.city-code_wapper_address input.city-code_wapper .area,.city-code_wapper .city.city-code_wapper .ms-drop.from_input.from_input:focus </style> <div class="city-code_wapper"> <div class="city-code_wapper_citycode"> <select class="province multiple-select" placeholder="省"></select> <select class="city multiple-select" placeholder="市"> <option>市</option> </select> <select class="area multiple-select" placeholder="区"> <option>区</option> </select> </div> <div class="city-code_wapper_address"> <label>详细地址:</label> <input type="text"class="from_input detailed-address" name="address"/> </div> </div> <script> // 模板解析有问题 无发放到template中 只能抽出js单独引入 var selectParams = [] // 根据parentId获取所有子元素 const getDataByParentId = (data,parentId) => { return data.filter(item => item.parentId === parentId) } // 设置省市区数据 const updateCityCodeData = () => { window.postMessage({ type:'cityCodeMsg', newCityCode:selectParams.map(item=>item.text || item), cityCodeOriginal:selectParams }) } // 清空省市下拉数据 const clearCityOrArea = (type) => { const cityEle = $('.city'), areaEle = $('.area'), addressEle = $('.detailed-address') switch (type) { case 'city': cityEle.multipleSelect('refreshOptions', { data:[] }) break; case 'area': areaEle.multipleSelect('refreshOptions', { data:[] }) break; case 'address': addressEle.val('') break; default: cityEle.multipleSelect('refreshOptions', { data:[] }) areaEle.multipleSelect('refreshOptions', { data:[] }) addressEle.val('') break; } } // 加载jqery 多选框元素 $(function() { const provinceEle = $('.province') let initFlag = [1,0,0] provinceEle.multipleSelect({ selectAll: false, name:'province', data:Province, placeholder:'省', showClear:true, onClick: function (province) { // 清空市区数据 const cityEle = $('.city') if(!initFlag[1]){ cityEle.multipleSelect({ selectAll: false, name:'city', placeholder:'市', data:getDataByParentId(City,province.value), onClick: function (city) { const areaEle = $('.area') // console.log('areaEle',areaEle) if(!initFlag[2]){ areaEle.multipleSelect({ selectAll: false, name:'area', placeholder:'区', data:getDataByParentId(Area,city.value), onClick: function (area) { // console.log('areaEle onClick',areaEle) selectParams[2] = area updateCityCodeData() }, }) initFlag[2] = 1 } else areaEle.multipleSelect('refreshOptions', { data:getDataByParentId(Area,city.value), }) // console.log('areaEle',areaEle) selectParams[1] = city clearCityOrArea('address') updateCityCodeData() }, }) initFlag[1] = 1 } else cityEle.multipleSelect('refreshOptions', { data:getDataByParentId(City,province.value), }) selectParams = [province] if(initFlag[2]) clearCityOrArea('area') clearCityOrArea('address') // 发送消息到上层 清空已选择数据 updateCityCodeData() }, onClear: function () { selectParams = [] if(initFlag[1]) clearCityOrArea('city') if(initFlag[2]) clearCityOrArea('area') clearCityOrArea('address') updateCityCodeData() // console.log('clear') } }) // 每次组件创建 初始化数据 provinceEle.multipleSelect('setSelects', []) updateCityCodeData() // 获取详细地址 $('.detailed-address').blur(function(){ selectParams[3] = $(this).val() || '' updateCityCodeData() }) }) </script> .city-code_wapper.city-code_wapper_citycode .multiple-select.city-code_wapper_citycode .multiple-select:last-child.city-code_wapper_citycode button.city-code_wapper_citycode button span.city-code_wapper_address.city-code_wapper_address label.city-code_wapper_address input.city-code_wapper .area,.city-code_wapper .city.city-code_wapper .ms-drop .from_input{ width: 100%; border: 1px solid #c8c9cc; border-radius: 4px; padding: 5px 10px; box-sizing: border-box; outline: none; /* 去掉描边 */ color: #606266; } .from_input:focus { color: #303133; } 市 区 详细地址: // 模板解析有问题 无发放到template中 只能抽出js单独引入 var selectParams = [] // 根据parentId获取所有子元素 const getDataByParentId = (data,parentId) => { return data.filter(item => item.parentId === parentId) } // 设置省市区数据 const updateCityCodeData = () => { window.postMessage({ type:'cityCodeMsg', newCityCode:selectParams.map(item=>item.text || item), cityCodeOriginal:selectParams }) } // 清空省市下拉数据 const clearCityOrArea = (type) => { const cityEle = $('.city'), areaEle = $('.area'), addressEle = $('.detailed-address') switch (type) { case 'city': cityEle.multipleSelect('refreshOptions', { data:[] }) break; case 'area': areaEle.multipleSelect('refreshOptions', { data:[] }) break; case 'address': addressEle.val('') break; default: cityEle.multipleSelect('refreshOptions', { data:[] }) areaEle.multipleSelect('refreshOptions', { data:[] }) addressEle.val('') break; } } // 加载jqery 多选框元素 $(function() { const provinceEle = $('.province') let initFlag = [1,0,0] provinceEle.multipleSelect({ selectAll: false, name:'province', data:Province, placeholder:'省', showClear:true, onClick: function (province) { // 清空市区数据 const cityEle = $('.city') if(!initFlag[1]){ cityEle.multipleSelect({ selectAll: false, name:'city', placeholder:'市', data:getDataByParentId(City,province.value), onClick: function (city) { const areaEle = $('.area') // console.log('areaEle',areaEle) if(!initFlag[2]){ areaEle.multipleSelect({ selectAll: false, name:'area', placeholder:'区', data:getDataByParentId(Area,city.value), onClick: function (area) { // console.log('areaEle onClick',areaEle) selectParams[2] = area updateCityCodeData() }, }) initFlag[2] = 1 } else areaEle.multipleSelect('refreshOptions', { data:getDataByParentId(Area,city.value), }) // console.log('areaEle',areaEle) selectParams[1] = city clearCityOrArea('address') updateCityCodeData() }, }) initFlag[1] = 1 } else cityEle.multipleSelect('refreshOptions', { data:getDataByParentId(City,province.value), }) selectParams = [province] if(initFlag[2]) clearCityOrArea('area') clearCityOrArea('address') // 发送消息到上层 清空已选择数据 updateCityCodeData() }, onClear: function () { selectParams = [] if(initFlag[1]) clearCityOrArea('city') if(initFlag[2]) clearCityOrArea('area') clearCityOrArea('address') updateCityCodeData() // console.log('clear') } }) // 每次组件创建 初始化数据 provinceEle.multipleSelect('setSelects', []) updateCityCodeData() // 获取详细地址 $('.detailed-address').blur(function(){ selectParams[3] = $(this).val() || '' updateCityCodeData() }) })

上古技术也还是很能打的 闲来无事搭了个门户网站的demo架子 因为seo的缘故不能使用框架(因为追求简单的几个业务面 感觉搭个架子太沉了) 所以用了挺老的技术 :@(害羞) :@(害羞) :@(害羞)gulp + art-template + web-template + js原生感觉比较符合我的需求 因为咩去找现成的门户网站参照做案例 就随便写写画画 封装了一些基础组件(我肖某人今生最爱的事情之一就是封装封装封装组件!!)下面偷懒做的适配(就根本没做骗谁呢? :@(中指):@(中指):@(中指) )移动端兼容我贼垃圾就没做 过阵子好好学学 :@(脸红) :@(脸红) .box{ position: relative; overflow: auto; margin-bottom: 30px; } .box > div{ background: url(https://snowlove.synology.me:5106/usr/uploads/2023/10/2416764179.jpg); width: 768px; height: 1024px; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 1; } .box > iframe{ position: absolute; top: 210px; left: 185px; z-index: 2; border-radius: 16px; } @media screen and (max-width: 1000px) { .box{ position: relative; overflow: hidden; margin-bottom: 30px; } .box > div{ background: url(https://snowlove.synology.me:5106/usr/uploads/2023/10/2416764179.jpg); width: 85vw; height: 50vh; transform: scale3d(1.6, 1.3, 1.8); background-size: 100% 100%; background-repeat: no-repeat; position: relative; z-index: 1; top: -5vw; } .box > iframe{ position: absolute; top: 6vw; left: 5vw; z-index: 2; border-radius: 16px; width: 75vw; } } let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']; let getArr = Agents.filter(i => window.navigator.userAgent.includes(i)) let iframe = document.querySelector('.box>iframe') if(getArr[0]){ iframe.style.height = `$px` } iframe.onload = function(){ //iframe加载完立即发送一条消息 iframe.contentWindow.postMessage(,'*'); }

gitlab自动化部署脚本 记录下自动化部署脚本.gitlab-ci.yml image: maven:latest # 设置触发条件 workflow: rules: - if: '$CI_COMMIT_MESSAGE =~ /^publish/ && $CI_COMMIT_BRANCH == "pro"' when: always - if: '$CI_COMMIT_MESSAGE =~ /^publish/ && $CI_COMMIT_BRANCH == "pro-dalian"' when: always - if: '$CI_COMMIT_MESSAGE =~ /^publish/ && $CI_COMMIT_BRANCH == "test"' when: always - if: '$CI_COMMIT_MESSAGE =~ /^publish/ && $CI_COMMIT_BRANCH == "fac"' when: always - when: never # 设置一个缓存路径 cache: paths: - target/ # 本次构建的阶段：build package deploy stages: - init - package - deploy # 初始化 初始化: stage: init tags: - ZZTJJARM script: - echo "=============== 检查必要工具 ===============" - node -v - npm -v - nvm -v - nvm ls - git --version # 打包 打包: stage: package tags: - ZZTJJARM script: - echo "=============== 开始打包任务 ===============" - rm -rf node_modules - nvm use 11.0.0 - npm i --unsafe -perm - npm run build - server_name="ZZTJJARM" - tar cvf $server_name.tar $server_name - chmod 777 $server_name.tar - rm -if /home/gitlab-runner/gitlabPro/$CI_COMMIT_BRANCH/$server_name.tar - if [ ! -d "/home/gitlab-runner/gitlabPro/$CI_COMMIT_BRANCH" ];then mkdir /home/gitlab-runner/gitlabPro/$CI_COMMIT_BRANCH; echo '文件夹不存在,创建:'$CI_COMMIT_BRANCH; else echo '文件夹已存在:'$CI_COMMIT_BRANCH;fi - cp -i $server_name.tar /home/gitlab-runner/gitlabPro/$CI_COMMIT_BRANCH/$server_name.tar # 部署 部署: stage: deploy tags: - ZZTJJARM script: - echo "=============== 开始部署任务 ===============" - server_name="ZZTJJARM" - REMOTE_IPS='172.16.1.144' - REMOTE_PORT=22 - |+ if [[ $CI_COMMIT_BRANCH == 'pro' ]]; then REMOTE_IPS='XX.XX.XX.XX' fi if [[ $CI_COMMIT_BRANCH == 'pro-dalian' ]]; then REMOTE_IPS='XX.XX.XX.XX' fi if [[ $CI_COMMIT_BRANCH == 'fac' ]]; then REMOTE_IPS='XX.XX.XX.XX' fi - echo $REMOTE_IPS - IFS=',' read -ra ip_array <<< "$REMOTE_IPS" - echo $ip_array - |+ for REMOTE_IP in "$" do echo "scp -o StrictHostKeychecking=no -P $REMOTE_PORT /home/gitlab-runner/gitlabPro/$CI_COMMIT_BRANCH/$server_name.tar root@$REMOTE_IP:/usr/local/nginx/html/" scp -o StrictHostKeychecking=no -P $REMOTE_PORT /home/gitlab-runner/gitlabPro/$CI_COMMIT_BRANCH/$server_name.tar root@$REMOTE_IP:/usr/local/nginx/html/ echo "source /etc/profile && mv /usr/local/nginx/html/$server_name /usr/local/nginx/html/bak/$server_name$(date +%Y%m%d%H%M%S)" ssh -o StrictHostKeychecking=no root@$REMOTE_IP -p 22 "source /etc/profile && if [ ! -d "/usr/local/nginx/html/$server_name" ];then mkdir /usr/local/nginx/html/$server_name;mkdir /usr/local/nginx/html/bak; echo '文件夹不存在,创建:'$server_name $bak; else echo '文件夹已存在:'$server_name $bak;fi && mv /usr/local/nginx/html/$server_name /usr/local/nginx/html/bak/$server_name$(date +%Y%m%d%H%M%S)" sleep 10s ssh -o StrictHostKeychecking=no root@$REMOTE_IP -p 22 "chmod 777 /usr/local/nginx/html/$.tar && tar xvf /usr/local/nginx/html/$.tar -C /usr/local/nginx/html" ssh -o StrictHostKeychecking=no root@$REMOTE_IP -p 22 "rm -rf /usr/local/nginx/html/$.tar" ssh -o StrictHostKeychecking=no root@$REMOTE_IP -p 22 "/usr/local/nginx/sbin/nginx -s reload" done

子网掩码作用及其使用 作用子网掩码不能单独存在，它必须结合IP地址一起使用。IP地址我们都知道是计算机在网络内的唯一标识，而子网掩码顾名思义是用于划分子网的子网掩码只有一个作用，就是将某个IP地址划分成网络地址和主机地址两部分。子网掩码是一个32位地址，用于屏蔽IP地址的一部分以区别网络标识和主机标识，并说明该IP地址是在局域网上，还是在远程网上。例子1、255.255.255.0子网掩码由连续的1和0组成，连续的1表示网络地址，连续的0表示主机地址，通过0的个数可以计算出子网的容量（子网中主机的IP地址范围）。首先来看看默认的子网掩码255.255.255.0是怎么划分子网的，将该子网掩码的二进制由24个1和8个0组成，8个0表示该子网掩码划分出的子网容量为256（2的8次方），也就是说192.168.1.0-255都在同一个子网中，这256个地址中可用地址只有254个，因为规定每个子网的第一个IP地址为网段地址，最后一个IP地址为广播地址，都不可用。举例说明：对于网段192.168.1.0，如果子网掩码设置255.255.255.0，192.168.1.1-192.168.1.254为可用IP地址，设置这个范围内的IP地址，计算机之间能正常联网。2、255.255.255.252当然上面是默认的情况，也是最简单的情况。下面我们分析子网掩码255.255.255.252是怎么划分子网的。将该子网掩码转换成二进制为30个1和2个0，表示每个子网中只有4个IP地址（2的2次方），192.168.1.0-255的地址段共可划分64个子网，第一个子网的地址范围是192.168.1.0-192.168.1.3，第二个子网的地址范围是192.168.1.4-192.168.1.7，依次类推。其中每个子网第一个和最后一个IP地址不可用，可用的只有2个IP地址。也就是说：如果子网掩码设置为255.255.255.252，那么该子网只能容纳两台电脑，而且这两台电脑的IP必须在一个子网内才能正常联网，例如一台电脑的IP设为192.168.1.10，另外一台电脑的IP必须设置为192.168.1.9。子网划分实战通过以上两个例子读者应该明白子网掩码的作用了，下面通过一个实际的例子检验刚才的学习成果。某个小型公司有四个部门：行政、研发、营销、售后，每个部门各40台计算机接入公司局域网交换机，如果要在192.168.1.0网段为每个部门划分子网，子网掩码应该怎么设置，每个子网的地址范围分别是什么？192.168.1.0网段共256个地址，划分4个子网，每个子网需要64个地址；64是2的6次方，子网掩码应该以6个0结尾，剩下的用1补齐，由26个1和6个0组成，转换成十进制是255.255.255.192；每个子网共64个IP地址，掐头去尾后可用地址只有62个，第1个子网的可用IP地址范围是：192.168.1.1-62，第2个子网可用IP地址范围是192.168.1.65-126，第3个子网的可用IP地址范围是：192.168.1.129-190，第4个子网可用IP地址范围是192.168.1.193-254；该公司各部门计算机按照3中的IP地址范围进行设置，所有计算机的子网掩码都必须设置为255.255.255.192，设置完毕后各部门内的计算机能正常联网，不同部门间的计算机无法直接联通。划分数量: function returnArr(lastSubStr) { return `$,${lastSubStr .slice(4) .join('')}` } function subnet(subnetMask = 0) { if (subnetMask === 0) return `255.255.255.0` const section = parseInt(256 / subnetMask) const oneSubNum = Math.log2(section) if (Number.isInteger(oneSubNum)) { let lastSubStr = new Array(8).fill(1) lastSubStr.splice(8 - oneSubNum, 8, ...new Array(oneSubNum).fill(0)) const lastSub = returnArr(lastSubStr) let decimalism = 0 for (let i = 8; i--; i > 0) { if (i >= oneSubNum) decimalism += Math.pow(2, i) else break } return `子网掩码最后一段二进制:(${returnArr( new Array(8).fill(1), )}) . ($) . (${returnArr( new Array(8).fill(1), )}) . ($)\n此ip会分为$段:\n开头的ip为xxx.xxx.xxx.1-${ section - 2 }\n最后的ip为xxx.xxx.xxx.${ 256 - section }-254\n您最终的子网掩码:255.255.255.$ ` } else alert('您填入的分区数并不是2的次方数') } window.onload = () => { const subEle = document.getElementById('sub-show') document.getElementById('sub-num').onchange = (e) => { console.log(e.target.value) const value = e.target.value Number.isInteger(+value) ? (subEle.innerHTML = subnet(+value)) : alert('请输入整数') } } 文章来源，感谢原作者的无私分享:https://zhuanlan.zhihu.com/p/371400090