天心天地生的博客

本文提供了一个检测移动设备的JavaScript函数。该函数通过分析User-Agent、触控支持、微信环境等多个维度，准确识别手机、平板等移动设备。函数考虑了主流移动操作系统、触控特性、微信小程序WebView等场景，并特别处理了平板设备检测和PC微信的误判问题。最终通过组合多种条件判断，实现全面的移动端设备检测，为响应式布局提供可靠依据。

在dva的model中，详情接口返回了内容详情的的字段（该字段存储的是富文本的内容），但是该字段返回的是oss链接，需要将oss转换为html才能正常展示，所以我需要再详情接口返回之后，批量获取oss链接对应的html。

项目中有低代码平台，由于历史脏数据和非同步编辑的问题，偶尔会出现数据错乱的问题，希望有一个快捷的方式修改数据之前在用Formily的时候有注意到里面的json数据编辑功能非常不错如果能应用到项目里就完美了。

使用阿里云oss图片处理实现大尺寸图片加载优化；为方便客户减少图片的处理，h5端需要加载20m的大尺寸图片。

JavaScript的对象不像数组或字符串那样可以迭代，所以我们不能直接在对象上使用filter()方法。在这篇文章中，我们将探讨如何利用JavaScript中的es6方法结合数组的filter()方法来过滤一个对象。filter()允许我们在一个数组中进行迭代并且只返回该数组中符合特定条件的项目到一个新数组中。

项目为了统一管理localStorage和sessionStorage,使用了统一的方法对Storage进行存取.为限制项目成员直接使用和,需要通过eslint对直接引用的形式加以限制。

react中获取dom元素的高度(table铺满屏幕剩余高度)使用antd写了一个table,为了交互上友好;要求如下1. 下图红色区域铺满屏幕剩余高度;2. table高度不限,有纵向滚动条;3. 页面不允许出现纵向滚动条;

ES6篇1.Array.from()为什么先提到Array.from()，在开发中发现数组才是最常见的一种格式，不仅是在渲染列表，表格，还是在数据请求上，都有着重要的意义。首先，先看看Array.from()定义，它可以将一个类数组或可遍历对象转成一个真实的数组。所谓类数组，就是我们在非箭头函数中所属的arguments类型等等；可遍历对象，便如Map类型等等。使用规则为Array.from(arrayLike, mapFn, thisArg)/*arrayLike: 必选，1、类数组(arg

简介将大型代码库分成单独的独立版本化的软件包对于代码共享非常有用。但是，跨许多存储库进行更改很麻烦且难以跟踪，并且跨存储库的测试变得非常复杂。为了解决这些（以及许多其他）问题，一些项目会将其代码库组织到多包存储库中（有时称为monorepos）。像Babel，React，Angular， Ember，Meteor，Jest等项目，以及许多其他项目，都在一个存储库中开发了所有软件包。Lerna是一种工具，可以优化使用git和npm管理多包存储库的工作流程。Lerna还可以减少开发和构建环境中大量软件包

背景项目中经常有对两个数组的操作,涉及到一些数学中集合的运算.集合的定义集合定义:集合是指具有某种特定性质的具体的或抽象的对象汇总而成的集体。其中，构成集合的这些对象则称为该集合的元素交集定义：由属于A且属于B的相同元素组成的集合，记作A∩B（或B∩A），读作“A交B”（或“B交A”），即A∩B={x|x∈A,且x∈B}， 如右图所示。注意交集越交越少。若A包含B，则A∩B=B，A∪B=A .并集定义：由所有属于集合A或属于集合B的元素所组成的集合，记作A∪B（或B∪A），读作“A并B”（或“B并

知识背景try语句包含了由一个或者多个语句组成的try块, 和至少一个catch块或者一个finally块的其中一个，或者两个兼有， 下面是三种形式的try声明：try...catchtry...finallytry...catch...finallycatch子句包含try块中抛出异常时要执行的语句。也就是，你想让try语句中的内容成功， 如果没成功，你想控制接下来发生的事情，这时你可以在catch语句中实现。 如果在try块中有任何一个语句（或者从try块中调用的函数）抛出异常，控制立即转

JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环，也是平是接触时间最长、写得最多的。在开发过程中必然会遇到命名的问题，你会词穷、纠结、惆怅吗？本文的出现相信能够解决大部分烦恼，让你轻松写出符合规范、易读、简短的代码。本文将通过大量的实例来试图自圆其说，形成一套系统化、实用的变量命名理化体系。通过按JavaScript的数据类型分类着手、细到一个函数的参数命名，并提供众多可选方案，并尽量给出其适用范围和利弊。JavaScript常见变量和函数命名示例思维导图需要注意的是由

简述是一个一致性、模块化、高性能的 JavaScript 实用工具库。安装$ npm i -g npm$ npm i --save lodash“Object” Methods defaultsDeep 使用说明格式_.defaultsDeep(object, [sources])参数object (Object): 目标对象。[sources] (...Object): 来源对象返回返回 object编码实战import _ from "lodash";const so

判断一个对象是否为空对象，本文给出三种判断方法：1. 最常见的思路，for…in…遍历属性，为真则为“非空数组”；否则为“空数组”for (var i in obj) { // 如果不为空，则会执行到这一步，返回true return true}return false // 如果为空,返回false2.通过JSON自带的stringify()方法来判断:JSON.str...

安装和使用安装npm install moment --save # npmyarn add moment # YarnInstall-Package Moment.js # NuGetspm install moment --save # spmmeteor add momentjs:moment # meteorbower install moment --save # bowe...

JavaScript的递归遍历会经常遇到，适当的运用递归遍历，可以提高代码性质量。1.某些时候递归能替换for循环我们先看一下下面2个例子。var arrList = [1,2,3,5,100,500,10000,10000,1000,10000002] //for循环测试 function forTest(){ console.time("for循环") for(l...

我们先看下面的代码：var data = [ { name: "所有物品", children: [ { name: "水果", children: [{name: "苹果", children: [{name: '青苹果'}, {name: '红苹果'}]}] }, ...

背景前端在调用后端GET请求时，url的接口名称和参数一般是字符串拼接的方式，为了避免字符串拼接时key值对应的value为null对后端的判断造成干扰，前端可以处理为value为null时该参数的key值省略不传。编码实战/** * @function 参数拼接 * @param {object} obj 只支持非嵌套的对象 * @returns {string} * @autho...

/** * @function 判断数组中是否有重复项 * @description 注意判断数组长度大于等于2 * @param {array} arr 数组 * @returns {boolean} 有重复项，返回true * @author 天心天地生 2020-1-14 * */isRepeat = arr => { const hash =...

const data1 = 'Fri Jan 10 2020 18:52:45 GMT+0800 (中国标准时间)'/** * @function 中国标准时间转化为时间戳 * @param {string} date * @returns {number} 时间戳 * @author 天心天地生 2020-1-14 * */function dateToMs(date) { l...

/** * @function 判断数组中是否有重复项 * @param {arry} arr 数组 * @returns {boolean} * @author 天心天地生 2020-1-14 * */ const isRepeat = (arr) => { const hash = {}; for (let i = 0; i < arr.le...

什么时候对函数进行注释不一定说任何函数方法都必须使用JSDoc，但是有一点要注意如果是自己封装的方法，有必要使用JSDoc，理由是可以让其他成员更容易的去了解你封装的方法的属性或返回值，这样可以降低维护成本和提高开发效率。编码实战说明：函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求，参照JSDoc语法：/** * 函数说明 * @关键字 */常用注释关键字：(只列...

编码实战用String类中的indexOf函数，例如：var str = "寻找小精灵";if (str.indexOf("小精灵") === -1) { //等于-1表示这个字符串中没有小精灵这个字符 console.log("没有小精灵！");} else { console.log("找到小精灵了!");}var str2 = "什么都没有";if (str2.in...

JavaScript sort() 方法JavaScript Array 对象定义和用法sort() 方法用于对数组的元素进行排序。语法arrayObject.sort(sortby)参数描述sortby可选。规定排序顺序。必须是函数。返回值对数组的引用。请注意，数组在原数组上进行排序，不生成副本。说明如果调用该方法时没有使用参数，将按字母顺序对数组...

字符串的创建JS中创建字符串的方法主要有三种：字符串表面量，var a = "foo"使用string函数转换, var c = String("foo")通过 New String来实例化的是一个String对象,var b = new String("foo")通过String直接创建的字符串和字符串表面量为基本数据类型，属于JavaScript中的直接量（包含数字，以及数组、对...

背景介绍Javascript语言的执行环境是"单线程".所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如...

ECMA-262描述了一组用于操作数据值的操作符，包括算数操作符、位操作符、关系操作符和相等操作符。ECMAScript操作符的与众不同之处在于，它们能够使用于很多值，例如字符串、数字值、布尔值，甚至对象。不过，在应用于对象时，相应的操作符通常都会调用对象的valueof()和tostring()方法，以便取得可以操作的值。一.一元操作符只能操作一个值的操作符叫做一元操作符。1.递增和递减...

数据类型ECMAscript中有五种简单数据类型（也称基本数据类型）：Undefined、Null、Boolean、Number和String,还有一种复杂数据类型——Object，Object本质上是由一组无序的名值对组成的。ECMAscript不支持任何创建自定义类型的机制，而所有值最终都将是上述六种数据类型之一。Undefined类型Undefine类型只有一个值，即特殊的undef...

Object.keys(obj)Object.keys(obj) 返回对象的key组成的数组返回一个所有元素为字符串的数组，其元素来自于从给定的object上面可直接枚举的属性,不会返回原型上的方法。const obj = { firstname:"John", lastname:"Doe", age:50, eyecolor:"blue"};console.log(Ob...

经常用到./和…/及/路径访问指定的资源，但三者有什么区别呢？区别“./”：代表目前所在的目录。" . ./"：代表上一层目录。“/”：代表根目录。例子在读取文件时,路径的写法有如下方式 Mat Image = imread("./图片.jpg");//文件在当前目录 imshow("Test", Image); Mat Image1 = imread("../图片.jp...

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。一、 let、const 和 块级作用域let 允许创建块级作用域，ES6 推荐在函数中使用 let 定义变量，而非 var：var a = 2;{ le...

从事前端开发也有一段时间了，一直在遵循着规范化开发，从 js 也逐渐转向了 ts ，在这个过程中也有了很多收获，在此把自己的开发心得写下来。本文参考了JavaScript 开发规范，并做了补充和修改，同时删去了框架开发相关的内容(侵删)。1. 命名规范ECMAScript 规范中标识符采用驼峰大小写格式，驼峰命名法由小(大)写字母开始，后续每个单词首字母都大写。根据首字母是否大写，分为两种方...

问题：为什么这个post请求不能成功，服务器返回码虽然是200，但它值总是不对？？？答案：除开请求参数，请求地址等基本错误外，还有可能有一个非常重要的原因就是请求头中的Content-Type不对。基础知识：HTTP，是一套网络通信规则，让我们可以通过浏览器等客户端请求和发送数据到服务器。每次HTTP通信需要完成7个步骤：1.建立TCP连接 2.浏览器...

瀑布流布局实例一、js实现代码：js实现瀑布流布局代码demo：js实现瀑布流布局demo二、css实现1、Multi-columns首先最早尝试使用纯CSS方法解决瀑布流布局的是CSS3 的Multi-columns。其最早只是用来用来实现文本多列排列（类似报纸杂志样的文本排列）。但对于前端同学来说，他们都是非常具有创意和创新的，有人尝试通过Multi-columns相关...

执行环境是JavaScript 中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。一. 背景介绍1. 执行环境是什么执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。 每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。 我们编写的代码是无法访问这个对象的，但解析器在处理数据时会在后...

一 . 简介闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。二 . 原理剖析1.执行环境和作用域所有变量（包括基本类型和引用类型）都存在于一个执行环境（也称为作用域）当中，这个执 行环境决定了变量的生命周期，以及哪一部分代码可以访问其中的变量。以下是关于执行环境的几 点总结： + 执行环境有全局执行环境（也称为全局环境...

一、背景介绍1、es6ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。 它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。2、ECMASCRIPT 和 JAVASCRIPT 的关系?要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScri...

1.object类型到目前为止，我们看到的大多数引用类型值都是 Object 类型的实例；而且， Object 也是 ECMAScript 中使用最多的一个类型。虽然 Object 的实例不具备多少功能，但对于在应用程序中存储 和传输数据而言，它们确实是非常理想的选择。2.继承继承的基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法.3.构造函数(constructor...

简介：我们重点掌握this作为对象方法调用，作为函数调用，作为构造函数调用，和使用apply 或 call 调用这几种，其他的情况了解即可，请牢记一点，this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的。一.背景介绍在面向对象的语言中（例如Java,C#等)，this含义是明确且具体的，即指向当前对象。一般在编译期绑定。而在javascript中，this是动态绑定的，...

1.背景介绍有限状态机，（英语：Finite-state machine, FSM），又称有限状态自动机，简称状态机， 是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。其作用主要是描述对象在它的生命周期内所经历的状态序列，以及如何响应来自外界的各种事件。在计算机科学中， 有限状态机被广泛用于建模应用行为、硬件电路系统设计、软件工程，编译器、网络协议、和计算与语言的研究...