
技术(javascript)
文章平均质量分 53
An_s
这个人很懒什么都没有留下....
展开
-
uniapp结合movable-area与movable-view实现拖拽功能
因为公司业务开发需要拖拽功能。ps:该功能只能针对高度一致的,如果高度不一致需要另外二开。原创 2024-12-09 12:05:17 · 623 阅读 · 0 评论 -
Template execution failed: ReferenceError: name is not defined
我们使用了html-webpack-plugin(webpack)进行编译html,导致的错误。原创 2024-07-16 11:30:29 · 617 阅读 · 0 评论 -
uniapp实现光标闪烁(配合自己的键盘)
因为公司业务需要,所以我们...原创 2024-07-08 09:13:09 · 499 阅读 · 0 评论 -
uniapp实现一个键盘功能
因为公司需要,所以我....原创 2024-07-06 16:35:42 · 757 阅读 · 0 评论 -
css 阴影(box-shadow)的用法
【代码】css 阴影(box-shadow)的用法。原创 2024-06-06 15:53:36 · 461 阅读 · 0 评论 -
node request模块cookie使用
很多网站都有302或者301仿爬虫, 响应头就会带上set-cookie, 那我们用node如何处理呢?简洁版文件版推荐版原创 2022-06-22 15:54:17 · 1479 阅读 · 1 评论 -
如何触发‘isTrusted = true‘点击事件
isTrusted是DOM属性:如果事件是由用户调用的,则该事件是可信的,如果是由脚本调用的,则该事件是不可信的。总的来说就是:如果你是通过正常浏览器方式进行操作,基本无法改变该属性。1.使用python的selenium进行模拟点击,因为python执行的是Chrome DevTools Protocol协议文章地址2.使用谷歌扩展APImanifest.jsoncontent.jspopup.htmlpopup.js.........原创 2022-06-17 10:45:36 · 6071 阅读 · 0 评论 -
谷歌浏览器扩展v3版本总结
前言前几年使用过谷歌浏览器扩展v2,然后今天想编写一个扩展发现了很多问题,然后想编写一篇文章进行总结一下,v3跟比v2有挺多差距的,具体的大家可以去看看官网文档开始开始之前先介绍几个网站,谷歌扩展官网(翻墙-英文),谷歌扩展中文网项目结构注意事项一(service-worker使用)service-worker.js 就是 background.js 它必须在根目录ps:如果你想看它的运行情况,需要单独为扩展插件打开控制台(扩展 - 三个点 - 审查弹出内容)注意事.原创 2022-05-16 15:19:27 · 3598 阅读 · 0 评论 -
从0开始使用微前端(qiankun)
前言上次分享了vue架构项目,这次分享一下使用乾坤(qiankun)来架构前端项目,我这边架构只能符合我的业务需求,不过基本都是这样,缝缝补补就可以了。规划你的页面架构是怎么样的...然后进行拆分,微前端这块不在意你是用vue还是react或者单纯html。开始我这边是使用 原生的html进行作为主应用,vue、react(umi)作为微应用。主应用微应用(vue)微应用(react)vue搭建项目注意点vue使用的时候public-path.js..原创 2022-03-18 15:38:27 · 2922 阅读 · 1 评论 -
vue纯前端设计动态路由+页面架构
前言好久没有更新博客了,今天就写一下vue脚手架+antd如何架构一个后台管理系统页面,本来是想弄微前端的但是想想还是算了,不过你熟了的话,可以使用微前端进行架构,基于主体布局不变嵌入微前端。上图还行,不过有很多细节没有处理好。不过作为一个参考模型是足够了,我的写偏向简单,看一遍就会了开始这里我就主要讲两块(页面架构、路由设计)App.vueps:这里添加一个路由组件(一级页面需要)<template> <div id="app">原创 2022-03-11 12:08:04 · 3228 阅读 · 1 评论 -
taro(react、vue) css 波纹动画
前言想弄一个波动效果的动画~,其实主要涉及到css知识点。要学会用绝对定位、相对定位实现效果taro版css.recycle_device_image { position: relative; width: 630rpx; height: 600rpx; /* padding: 40rpx 0; */ text-align: center; margin: 0 auto; border-radius: 50%; .原创 2021-12-09 15:20:02 · 945 阅读 · 0 评论 -
小程序与浏览器显示数学平方方法
前言由于需要显示跟数学平方一样的效果......效果图html实现<sup>M</sup><sub>3</sub>小程序实现<Text style="font-size: 24rpx; vertical-align:text-bottom;">M</Text><Text style="font-size: 24rpx; vertical-align:text-top;">3</T.原创 2021-12-04 16:28:31 · 971 阅读 · 0 评论 -
react(taro)实现数字翻动(滚动)效果
前言因为公司业务需要,数字发生变化的时候就翻动数字进行变化,要有动画效果....实现效果实现逻辑第一步,把数字显示出来第二步,只显示单个数字,也就是溢出隐藏设置对应的宽高第三步,移动数字也就是修改定位top值跟加点动画完结~~~。实现代码公共的css代码.turn_box_container { margin-left: 10rpx;}.turn_box_container { position: relative; disp...原创 2021-12-04 10:59:59 · 3802 阅读 · 0 评论 -
npm run build 打包成功 之后 卡主
前言因为我node版本太低级了,别的项目需要node版本在15.x以上,然后我就升级了,但是会发现之前旧的项目打包会遇到问题。问题node14.xx就不会遇到这种问题,但是node15.xx以上就会,我的项目是vue2.x多的。执行npm run build 会执行 node build/build.js 命令 执行完会卡主。Build complete. Tip: built files are meant to be served over an HTTP server...原创 2021-11-24 12:04:03 · 3296 阅读 · 2 评论 -
electron使用sqlite3、escpos、printer、serialport的奇葩问题
报错一系列Error: `C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools\MSBuild\Current\Bin\MSBuild.exe` failed with exit code: 1Building module: sqlite3, Completed: 3在此解决方案中一次生成一个项目。若要启用并行生成,请添加“-m”开关。| Building module: sqlite3, Completed: 3 no.原创 2021-09-13 11:59:54 · 1364 阅读 · 2 评论 -
vue-electron使用serialport遇到的奇葩问题
报错如下:Uncaught TypeError: Cannot read property 'modules' of undefined at Object.eval (webpack-internal:///./node_modules/bindings/bindings.js:29) at eval (webpack-internal:///./node_modules/bindings/bindings.js:223) at Object../node_modules/bi...原创 2021-09-07 16:49:55 · 1680 阅读 · 5 评论 -
electron-rebuild 编译遇到的奇葩问题
.\node_modules\.bin\electron-rebuild.cmd环境:系统:win10"dependencies": { "core-js": "^3.6.5", "electron-rebuild": "^3.2.3", "escpos-serialport": "^3.0.0-alpha.4", "vue": "^2.6.11"},"devDependencies": { "@vue/cli-plugin-babel": "~4..原创 2021-09-07 09:24:36 · 7367 阅读 · 2 评论 -
vue-cli3.x+electron安装教程
前言这几天想搞个桌面软件玩玩,然后经过各种安装都靠不住,所以还是打算写一篇文章记录自己安装过程遇到的坑,需要对你有帮助。教程开始ps:请自行安装好vue环境vue create my-electroncd 项目名称我们使用 electron-builder插件 安装主要为了省事vue add electron-builder问题开始node install.js报错Response code 404 (Not Found) for https://npm.taobao.o原创 2021-06-11 11:22:15 · 572 阅读 · 1 评论 -
讲讲前端代码规范
前言在小公司肯定不会在大公司知道这么多专业的名称,如面试常问的 "你们公司用的什么做代码规范?"........代码千万行,安全第一行;前端不规范,同事两行泪。ESLint这个使用过vue-lic肯定对这个不陌生的可组装的 JavaScript和 JSX 代码检查工具发现问题:ESLint 静态分析您的代码以快速发现问题。ESLint 内置于大多数文本编辑器中,您可以将ESLint 作为持续集成管道的一部分运行 自动修复:ESLint 发现的许多问题都可以自动修复。ESLint 修原创 2021-05-18 11:10:54 · 309 阅读 · 0 评论 -
接触webGl(three.js)之全景(VR)看房的实现旅程总结
文章目录前言实现全景(VR)看房的方式一、纯Three.js方式1.安装包2.实现的业务代码3.实现演示二、 使用photo-sphere-viewer1.安装包2.实现的业务代码3.实现演示三、pano2vr实现1.下载软件2.安装软件3.实现演示四、krpano方式五、其他方式总结前言这几天可能是机缘巧合吧,我朋友让我帮他弄一下全景(VR)看房功能(类似贝壳看房不过最后做不出来....),这时候我默认大家都了解了什么是Ope原创 2021-02-02 10:21:10 · 11431 阅读 · 7 评论 -
js 一维数组转成多维数组(菜单列表生成菜单树)
例子:列表里面有id、p_id进行做关联,可能是嵌套的嵌套.....如何实现?let arr = [ { id: 1, p_id: 0, name: '首页' }, { id: 2, p_id: 0, name: '菜单管理' }, { id: 3, p_id: 0, name: '菜单列表' }, ..原创 2020-12-17 10:51:09 · 1553 阅读 · 2 评论 -
谷歌插件开发总结
前几天刚刚写了一个谷歌浏览器插件开发,现在总结一下。1.谷歌浏览器插件模式chrome://extensions/小提示:下面谷歌浏览器设置需要你把插件项目建立好开启之后会有 加载已解压的扩展程序这个是导入你写好的插件目录然后就可以在谷歌浏览器进行运行了然后把你写的插件开启图中1是开启状态,图中2是刷新(比较你修改了插件代码要刷新一下,如果是配合网页调试也刷新一下网页),图中3是打开插件控制台(跟谷歌浏览器控制台一样)。好了 谷歌浏览器设置我们就介绍到这里...原创 2020-10-16 14:46:37 · 1095 阅读 · 0 评论 -
记录一下今天接手工作的坑(2020-08-26)
环境:@vue/cli 4.2.21.打包遇到的坑[VUE ERROR] Invalid options in vue.config.js: "publicPath" is not allowed具体原因是因为版本支持的问题,publicPath 属性到 vue-cli 3.2.0 之后才支持,所以将 publicPaht 改成 baseUrl 即可,或者升级你的 vue-cli 。可是我的vue-cli版本是4点多。。。还是不行 最后是使用了 baseUrl2.在pack...原创 2020-08-26 10:47:54 · 295 阅读 · 0 评论 -
react-keep-alive 返回上一页 页面报错
该问题也在github有目前也没有啥解决方法,目前唯一解决方法就是不使用disabled属性<KeepAlive name={route.path} disabled={route.disabled}> <Test></Test></KeepAlive>// 修改成<KeepAlive name={route.path}> <Test></Test></KeepAlive>...原创 2020-08-04 15:10:00 · 549 阅读 · 5 评论 -
js转进制大全
object.toString([radix])object 转换对象,radix 要转换为的进制parseInt(object, [radix])object 必选项,转换对象radix 可选项,表示 object 的进制,范围为 2 - 36;如果缺少 radix,则以 0x 开头的字符串转换为十六进制,以 0 开头的字符串转换为八进制,其它字符串都转换十进制。2进制2进制转16进制let code = 10111100;console.log(code.toS..原创 2020-07-28 09:29:23 · 395 阅读 · 0 评论 -
前端框架通识:Virtual DOM(虚拟 DOM)
众所周知,操作 DOM 是很耗费性能的一件事情,既然如此,我们可以考虑通过 JS 对象来模拟 DOM 对象。什么是虚拟DOMvdom是虚拟DOM(Virtual DOM)的简称,指的是用JS模拟的DOM结构,将DOM变化的对比放在JS层来做。换而言之,vdom就是JS对象如下DOM结构:<ul class='list'> <li>1</li></ul>映射成虚拟DOM就是这样:const ul = { tag: 'ul原创 2020-07-14 11:16:36 · 952 阅读 · 1 评论 -
前端框架通识:路由原理
前端路由是现代单页面(SPA)应用必备的功能,每个现代前端框架都有对应的实现,例如vue-router、react-router。我们不想探究vue-router或者react-router们的实现,因为不管是哪种路由无外乎用兼容性更好的hash实现或者是H5 History实现,与框架几个只需要做相应的封装即可。前端路由实现起来其实很简单,本质就是监听 URL 的变化,然后匹配路由规则,显示相应的页面,并且无须刷新。目前单(SPA)页面使用的路由就只有两种实现方式:hash模式 histor原创 2020-07-13 15:09:25 · 423 阅读 · 0 评论 -
前端框架通识:MVVM是什么?
可能很多人面试会被问到MVVM是什么?MVVM 由以下三个内容组成:view:页面(视图) model:数据模型(模型) viewModel:作为桥梁负责沟通view和model(视图模型)第一阶段(原生阶段),直接用JavaScript操作DOM节点,使用浏览器提供的原生API:var dom = document.getElementById('name');dom.innerHTML = 'an';dom.style.color = 'red';第二阶段,由于原生API不好原创 2020-07-10 11:15:44 · 973 阅读 · 0 评论 -
深入javascript计划八:深入浅出模块化
传统方法HTML 网页中,浏览器通过<script>标签加载 JavaScript 脚本。页面内嵌脚本:<script type="application/javascript"> // module code</script>由于浏览器脚本的默认语言是 JavaScript,因此type="application/javascript"可以省略。外部脚本:<script type="application/javascript"原创 2020-07-06 15:29:26 · 251 阅读 · 0 评论 -
深入javascript计划七:深入浅出Event loop
为什么javascript是单线程?因为最初javascript就是为了和浏览器交互而诞生的,如果 JS 是门多线程的语言话,我们在多个线程中处理 DOM 就可能会发生问题(一个线程中新加节点,另一个线程中删除节点),当然可以引入读写锁解决这个问题,为了避免复杂性,设计者还是把它设计成单线程模式。后来,HTML5提出Web Worker标准, 允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM,所以这个新标准并没有改变JavaScript单线程本质。Event原创 2020-07-03 16:02:49 · 280 阅读 · 0 评论 -
深入javascript计划六:深入浅出异步
回调函数(Callback)回调函数应该是大家经常使用到的,以下代码就是一个回调函数的例子:ajax(url, () => { // 处理逻辑})但是回调函数有一个致命的弱点,就是容易写出回调地狱(Callback hell)。假设多个请求存在依赖性,你可能就会写出如下代码:ajax(url, () => { // 处理逻辑 ajax(url1, () => { // 处理逻辑 ajax(url2, () =&g原创 2020-07-02 10:24:35 · 334 阅读 · 0 评论 -
深入javascript计划五:深入浅出原型
看例子:函数:function test() {}console.dir(test)对象:let test = {}console.dir(test)从上面例子可以看得出,只有函数才有原型(prototype)属性,它们都有__proto__属性(下文会讲解)。prototype只有函数才会产生prototype,但是也有一个例外:let fun = Function.prototype.bind()这个创建函数是没有prototype属性的(下文会讲.原创 2020-06-29 11:10:07 · 343 阅读 · 0 评论 -
深入javascript计划四:深入浅出this
这篇我们来深入了解this,this关键字是javascript中最复杂的机制之一,它是一个很特别的关键字,被自动定义在所有函数的作用域中(网上翻到几位大佬写的文章,写得很完善我就直接抄过来整合一下~)。什么是this?1.this是javascript中的关键字。它是对象自动生成的一个内部对象,只能在对象内部使用。随着函数使用场合不同,this的值会发生变化。2.this指向什么?完全取决于什么地方以什么方式调用,而不是创建时(this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能原创 2020-06-23 11:24:59 · 323 阅读 · 0 评论 -
深入javascript计划三:javascript编译器、引擎、作用域介绍
如果有问题,请大家麻烦指出来。javascript我们通常把它归类为"动态"或"解释执行"语言,但事实上它是一门编译语言。它与传统编译语言(C语言等)不同,它不是提前编译,而且并不会产生可移植的编译结果。(传统编译语言)编译器工作流程通常分为三个步骤: 1.分词/词法分析(Tokennizing/Lexing) 这个过程会将由字符组成的字符串分解成有意义的代码块(把输入的字符串分解为一些对编程语言有意义的代码块),这些代码块被称为"词法单元"(token)。 2...原创 2020-06-19 15:39:07 · 763 阅读 · 2 评论 -
深入javascript计划二:数据类型检测与数据类型抽象转换
上篇刚刚介绍完Javascript数据类型,这篇就写写数据类型检测跟数据类型转换。在Javascript中多数都是使用typeof来判断数据类型,typeof是否能正确判断数据类型?1.typeof判断数据类型let a = "a"console.log(typeof a) // stringa = 1console.log(typeof a) // numbera = falseconsole.log(typeof a) // booleana = Symbol()consol原创 2020-06-17 12:20:54 · 332 阅读 · 0 评论 -
深入javascript计划一:数据类型深入介绍
javascript有几种数据类型?答:javascript有两种数据类型基本数据类型:string、boolean、number、null、undefined、symbol引用数据类型:对象Object(包括普通对象-object、数组对象-array、正则对象-regexp、日期对象-date、数学对象-math、函数对象-function)小知识:&代表取址、*代表取值,不过JavaScript中是没有的,我们以go来做例子基本数据类型JavaScriptl.原创 2020-06-16 00:33:41 · 319 阅读 · 0 评论 -
vue 上拉刷新(scroll、IntersectionObserver)
注意:this.$publicFunction.debounce(this.sayDebounce, 800) (如果没有封装防抖函数---了解防抖点击)可以直接改为 this.sayDebounce()1.scroll实现你要先了解clientHeight、scrollTop<style>.testList { height: 100px; margin: 10px 0; background-color: red;}#test1...原创 2020-05-29 14:39:47 · 891 阅读 · 0 评论 -
HTTP协议
先看图需要配合抓包工具(我比较懒。。。就上网扣下来了)请求报文例子:响应报文例子:后续会补充。。。。。(写了草稿)参考:http1.1请求和响应报文格式(https://baijiahao.baidu.com/s?id=1662842929861521073&wfr=spider&for=pc)(建议精读)HTTP灵魂之问,巩固你的 HTTP 知识体系(https://juejin.im/post/5e76bd516fb9a07cce750746.原创 2020-05-25 16:35:58 · 256 阅读 · 0 评论 -
TCP和UDP的区别
TCP:是一个面向连接的、可靠的、基于字节流的传输层协议(比如对网络通讯质量有要求,需要保证数据准确性时,就需要TCP协议了,比如HTTP、FTP等文件传输、或者一些邮箱传输协议(SMTP、POP))UDP:是一个面向无连接的传输协议(UDP通信并不需要建立连接,它只是把数据尽可能快的发送出来,简单粗暴,并且不可靠,在一些对数据准确性要求不高的场景使用,比如QQ语音、QQ视频)1.面向连接(所谓的连接,就是指客户端和服务端的连接,在双方互相通信之前)TCP需要三次握手建立连接UDP没有相原创 2020-05-23 16:10:33 · 283 阅读 · 0 评论 -
TCP协议
1.要先了解TCP头部数据16位(各自8位)端口号:表示该报文来自哪里(源端口),以及要传给哪个应用程序或者上层协议(目的端口)进行TCP通信时,一般client是通过系统自动选择的临时端口号,而服务器一般都是使用知名的端口号或者直接指定端口号32位序列号(sequence number):TCP连接中传输的字节流中的每个字节都按顺序编号例如,一段报文的序号字段值是 301 ,而携带的数据共有100字段,显然下一个报文段(如果还有的话)的数据序号应该从401开始序列号在T...原创 2020-05-23 15:58:28 · 671 阅读 · 0 评论