- 博客(93)
- 收藏
- 关注
RSS订阅原创 Vue页面国际化处理loader
主要的思路是：维护一个中文和国际化key的映射文件，匹配src下.vue和js文件中的中文，替换成$t方法。由于正则表达式不是很好，弄得也是磕磕碰碰，不过最终还是满足了项目的需要，做完一大收获是正则的使用提高了那么一些。于是便开始思考如何去解决这个问题，最终决定使用 webpack loader来处理转换代码原文，达到代码中还是照常写中文，国际化功能照常使用的目的。loader接受的第一个参数是文件的原文字符串，根据上面的场景 定义不同的正则 用replace来处理。这个loader也已发布npm包，
2023-04-27 14:57:22
359
1
原创 element 树形表格报Error: for nested data item, row-key is required
element树形表格报以上这个错，按网上的说法改 roke-key, 去掉element版本号前的^都不行，最后发现在每条数据里加上一个id属性就可以了，我数据本身没有id这个字段。
2021-08-23 10:42:10
1865
原创 前端字体图标的使用总结
有时候我们业务中会遇到需要字体图标的场景比如在不同的地方图标显示的颜色不同，这个时候使用字体图标就很适合，这个场景我遇到了几次。使用字体图标的两种方式：1.让设计给出图标的svg文件，上传到iconfont上，然后再下载就可以和使用iconfont方式一样去使用了。2.通过css的mask属性直接引入svg文件 再通过样式改变图标颜色和大小a)法一<div class="icon></div>.icon { width: 16px; heigh
2021-03-14 22:05:58
874
原创 vue封装组件并发布到npm的简单流程
最近项目不是很忙，去研究了下封装Vue组件并发布到npm的流程，简单的记录下， 源码传送门。在动手开发之前去看了下element的源码，有很多值得学习的地方，如果对封装vue组件感兴趣的推荐一定要去看一看。一、首先是项目环境的搭建。主要还是配置webapck，之前一直使用vue-cli创建项目，对这块不是很熟折腾了一会儿。主要用到的依赖：vue，vue-template-compiler， vue-loader，webpack，webpack-cli，webpack-dev-server等。
2021-01-07 18:14:18
1753
原创 Grid布局简单介绍及实现常见的布局
网格布局（Grid）是最强大的 CSS 布局方案。 ——阮一峰阮大神最近项目中遇到了一些css问题，通过grid布局就能很好的解决，之前grid布局没有用过也不怎么了解，所以在解决问题的过程中特地去学习了一下，主要看了阮大神的文章。先说说我项目的布局问题吧，就是类似于下图的这种，每块内容宽度不固定，pc上的时候3等分 ，笔记本上就2等分，每块之间需要有一定的间距。这个时候使用...
2020-11-29 12:27:31
3506
1
原创 vue递归组件简单实现一个树形组件
<template> <div class="list-wrap"> <div v-for="item of list" :key="item.title" class="item" > <div class="item-title-wrap" @click="onItemClick(item)" > <div class=".
2020-11-14 18:15:20
545
原创 vue3+node(koa2)写一个网站(三)-服务器篇
mac: 在终端中输入 ssh root@公网IP 连接服务器， 公网ip在阿里云实例列表查看也可以通过阿里云远程连接 来连接服务器
2020-11-08 16:51:50
382
原创 vue3+node(koa2)写一个网站(四)-SQL常用命令
--显示所有的库show databases;--使用某个库use myblog; --显示所有的表show tables;--增 users为表名insert into users (username, `password`, realname) values('lisi', '123', '李四');--删-- 硬删除 delete from users where ...
2020-11-08 16:51:03
201
原创 vue3+node(koa2)写一个网站(二)-node篇
使用koa2框架来开发，使用方式如下：npm install koa-generator -gkoa2 project-namecdproject-namenpm install然后npm run dev就可以跑起来了。1.其他环境的搭建需要安装redis、MySQL客户端（本地调试需要用到），安装方法可在网上搜索。还可以安装Workbench客户端，MySQL图形化管理工具，操作起来比较方便。npm install cross-env --save-dev 设置环境变量//.
2020-11-08 16:50:31
626
原创 vue3+node(koa2)写一个网站(一)-前端篇
采用vue-cli 4.5.0生成项目目录。新版本的脚手架生成的项目 main.js与之前旧版本略有不同，新版本如下：//main.jsimport { createApp } from 'vue';import App from './App.vue';import router from './router';// 法一const app = createApp(App);app.use(router)app.mount('#app')//法二//createApp(App
2020-11-08 16:48:47
1257
2
原创 前端面试常见手写函数
1.记忆函数 记忆函数顾名思义就是可以记住计算结果的函数，通过闭包来缓存结果，通过判断缓存中是否有值来决定是计算还是使用缓存中的值。可以避免重复计算，对于需要大量时间进行计算的函数能提高性能。function memorize(fn) { var cache = {}; return function(...args) { let key = args.to...
2020-10-20 15:57:47
430
原创 javascript 一些工具函数
一、数组篇1.判断两个数组是否存在包含关系（不管数组里面值得顺序）const isContainedIn = (a, b) => { for (const v of new Set(a)) { if (!b.some(e => e === v) || a.filter(e => e === v).length > b.filter(e => e === v).length) return false; } return true;};
2020-09-25 15:32:35
147
原创 前端实现预览word、excel、pdf、ppt文件
最近遇到一个需要同时支持预览word、excel、pdf、ppt的需求，在此记录一下，目前只是简单实现预览的功能，没有作深入的了解。1.非常简单的一个方法如下（亲测同时支持word、excel、pdf、ppt文件类型）, 详情可查看文档//file_url是你的文件地址<a href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=file_url" target="_blan
2020-06-19 21:12:15
8057
1
原创 js创建对象与继承总结
最近再次看起了 《JavaScript高级程序设计》，在此做下笔记，总结一下 创建对象与继承的主要方式。一、创建对象虽然Object构造函数或对象字面量都可以用来创建对象，但这些方式都有个明显的缺点：使用同个接口创建很多对象，会产生大量的重复代码。为解决这个问题，人们开始使用工厂模式的一种变体。 ——《JavaScript高级程序设计》1.工厂模式这...
2020-04-17 17:29:48
281
原创 浏览器数据库IndexedDB初体验
最近在项目中尝试使用了一下IndexedDB，这篇仅仅是记录一下IndexedDB简单使用，详情可以查看 阮大神的文章。业务场景：用户与其他人的聊天数据，我们用的是环信，没有使用环信历史消息API，而是采用indexDB把数据缓存到本地。Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同）。Index...
2020-04-16 20:22:42
374
原创 微信小程序数据懒加载
业务中我们常会遇到图片较多、或者数据较多的列表，一次渲染出来的话轻则渲染时间过长，重则可能直接罢工白屏，什么都渲染不出来，这个时候懒加载(只渲染视口中的数据)就很有必要了。由于在小程序中，web上的一些懒加载方案并不适用。我所采用方法的思路是：1.判断视口能展示几条数据2.定义一个数组，长度和展示的数据列表长度一致，数组中前几个（和能展示的数据条数一致）设为true，其余设为false 3.滚动...
2020-04-08 21:44:03
4887
原创 微信小程序加入购物车动画
最近在做的一个小程序项目，需要一个加入购物车动画，倒腾了一下总算实现了想要的效果。代码如下(用的是wepy2.x语法)：//wxml//通过点击事件对象 获取到点击的位置<image src="{{imgDomain}}mini/ic_btn_add.png" class="img" @tap.stop="onCartAmountChange(item, ind...
2020-03-24 20:59:35
2573
5
原创 web和微信小程序前端直传图片到阿里云OSS
1.微信小程序中。 先调小程序 选择图片api,再调上传文件api.//对小程序api进行简单封装工具函数export const promisify = (api, options = {}) => { return new Promise((resolve, reject) => { // 将options对象赋值 然后再传给下面调用的方法中 optio...
2020-03-12 21:05:30
1071
原创 小程序踩坑总结
1.长按保存图片，我们遇到过：IOS什么都不用做长按就会弹出保存的弹窗，安卓却不会。在此总结两种方式：1）监听图片的点击（tap）或长按（longpress）事件，调用小程序预览图片api，再长按就可以保存了，除了保存还能实现识别途中小程序码（不是同个主题的小程序码也能跳转）、发送给朋友等功能。备注：不需要用户授权scan:function(e){ var current = e...
2020-02-26 19:45:07
450
原创 前端网络和安全相关总结
本文旨在总结一下前端相关的网络和安全相关的一些知识点，每个点都相对简陋，只用来了解个大概。一、浏览器页面渲染的流程1）解析文档构建DOM树HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree）CSS：解析样式表，生成CSS规则树（CSS Rule Tree）JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS...
2019-12-22 17:18:15
1157
原创 vue中总线机制(bus)
vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。vuex适用中大型项目、数据在多组件之间公用的情况。...
2019-12-07 17:06:24
7916
原创 JavaScript数组reduce方法介绍
个人觉得reduce方法可能是数组最有用的方法之一，数组其他迭代方法如forEach, map, filter, some, every的功能它都能做到。reduce方法接受两个参数，第一个参数为一个函数，该函数接受4个参数：前一个值、当前值、当前值在数组中的索引、数组本身；第二个参数为可选的初始值，这个参数虽然是可选的，但是非常重要，后面会在例子中展示它的使用。下面使用reduce来实现...
2019-11-24 00:07:43
219
原创 遍历对象并获取每一项的层级
let data = [ { id: 1 }, { id: 2, child: [ { id: 3 }, { id: 4, child: [ { id: 5 } ] }, { id: 6, child: [ ...
2019-11-19 19:03:07
1281
原创 遍历DOM的方式
以如下html代码为例：<div id="content"> <h3>我是标题</h3> <p> <span>我是span内容1</span> <span>我是span内容2</span> </p> </div>1.比...
2019-11-10 12:02:08
347
原创 JavaScript函数调用及函数上下文(this)
JavaScript中函数调用有如下4种方式：1.作为一个函数直接被调用， func()。 此时，在非严格模式中函数上下文this指向全局window;在严格模式中指向undefined2.作为一个对象的方法调用，obj.func()。 此时，上下文this指向这个调用它的对象obj3.作为构造函数调用new Func()，实例化一个新的对象。 此时，构造函数内部的this...
2019-11-08 18:38:35
603
原创 前端页面滚动到某个位置的方式
1.通过a标签滚动到对应锚点<a href="#target">点我滚动到目标</a><div id="target">我是目标我是目标</div><!-- 注：这样会在地址栏中加上hash值 #target -->2.通过window.scrollTo方法滚动//scrollTo两个参数分别表示显示的x y坐标位...
2019-11-07 21:00:52
13605
原创 在Vue中使用CKEditor5富文本编辑器
在项目中遇到富文本编辑器需要实现粘贴图片的功能，使用场景：如用户在其他地方截图可以直接在富文本编辑器内粘贴。找了一圈市面上开源免费的富文本编辑器，最后选中CKEditor。ckeditor document build 版本默认是可以粘贴图片的, 其他build版本没有尝试。安装： 有好几种build版本可以选，我选用的是@ckeditor/ckeditor5-build-decoupl...
2019-10-14 19:15:43
7067
转载 性能优化之Web Worker
一、概述JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给...
2019-09-21 14:45:52
1139
原创 排序和搜索算法
一、排序算法默认比较函数const compareFunc = ( a, b) => a-b;1）冒泡排序 //1.冒泡排序 两两比较 大的往后挪 const bubbleSort = (array, compareFunc) => { //外层循环控制进行多少轮排序 内层循环把当前项和下一项做比较 for (let i= 0; i<ar...
2019-09-20 19:21:18
227
原创 图
一、概念图是网络结构的抽象模型，是一组由边连接的节点（或顶点）。由一条边连接在一起的顶点称为相邻顶点。一个顶点的度是其相邻顶点的数量。路径是顶点 v1, v2, …, vk的一个连续序列，其中 vi和 vi+1是相邻的。简单路径要求不包含重复的顶点，如果图中不存在环（起点和终点相同），则称该图是无环的。如果图中每两个顶点间都存在路径，则该图是连通的。图可以是无向的（边没有方向）或是有向...
2019-09-19 18:31:27
167
原创 树
本内容整理自《学习JavaScript数据结构与算法》，在这主要总结了树相关的一些概念和二叉搜索树的实现。一、树数据结构相关的概念树是一种分层数据的抽象模型。现实生活中最常见的树的例子是家谱，或是公司的组织架构图，如下图所示。一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点（除了顶部的第一个节点）以及零个或多个子节点：位于树顶部的节点叫作根节点（11）。它没有父...
2019-09-11 22:57:02
326
原创 链表
一、链表要存储多个元素，数组（或列表）可能是最常用的数据结构。这种数据结构非常方便，提供了一个便利的[]语法来访问其元素。然而，这种数据结构有一个缺点：（在大多数语言中）数组的大小是固定的，从数组的起点或中间插入或移除项的成本很高，因为需要移动元素。（尽管我们已经学过，JavaScript 有来自 Array 类的方法可以帮我们做这些事，但背后的情况同样如此。）链表存储有序的元素集合，但不同...
2019-09-08 15:25:01
152
原创 栈和队列
一、栈：栈是一种遵从后进先出(LIFO)原则的有序集合。新添加或待删除的元素都保存在栈的同一端，称作栈顶，另一端就叫栈底。一个栈数据结构，需要有一些方法：push(element(s)):添加一个(或几个)新元素到栈顶。pop():移除栈顶的元素，同时返回被移除的元素。peek():返回栈顶的元素，不对栈做任何修改(该方法不会移除栈顶的元素，仅仅返回它)。isEmpty():如果栈里没...
2019-09-06 17:50:29
258
原创 移动端弹窗遮罩下页面禁止滚动方法
1.在遮罩根元素上监听移动端特有的touchmove事件, 阻止它的默认行为//以vue框架中为例<div @touchmove.prevent>....</div>//或者<div @touchmove="touchMove">....</div>touchMove(e) { e.preventDefault()}...
2019-09-05 10:59:41
835
原创 前端下载的方式总结
项目中，我们有时候会遇到下载文件（如jpg, excel,doc,pdf等等）的功能，在此总结方式及其使用场景。1.比较常见的是通过a标签的href属性直接访问文件url地址。<a href="文件url">xxx</a>这种方式excel, doc等文件会直接下载，遇到jpg，pdf这种浏览器会直接预览不会下载 。看网上有说，加上给a标签加上downlo...
2019-08-28 23:32:45
934
1
原创 记一次微信公众号页面开发
首次做一个公众号网页项目，难免会有一些磕磕碰碰，但项目进展还算顺利，在此记录一下。我用的框架是Vue。其实开发公众号里面的页面和其他移动端页面（h5）并没有多大不同，和平常是一样的开发方式。不同的地方主要是用户授权、鉴权和一些微信提供的接口 如分享给朋友、到朋友圈设置等。微信授权有两种，1）一种是静默授权，用户基本无感，能获取到code再获取openId,从而识别用户，2）打开微信授权页面...
2019-08-10 15:54:26
696
原创 css选择器相关总结
此篇记录css选择器相关，后期会持续更新。1. ele:nth-of-type() 和 ele:nth-child()选择器比较不同点：ele:nth-of-type(n)是指ele的父元素下第n个ele元素ele:nth-child(n)是指ele的父元素下第n个子元素且这个元素为ele，若不是，则选择失败相同点：两者的值都可以是 数字，2n, 3n .. old, even...
2019-07-27 16:47:51
105
原创 策略模式在JavaScript中的使用
最近在看《JavaScript设计模式与开发实践》，一本很不错的书，本次内容整理自该书，以便日后翻阅。在程序设计中，常常遇到类似的情况，要实现某一个功能有多种方案可以选择。比如一个压缩文件的程序，既可以选择zip算法，也可以选择gzip算法。这些算法灵活多样，而且可以随意互相替换。这种解决方案就是本文将要介绍的策略模式。策略模式是指定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换...
2019-07-26 15:47:07
162
原创 vue中Echarts使用动态数据的两种方式
在使用Echarts时我们数据一般不是静态写死的，而是通过后端接口动态获取的，在此总结两种在vue框架下Echarts使用动态数据的方式。1.通过computedcomputed: { options() { let that = this; let option = { tooltip : { trigger:...
2019-07-10 18:24:06
43274
15
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人