Kim丶-优快云博客

原创 js中原型、原型链解析与继承

在谈原型之前首先先介绍一下创建对象的几个方法创建对象的几个方法Object构造函数，即new Object()对象字面量，即var o = { // 定义属性或方法 }这两种有一个明显的缺点，当使用同一个接口创建很多对象的时候，会产生大量重复的代码。工厂模式function create(name) { var o = new Object(); o.name = name...

2020-04-15 15:40:13 341

原创防抖和节流实现

为什么会出现防抖和节流呢？就是为了性能优化。如果一个事件被频繁触发，当处理不当时很容易造成浏览器卡死。节流节流是指在n秒内只会执行一次，会稀释函数的执行频率。<button type="button" id="throttle">节流</button><script> function throttle(fn) { let canR...

2020-03-30 15:16:10 239

原创 JavaScript制作简单动画特效及注意问题（个人整理笔记）

个人理解：所谓的动画，就是利用定时器，把元素的属性按某一规律变化的过程。在函数内利用参数当css属性时，style[attr] &amp;amp;lt;==&amp;amp;gt; style.arr，比如arr等于border。注意问题IE和其他浏览器的兼容，IE的事件对象和其他浏览器的事件对象不同，IE为window.event，而其他浏览器的函数中默认有e的事件对象。把a标签的href设置为javascript:...

2018-09-22 11:56:40 2003

转载 vue-router实现原理

近期面试，遇到关于vue-router实现原理的问题，在查阅了相关资料后，根据自己理解，来记录下。我们知道vue-router是vue的核心插件，而当前vue项目一般都是单页面应用，也就是说vue-router是应用在单页面应用中的。那么，什么是单页面应用呢？在单页面应用出现之前，多页面应用又是什么样子呢？单页面应用与多页面应用单页面即第一次进入页面的时候会请求一个html文件，刷新清...

2020-03-11 17:45:57 277

转载彻底理解js中this的指向，不必硬背。

首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。为什么要学习...

2020-03-02 22:33:43 169

转载剖析Vue原理&实现双向绑定MVVM

相信大家对mvvm双向绑定应该都不陌生了，一言不合上代码，下面先看一个本文最终实现的效果吧，和vue一样的语法。<div id="mvvm-app"> <input type="text" v-model="word"> <p>{{word}}</p> <button v-on:click="sayHi">cha...

2020-02-11 23:03:27 262

转载 jQuery的deferred对象详解

jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。这个功能很重要，未来将成为jQuery的核心方法，它彻底改变了如何在jQuery中使用ajax。为了实现它，jQuery的全部ajax代码都被改写了。但是，它比较抽象，初学者很难掌握，网上的教程也不...

2019-12-10 11:43:16 144

原创前端推荐书籍

javascript《JavaScript高级程序设计》《JavaScript高级程序设计》是2006年人民邮电出版社出版的图书，作者是(美)(Nicholas C.Zakas)扎卡斯。又名红宝书，前端必看书籍之一。堪称圣经。《JavaScript权威指南》又名犀牛书。作者:(美)弗兰纳根著淘宝前端团队译，出版日期:2012年04月01日。《深入理解ES6...

2019-11-25 00:33:44 1058

原创 ES6中的迭代器和生成器

迭代器所有迭代器对象都有一个next()方法，每次调用都返回一个结果对象。结果对象有两个属性：一个是value，表示下一个将要返回的值；另一个是done，它是一个布尔类型的值，当没有更多可返回数据时返回true。ES5中模拟一个迭代器：function createIterator(items) { var i = 0; return { next: function() { ...

2019-10-31 21:01:55 137

原创 Vue的函数化组件

函数化组件Vue.js提供了一个 functional 的布尔值选项，设置为true可以使组件无状态和无实例，也就是没有 data 和 this上下文。好处：只是一个函数，渲染开销要小很多。使用函数化组件时，Render 函数提供了第二个参数 context 来提供临时上下文。组件需要的data、props、slots、chidren、parent 都是通过这个上下文来传递的。---...

2019-10-31 18:28:04 1109

原创 Redux与React Redux简单上手

介绍工作流React Components：组件，相当于借书人。Action：相当于 ‘我要借**书’，这句话。Store：相当于图书馆管理员。Reducer：相当于本子，记录所有图书的位置，让图书馆管理员知道那本书在哪里，找出来。三大原则单一数据源：整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 st...

2019-09-30 16:57:29 179

转载 ReactNative之Android打包APK方法（趟坑过程）

Android 打包闪退的问题,极有可能是你签名配置不正确,建议仔细检查每个步骤,找不到问题建议命令打包根据错误提示解决1、生成签名秘钥：你可以用keytool命令生成一个私有密钥。在Windows上keytool命令放在JDK的bin目录中（比如C:\Program Files\Java\jdkx.x.x_x\bin），你可能需要在命令行中先进入那个目录才能执行此命令。$ keyt...

2019-09-27 14:52:06 168

原创 React Router 4快速上手

安装$ npm install --save react-router路由配置注意：包裹里只能有一个根元素BrowserRouter 包裹代表启用了路由，BrowserRouter 生成的路由是 localion:3000HashRouter 生成的路由是 localion:3000/#/注意：React 路由匹配规则是模糊的，如果想要绝对匹配，可以在Route中添加一个e...

2019-09-27 11:11:54 137

原创 nvm安装以及注意问题

nvm就是一个可以让你在同一台机器上安装和切换不同版本node的工具。一、安装安装前一定要把之前安装的nodejs给卸载了！！！官方下载地址nvm-noinstall.zip：这个是绿色免安装版本，但是使用之前需要配置。nvm-setup.zip：这是一个安装包，下载之后点击安装，无需配置就可以使用，方便。Source code(zip)：zip压缩的源码。Sourc cod...

2019-09-19 10:49:50 1512

原创 web查漏补缺

ObjectObject.keys(obj)参数：obj：要返回其枚举自身属性的对象。返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致。如果对象的键-值都不可枚举，那么将返回由键组成的数组。例：var arr = ['a', 'b', 'c'];console.log(Object.keys(...

2019-09-15 00:22:42 146

原创 RegExp.$1~$9

该特性是非标准的，请尽量不要在生产环境中使用它！非标准$1, $2, $3, $4, $5, $6, $7, $8, $9 属性是包含括号子串匹配的正则表达式的静态和只读属性。这些属性可以在String.replace 方法中替换字符串. 在这种情况下, 不用在前面加上RegExp。例：var re = /(\w+)\s(\w+)/;var str = 'John Smith';s...

2019-09-15 00:02:45 856

原创 GET和POST的区别

1. GET和POST的区别get参数通过url传递，post放在request body中。get请求在url中传递的参数是有长度限制的，而post没有。get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。get请求只能进行url编码，而post支持多种编码方式get请求会浏览器主动cache，而post支持多种编码方式。get请求参数会被完整保留在浏览...

2019-09-05 23:07:54 210

原创 WebSocket协议

介绍什么是WebSocket?WebSocket是HTML5中的协议，支持持久连续，http协议不支持持久性连接。Http1.0和Http1.1都不支持持久性的链接。WebSocket是什么样的协议，具体有什么优点？HTTP的生命周期通过Request来界定，也就是Request一个Response，那么在Http1.0协议中，这次Http请求就结束了。在Http1.1中进行了改进...

2019-08-31 16:10:39 210

原创 fastclick的介绍和使用

移动端点击延迟事件移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟原因: 移动端的双击会缩放导致click判断延迟解决方法：禁用缩放<meta name = "viewport" content="user-scalable=no" >缺点: 网页无法缩放。更改默认视口宽度<meta name="viewport" content="w...

2019-08-31 11:05:31 177

原创 webpack中使用babel 8.x

提醒一下：webpack 4.x 中 cli功能从webpack移到了webpack-cli，所以如果你要使用cli功能，除了安装 webpack 外，还需要安装 webpack-cli 。webpack 4.x 使用extract-text-webpack-plugin插件extract-text-webpack-plugin 提取css单独打包文件支持到webpack 3.x，如果在web...

2019-07-09 22:14:01 876

原创 Vue Loader学习

本文章用说到的配置是基于webpack。安装首先安装vue-loader 和 vue-template-compilernpm install -D vue-loader vue-template-compilerwebpack配置// webpack.config.jsconst VueLoaderPlugin = require('vue-loader/lib/plugin'...

2019-05-21 11:16:30 458

原创 Vuex

基础Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。（一般用于大型单页应用）每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的...

2019-05-20 18:03:00 158

原创 Vue Router快速上手

路由（重要）什么是路由？后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应用程序中，这种通过hash改变来切换页面的方式，称...

2019-05-17 16:26:44 513

转载 webpack笔记

什么是webpack?webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；如何完美实现上述的2种解决方案使用Gulp，是基于 task 任务的；使用Webpack，是基于整个项目进行构建的；借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。根据官网的图片介绍webpack打包的过程webp...

2019-05-15 17:49:47 131

原创 webpack基础学习

概念webpack官网webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。核心概念（最重要是前4个，一定要懂）入口（entry）输出（output）loader插件（plugin）模式（...

2019-05-15 15:12:35 225

原创 axios学习

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。即环境需要支持ES6。安装npm install axios或<script src="https://unpkg.com/axios/dist/axios.min.js"></script>axios API通过向 axios 传递相关配置来创建请求。（类似...

2019-05-15 11:17:07 96

原创 vue进阶笔记

自定义指令自定义全局指令第一个参数：指令名称。第二个参数：一个对象，该对象有一下指令相关的钩子函数。注意：定义的时候，指令的名称前面不需加 v- 前缀，但调用的时候需要。Vue.directive('指令名称', { /*钩子函数*/ });自定义私有指令（directives属性）在声明vm对象中通过 directives 选项定义。directives: { //...

2019-05-14 11:58:29 920

原创 Vue插件基础使用

vue-resource 实现 get,post,jsonp请求（现在已停止维护，推荐使用axios）https://github.com/pagekit/vue-resource除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求.vue-resource 的配置步骤：直接在页面中，通过script标签，引入 vue-resource 的脚本...

2019-05-14 11:43:52 705

原创自定义指令介绍（含自动获取焦点案例、实时时间转换案例）

基本用法全局注册Vue.directive('focus', { // 指令选项});局部注册var app = new Vue({ el: '#app', directives: { focus: { // 指令选项 } }});自定义指令的选项自定义指令的选项是由几个钩子函数组成的，每个都是可选的。bind：只调用一次，指令第一次绑定到元素...

2019-05-09 21:50:11 139

转载认识单页应用（SPA）与多页应用（MPA）

多页应用（MPA）每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。为什么多页应用的首屏时间快？首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。为什么搜索引擎优化效果好（SEO）？搜索引擎在做网页排名的时候，要...

2019-05-08 18:04:59 481

转载 less笔记

lessless环境安装安装nodejshttps://nodejs.org/zh-cn/选择合适自己电脑的版本下载，傻瓜式安装包安装，安装过程略。检测是否安装成功打开cmd，输入 node –v 查看版本。若出现以下现象代表安装成功，版本号可能有所不同。安装less在线安装打开cmd，输入 npm install -g less (部分电脑要 sudo 管理权限)...

2019-03-14 10:37:56 563

原创移动web个人笔记

移动web建议使用H5的api 或使用zepto.js的库（基于高版本浏览器开发）。https://zeptojs.com/适配问题使用百分比布局（也叫流式布局），还需对移动端的viewport视口进行设置。视觉窗口：viewport，是移动端特有。这是一个虚拟的区域，承载网页的。承载关系：浏览器→viewport→网页。适配方案（标准）网页宽度必须和浏览器保存一致。默认显...

2019-03-14 10:34:30 351

转载微信小程序笔记

微信小程序账号与工具在线文档：https://mp.weixin.qq.com/debug/wxadoc/dev/小程序开发者账号注册微信公众平台：https://mp.weixin.qq.com/小程序开发者账号注册：https://mp.weixin.qq.com/wxopen/waregister?action=step1微信开发者工具微信开发者工具：https://mp.wei...

2019-03-07 23:57:07 301

原创 html5拖拽上手

注意：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释：在 Safari 5.1.2 中不支持拖放。设置拖拽元素&lt;p id="one" draggable="true"&gt;这是一个可以拖拽的p标签&lt;/p&gt;拖拽事件ondragstart当鼠标开始拖拽被拖拽元

2019-02-28 22:28:49 155

原创 jquery个人笔记

jQuery基本概念jQuery的版本官网下载地址：http://jquery.com/download/jQuery版本有很多，分为1.x 2.x 3.x大版本分类：1.x版本：能够兼容IE678浏览器2.x版本：不兼容IE678浏览器1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用j...

2018-12-28 22:47:29 170

原创 css基础笔记

html基础注意语义化！！！浏览器内核：IE：trident；Safari：webkit；FireFox：gecko；chrome、opera：blink；结构解析<!DOCTYPE html>代表是用什么标准，不可省略，会影响布局。<html lang="en">代表页面主要是英文，zh-cn代表中文。<head>标签<meta...

2018-12-17 01:22:07 564

原创 webstrom配置Git及基本使用

webstrom配置Git打开webstrom点击File选项→settings…→输入git点击GitHub→点击Add account或+，输入你的Github账号和密码点击Git→在Path to Git executable选项中填写你在电脑安装Git后的Git.exe的绝对路径前提需自行安装Git，安装很简单，傻瓜式Git下载网站：https://git-...

2018-12-12 19:51:25 3980

原创 vue基础笔记

vue.js框架和库的区别框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。node中的express。库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。MVC 与 MVVM 之间区别MVC 是后端的分层开发概念。MVVM是前端视图层概念，主要关注与视图层分离，分为了三...

2018-12-08 23:13:21 504

原创 Git基本使用

使用Github基本概念仓库（Repository）仓库用来存放项目代码，每个项目对应一个仓库，多个开源项目则有多个仓库。收藏（Star）收藏项目。复制克隆项目（Fork）把别人的开源项目，复制一份且自动生成一个一模一样的仓库在自己账号下。此时的fork的项目（复制的项目）与被复制的项目时独立存在的，互不干扰。发起请求（pull request）当自己在fork的...

2018-12-03 17:15:48 285

原创 sass学习笔记

Sass安装Sasswindow下需先安装 Ruby，打开此命令行工具。输入 gem install sass检查安装是否成功 sass -v自动编译： sass --watch name.scss:output.css附加：webstrom配置scss模块File→Settings…→Tools→File Watchers。按 + 号，选择SCSS，弹出此页面，在红...

2018-11-07 20:49:50 280