JackieDYH的博客

Vue组件其实就是一个Vue实例。JS中的实例是通过构造函数来创建的，每个构造函数可以new出很多个实例，那么每个实例都会继承原型上的方法或属性。Vue的data数据其实是Vue原型上的属性，数据存在于内存当中。Vue为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。因为使用对象的话，每个实例（组件）上使用的data数据是相互影响的，这当然就不是我们想要的了。对象是对于内存地址的引用，直接定义个对象的话组件之间都会使用这个对象，这样会造成组件之间数据相互影响。

优点： 1.上手简单，位置固定 缺点： 一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，项目小还好，清晰明了，但是项目大了后，一个methods中可能包含很多个方法，往往分不清哪个方法对应着哪个功能，而且当你想要新增一个功能的时候你可能需要在 data，methods，computed，watch中都要写一些东西，但是这个时候每个选项里面的内容很多你需要上下来回的翻滚，特别影响效率。这无疑是1号能够获取最大收益的方案了！分配方案可写成（97，0，1，2，0）或（97，0，1，0，2）。

在上面的代码中，我们使用Canvas API绘制了一个三角形，并在其内部添加了事件监听器。当单击三角形时，我们将检查鼠标单击是否在三角形内，并在弹出窗口中显示消息。

事件循环⼜叫做消息循环，是浏览器渲染主线程的⼯作⽅式。在 Chrome 的源码中，它开启⼀个不会结束的 for 循环，每次循环从消息 队列中取出第⼀个任务执⾏，⽽其他线程只需要在合适的时候将任务加⼊到 队列末尾即可。过去把消息队列简单分为宏队列和微队列，这种说法⽬前已⽆法满⾜复杂的 浏览器环境，取⽽代之的是⼀种更加灵活多变的处理⽅式。根据 W3C 官⽅的解释，每Promises是一种处理JavaScript异步代码的方式。它们允许您在异步操作完成后执行一些操作。

给定一个整数数组nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。ps: 注意这里的循环，外面一层表示第一个字符串中的第几个字符，里面一层表示第一个字符串和第几个字符串来比。解释：nums[0] + nums[1] == 9 ，返回 [0, 1]给定一个字符串 s ，请你找出其中不含有重复字符的最长子串的长度。输入: ["flower","flow","flight"]依次判断第一个字符串中的每一个字符是否与后面的相等。

一、charAt()返回在指定位置的字符。var str="abc"console.log(str.charAt(0))//a二、charCodeAt()返回在指定的位置的字符的 Unicode 编码。var str="abc" console.log(str.charCodeAt(1))//98三、concat()连接字符串。 var a = "abc"; var b = "def"; var c = a.concat(b); console.log(c);/

图片转成base64，体积会变大33%，所以大点的图片也不建议转换base64 生成步骤例如：有个单词要转成base64： Hello1. 找到每个字母对应的ASCII值ASCII值 控制字符 ASCII值 控制字符 ASCII值 控制字符 ASCII值 控制字符 0 NUT 32 (space) 64 @ 96 、 1 SOH 33 ! 65 A 97 .

Object.defineProperty必须“预先”劫持属性。被劫持的属性才会被监听到。所以后添加的属性，需要手动再次劫持。而proxy代理了整个对象，不需要预先劫持属性，而是在获取/修改的时候，通过get/set方法来告诉你key。所以不管如何新增属性，总是能被捕获到。

在JavaScript里，我们已经会使用一些原生提供的方法来实现需要延时执行的操作代码，比如很多在线时钟的制作，图片轮播的实现，还有一些广告弹窗，但凡可以自动执行的东西，都是可以和定时器有关的。今天就来和大家分享一下，关于我们在JavaScript里经常会使用到的定时器方法在JavaScript里，我们要学习四个定时器的使用方法，setTiemout、setInterval、setImmediate、requestAnimationFrame，一起来看看吧！什么是定时器JavaScript.

1、树形数据转换在处理商品分类数据、企业列表数据等情况下，后台会返回到前台所有的数据。我们需要根据parentId,数据ID将数据转换为树形数据进行渲染。/** * 树形数据转换 * @param {*} data * @param {*} id * @param {*} pid */export function treeDataTranslate(data, id = 'id', pid = 'parentId') { var res = [] var temp = {}

不可继承的display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi所有元素可继承v

一、null、undefined与NaN的概念在js中,我一直觉得undefined和null的区别不大，平时用的时候也不会太在意。总体说来：undefined一般表示根本”不存在“，null表示定义了，但是值是”空“。但是大家发现，在 Java等编译型语言中，并不存在 undefined。这是为什么呢？Java 是一个静态类型语言，所有的变量在初始化时都进行了严格的类型声明，如果你定义一个undefined的变量，恐怕在编译的时候就被咔擦掉了，但是java中是允许定义null来表示空值的。而 J

一、什么是跨域？  在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。什么是同源策略？  同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。  同源策略限制以下几种行为：Cookie、LocalStorage 和 IndexDB .

没有key <div id="app"> <div> <input type="text" v-model="name"> <button @click="add">添加</button> </div> <ul> <li v-for="(item, i) in list"> <input type="checkbox">

请谈谈wxml与标准的html的异同？都是用来描述页面的结构；都由标签、属性等构成；标签名字不一样，且小程序标签更少，单一标签更多；多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览组件封装不同， WXML对组件进行了重新封装，小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。小程序页面间有哪些传递数据的方法？给html元素添加d

1、v-show和v-if指令的共同点和不同点？共同点：都能控制元素的显示和隐藏；不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。拓展问题：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。2、说

将元素垂直，水平居中分两种情况：一个是元素尺寸固定，二是元素尺寸不固定1）margin负间距 必须知道居中盒的宽度和高度； 为居中盒设置绝对定位； 距离定位父级左边框和上边框的距离设置为50%； 将元素分别左移和上移，移动元素宽度和高度的一半2）margin: auto；实现绝对定位元素的居中 必须知道居中盒的宽度和高度； 为居中盒设置绝对定位； 分别设置left: 0; right: 0; top: 0; bottom: 0; 为居中盒设置margin: auto;方法...

清除浮动在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动例子.news { background-color: gray; border: solid 1px black; }.news img { float

1.不一样的变量声明：const和letES6推荐使用let声明局部变量，相比之前的var（无论声明在何处，都会被视为声明在函数的最顶部）let和var声明的区别：var x = '全局变量';{ let x = '局部变量'; console.log(x); // 局部变量}console.log(x); // 全局变量let表示声明变量，而const表示声明常量，两者都为块级作用域；const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了：c

http的中文叫做超文本传输协议,它负责完成客户端到服务端的一系列操作,是专门用来传输注入HTML的超媒体文档等web内容的协议,它是基于传输层的TCP协议的应用层协议https:https是基于安全套接字的http协议,也可以理解为是http+ssl/tls(数字证书)的组合http和https的区别:HTTP 的 URL 以 http:// 开头，而 HTTPS 的 URL 以 https:// 开头HTTP 是不安全的，而 HTTPS 是安全的HTTP 标准端口是 80 ，而 HT.

随着互联网技术的发展，浏览器已成为网民们获得优质服务与信息的重要工具。当我们连接上网络，打开浏览器，输入网址，空白的页面瞬间会出现各式各样的信息，比如一个搜索网页、挤满文字的门户网站或由图片、文字等整齐排版的网站。那么，从我打开浏览器到我们看到想要的东西展示在网页上这一过程中，究竟时发生了什么呢？一个网页从开始请求到最终的显示一般可以分为7个步骤：1.在客户端浏览器中输入网址URL。2.发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。3.(客户端浏览器)与WEB服务器建立TC.

promise出现的目的一为处理JavaScript里的异步，再就是避免回调地狱。promise三种状态1.pending：在过程中还没有结果2.resolved：成功3.rejected：失败状态变化1、pending -> resolved2、pending -> rejected状态的表现pending状态不会触发then和catchresolved状态会触发后续的then回调函数rejected状态会触发后续的catch回调函数..

async是 js 有史以来最简单的异步写法，能够用同步的方式来处理异步函数。但是其中对于错误的处理一不小心就会忽略掉，特别是目前公司使用的weex作为开发框架，本身的debug的处理极其有限并且不便，当在项目中使用了大量的await / async语句并且没有捕获机制的话，代码很容易就产生错误并且影响程序的正常运行。var fn = function(type,msg){ return new Promise((res,rej) => { if(type){ res(..

async/await 的优势在于处理 then 链单一的 Promise 链并不能发现 async/await 的优势，但是，如果需要处理由多个 Promise 组成的 then 链的时候，优势就能体现出来了（很有意思，Promise 通过 then 链来解决多层回调的问题，现在又用 async/await 来进一步优化它）。假设一个业务，分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。我们仍然用setTimeout来模拟异步操作：/** * 传入参数 n，..

vue3.0中，响应式数据部分弃用了Object.defineProperty，使用Proxy来代替它。本文将主要通过以下方面来分析为什么vue选择弃用Object.defineProperty。Object.defineProperty真的无法监测数组下标的变化吗？ 分析vue2.x中对数组Observe部分源码 对比Object.defineProperty和Proxy一、无法监控到数组下标的变化？在一些技术博客上看到过这样一种说法，认为Object.de...

Vue2.0对于响应式数据的实现有一些不足：无法检测数组/对象的新增 无法检测通过索引改变数组的操作。Vue2.0中响应式数据是通过Object.defineProperty实现，因此无法检测数组/对象的新增，但为什么无法检测到通过索引改变数组的操作呢？也是因为Object.defineProperty的原因么？官方文档中对于这两点都是简要的概括为“由于JavaScript的限制”无法实现，而Object.defineProperty是实现检测数据改变的方案，那这个限制是指Object.defin.

响应式原理当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。现在是时候深入一下了！Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScri.

请求拦截器请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易响应拦截器响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。// 请求拦截（配置发送请求的信息）axios.interceptors.request.use(function (config) { // 处理请求之前的配置 return config}, function (error) { /.

JavaScript 开发中有时会遇到要将一个数组随机排序（shuffle）的需求，一个常见的写法是这样：function shuffle(arr) { arr.sort(function () { return Math.random() - 0.5; });}或者使用更简洁的 ES6 的写法：function shuffle(arr) { arr.sort(() => Math.random() - 0.5);}我也曾经经常使用这种.

数据let sort_data = [{ a: 1, b: 'a' }, { a: 2, b: 'b' }, { a: 2, b: 'c' },];let sorts = [{ key: 'a', order: 'desc' }, { key: 'b', order: 'asc' },];排序后的结果//结果 先a降序,再按b升序[ {a:2,b:'b'}, {a:2,b:'c'}, {a:1,b:'a'},]思路

设后端通过接口返回了天猫的行业信息let industry_list = [{ name: '女装' }, { parent_ind: '女装', name: '连衣裙' }, { parent_ind: '女装', name: '半身群' }, { parent_ind: '女装', name: 'A字群' }, { name: '数码' }, { parent_ind: '数码', name: '电脑配件' }, { parent

实现一个replace函数，接收两个字符串，将第二个字符串中所有和第一个字符串相同的字符串套上span标签replace('a','abcadefga'); 返回值为 '<span>a</span>bc<span>a</span>defg<span>a</span>'function replace(str1, str2) { // 动态设置 let reg = new RegExp(str1, 'g'); ///a/.

假设有一个集合 ['foo', 'bar', 'hello', 'world']，求这个集合里单词组合起来的所有不同的结果let arr = ['foo', 'bar', 'hello', 'world'],str = '',newArr = [],results = [];// 组合for (let i = 0; i < 99; i++) { newArr.push(arr.sort(() => { return Math.random() > 0.5 ? 1 .

将数组随机填充到下面数组中,数量尽可能相同var arr1 = [1,2,3,4,5,6,7,8,9];var group = [[],[],[],[]];function split(arr) { // 随机排序数组 arr.sort(function(){ return 0.5 - Math.random(); }) let nu = Math.floor(arr.length / group.length); let k = 0; // console.log(nu).

第一步 浏览器查找该域名的 IP 地址第二步 浏览器根据解析得到的IP地址向 web 服务器发送一个 HTTP 请求第三步 服务器收到请求并进行处理第四步 服务器返回一个响应第五步 浏览器对该响应进行解码，渲染显示。第六步 页面显示完成后，浏览器发送异步请求。第七步整个过程结束之后，浏览器关闭TCP连接。分析01 浏览器查找该域名的 IP 地址DNS查找过程为：浏览器缓存->系统缓存->路由器缓存->ISP DNS缓存->递归搜索递归搜索过程为：从根域..

ajax请求时http头信息的content-type是application/x-www-form-urlencoded或application/json区别content-type请求头http请求头有四种类型，分别是通用头部，请求头部，响应头部以及内容头部，首先，我们要弄清楚，content-type是属于内容头部，既然是内容头部，那这个请求头是用来向接收端解释传递的该内容主体的，content-type的取值是告诉服务端，你传递过去的内容是什么，你应该准备好如何接收，这里，我们重点剖析.

网络安全是前端工程师需要考虑的问题，常见的网络攻击有XSS，SQL注入和CSRF等XSSXSS，Cross-site script，跨站脚本攻击。是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。它可以分为两类：反射型和持久型。 反射型XSS攻击场景：用户点击嵌入恶意脚本的链接，攻击者可以获取用户的cookie信息或密码等重要信息，进行恶性操作。解决：开启cookie的H.

js代码封装// 获取扩展名let filename = 'js.html';let index = filename.lastIndexOf('.');let suffix = filename.substring(index + 1); //从.加一 到最后// let suffix = filename.substr(index+1);let spl = filename.split('.');console.log(suffix, spl[spl.length - 1]);/

this is a word. ==>.word a is thislet strsx = "this is a word.";function reve(str){ let arr = str.substr(0,str.length-1).split(' ');//分割数组 let result = str[str.length-1] + arr.reverse().join(' '); console.log(result);//.word a is this retur...