DurianPudding-CSDN博客

原创字符串能否由子串循环得到（substring,replaceAll）-java

题目给出一个非空的字符串，判断这个字符串是否是由它的一个子串进行多次首尾拼接构成的。输出满足条件的最长子串，否则输出false。例如，“abcabcabc"满足条件，因为它是由"abc"首尾拼接而成的，则输出"abc”，而"abcab"则不满足条件，则输出 “false”。思路子串最长不过是字符串的一半，每次使用substring()截取子串，循环去掉末位，用replaceAll()和正则...

2019-04-09 10:06:23 707

原创原生JS实现双向绑定

现在框架都可以实现双向绑定，vue中实现双向绑定的原理是利用Object.defineProperty定义访问器属性要使用Object.defineProperty，接收三个参数：属性所在的对象，属性的名字，一个描述符对象。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...

2019-03-05 19:48:29 576

原创前端项目性能优化（待查）

减少HTTP请求图片地图：将几个连续的图片合成为同一个图片，用定位去得到不同的部分CSS Sprites：用css背景定位得到同一张图片的不同部分合并脚本和css：即打包，如webpack使用CDN代码、图片字体等压缩代码分割、css分割，懒加载：不同的页面使用自己的内容，而不是全部加载样式表放在顶部脚本放在页面底部使用外部js和css：浏览器会缓存，再次访问速度快优...

2019-03-05 17:14:35 256

原创判断两个对象相等

参考：判断两个对象相等===当全等两侧类型相同时，比较值是否相等，相等返回true,不相等返回false;如果类型不同，返回false使用JSON.stringify()将两个对象都转为JSON字符串进行比较=== 与 ==的区别== 只判断值是否相等，忽略类型。如果值相等，返回true；不等，返回false....

2019-03-05 17:11:51 192

原创使用addEventListener点击li弹出内容，并且动态添加li之后有效

参考：面试题基础知识 var menu = document.getElementById("menu"); var fn = function(element) { if(element.target.nodeName.toUpperCase() == "LI"){ alert(element.target.innerHTML); } }; menu...

2019-03-05 15:25:40 370

原创 ES6 模块与commonJS模块的差异

参考：前端模块化ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，旨在成为浏览器和服务器通用的模块解决方案。其模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。使用import命令的时候，用户需要知道所要加载的变量名或函数名/** 定义模块 math.js **/var basic...

2019-03-04 16:41:08 706

原创 JS模块化之commonJS

commonJS 规范规定，每个模块内部，module 变量代表当前模块。这个变量是一个对象，它的 exports 属性（即 module.exports ）是对外的接口。加载某个模块，其实是加载该模块的 module.exports 属性。// 定义模块math.jsvar basicNum = 0;function add(a, b) { return a + b;}// 定...

2019-03-04 15:11:55 187

原创 js中ES6的Set的基本用法

参考：阮一峰 ES6入门之SetES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。const s = new Set();[2,3,5,4,5,2,2].forEach(x => s.add(x));// Set结构不会添加重复的值for(let i of s) { console.log(i);}// ## 初始化// 例一...

2019-03-04 14:41:53 55776 5

原创详解原生AJAX请求demo（兼容IE5/6）

function createXHR(){// 检测原生XHR对象是否存在 if ( window.XMLHpptRequest ){ // 如果存在就返回新实例 return new XMLHpptRequest(); } else { // 如果不存在就检测ActiveX对象 // 兼容IE5/6 return new ActiveXObject('Microsoft.XM...

2019-02-28 22:04:32 710

原创封装Promise与定时器demo

问：封装一个函数，参数是定时器的时间，.then执行回调函数。答：（这个函数是promise）下面封装promise// 封装function fn(time) { return new Promise(function(resolve){ setTimeout(function(){ resolve(); },time) });}// 回调le...

2019-02-28 11:46:27 1657

原创 ES6 Promise基础

参考：Promise对象promise实例const promise = new Promise((resolve, reject) => { if ( /* 异步操作成功 */ ) { resolve(value); } else { reject(error); }});然后用then方法指定回调函数（第二个参数可选）// then方法指定的回调函数，将在当前脚...

2019-02-28 10:34:56 132

原创 ES6中的箭头函数=>

箭头函数详解x => y//等价于function(x) { return y}（x, y） => z //等价于function(x, y) { return z}箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。...

2019-02-28 10:05:59 150

原创为什么var可以重复声明

答因为编辑器会在判断有已经声明的同名变量时忽略var，然后直接赋值原理在JS代码运行过程中：引擎负责整个代码的编译以及运行编译器则负责词法分析、语法分析、代码生成等工作作用域负责维护所有的标识符（变量）。var a = 2;var a = 3;a = 4;alert(a); // 4当我们执行上面的代码时，我们可以简单的理解为新变量分配一块儿内存，命名为a，并赋值为2，...

2019-02-26 22:37:08 3790

原创 let 与 var的区别

参考：let与var的区别let 为 ES6 新添加申明变量的命令，它类似于 var，但是有以下区别：var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升let 不允许重复声明.变量提升定义：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。造成原因：JS中允许变量可以先使用再声明...

2019-02-26 22:16:10 274

原创移动端如何适配

使用媒体查询做响应式布局，根据不同屏幕宽度加载不同css@media参考：圣杯布局完整代码@media (max-width: 768px) { .holyGrail-body { flex-direction: column; flex: 1; } .holyGrail-nav, .holyGail-content, ....

2019-02-26 21:59:02 328

原创 CSS中四种定位的区别

1、默认static（1）static表示没有定位，或者说不算具有定位属性。（2）如果元素 position 属性值为 static（或者未设 position 属性），该元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。2、相对定位relative占据空间，相对于自身原有位置进行偏移，可能会覆盖其他元素。例如：top: 20px...

2019-02-26 21:51:49 1328

原创水平垂直居中的四种方法

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;水平垂直居中&lt;/title&gt;

2019-02-26 20:27:03 334

原创 JS实现动画

三种方式setTimeoutsetIntervalrequestAnimationFrame<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <styl

2019-02-26 16:37:23 293

原创 Flex布局实例：流式布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>流式布局</title> <style> .main { width: 200px; hei

2019-02-26 15:37:53 1849

原创 Flex布局实例：悬挂式布局

参考：阮一峰flex布局教程&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &a

2019-02-26 11:42:09 817

原创 js中的call()和apply()方法

参考：js中的call()和apply()方法call、apply、bind方法详解call()和apply()作用一样，接收参数的方法不太一样一、call()和apply()方法定义语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]),apply([thisObj[,argArray]])应用某一对象的一个方法，用另一个对象替换当前对象。示例：...

2019-02-25 16:23:03 330

原创 javaScript的this详解

一、this 原理参考：阮一峰的js的this原理this指的是函数运行时所在的环境。为什么？因为：内存的数据结构中，函数是一个单独的值，所以它可以在不同的环境（上下文）执行。所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。举例：obj.foo()是通过obj找到foo，所以就是在obj...

2019-02-25 15:36:19 149

原创 flex布局实例：输入框的布局

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;输入框的布局&lt;/title&gt;

2019-02-25 14:57:08 739

原创 JS执行机制

参考：https://juejin.im/post/59e85eebf265da430d571f89javascript是一门单线程语言。除了广义的同步任务和异步任务，我们对任务有更精细的定义：macro-task(宏任务)：包括整体代码script，setTimeout，setIntervalmicro-task(微任务)：Promise，process.nextTick事件循环的顺序...

2019-02-23 10:06:28 161

原创右边宽度固定，左边自适应的三种方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>右边宽度固定，左边自适应</title> <style> html, body { margin: 0;

2019-02-22 15:50:26 710

原创 flex布局实例：圣杯布局

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;圣杯布局&lt;/title&gt;

2019-02-22 15:42:57 701

原创 flex布局实例：网格布局

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;flex实例之网格布局&lt;/title&am

2019-02-22 15:14:28 721

原创 flex布局实例：骰子的布局

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;骰子实例&lt;/title&gt;

2019-02-22 14:45:40 520

原创 css3动画之transition和animation

&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;t

2019-02-21 15:45:38 181

原创详解JS中的||和&&

参考：https://www.cnblogs.com/sgzs/p/7977208.html基本原理：JS中的布尔运算符运算当运算到某个变量就能得到最终结果时，就不进行后面的运算。分析：a || b如果a为true，不管b是false还是true，结果都为true，即a。则不需要判定b，直接返回a；如果a为false，则需要判定b，如果b是false就是false，b是true就是tr...

2019-01-17 15:20:49 222

原创详解HTML5 Web存储之 localStorage

localStorage：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除数据格式：以键/值对存在，通常以字符串存储浏览器支持：IE,火狐,Opera,chrome,safari常用API：保存数据：localStorage.setItem(key,value)读取数据：localStorage.getItem(key)删除单个数据：localStorage.r...

2019-01-15 16:25:05 212

原创《JavaScript高级程序设计（第三版）》读书笔记03 面向对象的程序设计

对象简介定义：无需属性的集合，属性可以包含基本值、对象或者函数。通俗理解：对象是一组没有特定顺序的值，好比一组名值对，值可以是数据或者函数。6.1 理解对象1、创建对象最简单方式(不实用)：创建Object实例，再添加属性和方法var person = vew Object();person.name = &amp;quot;Jay Chou&amp;quot;;person.age = 29;perso...

2018-12-27 10:53:45 174

原创悲伤的代码

2018-12-13 21:39:18 1598 2

原创 Vue.js 学习笔记

1. 计算属性和方法计算属性 computedvar vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 re...

2018-12-12 17:55:58 166 1

原创用vue实现的二级菜单

主要是对二级菜单和当前点击的处理：点击导航时，如果有二级菜单，就切换二级菜单显示状态（显示或者关闭），如果没有二级菜单，就变色，表示页面处于当前位置，并且导航中最多只能有一个菜单变色。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g

2018-11-30 10:50:47 15597 3

原创前后台ajax中对象格式的对接

前台需要POST一个data对象给后台，如果不使用JSON格式转换，直接用AJAX将data对象传给后台，后台接收到的是键值对。在控制台中，Request Headers里面可以看到Content-Type:application/x-www-form-urlencoded;charset=utf-8在Form Data里看到表单数据是这样的name : testpwd : 123456...

2018-11-23 11:00:52 179

原创项目中的小bug总结(bootstrap vue)

1. 用bootstrap中分列格式要记得加&lt;div class="row"&gt;写代码写到后面，情不自禁给row改名了，想着这命名怎么这么不规范，改成了item-row，结果就显示有问题了&lt;div class="row"&gt; &lt;div class="col-md-2"&gt

2018-11-13 21:51:16 319

原创前后台对接时JSON的处理

如何判断json字符串还是对象：// 对象var obj = { name : 'nike'}//转化陈哥json字符串JSON.stringify(obj);// json字符串// 名字有冒号// 输出：{ &amp;amp;quot;name&amp;amp;quot; : &amp;amp;quot;nike&amp;amp;quot; } 如何查看后台返回给我的数据呢打开控制台，在network–re

2018-11-13 21:19:53 292

原创分辨ajax请求中的数据格式

在项目中遇到的。$.ajax({ type: "GET", url: "#", success: function(d) {// d就是后台给的数据，数据可能分几种格式! var data = JSON.parse(d).data; if(data) { for(var i = 0;i < data.length; i++) ...

2018-11-12 20:18:58 174

原创剑指offer 3. 从头到尾打印链表（ListNode,Stack,ArrayList）

题目描述输入一个链表，按链表值从尾到头的顺序返回一个ArrayList。思路：因为不熟悉ListNode，所以看了排名第一的代码。思路是，就是把链表倒序放入ArrayList，中间使用栈，栈先进后出，就可以自然的倒叙知识点：ListNode是一个链表。在节点中，存储了两个变量：value 和 next。value 是这个节点的值，next 是指向下一节点的指针，维系链表节点间的关系。...

2018-10-19 15:12:10 1386

空空如也

空空如也