2020年09月_richest_qi

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月

原创【vue】组件之访问

文章目录访问Vue实例，this访问根实例，this.$root访问父实例，this.$parent访问子实例或子元素，this.$refs访问子实例访问子元素依赖注入，provide+inject访问Vue实例，this<body> <div id="root"> <div>{{a}}</div> <div>{{b}}</div>

2020-09-28 11:42:46 404

原创【vue】组件之动态与异步

文章目录动态组件keep-alive异步组件动态导入动态组件<component v-bind:is=""></component>实现动态组件。<body> <div id="root"> <component v-bind:is="currentId"></component> <button v-on:click="handleClick">toggle</butto

2020-09-27 11:47:57 173

要去除最终包中的一堆console，使用插件babel-plugin-transform-remove-console安装插件npm install --save-dev babel-plugin-transform-remove-console使用插件plugins:[ ["transform-remove-console",{ "exclude":["log"] }] ]仅保留console.log，去除其他所有console。const path = require("path");

2020-09-27 10:48:03 1914

原创【koa】上手koa

文章目录基本示例koa脚手架使用koa-generator生成项目骨架深入koa基于http模块支持中间件用async控制异步流程基本示例npm init -ynpm install --save-dev koapackage.json如下{ "name": "demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "node --insp

2020-09-26 17:51:35 123

原创【vue】slot

slot作默认用<body> <div id="root"> <save-button></save-button> </div></body>import Vue from "vue";Vue.component("submit-button",{ template:'<div>\ <button>\ <s

2020-09-26 12:11:10 588

原创动态导入

第一种，async/await + import()async function getComponent(){ const component = await import( /*webpackPreload:true */ `./${self.props.dirname}/app.js`); return component.default || component;}getComponent().then(App => { R

2020-09-25 20:47:58 175

原创【redux】react-redux与reselector

import {connect} from "react-redux";function List(props){ return ( <ul> { props.list.map(item => <ListItem key={item.id} {...item}/>) } </ul> )}const mapStateToProps

2020-09-25 20:47:13 407

原创 canvas绘图

<body> <canvas></canvas></body>在chrome浏览器里，<canvas>的默认尺寸是300*150，display值是inline。要想在canvas这块画布上绘图，首先需要取得绘图上下文，即调用API getContext。getContext('2d')可获得2D上下文对象。2D上下文坐标系以canvas画布左上角为原点。属性fillStyle填充样式strokeStyle描边样式

2020-09-25 20:46:00 2541

原创【vuex】上手vuex

安装vue-loader后，有三个必须:必须安装vue-template-compiler必须安装VueLoaderPlugin，并添加到webpack配置文件的plugins字段plugins:[ new VueLoaderPlugin()]不使用vuex<template> <div> <h4 v-bind:class='["title"]'>{{title}}</h4> <span

2020-09-25 20:45:46 98

原创【vue】自定义事件

v-model自定义组件<body> <div id="root"> <base-checkbox v-model="isDone"> </div></body>import Vue from "vue";Vue.component("base-checkbox",{ model:{ prop:"checked", event:"change" },

2020-09-22 16:57:00 211

原创【vue】上手vue

安装完vue-loader后，必须，npm installl --save-dev vue-template-compiler在webpack配置文件的plugins字段添加VueLoaderPluginconst {VueLoaderPlugin} = require("vue-loader");module.exports = { plugins:[ new VueLoaderPlugin() ]}webpack打包时，默认加载的是vue/dist/vue.runtime.es

2020-09-16 22:15:08 186

原创【css】SVG实现饼图

circle(cx,cy)圆心坐标r圆半径fill填充色stroke描边stroke-width描边宽度。fill区域的径向宽度。它的宽度分布在两个区域：fill区域内和fill区域外，且各占一半，即(stroke-width)/2。dasharray将描边以虚线的形式分成多段。dasharray:<body> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100.

2020-09-13 17:59:15 1363

原创【css】实现饼图

<body> <div class="box"></div> <div class="box2"></div> <div class="box3"></div></body> div{ margin: 5px; } .box{ width: 100px; height: 100px; background-color: lightgolde

2020-09-12 22:37:54 1792

原创异步之Promise

基本原理class Promise{ callbacks = []; constructor(fn){ fn(this._resolve.bind(this)); } then(onFulfilled){ this.callbacks.push(onFulfilled); } _resolve(val){ this.callbacks.forEach(onFulfilled => onFulfille.

2020-09-08 15:52:51 212

原创 Promise对象与async函数

文章目录环境搭建回调函数作参数Promisenew Promise().then()Promise.resolve().then()async...await环境搭建npm init -ynpm install --save express//server.jsconst express = require("express");const server = express();server.use(express.static(__dirname));server.get("/data"

2020-09-07 18:04:57 158

原创【axios+express】Restful接口调试简单举例

目录package.json{ "name": "demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node ./index.js" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "body-parser": "^1.19.0.

2020-09-07 09:50:17 330

原创【css】实现切角

<body> <div class="box"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div></body>div{ margin: 50px;

2020-09-06 14:31:06 2897 1

原创【css】多边形变形

<body> <div class="box">hello</div> </body> .box{ width: 100px; height: 100px; background-color: lightskyblue; transform: skew(-45deg); }水平拉伸div.box，它里面的文字也倾斜了，忽然想到一句话，“身不正，影子也跟着歪”。现在想让容器倾斜，但里面的文字不倾斜，

2020-09-05 18:09:21 520

原创了解TCP协议

TCP协议是传输层协议，它可以将数据从一台计算机完整有序地传输到另一台计算机上。当传输一个HTML文件时，哪怕一个字符或字节传输错误，浏览器都可能无法渲染该页面。IP协议是基于TCP协议的，Node Http服务器是在Node TCP服务器的基础上构建的，像Node里的http.Server就是继承自net.Server。IP是基于数据包传输的，而这些数据包的传输是独立进行的，也就意味着数据包被送达时是无序的，但TCP连接保证了它们的有序性。在TCP连接中，每个IP数据包都会被打上标识，来标识数据.

2020-09-04 22:04:25 330

原创【css】border-image

border-image给元素的边框绘制图像。border-image-sourceborder-image-spliceborder-image-repeatborder-image-widthborder-image-outset<body> <div class="box"></div></body>.box{ width: 100px; height: 100px; background-colo

2020-09-03 22:52:09 285

原创跨域

跨文档消息jsonpwebsocket

2020-09-03 17:55:49 208

原创浏览器本地缓存：localStorage与sessionStorage

localStorage实际开发中，localStorage用的还是挺多的。比如，网页中有个手风琴列表，列表中有“资源管理”、“域管理”、“设备管理”等多个入口，默认进入“资源管理”功能页面。不同的用户关注点不同，有的可能需要进入“域管理”页面，有的则只关注“设备管理”。这时，使用localStorage保存用户上一次最后停留的功能页面对应的id，如此一来，用户下一次进入该网页时，直接显示的就是他们关注的功能页面，而不需要到手风琴列表上去切换入口。用localStorage来记录用户习惯，可以改善用

2020-09-02 22:01:29 714

原创【css】animation

animation-name@keyframes指定的关键帧名称animation-duration动画从开始到结束持续多长时间animation-timing-function调速函数，默认是ease。它决定了在整段时间里动画是如何推进的。ease低速进入，然后突然加速，时间逝去50%，动画已推进至80%，随后减速至动画结束。ease-in时间逝去50%，动画已推进至32%，随后加速ease-out时间逝去50%，动画已推进至68%，随后减速ease-in-o.

2020-09-02 21:08:44 585

原创【css】棋盘的svg实现

linear-gradient可以实现棋盘。其实还有一个更简单的方式，那就是SVG。<body> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25"> <rect x="50" width="50" height="50"></rect> <rect y="50" width="50" height="50"&g

2020-09-02 16:54:32 426

原创 js作用域与垃圾自动回收机制

js作用域有两种，函数限定的作用域函数内定义的变量，只能在函数内访问，函数外不能访问子域访问父域函数中定义函数，就是子域，也就是闭包。搜索变量时，只能沿着作用域链往上搜索，不能沿着作用域链往下搜索。函数执行完毕后，函数内的变量就会自动销毁，内存中仅保存全局变量。对局部变量，即函数内的变量，函数执行完毕后，会自动解除引用对全局变量，一旦不再使用，最好置为null以解除引用，否则，容易造成内存泄漏内存泄露，就是不再使用的变量仍然占用着内存。...

2020-09-02 10:36:39 306

原创【css】table页码

一个比较好的实践是：<svg fill="currentColor">。ul{ list-style: none; margin: 0; padding: 0;}.pagination{ float:right; font-size: 14px; color: rgba(0,0,0,.85); margin: 16px 0; line-height: 36px;}.previous,.next,.item{ d

2020-09-01 23:15:02 396

原创单例模式

const Singleton = function(){ let instance; function init(){ let word = "have a nice day"; let getWord = () => word; return { getWord } } return { getInstance:function(){ if

2020-09-01 18:04:21 209

原创类的继承

文章目录类function的继承原型链继承借用构造函数组合继承原型式继承寄生式继承寄生式组合继承类class的继承类function的继承原型链继承原型链继承，即子类的原型是其父类的一个实例。子类继承父类的所有属性和方法。function Person(name,age){ this.name = name; this.age = age;}Person.prototype.sayName = function(){ console.log(this.name);}

2020-09-01 16:22:01 119

原创类（function/class）

文章目录工厂函数构造函数构造函数可能存在的问题寄生构造函数作用域安全的构造函数构造函数+原型模式工厂函数function createPerson(name,age){ var o = {}; o.name = name; o.age = age; o.sayName = function(){ console.log(this.name); } return o;}const person = createPerson("Nicho

2020-09-01 11:36:57 413