前端
关注
分享
扫一扫
文章平均质量分 64
前端学习
bats421
这个作者很懒，什么都没留下…
展开
-
webpack入门总结
大部分配置文档官网非常详细，这里仅记录了入门学习时上手的一些demo和理解。webpack是一种构建工具，（构建工具相当于多个小工具的整合，比如将less转为css的工具，将ES6语法转为浏览器支持的语法等等，单个维护麻烦，因此整合起来）webpack构建工具需要一个入口文件，比如index.js，根据入口文件内的依赖关系，引进所有文件，整合成一个块叫做chunk，针对chunk进行各项文件处理（比如进行将less转为css的工具，将ES6语法转为浏览器支持的语法等等，这一操作叫做打包），处理完之后输出b原创 2022-06-29 15:14:33 · 371 阅读 · 1 评论 -
typescript入门知识总结
基于JavaScript的语言，对其的扩展，最大变化就如其名字一般，为变量引入了type。ts不能被js解析器直接执行，通过编译成js来执行。官方文档types// 声明一个变量，其类型为number// 使用|来连接多个类型（联合类型）let a: number | stringa = 10let b: string = '123'// ts可以对变量类型进行自动检测let helloWorld = "Hello World";// helloWorld = 123 报错//原创 2022-05-05 15:17:05 · 269 阅读 · 0 评论 -
requestIdleCallback是什么
requestIdleCallbackrequestAnimationFrame的回调会在每一帧确定执行，属于高优先级任务，而requestIdleCallback的回调则不一定，属于低优先级任务。我们所看到的网页，都是浏览器一帧一帧绘制出来的，通常认为FPS为60（每一秒刷新60次）的时候是比较流畅的，而FPS为个位数的时候就属于用户可以感知到的卡顿了，FPS60意味着：1000ms/60≈16.67，即每一帧的时间约为16.67ms（默认刷新率为60FPS）那么在一帧里面浏览器都要做哪些事情呢，如原创 2022-03-29 16:13:26 · 1314 阅读 · 0 评论 -
React demo（一） 实现一个简单的TodoList
项目概览技术栈：使用了React + Antdesign效果预览：项目地址：https://github.com/rendeyuwei/react-todolist记录项目中遇到的问题记录问题，有些问题是初次学习时遇到，以后回顾可能会觉得比较简单，略。style内联样式，套在双花括号中，value值用单引号要引起来。style={{margin:'0 auto'}}div水平居中，列举用到过的方法：使用上面的margin:'0 auto'组件之间的传递：a. 父组原创 2022-02-10 16:30:08 · 1001 阅读 · 0 评论 -
react入门基础知识总结
ReactReact是一个用于构建用户界面的JavaScript库，即操作DOM将数据渲染到HTML视图中为何使用React？不管使用原生JS还是Jquery操作DOM，浏览器都会进行大量的重排重绘。原生JS没有组件化，代码复用率低。React特点：组件化，声明式编码（相比于命令式编码，一步一步命令去执行，声明式只需使用对应语法，react会来执行对应操作）React Native可以进行移动端开发。虚拟DOM+Diffing算法，减少与真实DOM的交互依赖包babel，除了原创 2022-01-12 15:48:56 · 414 阅读 · 0 评论 -
Web API——URL
createObjectURL()objectURL = URL.createObjectURL(_object_);参数：object用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。返回值：一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。效果相当于为参数对象创建一个新的URL对象，该URL的生命周期与创建它窗口的document绑定。浏览器在document卸载时会自动释放该URL对象，但建议通过URL.revo原创 2021-11-05 15:03:26 · 325 阅读 · 0 评论 -
JS中parentNode和parentElement的区别
参考文章以一个网页作为例子：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="bb"> <div class="box1"></div>原创 2021-07-09 11:08:24 · 895 阅读 · 0 评论 -
JS数组遍历的几种方法
forvar arr = [1, 2, 3, 4, 5, 6]var len = arr.lengthfor(var i = 0; i < len; i++) { console.log(arr[i])}// 1 2 3 4 5 6for…in…这个循环用的人也很多，但是效率最低（输出的 key 是数组索引）var arr = ['我', '是', '谁', '我', '在', '哪']for(var key in arr) { console.log(key)}转载 2021-07-16 18:10:05 · 147 阅读 · 0 评论 -
electron require()报错：Uncaught ReferenceError: require is not defined
原文章在BrowserWindow下设置： mainWindow = new BrowserWindow({ width: 800, height: 800, webPreferences: { nodeIntegration: true, enableRemoteModule: true, contextIsolation: false, } })转载 2021-07-07 11:53:25 · 562 阅读 · 0 评论 -
Taro + 微信云服务 实战用法举例（附源码）
Taro + 微信云服务 实战用法举例云服务配置使用云函数云存储由于网上有关Taro框架使用微信云服务并没有太多教程，花费我很多时间，于是写下本博客。有什么问题欢迎提出。项目源代码见：1.1.0版本涉及到本博客代码为了将数据存储到云端服务器，而不仅仅是本地缓存，学习了微信云服务的相关用法云服务配置首先在开发者工具界面点击云开发，开通微信云服务在设置界面可以获取到环境ID：为项目配置云环境，要在project.config.json中添加"cloudfunctionRoot": "clou原创 2021-08-03 16:44:52 · 1420 阅读 · 0 评论 -
JavaScript——回文数
回文数代码很简单，先上代码（主要就是用reverse）：/** * @param {number} x * @return {boolean} */ var isPalindrome = function(x) { let str = x.toString().split('') // let oldStr = str //错误写法 let oldStr = Object.assign([], str) // let oldStr = [].concat(str)原创 2021-08-17 14:43:01 · 646 阅读 · 0 评论 -
JavaScript——数组中重复数字
JavaScript——数组中重复数字最简单的遍历数组来实现：/** * @param {number[]} nums * @return {number} */var findRepeatNumber = function(nums) { let temp = [] let result for(let i=0;i<nums.length;i++){ if(temp.includes(nums[i])){ result =原创 2021-08-18 14:43:21 · 819 阅读 · 0 评论 -
基于Taro+Vue实现的微信小程序—待办事项
微信小程序 待办事项（项目实战）GitHub地址：一日之计在于春 极简待办项目采用技术：Taro + Vue + Taro UI项目模板来源：ToDoMVC，在该项目基础上不断完善，欢迎共同学习完善。原创 2021-07-30 16:27:00 · 666 阅读 · 0 评论 -
Vue —— $emit 监听子组件事件
Vue —— $emit 监听子组件事件监听子组件事件（官方Demo）基本用法子组件通过`emit`抛出参数父组件接受的事件不是一个方法父组件的事件处理函数是一个方法在自定义组件上使用`v-model`vm.$emit( eventName, […args] )参数：{string} eventName[…args]触发当前实例上的事件。附加参数都会传给监听器回调。监听子组件事件（官方Demo）基本用法在我们开发 <blog-post> 组件（子组件）时，它的一些功原创 2021-07-14 10:33:49 · 936 阅读 · 0 评论 -
微信小程序 在回调函数中使用this
微信小程序 在回调函数中使用this wx.showModal({ title: '删除任务', content: '确定删除该任务？', success: (res) => { if (res.confirm) { console.log('用户点击确定') this.todos.splice(this.todos.indexOf(todo), 1) }原创 2021-07-30 09:33:04 · 623 阅读 · 0 评论 -
Web API ——Storage
StorageStorage接口的方法包括：Storage.getItem(), Storage.setItem(), Storage.removeItem(), Storage.clear()sessionStorage与localStorage不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。**在新标签或窗口打开原创 2021-11-02 13:51:46 · 440 阅读 · 0 评论 -
CSS Position知识总结
提前知道文档流文档流原文英文为，normal flow，理解起来意思为正常的页面流结构，从左到右，从上到下显示，传统的HTML文档布局。W3C原文档参考：https://drafts.csswg.org/css2/#normal-flow视口MDN参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Viewport_concepts#%E4%BB%80%E4%B9%88%E6%98%AF_viewport视口，即viewport，分为视.原创 2021-10-13 11:25:08 · 150 阅读 · 0 评论