- 博客(43)
- 收藏
- 关注
RSS订阅转载 自己手动实现简单的双向数据绑定 mvvm
数据绑定 数据绑定一般就是指的 将数据 展示到 视图上。目前前端的框架都是使用的mvvm模式实现双绑的。大体上有以下几种方式： 发布订阅 ng的脏检查 数据劫持 vue的话采用的是数据劫持和发布订阅相结合的方式。 而数据劫持用的是Object.defineProperty来实现的， 可以通过绑定get和set来在获取和设置数据的时候触发相应的函数。...
2019-08-27 16:21:00
709
转载 关于div水平垂直居中的几种方法
Dom结构：<div class="box"> <div class="inner"> 123 </div></div>1， 伪元素 加 vertical-align .box { width: 30...
2019-08-21 16:29:00
181
转载 最终题目准备
1，vue的列表组件为什么要加key？ 增加diff算法的同级比较效率， key是唯一索引，可以一目了然的看到同一级的是否变化，如果没有key， 那就只能一个个的去进行比较了。2， ['1', '2', '3'].map(parseInt)结果是多少？ [1, NaN, NaN]; map函数的默认参数为 item，index和arr， parseInt...
2019-08-19 17:31:00
231
转载 js generator的两个实际应用
generator作为一个用来操作异步的状态机， 遇到yield停止， 通过调用next（）来继续操作。 今天就用generator来举例两个实际开发中的应用。1，抽奖function draw(count) { //抽奖模拟 setTimeout(function(count){ console.log(`还剩余${count}次...
2019-06-28 14:11:00
376
转载 js排序专场
1，冒泡排序 function bubble(arr) { var len = arr.length - 1; for (let i = 0 ; i < len; i++) { var bool = true; for (let j = 0; j < len - i; j++...
2019-06-22 16:26:00
118
转载 js实现二叉查找树
二叉树的特点： 像一颗树一样，从顶端往下延伸，最顶端的为根节点，每个节点下面子节点的数不超过两个，没有任何子节点的节点被称为叶子节点， 除了根节点和叶子节点的被称为中间节点。 二叉查找树： 每个节点的左子节点比 自身的值小， 又子节点比自身的值大。 class Node { constructor(key) ...
2019-06-22 14:24:00
165
转载 事件机制
在读jquery的事件机制时， 发现了一个addEvent的库，jquery也是借鉴了这个库。 这位大佬是真滴牛逼呀， 必须要膜拜一下， 膜拜大佬好了， 该拜的也拜了， 言归正传， 下面来看看这位大佬是怎么实现addEvent的 function addEvent(el, type, handler) { if (!handler.$$uuid) ...
2019-06-21 09:23:00
100
转载 正则表达式的一些匹配规则
1，字面量字符和元字符 大部分字符在正则表达式中，就是字面的含义，比如 /a/ 匹配 a， /b/ 匹配b。这种只表示它字面量含义的被称为字面量字符。 除了字面量，还有一些字符有特殊含义，不代表字面意思，被称为元字符 1，点字符（.） 点字符匹配除回车（\r）、换行（\n）、行分隔符（\u2028）和分段符（\u2029）之外的所有字符 注...
2019-06-14 16:17:00
232
转载 题目
1，简单讲解下http2的多路复用 在http1中，每次请求都会建立TCP连接，也就是3次握手四次挥手，这在请求过程中占用了很长的时间，即使开启了keep-alive，解决了多次连接的问题，但依然还有效率上的问题。 串行的文件输出。 连接数过多。 http2采用了二进制格式传输，取代了http1的文本格式，效率更高。多路复用代替了HTTP1的序列和...
2019-06-11 16:23:00
122
转载 前端应该掌握的一些技能
css1、盒模型2、flex3、css单位4、css选择器5、bfc 清除浮动6、层叠上下文7、常见页面布局8、响应式布局9、css预处理，后处理10、css3新特性animation和transiton的相关属性animate和translate11、display哪些取值12、相邻的两个inline-block节点为...
2019-06-10 11:43:00
288
转载 移动端 点击滚动穿透的解决方案
点击穿透： 一般都是touch和click混用导致的， touch是立马触发的，touchend还会触发一次click，导致上层元素touchend触发的click会影响到下层元素。 解决办法： 只用touch 或者 只用click ； 使用fastclick 等一些自定义tap事件， 移除touchend之后触发的那次click事件。滚动穿透：...
2019-05-27 17:24:00
132
转载 Vue中 几个常用的命名规范
1，组件名 官方推荐的组件名是每个单词首字母大写（PascalCase） 或者 全小写用 - 连接（kebab-case） 。 在DOM中使用的时候， 改为全小写， 单词之间用 - 连接。 Vue.component('MyComponent', {})； 或者 Vue.component('my-component', {});import MyC...
2019-05-16 12:01:00
696
转载 深入理解class
一， class和自定义类型的区别： 1，类声明不会被提升。 2，类声明的代码自动运行在严格模式。 3，类的所有方法都是不可枚举的，而自定的方法必须使用Object.defineProperty来设置。 4，类的所有方法都没有[[Construct]]，因此用new来调用会报错。 5，调用类构造器不使用new 会报错。 6，视图在类的内部重写类名会报错...
2019-05-10 16:19:00
120
转载 封装 原生 fetch
1， 简介 fetch方法是 Fetch API的一个方法，提供了一种简单、合理的方式来跨网络异步获取资源。 与原来的XMLHttpRequest比较，fetch更容易与其他的技术结合：比如service workers。还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。 默认情况下fetch不会从服务端接收或发送cookies，如果需要...
2019-04-17 15:41:00
145
转载 解决flex布局下， elementui table组件不能跟随父组件的宽度而变化的bug
bug： 我在flex布局的元素中使用了elementui的table组件，饿了么的table上会被加一个动态的宽度， 当第一次改变flex元素宽度的时候。table的动态宽度会变化，第二次和以后就不会变化了。解决方法： 给使用flex的元素加上 overflow-x：hidden转载于:https://www.cnblogs.com/wjyz/p/1...
2019-04-15 14:42:00
877
转载 通过js获取内网ip和外网ip的简单方法 ...
今天遇到了一个需求，需要获取用户当前的内网ip， 找了半天终于找到了方法，遂将找到的方法记录下来，留给需要的人。 1，获取内网ipfunction getIP(callback) { let recode = {}; let RTCPeerConnection = window.RTCPeerConnection || windo...
2019-04-01 20:07:00
1468
转载 js 多个异步 的并发控制
今天在群里看到一个人发的面试题： 1，请实现如下的函数，可以批量请求数据，所有的URL地址在urls参数中，同时可以通过max参数 控制请求的并发度。当所有的请求结束后，需要执行callback回调。发请求的函数可以直接使用fetch。function sendRequest (urls: string[], max: number, callback: ()...
2019-03-16 11:47:00
1114
转载 常用的几种跨域方法 简介
一，啥是跨域 同源策略是浏览器最基本的安全功能。 通常域名是由以下几部分组成： http:// www.baidu.com : 8080 / #abc 协议 域名 端口号 hash、查询字符串、文件名等 同源策略会限制以下的内容： ...
2019-03-13 14:36:00
179
转载 一些很好用但不常用的css属性总结 （持续中......）
在各种框架横行的9012，感觉我们学前端的都变得浮躁了很多，放一张最近流行的神图： 唉，扯远了， 还是整理我的东西吧，路漫漫其修远兮，吾将上下而求索！1， position：sticky; 粘性定位。 元素在屏幕显示区域内时 表示为relati...
2019-03-08 10:24:00
166
转载 css的reset和常用的html标签的默认样式整理
先看下常用的这些标签浏览器的默认样式有哪些： body{ margin: 8px;}hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em;}blockquote{margin: 16px 1em;}ul{list-style-type: disc;padding-left:40px;margin...
2019-03-07 15:26:00
100
转载 图解http 笔记
一，了解web以及网络基础 1，使用http协议访问web web页面是由web浏览器根据地址栏中指定的url从web服务器获取文件资源等信息然后显示的页面。 像这种通过发送请求获取服务器资源的web浏览器都可以称为 客户端（client）； web使用HTTP（超文本传输协议）的协议作为规范， 可以说web是建立在http协议上通信的。 ...
2019-03-05 11:22:00
153
转载 js 实现星级评分
最近的项目中有一个星级评分的需求， 自己就写了一下， 由于可能一个页面要用到多个，就采用了面向对象的写法。 用到的png图片也放到这里。 js要用到jquery。css: .sr-star{ display: flex; margin-bottom:50px;}.sr-star-item{ wi...
2019-02-22 09:33:00
218
转载 es6 笔记
一， 函数参数的默认值1，与解构赋值默认值结合使用 function foo ({x=5, y = 5} = { }) { console.log(x,y) } function foo({x,y} = {x:5, y : 5}) { console.log(x, y)} 上面两种写法都对函数的参数设定了默认值，不同的是，第一种写法设置的默认值为空对象，但是也设置...
2019-02-15 12:02:00
107
转载 js中的this
js中的this是在运行时基于执行环境动态绑定的。 js中的this指向一般分为以下几种情况： 1，对象调用 2，普通函数调用 3，new 4，call，apply，bind 5，箭头函数 当函数作为对象的方法时，this指向该对象，也就是.之前的对象。let obj = { a:1, b...
2019-02-14 10:45:00
112
转载 js高级程序设计 笔记 --- 错误处理、json和ajax
1，错误处理 1，try-catch语句 try｛可能导致错误的代码｝ catch（error） ｛在错误发生时该怎么处理｝ error.message是所有浏览器都支持的属性。 finally语句是不论代码如何都会执行的。 2，错误类型 Error是基类型，其他错误都继承自该类型。 EvalError：使用eval函数发...
2019-01-18 17:32:00
114
转载 js高级程序设计 笔记 --- 表单
一，基础知识 在html中，表单是form元素，而在js中，表单对应的是HTMLFormElement类型，继承自HTMLElement，其独特的属性和方法有（常见）： action：接收请求的URL， elements： 表单中所有控件的集合 length： 表单中控件的数量 method： 发送的http请求的类型。 name：...
2019-01-17 20:11:00
132
转载 js高级程序设计 笔记 --- DOM
DOM是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。 1，节点层次 DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。每个节点都有自己的特点、数据和方法，也与其他的节点存在某种关系。构成了层次。 <html>元素为文档元素。是文档的最外层元素。每一段标记都...
2019-01-16 15:26:00
105
转载 js高级程序设计 笔记 --- 面向对象的程序设计
1，理解对象 通过对象字面量的方式，创建一个对象，为它添加属性和方法： var obj = { a: 1, b:2, sayA(){ console.log(this.a)}} 1，属性类型： 数据属性 ： 数据属性包含一个数据值的位置。在这个位置可以读取和写入值。有四个特性 configurable enumerable ...
2019-01-15 19:44:00
107
转载 js高级程序设计 笔记 --- 引用类型
一，变量和作用域 1， js变量可以保存两种类型，基本类型、引用类型和symbol类型，基本类型有5种：undefined、null、boolean、number、string，它们都有以下的特征基本类型在内存中占据固定大小的空间，因此被保存在栈内存中从一个变量向另一个变量复制基本类型的值，会创建这个值的一个副本引用类型的值是对象，保存在堆内存中包含引用...
2019-01-11 15:47:00
85
转载 es6 简单封装一个 省市县三级下拉框
废话不多说，直接上效果图和代码： 1，index.js function $(el){ return document.getElementById(el)}let render = Symbol('render')let event = Symbol('event')class Select {...
2019-01-10 14:41:00
275
转载 js中元素、触点等各种距离的总结
每次碰到元素滚动呀、鼠标拖动呀之类的通过对比位置来触发事件的需求时，都要花很多时间来百度怎么取到自己想要的那个值，什么scrollTop、offset等等，今天就把这些东西总结一下，以后再使用的话，就不用各种的百度了。一，window窗口的各种距离 screen.width/height： 屏幕的宽度/高度 window.innerWidth/innerHeight ...
2019-01-08 13:53:00
313
转载 css实现视觉差的滚动
之前在逛知乎的时候，发现知乎app首页中偶尔掺杂的广告图片，都是做的视觉差的效果，广告图片的向上速度明显比外面页面的上拉速度慢了很多，看起来很炫酷，然后在网上看了下，发现有很多js插件可以实现这种效果。这种就不提了，这次我们是考虑的用css写。（当然，ie是不兼容的） 这边参考了张鑫旭大神的一篇文章。视觉差-张鑫旭 这边是我参考之后做的demo： demo ...
2019-01-07 10:42:00
620
转载 js的节流和防抖
1，节流 节流就是对连续的函数触发，在设定的间隔时间段内，只让其执行一次。 先来看看js高级程序设计3里面节流的代码function throttle (method, context, wait) { clearTimeout(method.tId) method.tId = setTimeout(function () { ...
2019-01-05 16:52:00
77
转载 js关于原型，原型链的面试题
之前面试的时候遇到过原型和原型链方面的题目，具体的已经忘了，只记得当时回答的稀里糊涂，今天查了一些资料，把自己所理解的写出来，加深记忆。1，前提 在js中，对象都有__proto__属性，一般这个是被称为隐式的原型，该隐式原型指向构造该对象的构造函数的原型。 函数比较特殊，它除了和其他对象一样有__proto__属性，还有自己特有的属性----prototype...
2019-01-04 11:55:00
1330
转载 深入理解promise
如今promise大行其道，关于异步方面的几乎都有它的影子，新的fetch api返回的是promise对象，generator中的yield后面一般也会跟promise对象，async的await后面一般也是promise对象。 既然promise这么重要，这里也整理了一些关于它的知识，加深下自己对promise的理解。1，基础 promise是一个异步操作的最终结...
2019-01-03 16:29:00
137
转载 vue 同一个组件的跳转， 返回时保留原来的下拉位置
1，需求分析 公司的项目有这样一个需求： 同一个list组件，根据传过来的listId渲染成多个页面，每个页面都可以下拉。在返回到不同的list页面时，要保留当时下拉的位置。 说的我自己都有点懵逼了，画个图来示范下吧！ demo github地址 这三个页面都总用的list.vue这个组件。如果三个页面都渲染后，通过上方的导航，可以跳到...
2018-12-29 11:13:00
649
转载 es6 封装一个登录注册的验证滑块
1，需求分析 滑块从左滑到右，开始滑、结束滑两种状态。两种状态显示的内容和样式的不同。 这是淘宝注册验证滑块的示例图2，代码分析const render = Symbol('render')const event = Symbol('event')class Slider { constructor (option...
2018-12-27 09:58:00
661
转载 es6 封装一个基础的表单验证
1， 需求分析 设计一个通用的表单验证，如果后期表单中添加了更多的需求，不需要更改之前的代码逻辑，最好不要改之前的代码，需要加什么直接加就好了。2，代码分析 此表单验证最好返回一个函数，在api设计这块我选择在每个表单项上添加valid属性，在验证中通过查看是否有valid属性、valid属性的内容来获取需要验证的表单，并且返回验证的结果。 该分析的也...
2018-12-26 09:17:00
487
转载 css 之 BFC
1，定义 BFC为块级格式化上下文，也就是一块区域内的封闭空间，里面元素无论怎么样，都不会影响外部元素。2，触发条件html 根元素display的值为 inline-block、table-cell和table-caption中的任何一个position的值不为relative和staticoverflow的值为auto、scroll或者hid...
2018-12-25 10:12:00
96
转载 vue生命周期
定义： 每个vue实例在被创建的时候都要经过一系列的初始化过程，这就是vue的生命周期； 通俗点说的话，就是从开始创建、初始化数据、编译模板，挂载dom、渲染、更新、卸载等的一系列过程。 说到生命周期就不得不提官网的生命周期图示了 https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%...
2018-12-24 10:17:00
84
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人