- 博客(72)
- 收藏
- 关注
RSS订阅原创 JSON模板
{ "jsonData":[ { "id":0, "title":"第一级", "secondData":[ { "id":0, "title":"第二级", "thirdData":[ {
2020-07-16 13:49:52
2440
原创 码代码时要精辟的点① 性能优化CRP
CRP又称关键渲染路径，引用MDN对它的解释：关键渲染路径是指浏览器通过把 HTML、CSS 和 JavaScript 转化成屏幕上的像素的步骤顺序。优化关键渲染路径可以提高渲染性能。关键渲染路径包含了 Document Object Model (DOM)，CSS Object Model (CSSOM)，渲染树和布局。优化关键渲染路径可以提升首屏渲染时间。理解和优化关键渲染路径对于确保回流和重绘可以每秒 60 帧、确保高性能的用户交互和避免无意义渲染至关重要。如何利用CRP进行性能优化？结合一道
2020-07-08 20:48:05
309
原创 时间戳----消息通知
import { Injectable } from '@angular/core';@Injectable()export class TimeNoticeFileService { // 时间戳转换日期 (yyyy-MM-dd HH:mm:ss) formatDateTime = timeValue => { const date = new Date(timeValue), y = date.getFullYear(); let m: number |
2020-06-11 17:33:43
305
原创 题2道。。。。算了一道吧
面试题46. 把数字翻译成字符串给定一个数字，我们按照如下规则把它翻译为字符串：0 翻译成 “a” ，1 翻译成 “b”，……，11 翻译成 “l”，……，25 翻译成 “z”。一个数字可能有多个翻译。请编程实现一个函数，用来计算一个数字有多少种不同的翻译方法。示例 1:输入: 12258输出: 5解释: 12258有5种不同的翻译，分别是"bccfi", “bwfi”, “bczi”, “mcfi"和"mzi”提示：0 <= num < 231方法1 递归思路以翻译 21
2020-06-09 22:56:23
200
原创 移动端无限滚动/横向(X轴)tab选择
无限滚动并加载数据其中还有加载时图片的展示这里结合ionic4写的 // 统一处理结果 handleResult(res: CommonProductResult) { // 定义下接口回值的属性 this.isNoSuch = false; // 加载时的图片 this.isWaiteList = false; //返回无数据时给占位符 if (!!res.list.length) { if (this.pageNum > DEFAULT_PAGE_
2020-06-09 17:12:14
592
原创 CSS backgroundImage 好用的技巧
1.背景图如何才能完美适配视口body { background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80'); background-repeat: no-repeat; background-posit
2020-06-04 14:23:48
811
原创 Angular组件传值
1、父组件通过属性绑定到子组件，子组件通过事件传递参数到父组件2、父组件通过局部变量获取子组件的引用3、父组件使用@ViewChild获取子组件的引用4、两个不相关联的组件使用中间人模式交互5、终极大招:创建一个服务注入到组件中6、直接把父组件当做服务注入到子组件中一、通过输入与输出属性进行传递进行组件之间数据交互//父组件html<li *ngFor="let item of dataSet;let i = index"> <span>{{item.na.
2020-05-27 10:42:08
748
原创 您的全局Angular CLI版本（9.1.5）大于本地版本 版本（8.1.3）。使用本地Angular CLI版本。
Your global Angular CLI version (9.1.5) is greater than your local version (8.1.3). The local Angula1.使用命令行创建新项目的时候遇到的错误：Your global Angular CLI version (9.1.5) is greater than your localversion (8.1.3. The local Angular CLI version is used.翻译过来就是：使用的全
2020-05-24 13:04:40
3499
原创 （RxJS中的方法）Observable - Creation Operator
官方文档.RxJS 中提供了很多操作符，用于创建 Observable 对象，常用的操作符如下：createoffromfromEventfromPromiseemptyneverthrowintervaltimerList itemofvar source = Rx.Observable.of('Semlinker', 'Lolo');source.subscribe({ next: function(value) { console.log(v
2020-05-21 15:36:38
273
原创 rxjs--------Observable可观察对象
前言随着开发中项目的越来越大，代码的要求越来越高，于是开始四处搜找各种js库进行学习。为了学习代码行为模式，例如：竞争等等。在技术总监的指引下找到Rxjs进行学习，再次表以感谢。在看教程时，有很多地方不解，于是用博客做以记录，并将自己的经验以尽可能简单的方式分享给大家。这里简单解释一下Rxjs，RxJS 是一个js库，它通过使用 observable 序列来编写异步和基于事件的程序。ReactiveX 结合了 观察者模式、迭代器模式 和 使用集合的函数式编程，以满足以一种理想方式来管理事件序列所需要的一
2020-05-20 22:51:47
656
原创 angular生命周期
angular生命周期是什么1、Angular每个组件都存在一个生命周期，从创建，变更到销毁。Angular提供组件生命周期钩子，把这些关键时刻暴露出来，赋予在这些关键结点和组件进行交互的能力，掌握生命周期，可以让我们更好的开发Angular应用2、每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上ng前缀构成的，比如OnInit接口的钩子方法叫做ngOnInit.3、没有指令或者组件会实现所有这些接口，并且有些钩子只对组件有意义。只有在指令/组件中定义过的那些钩子方法才会被Angular调用
2020-05-14 23:00:55
848
原创 Angular路由守卫 canDeactivate
引言在企业应用中权限、复杂页多路由数据处理、进入与离开路由数据处理这些是非常常见的需求。当希望用户离开一个正常编辑页时，要中断并提醒用户是否真的要离开时，如果在Angular中应该怎么做呢？其实Angular路由守卫属性可以帮我们做更多有意义的事，而且非常简单。什么是路由守卫？Angular 的 Route 路由参数中除了熟悉的 path、component 外，还包括四种是否允许路由激活与离开的属性。canActivate控制是否允许进入路由。canActivateChild等同 can
2020-05-14 17:28:59
1977
原创 Rxjs Observable
创建Observable：Rx.Observable.create 是 Observable 构造函数的别名，它接收一个参数：subscribe 函数。例子：每秒推送一个“Hi”Rx.Observable.create(function subscribe(observer){var i=setInterval((observer)=>{observer.next("Hi")},1000);});在上面的示例中，subscribe 函数是用来描述 Observable 最重要的一块。
2020-05-14 16:11:58
710
原创 rem em vh和vw移动端M站初探
A首先看了好几篇帖子 这个勤劳爱思考的老哥早在三四年前已经写的特别好了，借鉴了许多不同的代码也有自己的观点（主要在于评论里）https://segmentfault.com/a/1190000003690140.Brem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em: em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN比起到处写死的px值，em似乎更
2020-05-12 22:36:12
307
原创 每天一点面试题（18）------首屏加载时间的优化策略
1、尽可能的缩小webpack或者其他打包工具生成的包的大小2、使用服务端渲染的方式3、使用预渲染的方式4、使用gzip减小网络传输的流量大小5、按照页面或者组件分块懒加载6、代理缓存7、使用CDN8、添加Expires头9、压缩组件10、代理缓存1、尽可能的缩小webpack或者其他打包工具生成的包的大小为了做到这一点，需要做到尽可能的减少生产环境下依赖的库数量，尽可能的按需引用，减少无用...
2020-04-13 23:07:58
846
原创 每天一点面试题（17）--------JS 高阶函数定义和函数表达式有什么区别？
在 ES 规范中，有一个内部函数 IsAnonymousFunctionDefinition()用来判断一个函数是否为匿名函数，但是这个函数只在规范中使用，通过 JS 代码并不能调用，很多 JS 引擎会在内部实现这个函数（非强制要求）。当我们谈到匿名函数时，其实有 2 种不同的含义：函数没有名字函数的 name 属性是 “anonymous”由于函数的 name是继承自 Function....
2020-04-09 22:09:22
406
原创 每天一点面试题（16） ---------React 渲染过程
1.程序假设有如下 jsxclass Form extends React.Component { constructor() { super(); } render() { return ( <form> <input type="text"/> </form> ); ...
2020-04-09 21:13:08
287
原创 每天一点面试题（16）--------虚拟DOM
JSX的背后这个过程一般在前端会称为“转译”，但其实“汇编”将是一个更精确的术语。React开发人员敦促你在编写组件时使用一种称为JSX的语法，混合了HTML和JavaScript。但浏览器对JSX及其语法毫无头绪，浏览器只能理解纯碎的JavaScript，所以JSX必须转换成JavaScript。这里是一个div的JSX代码，它有一个class name和一些内容：<div clas...
2020-04-09 00:38:15
1574
原创 每天一点面试题（15）--------防抖 和 节流//原型 和 原型链
一丶 防抖 和 节流1.防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟//防抖debounce代码：function debounce(fn) { let timeout = null; // 创...
2020-04-08 23:56:57
210
原创 React如何先加载接口再render
在很多需求中 父组件要调用好几个接口传入子组件 这时候要注意都是异步调用还是同步调用1.如果只调用一个的情况下在state存一个loding的默认值（布尔类型）然后在dispatch中的回调函数callback中去改变state的loding，然后在render中判断loding 是否return2.如果多个接口如果一个子组件需要调用2个或以上的接口 有两种情况要考虑：这个组件是要在...
2020-03-20 16:04:29
4308
原创 js-将已有的文字复制到剪切板
react 项目中涉及到复制功能，逻辑就是用户点击一个复制按钮，将后台拿到的数据放进粘贴板供用户粘贴，感觉用插件还要引入和绑定DOM比较麻烦，就干脆用原生写了，以下为实现方法，注释已经写的比较明白了， 可以直接拿来用： handleCopyDDL = record =>{ // 获取需要复制的文字 const copyStr = record.ddl_str //...
2020-03-18 16:05:18
248
原创 react中componentWillReceiveProps()在props不改变的时候也可能被调用
该方法总是在各种没有改变props的情况下被调用，需要在方法里手动判断一下this.props和nextProps是否相同，不相同了才执行我的更新方法。官方的文档https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/component_will_receive_props.html下面先看一下com...
2020-03-05 17:26:18
1195
原创 window.localStorage.setItem的使用
最近接触的一个小项目中频繁看到一个新的面孔： changeTheme () { dispatch({ type: 'app/switchTheme' }) }, changeOpenKeys (openKeys) { window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(ope...
2020-03-03 16:48:25
2727
1
原创 antd Table使用记录
1.antd table如何关闭hover效果？需求原因：对于普通表格来说，antd表格的hover完全是可以的，但是在单元格进行了合并的复杂表格中，就会显得很怪；解决方法：样式覆盖------------------.ant-table-tbody > tr:hover > td{ background:transparent ! important;}2.an...
2020-02-26 15:19:32
479
原创 强大的display:grid
自从用习惯flex布局我基本已经不怎么使用float了。现在又出现了grid布局，就像flex的升级版，布局上十分强大。主要属性：grid-template-columns：//竖向排列grid-template-rows：//横向排列首先比较一下flex和grid实现自适应九宫格，高度800px，宽度适应：flex超过一层后样式就复杂了，特别是边框的处理有点复杂。(方法很多，不一一...
2020-02-26 10:20:33
292
原创 Less
一、 css预编译常见的css预编译器有三种：less 、 sass 、 stylus。Bootstrop使用的是less。在线编译 http://tools.jb51.net/code/less2css二、 LessLess是一门css预处理语言，他扩展了css语言，增加了变量、Mixin、函数等特性，使css更容易维护和扩展。他不是一个直接使用的语言，而是一个生成css的语言。Les...
2020-02-21 15:49:48
522
原创 JS 前端导出CSV文件
前言：长期以来，在做文件下载功能的时候都是前端通过ajax把需要生成的文件的内容参数传递给后端，后端通过Java语言将文件生成在服务器，然后返回一个文件下载的连接地址url。前端通过location.href = url或者window.open(url),完成文件的下载。如果希望在前端直接出发某些资源的下载，最方便快捷的方法就是使用HTML5原生的download属性。CSV文件格式：c...
2020-02-19 14:51:32
2682
1
原创 Ant-design Button onClick 获取按钮的目标
用 React 的 Ant-Design 发现的 Button 获取 onClick 的 e.target 的时候经常会出问题，发现 Antd 封装的 Button 是一个 button 里面还有 span，如果点击的是按钮上的文字的话，获取的是 span，这个时候 e.target 是不起作用的。可以用 e.currentTarget。这两者有什么区别呢？如下：event.targetThi...
2020-02-17 18:36:48
3718
原创 Git
一1.创建分支git branch develop2.查看本地分支：git branch注:名称前面加* 号的是当前的分支3.查看远程分支：加上-a参数可以查看远程分支，远程分支会用红色表示出来（如果你开了颜色支持的话）git branch -a4.切换分支git checkout branch_name5.删除本地分支git branch -d branch_name6...
2020-02-17 13:11:04
539
原创 React 实现高度简洁的 Form 组件
为什么要造轮子在 React 中使用表单有个明显的痛点，就是需要维护大量的value和onChange，比如一个简单的登录框：class App extends React.Component { constructor(props) { super(props); this.state = { username: "", password: ""...
2020-02-12 14:26:42
381
原创 为什么尽量别用 setInterval
为什么尽量别用setInterval在开发一个在线聊天工具时，经常会有过多少毫秒就重复执行一次某操作的需求。“没问题”，大家都说，“用setInterval好了。”我觉得这个点子很糟糕。原因之一：setInterval无视代码错误setInterval有个讨厌的习惯，即对自己调用的代码是否报错这件事漠不关心。换句话说，如果setInterval执行的代码由于某种原因出了错，它还会持续不断（不...
2020-02-11 17:35:30
286
原创 单页面路由的基本原理
1. Hash1.1 相关 ApiHash 方法是在路由中带有一个 #，主要原理是通过监听 # 后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件，然后通过获取 location.hash 得到当前的路径标识符，再进行一些路由跳转的操作，参见 MDNlocation.href：返回完整的 URLlocation.hash：返回 URL 的锚部分location.pa...
2020-02-08 19:25:56
529
原创 JavaScript 函数式编程
我认为函数式编程可以理解为，以函数作为主要载体的编程方式，用函数去拆解、抽象一般的表达式与命令式相比，这样做的好处在哪？主要有以下几点：语义更加清晰可复用性更高可维护性更好作用域局限，副作用少 基本的函数式编程// 数组中每个单词，首字母大写 // 一般写法const arr = ['apple', 'pen', 'apple-pen'];for(const i in ...
2020-02-05 23:20:57
154
原创 JS类的static
static类（class）通过 static 关键字定义静态方法。不能在类的实例上调用静态方法，而应该通过类本身调用。这些通常是实用程序方法，例如创建或克隆对象的功能。语法static methodName() { ... }描述静态方法调用直接在类上进行，不能在类的实例上调用。静态方法通常用于创建实用程序函数。调用静态方法从另一个静态方法静态方法调用同一个类中的其他静态方法，...
2020-01-30 19:29:04
14838
1
原创 短轮询、长轮询和web socket定义及其实现
短轮询定义：其实就是普通的轮询。指在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。应用场景：传统的web通信模式。后台处理数据，需要一定时间，前端想要知道后端的处理结果，就要不定时的向后端发出请求以获得最新情况。优点：前后端程序编写比较容易。缺点：请求中有大半是无用，难于维护，浪费带宽和服务器资源；响应的结果没有顺序...
2020-01-21 17:42:12
415
原创 什么是同构渲染
首先写一个React 16的 remderToNodeStream方法的使用。// An highlighted blockvar foo = 'bar';import express from 'experss';import React from 'react';import { renderToNodeStream } from 'react-dom/server';import ...
2020-01-19 19:26:30
639
原创 引用类型的方法对比 在redux中
一.数组操作增加一项使用push的方法会改变原数组的值let a = [1, 2, 3];a.push(4);console.log(a) //[1, 2, 3, 4]若不想改变原数组， 可以考虑concat方法，他不会对原有数组进行改动，而创建一个新数组let a = [1, 2, 3];let b = a.cancat([4]);console.log(a) /...
2020-01-07 14:06:24
153
原创 时间戳转日期
new Date() 不同浏览器（内核）的输出Android和chrome都是webkti内核。于是打开控制台，分别测试了不同浏览器对Date()参数的反应。首先是chrome的：只要是字符串，这三种格式都能正常解析，非字符串"/"月份多加1，这个问题本身存在。然后是ff:字符串中",“和”/“能正常解析，”-"不能。ps:这是原作者测试的结果，我自己测试的时候“-”可以起作用最后...
2020-01-02 22:55:35
555
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人