JavaScirpt
文章平均质量分 58
青菜小王子
我向往自由
展开
-
【问题】TypeError: Cannot read properties of undefined (reading ‘getStackAddendum‘)
项目运行中,控制台提示类型错误,无法读取未定义的属性。原创 2023-07-05 15:31:40 · 1542 阅读 · 0 评论 -
hooks 源码浅析 — Scene
阅读ahooks中usePagination、useAntdTable、useFusionTable、useInfiniteScroll、useDynamicList等相关源代码,学习记录原创 2022-08-27 17:30:24 · 457 阅读 · 1 评论 -
第一个VSCode 插件开发实战
每个扩展程序都有一个清单文件,package.json。它有Node.js相关的字段,例如scripts、dependencies。也有VS Code 特定的字段,例如publisher、activationEvents、 contributes。原创 2021-04-01 18:01:05 · 808 阅读 · 0 评论 -
Uncaught SyntaxError: Unexpected identifier
问题描述:全局变量globalConfig.viewModel读取不到。而在其他同事的电脑上是可以正常访问的。原因分析:查看了HTML中全局配置,后端写入了错误的json格式数据<script> var globalConfig = { "view":"{data={"viewId":"","groupId":"270","poolId":"128"}}", }</script>其实错误提示第一行已经表明了问题,当时并没有在意Uncau原创 2021-03-06 20:35:42 · 478 阅读 · 0 评论 -
关于Promise.resolve(v)和new Promise(resolve => resolve(v))是否等价问题
借鉴在《ECMAScript 6 入门》一书中描述的内容,`Promise.resolve('foo')`等价于`new Promise(resolve => resolve('foo'))`。如果`resolve`的参数是一个`promise`对象呢,是否仍然等价?原创 2021-03-05 15:06:04 · 957 阅读 · 0 评论 -
模板字符串格式化
给定一个模板和一个对象,利用对象中的数据渲染模板,并返回最终结果。let obj = { group: { name: "国际", jobs: ["前端", "后端", "产品"] }, company: '云浪'}let str = '你好,我们公司是{{company}},我们属于{{group.name}}业务线,我们在招聘各种方向的人才,包括{{group.jobs[0]}}、{{group["jobs"][1]}}等。';个人解决原创 2021-02-24 22:32:15 · 491 阅读 · 0 评论 -
浅析webpack执行流程
bootstrapconst runCLI = async (args) => { try { // Create a new instance of the CLI object const cli = new WebpackCLI(); await cli.run(args); // process.argv } catch (error) { logger.error(error); process原创 2021-01-20 15:30:39 · 358 阅读 · 1 评论 -
Redux之中间件解读
Store增强器(StoreEnhancer)在createStore函数中有一个enhancer参数,StoreEnhancer类型。本质其实是一个高阶函数,执行此函数,返回增强后的store。/** * @param enhancer store增强器. 你可以选择指定它以增强store的第三方功能,如中间件,时间旅行,持久性等。 * Redux 附带的唯一存储增强器是“applyMiddleware()”. * * @returns A Redux store that lets you原创 2021-01-20 09:28:29 · 182 阅读 · 1 评论 -
《Web性能优化》读书笔记
原创 2021-01-17 12:03:55 · 167 阅读 · 0 评论 -
浅析阿里云前端构建工具——Dawn
Dawn取「黎明、破晓」之意,原为「阿里云·业务运营团队」内部的前端构建和工程化工具,现已完全开源。它通过 `pipeline` 和 `middleware` 将开发过程抽象为相对固定的阶段和有限的操作,简化并统一了开发人员的日常构建与开发相关的工作。原创 2021-01-17 00:37:56 · 553 阅读 · 4 评论 -
二维数组排列组合
题给定如下一个二维数组,进行排列组合,输出如下形式的一维数组。输入:[ ['a', 'b', 'c', ...], [1, 2, 3, ...], ['x', 'y', 'z', ...], ... ];输出[‘a1x’, ‘a1y’, ‘a1z’, …]小米一面遇到的一道面试题,当场蒙圈了,过于紧张,愣是没写出来。痛定思痛,埋头思考,想到了一种解法,欢迎交流。解如果二维数组只存在两个一维数组,会怎么做呢?使用嵌套的forfunction compose(a原创 2020-12-30 19:36:20 · 2385 阅读 · 1 评论 -
JSON.stringify的认知历程
初入前端,认识到JSON.stringify可以序列化对象为一个字符串,在开发中提供了许多便利。JSON.stringify({ x: 5, y: 6 });//"{"x":5,"y":6}"然后遇到一个需求是序列化字符串,且带有缩进格式化的方式展示在编辑器中。才认识到,原来这个方法还可以传递3个参数。第3个参数用于指定缩进用的空白字符串,用于美化输出(pretty-print)。JSON.stringify({ x: 5, y: 6, z: {a: 1} }, null, 2);/*"{原创 2020-08-29 10:22:34 · 150 阅读 · 0 评论 -
Promise.all与Progress结合实现请求进度监听
要批量发起100,1000或者更多个请求,可以借助于Promise.all,但是如何知道请求过程中接口的调用进度情况呢?/** * 模拟异步请求 */function timeout(time){ return new Promise((resolve)=>{ setTimeout(()=>{ resolve(time); },time); })}function allWithProgress(requests, callback){ le原创 2020-07-05 16:42:35 · 2991 阅读 · 1 评论 -
浅析Promise原理
Promise原型对象在浏览器控制台输入如下代码,可以看到Promise原型对象信息。var p = new Promise(()=>{});console.log(p)Promise原型上有catch、finally、then等方法。同时Promise内部维护了两个属性值status和valuePromise构造方法再看Promise的构造方法,如下图构造函数有all、allSettled、finally、race、reject、resolve等方法。简单实现构造函数实现总结原创 2020-07-01 11:07:40 · 229 阅读 · 0 评论 -
理解JavaScript中的作用域
执行环境及作用域执行环境定义了变量和函数有权访问的其他数据,决定了它们各自的行为。执行环境,或者叫执行上下文,每个执行环境都有一个与之关联的是 变量对象。存储了所有变量和函数。执行环境分为:全局执行环境、函数执行环境、eval执行环境。在Web浏览器中,全局执行环境被认为是window对象。每个函数都有自己的指定环境。当执行流进入一个函数,函数的环境会被推入一个环境栈(调用栈)调用栈 中存放的就是执行上下文(变量对象)。作用域:就是变量和函数的可访问范围。作用域分为:全局作用域、函数作用域原创 2020-05-27 19:25:05 · 189 阅读 · 0 评论 -
求两个数组的差异
案例一组CheckBox,每次选中或者取消一个,在onChange中获取到的都是数组值,如何确定变化的那个值呢?体验地址题目如上案例,换一种说法。求解任意两个数组的存在差异的值。注意,有可能第一个数组比第二个数组的值多。也有可能第二个数组的值更多。思路一根据每个值在数组中首次出现和最后一次出现的索引值是否相等进行判断。let arr0 = [1,2,4,5], arr1 = [1,2,3,4,5];let diff = arr0.concat(arr1).filter((value, ind原创 2020-05-22 16:32:27 · 1810 阅读 · 0 评论 -
formily中基础正则表达式
阅读formily源码时,遇到了平常开发过程中会用到的一些正则表达式,这里做个记录。export default { email: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, ipv6: /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\原创 2020-05-09 17:26:36 · 659 阅读 · 0 评论 -
ES6中import和export
exportexport function funcA() { console.log('funcA');}function funcB() { console.log('funcB');}//使用大括号指定要输出的一组变量export { funcB };//as关键字将输出的变量重命名export { funcB as func2};export default f...原创 2020-03-16 16:41:34 · 545 阅读 · 0 评论 -
从ES6代码编译看原型链继承
TS代码class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; }}class Point3D extends Point { z: number; constructor(x:number, y:number, z...原创 2020-03-14 18:28:47 · 429 阅读 · 0 评论 -
《JavaScript高级程序设计》读书笔记 之 执行环境及作用域
执行环境定义了变量和函数有权访问的其他数据,决定了它们各自的行为。执行环境,或者叫执行上下文,每个执行环境都有一个与之关联的是 **变量对象。**存储了所有变量和函数。分为:全局执行上下文、函数执行上下文、eval执行上下文。在Web浏览器中,全局执行环境被认为是window对象。每个函数都有自己的指定环境。当执行流进入一个函数,函数的环境会被推入一个环境栈(调用栈)调用栈 中存放的就是执...原创 2020-03-14 16:07:32 · 182 阅读 · 0 评论 -
JavaScript 枚举
enum Color { RED,GREEN,BLUE}var Color;(function (Color) { Color[Color["RED"] = 0] = "RED"; Color[Color["GREEN"] = 1] = "GREEN"; Color[Color["BLUE"] = 2] = "BLUE";})(Color || (Color...原创 2019-12-21 10:14:50 · 328 阅读 · 0 评论 -
Webpack和Gradle
Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS等。 以下内容摘自转载 2017-08-15 11:41:45 · 1950 阅读 · 0 评论 -
webpack-bundle-analyzer 使用
安装# NPM npm install --save-dev webpack-bundle-analyzer# Yarn yarn add -D webpack-bundle-analyzer配置const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;const pat...原创 2019-08-21 23:24:28 · 1723 阅读 · 0 评论 -
我对this的理解(JavaScript)
注意:this是在函数被调用的时候发生的绑定,它指向什么完全取决于在哪里被调用。在严格和非严格模式下,this的指向有所不同function f1() { return this;}// In a browser:f1() === window; // true // In Node:f1() === global; // true//严格模式如下:function...原创 2019-06-22 17:47:44 · 208 阅读 · 0 评论 -
高阶函数
维基百科这样描述: 高阶函数是至少满足下列一个条件的函数: 1. 接受一个或多个函数作为输入 2. 输出一个函数简言之,一个函数可以将其他函数作为参数或者返回值是函数,这个函数就是高阶函数。JavaScript中的高阶函数map 1. 定义:通过指定的函数去处理数组中的每个元素,并返回处理后的新数组。 2. 语法:array.map(function(curr...原创 2018-05-28 18:20:57 · 363 阅读 · 0 评论 -
Redux解读
/** * Creates a Redux store that holds the state tree. * The only way to change the data in the store is to call `dispatch()` on it. * * There should only be a single store in your app. To specify...原创 2018-05-25 17:06:52 · 292 阅读 · 0 评论 -
React 中集成 Markdown编辑器
文中采用的是Mditor编辑器 [ M ] arkdown + E [ ditor ] = Mditor Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器,仅此而已… 支持浏览器: chrome/safari/firefox/ie9+引入资源文件引入CDN资源<link rel="stylesheet" href="...原创 2018-05-13 13:52:38 · 8459 阅读 · 6 评论 -
Webpack入门
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。全局安装tnpm install -g webpackWindows环境...原创 2018-03-07 17:04:36 · 638 阅读 · 0 评论 -
JavaScript之Set 和 Map
Set 和 Map 数据结构 阅读笔记Set类似于数组,但是成员的值都是唯一的,没有重复的值。Set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。属性 size:返回Set实例成员的总数操作方法 add(value):添加某个值,返回 Set 结构本身。 delete(value):删除某个值,返回一个布尔值,表示删除是否成功。 h原创 2017-11-20 18:01:21 · 285 阅读 · 0 评论 -
JavaScript闭包与Groovy闭包区别
JavaScript闭包与Groovy闭包区别转载 2017-08-04 15:59:10 · 604 阅读 · 0 评论 -
JavaScript之数组
var arr = ["a","b","c"];//for...in..遍历的是数组或对象的属性for(var item in arr){ console.log(arr[item])}var colors = ['red', 'green', 'blue'];colors.forEach(function (color) { console.log(color);});//fo原创 2017-08-18 18:05:53 · 318 阅读 · 0 评论 -
JavaScript之数据类型
来自廖雪峰的JavaScript教程NumberJavaScript不区分整数和浮点数,统一用Number表示,以下都是合法的Number类型:原创 2017-08-04 11:20:23 · 462 阅读 · 0 评论 -
钉钉微应用接入(企业内部开发)
文档中心https://open-doc.dingtalk.com钉钉后台配置创建微应用流程: 获取企业号CorpID&Secret: 登录钉钉OA管理后台-微应用-工作台设置(仅企业主管理员可查看)应用开发流程注册企业: 进入OA管理后台,通过一系列流程,完成企业注册。创建微应用: 进入钉钉管理后台后可以进入 “企业应用-应用管理” 页面创建微应用。 需要填写应用Logo、应用名称、功能介原创 2017-07-12 11:05:55 · 43566 阅读 · 0 评论 -
JavaScript构造函数、对象、原型
对象不仅仅是字符串到值的映射,除了可以保持自有的属性,JavaScript对象还可以从一个称为原型的对象继承属性。对象的方法通常是继承的属性。这种“原型式继承”(prototypal inheritance)是JavaScript的核心特征.创建对象三种方式 1.对象直接量 var empty = {} var point = {x:0,y:0}2.关键字newvar...原创 2018-06-28 14:18:54 · 289 阅读 · 0 评论 -
《JavaScript高级程序设计》读书笔记(一)
JavaScript组成:核心(ECMAScript)文档对象模型(DOM)浏览器对象模型(BOM)ECMAScript ,由ECMA-262标准定义,提供核心语言功能。JavaScript实现了ECMAScript,Adobe ActionScript同样也实现了ECMAScript。DOM,提供访问和操作网页内容的接口和方法。注意:DOM并不只是针对JavaScript的,...原创 2018-09-30 11:35:10 · 302 阅读 · 0 评论 -
JS大坑之17位以后的Number类型数值精度丢失问题
接口返回数据中携带有id字段,如果数值过大,在经过JSON.parse()解析后发现精度丢失。代码如下:var text = '{"id":18014398509481985}';var obj = JSON.parse(text);console.log(obj);//结果: {id: 18014398509481984}解决办法:后端将ID处理成字符串的形式前端通过正则,处...原创 2019-05-29 14:17:05 · 8003 阅读 · 1 评论 -
ES6 Class 与 ES5 构造函数对比
ClassUser类被编译以后转化为构造函数。被编译后生成了_classCallCheck,_instanceof方法。class User{}const user = new User();console.log(user); // {}//↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑//↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓"us...原创 2019-05-30 15:51:50 · 428 阅读 · 0 评论 -
响应式编程(学习小结)
定义维基百科:响应式编程或反应式编程(英语:Reactive programming)是一种面向数据流和变化传播的编程范式。对于响应式编程,不同语言都有相应的扩展库。例如RxJava、RxAndroid、RxJS等等。官网:An API for asynchronous programming with observable streams用于使用可观察流进行异步编程的API...原创 2019-05-27 10:01:06 · 385 阅读 · 0 评论 -
解决Ant Design的样式和CSSModules冲突问题
项目中样式采用CSS Modules的写法,构建之后会被重命名。如果项目中引入了Ant Design的样式,则会导致样式加载不到问题。解决方式有两种:打包后在html中重新引入antd.css文件。但是无法做到按需加载,且打包的css文件中存在多余的内容。项目使用Dawn构建,配置webpack.config.js。代码如下module.exports = function (webp...原创 2019-01-03 14:46:18 · 5590 阅读 · 0 评论 -
Context与Store结合
借助于context的跨级通信能力,可以将store管理数据的模式应用于每个组件当中。即将store通过context传递到子组件,一方面子组件可以通过store.dispatch()触发store中数据更新,另一方面子组件可以通过store.getState()方法获取最终的更新状态,刷新UI。Redux解读React之Context1.目录结构制作一个更换主题色的App参考【结合 ...原创 2018-10-28 17:53:21 · 1239 阅读 · 0 评论