D3实现多对多关联关系弧线图
多对多关联关系基于D3实现的多对多关联关系：github地址 各人员之间的互动关系、各公司上下游企业的关联关系、各地之间的交互关系等等，都是多对多关联关系的表达，他们之间可以通过矩阵图的形式来表达, 如下图所示 (用python的heatmap： 而利用 D3库函数可以实现更为酷炫的弧线,如下图所示： 要画多方关系图，首先需要确定绘制的数据，是一个 N * N 的矩阵。 1234567891011121314matrix = [ const matrix = [ [1, 41, 0, 0, 8, 4, 2, 0, 5, 5], [6, 0, 1, 1, 1, 0, 4, 1, 0, 1], [1, 12, 0, 0, 3, 0, 1, 0, 1, 3], [0, 11, 3, 0, 4, 1, 1, 0, 0, 2], [1, 1, 0, 0, 1, 0, 0, 2, 2, 0], [4, 0, 4, 0, 0, 0, 0, 1, 0, 1], [0, 6, 0,...
JS实现图片的懒加载
场景需求在长博客、商品网站上经常见到大量的图片，而同时加载如此多的图片会导致服务器响应慢、页面卡顿，用户体验不佳。 而图片懒加载就是应对这个痛点。图片懒加载技术就是根据图片在可视区域的位置对图片进行逐步加载，利用 DOM对象元素属性、分流等技术实现。 实现原理步骤一 隐藏懒加载图片的 src 属性我们首先需要确定懒加载的图片资源，对于 img 标签，首先把src 属性用自定义的属性如 data-src 代替，等到图片需要加载时我们将 data-src 的网址赋予 src 属性即可。 1<img data-src='./dzq.jpg' alt="dzq"> 步骤二 判断待加载图片是否位于视窗范围内DOM 元素拥有一个方法 element.getBoundingClientRect()，可以获取该元素的大小及其相对于视口的位置，方法返回的是一个 DOMRect 对象，其 left, top, right, bottom 属性解释了相对于视口位置，如下所示。 然后利用 img.getBoundingClientRect...
背包问题
01 背包有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。 第 i 件物品的体积是 $v_i$，价值是 $w_i$。 求解将哪些物品装入背包，可使这些物品的总体积不超过背包容量，且总价值最大。输出最大价值。 输入格式第一行两个整数，N，V，用空格隔开，分别表示物品数量和背包容积。 接下来有 N 行，每行两个整数 $v_i,w_i$，用空格隔开，分别表示第 i 件物品的体积和价值。 输出格式输出一个整数，表示最大价值。 数据范围$0< N,V ≤ 1000$$0< v_i,w_i ≤ 1000$ 输入样例123454 51 22 43 44 5 输出样例：18 思路+方法f[i][j]表示面对第 i 件物品时，体积为 j 的背包的最大总价值。两种选择：1. 不放入第 i 件物品。 2. 放入第 i 件物品。 状态转移方程：f[i][j]=max(f[i−1][j],f[i−1][j−w[i]]+v[i]) 优化：f[j]=max(f[j],f[j−w[i]]+v[i])。此时 j 要从大到小遍历，保证第 i 件物品只能选择一次。否则 f[i][j] 会由 ...
CSS 布局知识
CSS实现垂直水平居中对于父元素 parent 与 子元素 child，如何实现子元素在父元素内部的水平垂直居中？ 元素的 html 代码如下： 1234567891011121314151617181920212223242526<!DOCTYPE html><html><head> <title>Document</title> <style> .parent{ width: 500px; height: 500px; background-color: aquamarine; } .child{ width: 200px; height: 200px; background-color: coral; } </style></head>&...
CSS 知识要点
选择元素 基本元素选择 12/* 把段落文本设置成红色，12像素大，粗体 */p {color:red; font-size:12px; font-weight:bold;} 上下文选择 12/* 选择祖先元素为 article 标签的所有段落 p 后代 */article p {color:red; font-size:12px; font-weight:bold;} 特殊上下文选择 子选择符12/* 将 section 的 h2 子元素的字体设置为 italic */section > h2 {font-style:italic;} 紧邻同胞选择 12/* 将紧邻着 h2 的元素同胞 p 选择设置 */h2 + p {font-style:italic;} 一般同胞选择12/* 将 h2 与 p 之间的同胞全部选择 */h2 ~ p {font-style:italic;} 通用选择 1234/* 全文所有字体颜色（包括文本框）设置为黑色 */* {c...
自己实现简单版Vue--3. 实现数据的双向绑定和Proxy代理
数据的双向绑定之前我们已经实现数据影响视图，即数据更新调用setter()方法里绑定的方法，通过Dev通知Watcher更新视图。 然后我们需要实现视图影响数据进而再影响视图。 通过为input节点利用Object.addEventListener()绑定事件监听，再调用数据更新方法更新数据。 数据更改后由于之前已经实现了数据更改后页面的自动更新，由此数据自然驱动视图。 12345678910111213141516// 编译模版具体执行const compileUtil = { // ... 省略 model(node, expr, vm) { const value = this.getValue(expr, vm); // v-model绑定对应的 Watcher, 数据驱动视图 new Watcher(expr, vm, (newVal)=>{ this.updater.modelUpdater(node, newVal); }); ...
自己实现简单版Vue--2. 实现数据绑定视图
利用Object.defineProperty()方法实现数据的监听Object.defineProperty()方法可以具体参考链接：http://sunyunzeng.cn/JavaScript%E4%B8%AD%E7%9A%84%E5%AF%B9%E8%B1%A1/#%E8%AE%BF%E9%97%AE%E5%99%A8%E5%B1%9E%E6%80%A7 该方法可以定义对象数据在访问操作时的一些约定。 定义 Observer 对象 123456789101112131415161718192021222324252627282930313233class Observer{ constructor(data){ this.observe(data); } // data是一个对象，可能嵌套其它对象，需要采用递归遍历的方式进行观察者绑定 observe(data){ if(data && typeof data === 'object')...
自己实现简单版Vue--1. 编译初始Vue模版
前言Vue的双向绑定效果如下： Vue的底层到底是怎么实现的呢？ 通过手写简单的示例来学习Vue框架的运行机制。 Vue是MVVM框架，其实就是MVC框架在前端的体现，其中的控制器(Controller)由View MOdel(VM)代替。 简单来说，数据更新视图，以及视图更新影响数据这两步操作或者是双向绑定的过程由VM来执行。 而Vue就是一个VM。 Vue的可以说是开箱即用，它的使用非常简单，如下所示： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
JS异步函数小结
JS的异步JavaScript的执行环境是单线程的，对于http事件触发线程、浏览器事件触发线程、浏览器定时器等浏览器会单独开辟出一个异步线程处理，处理完毕后，加入任务队列，等待JS主线程调用执行。 例如：12345678setTimeout(()=>console.log('触发了'),0);console.log('我先触发');// 输出/*我先触发触发了*/ 虽然setTimeout()被设置为马上触发，但是setTimeout触发的异步任务需先放在任务队列中，等主线程中console()函数执行完毕后，再能被触发。 JavaScript执行环境(浏览器)是从头到尾一行一行往下执行，但是遇到异步任务，先放入任务队列，等待主线程可以执行该任务，才被执行。 详细的JS代码执行顺序可查看 https://juejin.im/post/59e85eebf265da430d571f89 异步程序在JS代码中很常见，因为Web应用总归要与远方的服务器交互，请求数据，这个过程需要异步进行。否则，浏览器会一直卡住，直到结果请求完毕。 我们...
LeetCode 72.编辑距离
编辑距离给定两个单词 word1 和 word2，计算出将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作： 插入一个字符删除一个字符替换一个字符示例 1:123456输入: word1 = "horse", word2 = "ros"输出: 3解释: horse -> rorse (将 'h' 替换为 'r')rorse -> rose (删除 'r')rose -> ros (删除 'e')示例 2:12345678输入: word1 = "intention", word2 = "execution"输出: 5解释: intention -> inention (删除 't')inention -> enention (将 'i' 替换为 'e')enention -> exent...
