- 博客(66)
- 收藏
- 关注
RSS订阅原创 RXJS学习笔记
RXJS简介rxjs通过observable序列编写异步和基于事件的程序。它的内容可以概括为一个核心三个重点，核心是Observable和Operators ,重点是observer Subject schedulers。Observable（可观察对象）Observable一个新的推送体系，它是多个值的生产者，并将值推送给观察者；Observable 像是没有参数，但可以泛化为多个值的函数Observable与function的共同点例如：functionfunction foo() {
2020-12-20 20:13:19
233
原创 pwa
PWA申请项目ID访问PWA离线平台，选择新项目接入，填入项目名称新建项目，找到刚刚新建的项目，获取项目ID。安装依赖tnpm i @tencent/pwa-plus-plugin --save-devtnpm i @tencent/pwa-plus-helper --save引入插件feflow.js中引入插件// webpack.config.jsconst PWAPlusPlugin = require('@tencent/pwa-plus-plugin');const con
2020-10-29 16:47:59
617
1
原创 Protobuf
介绍Protobuf全称是Google Protocol Buffer，看看官方文档给出的定义和描述：它是一种语言无关、平台无关、可扩展的序列化结构数据的方法，它可用于（数据）通信协议、数据存储等。它是一种灵活，高效，自动化机制的结构数据序列化方法－可类比 XML，但是比 XML 更小（3 ~ 10倍）、更快（20 ~ 100倍）、更为简单。你可以定义数据的结构，然后使用特殊生成的源代码轻松的在各种数据流中使用各种语言进行编写和读取结构数据。你甚至可以更新数据结构，而不破坏由旧数据结构编译的已部署程序
2020-08-10 17:01:53
235
原创 浏览器机制的前世今生
浏览器是多进程的，当打开多个tab页面的时候在任务管理器中可以发现有多个浏览器进程正在运行，并且占用了很大的内存。为什么浏览器需要使用多进程呢，其实也有一些的单进程浏览器譬如火狐世界之窗（可以设置为单进程或者多进程）等等。单进程浏览器的时代：单进程浏览器就是将浏览器所有功能模块都是运行在同一个进程中单进程浏览器带来的问题：不稳定性：一旦插件，渲染引擎等等任何一个模块出现了问题，都会引起浏览器的崩溃不流畅：同一时间只有一个模块可以运行不安全：插件和脚本中容易存在恶意软件，进而控制自己的电脑多进程
2020-08-10 16:54:06
189
原创 性能优化黑科技：Progressive Web Application（PWA）
1.什么是PWAProgressive Web Application，全称“渐进式网页应用”，是谷歌主导的一种新时代网页（应用）简单的理解，就是网页，可以通过某种方式达到离线使用，还可以拥有类似其他手机app一样拥有一个logo，名称，启动页面等等。PWA的特点主要有一下可靠 - 即使在网络不稳定甚至断网的环境下，也能瞬间加载并展现用户体验 - 快速响应，具有平滑的过渡动画及用户操作的反馈用户黏性 - 和 Native App 一样，可以被添加到桌面，能接受离线通知，具有沉浸式的用户体验
2020-06-01 10:52:41
1282
原创 React 自定义Hook4.4
自定义 Hook通过自定义 Hook，可以将组件逻辑提取到可重用的函数中提取自定义 Hook当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。而组件和 Hook 都是函数，所以也同样适用这种方式。自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。如下示例中的自定义useFriendStatus的Hookimport { useState, useEffect } from 'react';function useFriendStatus
2020-05-17 22:57:49
272
原创 React Hook4.3
Hook是什么增强了函数组件的功能状态生命周期hook并不能提供全部生命周期引用使用 State Hook在函数组件中不能使用constructor，不能绑定this来调用函数，可以通过hook模拟this.state,来实现和class组件相似的功能。实例：//引入useState，这个useState就是hookimport React, { useState } from 'react'function App(){ // let arr = useState(0) 初始值
2020-05-17 22:26:46
130
原创 React Router4.2
通过使用React Router 实现一个简单的登录Demo，提升对React路由的熟练度。login.jsximport React, { Component } from "react";class inputs extends Component { //设置state数据，通过onChange绑定到对应的input标签中 constructor() { super() this.state = { 'username': ''
2020-05-17 20:44:05
144
原创 React Router4.1
基本路由配置<Router> <Route path="/" component={App}> <Route path="about" component={About} /> <Route path="inbox" component={Inbox}> <Route path="messages/:id" component={Message} /> </Route>
2020-05-17 20:43:48
202
原创 React Context3.3
ContextContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。在React应用中，数据是通过props自上而下也就是从父到子进行传递的，这个方式在某些需求下就显得比较繁琐，比如很多公共组件都需要的属性和数据。Context提供了一种在组件之间共享此类值的方式，而不需要再通过组件书对数据进行逐层传递props// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。// 为当前的 theme 创建一个 context（“ligh
2020-05-11 10:37:06
152
原创 React ref转发3.4
Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧转发 refs 到 DOM 组件Ref 转发是一个可选特性，其允许某些组件接收 ref，并将其向下传递（换句话说，“转发”它）给子组件在下面的示例中，FancyButton 使用 React.forwardRef 来获取传递给它的 ref，然后转发到它渲染的 DOM button：const FancyButton = React.forwardRef((props, ref) => ( <button ref={re
2020-05-11 10:36:46
178
原创 React Fragments3.5
React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment> );}动机一种常见模式是组件返回一个子元素列表。以此 React 代码片段为例c
2020-05-11 10:36:26
108
原创 React 3.2代码分割
打包大多数 React 应用都会使用 Webpack，Rollup 或 Browserify 这类的构建工具来打包文件。 打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个 “bundle”。 接着在页面上引入该 bundle，整个应用即可一次性加载import应用中引入代码分割的最佳方式是通过动态 import() 语法。使用前：import { add } from './math';console.log(add(16, 26));使用后：import("./math")
2020-05-10 22:22:18
146
原创 React router 3.1
React router 安装npm install --save react-router使用一个支持 CommonJS 或 ES2015 的模块管理器，例如 webpack：// 使用 ES6 的转译器，如 babelimport { Router, Route, Link } from 'react-router'// 不使用 ES6 的转译器var ReactRouter = require('react-router')var Router = ReactRouter.Router
2020-05-10 22:08:43
122
原创 React 状态提升2.6
React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件.列入官网的温度计算的demo先写入一个温度输入组件class TemperatureInput extends React.Component { state = { temperature: '' }; hand...
2020-05-04 12:06:01
121
原创 React 组合vs继承 2.5
包含关系有些组件无法提前知晓它们子组件的具体内容。在 Sidebar（侧边栏）和 Dialog（对话框）等展现通用容器（box）的组件中特别容易遇到这种情况我们建议这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中function FancyBorder(props) { return ( <div className={'FancyBor...
2020-05-04 11:50:15
125
原创 React 表单2.4
但大多数情况下，使用 JavaScript 函数可以很方便的处理表单的提交， 同时还可以访问用户填写的表单数据。实现这种效果的标准方式是使用“受控组件”。受控组件我对受控组件的理解就是input相关html标签的双向绑定的实现，其原理类似vue中的v-model 的原理，通过 value={this.state.value} 来实现input实时等于state中的value值，然后在 onCh...
2020-05-04 11:34:34
162
原创 React 列表 & Key 2.3
我们可以使用 map() 函数让数组中的每一项变双倍，然后我们得到了一个新的列表 doubled 并打印出来const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled);在 React 中，把数组转化为元素列表的过程是相似的。渲染多个...
2020-05-04 10:52:41
129
原创 React 条件渲染2.2
React 的条件渲染和 JavaScript 的方式一样，使用运算符 if 或者 条件运算符 去创建元素来表现当前的状态，然后让 React 去根据它们来更新 UIfunction Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting /&...
2020-05-04 10:35:50
151
原创 React 事件处理2.1
React的事件命名为小驼峰式使用 JSX 语法时需要传入一个函数作为事件处理函数例如<button onClick={activateLasers}> Activate Lasers</button>并且在 React 中不能通过返回 false 来的方式阻止默认行为，必须显示调用 preventDefault,例如function Action...
2020-05-03 21:48:29
122
原创 React state&生命周期
将函数组件转化为class组件通过五步将函数组件转化为class组件创建一个同名的 ES6 class，并且继承于 React.Component。添加一个空的 render() 方法。将函数体移动到 render() 方法之中。在 render() 方法中使用 this.props 替换 props。删除剩余的空函数声明。class Welcome extends React....
2020-04-26 20:35:47
225
原创 React 1.1 JSX语法
1.将React引入到页面中这个引入方法是通过远程的服务器提供的js库。通过 script 标签引入 react<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script><script src="https://cdnjs.cloudflare.com...
2020-04-22 16:56:12
105
原创 react 1.0思想
1.React和Vue的相爱相杀组件化：Vue：通过 .vue 文件创建组件template 创建组件结构script 组件行为，数据，回调函数等等style 样式React：React中也有组件化概念，但是并没有像Vue中的组件化模板文件，在React中，一切都是通过Js来表现的。2.Dom和虚拟DomDom是浏览器中通过js来表示的页面上的元素，所提供操作Dom的API虚...
2020-04-22 15:03:51
125
原创 videojs(生命周期，自定义控制台，常用API)
Videojs初始化video对象<video :id="id" class="video-js vjs-default-skin" data-setup></video>this.player = videojs(this.id,{ autoplay : true,//播放器准备好之后，是否自动播放，默认false controls : false//是否拥有...
2020-03-06 22:29:11
2451
2
原创 常用命令
多人合作开发git add .git commit -m""git checkout devgit pull orgin mastergit checkout 分支git mergegit pusj origin 分支阿里云服务器启动node（能够退出命令行后node继续运行）cd到app的文件夹nohup node app.js &exitNginx重启Ng...
2019-10-31 21:27:46
138
原创 Button组件-实现基本功能（Vue-UI组件库）
组件有添加新成员了，他就是基本的button,不做过多详述，仅仅记录一下防止忘记暂时的功能：1.输入size选择button组建的大小2.输入样式改变button组件的颜色3.一些基本的样式<template> <div> <div :class="['zypc-button',btSize,btType]" ...
2019-10-31 20:46:00
1448
原创 Input组件-实现双向绑定以及相关样式（Vue-UI组件库）
记录一下组件库第一个发布的的input组件1.实现双向绑定的方法说到双向绑定就要先了解Vue中的v-model的实现机制<input type="text" v-model="value" />这段代码学习过Vue的小伙伴应该会很熟悉，input中的值会和value进行双向绑定，即只要input中的值改变或者value值改变都会使另一个值相应改变。其实v-model是Vue...
2019-10-31 20:39:52
2084
原创 在vue项目中使用mock拦截ajax生成虚拟数据
（1024程序员节快乐，我要徽章徽章啊哈哈哈，）咳咳，七个多月前看的原生js使用mockjs拦截ajax，现在忘记的已经差不多了，今天记录一下在vue使用mock吧。一、下载首先下载mockjsnpm install mockjs二、配置在项目目录src下创建一个mock的文件夹，在在该文件夹下创建index.js文件，其中写的是拦截请求的url，以及返回的相应的数据//引入moc...
2019-10-24 16:49:35
468
原创 使用vue-cli创建发布个人的ui组件库（类似iview,element，ui）
最近在一篇满满女朋友的文章中，回忆起了暑假学长分配的重要任务需要等待我去完成。好好，事不宜迟开始搞。一、创建一个项目首先使用vue-cli创建一个webpack 的项目vue init webpack zypc-componentsbalabala,创建完成之后，下载依赖npm install二、将项目放到github上将项目放到git上git initgit remote ...
2019-10-23 18:04:52
749
原创 阿里云使用nginx配置vue项目上线（nginx.conf的配置）
将vue项目进行打包：npm run build在文件夹中会出现一个dist文件夹，这就是打好的包。在阿里云上下载安装nginx后，在/usr/local文件夹中会有一个nginx文件夹，其中的conf文件夹中的nginx.conf就是nginx的配置文件。在http模块配置location location / { root /root/app/dist/;...
2019-09-29 21:41:50
1038
2
原创 vue 音乐播放器，获取父级组件audio播放进度，并且根据进度条改变播放进度
在写一个网易云音乐的历程中经历了各种困难，比如说音乐播放器，由于要让音乐在全局播放，所以讲audio标签放在最父级的组件中，然后到了播放音乐歌词路由（是放有audio标签页面的子组件）就无法将进度和进度条数据进行双向绑定，经过一早上的钻研，终于解决了这个问题。首先，子组件：父组件：...
2019-08-12 11:48:11
2526
3
原创 如何使css3动画重新执行
日常遇到问题，使用css3动画的时候，想要让动画能够重新执行，答案在百度不好找，不过最后还是ojbk了。通过删除类名，再增加类名来达到重新开始动画。<img class="musicImg musicImage" :src="listen.musicPic" alt="">.musicImg{ width:1.2rem; height:1.2rem; bo...
2019-08-07 19:47:12
4858
4
转载 vue项目加顶部蒙层移动端禁止页面滑动问题
转载https://blog.csdn.net/weixin_36517727/article/details/79991113直接在蒙层所在div上加@touchmove.prevent就好了如下：<div class="masktop" @touchmove.prevent></div>
2019-07-30 21:00:28
688
原创 后台返回错误码并且接收错误码以及数据的方式
之前和小伙伴们一起写项目的时候，后台的兄弟们接口的返回一班是一个对象，或者一个数组。比如说检测是否登录，小伙伴们的接口会返回状态码为200，返回值为一个对象，其中有有关登录状态，已登录或者未登录，也就是说只要接口能够被访问，那么返回的状态码一定是200的。这次在github上拉了一个网易云音乐的后台代码，这个接口只有在已登录时返回状态码200，如果错误就会返回301错误状态码。如下在这里插入图...
2019-07-30 10:30:42
3935
原创 使用this.$router.push({path:'/'})报错:TypeError: Cannot read property '$router' of undefined
今天使用this.$router.push突然报错了，经过查阅资料，是因为this的指向有问题只需要在函数前将this记录下来，即可。
2019-07-30 10:16:21
14836
2
原创 vue-cli脚手架，前端通过代理有效解决跨域问题
通过脚手架搭建起来的vue项目，遇到了常见的跨域问题，之前做项目跨域都是后台进行解决，这次因为是个人项目，只能 “自己动手，丰衣足食”在根目录创建一个vue.config.js文件module.exports = { devServer:{ proxy:{ '/api' : { target : 'http:/...
2019-07-29 10:40:28
402
转载 Echarts 图表饼状图设置
在做项目的时候被提出了使用饼状图来显示人员分布情况，用到了echarts，本篇博客是学习记录博客，经别的博客改编：https://blog.csdn.net/sleepwalker_1992/article/details/82532210 原文戳这儿，属性讲的都很细致，我只是修改了一些属性而已。组件的代码（上面都有属性的解释，容易看懂）：<!-- --><templ...
2019-07-20 11:34:54
391
原创 gitlab使用笔记(关于基本的上传以及拉取和合并)
今天第一次使用gitlab，在本地创建分支，再push到远程，来创建一个新的分支。和github协同开发操作一样，再push到自己的分支上之后，在进行合并进入选择要合并的分支信息如果出现表单什么的错误，就在上上图中删除open的合并框，在进行merge...
2019-06-17 12:24:11
1418
2
原创 Iviw 组件库中侧边栏刷新，高亮不能更新的问题
iview中active-name是对于选项中的name，表示高亮那个选项，在组件初始化之后，判断当前路由与侧边栏相对应的路由是否一致，再将active-name绑定即可侧边栏组件信息<template> <Menu :active-name="menuList" theme="light" width="100%" hide-trigge...
2019-06-16 14:11:51
270
原创 git push 出现报错error: failed to push some refs to
今天向git提交代码的时候出现了报错 ! [rejected] master -> master (fetch first)error: failed to push some refs to '巴拉巴拉巴拉'hint: Updates were rejected because the remote contains work that you dohint: not...
2019-06-03 19:42:56
2710
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人