前端
文章平均质量分 87
干巴爹兔
前端打工人一枚
展开
-
JS面向对象编程笔记(完):Object方法与模块化
开头笔记视频内容源自B站JavaScript从入门到放弃 第十二章 面向对象编程,笔记为自行整理复习使用,欢迎一同学习交流,转载请通知原作者四、Object方法4.1、Object相关方法介绍1、Object对象本身的方法Object.keys()Object.getOwnPropertyNames()Object.getPrototypeOf()Object.setPrototypeOf()Object.create()其他方法…2、Object的实例方法<body>原创 2020-07-11 22:20:27 · 315 阅读 · 0 评论 -
JS面向对象编程笔记(三):5种继承方式
开头笔记视频内容源自B站JavaScript从入门到放弃 第十二章 面向对象编程,笔记为自行整理复习使用,欢迎一同学习交流,转载请通知原作者三、五种继承3.1、原型链继承js的继承:在原型对象的所有属性和方法都能被实例所共享:<body> <script> //定制一个Animal function Animal() { this.name = "a"; } Animal.prototype.getN原创 2020-07-10 21:11:20 · 232 阅读 · 0 评论 -
JS面向对象编程笔记(二):5种对象创建模式
开头笔记视频内容源自B站JavaScript从入门到放弃 第十二章 面向对象编程,笔记为自行整理复习使用,欢迎一同学习交流,转载请通知原作者二、对象创建模式2.1、对象的字面量方式对象字面量工厂模式构造函数模式构造函数拓展模式寄生构造函数模式稳妥构造函数模式原型模式组合模式动态原型模式对象字面量: 通过new构造函数<body> <script> var obj = new Object();原创 2020-07-09 22:34:21 · 150 阅读 · 0 评论 -
JS面向对象编程笔记(一):原型、原型链
开头笔记视频内容源自B站JavaScript从入门到放弃 第十二章 面向对象编程,笔记为自行整理复习使用,欢迎一同学习交流,转载请通知原作者一、原型、原型链1.1、什么是面向对象?面向对象编程是目前主流的的一个编程的模式,它将我们真实世界各种复杂的关系抽象成了一个个的对象,然后由这些对象的分工合作完成真实世界的模拟。每一个对象都有其功能中心,即完成的任务(方法,属性)。因此面向对象编程(OOP)具有灵活、代码可复用、高度模块化等特点。1.对象是单个实物的抽象2.对象是一个容器,封装了对应的属性和原创 2020-07-08 22:25:01 · 219 阅读 · 0 评论 -
理解JS作用域笔记(完):声明提升、作用域链
开头笔记视频内容源自B站JavaScript从入门到放弃 第九章 深入理解JS作用域,笔记为自行整理复习使用,欢迎一同学习交流,转载请通知原作者三、声明提升3.1、变量声明提升先看一段代码:<body> <script> //没有编译阶段 边解释边执行 a = 2; var a; console.log(a); </script> </body>从直观的角度看,js代码的执行是从原创 2020-07-07 21:22:14 · 256 阅读 · 0 评论 -
理解JS作用域笔记(一):五个阶段、词法作用域
开头笔记视频内容源自B站JavaScript从入门到放弃 第九章 深入理解JS作用域,笔记为自行整理复习使用,欢迎一同学习交流,转载请通知原作者一、内部原理JS中的作用域分为两个作用域,一个是全局作用域,一个是函数作用域,JS引擎有着一套良好的规则去存储变量,并能够很方便的去找到变量,举一个例子:<body> <script> var a = 2; console.log(a); function add() { v原创 2020-07-06 21:10:48 · 292 阅读 · 0 评论 -
Redux、React-Redux入门笔记
一、开头Redux 是 JavaScript 状态容器,提供可预测化的状态管理。它已经事实上的成为了react的状态管理工具。本篇文章我将会用一个计数器的小例子来演示一下Redux开发的流程,由于水平有限,部分内容可能讲的不是很清楚,还望大家批评指正,仓库地址:https://gitee.com/cyh199910/redux-api.git,可以边看代码边理解。二、使用的工具VScodecreate-react-app三、创建react项目使用create-react-app来创建项目np原创 2020-07-05 19:50:10 · 1200 阅读 · 0 评论 -
部署node服务到阿里云
前言本篇文章适用于Node.js(Express后台)+MongoDB开发的项目流程1.远程连接到服务器可以登录阿里云远程连接到自己的服务器,也可以使用git-bash登录:ssh root@公网IP2.更新aptapt update3.确认nginxapt show nginx4.安装nginxapt install nginx -y5.安装MongoDB数据库apt show mongodbapt install -y mongodb-servermongosho原创 2020-07-04 00:30:59 · 183 阅读 · 0 评论 -
React入门笔记(五):Redux、react-redux
八、Redux8.1、redux介绍解决React数据管理(状态管理),用于中大型,数据比较庞大组件之间数据交互多的情况下使用。如果你不知道是否需要使用Redux,那么你就不需要用它!解决组件的数据通信。解决数据和交互较多的应用热镀锌只是一种状态管理的解决方案!store:数据仓库,保存数据的地方state:是一个对象,数据仓库里的所有数据都放到一个state里action:一个动作,可以触发数据改变的方法dispatch:将动作触发成方法reducer:是一个函数,通过获取动作,原创 2020-06-23 21:22:38 · 115 阅读 · 0 评论 -
React入门笔记(四):React生命周期、插槽、路由
五、React生命周期5.1、钩子函数生命周期即是组件从实例化到渲染到最终从页面销毁,整个过程就是生命周期,在这个生命周期中,我们有许多可以调用的事件,我们也俗称为钩子函数生命周期的三个状态:Mounting:将组件插入到dom中将数据更新到dom中unmounting:将组件移除dom生命周期中的钩子函数(方法或事件)ComponentWillMount:组件将要渲染,Ajax,添加动画前的类ComponentDidMount:组件渲染完毕,添加动画ComponentWillRe原创 2020-06-22 21:29:52 · 281 阅读 · 0 评论 -
React入门笔记(三):React状态、事件绑定
四、React状态4.1、React的statereact的state相较于props它可以对状态进行更改,这也是react中很重要的一个部分。在类组件中它在construor函数中定义:constructor(props) { super(props); //状态(数据) -- view //构造函数初始化数据,将需要改变的数据初始化到state中 this.state = { time: new Date().toLocaleTimeString(),原创 2020-06-17 20:31:09 · 219 阅读 · 0 评论 -
React入门笔记(二):JSX样式、组件初识
开头本笔记根据视频进度,由自己手写整理而成,仅限于学习交流。二、React元素渲染2.3、React JSX简单地说,在React中写的JS都可以被称为JSX语言,他对我们的HTML做了扩充。优点:JSX执行更快,编译为JavaScript代码时进行优化类型更安全,编译过程如果出错就不能编译,及时发现错误JSX编写模板更加快速注意:JSX必须要有根节点正常的普通HTML元素要小写,如果是大写的话React会默认认为是组件2.4、JSX表达式JSX中的表达式{}中除了能够放变原创 2020-06-15 21:14:42 · 747 阅读 · 0 评论 -
html引入百度地图插件
一、百度地图开放平台操作1.1.注册账号百度地图开发平台网址:http://lbsyun.baidu.com/,百度账号不是百度地图开放平台账号,需要另外注册。1.2.创建应用登陆后首页上方有一个控制台,点击它:进入之后左侧有一个应用管理,里面有一个我的应用,点击它然后再点击创建应用:应用名称填写,应用类型选择浏览器端:Referer白名单选择*,也可以选择你自己的网址,然后填写完成点击提交。提交后回到我的应用界面,你就会发现新创建的应用出现了:其中访问应用AK就是你自己的密钥,原创 2020-06-11 21:33:58 · 2896 阅读 · 0 评论 -
部署网站到GitHub或者码云
所需工具VS Code、Git、Chrome创建项目1.创建文件夹(工作路径)在自己的系统下创建一个文件夹,进入到文件夹,在地址栏使用cmd打开:如果安装了vscode的话,应该会有一个code的指令,在cmd界面输入code .即可进入,如果不使用命令行也可以直接打开vscode,文件选项里面有个打开文件夹,选择你刚才创建的文件夹即可:2.VS Code编写代码进入VS Code,可以在左侧看到几个图标,第一个是文件资源路径,你可以点击如图所示创建文件:在左侧第三个是VS Code自原创 2020-06-09 23:41:48 · 1253 阅读 · 0 评论 -
React入门笔记(一)
开头本笔记根据视频进度,由自己手写整理而成,仅限于学习交流。一、认识React1.1、什么是ReactReact是Facebook公司构建用户界面的JavaScript库,主要用于构建UI界面,于2013 年开源。1.2、React特点声明式设计高效,采用虚拟DOM来实现DOM的渲染,最大限度地减少DOM的操作。灵活 ,跟其他库灵活搭配使用。JSX,相当于JS里面写HTML,JavaScript语法的扩展。组件化、模块化。代码容易复用,大型项目非常喜欢使用React。单向数据流。没有原创 2020-06-07 20:29:14 · 307 阅读 · 0 评论 -
Vue生成markdown目录索引
开头一直以来我的博客的文章内容页都缺少一个目录索引,由于我的文章使用的文本结构为markdown,而现有的插件无法满足我的需求,所以我只能通过过滤文章提取标题动态生成目录结构,同时通过获取各个标题的据顶部高度来实现点击跳转的功能。本教程的代码实现参考了vue使用marked.js实现markdown转html并提取标题生成目录这篇文章,同时由于我使用Vue结合Vuetify的UI库,部分实现略有不同。预期结果这个是我的最终实现效果代码实现html部分<template> <原创 2020-05-19 16:05:55 · 6895 阅读 · 7 评论 -
Vue首屏加载提升
开头在没有进行优化之前,我的网站加载js文件需要25s,这大大的降低了其他人访问我网站的兴趣,所以适当的优化是不可少的。优化点一压缩成gzip格式:安装插件npm install --save-dev compression-webpack-pluginvue.config.js配置插件const CompressionWebpackPlugin = require('compre...原创 2020-04-29 20:44:45 · 444 阅读 · 0 评论 -
使用Vue3.0 beta4与Vite0.6.0制作一个todoList
安装Vite的Github地址:Vitenpx create-vite-app <project-name>目录结构(README和Licence是自己加的)可以看到vue版本是最新beta版4.0{ "name": "vite6", "version": "0.0.0", "scripts": { "dev": "vite", "build"...原创 2020-04-28 21:21:07 · 1101 阅读 · 0 评论 -
Vite简单上手
Vite介绍Vite,一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。同时不仅有 Vue 文件支持,还搞定了热更新,而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。官网网址:Vite简单上手新建一个index.html,复制GitHub的代...原创 2020-04-26 09:32:00 · 18072 阅读 · 4 评论 -
自己封装的一个Vue全局Toast插件
起因因为自己做的一个项目用到的是Vuetify,然而它本身不支持全局的消息提示,所以参考了网上的教程之后,自己实现了一个Vue的全局Toast消息插件。npm地址:toast_demo_based_vue安装$ npm i toast_demo_based_vue引入import toastRegistry from 'toast_demo_based_vue'Vue.use(toa...原创 2020-04-22 18:52:21 · 457 阅读 · 0 评论 -
Vue分享QQ却只能访问首页的解决方法
之前的代码为了能够分享当前文章到QQ我是这样写的shareToQQ(){ let url = `https://connect.qq.com/widget/shareqq/index.html?url=https://我的网站/#/article/${this.id}&source=https://我的网站.com&title=${this.article.title...原创 2020-04-13 02:49:46 · 513 阅读 · 1 评论 -
分享一个用于Vue的markdown插件
官网:插件演示官网安装npm install markdown-it-vue使用<template> <div> <markdown-it-vue class="md-body" :content="content" /> </div></template><script>import Mar...原创 2020-04-11 21:32:21 · 3047 阅读 · 2 评论