- 博客(30)
- 收藏
- 关注
RSS订阅原创 Redux学习笔记
Redux 基础知识基础介绍动机为了更好的管理项目中的状态Redux 为了让项目中的state变得可预测核心概念:纯函数 Reducer纯函数:简单来说就是，接收相同的参数时返回相同的结果。Reducer:接收一个action和state返回一个新的state。Redux的核心就是通过reducer来管理项目状态。在大的应用中，我们需要编写很多小函数来管理state的一部分。Redux也提供了一些工具来简化这种模式，但主要的思想就是通过action对象来修改state。三大原则
2022-05-06 17:45:55
445
原创 正则表达式入门学习笔记
作为计算机领域最伟大的发明之一，强大的正则表达式可以极大的提高我们处理文本的工作效率。但是我们在使用的过程中大多数都是在网上搜一下现成的例子然后拿过来使用。其实正则表达式并不难学，下面就系统的来看一下正则表达式吧。
2022-04-01 10:46:04
1108
原创 Vuex源码解析
Vuex 源码解析前言本渣最近心血来潮学习了一下 Vuex 的源码，再次做一下整理和分享。Vuex 作为一个专为 Vue.js 程序开发的状态管理模式，想必大家都很熟悉。那么大家在开发的过程中有没有想过遗下几个问题：Vuex 是怎么挂载到 Vue 上的呢Vuex 的数据响应式是如何实现的Vuex 的严格模式又是怎么回事为什么 state 能够在所有子组件中使用 store带着这些问题，我们一起看一下 Vuex 的源码：这里首先上一张官网截图：Vuex 挂载vue 使用插件的方式只
2020-07-31 14:15:34
1406
原创 从浏览器原理分析界面性能优化03---浏览器的垃圾回收策略
从浏览器原理分析界面性能优化 03—垃圾回收其他相关文章看这里：浏览器原理与优化—总揽浏览器原理与优化—网络篇浏览器原理与优化—渲染篇前言对于前端开发来说,JavaScript 的内存机制是一个不经常被提及的概念,因此很容易被忽视.但是,想要开发一个高性能的前端应用,必须要搞清楚 JavaScript 的的内存机制.为什么会有垃圾回收我们都知道当程序运行时,有的数据在使用过之后可能就不再被需要了,这些数据我们称之为垃圾数据.当垃圾数据一直占用我们的内存时,内存得不到快速的释放,可能就会造成内
2020-06-20 13:06:02
339
原创 从浏览器原理分析界面性能优化02---万字长文弄懂浏览器渲染原理
从浏览器原理分析界面性能优化 02—界面渲染前言说到性能优化,界面渲染优化是我们要注意的重中之重.想要优化我们的界面渲染,我们首先要明白界面渲染的具体流程.我们先从几个面试中经常出现的题目来切入这个问题:JS 解析会阻塞界面渲染么?CSS 的加载和解析会阻塞界面渲染么?简要描述浏览器的重绘和回流什么是 GPU 加速?什么是异步加载和预加载?什么是关键渲染路径(CRP:Critical Rendering Path)?上面几个问题,大都是和浏览器的界面渲染相关的,我们先不着急去解答这些
2020-06-08 10:23:19
568
原创 从浏览器原理分析界面性能优化01
从浏览器原理分析界面性能优化—浏览器的网络请求众所周知,当我们在浏览器的地址栏输入一个域名并且回车后,浏览器就能够进行网络请求,然后将我们想要的界面展示出来.但是这个过程浏览器到底经历了什么,我们又可以怎样进行优化,这是我们今天要讨论的问题浏览器运行过程我们都知道,在多进程浏览器架构的模式下,从输入 URL 到发起网络请求是需要多个进程的配合的.我们先看一下浏览器进程和网络进程的作用:浏览器进程:负责进程调度,用户交互,数据存储等功能网络进程:提供网络服务下载功能为了简单明了,先附一张简
2020-06-04 20:57:24
327
原创 从浏览器原理分析界面性能优化00
从浏览器原理分析界面性能优化00前言提到前端总是绕不开前端的性能优化部分,而前端性能优化的难点在于不成体系,需要我们在开发过程中去注意各种细节.最近这段时间在学习浏览器的原理的过程中,发现了很多知识点和我们的前端优化部分紧密相关,加上之前自己在项目中的实践以及参考网络上大神们的性能优化总结,进行一个只是框架的梳理.文章的主要目的是提供一个大致的思路框架,以期望各位在实际项目实践中能够快速的定位到自己需要的点.因为个人感觉这个话题太大了,所以打算分几章的时间来慢慢整理出来一个大致的轮廓,下面先简单来
2020-06-04 20:55:27
313
原创 Vue源码解析06-手写自己的Vue
Vue 源码解析 06-手写自己的 Vue最近一段时间一直在研究 Vue 的源码,突然间想写一个乞丐的 Vue 实现,为了理一下自己的思路,同时也作为一个阶段性的总结.实现双向数据绑定Vue 双向绑定看这里Vue2.0/1.0 双向数据绑定简单来说就是利用了 Object.defineProperty()和观察者模式对 data 数据进行数据劫持.废话不多说,直接上代码Watcher 实现数据的更新操作//Watcher,观察者,真正执行更新操作的角色 class Watcher{
2020-06-01 11:10:09
254
原创 前端初中级面试知识框架整理
前言基于十来天的面试经历,大概整理了一份初中级前端的知识框架梳理,当作一个知识的整理吧.也希望可以帮到其他的同学.整理的不是很全面,如果有兴趣的同学可以互相探讨一下.后续会持续更新相关知识点的整理,欢迎大家一起讨论进步????手写JS源码...
2020-05-29 10:24:00
218
原创 Vue源码解析05-组件化
Vue源码解析05-组件化前言组件(Component)是Vue.js框架强大的功能之一,我们想要编写一个完整、健壮的项目离不开Vue的组件,所以本渣从源码角度梳理了一下Vue组件的创建流程,在此做简单记录个人认为Vue的组件分三步组件的创建(我们平常会使用Vue.component创建一个全局组件)组件的解析,也就是将组件转化为对应的VNode(平常我们说的虚拟DOM)组件的挂载(...
2020-04-11 00:46:12
237
1
原创 Vue源码解析04——手写虚拟DOM
手写虚拟DOM什么是虚拟DOM概念虚拟DOM(Virtual DOM) 是对DOM的JS抽象表示，它们是JS对象，能够描述DOM的结构和关系。应用的各种状态变化会体现虚拟DOM上，最终映射到真实DOM。虚拟DOM的优点虚拟DOM轻量、快速。当虚拟DOM发生变化时通过新旧虚拟DOM的对比，得到最小的DOM操作量，从而提升性能和用户体验。跨平台：虚拟DOM是可以实现跨平台的，将...
2019-11-15 09:11:50
533
原创 Vue源码解析03-异步更新队列
Vue 源码解析03-异步更新队列前言这篇文章分析了Vue更新过程中使用的异步更新队列的相关代码。通过对异步更新队列的研究和学习，加深对Vue更新机制的理解什么是异步更新队列先看看下面的例子： <div id="app"> <div id="div" v-if="isShow">被隐藏的内容</div> <i...
2019-11-11 17:13:46
843
原创 Vue源码解析02-数据响应式
Vue源码解析02-数据响应式开篇之前先了解几个相关概念MVC模式模式简介MVC的全称是Model(模型)-View(视图)-Controller(控制器)Model：这是数据层，存储项目所需的数据。Model的作用是返回或者更新数据。在应用中常用于数据库存储数据。View：视图层，用于想用户显示数据。View本身不显示任何数据，而是Controller或者Model让Vie...
2019-10-31 14:41:32
448
原创 Vue源码解析01
Vue源码解析01首先来一张Vue工作流程图，作为整个Vue源码解析的基础初始化new Vue() 初始化创建Vue实例，初始化data、props、events等挂载$mount 挂载执行编译，首次渲染、创建和追加过程编译compile() 编译，该阶段分为三个阶段parse、optimize、generate渲染render function 渲染函数，渲染函数执行时会触发...
2019-10-18 22:58:10
618
原创 Vue中.sync和v-model的区别
.sync和v-model的区别v-model <!--父组件--> <template> <!--v-model 是语法糖--> <Child v-model="model"></Child> <!--相当于下面的代码--> <!--v-...
2019-10-05 16:20:17
4045
原创 Vue组件之间传值
Vue 组件之间传值父子组件之间父组件向子组件传值属性props //child props:{msg:String} //parent <child msg="由父组件传入"></child>特性 $attrs //child，并未在组件中声明props <p>{{$attrs.msg}}&l...
2019-10-04 23:39:05
187
原创 媒体查询
媒体查询详解媒体查询简介♣ 媒体查询能够在不同的条件(一般指屏幕或者文档宽度)下使用不同的样式，从而达到不同的表现效果。♣ 媒体查询包含一个可选的媒体类型，再满足CSS规范条件下包含零个或者多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为t...
2018-08-03 09:50:44
427
原创 前端响应式布局
前端响应式布局前端网页布局分类♣ 固定宽度布局：以px为单位设置固定的宽度；♣ 流式布局：以百分比为单位设置相对布局；♣ 响应式布局：通过检测设备信息，决定网页的布局方式，一般情况下检测设备的宽度来实现(CSS样式中通过‘@media’来实现)♣ 栅格布局：以百分比为单位将网页划分为均等长度，排版布局时以这些均等长度作为度量单位；响应式布局响应式布局的优势...
2018-08-02 13:54:06
2575
1
原创 RN不能在安卓端运行
ReactNative挖坑笔记之 不能在安卓端运行ReactNative在安卓端运行项目报错：java.lang.RuntimeException: Could not get BatchedBridge, make sure your bundle is packaged correctly，在网上查找资料发现是安卓端没有相应的bundle文件导致的，所以现在需要的是在安卓端添加bundle文件。
2017-12-13 16:19:21
492
原创 RN-apk中图片不显示
ReactNative 挖坑笔记之 reactnative打包apk后在安卓端无图片显示在IOS端调试项目一切正常，但是打包安卓apk安装到手机上发现所有图片都不显示，在网上多方查找资料后发现是因为静态资源文件没有bundle到安卓的项目中去。 进入reactnative的android 文件目录然后进入res资源文件夹，发现果然没有相应的图片资源文件。这时需要手动bundle资源文件到项目中。
2017-12-13 16:01:44
1393
1
原创 Kotlin Android Extensions的集成相关
Kotlin开发Android笔记—— Kotlin Android Extensions 工具使用整理最近正在用Kotlin写安卓，但是之前在Android用的ButterKnife好像在Kotlin中改成KotterKnife了。奈何在自己项目中配了半天的KotterKnife依然报错。只好研究了一下Kotlin Android Extensions。在网上看到了两种集成方式。亲测以后发现在我
2017-10-26 19:07:12
246
原创 Kotlin从入门到放弃之基础篇(六)——泛型、嵌套类、枚举类、对象表达式
Kotlin从入门到放弃之基础篇(六)泛型像Java中一样Kotlin中也存在泛型，用来解耦类与函数所用类型之间的约束，而且使用方法是一致的。泛型类 //创建一个泛型 class Box<T>(t : T){ var value = t } //使用 val box : Box<Int> = Box<Int>(1)♣ 如果类型参数可以通过推断得到，
2017-10-17 18:55:49
325
原创 Kotlin从入门到放弃之基础篇(一)——基本数据类型
Koglin从入门到放弃之基础篇(一)基本数据类型Kotlin中，所有变量的成员方法和属性都是对象。一些类型是内建的。Kotlin的基本数据类型包括：数值，字符，布尔，以及数组等。数值Kotlin提供了如下数值类型(在Kotlin中，字符:’charactors’不是数值类型) 类型 字节宽度 Double 64 Long 64 Float 32 Int 32
2017-09-13 14:47:43
257
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人