closertb.github.io
closertb.github.io copied to clipboard
closertb
浏览issue 或 我的网站，即可查看我的所有博客
写于：2018-02-13 还在上班？很无聊？** [数字华容道畅玩地址][1] ** **[开发源码地址][2]** ## 这个叫前言 ## 年末了。哦，不，要过年了。以前只能一路站到公司的我，今早居然是坐着过来的。新的一年，总要学一个新东西来迎接新的未来吧，所以选择了一直未碰的那个据说是全宇宙最牛逼的前端框架-React，在上下班的地铁上看了两天官方教程，so what。光看不练假把式，于是就想着做个什么，偶然看到一个妹妹发了一条关于玩数字华容道，根本停不下来的朋友圈，这游戏我在今年的最强大脑看过，但是就看两小天才在滑呀滑呀滑，感觉还不错，程序猿就该多玩益智类，少玩什么跳一跳。于是去商店下了个，玩着还行，就是广告太多，而且只能玩五阶以下的，看起不难，一个想法涌于脑上，何不拿这练练手做个Demo，毕竟我们属于智慧家族的。闲话扯完，进入正题。本文包含但不仅包括以下内容: - Demo 开发环境 - 数字华容道里的秘密 - 讲一讲里面算法的实现 - React的使用感受及易错点 ## Demo 开发环境 ## React：16.2.0 react-router-dom：4.2.2 webpack：3.8.1 JS：ES6 CSS：Scss [React教程][3] [项目目录][2]结构（很适合React入门...
写于：2017-07-28 ## 有序无序列表序列号不显示 我们常常要遇到的是，不显示序列号（设置list-style-type:none），但有时因为项目过大，设置了一些通用属性后，想显示序号却怎么也捣腾不出来,关于list-style-type：none属性，具体去看[W3C标准][1]，下面罗列那些情况，会阻止序列号显示的问题； 1：list-style-type:none,规范标准，没啥讨论的； 2：当li标签border与ul外边框距离小于1em时，也就是： width =ul_margin + ul_border + ul_padding + li_margin
写于：2018-03-27 白话：即上一篇我脑中飘来飘去的css魔幻属性自己的文章推出之后，这是自己写的第四篇CSS相关的文章，文章绝大部分是自己工作总结得来，另一部分是平日sf回答的与面试中向面试官交流学到的，都是一些比较基础，刨根问底的知识分享。 - [我脑中飘来飘去的css魔幻属性][3] - [我所不注意的那些CSS冷知识，却阻止了我做项目的速度][1] - [关于CSS样式动态注入，你不知道的那些冷知识][2] ## 清除浮动的原理 ## 在上一篇我脑中飘来飘去的css魔幻属性提到浮动不按想要的方式浮，里面提到清除浮动其实按原理来讲，就两个： - clear：both(不准确，后面会讲) - 触发BFC 前面因为没咋搞明白，就没有说为什么，最近因为偶然在sf上有人提问，就顺着这个问题去搜了相关资料，找了点答案。 ### clear 清除浮动 ### clear清除浮动的操作，基本思路是这样。首先为要清除浮动的盒子引入清除元素，现实表现里一般为一个空元素或者伪元素（before,after）。设置了clear属性后，盒子渲染时，会将这个元素的top border（上边缘）与浮动元素的底部对齐，来达到将盒子撑开的目的。但是这个与浮动元素底部对齐的元素与clear设置的属性（both,left,top）有关,具体可以看[W3C标准][4]。还是很简单易懂的。如果说的不是很明白，可以拷贝这段代码，试一下，然后切换clear的值，就会有种恍然大悟的感觉。 如果你觉得还不够直观，你可以将content的“”里写两个字，或则加个margin,border什么的。 ** html 代码 ** ```html 这是左边浮动元素...
写于： 2019-01-07 最近公司封装的构建库用多了，感觉自己正在一步一步的变傻，所以趁还没下雪，手脚还没长冻疮，没事还是自己折腾一下吧。 本想记笔记，但没想到记笔记没法传图片。所以如果你看到了，就忽略了吧。o(╥﹏╥)o o(╥﹏╥)o o(╥﹏╥)o 思来想去，我入门webpack已经好多年了，以前写到过一篇：[webpack再入门,说一下那些不入流的知识点][1]，但从没深入过，希望这次能坚持下去，将webpack与babel好好深入一番。 webpack4官网：[地址][2] babel官网： [地址][3] ### webpack相关 ### - 1. 在项目中，尝试着用antd的组件，然后引入了antd的css样式，然后报了个如下的错，这种错误抛出来，简直让你怀疑人生，因为你就在js中写了一句 import 'antd/dist/antd.css'。天天都在用的模式，怎么，怎么就报错了呢？  原因：自己在loader里配上了各种高大上的loader，什么sass,less，file,但是就是没有配css（哭晕在厕所） 解决办法：加上呗。  ***敲黑板：*** loader顺序与解析值得关注，loader的编译顺序是从右往左依次执行，以less类型为例，当编译器遇到a.less时，先通过less-loader将a.less编译为一个一个的css模块，然后再通过css-loader将其整合为一个css模块（怀疑中，还需要探索）。但是还需要一个地方去引入这个css，一般前面紧跟style-loader，但这个loader会把整个css通过style标签注入到HTML中，和这个时代主流有点不符合。所以这里我用了MiniCssExtractPlugin这个插件，它的作用是将css作为一个文件通过link标签引入。 - 2. webpack4.27.1的文档中提到了公共代码分离提到了webpack.optimize.CommonsChunkPlugin，但是添加了运行后报错： ***webpack.optimize.CommonsChunkPlugin has been...
## 缅怀 个人首个博客closertb.site,基于vue框架开，采用SPA的形式，受限于服务器，除首次加载较慢之外，应用体验还是很好 由于以下三点原因，关闭了个人自己定制的博客： 1：生活所迫，一个字：穷。服务器又该续费了； 2：前后端分离,没有解决SEO的问题，所以个人欣赏久了也会疲倦； 3：感受一下hexo的强大，其实还是因为穷，自己定制的多好； ## 展望 仅以此文，缅怀一下自己周期不到半年的博客； 并憧憬一下自己与HEXO未来相依为命的日子
写于：2017-11-30 ## 前言 ## 最近工作做数据交互展示，常和数据打交道，而随之而来的就是遇见后端传来的各种各样的数组，我需要用各式各样的方法来变换这些数据，来最好的展示这些数据；很多东西久了没用就容易忘，自己也是边查边用，这篇文章算是自己这一周学习的知识的总结。当然你也可以打看[MSDN查看更标准的叙述][1] ## 数组原生的API ### 那些需要知道的特性： 1. 数组在JS中是对象的一种，所以数组也是引用类型，所以操作时要小心，时刻记住你操作的不是一个普通类型； 2. 每个数组都自带一个length属性，这个属性很特别，可读也可写。JS函数的arguments因为也拥有length属性，所以其被称为类数组对象。 这里不会提到所有的API，因为真的太多了。我只提我最近常用的，还有被人们常说的增删查改。 ### API之增删查改 我以前听说增删查改（CRUD），是sql语言。但有一次参加面试，面试官问：说说你知道的JS数组增删查改，那数组的增删查改是那些呢？说真的，当时我一脸懵逼，我还以为数组还能用sql语句操作 - **增加**：push，unshift,还有通常我们常用的arr[arr.length] = newChild; 首先我们有一个数组arr= [1,2,3,4,5,6] push被称为栈操作，即栈顶入，栈顶出，所以当我们采用arr.push(7)，得到的结果是arr= [1,2,3,4,5,6,7],其相对于arr[arr.length] = 7; unshift和push相反，即栈底入，所以当我们做和上面相似的操作，即arr.push（7）,得到的结果是arr= [7,1,2,3,4,5,6] 至于arr.push(3.5)和arr.unshift(3,5)答案是多少，你可以自己亲自尝试一下；...
写于：2018-08-30 [在线示例][1] 如果你还不了解canvas，还不知道要讲啥，建议从首篇看起：[从0开始写一个支持单轴轮播的雷达图][2] 在首篇我们已经讲了怎么实现轮播，在这里我们将要用这一篇文章来说一下雷达图的单轴hover效果的实现，也是我写这篇文章的原因，因为echarts只支持单个series的hover。而我想要的是支持下面的效果:单轴hover。如果你只想知道怎么解决Echarts单轴轮播问题，并且你足够机智，你可以直接看最后一节。  ## 理清思路 如果你用过Echarts的radar图，如果你去看过生成雷达图形成的dom结构,你hover后会发现如下图所示  有没有一种恍然大悟的感觉，其实就是在这画布的容器（我们称其为target）里里，添加了一个dom元素，来显示提示词。而这个dom元素的定位是绝对定位，定位点是根据hover捕获点在画布上的left和top计算值，然后显示生成的tooltip值；所以我们可以思考，要达到前面这几句话，我们需要提前做以下几步： 1、绑定一个鼠标移动事件，并试图捕捉画布上的拐点； 2、根据捕捉的点，获取相应的数据（标签，数值）； 3：生成一个div元素（也可以是label这些元素），并设定位置，样式，及显示值，并添加到容器中，大功告成； ## step by step 原谅我用了个英文单词，我确实不知道该用个什么标题。 如果你细心看过首篇的每一个实现步骤，并且理解整体思路，那接下来，事情会简单很多。因为无论哪个js插件画雷达图，前面的几步都是必须的,其核心除了canvas，其实就是计算和坐标转换，即将一块高为width，宽为height的dom元素变成一张拥有直角坐标系的画布，就像下面这个简图：  ### 绑定事件，并获取相对位置坐标点 我们为这个target元素绑定一个click事件，然后 ```html ``` ```javascript const draw = document.getElementById('canvas');...
写于：2017-11-09 今天要用到的理论在前两篇都讲过，如果你错过了前两篇，你应该先看看。 [从0开始写一个支持单轴轮播的雷达图之首篇][1] [从0开始写一个支持单轴轮播的雷达图之中篇][2] ## 前言 ## 通过前面我们自己实现了一个Radar图，并对其实现了单轴轮播和hover，我们已经明白了其中的坐标变换，在工作中，我们用自己写的雷达图来做产品的可能性不大，毕竟精力有限，而且和Echarts的图表相比，展示效果和鲁棒性都没法比。但是我们可否用Echarts生成一个radar图，自己为其写一个tooltip呢,答案是肯定的。 但一切的一切前提是，要支持单轴hover轮播，这个Radar图只有一个系列。其实现的核心思想：通过实例化Echarts对象的option，我们可以获取画布大小，获取标签和值，生成坐标系，算出要hover点的坐标，然后添加上面说的hover事件和自动轮播事件，直接上源码： ## 第一步绘制对应坐标系 ## ```javascript /*target 添加画布的容器，option即为setOption中的Option，autoOption用于设定是否自动轮播，是否hover触发，*/ function addHover(target,option,autoOption={autoShow:false,hoverEnable:true,time:1000}){ const m =Math; var center ={ //获取画布的中心偏离比，因为echarts支持百分数控制radar图在画布中的位置，所以我们需要计算这个点，当然我们也可以为了方便，不在option中设置，这样我们就可以直接用画布的中心点,即（0.5,0.5）； pointx:(option.radar.center&&Number(option.radar.center[0].substr(0,option.radar.center[0].length-1))/100)||0.5, //计算X轴的偏离比例 pointy:(option.radar.center&&Number(option.radar.center[1].substr(0,option.radar.center[1].length-1))/100)||0.5, //计算y轴的偏离比例 }; var...
写于：2017-08-25 ### 引子 ### 最近做公司的数据展示项目，用的核心插件是Echarts，但在雷达图的展示案列上，需求上出现了需要单轴轮播标签和数据，在看完github上的issue后，这个Echarts3不支持，看了一下源码，似乎有点复杂，改了改，只实现了多个series的轮播，和需求还是有差距，周末反正无聊，何不自己动手撸一个。 ### 整理一下思路 ###  想实现如上图这样一个建议雷达图，需要几步？个人总结，需要： 初始化一个canvas对象； 1. 以画布中心，绘制三个同心圆； 2. 根据输入的点数，计算3根轴在外径圆上的6个坐标点，并以中心点，绘制6根轴线； 3. 根据输入的标签，集合前面6个坐标点，完成6个标签在画布的绘制； 4. 根据输入的数据，结合前面的6个坐标，计算得输入数据的坐标点，连线完成输入数据展示； 5. 要实现轮播，主要解决的就是根据输入数据坐标点计算此点在Dom元素的位置，然后轮播显示； 6. 如果想触发echarts那种hover tooltip的效果，你只需要添加一个mousemove事件，获取位置，并计算其相对应的坐标点。 好像要达到的效果就完成了，似乎不难，来吧，实现它。 ### 分布实现 ### #### 初始化一块画布...
写于：2017-08-12 ### 先说说Vue-Cli（Vue项目脚手架）### 关于它能干什么，就不再赘述了，我们主要谈谈生成的与webpack相关的项目结构：  大体上就分三层（当然随着你在生成项目配置的参数不同，项目结构可能会有不同），首先package.json里面的devDependencies属性里，包含了构建这个项目webpack所需要的各种依赖node包和执行项目的快捷指令配置，build文件夹是一些和webpack相关的配置，而config是一些和项目相关的配置，关于这两个文件下每个文件具体是干啥的，可以看下[这篇文章][1]，我只简单说明一下，在执行命令时，这些文件是怎么组合在一起使用的，也可以理解成执行顺序，可以粗略看看：  所以我们知道，Vue-Cli之所以便捷，因为他启用了可配置参数来初始化一个项目，至于为什么要将我们通常的一个webpack.config.js能完成的事情写到2个文件夹12个文件来完成，大概就是传说中的模块化吧，鬼知道呢？ ### 关于打包时资源路径的配置 ### assetsSubDirectory：资源子目录，指js,css，img存放的目录，其路径相对于index.html 比如我将其配置成：assetsSubDirectory：''和assetsSubDirectory：'static',从下面的图，你应该就可以直观感受配置assetsSubDirectory这个路径的区别了。多说一句，此时index.html中js,css的资源路径是这样的：script type=text/javascript src='/static/js/manifest.js?v=8cca728d'>，注意/static/  assetsPublicPath：资源目录，默认是这样配置的assetsPublicPath: '/'，指assetsSubDirectory目录也就是js,css,img等资源相对于服务器host地址，传说中的绝对路径，host是什么,ip地址加端口号，比如http://192.168.0.102:8089/newB/beaty.img，其host指的就是http://192.168.0.102:8089，所以如果你如果和我一样，用的是tomcat服务器，那就会遇到当我们要访问我们的网页时,访问的地址是http://ip:port/projectName/index.html,一般没有项目会直接用http://ip:port/index.html这个地址。所以像上面提到的js路径地址，这时就会被解析成http://ip:port/static/js/manifest.js?v=8cca728d，而正确的的url路径应该是http://ip:port/projectName/static/js/manifest.js?v=8cca728d，所以我们需要将assetsPublicPath: '/'改成assetsPublicPath: '/projectName/'，这样才能保证资源的正确发布。 *坑位提示：*自己当时是这样配置的assetsPublicPath: '/projectName'，也就是相对于正确的少了一个'/'，但神奇的是js，css都能打包出正确的路径，自己自动添加了一个'/'，但在一个.vue的template下有一个图片路径被解析成http://ip:port/projectNamestatic/img/flower.jpg，rojectName与static之间少了一个'/'，个人估计是针对于index.html中路径的替换和其他位置的，多了一些容错的处理。 ### 关于项目，文件，内容hash值 ### 在webpack打包中，有三类hash值，还是一篇[好文推荐][2]，分别是： [hash]:[hash] is replaced by...