reaaal-CSDN博客

原创 js整数反转

题目描述：给你一个32位的有符号整数x，返回将x中的数字部分反转后的结果。如果反转后整数超过32位的有符号整数的范围 [ -2^31 , 2^31 -1 ]，就返回0.示例：输入： x = 123输出：321思路：先将x从Number对象转成String对象，用String对象的方法split将String分割成Array，然后用Array对象的reverce方法进行翻转，再用Array对象的join方法将Array转成String，最后用parseInt将String变回Num

2021-06-28 18:03:21 477

原创 js两数之和

题目描述：给定一个整数数组nums和一个整数目标值target，请你在该数组中找出和为目标值target的哪两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。示例：输入：nums = [2,7,11,15]，target = 9输出： [0,1]var twoSum = function(nums, target) { for(var i=0;i<nums.length;i

2021-06-28 17:40:07 170

原创存储方式（cookie，session，localStorage，sessionStorage）

cookie和session：cookie：存储于浏览器端的数据。可以设置cookie的到期时间，如果不设置时间，则表示这个cookie的生命周期为浏览器会话期间，关闭浏览器窗口，cookie就会消失。这种生命周期为浏览器会话期的cookie也被称为会话cookie。会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。 ...

2021-05-11 10:40:04 779

转载前端性能优化之白屏优化

概念白屏时间：用户点击一个链接或打开浏览器输入url地址后，从屏幕空白到显示第一个画面的时间。白屏时间的长短将直接影响用户对该网站的第一印象。白屏时间的重要性当用户点开一个链接或者直接在浏览器中输入url开始进行访问时，就开始等待页面的展示。页面渲染的事件越短，用户等待的时间就越短，用户感知到页面的速度就越快。这样可以极大的提升用户的体验，减少用户的跳出，提升页面的留存率。白屏是怎样一个过程DNS Lookup浏览器会先对页面进行域名解析，获取到服务器的IP地址后，进而和服务器进行通信。

2020-08-06 11:01:45 1165

原创笔试题错题总结1

文章目录块级元素和行内元素相关HTML5新增表单类型 <.input type="" />from元素的属性css属性继承有继承性的属性所有元素可以继承的属性内联元素可以继承的属性块级元素可以继承的属性块级元素和行内元素相关块级元素不能放在p标签里面有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1，h2，h3，h4，h5，h6，p，dtli内可以包含diva标签可以包含任何元素，除了自身HTML5新增表单类型 <.input type="" />em

2020-07-31 15:26:23 146

原创 pubsub.js（消息订阅）

对于vue中多层组件的传值情况，如果多个组件的关系都是父子关系，使用消息订阅的方式可以直接进行跨层传递，而不再需要层层传递。消息订阅的使用方式首先下载pubsubnpm install pubsub-js项目中引入pubsubimport PubSub from 'pubsub-js'在mounted中去订阅消息var token = PubSub.subscribe('MY TOPIC', mySubscriber);第一个参数：消息，事件的名称第二个参数：回调函数

2020-07-28 09:57:12 579

原创 day2-vue脚手架搭建

vue脚手架搭建方法vue脚手架主要有两种常见方式进行搭建：vue create 项目名称vue init webpack 项目名称通过上面这两种进行搭建，都需要对vue进行全局安装。使用以下命令：npm install -g @vue/cli-init两者的区别主要有下：vue-create是vue-cli3.x的初始化方法，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与vue-cli2项目结构不同，配置方法不同，具体配置方法参考文档链接。vue-in

2020-07-24 15:10:11 86

转载 vue中scoped的作用

scoped的作用功能组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。虽然方便但是我们需要慎用，因为当我们使用公共组件时会造成很多困难，增加难度，想知道造成哪些难度，需要先从scoped实现原理了解。scoped实现原理通过观察DOM结构可以发现：vue通过在DOM结构以及css样式上家伙是哪个唯一的标记，确保唯一，达到样式私有化，不污染全局的作用，像下图所示，样式属性上也会多一个该字符，确保唯一。可以看出，家伙是哪个scoped后的组件里的便签都会多一个data-v-

2020-07-23 10:50:20 3596

原创 day2-自定义插件

自定义插件的用途插件通常用来给Vue添加全局功能。插件的功能范围一般没有严格的限制，主要有下面几种：添加全局方法或property添加全局资源通过全局混入来添加一些组件选项添加vue实例方法，通过他们添加到Vue.prototype上实现一个库，实现自己的api自定义插件的使用使用自定义插件，Vue.use这句话一定要写。插件一般在js文件中定义。...

2020-07-17 10:18:27 100

原创 day2-自定义指令

首先来补充两个vue的指令：v-text 和 v-html如果想要内容按照HTML进行插入，要使用v-html指令。<p v-html="msg"></p>...data: { msg: '<a href="http://www.baidu.cn">百度</a>' }自定义指令自定义指令主要分为两种：全局自定义和局部自定义。全局自定义指令<p v-upper-text="msg"></p&gt

2020-07-16 16:00:00 141

原创 day2-过滤器

Vue中允许自己定义过滤器，被用于一些常见的文本格式化。过滤器被用在两个地方：双花括号插值{{}}v-bind表达式例：定义一个事件格式化过滤器<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script><div id="app"> <h4>显示格式化的日期时间</h4> <p>开始时间：{{time}}</p&g

2020-07-16 12:33:33 130

原创 day2-过渡和动画

vue中过渡的使用Vue提供了transition的封装组件，在以下情况中，可以给任何元素和组件添加进入/离开过渡。在需要过渡的元素外面包裹一层transition标签，并给这个标签一个name属性。条件渲染（v-if）条件展示（v-show）动态组件组件根节点 <style> /* 进入时的过渡状态和离开时的过渡状态 */ .fade-enter-active, .fade-leave-active { transition: opaci

2020-07-16 11:39:25 99

原创 day2-事件修饰符和按键修饰符

事件参数对象的传递事件参数对象：event阻止事件冒泡：e.stopPropagation（）取消默认事件：e.preventDefault（）在vue中进行传递要通过$event 形式。如下：**<body> <div id="app"> <h4>事件监听</h4> <button @click="showMessage('SUGA',$event)">按钮1</button> </div&

2020-07-15 18:16:14 116

原创 day2-数组排序案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://static.wangxiao.cn/zhuanti/commonResoures/jquery1.12.4.js">

2020-07-15 18:16:00 136

原创 day1复习小结

1.Vue是怎么理解的Vue是一个渐进式框架，它的三个特点包括灵活、易用且高效。渐进式的理解：Vue本身实现的功能是有限的，但是相关的插件非常多，安装后可以实现多的功能。借鉴了angular的模板和数据绑定技术；借鉴了react的组件化和虚拟dom；从上面就可以延伸出更多的东西，包括：模板数据绑定组件化虚拟dom强制数据绑定双向数据绑定相关的指令插件：router、axios、vuex …2.插值：{{表达式}} -----react中不一样的地方3.双向数据绑定：v-mode

2020-07-15 18:15:44 89

原创 day1-数组更新操作实例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://static.wangxiao.cn/zhuanti/commonResoures/jquery1.12.4.js">

2020-07-15 18:15:30 91

原创 day1-计算属性

计算属性（computed）在内部操作，相关联的属性的值会发生变化。A改变，B就会自动改变，B就放到计算属性里面。计算属性有两种写法：方法的形式：这种的默认是get操作computed:{ fullName1(){ return this.firstName + '_' + this.lastName; }}对象的形式：计算属i性中既有get操作也有set操作时要用对象的形式fullName2:{ //get操作 get(){ r

2020-07-15 18:15:08 114

转载 JS事件参数对象event

事件对象就是用来帮我们获取，在js事件被触发时的一系列有用信息。事件对象的名称，一般用event，但这不是必须的，可以使用任何合法的变量名。IE浏览器的事件对象模型跟其他浏览器是不一样的。它需要使用window.event，而且不需要在事件处理函数中声明event参数。鼠标触发事件：比如onclick、onmouseoverevent.target：获取事件源对象event.srcElement：获取事件源对象event.type：获取事件类型event.clientX：获取当前鼠标在网页上

2020-07-15 11:11:43 635

原创浏览器输入网址到页面成功加载后都做了哪些工作？

用户在输入栏输入网址后，浏览器会先查找本地缓存中是否有该资源，有的话会直接返回给浏览器。若本地缓存没有资源，浏览器会发起url请求，首先会进行的DNS解析以获取请求域名的服务器ip地址。如果请求是https，那么还需要建立TLS连接。。其中，DNS也有几步缓存“浏览器缓存，hosts文件。如果本地域名解析服务器没有该域名的记录，则开始递归+迭代解析。TCP三次握手，HTTP、TLS握手、HTTPS接下来就是利用IP地址和服务器建立TCP连接。连接建立之后，浏览器端会构建请求行、请求头等..

2020-06-28 11:37:13 353

原创 Vue不同单页面之间传值/兄弟组件传值

eventBus对于非父子组件的传值，如果不是项目很大很复杂，使用eventBus方法来实现传值。这种方法通过一个空的Vue实例作为中央事件中心，用他来触发事件和监听事件。具体步骤如下：新建一个Vue实例。比如新建一个Bus文件夹。下面是index.js。在需要进行传值的页面读引入这个Bus文件夹。import Vue from 'vue'export default new Vue在需要传值的页面（组件）内通过$emit来触发一个自定义事件。Bus.$emit("getCourse"

2020-06-17 15:43:02 2871

原创为什么vue组件中的data是函数类型？

因为vue组件是可复用的。一个组件被创建好之后就有可能在各个地方被引用。而不管组件被复用了多少次，组件中的data数据都应该是相互隔离、互不影响的。如果不用函数，用的是对象形式，那么每个组件的data都是内存在同一个地址当中，如果其中一个数据改变了其他的也会跟着改变。只有在函数作用域中，每个data里面的数据都会拥有自己的作用域，每个实例也就是相互独立的，不会相互影响。...

2020-06-16 10:37:33 454

原创 Vue-router的两种模式

hash中所周知，vue-router存在两种模式，hash模式和history模式。那么两者的区别主要在哪里呢？hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。window.onhashchange = function(event){ console.log(event.oldURL,event.newURL); let hash = location.hash.slice(1); do

2020-06-16 10:16:30 657

原创关系型数据库与非关系型数据库之间的区别

关系型数据库关系型数据库指采用了关系模型来组织数据的数据库。关系模型指的就是二维表。一个关系型数据库就是由二维表及其之间的联系所组成的一个数据组织。优点：易于维护：都是使用表结构，格式一致；使用方便：sql语言通用，可用于复杂查询；复杂操作：支持sql，可用于一个表以及多个表之间非常复杂的查询。缺点：读写性能较差，尤其是海量数据的高效率读写；固定的表结构，灵活度稍欠；高并发读写需求，传统关系型数据库来说，硬盘I/O是一个很大的瓶颈。非关系型数据库非关系型数据库指非关系型的，分布

2020-06-15 10:53:00 382

转载 jQuery和vue的区别

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、时间绑定等操作，其实和原生的HTML的区别只在于更加方便的选取和操作DOM对象，而数据和界面还是在一起的。Vue则是通过Vue对象将数据和view完全分离了。对数据进行操作不再需要引用响应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。Vue的适用场景：复杂数据操作的后台页面，表单填写页面jQuery适用的场景：一些html5的动画页面，一些需要js来操作页面样式的页面。.

2020-06-13 15:27:31 440

原创 JS的继承方式

原型链继承特点：子类既可以继承父类实例上的属性和方法，也可以继承父类原型上的属性和方法。缺点：无法实现多继承继承自原型对象的属性和方法是所有子类共享的 // 原型继承 function Animal(name) { this.name = name; // 实例方法 this.sleep = function () { console.log(this.nam

2020-06-09 15:13:23 111

转载对JS原型机原型链的理解

原型的规则js中，每个对象都有一个隐式属性_proto_。js中，每个函数都有一个prototype属性，prototype属性是一个指针，指向一个对象。所有的引用类型的proto属性值都指向构造函数的prototype属性值。构造函数使用构造函数创建对象 var person1 = new Person(); person1.name = '张三' cosnoel.log(person1.name) //张三Person就是一个构造函数，通

2020-06-09 10:20:51 112

原创对call、apply和bind的理解及他们的区别

说明每个函数都包含两个非继承而来的方法，call()和apply()，其作用都是用来改变函数的执行环境。call/apply/bind方法的来源call、apply和bind方法其实都是继承自function.prototype中，属于实例方法。 console.log(Function.prototype.hasOwnProperty('call')); console.log(Function.prototype.hasOwnProperty('apply'));

2020-06-08 16:04:38 564

原创 Vue数据双向绑定的原理

Vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方法，通过**Object.defineProperty()**来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通JavaScript对象传给vue实例来作为他的data选项时，vue将遍历它的属性，用Object.defineProperty()将它们转为getter和setter。用户看不到getter和setter，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。.

2020-06-04 17:38:57 132

空空如也

空空如也