js
关注
分享
扫一扫
LylBrave
这个作者很懒，什么都没留下…
展开
-
Vue更改了data里的数据，但是视图却没有更新
1.Vue不能检测以下数组的变动：var vm = new Vue({ data: { items: ['a', 'b', 'c'] }})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的 当利用索引值修改数组某项时，使用：Vue.set(vm.items, indexOfItem, newValue);或者：vm.$set(vm.items, indexOfItem, newValue)vm.items...原创 2020-05-18 14:35:15 · 1334 阅读 · 0 评论 -
canvas绘图不清晰的解决办法
用canvas绘图，发现图像和文字变得模糊了，因为是跑在ios上，开发用的mac，于是查了下资料，发现ios4-ios6屏幕分辨率：设备分辨率 = 1 ： 2，也就是说，我们用canvas画的图1个点对应的其实是被横向纵向放大了2倍的，基于些，我用了如下两种解决方案解决模糊，方法一：先看效果图利用transform:scale(0.5)直接缩小一半方法二：将canvas样式属性宽度...原创 2018-08-01 09:56:14 · 6712 阅读 · 0 评论 -
JS的执行顺序
首先我们都知道js是单线程的。1.什么是单线程？ 通俗点说，就是代码在执行过程中，另一段代码想要执行就必须等当前代码执行完成后才可以进行。我们拿一段代码来解释一下吧for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); //输出：4,4,4 },0)}我们来看一下上面的这段代码，既...原创 2018-07-30 16:28:01 · 359 阅读 · 0 评论 -
apply，call，bind的区别
首先，call()和apply()就是改变函数的执行上下文，也就是this值。他们两个是Function对象的方法，每个函数都能调用。他们的第一个参数就是你要指定的执行上下文，第二个用来传递参数(说第二个不准确，应该说第二部分，因为参数可以传多个)，也就是传给调用call和apply方法的函数的参数。说白了，就是调用函数，但是让它在你指定的上下文下执行，这样，函数可以访问的作用域就会改变，不得不说...原创 2018-08-01 20:22:45 · 186 阅读 · 0 评论 -
js几种请求方式的对比（XHR,jQuery中的ajax，fetch，axios）
开发过程中,我们向服务端发送请求,一般会使用三种方式, XMLHttpRequest(XHR)，jQuery实现的AJAX，Fetch ,让我们首先来比较一下这三者的使用示例。XMLHttpRequestvar xhr;if (window.XMLHttpRequest) { // Mozilla, Safari... xhr = new XMLHttpRequest();}...转载 2018-08-01 20:41:26 · 2361 阅读 · 0 评论 -
怎么解决跨域的问题
跨域感觉是面试里被问到的概率最高的几个问题之一，所以准备好好总结一下。一、通过jsonp跨域在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。比如，有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是http:/...原创 2018-08-01 21:21:14 · 411 阅读 · 0 评论 -
canvas画矩形和svg画矩形的方法
1.canvas画矩形<!doctype html><html><head><!--canvas画矩形--><style>#huaban{border:1px solid;}</style><script></script><meta chars原创 2018-08-02 10:03:51 · 1115 阅读 · 0 评论 -
在使用rem适配移动端时，如何改变根元素的字体大小？
rem和em相对单位长度我们经常用在响应式开发中，rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响。rem 单位可以从浏览器字体设置中继承字体大小。一般我们会使用js去控制根元素的font-size大小，然后进行rem换算：functi...原创 2018-08-02 10:16:28 · 6393 阅读 · 0 评论 -
setTimeout(fn, 0) 的作用
调用 setTimeout 函数会在一个时间段过去后在队列中添加一个消息。这个时间段作为函数的第二个参数被传入。如果队列中没有其它消息，消息会被马上处理。但是，如果有其它消息，setTimeout 消息必须等待其它消息处理完。因此第二个参数仅仅表示最少的时间，而非确切的时间。零延迟 (Zero delay) 并不是意味着回调会立即执行。在零延迟调用 setTimeout 时，其并不是过了给定的...原创 2018-08-02 16:03:52 · 938 阅读 · 0 评论 -
如何实现每执行一次函数，结果都会自增1
function f(){var cnt=0;return function(){ return ++cnt;}}var fa=f();//将函数f的的返回值给变量fnconsole.log(fa());//1console.log(fa());//2console.log(fa());//3函数的返回值是函数（对象的引用），这里将其赋值给变量fn。在调用fn时，其输出结果每次都...原创 2018-08-07 15:23:30 · 8893 阅读 · 2 评论 -
js中块级作用域和函数作用域的区别
为什么需要块级作用域？ES5只有全局作用域没和函数作用域，没有块级作用域，这带来很多不合理的场景。第一种场景，内层变量可能覆盖外层变量：var tmp = new Date();function f(){ console.log(tmp); if(false){ var tmp = "hello"; }}f(); // undefined上面代码中，...转载 2018-08-13 10:40:11 · 8307 阅读 · 2 评论 -
setTimeout和setInterval的区别
这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行...原创 2018-08-13 16:35:00 · 266 阅读 · 0 评论 -
JS异步回调Async/Await与Promise
promise是为解决ES6异步回调而生的，为了避免出现回调地狱，那为什么又需要Async/Await呢？什么是Async/Await？1.async/await是写异步代码的新方式，以前的方法有回调函数和promise2.async/await是基于promise实现的，她不能用于普通的回调函数3.是非阻塞的4.async/await使得异步代码看起来像同步代码使同pro...原创 2018-09-17 15:17:35 · 537 阅读 · 0 评论 -
canvas、svg与flash
在前端开发中我们做动画主要有四种方式：CSS的animation和transition；canvas；svg动画；flash动画。今天我们主要来看看cancas、svg与flash。1.区别canvas画出的图形都是附在canvas区域之上，但图形都是不可操作的，如果要操作图形，就是直接操作整个canvas，即清空canvas和重绘。svg是一种在网页上画矢量图的方法，结构基于XML。...原创 2018-08-01 09:48:48 · 1126 阅读 · 0 评论 -
如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式。方法一：localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信。 <input id="name"> <input type="button" id="btn...转载 2018-08-04 16:24:44 · 433 阅读 · 0 评论 -
闭包
在理解闭包之前，我们先提出两个概念：局部作用域和全局作用域。在javaScript语言中，函数内部可以读取全局变量，而函数外部却无法获得函数内部的变量。在我们创建对象的时候，其实也创建了一个scope内置对象，scope内置对象中保存了对象被创建的作用域中对象的集合，这个集合叫做作用域链，它决定了哪些数据可以被访问，顺着作用域链一级一级的向外查找父对象上的变量与属性。故为了我们外部也能访问函数...原创 2018-07-16 20:35:03 · 148 阅读 · 0 评论 -
js中创建对象的几种方式
1.工厂模式function createPerson(name){ //1、原料 var obj=new Object(); //2、加工 obj.name=name; obj.showName=function(){ alert(this.name); } //3、出场 return obj; ...原创 2018-07-17 09:18:57 · 160 阅读 · 0 评论 -
JS模块化
随着前端js代码复杂程度提高，js模块化是一个必然趋势，不仅好维护同时依赖明确，不会污染全局。1.无模块化：通过script标签引入js，相互罗列，但是被依赖的放在前面，否则就会报错。 缺点：污染全局变量，维护成本高，依赖关系不明显2.commonJS：该规范主要用在服务端的node中，同步方式加载，它有四个重要的环节：module，expor...原创 2018-07-23 21:11:55 · 124 阅读 · 0 评论 -
webpack流程
我们可以把webpack看成一个工厂，进入的原料经过工厂的加工，然后输出1.前端环境搭建：使用npm install webpack来安装webpack2.部署webpack：在package里配置3.html打包我们需要安装引入html-webpack-plugin4.css打包需要css-loader由于webpack只能打包js文件，故其他文件的打包则需要相应的插件。...原创 2018-07-23 21:26:49 · 410 阅读 · 0 评论 -
JS的事件循环机制
1.为什么js是单线程的？ 作为运行在浏览器的脚本语言，主要用途之一是操作DOM，如果有两个线程同时对一个DOM进行操作的话，则浏览器不知道该听谁的2.主线程：规定现在执行执行栈中的哪个事件主线程循环：即主线程会不停的在执行栈中读取事件，会执行完栈中的所有同步代码，当遇到一个异步事件后，并不会一直等待异步事件返回结果，而是会将这个事件挂在与执行栈不同的队列中，我们称之为任务队列。 主线程将...原创 2018-07-20 10:02:36 · 887 阅读 · 0 评论 -
promise的理解
常见的异步编程方式有：回调函数、事件监听、ES6的promise。而promise是用来解决回调噩梦的，当无数个回调函数嵌套那将是灾难性的，promise相当于是将回调函数用一种更简单明了的方式改写。promise其实是一个构造函数，其接受一个函数作为参数（函数中则有resolve和reject两个参数，分别表示执行成功与失败时的回调函数）。将我们的异步方法用promise进行封装。即：...原创 2018-07-15 13:25:57 · 246 阅读 · 0 评论 -
进程与线程
在理解进程和线程概念之前首选要对并发有一定的感性认识，如果服务器同一时间内只能服务于一个客户端，其他客户端都再那里傻等的话，可见其性能的低下估计会被客户骂出翔来，因此并发编程应运而生，并发是网络编程中必须考虑的问题。实现并发的方式有多种：比如多进程、多线程、IO多路复用。多进程进程是资源（CPU、内存等）分配的基本单位，它是程序执行时的一个实例。程序运行时系统就会创建一个进程，并为它分配资...转载 2018-07-30 16:38:22 · 107 阅读 · 0 评论 -
generator
Generator简介先来一段最基础的Generator代码function* Hello() { yield 100 yield (function () {return 200})() return 300}var h = Hello()console.log(typeof h) // objectconsole.log(h.next()) /...转载 2018-07-30 17:04:47 · 153 阅读 · 0 评论 -
函数去抖和函数节流
函数节流和去抖的出现场景，一般都伴随着客户端 DOM 的事件监听。举个例子，实现一个原生的拖拽功能（不能用 H5 Drag&Drop API），需要一路监听 mousemove 事件，在回调中获取元素当前位置，然后重置 dom 的位置（样式改变）。如果我们不加以控制，每移动一定像素而触发的回调数量是会非常惊人的，回调中又伴随着 DOM 操作，继而引发浏览器的重排与重绘，性能差的浏览器可能就...原创 2018-08-04 10:31:56 · 301 阅读 · 0 评论 -
webpack浅析
webpack 是现在前端开发常用的打包工具，上手简单，但是有很多概念比较难懂。这里整理下，方便以后查阅。loader 和 plugin主要区别 loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的loader将资源转化，...转载 2018-07-27 16:33:16 · 139 阅读 · 0 评论 -
node.js怎么发起子进程
node本身为单进程，并使用驱动模式处理并发，为了解决单进程在多核cpu上的资源浪费，node提供了cluster和child_process模块来创建多个子进程。Node.js是单线程的,对于现在普遍是多处理器的机器是一种浪费,怎么能利用起来呢？于是child_process模块出现了。child_process模块可以在其他进程上产生、派生，并执行工作。child_process模块提...原创 2018-07-27 16:37:07 · 451 阅读 · 0 评论 -
express中间件和路由
1.通常http的url是这样的：http://host[:port][path]，http表示协议、host表示主机、port为端口、path指定请求资源的URI，如果URL没有给出path，一般默认为“/”（通常有客户端来补上）2.所谓路由就是如何处理http请求中的路径部分（path）例如，我们在express中:var express = require('express')...原创 2018-07-27 16:42:37 · 1079 阅读 · 0 评论 -
JS中实现继承的几种方法及其优缺点
要搞懂JS继承，我们首先要理解原型链：每一个实例对象都有一个__proto__属性（隐式原型），在js内部用来查找原型链；每一个构造函数都有prototype属性（显示原型），用来显示修改对象的原型，实例.__proto__=构造函数.prototype=原型。原型链的特点就是：通过实例.__proto__查找原型上的属性，从子类一直向上查找对象原型的属性，继而形成一个查找链即原型链。1.原型...原创 2018-07-16 10:25:55 · 6041 阅读 · 0 评论