自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(30)
  • 收藏
  • 关注

原创 V8引擎,JS,Node,Npm介绍

V8,Node,Js,Npm

2022-07-21 16:01:52 1019

原创 关于文件的知识点:Blob,Base64,File

图片上传,下载;文件导出的相关知识点以及实际使用

2022-04-10 22:27:57 849

原创 事件循环机制

事件循环机制

2022-02-02 15:24:42 1227

原创 异步的几种实现方式

异步的几种实现方式

2022-02-02 14:38:03 2614

原创 虚拟列表优化性能的简单Demo

angular写法: <!-- 虚拟列表滚动 --> <div class="list-view" #visibleList (scroll)="handleScroll()"> <!-- 使用一个不可见元素(.list-view-phantom)撑起这个列表,让列表的滚动条出现 --> <div class="list-view-phantom" [ngStyle]="{'height': contentHeight}"></d

2021-10-19 16:38:10 354

原创 用防抖,节流来优化性能

看文章时了解了防抖,节流两个概念,觉得可以优化项目中输入框输入内容时多次调用接口的问题。**防抖:**开始输入内容时设定一个计时器,如果在计时器之内又有内容则不调用接口,重新开始计时<input type="text" class="form-control" [(ngModel)]="seoCon" (keyup)="onBounce()" placeholder="Search for..."> // 输入事件 onBounce() { let debounceAjax

2021-09-15 16:50:26 117

原创 引用hammer左右滑动后上下滚动失效

需求加了一个左右滑动的功能,但在加完之后发现页面不能上下滚动了。>头秃<查资料发现,有个属性可以轻松解决此问题:在需要操作的区域加上 touch-action:'pan-y'touch-action 属性:指定某个给定的区域是否允许用户操作,以及如何响应用户操作 (比如浏览器自带的划动、缩放等)。1、auto当触控事件发生在元素上时,由浏览器来决定进行哪些操作,比如对viewport进行平滑、缩放等。2、none当触控事件发生在元素上时,不进行任何操作。3、p

2021-02-02 11:44:52 1053

原创 移动端蚂蚁组件(antd-mobile)- 解决日期组件中的语系问题

目标:期望:我们项目需要有繁简体两种语系,对于一般的选择器是有可配置文案的属性的,但是日期选择器却没有。通过研究还是发现了这个属性是可以配置语系问题的。试过之后发现竟然就是没有我需要的繁体(zh_TW)。无奈之下,只能研究看这些语系是怎么写的,我仿照写个繁体的语系文件放到包里,但很快这个想法被我pass了,一个是因为语系并不是直接写在这些文件里的,另一个因为我们项目较多,人员也多,万一下次不是我改,别人可能就不知道到底怎样修改。于是又产生了另一个想法,包不能改,那我就在文

2020-08-24 10:24:45 1228

原创 浅拷贝和深拷贝

现象:数组通过=赋值后,修改新数组会改变原数组。解决方案:1、用es6的扩展方法【...】2、slice, concat原理:1、js中存储对象时的存储方式是用指针指向内存地址,用=赋值只是将指针赋给了新数据,实际指向的内存地址并没有变化。浅拷贝只是拷贝指针,深拷贝才是将指针连同内存一起拷贝。2、(...)取出所有可遍历属性,拷贝到当前数组或对象中。let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1,...

2020-07-10 14:51:44 91

原创 nz-range-picker 默认展示当前月和上个月

现有需求要求今日及以后日期禁用,所以打开控件时还显示下个月就不符合实际需要。现状:目标:解决思路:看过文档之后,排除了采用官方提供的属性,方法;发现控件有上个月 (翻页上键)的方法,所以就想我可不可在打开日期面板时就触发翻上个月的方法呢。解决方法:<dw-range-picker class="range-picker" style="width: 90%;" dwFormat="yyyy-MM-dd" [dwAllowC..

2020-07-10 13:54:16 2292

原创 在一个数组中过滤掉另一个数组的中的数据

arrA:[ {'user_id': 11, 'user_name': '张三', isObject: false, ...}, {'user_id': 55, 'user_name': '李四', isObject: false, ...}, {'user_id': 77, 'user_name': '陈一', isObject: false, ...}]...

2020-04-12 17:42:46 2480

原创 前端如何在angular和vue项目中进行实时数据过滤

//假设后端通过接口给我们的数据如下:let data = [ { name: 'Andy', age: 13 }, { name: 'Jack', age: 14 }, { name: 'Lucy', age: 12 } ]//在实际项目中,我们需要根据筛选框中的条件来实现...

2020-03-10 13:59:14 297

原创 angular和vue的动态组件详解

现在敲动态,按需加载,可复用的代码成为我们的目标,所以就我在angular和vue框架中使用动态加载组件的一些心得做个分享。废话不说,直接上代码:Angular<ng-template dynamicComponent></ng-template>// 首先为我们的组件找个容器ng-template, 并且创建指令dynamicComponent首先写个...

2020-03-10 10:03:38 641

原创 for,forEach,for...in,for...of,map比较

1、首先for(let i = 0 ;i < arr.length ; i++){...}写法复杂,但是内部可扩展性强,可跳出循环。2、forEach致命缺点不能用return,break跳出循环。3、for...in es5特性,遍历时返回健名,所以适合遍历对象。4、for...of es6新特性,遍历时返回健值,可以搭配entries(),keys(),values()使用let arr = ['a', 'b', 'c'];for (let item of arr.e...

2020-03-07 20:17:58 756

原创 ios的微信公众号界面中打字键盘收起后原本页面中的点击事件失效

首先交代一下,我是用angular写的公众号项目,在点击按钮出现的弹框中打字,调起了ios的虚拟键盘,当键盘收起时,发现弹框中的点击事件失效了。其实我做过实验,就是打字完成后不点击键盘中的“完成”按钮,直接点击弹框中的按钮就是可以的,但我不可能控制用户的操作,所以只能重新找方法。既然找到原因,那就去查资料,果然早在2018年底,就有人提出这个问题,因为ios12.x系统升级,所以部分iphon...

2020-03-07 19:56:30 383

原创 angular引用管道pipe时踩的坑(Type UmberUnitPipe is part of the declarations of 2 modules:)

我的管道pipe都是统一引入到模块pipeModule中,再在app.module.ts中import这个模块的umberUnit.pipe.tsimport { Pipe, PipeTransform } from '@angular/core';import { DomSanitizer } from '@angular/platform-browser'@Pipe({ n...

2020-01-14 10:20:04 1234 2

原创 用抽象组件写瀑布流页面

1、先写组件masonrymasonry.json{ "component": true, "componentGenerics": { "masonry-item": true }}masonry.wxml<view class="masonry-list"> <view class="masonry-list-left" sty...

2019-12-18 16:01:18 209

原创 微信小程序中组件的知识点汇总(lifetimes,externalClasses,observers,selectComponent,componentGenerics。。。)

1、组件也有它的生命周期(lifetimes)自小程序基础版本2.2.3起,组件的生命周期可以在lifetimes字段中声明(这是推荐的方式,优先级最高) lifetimes: { created: function () { // 组件实例化,但节点树还未导入,因此这时不能用setData }, attached: function () { ...

2019-12-18 14:22:39 4998

原创 去掉和已有数据重复的数据And去掉自己本身重复数据

原本有数据,后添加的数据不能与原来数据有重复值。 const data: [] = result.data.content;// 从后端获取到的数据 if( _this.notices.length > 0) { // 如果notices本来就有数据,则后面...

2019-04-12 10:15:41 281

原创 关于Iterator(遍历器)的干货

提到遍历,就一定要知道symbol.Iterator,任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。for是JavaScript中为我们提供的一个最原始的方法/** 这种写法用起来没问题,就是不简洁。 **/for (var index = 0; index < Array.length; index++) { console.log(Array[ind...

2019-04-11 15:26:58 365

原创 在vue+ts中自定义过滤器(毫秒转换成标准格式)

如果在许多地方都需要对数据格式进行转换,那么滤器绝对是一劳永逸的好方法。1.就以时间为例,后台返回的多是毫秒数,所以就需要在前台将毫秒数转换成标准时间格式第一步,建立一个timeUtil.ts文件,方便复用/** 以毫秒1554780164000 转换成 2019-04-09 11:22:44为例 */// fmt: 'yyyy-MM-dd hh:mm:ss' time: ...

2019-04-10 15:20:05 6707

原创 vue3.x+typeScript在编译时如何支持js格式的插件

项目用的是vue3.X.0 + TypeScript,但由于也引用了不少js插件(vue-cloud、vue-simple-uploader),所以在编译时会出问题。为了解决这一问题,这里有一个特别简单便利的方法。新建项目时会自带这样一个文件:  进去加这样一行代码就可以随意引用了。 ...

2019-02-20 15:18:01 785

原创 Vue报错:‘Unexpected console statement (no-console)’

写项目过程中用ESLint遵守代码规范很有必要,但是对于一些规范也很是无语,比如:‘Unexpected console statement (no-console)’,连console都不能用,这就很抓狂了。于是查资料发现,写一个tslint.json文件,在其中进行一些配置,就又可以愉快的敲代码了。{  "defaultSeverity": "warning",  "extends":...

2019-02-18 11:38:43 11472 1

原创 获取电脑屏幕宽高

width : screen.getPrimaryDisplay().bounds.width,height : screen.getPrimaryDisplay().bounds.height, 

2019-01-17 15:45:37 898 1

原创 $attrs、$listeners和inheritAttrs详解

在写项目过程中发现很多组件之间需要通信,父子组件之间还好,但有时就需要跨多级传值,传很多值就很繁琐,代码也很冗余。在vue文档中我发现这样一个属性,可以将要传递的值放到$attrs中,这样只需要在孙辈组件中取就ok,中间过程中就可以减少很多重复代码。而子辈或者孙辈中emit的事件可以在中间组件中通过$listeners属性避免多于代码。parents.vue&lt;templat...

2019-01-08 14:25:26 1281 1

原创 vuex在vue2.x+typeSript中的使用

本文就以vuex在用户登录、退出时的使用为例。一、在 main.ts引用二、store文件目录三、Security.ts里面的具体内容/** 用于保存当前用户登录状态 */import {Commit,ActionContext} from 'vuex';import {AuthorizedUser} from '@/domain/security';/** 此文...

2018-12-20 16:10:51 630

原创 仿微信通讯录--按姓氏进行分类

话不多说,先上效果图,看看是不是你们需要实现的效果如果是要这样效果的话,下面上代码(主要分为三个部分):1、html部分&lt;div class="contentData"&gt; &lt;div v-for="(item, index) in letterData" :key="index"&gt; /** 这是首字母 */ &lt;div cl...

2018-12-06 17:39:16 1312

原创 好用的前端插件一:(clipboard)--复制功能

现在很多地方在输入框后面都会带一个直接复制框内内容的功能,省去了选中内容进而ctrl+c的步骤。这个功能看起来好厉害,其实clipboard插件可以很轻易的实现。下面介绍如何在项目中使用该插件:1、无论什么插件第一步都是先引入yarn add clipboardyarn add @types/clipboard 2、在你需要用到的文件中引用import Clipboar...

2018-11-22 16:57:32 3345 1

原创 前端通过RegExp(正则表达式)实现实时搜索功能

表格内容要求随着顶部查询条件的变化而变化,虽然每次可以通过发送请求由后台来进行筛选,但是简单的一些操作前端可以完成尽量由前端完成。vue项目中可以利用计算属性get来实现。 get showFriends() { const searchRegex = new RegExp('筛选关键词', 'g'); if (this.friends) { return ...

2018-11-22 16:36:02 1554 3

转载 优化if-else代码

//例子 var mMap = new Map([ [162,function(h,a){console.log("he height is" + h + " ,he age is" + a)}], [174,function(h,a){console.log("he height is" + h + " ,he age is" + a)}], ...

2018-11-08 14:41:19 650

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除