- 博客(66)
- 收藏
- 关注
RSS订阅原创 简易mvvvm帮助理解双向绑定
基于观察者模式和Object.defineProperty() 实现简易的mvvm观察模式的实现我上篇文章已经写了观察者模式我们知道vue2.0版本的主要核心就是Object.defineProperty() 这个api，做相应的数据的劫持来实现数据的双向绑定。但是在vue3.0版本，以及不是用Object.defineProperty() 这个api了，vue3.0版本用的是Porxy(), Porxy相当于Object.defineProperty的有事在于Object.defineProper
2021-05-15 20:01:21
360
2
原创 观察者模式
观察者模式定义观察者模式（又被称为发布-订阅（Publish/Subscribe）模式，属于行为型模式的一种，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时，会通知所有的观察者对象，使他们能够自动更新自己大家可以先模拟一个场景：pg-四哥是保安队的队长，权利特别大，他手底下有好多的小弟听他使唤。四哥每做一个动作就会又对应的小弟去做某件事情。有一个专门管家专门把四哥做的每个动作分配给相应的小弟。 // 这里每个函数就代表这每个小弟 function
2021-05-15 19:44:07
214
3
原创 Object.defineProperty
Object.defineProperty定义：该方法是在对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。监听对象下的某一个属性，做数据劫持处理。Object.defineProperty(obj, prop, descriptor)（1） 参一：要定义属性的对象。（2） 参二：要定义或修改的属性的名称或 Symbol （被监听的属性）。（3） 参三：要定义或修改的属性描述符 Object.defineProperty(obj, 'b', { value: 3
2021-05-15 19:30:20
160
原创 Vue3入门
Vue3带来的新变化性能提升首次渲染更快diff算法更快内存占用更少打包体积变小更好的Typescript支持Composition API （重点）在使用vue2.x版本开发较复杂的组件时，逻辑难以复用，组合式api的出现可以解决此类问题3. 破坏性语法更新vue3.0对于2.0版本的大部分语法都是可以兼容的，但是也有一些破坏性的语法更新，这个大家要格外注意实例方法$on移除 （eventBus现有实现模式不再支持 可以使用三方插件替代）过滤器filter
2021-05-12 20:11:48
878
5
原创 列表进入详情页的传参问题
列表进入详情页的传参问题。例如商品列表页面前往商品详情页面，需要传一个商品id;<router-link :to="{path: 'detail', query: {id: 1}}">前往detail页面复制代码c页面的路径为http://localhost:8080/#/detail?id=1，可以看到传了一个参数id=1，并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应的详情数据，获取id的方式是:this.$route.query.idvue传参方式有：que
2021-05-12 19:53:41
555
1
原创 vue中的状态管理vuex
vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化vuex解决了什么问题随着应用程序规模的扩大，应用程序使用的数据量也随之增长，我们会遇到俩个非常明显的问题如何确保在不同组件中的数据保持同步如何确保每次对于数据的修改都是可追踪的如果上面的专业描述太过专业我们有点摸不着头脑，看一个现实中的例子，一个户外商店有两名员工，张三和李四，在一天的早上，他们分别对帐篷的数量做了一次盘点
2021-05-12 18:18:09
323
3
原创 JavaScript中函数的length属性
JavaScript中函数的length属性length是函数的一个属性函数的length是js函数对象的一个属性，函数的length代表形参的个数（即有多少必传参数）形参的数量不包括不包括剩余参数的个数，仅包括“第一个具有默认值之前的参数个数”如：console.log("function(a = 1, b, c)",(function(a = 1, b, c) {}).length); // 0解释： 形参a有默认值为1，a之前并没有参数，所以length为0console.l
2021-04-26 16:07:50
4904
1
原创 函数柯里化（自己的理解）
柯里化把接受多个参数的函数变换成一系列接受单一参数（从最初函数的第一个参数开始）的函数的技术。（注意是单一参数）题目：如何实现 multi(2)(3)(4)=24?大家一看见这个题目脑海中首先浮现的解决方案是，闭包。闭包实现方案function multi(a) { return function (b) { return function (c) { return a * b * c } } } l
2021-04-26 15:06:12
136
原创 awaitTo处理
目标: 让await 可以接收失败的情况原理: then()和catch()里的return 都会返回给下一个then函数// 1. 基础理解: then和catch里return都会赋予给下个then, 而await可以拿到then的结果// let pA = new Promise((resolve, reject) => {// setTimeout(() => {// // resolve("假设ajax成功")// reject(.
2021-04-25 10:14:20
1121
原创 vue枚举类型转换（策略模式）
vue枚举类型转换分析：后端给到我们前端的是一个数字类型的状态码，每一个状态码（1、2）对应有中文我们通过枚举的方式转换成文字即可可以在methods中定义方法例如： import EmployeeEnum from '@/constant/employees'在methods中定义方法methods: { formatEmployment(id) { // 对后端返回的类型的编码进行翻译 ，还原成 中文 const rs = EmployeeEnum.
2021-04-23 14:59:55
1275
1
原创 用Vue.use来优化全局组件注册
用Vue.use来优化全局组件注册它是Vue提供一个静态方法，用来向Vue注册插件。文档: https://cn.vuejs.org/v2/api/#Vue-use格式Vue.use(obj)说明:Vue.use 可以接收一个对象，Vue.use(obj)对象中需要提供一个 install 函数在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue构造器以插件格式注册全局组件提供统一注册的入口文件src/componets/index.js
2021-04-22 20:45:49
143
原创 vue中的路由-vue-router
安装yarn add vue-router导入路由import VueRouter from 'vue-router'使用路由插件// 在vue中，使用使用vue的插件，都需要调用Vue.use()Vue.use(VueRouter)创建路由规则数组const routes = [ { path: "/home", component: MyHome }, { path: "/movie", component: MyMovi.
2021-04-20 13:58:53
175
原创 vue中的$nextTick和$refs
ref和$refs使用利用 ref 和 $refs 可以用于获取 dom 元素, 或者组件实例获取到原生DOM标签<template> <div> <h1 ref="myH">1. ref获取原生dom</h1> <button @click="fn">点击修改上面内容</button> </div></template><script>export defa
2021-04-20 11:41:48
618
3
原创 Vue生命周期
Vue实例从创建到销毁的过程，就是Vue的生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。beforeCreate在实例初始化之后，数据观测（data observer）和event / watcher 事件配置之前被调用（在这里是不能访问vue中data，methods…中的数据及方法的）created在实例创建完成后立即被调用，在这一步，实例已经完成了以下配置：数据观测（data observer）属性方法的.
2021-04-20 11:29:35
469
4
原创 vue中的计算属性，过滤器，侦听器
vue计算属性-computed语法:computed: { "计算属性名" () { return "值" }}例如：让页面显示两个数字和和<template> <div> <p>和为: {{ num }}</p> </div></template><script>export default { data() { return {
2021-04-20 10:39:44
214
原创 vue组件通信-EventBus
vue组件通信-EventBus常用于跨组件通信时使用两个组件的关系非常的复杂，通过父子组件通讯是非常麻烦的。这时候可以使用通用的组件通讯方案：事件总线（event-bus)// 1. 创建事件总线 main.jsconst bus = new Vue()// 把bus挂载到了Vue的原型上, 保证所有的组件都能通过 this.$bus访问到事件总线Vue.prototype.$bus = bus// 2. 订阅事件 - 接收值this.$bus.$on('事件名', 事件回调函数)t
2021-04-20 10:07:46
272
原创 vue父子组件通信
vue父子组件通信vue父子组件通信_父向子-props步骤:在父组件中向子组件传入相应的数据在子组件中用props接受父组件传入的数据父组件中的代码<template> <div> <!-- 加: 后面是vue变量数据 不加: 后面认为是字符串 --> <MyProduct title="超级好吃的口水鸡" price="50" :info="msg"></MyProduct>
2021-04-20 09:45:32
103
原创 vue中的自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxx局部注册及使用局部注册只能在当前组件中使用<template> <div> <input type="text" v-focus /> </div></template><script>export default { // 局部注册 directives: { focus: {
2021-04-16 21:01:41
157
原创 插槽slot
vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽组件插槽口诀:组件内用占位使用组件时夹着的地方, 传入标签替换slot插槽默认内容如果外面不给传, 想给个默认显示内容夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用夹着的内容在原地显示<slot>默认内容</slot>组件进阶 - 具名插槽传入的标签可以分别派发给不同的slot位置slot的name属性起插槽名, 使用组件时, template配合#插
2021-04-16 20:50:27
158
原创 js中的节流个防抖
节流：在一定时间内函数只执行一次function throttle(func, waitTime) { let lock = false return function (e) { if (lock) { return } lock = true setTimeout(() => { func.apply(this, arguments) lock = false }, wai
2021-04-13 20:17:03
118
2
原创 js中的几种继承方式
原型链继承function Animal() { this.color = ['red', 'yellow'] } Animal.prototype.getColor = function() { this.color.push('22') } function Dog() {} Dog.prototype = new Animal() let dog1 = new Dog() dog1.color.push('blue')
2021-04-13 19:20:29
104
1
原创 vue指令
1.vue基础-插值表达式语法: {{ 表达式 }}<template> <div> <h1>{{ msg }}</h1> <h2>{{ obj.name }}</h2> <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3> </div></template><script>export defa
2021-03-29 17:06:12
243
原创 async/await
ES7：async/await关键字async 和 await 是 ES2017 中提出来的。异步操作是 JavaScript 编程的麻烦事，麻烦到一直有人提出各种各样的方案，试图解决这个问题。从最早的回调函数，到 Promise 对象，每次都有所改进，但又让人觉得不彻底。它们都有额外的复杂性，都需要理解抽象的底层运行机制。不就是读取一个文件吗，干嘛要搞得这么复杂？async 函数就是隧道尽头的亮光，很多人认为它是异步操作的终极解决方案；ES2017提供了async和await关键
2021-03-10 22:33:06
378
6
原创 Promise
Promise基本使用及链式语法糖ES6的语法：注意是JS的核心语法，不是node运行环境所有，也是和 {} []一样，前后端都是可以使用的！Promise是什么：构造函数；直译【承诺】意义：解决回调黑洞的问题，以更为合适的方式写异步代码，目标是更加容易维护代码；写还是异步代码；形式：发生改变，看起来更加舒服！更加好维护！1.对异步的代码进行包装，设置【承诺】// 实例化一个Promise；// 1.函数作为参数，// 2.而该函数又有两个形参，
2021-03-10 22:29:46
69
1
原创 cors解决跨域问题
由于XHR对象被W3C标准化之后，提出了很多XHR Level2的新构想，其中新增了很多新方法（onload、response…）和CORS跨域资源共享。浏览器升级后开始支持CORS方案。CORS才是解决跨域的真正解决方案。代码：前端：正常请求；后台：设置请求头；// ---------------------------------前端代码$.ajax({ url: 'http://localhost:3006/api/cors', success: fun..
2021-03-10 22:22:01
147
2
原创 中间件
中间件内置中间件：app.use(express.urlencoded({ extended: false })); 处理POST请求的app.use(express.static('./webapp')); 当前app.js同目录下webapp文件夹作为静态资源访问第三方中间件：比如multer、express-jwt、express-session、....【实际开发中，自己写中间件的机会并不大，一般都有对应的第三方中间件。】介绍中间件(Middleware )，特指业务流程的
2021-03-08 20:34:45
106
1
原创 路由
路由传统：性能低下、不易维护与升级需求：提高性能，更加便于维护express框架自带路由模块：设计思路把类似的url地址进行分类；且类似的url地址开头是一样的；类似的url地址放在单独的JS文件；这些文件全部引入到主JS文件内；当用户请求过来时，进行请求开头的匹配，匹配后进入相应的JS的文件内再找相应的url地址；实现：设计专门的文件夹，放专门的设计url地址的JS文件routers/login.js// 固定1. 加载 express const exp
2021-03-08 20:20:58
92
2
原创 封装Mysql
从 上面 MySQL 模块可以看出，代码是真的非常的复杂的多；而且上面只是设计的‘一个url接口路径！封装mysql，然后导出：function fn(sql, params, callback) {// --------------------------------------存入数据库// 1. 加载 mysql 模块const mysql = require('mysql');// 2. 连接到MySQL服务器const conn = mysql.createConnecti..
2021-03-08 19:43:12
101
1
原创 http -请求（get和post）
GET我们根据请求方式判断是否是GET方式的请求，并且根据前请求的url（即接口地址）判断是否是该接口，如果满足条件，则做出响应。// 1.导入模块const http = require(“http”);const qs = require(“querystring”);// 2.创建server对象const server = http.createServer();// 3.占用端口3000server.listen(3000, function() {console.log(“
2021-03-05 20:54:56
194
1
原创 http-请求
* http 服务器模块，可以使用http模块 搭建服务器让本地电脑：也能像服务器一样提供服务！什么是服务器：表现形式就是 ip+port的形式 打开前端的页面；大事件跟多接口地址 http://api-breakingnews-web.itheima.net/api/reguser域名背后：IP+PORT为什么？各种网页、各种服务背后：都是这样的设计！// 1.导入模块const http = require("http");// 2.创建server对象cons
2021-03-05 20:49:31
355
原创 querystring
处理查询字符串（id=1&name=zs&age=20）处理模块// 作用：处理 名1=值1&名2=值2 查询字符串// 1.导入模块let qs = require("querystring");// 2.解析字符串：返回解析后结果！对象！let str = "id=1&name=zs&age=20";let res = qs.parse(str);console.log(res); // {id: 1, name:zs, age: 20 }
2021-03-05 20:41:45
71
原创 fs
文件系统，对真实的文件/文件夹的操作 file system// fs :file system 文件系统!// 操作真实的文件 / 文件夹// // 1.导入模块，对象；let fs = require("fs");// 2.方法:// 方法1：一般了解：判断路径真实是否存在// 参数：路径字符串，回调函数！// fs.access("./00-a.txt", function(res) {// // res得到对象，路径不存在！// // res得到n
2021-03-05 20:35:41
84
原创 path
path **仅仅用来处理路径的字符串，不一定存在对应的真实的物理文件// 内置API模块：// 1.导入模块；对象！字符串写对 "path"let path = require("path");// 2.使用功能：属性和方法集合体；// 作用：path出来路径字符串的！路径是否真实不管！// 作用：得到路径最后一部分 文件名// let res = path.basename("./aa/bb/cc/dd/ee.txt");// console.log(res
2021-03-05 20:34:12
86
原创 javascript中几种为false的值
如果JavaScript预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false，其他值都视为true。undefinednullfalse0NaN""或’’（空字符串）需要特别注意的是，空数组（[]）和空对象（{}）对应的布尔值，都是true。...
2021-03-04 16:15:15
418
4
原创 formData-上传进度
目的：为了看上传进度，不看上传完成后怎么了！ let form = document.querySelector("form"); let info = document.querySelector(".info"); //百分数 let bar = document.querySelector(".bar"); // 进度条 form.onsubmit = function(e) { e.preventDefault(); // 2.收集表单数据：大段文字 和 文
2021-02-28 17:15:54
257
原创 formData-文件上传
注册事件 let form = document.querySelector("form"); form.onsubmit = function(e) { e.preventDefault(); // 2.收集表单数据：大段文字 或 文件 let fd = new FormData(this); // 表单原生都有name属性！ // 不推荐方式：手动收集数据！如何收集图片? 了解 // let fd = new FormData(); // le
2021-02-28 17:11:27
67
原创 formData-数据上传
formData：POST传参的另外的一种形式！适合大段文字和文件类型；演示：传少量的数据的时候，感受中文没有做转化！ // 1.注册提交事件 let form = document.querySelector("form"); form.onsubmit = function(e) { e.preventDefault();// 2.收集数据：使用formData传递数据：（下面是formData的语法）// *******************************
2021-02-28 17:04:33
160
原创 cropper：图片裁剪工具
1.图片裁剪工具；基本初始化使用；$('#image').cropper({ aspectRatio: 1 / 1, // 纵横比:正方形 preview: '.img-preview' // 指定预览区的类名（css选择器字符串）});2.配合选择图片按钮，把cropper初始化的图片地址替换；$("#file").change(function() { // 2.1.收集图片信息对象（不常用）回顾：formData 收集图片数据！fd.append("avatar",图片信息对
2021-02-28 16:55:57
480
1
原创 form表单提交推荐
<div> 图书名称： <input type="text" name="bookname" id="bookname"></div><div> 图书作者： <input type="text" name="author" id="author"></div><div> 图书出版社： <input type="text" name="publisher" id="publisher...
2021-02-21 17:34:10
100
原创 原生Ajax的get和post请求
get// 1.xhr实例化let xhr = new XMLHttpRequest();// 2.准备请求的方式、url地址// 位置: url地址后面// 形式: 参数名=参数值&名=值;// 数据：id:3 author:罗贯中// 编码格式：urlencoded编码！支持ASCII码字符！中文不支持（url编码处理）！// encodeURI(中文字符串); ---->url编码形式 %16进制的
2021-02-21 17:27:50
139
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人