- 博客(22)
- 收藏
- 关注
RSS订阅原创 20240622 - Latex 目录修改记录：使用 titletoc 宏包 修改目录中的标题格式
使用 titletoc 宏包进行目录格式定制。
2024-06-22 15:42:08
250
原创 RSS Fever API 服务搭建避坑指南（FreshRSS + Fluent Reader, 2024年最新可用教程）
把订阅源链接中的 rsshub.app 替换成其他 URL，其中一些 URL 是无需访问外网的。由此，容器成功启动，转到 服务器IP:8080 进行网页端的 FreshRSS 阅读器配置。目前我没能解决这个问题，如果你能解决，推荐使用 TTRSS 并移步至对应教程。这是一款渐进式Web应用程序，它能够在多端满足上述需求，注册即可使用。作为一份避坑指南，直接使用 QiReader 是最快捷的方案，
2024-03-22 21:37:05
6806
原创 CSS - BFC相关问题的演示
BFCBFC产生的一系列问题一直是初学者感到困惑的地方，本文就不对BFC进行阐述了，相关的文章和书籍解释得都很详细。我把常见的几种情况做了一个汇总演示，点击按钮即可看到结果，你也可以打开开发者工具查看样式的改变情况。演示地址http://cyanzll.gitee.io/bfcdemo/...
2020-06-20 16:00:11
145
原创 JS基础拾遗 - RegExp 类型及其使用
RegExp类型这里只介绍常用的属性和方法定义// 字面量var pattern = / 模式 /标志;// 或 构造函数var pattern = new RegExp ("模式", "标志";)标志：g: 全局匹配，不会匹配到第一个就停止；i: 匹配时忽略模式和正则表达式的大小写m: 多行模式，到达一行文本末尾时仍查找下一行两种定义方式的区别：第二种方式，传入的模式是字符串的形式，这个字符串中所有的元字符必须双重转义：[外链图片转存失败,源站可能有防盗链机制,建议将图片保
2020-06-18 14:15:30
242
原创 JS基础拾遗 - 实现拷贝和深拷贝
对象的浅拷贝Object.assign(target, source)Object.assign() 是 ES6 新增的方法，它把可枚举属性的值从一个/多个源对象复制到目标对象，然后返回目标对象。这个描述需要注意：源对象可能不止一个，且对源对象不产生任何副作用。Demo1：Object.assign() 执行的是浅拷贝，对于引用类型的属性，仅仅是复制它的引用值。"use strict";var obj = { a: "myname", b: 13, c: { name: "
2020-06-18 14:14:10
139
原创 JS基础拾遗 - 栈内存和堆内存
基本数据类型和引用数据类型要准确把握JS中基本数据类型（number, string, null, undefined, boolean）和引用类型（Object）的区别，就要对栈内存和堆内存的区别有一定理解。栈内存：按值存放，空间大小确定，系统自动释放，可以直接访问，存取快；堆内存：大小不定，不会自动释放，存取较慢；基本数据类型的值存储于栈内存中，而引用数据类型的值则存储于堆内存；基本数据类型和栈内存（Stack）按值存放由于栈内存是按值存放的，因此赋值操作都会开辟一个新的内存空间，比如
2020-06-18 00:08:08
198
原创 JS基础拾遗 - 3 - 操作符
二元 + 操作符在字符串处理上的区别++、-- 和 一元 + - 在遇到字符串时，都是调用Number()进行转型，结果很可能是 NaN。 只有二元 + 操作符才可以实现字符串拼接。可以说：字符串拼接是二元 + 操作符独有的。&& 和 ||逻辑非（!）操作符返回值肯定是布尔值，但 && 和 || 则不一定（重要）：如果有一个操作数不是对象，它们不一定返回布尔值。求值的过程，会自动调用 Boolean() 进行转型&& ：如果有一个操作数是 n
2020-06-16 15:59:08
113
原创 JS基础拾遗 - 2 - 变量
变量类型6种基本类型变量（简单类型变量）numberstringbooleanundefinednullsymbol (ES6 新增)一种引用类型变量 （复杂类型变量）objecttypeof 操作符typeof 操作符返回的值是字符串（完全小写）typeof 操作符的返回值typeof null === “object”历史遗留问题，可以认为是一个老bugtypeof ()=>{} === “function”可以借此区分 function 和其他对象typeof
2020-06-16 10:47:45
131
原创 JS基础拾遗 - HTML 中的 script 元素
属性src可选，值为外部执行文件路径；如果通过src引入了外部脚本，标签之间就不应该包含js代码，即使包含了也会被忽略；src属性可以直接加载和解析外部的代码，这是JSONP实现的基础。引入外部脚本的好处：提高可维护性可以缓存，减少脚本下载的次数，加快页面加载速度type可选，如果不指定该属性，默认值为 text/javascript只对外部文件有效的属性deferdefer = “defer”脚本延迟到HTML文档完全解析后才执行；补充事件：DOMContentLoa
2020-06-15 12:07:28
193
原创 JavaScript基础 - 手写节流和防抖函数
节流和防抖，都是为了降低请求频率，减少不必要的损耗。原则：既要实现节流和防抖的功能，还要保证不对事件处理函数本身的执行上下文产生影响。防抖 (debounce)短时间大量触发同一事件，只执行一次函数，实现延迟执行。具体实现：每次触发一个事件（比如点击按钮），都重新开始计时（重新设置计时器），直到xx毫秒内没有下一次操作，才执行这个事件的处理程序。v0:function debounce(fn) { return function() { setTimeout(() =
2020-06-10 18:51:21
541
原创 从 history 开始学习 React Router
historyhistory 是 Facebook 的JavaScript库，用于管理会话历史，React Router是基于history实现的。history 包含了 window.history ( HTML5 History API )history 有以下方法：block在地址栏改变之前，告知地址栏改变即将发生createHref返回当前路径名listener监听地址栏改变，用于地址改变前截取以下方法用于跳转：goBack返回上一条历史记录goForward
2020-06-09 16:17:50
215
原创 记录一次React跨域问题的解决
前两天同学做了一个登陆功能的API，放置在他的服务器上。我想在本地对接一下，就涉及到跨域问题。跨域（Cross Origin）跨域问题源自Web的跨源安全策略（同源策略）。默认情况下XHR对象只能访问同源的资源，这里的“同源”包括：协议（Protocol）相同端口（Port）相同主机（Host）相同协议 主机 端口http://store.company.com:81/这样的策略可以保证安全性，但给开发者造成了一定麻烦。解决该问题的根本方法是CORS（跨院资源
2020-06-02 15:29:30
1198
原创 React 代码分割 & loading 页面的实现
React.lazy 和 Suspenseconst Component = React.lazy(() => import('./Component));React.lazy函数可以实现动态引入组件，它会在组件首次渲染时，自动导入Component。渲染lazy组件需要借助Suspense组件，它有一个fallback属性，可以传入在加载过程中想要展示的元素。Suspence可以放置在懒加载组件之上的任何位置。在路由进行代码分割原先页面加载时，默认会把路由上的所有组件一起加载过来（比如
2020-06-02 15:24:43
417
原创 用React.memo API解决函数组件多余渲染的问题
引入学习Hook之后，我了解到useEffect()一般是在组件渲染之后执行的（当然也可以传入依赖列表来跳过Effect），所以能够起到class组件生命周期方法：componentDidMount()、componentDidUpdate() 和 componentWillUnmount() 的作用，但我没有找到shouldComponentUpdate()的替代方案。经过官网API文档，我得知React.memo API能够起到类似的效果。React.memoReact.memo 是高阶组
2020-06-02 15:23:14
444
原创 React - 组合特性解读
React 组合特性在React中实现代码复用，常常使用组合模式，而不是继承模式。下面通过简单的例子来说明：现在有个写好了的通用边框组件，对话框中要用到它。但是对于不同的对话框，边框展示的内容也是不相同的，比如在Welcome对话框中，我们希望边框显示一些welcome有关的信息（比如欢迎标题等），要怎么处理呢？这里有很明显的包含关系，即对话框包含了边框组件，因此可以使用这样的组合方式：//子：可复用的边框组件function FancyBorder(props) { return (
2020-06-02 15:21:34
204
原创 Redux - Reducer 纯函数和拆分
1. Reducer的纯函数原则和时间旅行Reducer一定要是纯函数，所谓纯函数，即就是只要函数的调用参数相同，就永远返回相同的结果。一个纯函数，它返回的结果往往是可以根据参数精确预测的。要实现纯函数，只要做到：不修改入参不执行有副作用的操作（修改函数之外的其他变量、API调用等）不调用其他非纯函数（Date.now()）保证纯函数的原则，则每当我们dispatch一个相同的action，且初状态相同，则总是能得到一个相同的结果（状态变化），因此可以实现redux的时间旅行功能。2
2020-06-02 15:20:26
386
原创 React Hook 学习笔记
useEffectuseEffect(effect, [])useEffect()在渲染完成后执行，而且是每次渲染完后都执行effect中能够返回一个函数，该函数将在组件卸载前执行，以实现与componentWillUnmount()类似的功能（一般用于清除副作用）这个被返回的清除函数，事实上也是每次渲染后都执行，这会减少bug!https://zh-hans.reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-ea
2020-06-02 15:19:52
217
原创 理解React单向数据流：实现状态提升
React状态提升由于React的单向数据流，组件无法修改自己的props，只能通过父组件传递的方法来修改父组件的state，向下引起props的变化。在 React 应用中，任何可变数据应当只有一个相对应的唯一“数据源”。通常，state 都是首先添加到需要渲染数据的组件中去。然后，如果其他组件也需要这个 state，那么你可以将它提升至这些组件的最近的共同父组件中。应当依靠自上而下的数据流，而不是尝试在不同组件间同步 state。官方demo的实现（与官方代码有差异）：import Rea
2020-06-02 15:17:14
956
原创 React 入门文档的梳理
React 工具链根据官网了解到，React既有以下工具链：Node.js构建服务端渲染网站，可使用Next.js面向内容的静态网站，可使用Gatsby以及更灵活的Neutrino、Parcel、Razzle目前对React还不够熟练，因此现以简单了解为主。React 元素渲染元素是React应用的最小单位。React元素一经创建就是不可变的（immutable），更新的唯一方法是重新创建元素并渲染；尽管如此，React DOM会将当前元素与之前的进行比较，只做必要的更新。（重要且深刻
2020-06-02 15:16:03
200
原创 React-redux 的学习记录
1. 添加 React-redux 到项目react-redux并不是内置在redux里的，因此要单独添加：cd到项目目录，执行yarn add react-redux2. React-redux 的组件拆分规范react-redux把组件分成了两个大类：UI组件 和 容器组件UI组件UI组件的特征有：只负责UI渲染，不带有业务逻辑是典型的无状态组件，没有state，所有数据由props提供不使用Redux的API容器组件容器组件的特征有：负责管理数据和业务逻辑，不负责UI渲
2020-06-02 15:13:26
143
原创 Redux-thunk 中间件的启用方法
Redux thunkthunk 是一个 Redux 的中间件（Middleware）。1. 添加和配置thunk到项目：https://github.com/reduxjs/redux-thunk2. 应用thunk//store & thunkimport { createStore, applyMiddleware, compose } from 'redux';import reducer from './reducer';import thunk from 'redux
2020-06-02 15:10:32
137
原创 Redux 入门 - 工作流程和使用原则
1. Redux 如何工作组件通过store.dispatch()方法发送action对象给store，store自动将prevState和action发送给reducers，reducers将newState返回给store，由此store中存放的state得到了更新，再由组件的subscribe()方法监听到store的变化，重新调用store.getState()方法，组件中的state也就随之更新。Action对象的编写：actiontype可以拆分在一个独立的js（constants.
2020-06-02 15:07:27
182
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人