- 博客(84)
- 收藏
- 关注
RSS订阅原创 special-ui，一个mini且可爱的可视化组件库， 包含飞线、流程图各种类型可视化组件!
special-ui一个mini且可爱的可视化组件库(https://github.com/davidpan123/specialUi), 欢迎点赞！！安装： npm i special-ui全局使用：import Vue from 'vue'import specialUi from 'special-ui'Vue.use(specialUi)按需引入:import Vue from 'vue'import {FlyLine} from 'special-ui'V.
2020-11-27 11:29:26
912
原创 cesuim 可视化项目
西安市3d全景视频组件：包含加载3d titles 模型， 搜索监控点位，监控点位视频播放，视频贴地模型播放等功能1. cesuim 可视化项目：开发示例(部分)：2. 使用的技术是VUE + Cesuim部分代码示例：3dtitles 模型加载， 模型贴地，视频点位加载放置，视频播放，视频投影；PreviewOutLoad： 无人机加载组件<template><div class="container" @click="domClick">
2020-05-15 17:01:50
1612
原创 vue加载three模型成功，但显示黑屏？
遇到问题解决方案：遇到问题：导入到场景内的模型无法查看，而且也没有报错这种会有可能有多种情况造成的，一般情况下都是下面两种情况造成的：1.模型太小或者太大，这种情况可以尝试放大一千倍或者缩小一千倍来查看效果。2. 模型的位置太偏，根本不在相机照射范围内，这种问题我们可以将模型居中到相机照射的焦点位置看获取模型的大小：// 获取模型大小 let box = new TH...
2020-04-03 14:16:57
5373
原创 vue项目中加载模型报错
模型要放到public目录下，可以新建一个文件夹models放各种模型，引入的时候loader.load('models/changfang.obj', function (object) {})完整示例：<template> <div id="loaderModel"> </div></template>...
2020-04-03 14:11:59
1349
原创 vue项目中怎么引入three以及其它模块？
安装：npm install three -Snpm install import-three-examples -D引用：import * as THREE from 'three'import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'// import { FBXLoader } from 'thr...
2020-04-03 14:04:07
2326
1
原创 d3-动画
1.效果图小球会从（0，0）位置过渡到最终的位置，显示动画效果，点击更新、增加、减少按钮能看到具体呈现的动画效果！2. 代码<template lang='pug'> div.histogram-pane(:id='id') <div class="btn-pane"> <button @click="...
2019-12-25 14:21:55
1020
原创 d3-折线图-中日GDP
1. 效果图2. code<template lang='pug'> div.histogram-pane(:id='id') svg.histogram-container g.viewport </template> <script>import * as ...
2019-12-23 16:03:15
1129
原创 d3-散点图
1.效果展示2. 代码<template lang='pug'> div.histogram-pane(:id='id') svg.histogram-container g.viewport </template> <script>/** * 散点图 */...
2019-12-04 16:07:23
954
原创 数据结构-堆
定义：堆是一种完全二叉树1概念1.1关键码 假定在数据记录中存在一个能够标识数据记录的数据项，并可依据该数据项对数据进行组织，则称此数据项为关键码(key)。关键码的作用就是比较大小的。1.2最小堆 父节点的关键码小于等于左右子节点的关键码。即所有父节点都小于子节点。1.3最大堆 父节点的关键码大于等于左右子节点的关键码。2 最...
2019-10-08 10:21:59
543
原创 数据结构-树
一. 树的概念定义：树是一种非线性的数据结构。由n（n>=0）个节点组成.1.节点它包含数据项，和指向其它节点的指针，上图中的树有7个节点。2.节点的度有几个分支，度就是几3.叶节点度为0的节点被称为叶节点， 上图中C、D、F为叶节点4.分支节点除了叶节点之外的节点就是分支节点5.节点层次节点所在的层级，如根节点A在第一层6.树的...
2019-09-19 16:30:24
273
原创 数据结构-BitMap
BitMap是用bit位来记录数据存在与否的一种算法。在处理大数据时，可以节省大量空间，速度也很快。问题：已知有n个整数，这些整数的范围是[0,100],请你设计一种数据结构，使用数组存储这些数据，并提供两种方法， 分别是addMember和isExist.下面是这种数据结构的类的定义。思路1：用数组存储，查找是否存在需要for循环n,有n个数那么复杂度为O(n)思路2:用数组存储...
2019-09-12 18:39:07
307
原创 React入门10-react组件优化
1. 在shouldComponentUpdate声明周期中，自己处理逻辑import React, { Component } from 'react'class Comment extends Component { shouldComponentUpdate({data: {name, score}}) { if (name === this.pro...
2019-09-05 17:48:49
225
原创 React入门9-弹窗组件
react 中 可以通过react-dom中的createPortal来定义传送门。import React, { Component } from 'react'import {createPortal} from 'react-dom'import {Button} from 'antd'import '../assets/dialog.css'export default...
2019-09-05 17:39:08
1034
原创 React入门8-复合组件
1.匿名插槽 ---> 类似于 vue 中的v-slotfunction Dialog(props) { return <div style={{ border: "1px solid blue" }}>{props.children}</div>}export default function Composition() { return...
2019-09-05 17:35:40
241
原创 数据结构-队列
1.实现队列(enqueue 入队, dequeue 出队, head 返回头, tail 返回尾 size, clear, isEmpty)class Queue { constructor() { this.items = [] } enQueue(data) { this.items.push(data) } ...
2019-08-22 10:09:42
433
原创 数据结构-栈
1. 实现栈[push, pop, top, size, clear, isEmpty]/** * 数组实现栈[push, pop, top, size, clear, isEmpty] */class Stack { constructor() { this.items = [] } push (data) { this.ite...
2019-08-22 09:52:10
162
原创 vue源码分析
1. 获取vue源码地址项目地址：https://github.com/vuejs/vue迁出项目： git clone https://github.com/vuejs/vue.git当前版本号：2.6.102. 文件目录3. 调试环境搭建(1)、安装rollup： npm i -g rollup(2)、修改dev脚本，添加sourcemap，package.json...
2019-08-06 17:51:46
569
原创 JavaScript 和 CSS 常用工具方法封装
JavaScript 和 CSS 常用工具方法封装因为工作中经常用到这些方法，所有便把这些方法进行了总结。JavaScript1. type 类型判断isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String'}isNumber (o) ...
2019-08-01 10:35:12
283
原创 canvas-小游戏-控制人走向
实现效果：通过键盘的上下左右键控制人的走动？代码实现：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> body {backg...
2019-07-19 14:34:36
586
原创 canvas碰撞检测-圆
问题：实现一个鼠标移到圆内则北京变黄，鼠标离开圆的背景变回之前的形态的效果？思路： 鼠标移动的事件中，获取距离context的左边和上边的距离，ev.offsetX；ev.offsetY，他们距离圆心和差开方就可以获取到圆心的距离， 只要判断点->圆心 的距离小于等于半径即可。代码实现：<!DOCTYPE html><html> <...
2019-07-17 17:44:37
448
原创 canvas碰撞检测-矩形
问题：实现一个鼠标移到矩形内则边框变红，鼠标离开矩形边框变回之前的形态的效果？思路： 鼠标移动的事件中，获取距离context的左边和上边的距离，ev.offsetX；ev.offsetY，只要判断这个范围在矩形范围内即可。代码实现：<!DOCTYPE html><html> <head> <meta charset="u...
2019-07-17 17:33:28
753
原创 React入门4-声明周期
React 16.3+getDerivedStateFromProps:在调用render()之前调用，并在每次渲染时调用。 需要使用派生状态的情况是很罕见得。值得阅读如果你需要派生状态.（https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html） componentDidMount:...
2019-07-16 15:22:31
163
原创 React入门5-如何创建 refs?
为什么 String Refs 被弃用?如果你以前使用过 React，你可能会熟悉旧的 API，其中的ref属性是字符串，如ref={'textInput'}，并且 DOM 节点的访问方式为this.refs.textInput。我们建议不要这样做，因为字符串引用有以下问题，并且被认为是遗留问题。字符串 refs 在 React v16 版本中被移除。 它们强制 React 跟踪当...
2019-07-16 11:52:32
372
原创 canvas实现一个pie
1. 效果图2. 具体实现这里面会设计到数学的知识，如三角函数，弧度和角度的转换等，需要注意的是： 数学的0°从12点开始，弧度0是从3点开始。代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></tit...
2019-06-26 13:53:06
558
原创 gulp4.0入门, 看这一篇就够了
前言之前我们讲了gulp3.0， 这篇引入gulp4.0， 4.0相比3.0有一些改变的地方：gulp3.0压缩顺序默认是顺序执行的，4.0引入压缩并行的处理方式：gulp.series|4.0 依赖顺序执行gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行因为之前一步步说了怎么压缩js\ css\image等，此处直接上代码：gulp...
2019-06-24 16:50:39
4970
原创 gulp3.0入门, 看这一篇就够了
1.Gulp和Webpack的基本区别gulp基于‘流’； webpack基于‘万物皆为模块’：gulp可以进行js，html，css，img的压缩打包，是自动化构建工具，可以将多个js文件或是css压缩成一个文件，并且可以压缩为一行，以此来减少文件体积，加快请求速度和减少请求次数；并且gulp有task定义处理事务，从而构建整体流程，它是基于流的自动化构建工具。Webpack是前端构...
2019-06-21 17:30:26
873
原创 Dart教程-1.vscode配置dart开发环境
1. Dart sdk下载和环境配置下载地址：http://www.gekorm.com/dart-windows/下载完成后安装并配置环境变量：替换安装后的Dart sdk.cmd运行: dart --version. 出现下面的结果表示安装和配置环境成功！2.vscode 安装Dart插件3. vscode安装Code Runner...
2019-06-19 17:46:53
9204
2
原创 一个canvas实现的画板
1.实现效果2.上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>一个canvas实现的画板</title> <style media="screen"> ...
2019-06-06 15:24:49
537
原创 vue使用粒子效果particles.js的内存泄露问题
1.vue中使用particles.js效果：代码实例:<template lang='pug'> #c-animate .c-background__content .c-background__title img(:src="logoSrc") span...
2019-05-24 17:28:13
1447
1
原创 移动webapp适配方案--rem
1.remrem 就是根据网页根元素「html」来设置字体大小这有什么用呢？这是移动 webapp 的最佳的适配方案「目前来说」，既然说是最佳的适配方案，那肯定还有别的适配方案，先看看都有那些适配方案吧1、viewport缩放「被废弃了」 2、宽度固定两边留白「体验很差」 3、响应式布局「工作量太大，针对不同的分辨率各写一套 」2、如何适配动态的修改 font-size...
2019-05-22 13:48:20
306
原创 TypeScript-3.接口(interface)
1.接口(1) ? ----- 可选属性(2) readonly ----- 只读属性(只能在对象刚刚创建的时候修改其值)interface Config { width: number, height: number, color? : string, readonly name: string}let config: Config = {...
2019-05-21 11:29:09
382
原创 TypeScript-2.类(class)
1.认识类(1) public: 类的外部和内部、继承类均可访问(2) protected: 类的内部、继承类均可访问(3) private: 类内部可访问(一般get set提供外部访问)class Animal { name: string; // 默认public private _age: number; ...
2019-05-16 14:02:26
224
原创 TypeScript-1.基础类型
// -----------------基础数据类型--------------------// 1.布尔值let isSucessed: Boolean = falselet isFailued: boolean = trueconsole.log(isSucessed+'---------布尔---------'+ isFailued)// 2.数字let maxSiz...
2019-05-15 18:41:08
174
转载 一名合格前端工程师的自检清单
开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。winter在他的《重学前端》中提到：到现在为止，前端工程师已经成为研发体系中的重要岗位之一。可是，与此相对的是，我发现极少或者几乎没有大学的计算机专业愿意开设前端课程，更没有系统性的教学方案出现。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。这样是...
2019-05-09 10:34:36
256
原创 nodeJs--Buffer
1.简介Buffer类是作为 Node.js API 的一部分引入的，用于在 TCP 流、文件系统操作、以及其他上下文中与八位字节流进行交互。注意：a.Buffer的大小在创建时确定，且无法更改b.Buffer类在全局作用域中，因此无需使用require('buffer').Buffer2.重要APIa.Buffer的创建I. Buffer.alloc(...
2019-03-28 15:58:02
418
原创 React入门7-redux
1.背景介绍react是单向数据流，一级一级组件传递这个过程是不能越级的，为了解决深度嵌套， redux横空出世2. redux安装：npm/cnpm i redux(1).分清两个stateRedux中的state和React中的state完全不是一回事，React中的state是组件内部自己的状态信息，而Redux中的state是Redux自己的数据(2).R...
2019-03-26 17:36:19
197
原创 React入门6-组件通信
1.组件之进行通信的几种情况父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信2. 父组件向子组件通信a. propsb. ref如下示例：父组件中对子组件添加标识：ref={this.headRef}， 就可以调用子自己的方法import React, { Component } from 'react';import Head f...
2019-03-25 17:40:54
211
原创 nodeJs--querystring
querystring模块提供用于解析和格式化 URL 查询字符串的实用工具1.引入模块const querystring=require('querystring');2.重要API类似于JOSN.parse() ------ JSON.stringfy(). json序列化和反序列化const querystring=require('querystring');...
2019-03-25 10:16:24
413
原创 React入门3-组件
1.为什么要组件化？前端页面组件化优点：复用性、易维护、可读性2.如何写组件？(1). 单个组件a. 需要继承React.Componentb.需要有一个renderimport React, { Component } from 'react';import Home from './components/Home'class App extends Com...
2019-03-22 11:18:25
177
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人