DoubleSRZee-CSDN博客

原创 git创建本地分支并提交到远程分支（记一次很简单的git实践）

首先创建本地文件存储从类git代码管理平台拉取的代码git clone http://...在当前文件中初始化git版本管理git init使用类VSCODE编辑工具打开项目，安装项目依赖npm包npm install并通过编辑工具的命令行（下同），对当前项目的分支进行查看，可以查看本地和线上分支git branchgit branch -a新建保护分支并切换分支至zee（原来的...

2019-10-24 19:53:17 653

原创 Vue回顾学习一（组件通信、数据方法，实例生命周期钩子）

组件建立以及组件通信：Vue.component(‘todo-item’, {props: [‘todo’],template: ‘{{ todo.text }}’});var app = new Vue({el: ‘app’,data: {groceryList: [{id: 0, text: ‘蔬菜’}, {id: 1, text: ‘奶酪’}, {id: 2, te...

2019-08-02 15:35:57 156

原创 Echarts图表设置百分比显示以及图表内容合并问题

业务需求需要开发一个动态tab用来切换Echarts图表的显示，tab项指定显示图表的展示数据。实现思路通过多个DIV标签承载Echarts图表。起初的思路是将多个DIV标签设置样式display:none:进行隐藏，在每次进行tab切换时，先改变DIV标签的样式让其显示，然后进行数据请求并绘制图表。出现问题本该按照百分比显示的Echarts图表只显示了很小的宽和高，当我打开控制台或者对...

2019-03-22 18:01:14 1374

原创 VUE路由变更页面未更新问题

VUE路由变更页面未更新业务需求实现方案遇到的问题问题定位以及解决业务需求在做一个管理用户账户下APP的网站，在主页需要切换应用APP的ID，来显示不同APP对应的数据，对不同APP进行操作。实现方案由于切换APP对应的是整个页面的更新，考虑通过将APPID直接作为URL参数，切换时，变更URL地址后的APPID，对应页面数据通过URL参数进行请求。此时需要维护一个全局变量存储这个APPI...

2019-03-21 17:41:32 1325

原创通过业务场景理解跨域与请求（简单与非简单）

跨域问题业务场景中出现的问题问题的表现问题的定位什么是OPTIONS请求两种请求什么时候会出现OPTIONS请求回归问题本身解决问题总结业务场景中出现的问题近期我单独负责一个项目的前端工作，在网络方面是和后端分离开发，在前端发起网络请求就会存在跨域的问题。tips：由于开发阶段前后端分离，所以会存在种种的跨域情况，为了便于开发联调所以才进行跨域处理通常的解决方案是CORS（跨域资源共享...

2019-03-08 16:35:45 454

简介在查阅w3school中，第一句话中的“元数据”就让我开始了Google之旅。然后很顺利的在英文版的w3school找到了想要的结果。（中文w3school说的是元信息，Google和百度都没有相关的词条。但元数据在Google就有详细解释。所以这儿采用英文版W3school的解释。)The &amp;amp;lt;meta&amp;amp;gt; tag provides metadata about the HTML...

2018-11-20 21:46:58 222

原创 CSS3 伪元素 ::before&::after

::before 和 ::after伪元素的说明:before 和 :after将在内容元素的前后插入额外的元素；:before将会在内容之前“添加”一个元素而:after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性。:before 和 :after发布于CSS2.1, 在css3中修订后伪元素使用::,伪类使用:, 因而形式为:: before, :...

2018-11-20 20:33:19 568

原创水平垂直居中方案

水平居中内联元素.center-text { text-align: center;}块级元素.center-box { margin: 0 auto;}多块级元素利用inline-block如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。<div class="...

2018-11-20 18:22:15 170

原创 Vue2实践揭秘读书笔记(2)——webpack模板以及构建工具

Vue作为AngularJS和React的继承者和改良者，它不单单从编码的特色与开发框架本身的使用上进行大面积的改良与优化。它提供了整套简化开发、测试与部署的方案。安装vue-clivue-cli是一个npm的安装包，我们希望它能在本机的任意目录下创建项目，那么就得将它安装到node.js的全局运行目录下：npm i vue-cli -g初始化项目：命令init ...

2018-11-15 18:53:41 234

原创 Vue2实践揭秘读书笔记(1)——Vue概要

Vue.js与Angular2和React相比，Vue.js一开始就为我们铺平入门的道路，脚手架vue-cli。因为它的存在，省去了手工配置开发环境、运行环境和测试环境的步骤，开发者可以直接步入Vue.js开发的殿堂。在开始之前，先安装npm，然后输入vue-cli安装到全局环境npm i vue-cli -g然后，开始建立工程vue init webpack-simple vue-...

2018-11-15 11:14:18 312

原创双向数据绑定

Vue核心：响应式的数据绑定组件化Vue三要素：响应式：例如如何监听数据变化，其中的实现方法就是我们提到的双向绑定。模版引擎：如何解析模版。渲染：Vue如何将监听到的数据变化和解析后的HTML进行渲染。可以实现双向绑定的方法有很多，KnockoutJS基于观察着模式（发布-订阅222222222222）的双向绑定，Ember基于数据模型的双向绑定，Angular基于脏检查的双向绑...

2018-11-08 18:56:14 218

原创 HTTP1.0->HTTP1.1->HTTP2.0的进阶

HTTP1.0 -> HTTP1.1长连接：HTTP1.0需要使用keep-alive参数来告知服务器端要建立一个长连接，而HTTP1.1默认支持长连接。（TCP三次握手，有开销，可以维持一个长连接）节约带宽：HTTP1.1支持只发送header信息（不带任何body信息），如果服务器认为客户端有权限请求服务器，则返回100，否则返回401。客户端接收100，才把请求body发送到服务...

2018-11-07 14:58:58 185

原创 JavaScript垃圾收集

JavaScript具有自动垃圾收集机制，执行环境会负责管理代码执行过程中使用的内存。而在C和C++之类的语言中，开发人员的一项基本任务就是手工跟踪内存的使用情况，这是造成许多问题的一个根源。这种垃圾收集机制的原理其实很简单：找出那些不再继续使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间）周期性地执行这一操作。垃圾收集器必须跟踪哪个变量有用哪个...

2018-11-06 18:00:08 378

原创 ES6&ES5实现观察者模式(发布订阅者模式)

ES6class Observer{ constructor(){ this.handle = []; } addSubscribe(topic, fn) { this.handle.push({topic: topic, fn: fn}); console.log(this.handle); } removeSubscribe(topic, fn) { let ind...

2018-10-26 19:35:27 1107

转载 JavaScript数组去重

下面是用来创建随机数数组的函数（1-1000）function createRandomArr(len){ var arr = []; for(var i = 0; i < len; i++) { arr[i] = Math.floor(Math.random() * 1000) + 1; } return arr;}1、for循环（嵌套）+ 新数组function s...

2018-10-26 15:02:29 159

转载 JavaScript合并两个有序数组

function mergeArray(arr1,arr2){ var ind1=0; //标记arr1的对比元素的初始索引值 var ind2=0; //标记arr2的对比元素的初始索引值 var arr=[]; //作为输出的新数组 while(ind1&amp;amp;amp;lt;arr1.length &amp;amp;amp;amp;&amp;amp;amp;amp; ind2&amp;amp;amp;lt;arr2

2018-10-26 12:31:51 380 1

原创 url访问网站的网络传输全过程

整个过程基本分为下面几个部分：1、域名解析成IP地址；2、与目的主机进行TCP连接（三次连接）；3、发送与收取数据；4、与目的主机断开TCP连接（四次挥手）；域名解析过程如下1、浏览器向本机DNS模块发出DNS请求，DNS模块生成相关的DNS报文。2、DNS模块将生成的DNS报文传递给传输层的UDP协议单元。3、UDP协议单元将该数据封装成UDP数据报，传递给网络层的IP协议单元。...

2018-10-25 20:05:12 522

原创 JavaScript字符串相关题目

正则匹配-驼峰转换function test(str) { var re = /-(\w)/g; return str.replace(re, function($0, $1){ return $1.toUpperCase(); });}test(str);//border-bottom-color -&gt; borderBottomColor获取字符串中出现最多的字符和及...

2018-10-24 20:15:46 265

原创原型规则

var obj = {};obj.a = 100;var arr = []; arr.a = 100;function fn() {}fn.a = 100;console.log(obj.__proto__);console.log(arr.__proto__);console.log(fn.__proto__);console.log(fn.prototype);conso...

2018-10-24 15:12:01 213

原创 JavaScript二分查找（折半查找）

function binarySearch(arr, key) { var low = 0, high = arr.length - 1; while(low &amp;amp;amp;amp;amp;amp;amp;lt;= high) { var mid = parseInt((high + low) / 2); if(key == arr[mid]) { return mid; } else if (key &amp;amp;a

2018-10-23 21:21:58 282

原创箭头函数

箭头函数表达式的语法比函数表达式更短，并且没有自己的this,arguments,super或new.target。这些函数表达式更适用于那些本来就需要匿名函数的地方，并且它们不能用作构造函数。基础语法(参数1，参数2，...，参数N) =&amp;amp;amp;amp;gt; { 函数表达式 }(参数1，参数2，...，参数N) =&amp;amp;amp;amp;gt;表达式(单一)//相当于：(参数1，参数2，...，参数N) =&am

2018-10-23 15:28:11 1301

原创函数节流

函数节流背后的基本思想是指，某些代码不可以在没有间断的情况连续重复执行第一次调用创建一个定时器，在指定的时间间隔之后运行代码。而当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。var processor = {...

2018-10-22 15:58:14 147

原创 JavaScript快速排序

function quickSort(arr){ var arrLeft = [], arrRight = [], arrLen = arr.length, pointIndex = parseInt(arrLen / 2), point = arr[pointIndex]; for(var i = 0; i &lt; arrLen; i++){ if(i === poin...

2018-10-22 14:34:08 115

原创函数柯里化

函数柯里化与函数绑定密切相关，它用于创建已经设置好了一个或多个参数的函数。基本方法和函数绑定一样：使用一个闭包返回一个函数。两者的区别在于，当函数被调用时，返回的函数还需要设置一些传入的参数。function add(num1, num2){ return num1 + num2;}function curriedAdd(num2){ return add(5, num2);}...

2018-10-22 14:25:22 133

原创 JS深拷贝

function deepClone(obj){ let objClone = Array.isArray(obj) ? [] : {}; if(obj &amp;&amp; typeof obj === "object"){ for(key in obj){ if(obj.hasOwnProperty(key)){ //判断obj子元素是否为对象，如果是，递归复制 ...

2018-10-22 13:40:51 115

原创跨域资源共享CORS

CORS需要浏览器和服务器同时支持，整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨域，就会自动添加一些附加的头信息，有事还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨域通信。两种请求简单请求同时满足以...

2018-10-17 12:57:22 163

原创高阶函数

高阶函数是指至少满足下列条件之一的函数。函数可以作为参数被传递回调参数在ajax异步请求的应用中，回调函数的使用非常频繁。当我们想在ajax请求返回之后做一些事情，但又并不知道请求返回的确切时间时，最常见的方案就是把callback函数当作参数传入发起ajax请求的方法中，待请求完成之后执行callback函数：var getUserInfo = function(userId, ca...

2018-10-16 15:05:27 132

原创闭包的更多作用

封装变量闭包可以帮助把一些不需要暴露在全局的变量封装成“私有变量”。假设有一个计算乘积的简单函数：var mult = function(){ var a = 1; for(var i = 0, l = arguments.length; i &amp;lt; l; i++) { a = a * arguments[i]; } return a;};// 加入缓存机制，提高函数性能...

2018-10-16 12:23:55 118

原创 this、call和apply

JavaScript总是指向一个对象，指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数声明时的环境。this的指向除去不常用的with和eval的情况，具体到实际应用中，this的志向大致可以分为以下4种。作为对象的方法调用。作为普通函数调用。构造器调用。Function.prototype.call或Function.prototype.apply调用。作为对象...

2018-10-14 21:55:26 180

原创原型模式&原型继承

使用克隆的原型模式从设计模式角度讲，原型模式是用于创建对象的一种模式，如果我们要创建一个对象，一种方法是先指定它的类型，然后通过类来创建这个对象。原型模式选择了另外一种方式，不用关心对象的具体类型，而是通过克隆来创建一个一模一样的对象。原型模式的实现关键，是语言本身是否提供了clone方法。ECMAScript5提供了Object.create方法，可以用来克隆对象。var Plane = ...

2018-10-12 20:21:58 193

原创封装

由于JavaScript没有提供对类似private、public、protected等关键字的支持，我们只能以来变量的作用于来实现封装特性，而且智能模拟出public和private这两种封装性。出了ECNAScript6中提供的let之外，一般我们通过函数来创建作用域：var myObject = (function(){ var _name = 'zee'; // 私有（private...

2018-10-10 16:57:39 129

原创多态（继承）

多态同一操作作用于不同的对象上面，可以产生不同的对象上面，可以产生不同的解释和不同的执行结果。换句话说，给不同的对象发送同一个消息的时候，这些对象会根据这个消息分别给出不同的反馈。让你叫，你就叫var makeSound = function(animal){ if(animal instanceof Duck){ console.log('嘎嘎嘎'); }else if...

2018-10-10 16:07:33 116

原创令人耳目一新的鸭子

2018-10-10 11:33:13 157

原创 JavaScript设计模式之单例模式

单例模式单例保证一个类只有一个实例，实现方法是一般先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。（保证一个类仅有一个实例，并提供一个访问他的全局访问点）单例的作用和注意事项模式作用：模块间通信；系统中某个类的对象只能存在一个；保...

2018-10-10 11:03:41 150

原创前端路由&vue-router部分解读

前端路由由于SPA单页应用以及前后端分离的思想的出现，前端路由在当今的前端开发中是必不可少的。一些流行框架vue、react都有对应的实现vue-router、react-router等。框架路由的实现都是对原生路由进行了封装。原生路由我们通常采用hash实现或者H5的history实现。hash路由hash路由：一个明显的标志就是带有#，我们主要是通过监听url中的h...

2018-09-15 19:46:06 249

原创 ECMAScript异步编程

ECMAScript异步编程涉及知识点：ECMAScript2015+Promiseasync/await异步编程node.js服务器const express = require('express')const app = express()app.get('/', (req, res) =&amp;amp;gt; { res.setHeader('...

2018-07-21 20:44:07 284

原创 Vue基于Webpack的相关目录及配置解读

如今webpack已经成为前端项目开发过程中必不可少的一部分，一直以来都是大概了解一些内容，没有做详细的分析，这篇文章总结一下我的所获。1、build文件（我们最终会把所有要发布的代码放到这里）1.1 build.js （生产环境配置脚本-打包过程需要引入的配置信息）const ora = require('ora') //Elegant terminal spinner 优雅的终...

2018-07-21 13:23:00 665 1

原创 JavaScript中关于Array对象的方法特性总结

首先检测一个对象是不是Array对象（数组），此时我们用到了Array.isArray()方法。Array.isArray()方法的目的就是确定某个值到底是不是数组，不用管它是哪个全局执行环境中创建的。if(Array.isArray(value)){ //对数组执行某些操作}检测到一个值（对象）是数组。可以使用转换方法操作该数组。toString()方法会返回由数组中每个值的字符串形式拼接...

2018-03-18 22:21:33 230

原创关于AJAX请求JSON数据(解决responseText空的问题)

AJAX请求服务器提供的JSON数据大家在前后端交互时，前台网页会和后台服务器以及数据库进行交互。感觉比较基础的就是将从后台获取的数据显示到页面中。最近，刚开始使用AJAX处理数据交互，遇到一些问题，并且解决了，做以下分享。众所周知，AJAX的核心是XMLHttpRequest对象。它完成了对数据的请求以及获取。见下：var xhr = new XMLHttpRequest();var u

2017-11-09 23:26:07 9792 5

原创 JavaScript中的作用域（链）和闭包（一）

学JavaScript有很长一段时间了，做了一些网页，总是有一些bug或者不好的解决方案使我困扰，感觉是原生js的基础没有打好，最近开始巩固基础，首先对作用域和闭包的相关知识回顾并总结了一下作用域首先介绍一下编译原理：JavaScript引擎进行编译的步骤和传统的编译语言相似，但某些环节可能更复杂。传统语言的源代码在执行前会经历三个步骤。统称为“编译”。分别是：分词/词法分析—— 解析/语法分

2017-11-07 14:15:45 294

空空如也

JavaScript中push()和push.call()的使用