- 博客(102)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 CSS 知识碎片 [一] 面试常问
业精于勤 荒于嬉1、css水平、垂直居中的写法，请至少写出4种？水平居中行内元素 text-align : center 块元素：margin 0 auto display:flex + justify-content: center position:absolute + left:50%+ transform:translateX(-50%)垂直居中设置line-height 等于 height display:flex +align-items:center posi..
2020-11-13 16:21:48
170
原创 JavaScript 知识碎片[三] Array 数组方法之 splice()
志不强者智不达，言不信者行不果splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。关注：splice 可以实现数组的增 、删 、改基本用法 const months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // inserts at index 1 consol...
2020-11-13 09:56:15
213
原创 JavaScript 知识碎片[二] Array 数组方法之 reduce()
业精于勤 荒于嬉reduce()方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。基本用法 const array1Reduce = [1, 2, 3, 4]; // 定义了回调函数函数 const reducer = (accumulator, currentV..
2020-11-12 15:27:40
242
原创 JavaScript 知识碎片[一] Array 数组方法之map()
业精于勤 荒于嬉map() 方法是Array 的迭代方法之一，map()方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。关注点：：创建新数组基本用法 // 创建一个新数组 const array1Map = [1, 4, 9, 16]; // pass a function to map const map1 = array1Map.map(x => x * 2); c...
2020-11-12 14:36:35
356
原创 JavaScript 知识梳理 [七] Array 数组方法总结
业精于勤 荒于嬉Array 的简单实用数组的创建遍历及增删改查的小测验 <script> // 数组方法总结 let fruits = ['Apple', 'Banana'] // 通过索引访问数组元素 let fruit = fruits[0] console.log(fruit) // 数组的遍历 fruits.forEach(function (item,.
2020-11-11 13:43:34
178
转载 用H5大屏数据可视化开发
项目中需要做一个数据展示用的看板，初接到任务觉得这个没有什么难度，做个漂亮的网页浏览器全屏就可以了。可是实际做的过程中碰见了问题。 第一：浏览器不能有横向和纵向的滚动条，没有鼠标的滚动操作过程。 第二：有各类尺寸的屏，除了在九宫格拼接屏上完美显示，还要同时满足普通用户的电脑端显示。电脑的客户分辨率可能是1399*768或1920*1080等各类尺寸的分辨率。 利用传统网页制作从上到小的制作方式已经不能满足需求...
2020-11-09 15:44:26
1099
原创 《非暴力沟通》—— 马歇尔·卢森堡博士 读后摘录&总结
当我们褪去隐蔽的精神暴力，爱将自然流露。在读书的过程中，一直发出的感叹就是没错，是这样，确实是，早点读到多好，所以《非暴力沟通》这本书，非常推荐读一读。提取书中的关键字便是 观察 ，感受，需要，请求，倾听。区分观察和评论非暴力沟通的第一要素是观察，而区分观察和评论就尤为重要，将观察和评论混为一谈，人们将倾向于听到批评，甚至会产生逆反心理。非暴力沟通不鼓励绝对化的评论，而主张评论要基于特定时间和环境中的观察。印度哲学家克里希那穆提曾经说：“不带评论的观察是人类智力的最高形式”举例说.
2020-11-08 15:32:14
1694
2
原创 《活下去的理由》——如何生活 我觉得有用但不总是遵循的 40 条建议
工作不忙的今天，解决问题之余，读完了《活下去的理由》这本书，它是一部由[英] 马特·海格所著心理学书籍，24岁时，作者马特·海格不幸被命运选中，成为抑郁症患者。本书讲述了这个并不比任何人坚强的年轻人，一点一滴克服精神上的极度痛苦，从绝望中活下来的故事。本篇文章摘录书中 “如何生活 我觉得有用但不总是遵循的40条建议”如何生活 我觉得有用但不总是遵循的 40 条建议1. 快乐出现的时候，享受快乐。 2. 小口慢饮，别狼吞虎咽。 3. 对自己温柔些。少工作，多休息。 4. 过去的一切你都.
2020-11-05 17:41:09
747
4
原创 Echarts 配置项设置总结
除非付诸行动 否则空口无凭关于Echarts 的配置项，再好的总结也不如官方文档详细，明了，而且可以直接在线设置看效果，简直不要太赞。那么我只是知识的搬运工，将自己的一些使用和尝试记录下来。一个重要的属性 show在整个echarts 图标中，如果有些图例 你想控制显示与否那么就设置show 属性值，大部分有这个属性默认show : true,自己需要做调整不显示时可设置为false，title 标题组件，legend 图例组件 ，grid 是否显示，xAxis yAxis,toolbo...
2020-11-04 11:29:40
1141
原创 Echarts 类似进度条样式 Label 设置在柱状图的顶端外侧
最近项目中写一个大屏演示，里面多数是Echars 图表，因为大多数都需要自己设置一些特性，才能达到效果，因此好好读了Echars 的文档，尤其是配置项。效果图思路左图其中左侧是看到的一篇文章 https://blog.csdn.net/qq_41619796/article/details/88661612，类似进度条的样式，思路是echars 两个部分叠加，但时看了我们项目的效果图不太可以，因为项目效果图整个有效数据和背景部分都是有圆角的，这样两部分的连接处就会有问题。右图.
2020-11-03 11:34:34
3937
5
转载 浅谈什么是前端SEO
SEO简介 全称：Search English Optimization，搜索引擎优化。自从有了搜索引擎，SEO便诞生了。 存在的意义：为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之，就是希望百度等搜索引擎能多多我们收录精心制作后的网站，并且在别人访问时网站能排在前面。 分类：白帽SEO和黑帽SEO。白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更...
2020-10-27 16:09:23
2507
2
原创 Vue 进阶 [九] Vue 源码剖析03 模板编译 & 组件化机制
业精于勤 荒于嬉模板编译概述模板编译的主要目标是将模板（template）转换为渲染函数（render）template => render()模板编译的必要性Vue 2.0 需要用到VNode 描述视图以及各种交互，手写显然不切实际，因此用户需要编写类似HTML 代码的Vue模板，通过编译器将模板转换为可返回VNode 的 render 函数。整体流程如果用户设置了template 或者是el 选项，最终就会执行编译函数，compileToFuncti...
2020-10-20 15:23:50
345
2
原创 Vue 进阶 [八] Vue 源码剖析 02 批量异步更新 & 虚拟DOM Diff 算法
想多记录一点东西，好像有点不知道怎么怎么总结了，今天听了完了一节Vue 课程 ，主要关于Vue 异步更新策略 及 虚拟Dom 是 源码的剖析，因为没有太专注可能还得捋一捋，或者全部看完之后再回头看。Vue批量异步更新策略 虚拟DOM和Diffff算法 ====all to do ====...
2020-10-13 15:26:19
328
原创 2020 双节假期后的感悟
业精于勤 荒于嬉2020年10月10日 星期六 北京多云年初疫情期间我经过了很长一段时间的焦虑和难受，总觉着自己很委屈，感受到深深的孤独，陷入了坏情绪的黑洞，因为在我遇到困难的时候没有人能够安慰和帮助我，再回想工作以来，自己一直也是平平稳稳，工作没有特别大的起色，这四五年的工作收入也都全部补贴家用，在我感觉到已经可以柳暗花明的时候，却还是令人绝望的深渊，却还是有伸过来要钱的手 ！！！就这样，我理解为他们根本都不爱我，只知道跟我要钱，但是他们也关心我，以致于我陷入混乱，一边委屈，一边自责。最后，这.
2020-10-10 15:35:27
698
2
原创 Vue 源码解析
Vue 源码解析框架地址https://www.processon.com/view/link/5d1eb5a0e4b0fdb331d3798c#map
2020-09-30 13:38:24
172
原创 Vue 进阶 [七] Vue 源码剖析 01 剖析入口 & 数据响应式
业精于勤荒于嬉今天又听了一节课，吸收的没那么好，但也是有收获，一直想像看Android 源码那样，研究研究Vue的源码，苦于不知道从何下手，听了这节课，大概知道应该从哪里入手了。项目地址：https://github.com/vuejs/vue 迁出项目： git clone https://github.com/vuejs/vue.git 当前版本号：2.6.X入口 dev脚本中 -c scripts/config.js 指明配置文件所在 参数 TARGET:web-..
2020-09-29 17:24:48
319
原创 Vue 进阶 [六] 简单易懂的手写 Vue
人生当字面，学习需坚持代码地址https://gitee.com/xiaozhidayu/vue-study-zvuehttps://gitee.com/xiaozhidayu/vue-study-zvue.git前面看了一篇关于Vue响应式的原理分析文章收益匪浅，进行了转载，今天看了一节课成，敲了自己的Vue，整体思想等都收获很多，只是小demo 中没有涉及到虚拟DOM，因此类似是1.0 Vue。Vue 的设计思想MVVM 框架的三要素 ：数据响应式，模板引擎及其数据渲染.
2020-09-25 16:58:19
391
原创 Vue 进阶 [五] 手写VueRouter
人生当自勉，学习需坚持。定义Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为VueRouter使用的核心步骤步骤一：使...
2020-09-23 20:32:33
204
原创 2020年9月读书摘录
就情感而言，凡是被颜值的，必回再浮上来。也许它会突出到表面来，就想情感本身一样，也可能它会开始以别的方式影响我们的行为。有时候，他甚至会影响到我们的身体健康。在人生中，我们常常过分执着于仔细分析每个可能的结果，以致于常常错失机会。当然有些事情是需要仔细思量的，但是在每一个刻，活的约专注，我们的感觉就越好。无论你认为这是一种直觉、本能、冥冥中的指引，还是你仅仅觉得你这样做是正确的，这都是一种不可思议的有益发现。记住，在这里，我们的目标是得到头脑空间，即一种无论出现什么情感，都安然自在的感觉。它意味着坐
2020-09-23 10:51:08
335
原创 Vue进阶 [四] vue 组件化实战之通用表单组件实现
进阶会发现越往前走，知道的越多，不知道的也越多，但是通过学习，弱化知识盲区，对自己的实际开发选择会有很大的影响，也会影响变成思维。概述组件系统是vue的一个重要概念，因为它是一种抽象，让我们可以使用独立可抽象的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。所谓组件化，就是把页面拆分成多个独立的组件，每个组件依赖的 css js 模板 图片 等资源等放在一起开发和维护，所以组件化在系统内部可复用，组件之间可以嵌套。因此组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目...
2020-09-18 14:53:17
1093
原创 Vue 进阶[三] vue 组件化之slot 插槽
进阶会发现越往前走，知道的越多，不知道的也越多，但是通过学习，弱化知识盲区，对自己的实际开发选择会有很大的影响，也会影响变成思维。概述组件系统是vue的一个重要概念，因为它是一种抽象，让我们可以使用独立可抽象的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。所谓组件化，就是把页面拆分成多个独立的组件，每个组件依赖的 css js 模板 图片 等资源等放在一起开发和维护，所以组件化在系统内部可复用，组件之间可以嵌套。因此组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目...
2020-09-16 17:55:35
373
原创 Vue 进阶 [二] Vue 组件化之组件间通信———组件通信看这一篇就足够了
今天又是收获满满的一天，但也会发现越往前走，知道的越多，不知道的也越多，但是通过学习，弱化知识盲区，对自己的实际开发选择会有很大的影响，也会影响变成思维。
2020-09-16 16:14:04
373
原创 最近的一点小感受
最近我真的真的没那么焦虑了，因为我没有那么闲了，而且也因为每天都会读几页书。其实让人焦虑的，不是忙也不是累，而是没有什么特别感兴趣的东西，也没有什么特别想爱的人，同时也感受不到周围的爱，心里一点也不暖，明知道自己该努力了，却又不知道该往哪里努力。不安于现状 又惧于改变以上大概就是我之所以焦虑的原因。鉴于北京的新冠疫情持续了那么长时间，我也闲了一段时间，这段时间的学习带来的改变为我做出其他的改变奠定了基础。一段时间的自主学习，让我在正式离职半个月内成功转行入职，同时伴随一点点的涨薪，因此对..
2020-09-11 15:34:26
215
转载 Vue 进阶[一] vue.js 双向数据绑定的实现原理 [看完一定有收获哈哈哈哈]
前段时间学习了react ，主要是入门了解没有实际的项目支撑，相当于扩展了了解知识的广度，最近这段时间感觉有必要从深度下手了，因为项目开发用的vue,所以先进行vue的进阶吧。整篇文章参考 ：https://www.cnblogs.com/kidney/p/6052935.html这篇文章没有从实际的解析vue源码，因为源码太复杂，内容太多，牵一发而动全身，所以只是鉴于vue双向数据绑定的实现原理进行了响应的实现，而我为了加深印象要把自己的理解再梳理到我的博客中以作记录。说是参考其实是比着人.
2020-09-09 10:42:42
388
原创 实现前端页面局部转 pdf 及 打印 加分页防止内容截断
再次强调实践出真知，新项目迭代涉及到一个管理报告的下载及打印，但是项目中以往的这种功能实现主要核心在后端，如pdf 的生成，打印也是有现成的文件地址等，但这次的报告中内容比较复杂，有表格，有几个echars 数据，以及长篇的描述，后端表示这个由后端生成pdf 不太现实，因此主要任务就留在了前端。核心库html2Canvas jspdf print-js实现思路1、html2Canvas可以将特定容器标签的内容转换为图片，通过特定API 转换为对应的base64 格式的数据...
2020-09-01 20:14:12
10039
25
原创 如何让div 中的 table 水平居中 之 margin:auto
问题描述：让div 盒子中的内容水平居中的方法是 ：设置样式 text-align:center ，但是对于里面的table问题解决：给table 设置属性 margin:auto部分代码如下：<div class="tablebox"> <span>el-table 练习</span> <!-- :header-cell-style="{ background: '#eee' }" --> <el-form ..
2020-08-26 09:25:12
764
原创 React 初探 [九] redux react-redux 基本使用与counter 案例
reduxredux 理解1、学习文档 1).英文文档: https://redux.js.org/ 2).中文文档: http://www.redux.org.cn/ 3).Github: https://github.com/reactjs/redux2、redux 是什么？ 1). redux 是一个独立专门用于做状态管理的JS 库 （不是react 的插件库） 2).他可以用在react angular vue 等项目中，但...
2020-08-23 16:50:04
258
原创 React 初探 [八] react-router 基本使用与侧边栏切换功能
react-router 说明1、react-router 相关理解2、SPA的理解3、路由的理解4、前端路由的实现react-router 的基本使用=====督促自己完成======
2020-08-17 17:05:57
1608
原创 React 初探 [七] 使用React脚手架创建项目并实现评论功能
实践出真知！！！ 了解了React 一些基础之后，那么在实际开发中，React 框架是怎么使用的呢，和 VUE 一样，他们都有比较完善的生态系统，今天就先来探探react 脚手架的使用，并在项目中实现包含添加删除的评论功能。React 脚手架安装使用Create React App 值得一看全局安装脚手架：npm install -gcreate-react-app使用脚手架创建项目：create-react-app my-react切换到项目目录: cd my-react...
2020-08-14 17:12:55
626
原创 React 初探 [六] ajax 请求
今天是北京下暴雨的一天，从昨天下班开始各个平台已经开始推送消息，今天有大暴雨，建议在家办公，很多公园也都关闭了，公司也说非必要可以不来公司，但是左等右等，大暴雨还是没有按时到来，为此大家都提前到了公司。下午两点天渐渐变天了，然后大雨，因此一批人冒着大雨回家了，我选择再看几节React 课程，那么现在雨是彻底停了！因此------万事不要慌！前置说明React 本身只关注界面，并不包含发送ajax 请求的代码 前端应用需要通过ajax 请求与后台进行交互常用的ajax请求库1、jQuery.
2020-08-12 16:39:27
188
原创 VSCode 开发React 项目保存 JSX语法格式错误问题
问题现象使用React 脚手架创建项目，js 文件保存时 JSX 语法出现格式错误，如下：解决办法：在Vscode 底部状态栏 select language mode 从 JavaScript 切换为 JavaScript React 如下图：
2020-08-12 10:23:43
2188
3
转载 JavaScript 知识梳理 [七] 解锁多种JavaScript数组去重姿势
今天又是工作不饱和的一天，react 学习了一段时间也该换换脑子，那么JavaScript 知识梳理再开始吧！看到了一篇，自己也敲了一遍试了试，那么搬运过来，以做记录。整体代码架构，生成模拟数组// 生成模拟数据const arr = []for (let i = 0; i < 100000; i++) { arr.push(Math.floor(100000 * Math.random())) }// ...实现算法console.time('test');..
2020-08-11 15:13:18
187
1
原创 Element-UI checkbox 如何改造成只可单项选择
Element UI 提供 checkbox 默认实现多选或者全选全不选择，RadioButton 实现单项选择功能，但是如果是一个列表的情况下，使用checkbox 的样式进行单选的情况还是很多的，像 el-table 中，checkbox 可以设置为单选或者多选的任何形式，因此记录一下checkbox 改造成单选的实现思路和方法。...
2020-08-07 12:41:46
3838
3
原创 Element-UI el-dialog 二次封装复用
我很希望项目中可以多接触一些新东西，实践出真知，对于编程来说就是要多动手，多总结几录，多思考，才能更好的避坑，因为动手了会发现好多你以为的不是你以为的。
2020-08-07 09:21:08
3801
原创 React 初探 [五] React 组件的生命周期
说起生命周期，最先接触的是Andorid 开发中 Activity 和 Fragment 的生命周期，再者是Vue 组件，那么今天要梳理的是React 组件的生命周期，可见对生命周期的理解和掌握对组件化开发时非常重要的。概述生命周期是什么？生命周期就是指一个对象的生老病死，而此处的对象就是React 组件，组件的生命周期也就是从其创建到销毁的过程，而且在整个过程中，React 组件暴露出来了一些函数，在特定的阶段进行回调，我们称之为生命周期回调函数或者钩子函数，这些回调函数主要是给开发暴露了操作.
2020-08-04 15:06:27
182
原创 React 初探 [四] React 组件收集表单数据的两种方式
收集表单数据这项工作在前端的项目中是非常常见的，我们知道vue 中 有 v-model 实现了双向数据绑定，那么React 中是怎么样的情况，这边文章来探讨一下。功能学习以需求驱动比较快，那么来看一个和收集React 表单数据相关的小案例，效果如下：功能本身很简单 ，主要是为了了解 React 中 组件收集数据的方式。根据需求可分析我们所要的操作为获取输入框中 用户名 和 密码 阻止表单的默认提交行React 代码实现如下：<!DOCTYPE html><..
2020-08-03 15:09:36
458
原创 React 初探 [三] React 组件组合使用
已经有vue 框架使用经验的人知道，真实的项目开发中，组件封装，嵌套，传值等都非常重要，想必使用React 框架开发项目，也一定不是只是用一个组件就够了，所以这篇文章梳理React 组件组合使用基础。基本理解我们知道，页面要有一个根组件，其他的封装的组件则要嵌套在根组件或者其应该在得父组件中，组件的组合使用，就是会有组件的嵌套使用，涉及到传值，数据处理等。TODO List 案例效果通过一个小案例来具体了解下 组件组合使用的基本实现，最终的实现页面图如下需求显示所有 to.
2020-08-03 13:26:02
300
原创 React 初探 [二] React 组件的基本使用 和 组件三大属性
组件化编程是React 和 Vue 框架共同的思想，只是在实现上有些区别，组件化编程的优点不用多说，可以复用，可以简化代码，更能体现封装的思想等。这篇文章主要是定义结合代码分享React组件的基本使用和组件三大属性。组件基本定义和使用组件定义React 组件的定义有两种方式，分别是 工厂函数组件（简单组件）；ES6 类组件（复杂组件==》可以操作state）使用使用分主要两步，定义组件 ====》 渲染组件标签<!DOCTYPE html><html lan.
2020-08-02 19:56:09
239
关于facebook原生广告的集成
2016-04-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人