WEB前端
文章平均质量分 63
照物华
一切过往,皆为序章
展开
-
解决typescript中使用Object.keys报错的问题
开发中使用`typescript`的时候,经常会遇到Object.keys报错的情况,本文列举常见的问题及解决方案转载 2022-04-21 21:32:45 · 2761 阅读 · 1 评论 -
escape,encodeURI,encodeURIComponent有什么区别?
首先,escape/unescape 已经废弃,应当避免使用。The deprecated escape() method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use encodeURI or encodeURIComponent instead.The deprecated unescape() method computes a原创 2020-05-19 16:39:23 · 509 阅读 · 0 评论 -
神奇的eval()与new Function()
原文链接:http://imys.net/20151222/eval-with-new-function.html在需要兼容IE8以下的日子里,往往需要使用eval()来把后端传过来的JSON串转成可操作的JSON对象。直到昨天在翻看jQuery源码时,才发现jQuery.parseJSON的兼容实现用的是new Function()。马上Google了相关资料,寻找两者的区别。evaleval接受字符串参数,解析其中的js代码。如果编译失败,会抛出异常,否则执行其中的代码,计算返回值。eval('转载 2020-05-19 14:27:33 · 1266 阅读 · 0 评论 -
重新认识javascript之拆箱装箱和类型转换
基本数据类型:string、number、boolean引用类型:object、function不存在的类型:undefinedString、Number、Boolean分别属于string、number、boolean三个原始类型的包装类型,它们的对象属于引用类型。装箱装箱是指把基本数据类型转换为对应的引用类型的操作,该过程主要是指string、number、boolean类型的数据,通过String、Number、Boolean进行包装成为引用类型数据的过程。// 隐式装箱var s1原创 2021-03-28 16:00:38 · 248 阅读 · 2 评论 -
【译】以 eval() 和 new Function() 执行JavaScript代码
本博文探讨在 JavaScript 中如何动态的执行代码。eval()以 str 的方式运行 JavaScript 代码,比如:var a = 12;eval( 'a+5' ); // 17注意语句上下文 eval() 的解析:eval( '{ foo: 123 }' ); //123eval( '({ foo: 123 })' ); //{ foo: 123 }严格模式下的 eval()对于 eval(),理应当在严格模式下使用。在松散模式下运行代码会在当前的作用域中创建局部变转载 2020-05-19 14:10:15 · 1128 阅读 · 0 评论 -
nodejs版本的Gitalk/Gitment评论自动初始化
原文发表于nodejs版本的Gitalk/Gitment评论自动初始化前言今天搭建blog的最后一步,添加评论功能,一番搜索,看中了Gitalk和Gitment,因为Gitment在github上的代码断更太久,最终选择了Gitalk,关于具体安装和配置,可以参见下面官网和两篇文章Gitalk官网Hexo中Gitalk配置使用教程-可能是目前最详细的教程Hexo NexT主题中集成gi...原创 2018-12-11 17:14:59 · 1339 阅读 · 13 评论 -
nvm-windows 管理多版本nodejs
nvm-windwos windows上的nodejs 多版本管理工具 功能强大,可以帮助我们随意切换想要使用的nodejs版本,而无需重复安装原创 2020-12-01 01:51:31 · 504 阅读 · 0 评论 -
在 ES 模块构建的Nodejs中如何使用 __dirname 和 __filename
解决在使用nodejs构建`ESM`程序的时候,找不到`__filename`和`__direname`这两个变量,并且不能直接导入`JSON`文件的问题原创 2021-12-24 19:33:15 · 5390 阅读 · 0 评论 -
TypeScript中扩展的Global对象: 类型“typeof globalThis”上不存在属性解决办法
在以前版本的Node.js/TypeScript中,可以使用这样的声明来为global对象添加全局对象或属性,如:declare namespace NodeJS { export interface Global { app: any }}//或declare global { module NodeJS { interface Global { myConfig: any; } }}但在最新版的运转载 2021-12-24 19:42:48 · 7777 阅读 · 1 评论 -
tsconfig.json编译选项配置说明
incremental 增量编译,默认在 composite为true的为true,否则false语言和环境target : 编译目标,默认 es3reactNamespace; react的命名空间,默认Reactlib: TypeScript 包括一组默认的内置 JS API(如Math)类型定义,以及浏览器环境中的类型定义(如document)。TypeScript 还包括用于匹配target您指定的较新 JS 功能的 API ;例如,Map如果target是ES6或更新,则定义可用。.原创 2021-12-29 17:26:46 · 3944 阅读 · 0 评论 -
使用NVM管理Nodejs版本
ECMA标准不断推出,nodejs需要不断向标准靠拢,版本迭代很快,新的特性不断加入,所以我们的项目之间可能要使用不同的nodejs版本,比方说:你可能同时进行两个项目,而不同项目所使用的node版本是不一样的;又或者你要用更新的版本是做一些实验。这种情况下,如果没有NVM自己去安装和维护多个版本的node也是一件比较麻烦的事情。这就是NVM的价值。nvm不支持Windows本文使用环境是li...原创 2020-04-25 23:01:57 · 1569 阅读 · 0 评论 -
使用Nexus搭建npm和maven私服的配置记录
我是在centos7环境上安装的 Nexus,版本是nexus-3.22.0-02修改端口号端口的配置在/path/nexus-3.22.0-02/etc/nexus-default.properties 文件,修改application-port属性,并重启即可。禁用匿名访问权限...原创 2020-04-12 18:39:32 · 1202 阅读 · 0 评论 -
uri中为什么本地文件file后面跟三个斜杠, http等协议跟两个斜杠?
uri中为什么本地文件file后面跟三个斜杠, http等协议跟两个斜杠?转载 2020-05-19 11:10:12 · 1648 阅读 · 0 评论 -
解决css中上下外边距(margin)在父元素中溢出的问题
两个办法给父元素添加overflow: hidden;即可给父元素添加透明边框border: 1px solid transparent;给父元素添加伪元素:&::before,&::after{ content: ''; display: table;}原创 2021-11-26 00:35:36 · 1358 阅读 · 0 评论 -
javascript笔记之遍历对象的五种武器
准备先来准备一个测试对象obj。代码清单1var notEnum = Symbol("继承不可枚举symbol");var proto = { [Symbol("继承可枚举symbol")]: "继承可枚举symbol", name: "继承可枚举属性"};// 不可枚举属性Object.defineProperty(proto, "age", { value: "继承不可枚举属性"});// 不可枚举symbol属性Object.defineProperty(p原创 2021-10-20 18:32:44 · 221 阅读 · 2 评论 -
webpack4 style-loader less-loader 出现 TypeError: this.getOptions is not a function at Object.loader
今天配置了一下 webpack.config.js , 然而css的打包一直出错,配置都是常规配置,错误如下:ERROR in ./src/search.cssModule build failed (from ./node_modules/style-loader/dist/cjs.js):TypeError: this.getOptions is not a function at Object.loader (C:\Users\xingmu\ws\practice\webpack-gk\原创 2021-07-20 00:05:28 · 2135 阅读 · 0 评论 -
依赖包的版本号匹配策略&&版本号管理策略&&使用npm管理项目版本号
文章目录依赖包的版本号匹配策略使用命令管理自己的版本号版本号策略编程式自动更新版本号依赖包的版本号匹配策略~会匹配最近的小版本依赖包,比如~1.2.3会匹配所有1.2.x版本,但是不包括1.3.0^会匹配最新的大版本依赖包,比如^1.2.3会匹配所有1.x.x的包,包括1.3.0,但是不包括2.0.0没有~和^,完全匹配指定版本号设置默认版本号匹配规则npm config set save-prefix ["^"|"~"|""] 。可以在项目package.json同级目录下创建.npmrc转载 2020-06-04 11:27:37 · 1184 阅读 · 0 评论 -
npm使用不完全乱指
配置// 配置列表npm config list// 获取指定配置npm config get key// egnpm config get registry// 指定配置npm config set key=value// egnpm config set registry=https://registry.npm.taobao.org// 删除指定配置npm confi...原创 2020-04-30 23:26:56 · 954 阅读 · 0 评论 -
webpack打包angularjs后出现Angular $injector:unpr Unknown provider的错误及解决
文章目录问题原因分析解决附问题一个angularjs1.x的历史项目,webpack3做的打包,打出来的包一起有几十M,因为一直内网运行,虽然包大了点,但是还能够接受。因为最近有一些客户对这个项目很感兴趣,就拿去演示,这就不能忍受了,然后受命去看看是什么问题。在package.json的scripts中,是做了压缩代码脚本的,问了之前项目的成员说是压缩脚本出来的代码有部分页面是跑不起来的。so,就测试了一波,发现是Angular $injector:unpr Unknown provider错误。原创 2020-05-29 16:10:18 · 1302 阅读 · 0 评论 -
JavaScript读源码系列--微前端之import-html-entry
最近网络上对于微前端讨论的越来越多,大厂也是各种晒方案,qiankun 就是其中一款由蚂蚁金服推出的比较成熟的微前端框架,基于 single-spa 进行二次开发,用于将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。尤其适合遗留项目技术栈难以维护,又需要新的技术来迭代功能。qiankun一大特点就是将html做为入口文件,规避了JavaScript为了支持缓存而根据文件内容动态生成文件名,造成入口文件无法锁定的问题。将html做为入口文件,其实就是将静态的html做为一个资源列表来使原创 2020-05-21 10:09:16 · 15758 阅读 · 1 评论 -
Webpack打包UMD的export问题
最近在写一个组件时候遇到一个问题,用webpack将组件打包成一个符合UMD规范的组件时出现一个比较奇怪的现象:使用export default导出的全局变量会多一个default属性:如:– index.jslet webpackDemo = { val: 'hello webpack'}export default webpackDemo;打包之后发现在全局下只能这么访问val值:webpackDemo.default.val;修改index.js代码let webpac.转载 2020-05-19 00:57:52 · 12527 阅读 · 4 评论 -
webpack中library和libraryTarget与externals的使用
在看webpack文档的LIBRARY AND EXTERNALS一节时,对output.libraryTarget和output.library还有externals总是无法理解,于是在segmentFault提问后结合实践总算多少理解它是怎么用的。externals官网文档解释的很清楚,就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。怎么理解呢?我们先通过官网说的那个jquery的案例来.转载 2020-05-19 00:54:15 · 506 阅读 · 0 评论 -
在ES6中对象属性的顺序是可预测的
常见的误解–“无法保证JavaScript属性的顺序”几年前开始编写JavaScript时,您可能已经听说过JS对象中属性的顺序是不可预测的。我从来没有碰到过奇怪和不寻常的属性顺序,但是我始终遵循从不依赖属性顺序的原则。内部ownPropertyKeys方法事实上,自ES6起,有一些方法基于定义属性顺序的特定规则,除了一种特殊情况外,该顺序是按时间顺序排列的,并依赖于对象属性的类型和值。这些规则被定义在 the inernal “ownProertyKes” method 规范中。例如,es6中新的翻译 2020-05-19 00:41:02 · 722 阅读 · 0 评论 -
antd表单中的validateFields没有被执行可能的问题及解决
文中所描述的问题及解决,适用于antd 3.x版本今天在做一个修改密码的功能,逻辑极为简单,没有什么花头,然而在获取短信验证码的时候,如下代码中的form.validateFields的回调函数一直得不到执行,翻了两遍官方文档都没有找出问题。onGetSMS = () => { const { form, sendSmsModifyPWD, sendEmailForResetPassword } = this.props; const { type } = this.state;原创 2020-05-14 23:18:24 · 13599 阅读 · 4 评论 -
SVG中 text 文本的自动换行
今天在做一个使用svg做的交互动画,使用到了svg 里的 text 元素,遇到了换行的问题。最后采用了 foreignObject 包裹 DOM 元素,利用 DOM 的文本布局能力自动处理换行,无需计算内部坐标。<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"> <foreignObject width="480" height="115" x="100" y="100"&原创 2020-05-13 22:07:28 · 6535 阅读 · 0 评论 -
javascript笔记之this到底指向哪里?
本文最最核心的一句话就是:this是在函数调用的时候确定的,一定要牢牢记住,其次,在函数执行过程中,this一旦被确定,就不可更改了。var a = 10;var obj = { a: 20}function fn(){ this= obj; // 这句话试图修改this,运行后会报错 console.log(this.a);}fn();this是什么重点:th...原创 2020-04-27 17:03:13 · 158 阅读 · 0 评论 -
javascript笔记之ES6的Class继承
子类必须明确调用super()子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。class Point { /* ... */ }class ColorPoint...原创 2020-04-26 18:23:28 · 127 阅读 · 0 评论 -
javascript笔记之ES6的Class基本语法
因为ES6里面的class实现是基本上是es5时代实现方式的语法糖,没有es5的直接,也没有像java等面向对象编程语言的纯粹。class Point { // 私有属性和私有方法已经被支持,使用的是以 # 符号来标示的 // 如果在类外使用 #count, 会收获一个错误 Private field '#count' must be declared in an enclosin...原创 2020-04-26 17:29:24 · 370 阅读 · 0 评论 -
React的Context API及对旧版Context问题的思考
文档上说:Context 提供了一种在组件之间共享此类值的方式,而不必显式地通过组件树的逐层传递 props。文档上说:Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言。文档上说:不要仅仅为了避免在几个层级下的组件传递 props 而使用 context,它是被用于在多个层级的多个组件需要访问相同数据的情景。官方文档最后说:请谨慎...原创 2020-04-25 22:02:36 · 414 阅读 · 0 评论 -
npm install中的缓存和资源拉取机制
npm config list //查看基本配置npm config list -l //查看所有配置npm@5和之前的版本在缓存存储和使用上有所变化。新版已替换了旧的缓存方法,不再使用之前的npm缓存。不过如果不做离线安装的话,日常使用是无感知的。缓存目录npm install或npm update命令,从 远程仓库下载压缩包之后,都存放在本地的缓存目录。在 Linux 或 Mac 默...原创 2020-04-25 14:04:53 · 12096 阅读 · 0 评论 -
为什么react中的setTimeout会取到旧值
示例代码及原因import React, { useState } from "react";/** * 两种写法里,setTimeout 取到的都是旧值,是因为 react 中一直遵循一个原则, * 即 state 指向的内容是不可变的,每一次 state 的更新都是指向变了,而原来指向的内容 * 因为闭包的原因,依然被 setTimeout 使用着,没有释放 * * 所以说 组件...原创 2020-04-19 23:00:07 · 2774 阅读 · 0 评论 -
nextjs报错Error: EEXIST: file already exists
问题今天copy了同事用nextjs导出的静态页面的代码,本地编译执行都很正常,可是提交到服务器自动便已打包的时候,一直报下面这个错误。Build error occurred{ [Error: EEXIST: file already exists, mkdir '/home/dev/repos/covid-tutoring/.next'] errno: -17, code: 'E...原创 2020-04-16 00:12:41 · 1557 阅读 · 0 评论 -
扩展create-react-app配置的方法
安装create-react-app脚手架: npm install -g create-react-app创建项目: create-react-app cra-modify也可以不执行步骤1,直接运行npx create-react-app cra-modify创建项目,链接:npx的用法如果创建项目时,拉取依赖包特别慢,可以设置npm镜像源为国内的淘宝,命令:npm con...转载 2020-04-04 15:27:20 · 766 阅读 · 0 评论 -
table中设置tr行间距
原文地址CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框。值描述separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。collapse如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。inherit规定应...转载 2020-03-27 12:00:12 · 2945 阅读 · 0 评论 -
hooks之useState和setEffect
useState语法const [state, setState] = useState(initialState)传入唯一的参数 initialState,可以是数字,字符串等,也可以是对象或者数组。返回的是包含两个元素的数组:第一个元素 state变量,setState修改state` 值的方法。与在类中使用 setState 的异同点:相同点:也是异步的,例如在 onCli...原创 2019-11-09 17:52:36 · 1881 阅读 · 0 评论 -
IE9和IE10下Drag&Drop的问题及解决
最近做了一些关于拖拽的coding,总体来说 html5 提供的 Drag&Drop 还是很好用的,也比较简单。但是在IE9和IE10上面遇到了两个问题,在这里记录一下。IE10下拖拽drop无法工作具体原因是在chrome调试的时候,只用ondragover和ondragleave事件就完成了所需要的功能,可是在IE10下一直无法工作,调试了好久发现,添加ondragenter的绑定...原创 2019-10-31 19:20:42 · 886 阅读 · 0 评论 -
解决axios跨域请求成功却报错的问题
问题今天在联调后端接口的时候,通过chrome调试工具可以看到接口数据返回正常,状态200,可是返回仍然被axios的onRejected 拦截了。无法获取请求结果,并在chrome控制台上可以看到如下错误。Failed to load http://localhost:8007/wenjuan/1: The value of the ‘Access-Control-Allow-Origin...原创 2019-10-31 16:51:12 · 3494 阅读 · 2 评论 -
Cordova目录结构说明
目录结构 (1)目录一览: 引用 myApp/ |– config.xml |– hooks/ | | – before_xxx/ | | – after_xxx/ |– merges/ | | – android/ | | – ios/ |– platforms原创 2015-09-09 16:32:21 · 7381 阅读 · 0 评论 -
Cordova插件管理
Cordova默认提供的程序界面和功能非常简单。当然你可以根据你的需要,运行标准Web开发技术对页面进行设计。但是当你需要和不同的设备进行通讯交互时,你就需要借助于一些插件,以便能够访问Cordova提供的核心API。 一般来说,你添加一个插件的目的是为了利用Cordova的API访问设备。详细的可用插件列表你可以在社区中看到(http://plugins.cordova.io/)。当然你也可以自原创 2015-09-09 16:30:47 · 2481 阅读 · 0 评论 -
Cordova的安装和使用
1、首先安装node.js2、打开命令行工具查看phonegap版本:cordova -v安装: npm install -g cordova更新:npm update-g cordova npm install -g cordova@3.1.0 @表示可以更新到得版本卸载:npm uninstall cordova -gnpm是nodejs命令-g表示原创 2015-09-09 16:26:24 · 659 阅读 · 0 评论