zwf193071的专栏

在前一篇文章里我采用的方法是，随机生成坐标点，可这样会导致节点布局混乱，无法理清各个节点之间的关系。希望能做到如下的优化：后期的效果如下图所示：核心代码如下所示：以父节点为圆心，将子节点等分并返回坐标信息该方法如下所示：，即每个子节点对应的角度, 即每个子节点对应的弧度，得到该子节点与圆中心的方向偏移值，若需知道该子节点的坐标信息，则需加上圆心的值核心代码如下所示：在上面代码中，我先从所有节点中过滤出，因为它是类型聚合点，再根据不同类型，......

Chrome Extension是什么Small programs(小程序)Modify DOM of a web page (修改网页的DOM)HTML, CSS & Javascript大致组成结构如下图所示：Extension类型Browser Action显示在浏览器的tool bar内随时能被访问Page Action显示在浏览器的tool bar内，但功能已被禁用只在部分页面能被访问到既不是Browser Action，亦非Page Ac

@ant-design/icons源码解读从package.json开始读源码，我习惯从package.json里的scripts开始，从这里，可以看到该npm包发布前做了哪些事。"scripts": { "build": "npm run build:lib && npm run build:index-es && npm run build:umd", "build:lib": "cross-env NODE_ENV=production rimr

前言在Win10系统，发布了@sf/cli的私有库，全局安装npm install @sf/cli -g后，在Git Bash终端输入sf create XX却发现后续执行语没有任何颜色，该问题为何会出现，又如何解决它呢？问题原因如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令解决问题在该目录C:\Users\用户名内找到.bashrc文件，若没有，则手动创建

代码如下/** * @description 将笛卡尔坐标系转成经纬度高程 * @param {Object} cartesianObj 笛卡尔坐标系对象 {x, y, z} * @returns 返回经纬度高程对象 */cartesianTolngLatAlt = (cartesianObj) => { if (!Cesium || !window._cesium) { throw new Error('非cesium地图') } if (!car

如何绘制标牌下的线效果见下图代码如下function createPolyLine (option) { var width = isNaN(option.width) ? 1 : option.width var data = Array.isArray(option.data) ? option.data : [0, 0, 0] return window._cesium.entities.add({ show: optio

配置manifest.json文件{ "name": "EyeProtection", "version": "1.0", "description": "保护视力的chrome插件", "content_scripts": [ { "matches": ["https://*.com/*","https://*.net/*", "https://*.cn/*", "https://*.dev/*", "https://*.io/*"

前言想在vuepress支持的静态文档系统里，实时显示组件效果，需要哪些呢？请看正文正文首先在.vuepress的components里添加demo-block.vue<template> <div class="demo-block" :class="[blockClass, { 'hover': hovering }]" @mouseenter="hovering = true" @mouseleave="hovering = false"&

前提将cesium分为24等级（level），最小等级为0，最大等级为23，若需根据level参数来飞行，则需先获取到离地面的高度根据层级获取高度function getHeightByLevel(level) { var A = 40487.57 var B = 0.00007096758 var C = 91610.74 var D = -40467.74 return Math.pow((A - D) / (level - D) - 1, 1 / B) * C}cesium飞行的

前言JavaScript如何创建二维数组呢？遇到个方法，看起来很酷，但实际上，有坑有坑的方法代码如下所示：var arr = new Array(10).fill(new Array(10).fill(0))控制台打印arr这时候，若你想设置，arr[0][0] = 1，你会发现二维数组所有子数组的第一项都被改为1这便是坑了，你只想改成一个子数组中的第一项，却一下子改变了整个子数组拒绝坑，从老实码代码做起var a = new Array();for(var i=0;i<

光墙效果可见下图里黄田社区的闪烁光墙效果如何实现绘制闪烁光墙createAoiByCesium代码如下： function createAoiByCesium (option) { var color = option.color ? option.color : Cesium.Color.RED var maxHeight = option.maxHeight ? option.maxHeight : 10 var minHeight = opti

正文话不多说贴代码renameFiles.jsconst fs = require('fs')const path = require('path')fs.readdir(process.cwd(), (err, files) => { files.forEach(item => { fs.rename( path.join(process.cwd(), item), path.join(process.cwd()

题目Merge two sorted linked lists and return it as a sorted list. The list should be made by splicing together the nodes of the first two lists.exampleInput: l1 = [1,2,4], l2 = [1,3,4]Output: [1,1,2,3,4,4]Input: l1 = [], l2 = [0]Output: [0]JS题解/*

题目一串字符，只包含英文和空格，要求计算出空格分开的最后一组字符的长度Example 1:Input: s = "Hello World"Output: 5Example 2:Input: s = " "Output: 0思路需过滤尾部最后一个无效空格/** * @param {string} s * @return {number} */var lengthOfLastWord = function(s) { if (!s.length) return 0

题目简介一串包含(、)、{、}、[、]的字符串，需要判断该字符串是否有效，遵循以下两个条件：Open brackets must be closed by the same type of brackets.（开符号必须被同类型的闭符号关闭）Open brackets must be closed in the correct order.(开符号必须以正确的顺序关闭)例子Input: s = "([)]"Output: falseInput: s = "{[]}"Output: tr

用JS的思路去解这道题目/** * @param {string} s * @return {number} */var roman = new Map([ ['I', 1], ['V', 5], ['X', 10], ['L', 50], ['C', 100], ['D', 500], ['M', 1000],])var romanToInt = function(s) { if (!s) return 0; let n

生成项目使用微软官方的脚手架vscode-generator-code/自动生成插件项目(vs-plugin)，却在run的时候，遇到一个错误：Extension is not compatible with Code 1.51.1. Extension requires: ^1.52.0.解决错误出现该错误是因为自动生成的项目里，package.json有个配置"engines": { "vscode": "^1.52.0"},需将这里的版本改成1.51.1...

前言谈及尾调用，需先了解数据结构：栈、调用栈以及调用侦栈栈是一种遵从后进先出(LIFO)原则的有序集合，新元素都靠近栈顶，旧元素都接近栈底。想象一下，如餐厅里面堆放的盘子(栈)，一开始放的都在下面(先进)，后面放的都在上面(后进)，洗盘子的时候先从上面开始洗(先出)。调用栈调用栈是一种栈结构的数据，它是由调用侦组成的。调用栈记录了函数的执行顺序和函数内部变量等信息。调用侦每个进入到调用栈中的函数，都会分配到一个单独的栈空间，称为“调用侦”。在调用栈中每个“调用侦”都对应一个函数，最

前言之前断断续续地在研究vue原理，但还未动手实战过。本文从最简单的开始，vue如何将{{}}与data联系起来，并渲染出来，比如{{msg}}，data(){ return {msg:333} }，那么{{msg}}将渲染成333，现在让我们开始吧。实战为了实现该功能，我动手写了一个Zue，已将其放在github上，其链接地址为https://github.com/zwf193071/zue.git 。下面我将为大家详细地说明原理。index.html的代码如下所示： <div id="a

前言vue内部，编写less文件，如何实现主题实时切换的功能呢？有一点要注意的是，在vue某个文件内，通过import方式引入less npm包，再less.modifyVars是无法实时修改主题的，因为此时的less文件已编译完毕，无法触发webpack的实时更新。要想实时切换主题，只能将less文件放在public目录下，但此时涉及到一个问题，组件内部less文件那么多，难道每次修改less文件，都得手动再在public目录下的color.less里改吗？有没有一种自动打包目录下的所有less文件，

序言国外有一个网站，总共44道JS题目，挑战大家对JS是否熟悉，链接地址下文是对这些题目的分析parseInt && mapmap的回调函数需要三个参数callback(currentValue, index, array)MDN文档中指明parseInt第二个参数是一个2到36之间的整数值，用于指定转换中采用的基数。如果省略该参数或其值为0，则数字将以10为基础来解析。如果该参数小于2或者大于36，则parseInt返回NaN。此外，转换失败也会返回NaN。["1", "2"

MDN文档中关于Array.proptotype.reduce的描述如下所示如果数组为空并且没有提供initialValue，会抛出TypeError。如果数组仅有一个元素（无论位置如何）并且没有提供initialValue，或者有提供initialValue但是数组为空，那么此唯一值将被返回并且callback不会被执行[1].reduce(Math.pow) // 1[10].reduce(Math.pow) // 10[1,2,3].reduce(Math.pow) // 1，从左到右执行

前言当你使用EarthSDK的时候，你会发现浏览器控制台会输出以下信息，如下图所示：看着是不是非常漂亮呢？如何利用console.log生成类似的介绍信息呢，请看下文。代码话不多说，贴代码：console.log('%c????%cEarthSDK%c我愿与你同行，因你势不可挡！%c版本号：1.4.14\n编译日期：2020-7-13 20:52:54\n授权信息：授权-永久使用此软件当前版本。\n限制网址：-\n\nCesium实验室-群：595512567(已满)\nCesium实验室-2群

前言此题为leetcode上的题目，现实中有很多应用场景，比如买股票，确定哪段时间股票涨值价格最高。下面给出两种解决方式，一种为为Divide and Conquer，第二种算法为动态规划，即Kadane's algorithm方法/** * @param {number[]} nums * @return {number} */// 解法一var maxSubArray = function (nums) { if (nums.length === 1) return nums[

前言JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。但是我们偶尔见到键值为对象的，那么会输出怎样的结果呢？正文下面代码会输出什么？const a = {};const b = { key: "b" };const c = { key: "c" };a[b] = 123;a[c] = 456;console.log(a[b]);输出456，为什么呢？可以在控制台打印a，看看结果是什么。

前言有时，我们想批量取出HTMLCollection里的某个属性值，并将其生成数组，这里，为大家介绍一种简单有效的方法。例子代码如下所示：var div = document.createElement('div')var p1 = document.createElement('p')p1.textContent = '1'var p2 = document.createElement('p')p2.textContent = '2'div.appendChild(p1)div.ap

Reverse IntegerAssume we are dealing with an environment which could only store integers within the 32-bit signed integer range: [−231, 231 − 1]. For the purpose of this problem, assume that your function returns 0 when the reversed integer overflows.fu

simple-domThe simple Virtual Dom which includes vnode & h & patch and so on.Author：zwf193071E-mail: 997131679@qq.comdate: 2020/08/13PrefaceHow can I learn to write the Virtual Dom by myself? I am a green-hand, not having much experience

simple-packThe simple pack tool, which resembles webpack.How to packThe following steps:Parse a single file and extract its dependencies;Recursively build a dependency graph;Package everything into a single fileUsage根据项目根目录下的配置文件spack.config.js，将

zash-cliA simple CLI for generating pages into your projectsAuthor：zwf193071E-mail: 997131679@qq.comdate: 2020/07/29Preface这些页面都是相似的，为何要反复的拷贝来拷贝去？好不容易拷贝完，还得为新增的页面添加路由、左侧菜单和面包屑导航的功能，555…不甘心将时间浪费在这些细枝末节上，于是擦干眼泪，撸起袖子做了一套自动化生成页面的工具，希望能给后面的读者一些启示。F

最开始想基于现有的vue项目，插入自动化测试功能，主要是防止后台改了接口参数却没有告知前端的问题。预想的是jest功能，安装了vue-jest等包工具后，跑起test，发现一堆报错，去官网查了下，发现下面这句话：vue-jest 目前并不支持 vue-loader 所有的功能，比如自定义块和样式加载。额外的，诸如代码分隔等 webpack 特有的功能也是不支持的。如果要使用这些不支持的特...

VUE+webpack

代码如下所示：var arr = [{ "Name" : "aaa", "Data" : "2015-08-01"}, { "Name" : "bbb", "Data" : "2015-08-01"}, { "Name" : "ccc", "Data" : "2015-08-01" },{ "Name" : "aaa", "Data" : "2015-08-02"