- 博客(30)
- 收藏
- 关注
RSS订阅原创 实现快速排序
var quickSort = function(arr) { if (arr.length <= 1) { return arr; } var pivotIndex = Math.floor(arr.length / 2); var pivot = arr.splice(pivotIndex, 1)[0]; var left = []; var right = []; for (var i = 0; i < arr.length; i++){ if
2020-11-24 13:57:10
103
1
原创 自定义事件
// 自定义事件 class EventTarget { constructor() { this.handlers = {}; } // 增加事件 addEvent(type, handler) { if (this.handlers[type] === undefined) { this.
2020-09-29 17:29:07
124
1
原创 Vue组件源码组件初始化和数据响应式思维导图
https://www.processon.com/view/link/5da6c108e4b002a6448895c3#map
2020-09-13 02:01:46
89
原创 0907-实现vue的响应式和事件的处理
function defineReactive(obj,key,val) { // 嵌套对象需要递归遍历 observe(val); const dep = new Dep(); Object.defineProperty(obj,key,{ get(){ console.log(`get ${key}`) Dep.target && dep.addDep(Dep.target)
2020-09-07 23:43:59
133
原创 0901-自定义vuex的实现
let Vue;class Store { // 这个地方的参数是在实例化的时候传入的参数 constructor(options) { //保存一下actions和mutations this._actions = options.actions; this._mutations = options.mutations; //利用vue把state做成响应式的 this._vm = new Vue({
2020-09-06 22:59:34
98
原创 0901-自定义路由插件
let Vue;class KVueRouter { // 该参数 是new Router({routes})中的对象里面的配置 constructor(options) { // 把参数缓存下来 this.$options = options; //缓存 path与routes的映射关系 this.routeMap = {}; this.$options.routes.forEach((route) =>
2020-09-06 22:51:05
69
原创 自定义弹框 挂载到全局
KToast.vue<template> <div class="toasts" v-if="isShow"> {{ msg }} </div></template><script>export default { name: 'KToast', data() { return { msg: '', isShow: false
2020-09-01 18:02:00
165
原创 0830-表单组件的实现
– processon.com: 免费在线作图、实时协作– 暗号：杨哥喊你来搬砖使用到的组件–Kinput.vue1.主要放置input数据,自定义模板实现数据的双向绑定 v-model语法糖 @input事件 :value接受父组件传递来的value，type默认值设置[text]2.input 事件用来将value值传递出去 并且触发事件的校验 this.emit(′input′,e.target.value)this.emit('input',e.target.value) this.
2020-08-31 01:05:09
60
原创 0830-弹框组件源码的实现
弹框组件的实现；实现思路：1.封装一个Notice.vue的组件，主要放置弹框组件的模板样式；2.接受父组件传递的参数：title、message、duration3.data里面定义弹框的状态4.实现两个方法一个是组件的显示一个是组件的隐藏；在组件显示的方法里面实现一个定时关闭的方法；在隐藏的方法里面调用remove() remove()方法是在调用的自己实现的create方法里面5.实现一个create方法；用来把弹框组件在body标签后面追加实现方法1：1.通过实例化组件，使用ren
2020-08-31 01:04:42
80
原创 vue中函数式组件
Vue官方文档的demo总是会省略很多东西，对于我们这样的小萌新十分不友好啊喂。函数式组件这块儿（链接https://cn.vuejs.org/v2/guide/render-function.html#函数式组件）这个demo啊，并没有实现什么实际的东西，还是需要自己去编写。我把它编辑好了，大家可以参考一下。首先，html这块儿： vue实例名为app，组件名为smart-list，这个组件可以根据我绑定的items来更改对应的不同内容，具体的见下面的js部分：//当父组件传过来的是空i
2020-08-25 22:38:01
239
原创 vue.config配置
项目模板地址 （该项目包含代码校验规则）https://www.npmjs.com/package/jyl-template-vue-demonpm i jyl-template-vue-demo//const StyleLintPlugin = require('stylelint-webpack-plugin');const path = require('path');// 将打包后的 JS/CSS/IMG/FONTS 等资源统一放到 static 目录中const ASSER
2020-08-25 22:36:10
244
原创 vue种css module化
在vue中使用css modules替代scroped前面的话 css modules是一种流行的模块化和组合CSS的系统。 vue-loader提供了与css modules的集成，作为scope CSS的替代方案。本文将详细介绍css modules引入 最开始使用Vue的时候，提倡并大量使用的是scoped这种技术复制代码复制代码 这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，编译的时候 .list-c
2020-08-25 22:35:29
1602
原创 关于vue-router当中addRoutes的使用
关于addRoutes使用背景 ：权限控制，判断用户是否有该页面的权限，可以使用router.addRoutes([设置路由])；优点：当用户没有权限，在浏览器输入地址不会出现该页面，直接跳转到配置的404页面；/* 默认初始路由 */export default new Router({ routes: [ { path: '/login', component: Login } ]})/* 准
2020-08-25 22:34:39
4654
原创 自定义组件使用v-model
v-model只是一个语法糖，等于:value+@input，真正的实现靠的还是： v-bind:绑定响应式数据，触发 input 事件并传递数据 (核心和重点)<input v-model="something">等于<input :value="something" @:input="something = $event.target.value">因此，对于一个带有 v-model 的输入框组件，它应该：接收一个 value prop，触发 input 事件，并传
2020-08-24 11:28:37
144
原创 mpvue 开发教程
1.安装node npm vue-cli(npm install vue-cli -g)2.创建mpvue小程序项目vue init mpvue xxx 或者 vue init mpvue-quickstart xxx cd xxx npm install npm run dev3.微信小程序开发工具打开项目中的dist 文件,需要注册一个小程序 需要填写appid4.微信小程序的开发工具预览打包发布的功能；实际写代码还是vscode里面；自动编辑到dist文件里面；5.【提醒】记得在微
2020-08-06 13:03:05
827
原创 关于百度地图最大层级聚合点鼠标覆盖弹出对话框需求实现
需要的开源库1.MarkerClusterer.js ：计算聚合点的生成2.TextIconOverlay.js ： 聚合点的图标需求：1. 点击聚合点 判断是不是最大层级；如果不是最大层级，继续点击，如果是最大层级则不能点击，鼠标覆盖聚合类的图标。图标发生改变，同事弹出框，鼠标可以点击框里面的每一项的数据；实现方法：1，判断是不是最大层级 需要在实例化聚合类的时候 增加参数maxZoom:20；因为百度地图最大是19层级；new BMapLib.MarkerClusterer(map, {
2020-07-30 11:23:55
518
原创 前端常用工具方法
1.邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2.手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3.电话号码export const isPhone = (s) => { re
2020-07-15 13:14:06
148
原创 关于深拷贝和浅拷贝的理解
浅拷贝只拷贝对象的一层，深拷贝是拷贝多层；举例说明let a=[1,2,3,[4,5,6],7];如果实现数组的第一层改变 而第二层改变不了属于浅拷贝，如果都可以改变的话属于深拷贝；实现浅拷贝的方法: Object.assign()、slice()、cancat（）都是只能拷贝一层实现深拷贝的方法:JSON.parse(JSON.stringfy(obj))有自己的局限性，正则对象无法使用这种方式实现深拷贝function deepClone(obj) { if (obj&&
2020-07-15 13:00:47
109
原创 apply和call理解
apply和call定义:apply:调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。call:调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。相同之处都是用一个对象 来调用另外一个对象不同之处apply:可以接受两个参数 第一参数是新的this对象或者是null 第二个是一个数组;如果不想用一个对象来调用另外一个对象 可以把第一个参数设
2020-07-15 11:13:50
312
原创 grid常用技能总结
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>grid</title> <style type="text/css"> html,body,.container{ width: 100%; height: 100%; margin: 0; padding: 0; } .container
2020-07-14 15:19:55
220
原创 vue遗漏知识点
vue 相关知识点1. $attrs和$listeners 二次封装组件当我们对第三方组件进行二次封装，但是不想重写组件上原有的属性 可以使用 v-bind="$attrs"例如 封装的第三方组件：<template><div><el-button v-bind="$attrs">确定</el-button></div></template> 使用封装的第三方组件: <my-button type="parmery"
2020-07-13 23:17:13
96
原创 http1.0 与 http1.1与 http2.0的区别
http1.0 与 http1.1的区别1.长连接 1.0版本需要在header中设置keep-alive 参数来告诉浏览器建立长连接 1.1版本默认支持长连接2.节约宽带 1.1相比与1.0更节约宽带，1.1先给服务器发送一个header 如果客户端有权限 返回100没有权限返回401，然后再发送一个body信息3.HOST域 1.1 支持多个虚拟站点共享一个ip和端口。个人理解虚拟站点 应该就是nginx代理一个ip 分发不同的服务中去http1.1 与 http2.0的区别1.数据压
2020-07-13 17:45:05
85
原创 iframe相关知识点总结
iframe 父级页面与子级页面通信1.（使用获取ID 调用contentWindow获取）1.在父页面调用子页面的方法 注意：如果是初始化页面调用子页面的方法 那么子页面的方法不可以写在window.onload 里面；document.getElementById('iframe_content').contentWindow.getalert()2. 在父页面中获取子页面的元素document.getElementById('iframe_content').contentWind
2020-07-13 16:52:46
203
原创 浏览器输入url浏览器与服务器如何交互
1.输入网址当我们在浏览器中输入网址的时候，浏览器会从历史记录上匹配之前已经输入的url，chrome浏览器会从缓存中把网页展示出来2.浏览器查找域名的IP1.浏览器解析域名，浏览器先查看本地硬盘hosts文件，如果有与这个IP相匹配的规则，则使用host文件里面的IP;2.如果本地hosts文件没有找到对应的IP地址，浏览器会发出一个DNS请求到本地的服务器，本地的DNS服务器指的是中国联通或者中国移动;3.先读取本地的DN解析器缓存，如果没有缓存向跟本地的DNS服务器查询，然后迭代查询；
2020-07-10 16:31:35
329
原创 对闭包个人见解
function outFn(){ var num = 0; return function(){ return num++; }}var fn = outFn();console.log(fn()) // 1console.log(fn()) // 2闭包是一个函数访问函数内部的变量 上面的例子中 当执行fn()方法的时候，num变量一直保存着没有重新赋值，并且num变量会一直存在内存中，所以 我们每次调用fn() 方法其实是累计增加num;var name='the wind
2020-07-09 19:03:02
276
原创 git常用功能整理
1.下载完成git 进行账号和邮箱设置git config --global user.name 'xxxx'git config --global user.email '[email protected]'2. 获取SSH公钥上传1)在Linux或Mac OS终端或Windows Git Bash, 执行(**ssh-keygen -t rsa**)命令生成SSH公钥和私钥 2)查看并复制SSH公钥 (**cat ~/.ssh/id_rsa.pub**)3.常用指令（不做详细介绍）git clone
2020-07-09 14:30:04
155
原创 getComputedStyle 与 currentStyle 对比理解
getComputedStyle 与 currentStyle的对比currentStyle 兼容ie8及以下的;getComputedStyle 兼容ie8 以及主流的浏览器需要两个参数 第一个：要获取样式的元素 第二个：可以传递一个伪元素，一般都传nullcurrentStyle使用方法let box = document.getElementsByClassName('box')[0]box.currentStyle['height'];getComputedStyle 的使用方法l
2020-07-08 23:31:15
114
原创 常见前端面试题（持续整理）
function random(min,max) { return Math.floor(Math.random()*(max-min)+min)}let arr = Array.from({length:20},()=>random(150,250))let obj={}for (let i=0;i<arr.length;i++){ obj[arr[i]] = arr[i]}console.log(Object.values(obj))
2020-07-08 15:50:49
128
原创 节流防抖理解
// 防抖 在于清除定时器function debounce(f,wait){ let timer; return (...arguments)=>{ clearTimeout(timer); timer=setTimeout(()=>{ f(...arguments) },wait) }}// 节流在于 开关function throttle(f,wait){ let timer; return ()=>{ if (timer){return}
2020-07-08 15:46:54
90
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人