weixin_43862991的博客

原创 前端解决跨域

跨域：在浏览器里面当协议、域名、端口有任何一项不同的时候就会产生跨域处理跨域的方式：JsonP(只能处理get请求)、cors(后端开启)、代理服务器前两种已经在之前的文章有所解释可参观JsonP和CROS解决跨域本文介绍代理服务器解决跨域的问题 跨域只会在开发存在，项目的发布时候，会将项目资源整合在一起放在一个服 务器下就不会存在跨域问题跨域值仅存在浏览器中，服务器与服务器之间的数据请求是不存在跨域的问题，于是代理服务器解决跨域的思路就是：在本地设置在需要发送请求的时候本地服务器localh

原创 vue项目优化推荐

项目优化–进度条添加安装nprogress，ui界面依赖安装依赖，搜索nprogress进行安装即可也可以在终端中安装 npm i nprogress -S在main.js中导入进度条组件//导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogress.css'利用NProgress.start()显示进度条(利用请求拦截器)NProgress.start()利用NProg

原创 Git基础概念和使用

Git的基础概念什么是GitGit 是一个开源的分布式版本控制系统，是目前世界上最先进、最流行的版本控制系统。可以快速高效地处理从很小到非常大的项目版本管理。特点：项目越大越复杂，协同开发者越多，越能体现出 Git 的高性能和高可用性！Git的特性Git之所以快速和高效，主要依赖于它的如下两个特性：① 直接记录快照，而非差异比较② 近乎所有操作都是本地执行SVN 的差异比较传统的版本控制系统（例如 SVN）是基于差异的版本控制，它们存储的是一组基本文件和每个文件随时间逐步累

原创 JavaScript进阶必会的手写功能(二）

JavaScript进阶必会的手写功能(一)6. 手写浅拷贝6.1 JavaScript数据类型分类 1. 简单数据类型： Number、 String、Boolean、null、undefined、Symbol 2. 引用数据类型： Array、Object6.2 不同数据类型的存储方式 由上图可见，简单数据类型,将值存储在栈中与堆无关，引用数据类型将值存储在堆中， 而在栈中存放的是指向堆的指针浅拷贝 创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如.

原创 JavaScript进阶必会的手写功能

JavaScript进阶的必要性无论是学习react还是vue，它们都是js的应用框架。剥去他们的壳子看到的始终是js，所以作为一个前端大厨必须要熟练掌握好js这个大勺，才能烧出一顿好菜无论是自我提升还是应付面试以下这些手写功能是每一个前端程序员必须掌握的1. 手写apply、call、bind 每个Function对象都存在apply()、call()、bind() 方法，其作用都是可以在特定的作用域 中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。apply、

原创 axios的请求封装

参考一import axios from 'axios'import qs from 'qs'import store from '../store/index'import { MessageBox } from 'element-ui'/* * 一、request： * 1. 说明：封装对后台的请求，可以选择自动处理一些异常。 * 2. 参数： * - url： 后台地址，必填，String，如："/user/add" * .

原创 URL的hash

#的含义- #代表网页中的一个位置，其右边的字符，就是该位置的标识符。比如- http://www.example.com/index.html#top- 就是代表index.html中的top位置。浏览器会自动把top位置滚动到页面可视区域内。设置方法：step1：设置一个锚点 <a href="#print">定位到top位置step2：在页面需要定位的内容加上id=“top”。例如：测试：step1设置的锚点，step2中id为top的内容会滚动到页面顶端（可观察滚动条的

原创 vue面试总结

v-if和v-show的比较// v-if 和 v-show 两者都是控制元素的隐藏和显示的，他们的值都是布尔值 v-if 和 v-show的区别1. 方式：v-show 底层原理是操作元素的display属性为none还是block，v-if 底层是操控元素的创建/销毁dom树2. 编译过程 - v-if 切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件 - v-show 只是简单的基于 css 切换3. 编译条件 -v-if 是惰性的，如果初始.

原创 前端基础面试必备

js和jquery的区别1. jQuery 是一个快速、简洁的js库 简单的理解就是一个js文件 里面是对js的原生代码进行了封装 jq的优点： 1. 轻量级 ，也就是几十kb ，不会影响页面加载速度 2. 链式编程、隐式迭代(隐式遍历) 3. 基本兼容了现在主流的浏览器 4. 样式、动画支持 简化了dom操作 5. 支持插件扩展，第三方的插件比较丰富 6. 免费、开源闭包的原理以及应用场景1.闭包原理：根据js的词法作用域，函.

原创 项目重构之wwda

所谓的重构：是在不改变程序的输入输出即保证现有功能的情况下，对内部实现进行优化和调整why重构- 设计不合理or全无设计- 页面结构与功能实现耦合- 代码难以理解- 代码引起性能问题- 框架or类库更新when重构- 功能迭代时- 修复bug的时候- code Review阶段do 重构- 跑线上流程- 对照现有的交互稿- 读懂已有代码- 询问之前的开发者after 重构- 入口明确，调用关系清晰，查找方便- 功能实现与结构不耦合，可读性增强- 组件化后，有利于功能重.

原创 前端必备理解之设计模式

MVC模式 模型（Model）、视图（View）和控制器（Controller），以便于程序的分层开发。- model 定义用户界面所需要的被显示的数据模型以及这个数据模型包含着相关的业务逻辑。view 呈现给用户的终端界面，主要用于模型中数据的可视化。Controller 作用于模型和视图上。它控制数据流向模型对象并在数据变化时更新视图它使视图与模型分离开。MVVM模式- Model 层代表数据模型也可以在Model中定义数据修改和操作的业务逻辑View 代表UI 组件，它负责将数.

原创 setTimeout和setInterval时间准确的问题

setTimeout和setInterval，这两个js函数都是用来定时执行。setTimeout执行一次，setInterval执行多次。问题的出现，使用setInterval时，设置执行速度为1ms。这时setInterval就出现了延迟。它并没有严格按照1ms的速度执行。导致的原因从javascript的单线程机制说起。对于长时间执行的任务设置短暂的时间间隔，那么在第一次执行完成之前，可能会由于执行不断的迭代造成延迟。因为setInterval的回调函数并不是到时后立即执行,而是等系统资源空闲.

原创 vue实现数据双向绑定

Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。　当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。　Observer ：数据监听器，能够对数据对象的所有属性进行

原创 pm2管理常用的命令

原创 webpack

webpack1. webpack 就是一个js程序的打包器，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图2. Webpack就是负责从我们指定的一个文件为入口，以入口文件为基础，然后依据环环相扣的关系，把我们写的每个需要使用的功能模块找到，构建出一个依赖关系，然后把它们优化、压缩、打包，最后生成最完美的文件。3.webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性webpack打包的好处1. 程序员在开发的时..

原创 使用码云部署项目上线

项目打包好之后，将dist文件单独拿出来在码云上创建一个仓库将本地的dist进入终端 采用（git init初始化）再将文件推送到远程的仓库点击开启就会生成一个项目链接就可以点击访问这个链接在码云上点击自己的项目再点击下图就会生成一个链接...

原创 在vue中通过索引修改数组中的数据是否是响应式的

一句话：先抛结论，在vue中通过索引修改数组中的数据页面是不会改变的也就不是响应式以下是具体的代码案例var vm = new Vue({ el: '#app', data: { // 数组类型的类型 list: ['apple', 'orange', 'banana', { a: 123 }], // 对象类型的数据 info: { name: 'lisi', age: 12

原创 javascript数据类型判断的几种方法

数据类型的判断有时我们经常需要判断数据的类型，有时又不清楚使用具体的方法。这里总结了一下集中的数据类型判断的方法 总有一款适合你1. typeof (先抛结论)：对于基本数据类型判断是没有问题的，但是遇到引用数据类型(如：array object) 是不起作用 其中对 array object null 返回的结果都是object 以下是具体的代码实例 var test1=null var test2=23 var test3=false var test4='gri'

原创 前端路由简单理解即应用

路由的概念路由的本质就是一种对应的关系，比如说我们在url中地址中输入我们需要访问的url地址之后，浏览器要去请求这个url地址对应的资源那么url地址和真实的资源之间就有一种对应关系，就是路由路由分为前端路由和后端路由后端路由1.概念：根据不同的用户URL请求，返回不同的内容2.本质：URL请求地址与服务器资源之间的对应关系前端路由1.概念：根据不同的用户事件，返回不同的页面内容2.本质：用户事件与事件处理函数之间的对应关系了解页面数据渲染的演变最初页面的渲染是由后端路由来

转载 es6之promise简单理解及使用

promise1. promise是解决异步的一种方案，也就是让promise帮我们去处理异步，最终promise会返回异步处理的结果。2. 有了promise之后，让异步处理更加灵活，还能够解决之前的回调地狱的问题。promise的使用我们需要用promise帮我们处理异步var a=new Promise(function(resolve.reject){ // 在这里来进行真正的异步处理 setTimeout(function(){ console.log('hello p

原创 vue基础之常用特性

vue 常用特性表单基本操作获取单选框中的值通过v-model<!---1. 两个单选框需要同时通过v-model 双向绑定 一个值 ----><!---2. 每一个单选框必须要有value属性且value值不能一样 ----><!---3. 当某一个单选框选中的时候v-model会将当前的value值改变data中的数据 ----><!---下面是监控gender ----><!---laber的for属性的作用： 通过for属

原创 Vue基础之必备指令

Vue是什么？vue 是一套用于构建用户界面的渐进式框架，vue核心库只关注视图层，不仅易上手还便于与第三方库或既有项目的整合指令：本质就是属性，Vue中以v-开头的属性就是指令v-clooak `防止页面加载时出现闪烁问题v-clooak的使用 <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性v-cloak的标签让他隐藏 */ [v-cloak]{ /* 元素隐藏 */ display:

原创 LeetCode 每天一题 简单之路 —罗马数字

罗马数字包含以下七种字符: I， V， X， L，C，D 和 M。字符 ------ 数值I --------- 1V --------- 5X --------- 10L --------- 50C --------- 100D --------- 500M --------- 1000例如， 罗马数字 2 写做 II ，即为两个并列的 1。12 写做 XII ，即为 X + II 。 27 写做 XXVII, 即为 XX + V + II 。通常情况下，罗马数字中小的数字在大的数字的

原创 LeetCode 每天一题 简单之路 数字反转

给出一个 32 位的有符号整数，你需要将这个整数中每位上的数字进行反转。示例 1:输入: 123 输出: 321示例 2:输入: -123 输出: -321示例 3:输入: 120 输出: 21注意:假设只能存储得下 32 位的有符号整数，则其数值范围为 [−2** 31, 2**31 − 1]。请根据这个假设，如果反转后整数溢出那么就返回 0。点击查看LeetCode题目来源小白捋清楚思路：第一眼看到题目的时候，就想到使用数组的reverse()方法 此题目主要思路是：0-9返回自己

原创 ajax-防抖&节流

什么是防抖防抖策略 (debounce)当事件被触发时，延迟N秒才执行,如果在这N秒内再次被触发将重新计时好处 能够保证用户在频繁触发某些事件的时候，不会频繁的执行回调，只会被执行一次防抖的应用场景用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；什么是节流节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。节流的应用场景① 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

原创 JSONP实现跨域访问的实现原理

先了解一下同源策略同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能MDN官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互这是一个用于隔离潜在恶意文件的重要安全机制 通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互例如：① 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB② 无法接触非同源网页的 DOM③ 无法向非同源地址发送 .

原创 LeetCode 每天一题 简单之路 两数之和

给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9 所以返回 [0, 1]题目来源以下解法竟是小白个人看法，如有考虑不不周的地方欢迎指正简单的说一下自己的思路： 我的想法是第一遍遍历数组，假设第一个值可以和后面

原创 ES6+功能 set数据结构

set数据结构ES6 提供了新的数据结构 Set。 它类似于数组， 但是成员的值都是唯一的， 没有重复的值。Set本身是一个构造函数， 用来生成 Set 数据结构 const set = new Set([1, 3, 4, 5, 4, 3, 2, 1]); console.log(set);数组去重 var arr = [1, 3, 4, 5, 4, 3, 2, 1] var newArr = [...new Set(arr)] console.log(newArr

原创 ES6+功能 剩余参数

剩余参数剩余参数语法允许我们将一个不定数量的参数表示为一个数组不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数 const sum = (...args) => { let total = 0; args.forEach((item) => { total += item; }) return total;

原创 ES6+功能 解构赋值

解构赋值结构赋值：ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构 就是一种语法糖 console.log('-------结构赋值：数组-------------'); var arr = [1, 2, 3, 4] let [a, b, c, d] = arr; console.log(a, b, c, d); //打印出1 2 3 4按照对应的结构–复杂 var arr1 = [1, [2, 3, 4]

原创 ES6+功能 箭头函数

箭头函数​ 箭头函数：就用=>替代function，然后再调节一下结构顺序即可之前使用的函数 function qh(n1) { return n1 * n1; } console.log('-----------普通函数----------'); console.log(qh(10));es6的写法 const sum = (n2) => { return

原创 ES6+ 模版字面量（字符串拼接）

模版字面量新增的创建字符串的方式，使用反引号定义 let name = `zhangsan`;模板字符串中可以解析变量let myName = 'Jack';let sayHello = `hello,my name is ${myName}`; console.log(sayHello); // hello, my name is Jack模板字符串中可以换行let result = { name: 'zhangsan',

原创 ES6+的功能

ES6+的功能var、let、const关键字辨析var可以重复定义同名变量var name='Bob';var name='Tom';console.log(name) //Tom 存在变量提升//javascript 可以将变量提升 a = 2console.log(a); //2 var a//但是初始化的变量是不能提升的console.log(b); //undefinedvar b=3;没有块级作用域let arr=[];for(var i=0;i

原创 css单行文字和多行文字溢出隐藏

单行文字溢出隐藏步骤强制文字一行显示 white-space: nowrap;将多余的文字隐藏 overflow: hidden;将隐藏的文字使用省略号代替 text-overflow: ellipsis;多行文字溢出隐藏步骤强制文字一行显示 white-space: nowrap;将多余的文字隐藏 overflow: hidden;将隐藏的文字使用省略号代替 text-overflow: ellipsis;如下属性用来辅助实现多行文字溢出显

原创 jQuery-常见的全选按钮和单选按钮同步

下面是项目的结构代码，需要拷贝使用注意引入要 jquery<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>全选</title> <script src="./jquery-1.11.1.js"></script> <style> * { .

原创 ES5数组方法的比较

数组方法之：遍历（forEach）<script> //定义一个数组 var arr=[100,200,300,400,500]; //注意：forEach()遍历是不能提前结束的 arr.forEach(function(val,i,arr){ //函数中的第一个参数：当前项的值 //函数中的第二个参数：当前项的索引值 //函数中的第三个参数：当前数组本身 //打印数组中的各个值 console.log(v.

原创 ES5的继承（没有super关键字）使用组合继承：构造函数+原型对象

<script> function Father(name, age) { this.name = name; this.age = age; } //父类的方法是放在原型对象中的--为了节约内存 Father.prototype.money = function () { console.log('先赚它一个小目标'); } functi

原创 ES6中属性以及方法的继承(super)

<script> //创建一个Father类 class Father{ //利用constructor来创建属性 constructor(name,age){ this.name=name this.age=age } //方法在外边直接定义 Sing(){ console.log('I can sing') } }//创建一个Son类，这个类继承Father的属性并且还拥有自己的属性//E

原创 简单轮播图的实现

简单轮播图的实现#简单轮播图的实现的思路所谓的简单轮播图就是指每一个数字按钮对应一张图片，并能够点击数字按钮实现图片的跳转。其实轮播图就是一个ul列表中的每一个li浮动成一行，将超过盒子的部分隐藏。痛过点击数字按钮使整体的ul列表向左右侧移动，视觉是感受不到整体的ul列表移动只能感受到某一张图片移动。主要问题是：移动的距离其实就是盒子的大小*（数字按钮数字大小-1），因为是向左移动所以是负数所以向左侧移动的距离target=-盒子的大小*（数字按钮数字大小-1）。值得注意的是要将每个数字添加自己的

原创 前端必软件篇

vscodevscode是针对于编写现代 Web 和云应用的跨平台源代码编辑器。本次文章主要是在前端程序员编写代码时，需要安装vscode的一些简单的插件。这些插件可以更加快速的帮助程序员开发和检查程序。第一步：下载vscode，建议从官网中下载对应位数和版本的软件。vscode官网第二步：下载安装并打开之后，网站是全英文的，对于英文不是很好的人来说，可以考虑将软件汉化，具体步骤如下图所示...