![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
frontEnd
文章平均质量分 51
灵谷
Im just a landlubber in the ocean of IT
展开
-
react组件: ace-editor
一个高性能的网页代码编辑器。原生js用法<div id="editor" style="height: 500px; width: 500px">some text</div><script src="src/ace.js" type="text/javascript" charset="utf-8"></script><script> var editor = ace.edit("editor"); // 设置主题色 e原创 2021-06-30 17:50:38 · 1467 阅读 · 0 评论 -
WebStorm中SVN插件问题
解决办法:取消低版本下的svn这是最直接的方法,不使用SVN原创 2015-08-26 11:29:51 · 1386 阅读 · 0 评论 -
Babel Error: The exported identifier “undefined“ is not declared in Babel‘s scope tracker...
ErrorThe exported identifier "undefined" is not declared in Babel's scope trackeras a JavaScript value binding, and "@babel/plugin-transform-typescript"never encountered it as a TypeScript type declaration.It will be treated as a JavaScript value.Thi原创 2021-04-08 18:21:58 · 997 阅读 · 0 评论 -
JS HTTP客户端推荐:Axios,Request,Superagent,ajax,fetch
http客户端是web开发中用来请求数据必不可少的工具。对比功能点AxiosSuperagentRequestFetchSupertestAjax简介基于xhr改良版Ajax简化版HTTP请求客户端浏览器自带的http客户端,旨在替代 XMLHttpRequest,灵活易用提供简洁的 HTTP 测试接口,简单http断言异步的JS和XML技术–一套结合了多项技术的浏览器端开发技术。浏览器端的实现为:XMLHttpRequest和ActiveXObject(低版本原创 2021-01-07 20:20:57 · 205 阅读 · 0 评论 -
egg.js使用笔记
目录基础功能中间件(Middleware)编写中间件插件为什么要用插件?中间件、插件、应用的关系路由如何定义RouterRouter 详细定义说明注意事项RESTful 风格的 URL 定义router 实战controller怎么获取参数表单内容获取表单校验重定向内部重定向外部重定向中间件的使用单个文件太多路由映射?控制器(Controller)如何编写controller服务(service)使用场景定义 Service基础功能中间件(Middleware)我们介绍了 Egg 是基于 Koa 实现原创 2020-12-20 13:08:29 · 439 阅读 · 1 评论 -
webpack 学习记录
为什么出现webpack?前端的开发技术多繁杂,不同的规范以及格式,导致前端引擎并不能完全识别这些技术语言。例如:less,typescript等,你都需要手动将其转化为浏览器可识别的语言。当项目庞大时,这样的手动处理就显得尤为复杂。为了实现这一过程的自动化,于是出现了webpack。什么是webpack?webpack就是模块打包工具,它主要负责:分析项目结构,找到源语言,将原创 2017-12-25 15:16:12 · 149 阅读 · 0 评论 -
bower与npm,解惑包管理工具
npm is the package manager for Javascript。npm是基于nodejs平台的js包管理工具。在安装NodeJS的时候将会自动安装该工具,能解决NodeJS代码部署上的许多问题,如:允许用户从NPM服务器上下载别人编写的第三方包到本地使用允许用户从NPM服务器上下载第三方命令行程序到本地使用允许用户上传自己编写的包、命令行程序到NPM服务器前后端原创 2017-12-25 14:53:03 · 498 阅读 · 1 评论 -
前端构建工具之Gulp使用记录
安装指南:(1) 全局安装: $ npm install --global gulp项目的开发依赖安装: $ npm install --save-dev gulp(2) 在项目根目录下创建名为gulpfile.js 的配置文件 AMD规范var gulp = require('gulp');gulp.task('default',function(){//默认的任务原创 2017-12-25 10:54:23 · 271 阅读 · 0 评论 -
B1. mouseover/mouseout和mouseenter/mouseleave和hover
hover:首先通过查看Jquery源码,可以得到,hover就是对mouseenter/的封装。目标对象 A,具有子元素B。mouseover和mouseenter,区别:mouseover/mouseout:鼠标进入对象A会触发相应事件mouseover,当鼠标在A内进行滑动,进入B时,被判定为离开了A,将会触发对象A的mouseout,当离开B时,继续触发对象A的mouseove原创 2018-01-29 16:26:35 · 246 阅读 · 0 评论 -
gitlab: [remote rejected] pre-receive hook declined
场景再现往remote提交代码的时候,报错如下:! [remote rejected] develop -> develop (pre-receive hook declined)原因develop分支做了保护处理。解决解除develop分析的protected处理,或者新开一个branch,并将develop从远程pull后,rebase develop,将新的branch 推送到remote,然后 merge到develop分支。...原创 2021-04-15 17:24:28 · 15716 阅读 · 0 评论 -
一次深刻的vscode及其插件跳坑记录(value-keyword-case)
场景复现经过长达两个月的代码迁移工作,终于在这一天,我将项目上线了。^_^然后,立马收到了问题反馈!!!好吧!!因为这是个迁移的老项目再加上时间紧迫,该项目没有测试人员的加入,只进行了主流程功能的自测,有些非主流程的小细节并没有全部测试。所以-----------------出问题了!问题出在哪里?报错如下图:但是-----我在代码中并没有找到这个modes字段,见鬼了!!通过仔细查找发现,原始字段为MODES。但是这段代码,我根本就没有动过哈,纯粹只是进行了一次Copy到Paste的操作,为何原创 2021-04-14 20:19:13 · 603 阅读 · 1 评论 -
CSS之盒子模型(Box Model)
盒子模型本质就是从某特定的方面来描述一个长方形盒子。CSS盒子模型,通过描述DOM中的一个元素,以及该元素根据可视化格式模型在文档中的布局,从而形成的一种概念模型。模型尺寸每个盒子(元素)都包括:内部区域(inner edge)content以及可选、可再设置的周围属性:padding、margin、border。(根据浏览器的不同,每个属性的默认值都是有些差异的。主要区分的是PC原创 2017-11-24 17:38:56 · 330 阅读 · 0 评论 -
webpack: 基础配置项
outputpath [optional] (/dist)默认值为dist。将在项目根目录(跟package.json平级的位置)上创建一个dist目录用来存储webpack后的输出。publicPath [optional]publicPath用来指定应用程序中所有资源的基础路径。https://webpack.docschina.org/guides/public-path/...原创 2021-05-17 16:30:37 · 984 阅读 · 2 评论 -
杂记:windows、mac、linux大小写敏感问题
系统大小写是否敏感(default)改变windows否mac否git config --global core.ignorecase falselinux是原创 2021-05-17 15:47:11 · 684 阅读 · 0 评论 -
理解.git目录中的index.lock文件
文件在哪里?怎么发现它的?当你取消掉正在做的commit任务,并重提commit后,你会遇到如下错误:fatal: Unable to create '.git/index.lock': File exists.接下来我们将了解到:这个文件的作用如何解决上面的错误功能及解决措施在您的本地计算机上,Git存储库的工作内容直接放在隐藏的.git目录。这个目录存储了当前git仓库下,git命令行工具用到的所有种类的信息:分支、提交、以及repo中的子模块、hooks、日志等相关信息等(从本原创 2021-04-15 17:29:49 · 6298 阅读 · 0 评论 -
Use arrow keys在git bash中不能使用?
背景$ taro init???? Taro v3.2.0Taro 即将创建一个新项目!Need help? Go and open issue: https://tls.jd.com/taro-issue-helper? 请输入项目名称! taro? 请输入项目名称! taro? 请输入项目介绍! taro? 请输入项目介绍! taro? 请选择框架 (Use arrow keys)> React Nerv Vue Vue3走到这一步,发现,不能进行切换!这是原创 2021-04-05 21:54:15 · 1543 阅读 · 0 评论 -
Error: spawn git ENOENT
在windows的cmd中执行taro init遇到如下错误:D:\code>taro init???? Taro v3.2.0Taro 即将创建一个新项目!Need help? Go and open issue: https://tls.jd.com/taro-issue-helper? 请输入项目名称! taro-demo? 请输入项目介绍! demo? 请选择框架 Vue3? 是否需要使用 TypeScript ? Yes? 请选择 CSS 预处理器(Sass/Less/原创 2021-04-05 21:24:51 · 2164 阅读 · 0 评论 -
ECMAScript: import()不能传入变量?
描述// fulfilledimport('./index.jsx');// rejectedconst uri = './index.jsx';import(uri)解决方案webpack 编译es6 动态引入 import() 时不能传入变量,例如import(dir) , 而要传入字符串 import(‘path/to/my/file.js’),这是因为webpack的现在的实现方式不能实现完全动态。虽然import()方法在es规范中是支持动态引入的,但是webpack的实原创 2021-02-03 15:36:37 · 2180 阅读 · 0 评论 -
nodejs: pm2入门
简介PM2是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单。安装installed globally:npm i -g pm2使用目录pm2安装好后,会自动创建下面目录:$HOME/.pm2 will contain all PM2 related files$HOME/.pm2/logs will contain all applications logs$HOME/.pm2/pids will contai原创 2021-01-27 15:49:34 · 177 阅读 · 0 评论 -
eslint: plugins
简介每个plugin都一个npm包。包名格式如下例(jquery相关):eslint-plugin-jquery@jquery/eslint-plugin@jquery/eslint-plugin-jquery创建plugin最简单的创建plugin的方式是用生成器工具:Yeoman generator1. 暴露额外的rules给eslint使用需要export一个与rule ID一一映射的key-value对象。 如下,新增rule: ‘dollar-sign’module.expo原创 2021-01-27 14:49:50 · 944 阅读 · 0 评论 -
Typescript: React项目用Typescript改造实践记录
项目技术栈:ant design 【支持TS语法】reactreact-router-domreact-redux准备:typescript只用来处理.ts和.tsx文件,如果配置了allowJS:true这可以处理JS文件开始:函数组件修改import React from 'react';interface CompProps { name: string, children: React.ReactNode,}function Comp({name, childr原创 2021-01-15 18:18:12 · 287 阅读 · 0 评论 -
Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally
问题:Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?分析原因:forwardRef会让stateless组件的defaultProps和propTypes属性失效。import React, {forwardRef} from 'react';function A(props, ref) { re原创 2021-01-13 18:13:34 · 4225 阅读 · 0 评论 -
input file重复上传同一个文件onchange不调用?
问题:React项目中用了原生组件input[type=file]来上传文件,遇到了如下问题:设置宽度无效!width设置了,但鼠标感应区并不随width扩大。 【解决:用正常width元素,触发元素的click()事件】多次上传同一个文件,onchange不调用?【原理:onchange监听的是input的value,只有内容变了才会触发。 解决:在onchange中手动置空value:e.target.value = ‘’】...原创 2021-01-12 19:37:14 · 1247 阅读 · 0 评论 -
react项目如何防止样式污染
react与vue不同,vue可以通过在script中设置scoped来限制样式的生效范围,不至于样式污染。CSS 的局部作用域解决了大问题。在w3c 规范中,CSS 始终是「全局的」。在传统的 web 开发中,最为头痛的莫过于处理 CSS 问题。因为全局性,明明定义了样式,但就是不生效,原因可能是被其他样式定义所强制覆盖。接手老项目更是噩梦,改对了一个地方的样式,却把另外许多地方的样式打乱。CSS modules 是从工具层面给出的一套生成局部 CSS 的规范,本质还是生成全局唯一的 CSS 定义。w原创 2021-01-12 18:22:48 · 3781 阅读 · 1 评论 -
如何拦截JS对象的操作
用ES6中的Proxy。Proxyproxy是用于修改某些操作的默认行为,或者也可以说:在目标对象之前架设一层 “ 拦截 ” ,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。 Proxy 这个词的原意是代理,用在这里表示由它来 “ 代理 ” 某些操作,可以译为 “ 代理器 ” 。var obj = {name: 1};// newObj,这就是已经添加了Proxy的objvar newObj = new Proxy(obj, { get: func原创 2021-01-08 14:37:56 · 1058 阅读 · 0 评论 -
如何为JS对象添加getter和setter
基础知识对象目前的属性描述富主要有两种形式:数据描述符和存取描述符。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。描述符必须是两种形式之一;不能同时是两者。通用可选值:configurable: falseenumerable: false数据描述福同时具有以下可选值:value: undefinedvariable: false存取描述符同时具有以下可选键值:get: undefined 给属性提供ge原创 2021-01-08 13:45:50 · 1489 阅读 · 0 评论 -
Webpack和Typescript的别名配置
需求项目技术栈:webpack + typescript + eslint代码中多次使用相对路径导入模块,看起来复杂且不美观,如下:import fetch from '../../../../utils/fetch';如何将上面的代码进行优化呢?import fetch from 'utils/fetch';方案step1: 配置webpack的resolve.aliasmodule.exports = { entry: { main:'./main.js', },原创 2021-01-07 20:38:10 · 602 阅读 · 0 评论 -
18个Angular开源项目的简介
在本文中,我们从550个使用 Angular1.x 和 Angular 2 构建的项目中精选了前18个项目来进行学习。1. Soundnode使用 NW.js,Node.js,Angular.js 与 Soundcloud API 构建的 Soundcloud 桌面版(Mac,Windows和Linux)感谢 Michael Lancaster 提供转载 2017-03-14 14:56:23 · 9323 阅读 · 1 评论 -
RequireJS 使用手册
简介RequireJS是JS文件和模块的加载器。它是对在浏览器中运行时一种优化,也可以用在其他的JS环境中,像Rhino和Node。兼容性IE6 , Firefox 2 , Safari 3.2 , Chrome 3 , Opera 10为什么要用RequireJS在没使用模块加载器的情况下,所有的js文件都是写在HTML文件中的。随着项目的复杂化,JS文件会出原创 2017-07-03 11:10:04 · 694 阅读 · 0 评论 -
Placeholder的表现与兼容性
(1)HTML5中新增加的一个属性,应用于input,textarea,表现为:文本框内灰色字体提示;聚焦后,提示隐藏(2)兼容性:能支持HTML5的浏览器:IE10,Firefox,Chrome,Safari等,低版本不支持(IE5-IE9) (a)兼容所有浏览器(IE6-IE9)function placeHolder(){if(nodes.length && ...原创 2018-03-20 13:07:20 · 464 阅读 · 0 评论 -
CSS hack 集锦
本文的所有点子来自网络以及自身实践!测试环境:IE5/IE7/IE8/IE9/IE10/Edge 文档模式(1)\0 这个标记在做登录表单的时候兼容IE10,IE9的时候用过 使用场景:IE8,IE9,IE10,Edge,IE11(其他资料显示奏效).name{ color:red; color:pink\0;//\0紧贴pink,否则IE8失效}(2)\9 (<m...原创 2018-03-20 16:22:09 · 240 阅读 · 0 评论 -
Web前端资源汇总
网页特效库 华山论剑HTML5特效2017新年快乐特效CSS3+jQuery实现时钟插件Html5入门实例"Far away from home"jQuery网页版五子棋小游戏源码下载一句jQuery代码返回顶部HTML5知识初级题目jquery仿搜狐投票动画代码jQuery简洁大方的登录页面模板HTML5模仿逼真原创 2017-03-20 15:21:16 · 947 阅读 · 0 评论