- 博客(366)
- 收藏
- 关注
RSS订阅转载 create-react-app craco进行webpack配置
如何在不通过npm run eject进行webpack配置呢？现在我们用craco配置来去进行webpack相关配置。 yarn add @craco/craco//或者 npm install @craco/craco --save在项目根目录新建craco.config.js文件修改package.json"scripts": { "start": "craco start", "build": "craco bui..
2021-12-15 23:25:46
2717
1
转载 vue+sentry 前端异常日志监控
敲代码最糟心不过遇到自己和测试的环境都OK， 客户使用有各种各样还复现不了的问题，被逼无奈只能走到这一步：前端异常日志监控!vue官方文档如下推荐：就是说， vue有错误机制处理errorHandler（错误机制处理也有errorCaptured），而Sentry利用这个钩子函数提供了集成。那接下来就是使用了， 首先我们点一下上图中的官方集成四个大字，来到了sentry官方文档（中关于VUE的文档）：https://sentry.io/for/vue/。Get Started！鉴
2021-08-04 17:48:38
2502
3
转载 sentry的搭建和使用
Sentry 简介（https://sentry.io）Sentry是一个开源应用程序监控平台，可帮助您实时识别问题。支持 web 前后端、移动应用以及游戏，支持 Python、OC、Java、Go、Node、Django、RoR 等主流编程语言和框架 ，还提供了 GitHub、Slack、Trello 等常见开发工具的集成。Sentry 服务支持多用户、多团队、多应用管理，每个应用都对应一个 PROJECT_ID，以及用于身份认证的 PUBLIC_KEY 和 SECRET_KEY。由此组成一个这样
2021-08-04 17:47:09
3229
转载 protobufjs
protobufjsprotobuf.js是一个纯JavaScript实现，支持Node.js和浏览器的TypeScript，它容易使用速度快速，可以直接反射.proto文件，不需要生成任何文件。protobuf.js是基于ByteBuffer.js的Protocol Buffers纯JavaScript实现，主要功能是解析.proto文件，构建Message类，编码解码。安装下载安装protobufjshttps://github.com/protobufjs/prot...
2021-05-20 10:39:58
5685
原创 yarn和npm的区别
https://blog.csdn.net/weixin_53430951/article/details/111132595
2021-05-20 10:31:00
85
转载 react-native-splash-screen集成实践（ios & android）
react-native在启动的时候会有瞬间的白屏出现，ios白屏时间会很短，安卓要相对长一些，大概1-3s时间。这是react-native的工作机制决定的。 react-native在启动时会装载js bundle到内存并渲染界面，这段时间界面是一个空View.上面的过程我们称之为项目的初始化，那么在这段项目初始化的过程中我们为了有更好的用户体验需要渲染一个对用户友好的界面来代替白屏，毕竟白屏对用户不太友好，你可以理解为跟h5中的loading是一个意思。然而配置原生的启动图不像我们加个loading
2021-04-21 11:53:36
1189
转载 exports、module.exports和export、export default到底是咋回事
前言难得有空，今天开始重新规范的学习一下node编程。但是引入模块我看到用require的方式，再联想到咱们的ES6各种export、export default。阿西吧，头都大了....头大完了，那我们坐下先理理他们的使用范围。require: node 和 es6 都支持的引入export / import: 只有es6 支持的导出引入module.exports / exports: 只有 node 支持的导出这一刻起，我觉得是时候要把它们之间的关系都给捋清楚了，不然我...
2021-02-23 16:04:12
389
转载 【前端适配】vw+rem自适应适配方案
先说好处：无需借助js，只用css就可以实现一定屏宽范围内元素大小随屏幕宽度改变平稳变化。再说用法：第一步：元素大小单位选用rem。第二步：根据设计稿的屏幕宽度设置html的font-size大小，且单位用vw。第三步：通过media query设置html根font-size的最大最小px值。以上就是把大象关冰箱的三个步...啊呸，是一定范围内适配任意屏幕宽度的三个步骤。例：假设设计稿是1200px的屏幕，第一二步的效果将是：1200px宽度的屏幕，html的font-size
2020-12-18 17:08:53
1973
2
转载 react-router-dom中link与Navlink
React Router 是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。目前react-router最新版本已经到4.0+，因为新的版本是一次非常大的改动，所以这里直接讨论4.0以上版本。引用react-router // React Router 核心react-router-dom // 用于 DOM 绑定的 React Routerreact-router-native // 用于 Re..
2020-12-14 12:01:32
1126
转载 react native开发Android 篇——Image动态加载图片
react native开发Android 篇——Image动态加载图片网络图片和base64 图片 本地图片网络图片和base64 图片import React, { Component } from 'react';export default class DaysScreen extends React.Component { render() { let urlHttp='https://facebook.github.io/react-native/docs/as.
2020-11-25 10:10:11
739
转载 ChatOps的前世，今生和未来
在人人都在讨论DevOps的今天，有一个词ChatOps显得比较突出，什么是ChatOps？它是怎么工作的？它能带来有什么好处？最近调研了一下ChatOps，本文将基于个人的理解，尝试回答这几个问题。起源ChatOps这个词在2013年出现，最初由GitHub提出，他们发现在日常的工作中，需要不停的运行以下命令:git checkout -b feature/xxx# do sth.git commit -m "Bump version"git push origin featur.
2020-11-22 23:07:43
6628
转载 关于this.setState()的那些事
在网上看了很多关于this.setState()的介绍，觉得受益匪浅，就总结了一些帮助自己理解的点，在此分享出来，如果有侵权的地方，请及时提醒。一、State的定义状态（state） 和 属性（props） 类似，都是一个组件所需要的一些数据集合，但是它是私有的，并且由组件本身完全控制，可以认为它是组件的“私有属性（或者是局部属性）”。二、关于 setState() 有三件事是你应该知道的。# 参考链接1.不要直接修改 state(状态)this.state.comment = .
2020-11-13 09:47:18
359
转载 react-navigation使用技巧（再进阶）
本文是基于最新的react-navigation^3.x来书写的。以下15条，在我开源的识兔中，都是可以找到实例的，欢迎参考，欢迎star前言关于react-navigation的文章，这已经是第三篇了，这个库从最初的beta版到最新的2.x版本，更新频率是很快的，这个库也越来越完善，很多1.x的技巧已经完全不适用于新的版本，然而群里每天又有很多人再问，为了解(jiao)决(yu)这个问题，所以，动手写了这篇文章。更新版本到react-navigation3.x！因为react-n.
2020-11-03 15:10:04
630
转载 Immutable 详解及 React 中实践
Shared mutable state is the root of all evil（共享的可变状态是万恶之源）-- Pete Hunt有人说 Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明，因为同期 React 太火，它的光芒被掩盖了。这些至少说明 Immutable 是很有价值的，下面我们来一探究竟。JavaScript 中的对象一般是可变的（Mutable），因为使用了引用赋值，新的对...
2020-11-02 14:02:04
351
转载 React Native - 调试技巧及调试菜单说明（模拟器调试、真机调试）
React Native - 调试技巧及调试菜单说明（模拟器调试、真机调试）一、模拟器调试我们在ios模拟器上按快捷键command + D，安卓模拟器上按快捷⌘ + m，即可弹出如下调试菜单。下面分别介绍菜单中的各个调试功能。1，Reload刷新页面，其快捷键是（iOS） command + R/（安卓）两按R键。注意：只有修改JavaScript文件时，刷新功能才起作用。如果新增了文件或者修改了Native代码，就需要使用Xcode重新编译应用了。2，De...
2020-10-25 22:31:35
3557
转载 React-Native 脚手架的基本使用
构建项目在相应的路径下执行命令行：react-native init 项目名(名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook) react-native --v //查看版本react-native init demo --version 0.48.0//安装指定的版本react-native init demo --verbose --version 0.48.0 //verbose是初始化的时候显示安装详情的，安装什么模块以及进度npm view r.
2020-10-25 20:57:18
1518
转载 精读《Function VS Class 组件》
1. 引言为什么要了解 Function 写法的组件呢？因为它正在变得越来越重要。那么 React 中Function Component 与 Class Component 有何不同？how-are-function-components-different-from-classes这篇文章带来了一个独特的视角。顺带一提，以后会用 Function Component 代替 Stateless Component 的说法，原因是：自从 Hooks 出现，函数式组件功能在不断丰富，函数..
2020-10-20 12:00:22
241
转载 简单易懂的 React useState() Hook 指南
状态是隐藏在组件中的信息，组件可以在父组件不知道的情况下修改其状态。我更偏爱函数组件，因为它们足够简单，要使函数组件具有状态管理，可以useState()Hook。本文会逐步讲解如何使用useState()Hook。此外，还会介绍一些常见useState()坑。1.使用 `useState()` 进行状态管理无状态的函数组件没有状态，如下所示(部分代码)：可以找 codesandbox 尝试一下。运行效果：这时，要如何添加一个按钮来打开/关闭灯泡呢？为此，咱们需要具有状...
2020-10-19 17:20:02
344
转载 React-navigation使用攻略
源码在此 仅供参考一、简介根据React Navigation官网文档描述：Learn once, navigate anywhere.React Navigation的诞生，源于React Native社区对基于Javascript的可扩展且使用简单的导航解决方案的需求。React Navigation是Facebook，Expo和React社区的开发者们合作的结果：它取代并改进了React Native生态系统中的多个导航库，其中包括Ex-Navigation，React Native的N
2020-10-19 10:55:47
1207
转载 webrtc可以做直播吗
引言webrtc是一种免费开源的实时通信技术，集成了音视频采集、编解码、流媒体传输、渲染等功能，并在Native代码基础上，封装了简单的JavaScript api，仅通过几行代码即可实现点对点通信，且具有良好的跨平台特性，目前主流的浏览器都已支持。基本概念SDP： 即会话描述协议，主要保存当前会话的媒体和传输信息，其中媒体信息包括媒体类型、传输协议、媒体格式等，传输信息包括媒体的远程地址信息、带宽等；它由多行kv格式的文本信息组成，具体可参考这里。（https://tools.ietf...
2020-05-17 23:11:00
1639
1
转载 WebRTC简介
引言最近一段时间的主要工作内容是开发一个远程控制手机的功能，其中使用到的一个关键技术就是WebRTC，在此准备分享一下我对这个技术的理解。什么是WebRTCWebRTC是一个由Google发起的实时通讯解决方案，其中包含视频音频采集，编解码，数据传输，音视频展示等功能，我们可以通过技术快速地构建出一个音视频通讯应用。 虽然其名为WebRTC，但是实际上它不光支持Web之间的音视频通讯，还支持Android以及IOS端，此外由于该项目是开源的，我们也可以通过编译C++代码，从而达到全平台的互通。
2020-05-17 20:51:41
1631
原创 基于indexDB的Dexie数据库
https://blog.csdn.net/qq_36587420/article/details/105058830?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-4&utm_source=distribute.pc_relevant.none-task-blog-BlogCom...
2020-04-21 17:12:48
794
转载 JS数组reduce()方法详解及高级技巧
reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很多，但是总有一条路是最捷径的，亦或许reduce()逼格更高...1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依...
2020-04-05 22:17:17
208
转载 React Router V4 精讲
一、前端路由和后端路由1)后端路由多页应用中，一个URL对应一个HTML页面，一个Web应用包含很多HTML页面，在多页应用中，页面路由控制由服务器端负责，这种路由方式称为后端路由。多页应用中,每次页面切换都需要向服务器发送一次请求，页面使用到的静态资源也需要重新加载，存在一定的浪费。而且，页面的整体刷新对用户体验也有影响，因为不同页面间往往存在共同的部分，例如导航栏、侧边栏等，页面整...
2019-12-15 23:10:51
231
转载 require('./expample.js).default详解
最近总碰到类似于var a = require('./expample.js).default这样的代码，感觉很奇葩，总结一波。为什么会出现这个问题?import是静态编译的，而require可以动态加载，也就是说你可以通过判断条件来决定什么时候去require，而import则不行，所以有时候我们会面临需要通过require去导入一个es6模块（比如rea...
2019-12-15 19:59:14
1590
1
转载 彻底搞清楚javascript中的require、import和export
为什么有模块概念理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，在es6以前，它是不支持”类”（class），所以也就没有”模块”（module）了。require时代Javascript社区做了很多努力，在现有的运行环境中，实现”模块”的效果。原始写法模块就是实现特定功能的一组方法。只要把不...
2019-12-15 18:59:46
205
转载 react-hot-loader 的配置【局部刷新】--{create-react-app}
安装1.安装create-react-appnpm install -g create-react-app2.创建项目create-react-app my-app配置1.弹出配置文件npm run eject2.安装React Hot Loadernpm install --save-dev react-hot-loader@next3.添加babe...
2019-12-15 18:06:38
679
转载 React生命周期函数
/*https://reactjs.org/docs/react-component.htmlReact生命周期函数： 组件加载之前，组件加载完成，以及组件更新数据，组件销毁。 触发的一系列的方法 ，这就是组件的生命周期函数组件加载的时候触发的函数： constructor 、componentWillMount、 render 、componentD...
2019-12-12 14:07:15
85
转载 React生命周期执行顺序详解
一、组件生命周期的执行次数是什么样子的？？？只执行一次： constructor、componentWillMount、componentDidMount执行多次：render 、子组件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate有条件的执行：componentWillUnmount（页面离...
2019-12-12 14:06:18
427
转载 用 async/await 来处理异步
昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，也是需要学习一下了。 先说一下async的用法，它作为一个关键字放到函数前面，async function timeout() { return 'hello world';} 只有一个作用, 它的调用会返回一个promise对...
2019-11-11 23:56:00
300
转载 webpack之proxyTable设置跨域
为什么要使用proxyTable很简单，两个字，跨域。 在平时项目的开发环境中，经常会遇到跨域的问题，尤其是使用vue-cli这种脚手架工具开发时，由于项目本身启动本地服务是需要占用一个端口的，所以必然会产生跨域的问题。当然跨域有多种解决方式，这里就不一一例举，下次弄篇文章单独讲，在使用webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。如何使用pro...
2019-08-27 19:49:33
195
转载 为什么给html标签定义了id，就可以在js中（浏览器环境）直接通过id引用这个dom元素？
问题只要标签有id这个属性，不使用getElementById方法，也可以直接用id获取dom元素。解惑经过一波搜索及查资料，原因大概是：如果dom元素的id名称不和js内置属性或全局变量重名的话，该名称自动成为window对象的属性，所以可以直接用来操作dom。看网上的说法是，这个是IE首先支持，火狐谷歌后面才支持的。不过现在还未形成标准，为了保险，还是不用的好。不过看各大浏览器都支持，...
2019-08-09 11:01:26
657
转载 jquery的height()和javascript的height总结，js获取屏幕高度
jquery的各种高度首先来说一说$(document)和$(window)，如下：$(document).height();//整个网页的高度$(window).height();//浏览器可视窗口的高度$(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）用一句话理解就是：当网页滚动条拉到最低端时，$(document).hei...
2019-08-09 10:35:07
805
转载 css input checkbox和radio样式美化
在之前的一篇文章中，我已经介绍了input file上传按钮的美化，地址：http://www.haorooms.com/post/css_input_uploadmh,今天，我们来讲一下checkbox美化和radio美化，关于select下拉框的美化的话，要用一个jquery插件了，这个插件后面我们再讲！急用的同学可以留言！ 但是像checkbox美化和radio美化，input美化，根本就...
2019-07-28 12:56:12
923
转载 html-javascript前端页面刷新重载的方法汇总
一、javascript页面刷新重载的方法：<a href="javascript:location.reload();">点击重新载入页面</a><a href="javascript:history.go(0);">点击重新载入页面</a><a href="javascript:location=location;">...
2019-07-28 12:41:18
1472
转载 javascript，jquery日期插件_比较好用的日期插件
网上有很多日期插件，jqueryUI也自带的日期插件，jqueryeasyui也有日期插件，等等五花八门，当然，简单期间，你可以运用那些日期插件。本文介绍两款相对比较好用的日期插件。声明：本插件非本人所写，来源于网络。首先，一款是完整显示年月日的插件。如下图：这款插件很好用，API文档请看：http://www.haorooms.com/uploads/example/datatr...
2019-07-28 12:37:40
342
1
转载 CSS选中状态修改，谷歌滚动轴修改
1、滚动轴美化，一下代码是针对谷歌中滚动轴的设置美化，把它加到你的css中就可以了，代码如下：::-webkit-scrollbar{ padding-left:1px; background-color:#fafafa; overflow:visible; width:9px;}::-webkit-scrollbar-thumb{ backgro...
2019-07-28 12:32:19
103
转载 css常用效果总结
css有不少常用的效果，你在平时浏览网站的时候可能会看到，但是真的要自己写的时候，有时候会突然忘记，今天稍微对那些常见的效果做一下小结。1、每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是css的filter功能。代码如下：html { filter: grayscale(100%);//IE浏览器 -webkit-filter: g...
2019-07-28 12:30:47
289
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人