js
文章平均质量分 59
养只猫
这个作者很懒,什么都没留下…
展开
-
webassembly入门篇
WebAssembly(缩写为Wasm)是一种基于堆栈的虚拟机的二进制指令格式。原创 2023-09-06 20:19:33 · 612 阅读 · 1 评论 -
js模块化CJS、AMD、CMD、UMD、ESM、IIFE理解
适用范围:浏览器(随着浏览器的发展,可以在script的标签中加入type="module"来支持)和nodejs(Node verison 13.2.0,有两种方式1:package.json中填写type: "modules",2.将文件结尾命名为mjs)在webpack、rollup、esm各种打包器中都可以设置对应的产物类型,我们要根据我们的产物的用途来选择对应的类型,我们一般并不会关心最终的代码产物,但是对于各种类型的产物还是要有一定的了解,这篇文章算是个简单的总结。同步异步加载::异步。原创 2023-09-02 23:18:14 · 755 阅读 · 2 评论 -
0-1项目脚手架命令行生成项目目录
前端基建原创 2023-08-15 20:44:14 · 182 阅读 · 0 评论 -
一个简易的js,ts插件开发模板纯js及页面组件,涵盖esbuild,babel,rollup打包
一个简易的js,ts插件开发模板纯js及页面组件,涵盖esbuild,babel,rollup打包原创 2022-07-07 17:14:11 · 1674 阅读 · 1 评论 -
file,filereader,blob,base64,arraybuffer数据类型的一些总结
浏览器一些常用到的数据结构原创 2022-07-05 11:14:14 · 499 阅读 · 1 评论 -
commonjs和es module对定义变量被改变的分析
commonjs和es module都是js模块化机制,commonjs一般用于服务端写nodejs而es module是用与web浏览器js开发。这篇文章主要说的是在两种不用的模块化机制中对于定义的变量改变的区别commonjs:commonjs 引用的js文件中的变量被改变是其他地方引用相同的文件的变量不会被改变文件test1const {a, afn} = require('./testmodule')console.log(a, '进来了')afn()setTimeout(fun原创 2022-03-28 16:43:34 · 811 阅读 · 0 评论 -
搭建前端测试单元
新入职小菜鸡的我一来就淹没在大佬群中,本着在猥琐发育一波的心态在业务开发之余精进了一下大佬们的测试单位并单独搭建出一个写测试用例的项目。这次的测试单元主要是针对reacthook + ts,对reacthook抽离逻辑进行单位测试。主要的测试工具我选的还是jest,针对reacthook的测试工具我选择了@testing-library/react-hooks 从0开始搭建。目录结构在之前的工作中对并不需要特别去关注单元测试这块,因此现在从0开始踩坑。坑1.jest会自动去查找项目下所有的.原创 2021-12-21 17:09:06 · 566 阅读 · 0 评论 -
web将pdf转成图片以及图片转回pdf的方法
索然无味的sass系统开发中突然加入了一个稍微有那么点意思的需求。产品对一个2年前的项目一顿花里胡哨的操作之后终于定下了这个看似高端实则有点多余的功能。我的测试项目脚手架是vite-react。1.pdf转图片主要是使用了pdf.js这个js库,可以支持base64(input选择文件)和url的形式文档:https://github.com/mozilla/pdf.js/blob/master/src/display/api.js下载:Getting Started注意:这个库我没有在npm上找原创 2021-09-26 14:35:21 · 5395 阅读 · 0 评论 -
web worker API开启浏览器js多进程
面试使人进步!!!在大厂佬们的碾压下接触到了目前工作中没有遇到的新api和新思路以及解决方案。今天就来说说这个新的api web Worker。以下是MDN原话指的是一种可由脚本创建的后台任务,任务执行中可以向其创建者收发信息。要创建一个 Worker,只须调用Worker(URL)构造函数,函数参数 `URL` 为指定的脚本。Worker也可以创建新的 Worker,当然,所有 Worker 必须与其创建者同源。很明显了就是让我们可以开启一个新的进程来处理js。js是采用的是单线程...原创 2021-09-17 22:16:13 · 725 阅读 · 0 评论 -
函数柯里化
通过函数柯里化加强对js函数的认识。普通柯里化 function a(b: number) { return function (c: number) { return b + c; }; } a(1)(2);进阶柯里化 function add(...args: any) { return args.reduce((a: any, b: any) => a + b, 0原创 2021-07-23 18:01:38 · 148 阅读 · 0 评论 -
vue3学习小结
目录闲谈对比vue和react生命周期setup总结闲谈今年的学习计划终于到了vue3了。自从上家公司入职之后有一年没有使用vue开发项目了,之后基本都是用的react来进行项目的开发。由于vue更新了vue3版本一方面为了提升自身的竞争力,另一方面也是对于升级之后的vue3比较充满期待。对比vue和react使用react开发了一年半左右在回头来看vue,react有两种组件模式来进行开发函数式组件和class组件官方更推荐使用函数式组件。函数式组件确实开发起来比较纯原创 2021-05-08 14:27:51 · 499 阅读 · 2 评论 -
正则基础学习
RegExp对象:字面量:let reg = /\bis\b/g 构造函数方式:let regs = new RegExp('\\bis\\b', 'gi')第二个参数可以是g(全局),i(大小写),m(多行搜索)。也可以是组合形式详细见下方'RegExp对象属性'元字符 正则表达式中有特俗含义的非字母字符(见下方)原义文本字符 例如:我,你,a,b,c,1,2,3这样的标识匹配该字符g 全局匹配i ignore case忽略大小写(默认...原创 2021-02-05 15:41:27 · 231 阅读 · 0 评论 -
webapck的plugin插件的学习
weboack的插件功能相对于loader来说能实现更强大的功能。我们常见的copy-webpack-plugin、html-webpack-plugin等的插件都是在webpack执行中的某个生命周期中进行字符串操作或者文件操作。插件实际上就是一个class对象它具有apply属性可以被webpack compiler调用。主要的还是了解compiler对象相关的生命周期以及tap,tapAsync和tapPromise方法,然后根据业务需求在相应的生命周期中执行相应的操作。class...原创 2020-11-16 17:02:12 · 222 阅读 · 0 评论 -
手写简单的webpack-loader插件
webpack的loader主要是用来处理字符串的,这里处理的对象主要是你写的源代码或者你webpack配置中include的文件。首先webpack中module.exports = { resolveLoader: { // 默认的loader路径是node_module在这里可以添加新的路径 modules: [ 'node_modules', path.resolve(__dirname, './loader_module') ], extensions: [ '.js原创 2020-11-16 15:01:31 · 318 阅读 · 0 评论 -
new做了什么
// new操作符做了如下操作 function newObj() { console.log('newObj', this) this.x = 1 } let obj = new newObj()// 直接new function setObj(pObj) { let obj1 = {b: 1}// 开启一个对象 pObj.apply(obj1)// 调用开启的对象作为this上下文 obj1.__p...原创 2020-09-15 11:12:17 · 177 阅读 · 2 评论 -
脱离脚手架0-1搭建react项目
公司的项目太多了有小半年没有写博客了。今天准备更新这篇干货。背景:这段时间经历了公司,项目的洗礼让我对于项目的自主搭建有了更深刻的认识。当我们使用别人的东西开始就注定要受制于人,例如create-react-app这样的脚手架一切的东西都帮你配置好了。当你遇到想要自定义端口、打包路径、入口文件、或者引入新的wenpack插件的时候,这个时候你就需要在脚手架的基础上执行npm run eject来开启该脚手架的自定义功能;这个时候如果你已经开发到了一半那么这样的操作可能会给你带来意想不到的麻烦,当然虽然有提供原创 2020-06-03 17:59:10 · 478 阅读 · 1 评论 -
js的事件订阅
学习了https://blog.csdn.net/Mandyucan/article/details/80820139这位兄弟的博客。这段时间用到事件订阅的例子不少于是就来学习了一下,事件订阅在js总的webview;node的事件发送和接收;vue的组件间的事件通信以及事件巴士等是很常用的。var eventCenter = { sub: function(name, cal...转载 2019-11-26 16:00:47 · 454 阅读 · 0 评论 -
原型链新的理解
最近换工作在面试,又碰到这个问题虽然在js中原型链无处不在但是说实话我真不知道我要对他进行什么操作。所以一般都不会去理会这个东西。为了更直观的理解这个东西我也不画什么看不懂的图了。直接把这些东西放在一起打印我感觉更直观一些。当然这里要先理清对象和函数对象还有构造函数constructor我的理解是原型和原型链就是js中的任何一个对象的上的默认属性(正常没用到谁会去管这些东西,偏偏面试就是...原创 2018-08-28 22:40:26 · 126 阅读 · 1 评论 -
每日一条js之立即执行函数
js中立即执行函数不用通过调用既能自己执行,并且不用声明立即执行函数的好处可以隔离作用域,这一点就理解成闭包吧用了立即执行函数可以解决for循环中回调函数没有立即执行的问题立即执行函数有以下三种写法第一种:(function(){alert(1);}())第二种:(function(){alert(1);})()第三种(比较少用):!function(){ale...原创 2018-09-16 22:29:32 · 180 阅读 · 0 评论 -
每日一条js之通过原生jsDOM操作改变节点的样式
在编写js的代码过程中难免会遇到一些数据改变后或者场景要根据条件改变页面上元素的样式方法一object.style.属性名例如:var box=document.getElementById('box1');box.onclick=function(){ box.style.width="350px"; box.style.height="350px"; box...原创 2018-09-16 22:38:48 · 3439 阅读 · 0 评论 -
每日一条js之获取,删除,添加(改变)节点上的自定义属性
在html中可以在元素上设置不同的属性,这里我们把任意设置的属性和data-name开头的分开来看js中取到这些属性的方法有如下方法一:nodename.dataset这个方法是针对data-开头的属性<div id="box" s="200" data-index="111">危险流浪者</div>var Box=document.getElement...原创 2018-09-16 23:02:38 · 290 阅读 · 0 评论 -
setInterval和clearInterval
最近在做项目的时候遇到了setInterval和clearInterval这两个js函数,今天特地来感悟记录下我是在vue的项目中进行的代码,有下面两种用法第一种:直接在setInterval中使用clearInterval<button @click="cilck1">测试</button>事件如下:cilck1 () { var time = ...原创 2018-09-12 23:14:26 · 780 阅读 · 2 评论 -
每日一条js之宽高
在前端逻辑中无论是操作数据的vue框架或者原生的dom操作都会用到获取元素、窗口等的宽高在这里直接上图吧,用写的感觉比较拖沓转载 2018-09-17 22:50:31 · 127 阅读 · 0 评论 -
每日一条js之时间戳
无论是前端或者后端在编写逻辑的过程中都会用到时间戳这个东西一般我用时间戳,来命名一些上传的文件或者图片地址,比如之前做过的小程序项目图片上传到七牛云,为了避免图片地址的重复。时间戳有两种精确方式一种是13位毫秒级别和10位秒级别写法如下:Date.parse(new Date())时间戳是13位的后面是000为毫秒数除以1000为秒数new Date().getTime();获取精确...原创 2018-09-17 22:57:16 · 1092 阅读 · 0 评论 -
每日一条js之原生事件(监听、冒泡、事件委托)
收集了一些比较偏僻的js原生事件和注意点一、click和onclick的区别当我们在使用点击事件的时候会用到这两个点击事件,但是有时候能成功有时候却失败。原因是因为click不能作用在动态加载的元素上,onclick可以。图省事往后原生js全用onclick了哈哈。动态加载的元素比如说原生ajax请求到的数据后的回调函数中要将动态数据渲染到页面上时插入html代码。二、pr...原创 2018-09-17 23:44:34 · 498 阅读 · 0 评论 -
每日一条js之数组对象forEach遍历数组方法
方法:array.forEach(function(当前元素(必), 当前元素的索引值, 当前元素所属的数组对象), thisValue(如果这个参数为空, "undefined" 会传递给 "this"值))数组对象的forEach中有两个参数第一个是回调函数,第二个选填一般是this(这个参数目前我没用到过)回调函数中可以传入三个参数value当前参数,index索引值,当前参...原创 2018-09-18 11:54:33 · 4759 阅读 · 0 评论 -
每日一条js之promise之异步操作
promise的好处可以减少异步操作中嵌套层级的数量,避免回调地狱也使得代码更加简洁代码易于维护下面是一个promise实例的基本写法new Promise(function (resolve,reject) { //异步操作 resolve();//处理成功 reject();//处理失败}).then(function A() { //成功后下一步执行...原创 2018-09-18 16:18:20 · 161 阅读 · 1 评论 -
每日一条js之针对json对象
在js的ajax中json对象是经常用到的。在js中可以通过for in循环的方法,以键值对的方式输出json对象中的数据。代码如下:var json={ "name":"流浪者", "url":"http://www.baidu.com", "city":{ "city1":'福建', "city2":原创 2018-09-18 23:30:23 · 108 阅读 · 0 评论 -
每日一条js之字符串
在编写js逻辑的时候免不了要对字符串进行处理,下面是一些js关于字符串操作的一些方法1.字符串长度:string.length返回字符串长度2.下标查询: charAt(1)这个方法类似数组的下标查询3.匹配某字符串在另一个字符串中的位置 indexOf('.')返回第一次出现的位置,没有则-1。这个方法也可以用来判断某字符串中是否存在否某段字符 las...原创 2018-09-20 23:13:21 · 102 阅读 · 0 评论 -
每日一调js之数组操作
js中数组操作也是非常常用的,像ajax请求到的数据很多情况是要在回调中进行数据的操作。下列是一些数组的方法:1.数组的添加和删除(返回改变后的数组):尾部:push()尾部加入,pop()尾部删除头部:unshift()头部添入,shift()头部删除2.数组某一项或多项的删除替换(返回改变后的数组) splice(起点,删除长度,元素1,元素2,...),根据...原创 2018-09-20 23:45:05 · 210 阅读 · 1 评论 -
每日一条js之DOM操作(获取、创建、插入、删除)
原生的js不像vue这类数据绑定的框架,原生js涉及到很多dom相关的操作,显得比较繁琐,但是想到前端流行的框架都是基于原生js写的还是去学习了下。在对dom进行操作之前都要先获取到dom元素:获取dom元素的方法可以通过id、class、或者元素标签名等如:var oRoot = document.getElementById('root'); 1.获取子级oRoot...原创 2018-09-21 00:09:34 · 471 阅读 · 0 评论 -
小程序image组件的bindload方法
今天无意中看到小程序小程序image组件的bindload方法有下面的用法.wxml<view><image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad"></image>&a原创 2018-10-13 18:14:46 · 15293 阅读 · 0 评论 -
vue之豆瓣电影(一)
前言学习vue也有一段时间了,一些常用的指令,路由、vuex、生命周期也了解的差不多了。公司目前没有vue的项目为了得到进一步的突破,决定利用空闲的时间写一个关于电影单页面应用。由于没有后端因此选择了豆瓣的接口,项目很简单但是代码的过程中使用到尽可能多的vue相关的知识。项目中用到了vue2.0、mint-ui、webpack、vue-cli、vue-router、vuex、axios、s...原创 2018-10-08 21:49:54 · 1068 阅读 · 1 评论 -
vue子组件通过$emit发送方法改变父组件的值
做项目遇到需要在父组件中点击子组件的按钮来隐藏整个子组件,父组件(红色部分)子组件(红色部分)子组件:添加一个点击事件来触发$emit('方法名')发送一个方法父组件:(1)通过在引入的子组件标签上@子组件的方法名 (2)当子组件这个方法触发发送后 (3)父组件接收到发送的方法触发close方法达到子组件改变父组件的方...原创 2018-10-22 16:04:35 · 2682 阅读 · 1 评论 -
vue的prototype绑定方法
在main.js中(七牛为例)import {uploadQN} from "./util/upload.js";Vue.prototype.uploadQN = uploadQN;使用直接this.uploadQN();原创 2018-10-26 15:07:04 · 6291 阅读 · 1 评论 -
vue中手动调用render函数进行data数据更新
今天做项目碰到了一个比较麻烦的问题for (let i = 0;i<that.list.length;i++){ if(that.list[i].id === e.target.dataset.id){ that.$forceUpdate(); that.list[i].total = 0 that.list[i].isCheck...原创 2018-11-08 20:19:18 · 8158 阅读 · 0 评论 -
每日一条js之数组操作find()查询
今天在做项目的时候遇到了elementUI级联选择器选择地区的功能,地区的信息是百度复制过来的一段json数据获取选中数据的时候只能获取到一个地区对应的value值,必须通过这个value值找到对应的label(的名字)。这次不再使用for循环改用较为简洁的find()函数直接return查询条件那条数据change (a) { var that = this var obj...原创 2018-11-09 22:27:53 · 1282 阅读 · 0 评论 -
html标签中的id不能用纯数字
今天碰到了一个坑,在用v-for做数据循环的时候吧每一条数据的id直接赋值到对应的标签上,应为是封装了组件在有些页面引用是没问题的,但是有些页面引用的时候js却报错了,一番排查之后发现是标签使用了纯数字,于是在数字前面加上了一个字母就好了。也只能说自己自学的基础不够扎实,html标签中的id不能用纯数字,不然会发生不可估计的错误。变量不能是纯数字,必须是字母、下划线、$开头的,编译器对纯数...原创 2018-11-08 20:24:33 · 5114 阅读 · 2 评论 -
vue中的无限循环问题
项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用。我直接写了一个方法来计算出每个商家和总的服务费用并return出来。如果不看控制台的话运行是没问题的。但是控制台报了无限循环的错误。 下面是错误代码html:js: 这里会出现无限循环的原因是数据更新触发计算方法来更新视图,视图更新又反过来触发这个方法...原创 2018-11-15 15:32:10 · 4960 阅读 · 2 评论 -
js之apply和call
function test1 (a,b) { console.log(a + b + this.c + this.d)}let obj = {c: 5,d: 6}test1.call(obj,3,1)//15test1.apply(obj,[3,1])//15call和apply第一个参数是用来改变this的指向的第二个参数是传入到test1方法中的参数call可以传入多...原创 2018-11-15 23:40:06 · 144 阅读 · 1 评论