Daniel_Yang_1125-CSDN博客

原创源码学习 -- classnames

classnames 是公司项目中使用较频繁的一个库，因为能方便动态切换 class 名称。放下对比大家感受下～ <div className={hideContent ? 'content hide' : 'content'} />  <div className={classnames('content', { hide: hideContent })} />又比如自己封装的业务组件，调用方经常需要传入自定义 c

2020-12-10 22:47:00 437 1

原创花样匹配 -- 选择符

对于 CSS 来说，选择符是最基本的特性，不过若能熟练掌握，会带来匹配效率和页面结构上的提升！我们将根据六个不同的维度来介绍 CSS 的选择符群组选择符 div, p, span { color: orange; border: 1px solid blue; }类选择符 & ID 选择符class 和 id 应该是最常用的元素属性了吧哈哈哈 #my_id, .my-class { color: red; }属性选择符1、基于属性值匹配 /* 匹配具有 hr.

2020-09-14 21:18:34 135

原创关于 Redux，你想知道的

什么是 Redux在现代前端项目中，有两大方面最令开发者头疼：数据变化与异步流Redux 通过明确的指令让数据变化可预测如何使用Basic Usage import { createStore } from 'redux' function reducer(prevState = { count = 0 }, action) { switch (action.type) { case 'INCREASE': return prevState + 1 case.

2020-07-14 22:02:09 134

原创 JavaScript 之面向对象

何为对象对象包含着属性关于属性数据属性 const obj = {} Object.defineProperty(obj, 'name', { configurable: true, enumerable: true, write: true, value: 'Daniel' })访问器属性 const obj = {} Object.defineProperty(obj, 'age', { configurable: true, enumerable: tr

2020-07-12 14:31:33 97

原创啥是 React Context

React 为什么需要 Context跨层级传递数据可能会疯创建 ContextReact.createContext(defaultValue)为嘛要传 defaultValueContext 数据流机制生产者·消费者模式生产者 / 消费者模式简介：一方生产数据，一方获取数据生产者<Context.Provider value>消费者消费者的方式就有多种了哦哈哈Context.Consumer <Context.Consumer>

2020-07-12 13:00:16 139

原创浅谈浏览器页面渲染

灵魂拷问：浏览器是如何使用我们编写的 HTML、CSS 和 JavaScript 在屏幕上渲染像素的呢？其实，大致的过程是先构建 DOM 和 CSSOM 树；因此，我们需要确保尽快 ( 为页面优化留了口子 ) 将 HTML 和 CSS 都提供给浏览器。→DOM由 HTML 文件构建 DOM 树的过程大致为：字节 → 字符 → 令牌 ( token ) → 节点 → DOM从一个具体的例子细细说来，假设 HTML 代码为： <!DOCTYPE html> <html.

2020-06-21 16:47:05 270

原创 JS 异步新标准 -- Promise

JavaScript 的异步事件背景：事件处理回调事件优缺点Promise定义：Promise 是异步操作结果的占位符，表示承诺将在未来某个时刻完成3 种状态pendingfulfilledrejected一旦异步操作结束，Promise 即变为 settle 状态创建未完成的 Promise： let promise = new Promise(function (resolve, reject) { resolve() reject() })

2020-06-18 01:21:12 125

原创 DOM 简单小结

DOMNode 类型文档 —> 节点，Node 类型Node 接口，由 DOM 中所有节点类型实现；因为共享相同属性和方法；属性：nodeTypenodeNamenodeValue节点关系：childNodes —> NodeList 对象类数组有序动态查询（访问那一刻）parentNodepreviousSiblingnextSiblingownerDocument —> 整个文档的文档节点操作节点appendChildi

2020-06-13 02:11:19 154

原创浅谈 JavaScript 作用域 & 闭包

作用域什么是作用域一套用于存储和查找变量的规则例如 const a = 2;，首先编译器会询问当前作用域是否有名称为 a 的变量，若没有则声明一个；接着编译器会为引擎生成运行时需要的代码，用来处理 a = 2 的赋值操作；引擎运行时会先询问当前作用域是否有名称为 a 的变量，若没有会继续询问外层作用域直至顶端的全局作用域。在这个过程中，会先在当前作用域存储变量，然后利用作用域链查找变量。分类词法作用域定义在词法阶段的作用域，由变量和块作用域写在哪里决定，词法分析器处理代码时会保

2020-06-07 16:19:15 177

原创谈谈 Vue.js 里 v-if 与 v-show 的区别

在 Vue 项目中，v-if 和 v-show 算是两个用得很频繁的指令，很巧的是它俩在表现上也相似，都是动态显示 DOM 元素。不过既然是两个不同指令，肯定会有不同的适用场景，带着好奇，让我们在 Vue 官方文档里一探究竟吧～对于v-if大家应该不会陌生，不管哪种编程语言都会有 if-else 的流程控制。例如，在 Java 中：if (condition) { //some...

2017-09-19 23:30:31 742

原创 Javascript作用域和变量提升

首先大家看一下下面的代码，判断下会输出什么结果：var foo = 1;function bar() { if(!foo) { var foo = 10; } alert(foo);}bar();答案是10，你是否会疑惑条件语句if(!foo)并不会被执行呀，为什么foo会被赋值为10.再来看看第二个例子：var a = 1;function b(

2017-08-27 22:24:17 259

原创谈谈关于Flex布局的一些简单问题

目前刚参加工作不久，能力不足，经常会踩到一些简单的坑，记录下来，防止自己再重犯。首先想写写Flex布局（弹性布局），因为在项目中用得挺频繁的，对一些基本的概念和实践做个小结（主要是摘抄Mozilla的文档 : ）Flex布局概念对布局比较了解的同学可能会发现，块级布局更侧重于垂直方向，行内布局更侧重于水平方向，与此相对的，Flex布局是通过调整其内元素的宽高，实现自动填充的一种能力。Fle

2017-08-27 15:25:48 542

daniel_yang1125的博客