- 博客(210)
- 资源 (41)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 webpack 配置介绍
development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异，通过 webpack-merge 可以将基础的配置抽象到 webpack.base.js 中，开发环境和线上环境分别使用 webpack.dev.js 和 webpack.prod.js，然后 merge（webpack.base.js）即可。该功能在打包模式为production时，默认开启，在打包时候回检测是否有标识，有副作用，没有副作用在打包时候不会参与打包。当超过150KB 建议使用。
2023-03-28 11:09:41
1233
原创 iframe和跨域
如上服务端配置 header 中 Web端的域名，*表示全部通过，也可以指定固定域名。这样，Web 端访问时候就可正常打开指定的域名了，否则会出现跨域问题。服务器中转跨域，script 标签没有跨域限制，可以使用script 标签加载不同的 src，解决跨域问题。在生产环境 nginx 代理，项目 config.js配置。5、postMessage+iframe：不常用，漏洞大，xss 攻击，兼容性差。同源是指：协议+域名+端口完全一致。2、获取嵌套的iframe的上次层window。
2023-03-24 10:34:47
2157
原创 Android项目接入React Native方案
本篇文章主要介绍在现有的Android项目中接入React Native的接入过程，分析接入过程中的一些问题和解决方案，接入RN的平台为Android，开发环境为Mac，开发工具为Android Studio。
2023-01-18 15:09:31
5837
1
原创 dom 小知识总结
6、window.getComputedStyle(element,null).props：获取css的style对象，后面可以跟具体值属性。是有第二个参数的，第二个参数是修改this 的指向的，如果传递的不是对象，会强制转为包装类对象，如果不传，指向 window。5、nodeType：节点编号，可以使用该编号过滤node节点生成有效的元素节点。包含所以的节点，包含：注释节点，换行的文本节点等无效的内容。1、nodeName：获取节点的名称，只读。2、nodeValue：获取节点的值，可写。
2023-01-17 14:50:08
543
原创 js函数之call和apply
可以看出改变了this 的指向，和apply的区别是后面是一个数组，其他没啥区别，均可以改变this 指向Car.apply(newCar, ['兰博基尼', 'red'])。结果一致，调用test()默认会调用call，二者效果一致，call省略掉了。call还有一个很重要的功能是改变this的指向。Car.call(newCar, '兰博基尼', 'red')//参数1：对象，参数2，3，4……"brand": "兰博基尼",
2023-01-01 14:06:44
504
原创 作用域、闭包、立即执行函数
一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行完毕，执行上下文被销毁。如上，函数test是全局作用域，函数内部的 a，b 则是局部作用域，当在外界调用时候内部时候，a 或者 b 执行结束直接被释放掉。在函数内部定义的函数、变量等，被叫做局部作用域，局部作用域的数据的生命周期在该函数执行完以后就被释放。如上，函数test，变量 a 就是全局作用域，在全局生效，不会被销毁，除非程序结束。
2022-12-28 17:49:01
192
原创 H5中常见的 Android 和 iOS 兼容性问题
最好在代码中不要主动focus()，可能会在真机上引起页面布局被iOS 软键盘顶上去，而Android、Google、Safair 中则正常。
2022-10-24 13:16:41
2395
原创 React实现优雅的弹窗
实现弹窗的原理关键在于,如何将弹窗组件挂载到任意的dom上，参考weui.js，提供了思路，可以通过append将元素添加到指定的父节点上，来实现弹窗的显示，隐藏的时候在移除该元素即可，如下示例：在react同样可以使用该思路来实现，弹窗的显示和隐藏。
2022-09-13 11:35:57
5892
原创 useEffect、useMemo、useCallback使用场景分析
getName()会在每次组件渲染的时候执行dom，尽管name没有变化，我们需要让name变化的时候才渲染dom，否则保持原有的数据，这时候就用到了useMemo。
2022-08-20 21:18:54
3782
1
原创 常用hooks总结
1、useEffact参考：https://www.cnblogs.com/guanghe/p/14178482.html2、useState作用：更新变量，触发render。const [loading, setLoading] = useState(true);当loading变化时候会触发render。3、useMemo作用：解决hooks会触发多次无用的渲染问题。如果useMemo(fn, arr)第二个参数匹配，并且其值发生改变，才会多次执行执行，否则只执行一次，如
2022-07-25 08:50:18
2035
2
原创 CSS像素单位
整个屏幕的一个像素点。当默认值改了，基准值也会跟着改，尺寸是基于父元素的设置的值改变的：会导致内层的字体越来越大，实用性不强。五、calc动态计算大小，例如下面动态填满一屏。height: calc(100vh - 6rem);表示banner的高度为上面整屏高度减去nav的高度。注意：运算符前后需要有空格，calc(100vh-6rem)这样写错误。...
2022-07-09 10:05:58
1123
原创 CSS的margin失效、塌陷和兼容问题
在标准文档流中，竖直方向的margin不叠加，以较大的为准，水平方向不影响，可以叠加。注意是标准文档流，不是标准文档流不存在塌陷现象。 要想使p的margin生效，需要给父布局的div添加border，否则margin无效。margin表示兄弟和兄弟之间的距离，最好不要使用margin表示父子之间的距离，要善于使用padding。四、margin的IE6兼容问题1、margin双倍问题 浮动方向和margin方向相反，左浮动+右margin2、IE6的三像素
2022-07-06 21:20:37
2053
原创 CSS实现图片实现正方形的效果
设置css属性高度等于宽度、或者宽度等于高度。 postcss-aspect-ratio-polyfill - npmCSS属性之aspect-ratio - 掘金
2022-07-03 15:27:23
1217
原创 CSS定位
不脱离标准流 相对自己原来的位置移动，形影分离，本质上真实的位置还在原来的位置，设置margin还是原来位置的margin，移动后的位置是其影子，视觉效果上是移动了。1、相对定位有压盖效果，一般不用作『压盖效果』，作用就两个：2、定位： 脱离标准流 1、绝对定位和原来的自己的位置没有任何关系2、定位3、子绝父相 儿子绝对定位，父亲相对定位： 儿子设置绝对定位，儿子就跑到父div里面去了。否则会在父布局外面，如果有多个父布局设置
2022-07-03 14:34:03
663
1
原创 CSS盒模型、标准文档流、浮动
无论是div、span、a都是盒子，一个图片、表单元素一律看做文本看待。使用浮动浮动的性质：效果：原因是div没有高度，不能给孩子一个高度，要清除浮动，需要给父元素设置高度。 给父元素的div添加固定高度。 现实开发中高度很少出现，因为父布局会被内容撑高，很多没有高度设置。 子类div自己添加clear:both。clear:both：清除左右浮动对自己的影响，这种方式有一个问题，margin失效。两个div之间没有任何间隙了，设置margin属性不生效。 在box1和box2之前插入一个
2022-06-17 20:33:47
281
原创 CSS的继承性和层叠式
color、text-开头的、line-开头的，font-开头的这些关于文字样式的，都可以继承；所有的盒子的、定位的、布局属性都不能继承。多个选择器同时作用在同一个元素上时候，看权重，那个高，最后显示那个，优先级从高到低分别是：先比较ID选择器数量，在比较类选择器数量，最后比较标签选择器数量最后显示的绿色，因为ID选择器数量优先级高，所以以2为准了，如果都一样，谁写在后面，谁的生效。如果不能直接选中某个元素权重是0，如通过继承而来的权重是0，开始数权重之前一定要看看是不是真的选中文字所在的最内层的标签，没选
2022-06-11 11:18:39
820
1
原创 Google浏览器调试技巧
1、复制控制台输出的对象获取对象名称，然后输入copy函数，对象名称作为函数参数，然后回车，再粘贴。2、一键展开所有DOM元素鼠标光标放在箭头处，按住option，然后点击鼠标，这样div等全都展开了。或者右键选择expand recursively：3、网络请求重复请求一次network-->Fetch/XHR-->选择要请求的网络-->右键-->选择Reply XHR4、查看页面布局添加书签-->名称随便起一个，网址填写：..
2022-06-10 19:45:47
1519
2
原创 React路由6.0
上次介绍了react路由5.0的一些用法，这次介绍最新的路由6.0用法，相比5.0变化还不少。路由5.0：https://blog.youkuaiyun.com/yoonerloop/article/details/124070341ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('roo......
2022-06-08 22:15:45
751
原创 css常用选择器
CSS常用选择介绍三、类选择器-可以重复1、单个class2、多个class（1）情况一只有class同时匹配到.aa.bb才显示红色，中间不能有空格（2）情况二aa下面的bb会匹配到，中间要有空格。 表示class为.aa的后代p变成红色，即喔喔1变成红色，中间使用空格，如果有多个应使用多个额空格隔开：.aa .xx h3 { } 后代选择器不需要选择每一个节点，只需要选择关键的几个节点就可以达到效果。这样上面的两个全是红色的了....
2022-06-01 09:38:13
894
原创 ref使用详解
一、字符串形式的ref（官方已过时）ref可以理解成打一个标识，类似于一个id，最终会收集到this对象的refs里面。<input ref='input1' type='text' placeholder='输入内容点击按钮' /><button onClick={this.showData}>点我提示</button><input ref='input2' onBlur={this.showData2} type='text' pl...
2022-05-25 20:24:41
4871
原创 listTodo项目二次练习
通过该项目熟悉，react的事件绑定、父子之间的数据传递，和分模块设计的理念，没有涉及到太多的东西，相比上次知识点用的比较少，但是更加注重细节和规范，显示效果如下：项目结构如下： 项目划分一个入口，四大组件分别：顶部的输入框、中间的list，list显示的item以及底部的footer，下面分别介绍。一、package.json{ "name": "my-app2", "version": "0.1.0", "private...
2022-05-17 20:12:54
374
原创 redux使用详解
一个状态管理的JS库，用于数据的共享。结构如下：安装：yarn add redux一、简化版的redux1、src/reducer/store.js//引入createStoreimport {createStore} from 'redux'//引入服务的reducerimport reducer from "./reducer";export default createStore(reducer)2、src/reducer/reducer.j...
2022-05-01 16:12:40
1556
原创 React中的路由
react推出了react-router的路由管理插件，实现了路由的核心功能，分别给web、reactnative、anywhere三个平台。 基于react-router实现的react-router-dom是给web端使用的路由，加入了在浏览器运行环境下的一些功能，核心基于history实现，分位hash路由和h5路由，其中h5路由兼容性有点差，需要后端支持，hash路由兼容行非常好，不需要后端支持。本博客介绍react路由基于react-router-dom@5.3.0，v6.0有所变化。一、路由
2022-04-23 13:19:30
1909
原创 React中表单数据提交获取数据的几种写法
一、非受控组件即：先用现取数据class MyComponent extends React.Component { render() { return ( <div> <form onSubmit={this.handleSubmit}> 用户名：<input ref={(e) => this.username = e} type='tex
2022-04-09 23:05:56
6952
1
原创 React脚手架结构介绍
Create React App 是一个官方支持的创建 React 单页应用程序的方法，如下：npx create-react-app my-appcd my-appnpm start结构如下：一、public文件夹 该文件是react项目的入口文件：<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"...
2022-04-04 11:49:41
1269
原创 React中this指向问题
render() { return ( <div> <h1>{this.state.data}</h1> <button onClick={this.click1}>测试1</button> </div> )}click1() { this.setState({ data:'click1' })}像这.
2022-04-04 09:45:12
527
原创 React 使用webpack打包
一、项目创建1、新建一个项目文件夹，打开终端，切换到到项目目录下：npm init -y这时候使用webstorm等高级的编辑器打开项目执行下面步骤效果会更直观。2、新建一个文件夹public，在文件夹内创建index.html文件，添加：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title
2022-03-27 11:15:15
6384
2
原创 JavaScript的对象访问机制
当你访问一个对象的成员的时候，如果对象自己本身具有，会直接返回给你，停止查询，如果对象自己本身没有，会自动去_proto_上访问，如果有就给你返回结果，停止查询。一、_proto_和prototype的区别proto是实例对象用来直接访问构造函数的属性，prototype是函数对象的原型属性。如下： function App(){ }App.prototype和new App().proto结果一致，new App().proto指向App....
2022-03-20 11:32:01
1166
原创 TypeScript语法学习
一、基本数据类型let b: boolean;b = true;//b = 3 //报错console.log(b);let num: number;num = 10;//num = false; //报错console.log(num);let st: string;st = '555'st = "yyy"console.log(st);二、数组//数组let arr: number[] = [1, 2, 3, 4]let arr2: string[] =
2022-03-20 10:33:08
988
原创 Kotlin函数参数
一、无参数的函数参数1、回调//定义interface OnClickListener { fun onClick()}private fun setOnClickListener(listener: OnClickListener) {}//使用setOnClickListener(object : OnClickListener { override fun onClick() { }})2、闭包//定义private fun setO
2022-03-13 13:22:34
2664
原创 Kotlin回调函数转协程
调函数转协程通常使用两个协程相关的类：suspendCancellableCoroutine和suspendCoroutine，前者可以通过cancel()方法手动取消协程的执行，而suspendCoroutine没有该方法，调用cancel()后协程不再往下执行，抛出 CancellationException 异常，但是程序不会崩溃，这样会更加安全，通常推荐使用suspendCancellableCoroutine。一、原始的回调方法interface OnClickListe...
2022-03-08 21:48:43
1339
原创 Android 配置https抓包
在Android中抓包常用fidder或者Charles，http可以直接抓去到请求信息，https抓取不到，如下：下面介绍两种抓包方案，可以轻松的获取请求的信息。一、使用用户证书1、application中android:networkSecurityConfig="@xml/network_security_config"android:usesCleartextTraffic="true"2、res/xml新建network_security_config：&l
2022-03-02 21:58:31
3129
原创 Flutter AppBar统一样式抽取
为了便于App的管理，统一主题风格，需要统一自定义标题栏和状态栏，效果如下：一、页面使用void main() { //定义状态栏 if (Platform.isAndroid) { SystemUiOverlayStyle _style = const SystemUiOverlayStyle( statusBarColor: Colors.transparent, //设置状态栏背景颜色 //statusBarIconBrightne...
2022-02-27 09:11:49
2631
原创 Flutter实现一个自定义的弹窗
标题、内容、取消，确认按钮都可以自定义，颜色也支持自定义，可以监听点击事件，运用的知识就是前面总结的flutter知识点的综合运用，效果如下。直接上代码：import 'package:flutter/material.dart';class AppDialog extends Dialog { final String title; final String? confirm; final String? cancel; final Str...
2022-02-24 22:24:12
4404
5
原创 Flutter中的点击事件和回调
不同于Android中所有的View可以通过设置点击setOnClickListener { }方法，在Flutter有些widget是不支持直接添加onPress事件的，用法和原生区别很大，列举了常用两种方式。一、InkWellInkWell中点击事件分为来管理点击回调和水波动画。onTap: () // 单击onDoubleTap: () // 双击onLongPress: ()// 长按InkWell( onTap: (){}, child: Cont
2022-02-22 21:32:35
5222
原创 Flutter自定义加载中的Loading
一、定义class YmDialog extends Dialog { final String title; const YmDialog(this.title, {Key? key}) : super(key: key); @override Widget build(BuildContext context) { // TODO: implement build return Center( //创建透明层 child: Mater..
2022-02-21 21:33:40
3173
Android模块化开发Demo
2018-07-14
BuliderDemo
2018-02-28
AccountManager账号管理
2017-11-23
AndroidJSBridgeDemo
2017-09-20
fidder抓包工具免费版
2017-09-19
TopBaseActivity
2017-06-05
RefreshRecycleView
2017-02-16
ffmpeg-x264-fdk-aac-armv8-a.zip
2021-08-08
ffmpeg-armv8-a.zip
2021-08-08
ffmpeg-4.3.1.zip
2021-03-08
FlowLayoutDemo
2019-01-23
TA创建的收藏夹 TA关注的收藏夹
TA关注的人