JavaScript
海阔天空.
前端工程师
展开
-
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 · 1339 阅读 · 2 评论 -
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 · 179 阅读 · 0 评论 -
前端实现预览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 · 8355 阅读 · 1 评论 -
js创建对象与继承总结
最近再次看起了 《JavaScript高级程序设计》,在此做下笔记,总结一下 创建对象与继承的主要方式。一、创建对象虽然Object构造函数或对象字面量都可以用来创建对象,但这些方式都有个明显的缺点:使用同个接口创建很多对象,会产生大量的重复代码。为解决这个问题,人们开始使用工厂模式的一种变体。 ——《JavaScript高级程序设计》1.工厂模式这...原创 2020-04-17 17:29:48 · 315 阅读 · 0 评论 -
浏览器数据库IndexedDB初体验
最近在项目中尝试使用了一下IndexedDB,这篇仅仅是记录一下IndexedDB简单使用,详情可以查看 阮大神的文章。业务场景:用户与其他人的聊天数据,我们用的是环信,没有使用环信历史消息API,而是采用indexDB把数据缓存到本地。Cookie 的大小不超过4KB,且每次请求都会发送回服务器;LocalStorage 在 2.5MB 到 10MB 之间(各家浏览器不同)。Index...原创 2020-04-16 20:22:42 · 420 阅读 · 0 评论 -
web和微信小程序前端直传图片到阿里云OSS
1.微信小程序中。 先调小程序 选择图片api,再调上传文件api.//对小程序api进行简单封装工具函数export const promisify = (api, options = {}) => { return new Promise((resolve, reject) => { // 将options对象赋值 然后再传给下面调用的方法中 optio...原创 2020-03-12 21:05:30 · 1102 阅读 · 0 评论 -
JavaScript数组reduce方法介绍
个人觉得reduce方法可能是数组最有用的方法之一,数组其他迭代方法如forEach, map, filter, some, every的功能它都能做到。reduce方法接受两个参数,第一个参数为一个函数,该函数接受4个参数:前一个值、当前值、当前值在数组中的索引、数组本身;第二个参数为可选的初始值,这个参数虽然是可选的,但是非常重要,后面会在例子中展示它的使用。下面使用reduce来实现...原创 2019-11-24 00:07:43 · 233 阅读 · 0 评论 -
数组扁平化的方式
1.利用concat、es6拓展运算符、some、Array.isArray、递归、reduce//法一function flatArr(arr) {//concat方法每次会拉平一层 let newArr = [].concat(...arr); return newArr.some(Array.isArray) ? flatArr(newArr) : newArr;...原创 2019-01-10 20:55:53 · 1514 阅读 · 0 评论 -
前端面试常见手写函数
1.记忆函数 记忆函数顾名思义就是可以记住计算结果的函数,通过闭包来缓存结果,通过判断缓存中是否有值来决定是计算还是使用缓存中的值。可以避免重复计算,对于需要大量时间进行计算的函数能提高性能。function memorize(fn) { var cache = {}; return function(...args) { let key = args.to...原创 2020-10-20 15:57:47 · 461 阅读 · 0 评论 -
遍历对象并获取每一项的层级
let data = [ { id: 1 }, { id: 2, child: [ { id: 3 }, { id: 4, child: [ { id: 5 } ] }, { id: 6, child: [ ...原创 2019-11-19 19:03:07 · 1321 阅读 · 0 评论 -
遍历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 · 357 阅读 · 0 评论 -
JavaScript函数调用及函数上下文(this)
JavaScript中函数调用有如下4种方式:1.作为一个函数直接被调用, func()。 此时,在非严格模式中函数上下文this指向全局window;在严格模式中指向undefined2.作为一个对象的方法调用,obj.func()。 此时,上下文this指向这个调用它的对象obj3.作为构造函数调用new Func(),实例化一个新的对象。 此时,构造函数内部的this...原创 2019-11-08 18:38:35 · 621 阅读 · 0 评论 -
前端页面滚动到某个位置的方式
1.通过a标签滚动到对应锚点<a href="#target">点我滚动到目标</a><div id="target">我是目标我是目标</div><!-- 注:这样会在地址栏中加上hash值 #target -->2.通过window.scrollTo方法滚动//scrollTo两个参数分别表示显示的x y坐标位...原创 2019-11-07 21:00:52 · 13663 阅读 · 0 评论 -
前端下载的方式总结
项目中,我们有时候会遇到下载文件(如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 · 1041 阅读 · 1 评论 -
JS中如何判断一个对象是否为空对象
1. 通过 for...in... 遍历属性 ,如果是空对象返回false, 否则返回 true 。例: var judgeObj = function(obj){ for(var item in obj){ return true; } return false; }2. 通过ES6新增的一个Ob...原创 2018-07-03 21:58:34 · 23729 阅读 · 0 评论 -
json数据的两种格式及两种json方法
一. 数据格式 1.数组方式: [ {"key1": "value1"}, {"key2": "value2"} ] 2. 对象方式: { “key1: "value1", "key2": "value2", "key原创 2018-07-13 18:34:38 · 42717 阅读 · 1 评论 -
JS Date类型常用方法
最近在做小程序的时候需要用到Date类型的一些方法,但对这方面的知识不是很熟练,觉得很有必要对这些方法整理一下。1.最基本最常用的方法莫过于 new + Date()构造函数。例: var now = new Date() 获得调用时的时间。2.也可以给Date构造函数传递参数来把类似时间的值格式化为标准时间。JavaScript下,new Date([params]),参数传递有以下五种...原创 2018-08-05 20:21:48 · 7261 阅读 · 0 评论 -
导航栏一级标题上下箭头切换
左侧导航栏开发有时候会遇到一级标题右边需要上下箭头切换的效果,后台管理系统中有时候会用到,先上效果图。未点击的效果,左侧导航标题箭头是向下的点击后,对应的二级列表显示出来,箭头变为向上二级列表展示隐藏用的是bootstrap, 上下箭头图标用的是Font Awesome,箭头切换用的是jQuery,我是在vue单文件组件中使用。代码如下:invisible样式是bo...原创 2018-09-02 16:09:48 · 3342 阅读 · 0 评论 -
JS中去除数组中的假值(0, 空,undefined, null, false)
1.Array.filter()arr.filter(Boolean)2.也可以通过遍历判断数组, 空字符,undefined, null, false , 0转化为布尔类型都是 false;let arr=[1, , null, false, undefined, 3]let newArr= []//法1arr.forEach(item => { if (item...原创 2018-11-29 12:06:10 · 12186 阅读 · 0 评论 -
JS中浮点数总结
浮点数的运算在业务中是比较常见的,js浮点数运算会出现多位小数,如0.1+0.2 =0.30000000000000004,这是由于在运算的时候先把浮点数转化成二进制后进行运算,但是有的小数在二进制编码后出现无限循环,因而导致计算出现了误差,在其它编程语言中也有类似的问题。处理方法如下:1.保留2为位小数:handleDecimals = function (num...原创 2018-11-27 20:54:02 · 7340 阅读 · 0 评论 -
js数组去重的几种方法
例:letarr = [0,0,1,1,1,2,3,4,5];1.数组的filter方法let result = arr.filter((item, index, self) => { return index === self.indexOf(item)})2.es6 Set数据结构let result = [...new Set(arr)]3.es6 Ma...原创 2019-04-18 19:50:18 · 254 阅读 · 0 评论 -
js对象浅拷贝与深拷贝
一、简介 浅拷贝是拷贝一层,如果数据是基本数据类型,会拷贝其本身,如果除了基本数据类型之外还有一层对象,那么只能拷贝其引用,对象的改变会反应到拷贝对象上。 深拷贝是拷贝多层,每一层的数据都会拷贝出来,对象的改变不会影响拷贝对象。二、实现 1、实现浅拷贝 1)数组自带的浅拷贝方法:slice()、concat、Array.from()、... 操作符let...原创 2018-12-19 10:58:29 · 1224 阅读 · 0 评论 -
js包含层级关系的一维数组转化成树状结构数组
//例 //层数不定 每一层数据条数不定let arr = [ {id: 1, parenId: ''}, {id: 2, parentId: 1}, {id: 3, parentId: 2}]//需要转化成newArr = [ { id: 1, parentId: '', children: [ { id: 2, parentI...原创 2019-04-20 15:21:01 · 5170 阅读 · 3 评论 -
腾讯地图踩坑记之选点组件
最近遇到一个需求,h5页面用户新增地址的时候除了可以调起级联菜单弹窗进行选择也可以点击图标进入地图进行选择,如下图:我们用的是腾讯地图,要使用腾讯地图功能首先要组册key完成验证,这个按照文档一步一步来就可以了,完成之后需要进行一些设置,就我这个选点组件而言就必须开启WebServiceAPI,否则无法使用相应的地图功能。腾讯地图选点组件,用起来还是挺方便的,使用方式有两种:一种...原创 2019-05-12 16:22:54 · 9486 阅读 · 6 评论 -
正则表达式学习笔记
简介:正则表达式表现为一种查寻模式,它帮助程序员去匹配、查寻、替换文本。1.正则表达式的test方法来判断字符串是否匹配某个模式,使用方式为 regex.test(str) regex为一个正则表达式 str为你需要测试的字符串。如果字符串和该正则表达式匹配 则会返回true ,否则返回falselet testStr = "freeCodeCamp";let testRegex =...原创 2019-05-26 18:13:19 · 1168 阅读 · 1 评论 -
运用jquery抽离出html公用部分实现多页面复用
最近做的一个网站项目,由于种种原因技术选的是jquery。但网站的顶部导航栏 和 底部每个页面都是一模一样的,重复的写固然可以,但这样做是不推荐的,代码冗余不说,主要是不好维护,中途要改公用部分的东西你就需要每个页面去改,麻烦而且有可能会有遗漏。那如何抽离出公用的部分呢?(有点类似Vue,React等框架的组件化)我选的是运用jquery的load方法,还有很多其他方法,如iframe ,incl...原创 2019-05-23 22:37:52 · 6362 阅读 · 0 评论 -
简单实现数组filter、every、some、map、forEach、reduce方法
前言:通过运用for循环和利用把函数作为值进行传递实现和数组自带方法同样的功能1.实现filter方法Array.prototype.myFilter = function(cb, context) { let newArr = []; let self = this; //this指向调用的数组 for (let i=0; i<self.lengt...原创 2019-06-10 20:14:28 · 731 阅读 · 0 评论 -
策略模式在JavaScript中的使用
最近在看《JavaScript设计模式与开发实践》,一本很不错的书,本次内容整理自该书,以便日后翻阅。在程序设计中,常常遇到类似的情况,要实现某一个功能有多种方案可以选择。比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法。这些算法灵活多样,而且可以随意互相替换。这种解决方案就是本文将要介绍的策略模式。策略模式是指定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换...原创 2019-07-26 15:47:07 · 173 阅读 · 0 评论 -
获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别
基本介绍$(window).width()与$(window).height()$(window).width()与$(window).height():获得的是屏幕可视区域的宽高,不包括滚动条与工具条。$(window).width() = width + padding$(window).height() = height + paddingdocument.documentElement....转载 2018-06-30 19:11:58 · 722 阅读 · 0 评论