- 博客(33)
- 资源 (10)
- 收藏
- 关注
RSS订阅原创 ECharts+React+webpack实现动态曲线
文章目录代码结构详细代码浏览器端实现chart组件button组件worker组件其他服务器端实现之前ECharts+js实现了动态曲线，这次稍稍做了一些改动。代码结构详细代码浏览器端实现chart组件MyChart.jsimport React from 'react';import * as echarts from 'echarts/lib/echarts';import 'echarts/lib/chart/line';import 'echarts/lib/compon
2020-05-28 18:57:37
382
原创 webpack之输出结果分析
两步走。项目根目录下webpack --profile --json > stats.json，生成stats.json文件--profile，记录构建的耗时信息；--json，输出结果以JSON格式保存；> stats.json，输出结果保存在stats.json文件中。一个前提：全局安装了webpack， npm install -g webpack一个必须：json文件名必须是stats.json将 stats.json导入 可视化工具 并分析两种可视化工具供选择。第一
2020-05-28 18:32:32
1493
原创 小试牛刀之webpack-dev-server
用express搭建过一个小型的服务器，用过监听模式来解决手动npm run build的麻烦，这次使用webpack-dev-server来搭建一个服务器，且一并解决“手动编译、手动刷新浏览器”的麻烦。小试牛刀代码目录详细代码index.html<html><body> <div id="root"></div></body></html>index.jsimport {add,sub,mul,
2020-05-28 17:14:01
377
原创 webpack的source map
source map将编译后的代码映射到原始源代码devtool是否生成source map，怎么生成source map，devtool说了算。不同的值会明显影响到构建(build)和重构建(rebuild)速度。参考文章使用source mapdevtooldevtool demo...
2020-05-27 14:26:07
828
原创 Regexper，图形化正则表达式
文章目录Regexper正则表达式元字符字符组 []举例：/[do]/排除字符组[^]举例：/[^do]/重复 [^]{n}举例：/[^do]{2}/捕获组 ()举例非捕获组其他Regexper/Win(?:dows)?\s?([^do]{2})\s?(\d+\.\d+)?/正则表达式元字符元字符说明\转义.匹配除换行符以外的任意字符^匹配开头$匹配结尾?重复一次或零次+重复一次或多次*重复零次或多次|多选分支
2020-05-25 20:36:30
1166
原创 有点意思的npm package
array-flatten功能将一个嵌套数组展平安装npm install --save array-flatten使用//ES6//import {flatten} from "array-flatten";//AMDconst flatten = require("array-flatten");const arr = ['hello',['world'],[['have'],['a'],['nice'],['day']]];const res = flatten(a
2020-05-25 08:57:12
87
原创 搭建小型express服务器
文章目录搭建小型express服务器测试express.static(root)搭建小型express服务器mkdir testcd testnpm init -ynpm install --save-dev expresstype nul>server.jsmkdir distmkdir srccd dist type nul>bundle.jscd ../srcmkdir imgstype nul>index.html得到如下目录，index.
2020-05-23 08:21:06
325
原创 编译sass
文章目录命令行编译sassrubynode-sasswebpack+react+sass命令行编译sasssass的运行环境有两种：ruby和node-sass。 sass以.scss为后缀。ruby安装ruby测试是否安装成功安装sassgem install sass（全局安装）测试是否安装成功编译sasssass input.scss output.css，编译结果放入output.css。编译sass命令行单文件转换sass input.scs
2020-05-23 08:19:19
215
原创 github如何实现一个仓库里放置多个项目
问题描述本地d盘下有两个不同的项目：dynamic-smooth-line和MyCounter，分别放置在不同在目录下。现在想将它们推入同一个远程仓CodeMarket，该怎么操作？解决方法将dynamic-smooth-line推入CodeMarketdynamic-smooth-line 上一级目录 js 经 git init 成为 git仓js目录 下会生成 .git目录，删除.git 相当于 撤销 git init进入dynamic-smooth-line，，经git add、gi
2020-05-20 23:53:27
7014
3
原创 ECharts实现动态曲线(下)
ECharts实现动态曲线(中)的遗留问题是，切换标签页，浏览器里的定时器工作受到影响，甚至导致定时器停止工作而丢数据。而切回到原页签时，定时器又恢复正常。这次使用Web Worker解决这个问题，将浏览器端的定时器放到一个Worker对象里。之前了解过，javascript是单线程，Web Worker的存在也不能改变这一本质，因为Web Worker受控于javascript引擎线程，不能操作DOM。不过，Web Worker可以使用XMLHttpRequest，所以会用XMLHttpRequest
2020-05-19 21:35:22
937
原创 ECharts实现动态曲线(中)
文章目录效果图实现遗留问题目录结构浏览器端服务器端ECharts实现动态曲线(上)里，模拟数据是在浏览器端生成的。现在，我们这样做：把模拟数据的生产放到服务器端，浏览器通过Ajax发送请求获取服务端数据。效果图实现服务器使用了一个定时器。只要服务器一启动，定时器就会开始工作，每隔1000ms生成一次新数据。浏览器端也使用了一个定时器，点击“开始”按钮，该定时器才会开启，每间隔250ms就会向服务端发送一次请求，以获取新数据来更新图表。遗留问题服务端定时器的时间间隔是1000ms，浏览器这边
2020-05-19 21:32:25
1301
原创 异步之Ajax
我们了解过浏览器内核的多线程，其中包含 异步http请求线程，该线程就是Ajax所在线程。XMLHttpRequestAjax是用来和服务器通信的，其核心是XMLHttpRequest对象。创建XHR对象现在所有的浏览器都支持XMLHttpRequest，所以直接new XMLHttpRequest()就好。不过，如果你还能用上古董IE版本IE7之前的，那么很厉害的你会使用new ActiveXObject()。下面是红宝书教我们的，如何 跨浏览器创建XHR对象。//跨浏览器创建XHR对象f
2020-05-18 15:49:33
211
原创 frame和 iframe，曾经也是不一样的烟火
如今，框架都很香！在这个追求性能的时代，frameset/frame和iframe这种落伍的东西几乎没人用了吧。没关系，当回看客吧。frameset/frameframe不能独立存在，必须搭配frameset使用<frameset> <frame src="./helloworld.html"></frameset>frame的宽高分别由frameset上的cols属性和rows属性决定frame就是个“妈宝男”，它无法独立生存，必须依赖
2020-05-17 23:23:35
301
原创 构造函数一定要通过new调用吗？
什么叫"作用域安全的构造函数"？如果你有看源码的习惯的话，应该经常会遇到。比如，new Vue(options)，函数Vue就是"作用域安全的构造函数"。 function Vue (options) { if (!(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword'); } //... }比如，http.c
2020-05-17 17:23:02
4052
原创 http
http.createServer//main.jsconst http = require("http");const server = http.createServer(function(req,res){ res.writeHead(200,{"Content-Type":"text/html"}); res.end( "<p>hello world</p>\ <p>have a nice day</.
2020-05-16 15:01:20
323
原创 js的单线程与异步编程
javascript是单线程的javascript可以操作DOM，所以javascript是单线程的。为啥？试想下，如果javascript是多线程的，就比如现在有两个线程，其中一个是给DOM节点添加内容，另一个是删除这个DOM节点，这时浏览器应该听谁的。为了避免这类复杂的同步问题，javascript就被设计成单线程的了。那Web Worker怎么说？虽然允许使用Web Worker创建子线程，但子线程完全受控于主线程，且子线程不能操作DOM，所以Web Worker并没有改变javascrip
2020-05-15 14:56:29
248
原创 初识模块方法模式
看看怎么“泡咖啡”和“泡茶”。//泡咖啡class Coffee{ prepareRecipe(){ this.boilWater(); this.brewCoffeeGrinds(); this.pourInCup(); this.addLemon(); } boilWater(){ console.log("boil water"); } brewCoffeeGrinds(){
2020-05-13 17:36:31
201
原创 初识策略模式
从一个例子开始吧。function Duck(type){ this.type = type;}Duck.prototype.swim = function(){ console.log("I'm swimming");}Duck.prototype.display = function(){ var type = this.type; if(type === "mallard"){ console.log("I'm a mallard duck")
2020-05-13 14:20:53
164
原创 ts的接口
TypeScript中的接口可以用来描述对象外形，可以用来描述函数类型，也可以像java接口那样用来抽象方法。接下来会一一介绍。描述对象外形必需属性interface Animal{ food:string; size:string;}function printInfo(a:Animal){ console.log(a.food,a.size);}接口中，属性名右侧的:表示是必需属性。food:string，food是必需属性，且是字符串类型；size:strin
2020-05-10 23:34:37
950
原创 ts的类
ES6中定义类之前我们了解过ES6的类，可以这样写：class Point{ x; y; constructor(x,y){ this.x = x; this.y = y; } toValue(){ return this.x+ this.y; }}const p = new Point(1,2);console.log(p.toValue());//输出 3TypeScript中定义类c.
2020-05-08 23:07:26
417
原创 【css】text-align:justify实现两端对齐
p{ width:150px;line-height:50px; background:#58a; color:white; text-align:center; }<body><p>hello world</p></body>给p设置line-height...
2020-05-07 17:52:45
13712
1
原创 【css】background
下例子先给下： .box{ width:400px;height:200px; padding:1em; border:1em solid transparent; background:#58a url(./imgs/pic1.gif) no-repeat; }<body><div class...
2020-05-07 12:25:04
457
原创 强大的选择器 虐我千百遍
属性过滤选择器:disabled 选中被禁用元素:disabled{ cursor:not-allowed}[disabled] 选中拥有disabled属性的元素 [disabled]{ cursor:not-allowed; }[aria-disabled="true"] 选中拥有aria-disabled属性，且该属性值为...
2020-05-06 22:08:45
420
原创 for...in for...of 傻傻分不清楚
先看个例子const arr = ["red","green","blue"];// 0 "red"// 1 "green"// 2 "blue"for(let index in arr){ console.log(index,arr[index]);}// "a" "hello"// "b" "world"const obj = {a:"hello",b:"world...
2020-05-06 15:40:36
256
原创 实用的Map
Map和对象类似，区别在于，key不限于字符串，可以为其他类型的数据，比如，是一个对象。var o = { "foo":"bar"}var m = new Map();m.set(o,"hello");console.log(m.get(o));//输出 "hello"基本方法和属性set()get()delete()clear()has()sizecons...
2020-05-06 11:54:38
105
原创 实用的Set
Set和数组类似，区别在于Set中的项不会重复。Set的方法和属性add()delete()clear()has()sizevar s = new Set();s.add("red").add("green").add("blue");console.log(s.size);//输出 3console.log(s.has("red"));//输出 trues.del...
2020-05-06 11:10:39
103
原创 【vue】响应式系统实现原理1
//引用部分源码，对其稍有改动function Vue(options){ this._init(options);}initMixin(Vue);stateMixin(Vue);function stateMixin(Vue){ var dataDef = {}; dataDef.get = function(){ return this._d...
2020-05-05 21:33:27
160
原创 小试java
虽然javascript和java没啥关系，但自从体验了下typescript，感觉typescript就是java了。所以今天就小试java吧。1、安装jdk默认安装在C:\Program Files\Java\jdk1.8.0_1712、配置环境变量JAVA_HOME：JDK的安装路径，C:\Program Files\Java\jdk1.8.0_171；PATH：命令文件所在路径...
2020-05-04 16:34:01
104
原创 订阅者发布者模式的简单实现
以下是订阅者发布者模式的一个简单实现。const PubSub = (function(){ const topics = {}; let id = 0; function subscribe(topic,fn){ topics[topic] = topics[topic] || []; if(typeof fn !==...
2020-05-04 11:13:51
276
原创 【git】上手git
1、github注册(用户名、邮箱)2、git安装3、绑定用户git config --global user.name "用户名"git config --global user.email "邮箱地址"git config --global credential.helper storegit config --global core.autocrlf false本地的.git...
2020-05-02 17:17:04
1503
原创 linux常用命令
Linux新建/文件vi readme.txt或vim readme.txt或touch readme.txt编辑文件/查看文件内容vi readme.txt或vim readme.txt按i键，进入编辑状态；按esc键，:wq保存并退出编辑删除文件rm readme.txt查看目录列表ls -ahWindows新建文件type nul>readme.txt查看文...
2020-05-02 14:15:39
175
spring tool suites安装包
2020-10-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人