![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端组件
文章平均质量分 79
ime33
许久以来,我将不为人知的心事,藏在最贴心的行囊,为有在无人注意的一刻,才能悄悄思索,怎会在无意之中就将你烙入心头
展开
-
Unexpected token ‘‘‘, “‘{“type“:““... is not valid JSON
JSON数值:不能使用8/16进制 {"num":60}{"num":-60}{"num":6.6666}{"num":1e+6}{"num":1e-6} JSON对象 { "starcraft": { "INC": "Blizzard", "price": 60 }}JSON对象数组 {"array": [{"name": "workers"},{"name": "teacher","sex": 30}]}JSON数组 {"name": ["workers",10]}于是看到了这个网站,强烈推荐。原创 2023-05-24 10:48:40 · 4383 阅读 · 0 评论 -
ant-design V4升级V5记录(成功篇)
6、Uncaught Invariant Violation: Maximum update depth exceeded. 原因是,新版react中在render有立即执行的函数,函数执行进而触发render,陷入循环,修改如图所示,表示需手动触发;发生这个问题有两处地方,根因一致,通过控制台提示,知道上述报错是在哪里,哪个组件引起,发现是Rangpicker,时间选择器,第二处地方,在rangerpicker设置defaultValue时,通过state传入设置默认值,同理也会触发循环。原创 2023-02-09 16:40:52 · 4293 阅读 · 1 评论 -
ant-design V3升级V4记录(成功篇)
原因:babel版本兼容问题以及.babelrc文件配置,可在下方沿用我的babel相关版本。一是antd是一个开源性生态框架,人家社区一直在更新迭代,如果产品不及时更新,一直在使用不维护的,甚至有问题的框架,后果可想而知。原因:检查style-loader\less-loader\css-loader版本,挨个尝试。这篇博客没有一步步记录升级过程中的错误以及解决办法,所以只罗列的大致的错误项,希望对在升级之路上的你有所帮助。另外在我升级V4时,其实框架已经到了V5了,无奈升级到V5前,必须先升级V4。原创 2023-01-16 17:34:00 · 2785 阅读 · 0 评论 -
ant-design V3升级V4记录(失败篇)
1、升级"antd": "^3.26.19",2、安装迁移工具 cnpmi -g @ant-design/codemod-v43、提交变更4、执行迁移命令antd4-codemod app5、根据建议升级、安装依赖6、修改老版本webpack配置7、原创 2023-01-16 16:55:49 · 389 阅读 · 0 评论 -
yarn的安装和使用
yarn的简介:Yarn是facebook发布的一款取代npm的包管理工具。yarn的特点:速度超快。 Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。 超级安全。 在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。 超级可靠。 使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。 yarn的安装:下载node.js,使用npm安装npm install -转载 2020-08-13 10:24:45 · 428 阅读 · 0 评论 -
浏览器中Network各个耗时含义
一、Queueing发起请求文件顺序的排序耗时;优化点:浏览器在以下情况会对请求进行排序,1、JS执行发起http请求存在更高优先级的请求;2、并发列队tcp链接达到上限(谷歌HTTP1.0以上处理上限6个);3、浏览器分配缓存空间;措施:1、在JS执行过程中,识别哪些是需优先取数的请求,优先排序进队列;2、并发http数控制在浏览器上限合理范围,特别注意图片的加载尽量使用精灵图,减少请求次数;二、Stalled是浏览器得到要发出这个请求的指令到请求可以发出的等待时间,一般是代理协...原创 2020-05-21 18:32:51 · 3305 阅读 · 0 评论 -
详解react、redux、react-redux之间的关系
React一些小型项目,只使用 React 完全够用了,数据管理使用props、state即可,那什么时候需要引入Redux呢? 当渲染一个组件的数据是通过props从父组件中获取时,通常情况下是 A --> B,但随着业务复杂度的增加,有可能是这样的:A --> B --> C --> D --> E,E需要的数据需要从A那里通过props传递过来,以及对应的 ...转载 2019-11-18 15:41:55 · 225 阅读 · 0 评论 -
React-Pdf使用过程心得
上个迭代接了一个业务需求,需要在PC应用中可以直接预览pdf文件,于是在社区找了几个React组件,A、react-pdf-jsB、react-pdfC、React-read-pdf(移动端设备)三款插件都使用了下,最后采用了react-pdf,相对而言它的插件功能较为强大,文档使用非常清晰,作者对issues回复也非常及时,社区也比较活跃;一、cnpm install r...原创 2019-11-15 17:32:36 · 7900 阅读 · 8 评论 -
moment常用用法详解
原文:https://cnodejs.org/topic/58b15942ea21217a4486cd59安装依赖:npm install moment --save用法:'use strict'let moment = require('moment');//获取当前时间var now = moment().toDate();console.log(now)...转载 2018-08-29 10:43:53 · 26995 阅读 · 0 评论 -
React Router页面传值的三种方法
原文地址:https://blog.csdn.net/qq_23158083/article/details/68488831本文主要介绍React Router定义路由之后如何传值注:本文示例React Router版本为:3.0.2,使用前请注意检查版本一.props.params官方例子使用React router定义路由时,我们可以给<Route>指定一个pa...转载 2018-09-05 16:59:57 · 1391 阅读 · 0 评论 -
dva 框架介绍
转自——https://www.jianshu.com/p/8b7def32740f dva 是基于 redux 最佳实践 实现的 framework,简化使用 redux 和 redux-saga 时很多繁杂的操作数据流向数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同...转载 2019-01-05 17:54:28 · 393 阅读 · 0 评论 -
10分钟了解JS堆、栈以及事件循环的概念
JS内存机制因为JavaScript具有自动垃圾回收机制,所以对于前端开发来说,内存空间并不是一个经常被提及的概念,很容易被大家忽视。特别是很多不专业的朋友在进入到前端之后,会对内存空间的认知比较模糊。在JS中,每一个数据都需要一个内存空间。内存空间又被分为两种,栈内存(stack)与堆内存(heap)。栈内存一般储存基础数据类型 Number String Null Undef...转载 2019-03-06 14:26:57 · 439 阅读 · 0 评论 -
JS同步与异步问题
转载自:https://segmentfault.com/a/1190000018717485一、JavaScript起源技术的出现,和应用场景密切相关的。JavaScript诞生于1995年。当时,它的主要目的是处理以前由服务器端语言(如Perl)负责的一些输入验证操作。在JavaScript问世之前,必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域,是否输入了无效的值。N...转载 2019-04-03 10:58:19 · 2302 阅读 · 0 评论 -
内网穿透之HTTP穿透使用
背景:微应用迁移由快捷链接开发模式到开发应用,需重新自建应用,填写符合规则(localhost、127.0.0.1服务不被允许)的首页地址、PC地址.文档地址:https://open-doc.dingtalk.com/microapp/kn6zg7/hb7000git下载工具包,内置Mac、windows工具,以windows为例,Mac参考官方即可。 启动工具,执行命令“./ding...原创 2019-06-19 17:58:36 · 2070 阅读 · 0 评论 -
基于Mac安装xcode进行虚拟机开发钉钉微应用
本文纯总结准备开发工具中遇到的一些问题以及解决方式:1、准备必要环境安装node、npm(会随node包一起安装)、git、建议再装下淘宝的镜像cnpm,命令:npm install -g cnpm --registry=https://registry.npm.taobao.org。可查看安装提示或者查看版本 --version 来确认成功安装;2、安装下载xcode,地址:ht...原创 2019-07-09 15:02:26 · 2525 阅读 · 5 评论 -
React中css的几种使用方式
以下方式仅供参考,适合自己项目的才是最好的!!一、行内样式使用import React from 'react'class Home extends React.Component { render() { return ( <div> <h3 style={{fontColor: 'green',marginTop:'5...原创 2019-08-07 15:33:24 · 1433 阅读 · 1 评论 -
react生命周期的基本用法
转载于:https://www.jianshu.com/p/c9bc994933d5首先,看一下一个组件的构造import React,{ Component } from 'react';class Demo extends Component { constructor(props,context) { super(props,context) ...转载 2018-06-28 10:13:01 · 1976 阅读 · 0 评论 -
Redux使用注意事项
转载于:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html 作者: 阮一峰一篇redux好文,附redux中文文档:http://www.redux.org.cn/React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。有两个方面,它没涉及。代码结构组件之间的通信对于大...转载 2018-06-26 09:25:38 · 731 阅读 · 0 评论 -
蚂蚁金服UI-Antd-design Mobile of React按需加载
import React from 'react';import ReactDOM from 'react-dom';// 由于 antd 组件的默认文案是英文,所以需要修改为中文import zhCN from 'antd/lib/locale-provider/zh_CN';import moment from 'moment';import 'moment/locale/zh-cn...原创 2018-06-25 11:38:18 · 4468 阅读 · 0 评论 -
JavaScript 日期选择器 Pikaday 的一些总结
做完一个关于公寓系统后,涉及到了日期选择组件的小东西,在这里抽空整理下,小白在此,前面大牛避让~~~首先:附上PikaDay的下载地址废话不多话,直接上干货。Pikaday是一款超轻量级的javascript日期选择器,并且支持模块化的CSS,可以帮助你更加简单的配置样式。目前虽然处于开发状态,但是看起来已经十分不错了。和重量级别的jQueryUI 日期选择器相比,Pika原创 2017-01-02 19:38:36 · 9572 阅读 · 2 评论 -
好用的数据highcharts中异步加载数据
未经允许,不得转载!!水平有限,写的不周之处欢迎指正、交流!!首先,Highcharts是什么呢?它是让数据可视化更简单,兼容IE6+、完美支持移动端、图表类型丰富、方便快捷的HTML5交互性图标库!HTML5:Highcharts 完全基于 HTML5 技术,不需要按照按照任何插件,也不需要配置 PHP、Java 等运行环境,只需要两个 JS 文件即可使用;丰富:Highchar原创 2017-01-11 13:00:11 · 8905 阅读 · 5 评论 -
Jquery中一款DataTimePicker日期选择器
未经允许,不得转载!水平有限,不周之处欢迎指正、交流!http://blog.csdn.net/ime33做日期选择的时候研究了下,前面说了一款javascript的pikaday日期插件,今天研究使用了下jquery的插件datatimepicker,总结下:附上官网效果图:demo:原创 2017-01-16 16:10:06 · 2393 阅读 · 0 评论 -
html5shiv为IE兼容html5利器
http://blog.csdn.net/ime33未经允许,不得转载!水平有限,不周之处欢迎指正、交流!!下载地址:http://html5shim.googlecode.com/svn/trunk/html5.js放置在页面的head头部位置使用(大小2.5K):当前技术革新之期,也是HTML5盛行的时候,我们在大力倡导HTML5新技术,其中包括它的原创 2017-02-09 11:31:44 · 1062 阅读 · 0 评论 -
Vue.js——60分钟快速入门
原文转载:http://www.cnblogs.com/keepfool/p/5619070.html现今流行的前端框架中,绕过MVC中控制器比较火的是:angular、react以及vue,这篇都是精华啊,转载收藏了!附官网:http://cn.vuejs.org/Vue.js——60分钟快速入门Vue.js是当下很火的一个JavaScript M转载 2017-02-10 10:57:10 · 589 阅读 · 0 评论 -
H5本地化存储
未经允许,不得转载!水平有限,欢迎指正、交流!!需求是:在一个页面中弹出一个广告,在用户第一次进入时弹出,在网站中再次进入该页面不再弹出!这里使用到的是H5的本地化sessionStorage存储。/* * @Author: [YXL] * @Date: 2017-03-22 13:28:07* @Last Modified by: [YXL] * @Las原创 2017-03-25 17:55:25 · 934 阅读 · 0 评论 -
sublime编辑VUE React TypeScript代码高亮方法
未经允许,不得转载!步骤:1、下载packages资源,链接vuehttps://github.com/vuejs/vue-syntax-highlightReact:https://github.com/babel/babel-sublime-snippetsTypeScript:https://github.com/microsoft/TypeScri...原创 2017-03-26 14:26:29 · 20297 阅读 · 0 评论 -
百度地图中绘制多个点例子
水平有限,欢迎指正、交流!! 百度地图中绘制多个点 *{padding: 0;margin: 0;font-family: "微软雅黑"} h3{width: 100%;height: 45px;line-height: 45px;background: #eee;color: #0原创 2017-04-21 14:35:22 · 5685 阅读 · 0 评论 -
渐进增强的 Web 体验(Progressive Web AMP)
原文地址:Progressive Web AMPs原文作者:Paul Bakaus译文出自:掘金翻译计划译者:L9m校对者:marcmoore,sqrthree如果你最近几个月一直关注着 Web 开发社区,可能你对渐进增强的 Web 应用(Progressive Web App 简称 PWA)已有所了解。它是应用体验能与原生应用媲美的 Web 应转载 2017-09-16 11:23:32 · 477 阅读 · 0 评论 -
WebAssembly,Web的新时代
原文:http://blog.csdn.net/zhangzq86/article/details/61195685在浏览器之争中,Chrome凭借JavaScript的卓越性能取得了市场主导地位,然而由于JavaScript的无类型特性,导致其运行时消耗大量的性能做为代价,这也是JavaScript的瓶颈之一。WebAssembly旨在解决这一问题。本文从WebAssembl转载 2017-09-16 11:40:57 · 574 阅读 · 0 评论 -
JS常用
一、运算符比较运算符:大于> 、 小于< 、 大于或等于>= 、 小于或等于 <= 、等于== 、 不等于!= 、绝对等===(值和类型全满足才等于)逻辑运算符:&& = and =与都满足为true; || = or = 或 满足其一即可 为true ; not 非条件运算符:三目运算 var val = condition ...原创 2017-09-25 10:13:03 · 303 阅读 · 0 评论 -
Promise使用笔记~~
至从ES6(ES2015)正式规范之后,Promise收到高度重视,一直没时间小结一波,今儿抽空整理下好东西Promise!基本所有浏览器都支持Promise,所以放心大胆使用!首先,控制台先打印下Promise是什么东西,如下图所示:Promise其实是一个构造函数,里面包含了很多行为方法(race,reject,resolve等),在prototype原型上then、catch等回调方法!使用...原创 2018-02-25 16:21:38 · 428 阅读 · 0 评论 -
基于钉钉平台采用Weex解决方案的Vue微应用项目搭建步骤
名词解释:Weex:Weex 是一套构建高性能,可扩展的原生应用跨平台解决方案;Vue:这个就很火了,尤雨溪大神搭建的一套框架;微应用:这是我们搭建在钉钉平台上的一个应用,可制作我们需要的功能,同时可以调用一些钉钉提供的开放接口以及js调用原生的SDK;创建微应用文档:https://open-doc.dingtalk.com/docs/doc.htm?spm=a219a.7629140.0.0....原创 2018-05-10 18:41:10 · 8910 阅读 · 1 评论 -
Mock构建测试数据
转载于:https://segmentfault.com/a/1190000010211622mock大法好mock是一个模拟数据生成器,旨在帮助前端独立于后端进行开发,帮助编写单元测试。mock有如下功能根据数据模板生成模板数据模拟ajax请求,生成请求数据基于html模板生成模拟数据下载安装npm install mockjs//使用mockvar Mock = require('mock...转载 2018-05-11 11:24:58 · 5427 阅读 · 0 评论 -
hosts文件被删除可以怎么办!
未经允许、不得转载!水平有限,不周之处,欢迎指正、交流!在使用phpstudy开发项目的时候,hosts指向突然没了,打开——其他选项菜单——打开hosts,发现空了,本地项目指向都没了!!在这说下我的几番折腾的法子:一、进入目录C:\Windows\System32\drivers\etc右击文本编辑器打开即可编辑,保存,这时有时候会提示用户没有权限进行保存操原创 2017-01-15 17:09:02 · 20808 阅读 · 1 评论