- 博客(40)
- 收藏
- 关注
RSS订阅原创 如何使用jszip文件格式转换与批量打包成zip下载
该函数接收一个包含文件 URL 的数组 downloadURL，遍历数组中的每个文件 URL，调用 getFileData 函数获取文件数据，并将其添加到 JSZip 实例对象 zip 中。本文将介绍如何通过 JavaScript 实现将文件 URL 转换为 Blob 类型格式或者 arraybuffer 格式，并通过 JSZip 库实现文件的压缩和下载。通过这些代码，我们可以方便地实现文件的格式转换和下载功能，提高前端开发的效率。提供先进的推理，复杂的指令，更多的创造力。
2023-12-07 11:08:15
460
原创 react的源码中的浅比较Object.is()方法
需要注意的是，Object.is() 方法的比较规则和 ===（双等号）操作符的比较规则是不同的，这意味着在某些情况下使用 Object.is() 可能比 === 更为严格。例如，Object.is(+0, -0) 返回 false，而 +0 === -0 返回 true。Object.is() 是 JavaScript 中的一个方法，用于比较两个值是否相等。和 === 或 ==（双等号）操作符不同，Object.is() 比较的是值是否严格相等，不会进行类型转换。如果两个值都是 NaN，返回 true。
2023-06-19 23:16:48
370
原创 react如何处理setState，useState异步问题
通常情况下，React 采用异步渲染方式来更新 UI，即 React 将多个更新操作放入队列中，待到合适的时机再统一批量执行这些更新操作，从而减少代码执行时间。例如，如果您在使用 React 更新某个元素的样式时，同时也更新其某个信息，可能会出现样式更新不及时的情况（因为 React 延迟了更新），从而导致一些交互响应性能问题。flushSync 是 React 提供的一种实验性的 API，用于控制 React 更新的同步/异步方式，并且只能在 React 16 及更高版本中使用。
2023-06-19 22:51:17
708
原创 利用set对象，简易完成对两个数组去重
1.对于两个数组合并去重我们可以利用Set对象唯一性的特点const a=[1,2,3,4]const b=[2,4,5,6]const mySet=new Set([…a,…b])console.log([…mySet])打印输出：[ 1, 2, 3, 4, 5, 6 ]
2021-07-10 18:51:13
278
原创 2021年你需要掌握的前端小知识
1.使用css写出一个三角形角标div { width: 0; height: 0; border: 5px solid #transparent; border-top-color: red;}2.水平垂直居中div { width: 100px; height: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
2020-11-24 10:47:30
219
3
原创 js如何从数组删除某些属性
var orderList= [{"item_id":"121","label":"[\"茄子\",\"打击我气的\"]","remarks":"","title":"测试小程序商品","sales_num":null,"img_url":"https://haibeimaster.oss-cn-hangzhou.aliyuncs.com/__liemi__/image/jpeg/ABFXZMNT01234678_1598588753.jpg","price":"100.00",...
2020-11-03 17:20:45
1671
2
原创 如何实现让最上面的图层不影响下面图层的点击事件
其实方法很简单只要设置样式： pointer-events: none;如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素Pointer-events原本来bai源于SVG，目前在很多浏览器中已经得到体现du。不过，要让任何zhiHTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性...
2020-10-24 15:10:05
2824
原创 前端超实用用的js倒计时功能,及各种处理时间功能
1.js倒计时功能 calcTime(str,seeTime) { let date1 = new Date(str); //开始时间 let date2 = new Date(); //结束时间 let date3 = date2.getTime() - date1.getTime() //时间差的毫秒数 let isFirst = (seeTime - date2.getTime() > 0) ? true:false; let isO...
2020-08-06 09:44:52
574
原创 小程序原生如何分享到朋友圈功能
小程序分享朋友圈功能,目前在内测阶段,只对安卓用户有效onShareTimeline(e) { console.error("点击分享pyq", e) var query={ data:"dsadbiujasdoinsa" }; query=JSON.stringify(query); return { title: "xxxxxxxxx", imageUrl: "", query: query, }
2020-08-05 17:16:01
551
原创 微信小程序,除了在url后面传递,如何在下一个页面传参,在下个页面如何接收到
wx.navigateTo({url: '/pages/views/business/data/supplier/editSupplier/editSupplier',success: function (res) {// 通过eventChannel向被打开页面传送数据res.eventChannel.emit('edit', {title: '修改',id: id,})}});被打开的页面/*** 生命周期函数--监听页面加载*/onLoad: .
2020-06-19 17:33:35
688
原创 小程序开发，6行代码实现微信小程序页面返回顶部效果
wxml部分：<scroll-view scroll-y scroll-with-animation='true' scroll-top='{{ topNum }}'> <view>1</view> <view>1</view> <view>1</view> <view>1</view> <view>1</view> <view>1</vie
2020-06-14 23:27:25
218
原创 UniApp ，微信小程序简单易懂实现小程序的登录功能
微信登录思路：在main.js 中封装公共函数，用于判断用户是否登录在main.js 中分定义全局变量，用于存储接口地址如果没有登录、则跳转至登录页面进入登录页面通过 wx.login 获取用户的 code通过 code 获取用户的openID和密钥微信登录思路：在main.js 中封装公共函数，用于判断用户是否登录 在main.js 中分定义全局变量，用于存储接口地址 如果没有登录、则跳转至登录页面 进入登录页面 通过 wx.login 获取用户的 code 通过 code 获取用户的
2020-06-13 22:56:25
3597
原创 get和post的区别
GET - 从指定的资源请求数据。而且是在URL上，不怎么安全POST - 向指定的资源提交要被处理的数据。是发送在请求体里GET：不同的浏览器和服务器不同，一般限制在2~8K之间，更加常见的是1k以内。GET和POST的底层也是TCP/IP，GET/POST都是TCP链接。GET产生一个TCP数据包；POST产生两个TCP数据包。对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100
2020-06-12 11:03:14
121
原创 对Cookie和Session的异同点，Cookie有哪些限制？
cookie数据存放在客户的浏览器上，session数据放在服务器上。cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。...
2020-06-12 10:59:23
176
原创 输入URL到页面加载显示完成发生了什么?
输入URL到页面加载显示完成发生了什么?DNS解析TCP连接发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析渲染页面连接结束
2020-06-12 10:56:58
161
原创 uniapp框架小程序开发如何二次封装请求
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。本次讲解的是如何二次封装请求,不足之处可以评论指出//设置请求根路径const BASE_URL='https://uinav.com/api/public/v1/'//向外暴露一个方法，因为是异步请求所以这里用promise方法export const myRequest=(options)=...
2020-06-09 09:14:29
919
3
原创 微信小程序转换文件的格式，如把图片转为Base64的格式
//先获取文件管理器const fileManger = wx.getFileSystemManager()//调用文件管理器的一个读取文件内容方法 fileManger.readFile({//图片路径 filePath:imgurl,//图片转换的编码格式 encoding: base64, success:res=>{ }微信小程序还有很多方法都很使用，具体可以参观官方文档，关注我给你分享小知识...
2020-06-09 09:00:10
3608
1
原创 本地存储cookies，sessionStorage 和 localStorage 的区别
cookie: cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。 cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 存储大小： cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2020-06-02 09:31:39
176
原创 vue项目优化，路由懒加载
当打包项目时，js包会变得非常的大影响页面加载，影响页面加载，如果我们把不同路由对应的组件分割成不同的代码块，当路由被访问时才加载对应的组件，这样就更加高效了。1.安装 @babel/plugin-syntax-dynamic-import2.配置babel-plugins在babel.config.js里的plugins引入包"plugins": [ "@babel/plugin-syntax-dynamic-import" ]3.修改引入方式按功能模块打包到一块.
2020-05-29 22:31:33
171
原创 2020新版企业开发项目优化，通过cdn加载外部资源
因为入口文件中通过import导入包的方式，最终都会打包到同一个js文件中，所以导致chunk-vendors文件体积过大1.在vue.config.js里在发布阶段的时候使用externals设置排除项，这些文件就不会打包了，既然这些文件都打包到同一个js文件里体积过大，所以忽略一些js文件不打包(只需要配置发布阶段即可) chainWebpack: config => { // 当前环境为 发布阶段 config.when(process.env.NODE_ENV =.
2020-05-29 14:02:09
431
原创 轻松上手企业开发，vue项目优化配置webpack不同的多入口文件
1.在项目中创建vue.config.js文件2.js内部暴露出一个配置对象module.exports = { }3.利用chainWebpack配置不同环境设置不同的入口文件chainWebpack:config=>{ // 当前环境为 发布阶段 config.when(process.env.NODE_ENV == 'production',config=>{ config.entry('app').clear().add('./src
2020-05-29 11:41:41
283
原创 前端开发项目优化，利用nprogress给项目添加进度条
1.安装nprogressnpm i nprogress2.在main中导入进度条组件//导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogress.css'3.利用请求拦截器设置NProgress.start()显示进度条axios.interceptors.request.use(config => { NProgress.start() config.header
2020-05-28 21:04:13
199
原创 带你轻松掌握mockjs，结合vue-cli高效开发企业项目
为什么使用mockJs在工作开发中，如果后端接口还未开发完成，难道我们就只能写静态页面了吗？所以前端为了不影响工作效率，我们自己手动模拟后端接口返回随机数据。采用json数据模拟，生成数据比较繁琐，也比较有局限性，没办法达到增删改查采用mockJs进行模拟数据，可以模拟各种场景（get、post）生成接口，并且随机生成所需数据，还可以对数据进行增删改查使用mockjs1.首先我们通过vue-cli搭建基本项目2.在项目中安装mocknpm i mockjs3.新建mock.js在项目中引入
2020-05-28 00:19:31
148
原创 2020最新版前端面试题--vue面试题（观看博客可看其它面试题）
1.什么是vue的生命周期vue实例从创建到销毁的过程就是vue的生命周期2.vue生命周期的作用是什么它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。3.第一页面加载会促发哪几个钩子第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几 个钩子4.DOM 渲染在 哪个周期中就已经完成？DOM 渲染在 mounted 中就已经完成了。5.简单...
2020-05-22 20:09:50
730
原创 2020最新版前端求职，HR最常问小程序面试题
1.小程序里的事件绑定bindtap和catchtap的区别是什么？bind事件绑定不会组止冒泡事件像上冒泡，catach事件可以阻止事件向上冒泡2.在 app.json 配置文件中，最主要的配置节点是 pages 数组：配置小程序的页面路径 window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景色 3.页面配置和局部配置的关系 app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现； 如果某些小程序页面，想要拥有特殊的窗口
2020-05-21 21:08:11
562
原创 带全面解析路由勾子，让轻松上手使用
路由勾子1.全局勾子:会对所有路由进行拦截，beforeEach进入前进行拦截，afterEach已经进入了(一般不用)2.路由独享勾子:可以在路由配置规则上直接定义 beforeEnter守卫，可以针对某一路由进行拦截，如下只拦截home路由const routes=［{path:'/home',component:Home,beforeEnter(to,from,next){}}，{path:'/index',component:Home}］3.组件内的守卫只针对组件进行拦截
2020-05-16 14:19:19
217
原创 带你轻松了解使用Vue路由导航守卫的方法
首先你要创建一个路由实例const router=new Router（{routers:［//这里配置路由规则］}）接着挂载路由导航守卫router.beforeEach（(to，from，next)=>{//to表示将要访问的路径//fron表示从哪个路径跳转而来//next一个函数代表什么情况放行next（）直放行，next（跳转路径）//如果是登录页面直接放行if（to.path==='/login'）return next（）//获取tokenconst token
2020-05-15 10:50:03
199
原创 vue简易全局配置axios
1.在入口文件main.js里首先引入这个包import axios from "axios"2.把这个方法挂载在vue的原形对象上Vue.prototype.$axios=axios//这样每个组件都可以通过this.$axios直接发送ajax请求3.设置请求的根路径axios.defaults.baseURL="这里填请求根路径"...
2020-05-14 20:53:23
1025
原创 一招带你了解vue项目登录，退出功能-token原理分析
客户端在登录页面输入用户名和密码进行登录，服务器验证通过之后生成该用户的token值并返回，每个用户拿到的token值都是不一样的，客户端拿到token值以后需要存储该token，后续的所有请求都要需要携带该token，服务器验证token是否通过，并返回不同的数据，完成退出功能只需要清楚本地的token即可。...
2020-05-13 23:22:25
1106
1
原创 一招教你轻松上手vue项目，webpack打包的基本使用
如何在项目安装配置webpack1.运行 npm i webpack webpack-cli -D 命令安装相关的包2.在项目根目录中，创建名为webpack.config.js的webpack配置文件3.在webpack的配置文件中，初始化如下基本配置:module.exports={mode:'development'//用来指定构建模式}4.在package.json配置文件中的script节点下新增dev脚本:“script”:{“dev”:“webpack”}5.在终端运营
2020-05-11 23:58:47
158
原创 按需导出与默认导出
默认导出export default只能使用一次按需导入import 默认导入的成员 文件路径import m from "./m.js"按需导出export 可以和默认导出一起存在使用按需导入import {按需倒入成员} 文件路径可以和默入一起使用import {m} from "./m.js...
2020-05-11 22:09:35
1092
原创 一招教你如何通过uniapp打包各版本发布到不同平台
想把自己写的小程序制作成各种版本，并发布到各个平台，其实用uniapp就可以轻松实现:1.需要使用编辑器HBuilder X，和掌握uniapp语法来编写2.写完以后如何打包上线先要点击util文件夹下的manifest.json文件完成项目配置然后点击发行就可以打包成各种类型的版本了...
2020-05-11 21:25:54
5076
2
原创 一招轻松搞定路由vue-router的使用
vue-router的基本使用1.首先引入vue-router.js2.用route-link创建对应的路由链接3.在页面添加路由占位符4.创建路由规则const router=new VueRter（routes:［{path:"",component:User}］）5.创建对应的组件const User={template:""}6.挂载路由实例对象到vue的实例对象里...
2020-05-10 09:04:59
113
原创 vue如何设置路由重定向
vue路由重定向路由重定向指的是，用户访问地址A的时候，强制用户跳转到地址B从而展示特定的组件页面；可以通过路由规则里的redirect属性，指定一个新的路由地址，可以很方便的设置路由重定向,具体代码演示{path:"/",redirect:'/hone'}...
2020-05-08 07:53:03
1574
原创 2020最新前端面试vue知识点集锦
1.VUE的两个核心组件系统，数据驱动2.什么是双向数据绑定v-model,数据发生变化，同步视图，视图发生变化，同步数据
2020-05-05 00:26:58
176
原创 90%以上的人都要看的，前端开发工程师vue面试题干货集锦，轻松搞定HR,拿到高薪酬
小编在这里总结一些vue常见的面试题，希望能够帮助到你们的面试1.你对vue中mvvm的模式设计有什么感想？mvvm设计模式采用的双向绑定，当view发生变化，model会跟着变化，model发生变化，view也会同步，这样的话，我们就可以更多的关注逻辑，从而减少dom的操作，代码的耦合性也更好2.vue中利用索引修改数组的时候，页面会跟着同步吗？利用索引修改数组的时候，页面不会进行同步，...
2020-04-18 22:42:00
225
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人