<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[DurianPudding的博客]]></title><description><![CDATA[good good study,day day up]]></description><link>https://blog.youkuaiyun.com/DurianPudding</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; DurianPudding]]></copyright><item><title><![CDATA[字符串能否由子串循环得到（substring,replaceAll）-java]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/89135907</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/89135907</guid><author>DurianPudding</author><pubDate>Tue, 09 Apr 2019 10:06:23 +0800</pubDate><description><![CDATA[题目
给出一个非空的字符串，判断这个字符串是否是由它的一个子串进行多次首尾拼接构成的。输出满足条件的最长子串，否则输出false。
例如，“abcabcabc"满足条件，因为它是由"abc"首尾拼接而成的，则输出"abc”，而"abcab"则不满足条件，则输出 “false”。
思路
子串最长不过是字符串的一半，每次使用substring()截取子串，循环去掉末位，用replaceAll()和正则...]]></description><category></category></item><item><title><![CDATA[原生JS实现双向绑定]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/88199542</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/88199542</guid><author>DurianPudding</author><pubDate>Tue, 05 Mar 2019 19:48:29 +0800</pubDate><description><![CDATA[现在框架都可以实现双向绑定，vue中实现双向绑定的原理是利用Object.defineProperty
定义访问器属性要使用Object.defineProperty，接收三个参数：属性所在的对象，属性的名字，一个描述符对象。
&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;g...]]></description><category></category></item><item><title><![CDATA[前端项目性能优化（待查）]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/88190880</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/88190880</guid><author>DurianPudding</author><pubDate>Tue, 05 Mar 2019 17:14:35 +0800</pubDate><description><![CDATA[减少HTTP请求


图片地图：将几个连续的图片合成为同一个图片，用定位去得到不同的部分
CSS Sprites：用css背景定位得到同一张图片的不同部分
合并脚本和css：即打包，如webpack


使用CDN
代码、图片字体等压缩
代码分割、css分割，懒加载：不同的页面使用自己的内容，而不是全部加载
样式表放在顶部
脚本放在页面底部
使用外部js和css：浏览器会缓存，再次访问速度快
优...]]></description><category></category></item><item><title><![CDATA[判断两个对象相等]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/88190702</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/88190702</guid><author>DurianPudding</author><pubDate>Tue, 05 Mar 2019 17:11:51 +0800</pubDate><description><![CDATA[参考：判断两个对象相等


===
当全等两侧 类型相同时，比较值是否相等，相等返回true,不相等返回false;
如果类型不同，返回false


使用JSON.stringify()将两个对象都转为JSON字符串进行比较


=== 与 ==的区别
== 只判断值是否相等，忽略类型。如果值相等，返回true；不等，返回false.

...]]></description><category></category></item><item><title><![CDATA[使用addEventListener点击li弹出内容，并且动态添加li之后有效]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/88184061</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/88184061</guid><author>DurianPudding</author><pubDate>Tue, 05 Mar 2019 15:25:40 +0800</pubDate><description><![CDATA[参考：面试题
基础知识
  var menu = document.getElementById(&quot;menu&quot;);
  var fn = function(element) {
    if(element.target.nodeName.toUpperCase() == &quot;LI&quot;){
      alert(element.target.innerHTML);
    }
  };
  menu...]]></description><category></category></item><item><title><![CDATA[ES6 模块与commonJS模块的差异]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/88123699</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/88123699</guid><author>DurianPudding</author><pubDate>Mon, 04 Mar 2019 16:41:08 +0800</pubDate><description><![CDATA[参考： 前端模块化
ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，旨在成为浏览器和服务器通用的模块解决方案。
其模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，
import命令用于输入其他模块提供的功能。
使用import命令的时候，用户需要知道所要加载的变量名或函数名
/** 定义模块 math.js **/
var basic...]]></description><category></category></item><item><title><![CDATA[JS模块化之commonJS]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/88118466</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/88118466</guid><author>DurianPudding</author><pubDate>Mon, 04 Mar 2019 15:11:55 +0800</pubDate><description><![CDATA[commonJS 规范规定，每个模块内部，module 变量代表当前模块。这个变量是一个对象，它的 exports 属性（即 module.exports ）是对外的接口。加载某个模块，其实是加载该模块的 module.exports 属性。
// 定义模块math.js

var basicNum = 0;
function add(a, b) {
  return a + b;
}

// 定...]]></description><category></category></item><item><title><![CDATA[js中ES6的Set的基本用法]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/88116732</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/88116732</guid><author>DurianPudding</author><pubDate>Mon, 04 Mar 2019 14:41:53 +0800</pubDate><description><![CDATA[参考：阮一峰 ES6入门之Set
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
const s = new Set();

[2,3,5,4,5,2,2].forEach(x =&amp;gt; s.add(x));
// Set结构不会添加重复的值

for(let i of s) {
  console.log(i);
}


// ## 初始化
// 例一...]]></description><category></category></item><item><title><![CDATA[详解原生AJAX请求demo（兼容IE5/6）]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/88046128</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/88046128</guid><author>DurianPudding</author><pubDate>Thu, 28 Feb 2019 22:04:32 +0800</pubDate><description><![CDATA[function createXHR(){
// 检测原生XHR对象是否存在
	if ( window.XMLHpptRequest ){
	// 如果存在就返回新实例
		return new XMLHpptRequest();
	} else { // 如果不存在就检测ActiveX对象
		// 兼容IE5/6
		return new ActiveXObject('Microsoft.XM...]]></description><category></category></item><item><title><![CDATA[封装Promise与定时器demo]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/88020425</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/88020425</guid><author>DurianPudding</author><pubDate>Thu, 28 Feb 2019 11:46:27 +0800</pubDate><description><![CDATA[问：封装一个函数，参数是定时器的时间，.then执行回调函数。
答：（这个函数是promise）下面封装promise

// 封装
function fn(time) {
  return new Promise(function(resolve){
    setTimeout(function(){
      resolve();
    },time)
  });
}

// 回调
le...]]></description><category></category></item><item><title><![CDATA[ES6 Promise基础]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/88016801</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/88016801</guid><author>DurianPudding</author><pubDate>Thu, 28 Feb 2019 10:34:56 +0800</pubDate><description><![CDATA[参考：Promise对象
promise实例
const promise = new Promise((resolve, reject) =&amp;gt; {
	if ( /* 异步操作成功 */ ) {
		resolve(value);
	} else {
		reject(error);
	}
});

然后用then方法指定回调函数（第二个参数可选）
// then方法指定的回调函数，将在当前脚...]]></description><category></category></item><item><title><![CDATA[ES6中的箭头函数=>]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/88015320</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/88015320</guid><author>DurianPudding</author><pubDate>Thu, 28 Feb 2019 10:05:59 +0800</pubDate><description><![CDATA[箭头函数详解
x =&amp;gt; y
//等价于
function(x) {
	return y
}

（x, y） =&amp;gt; z 
//等价于
function(x, y) {
	return z
}


箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

...]]></description><category></category></item><item><title><![CDATA[为什么var可以重复声明]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/87953939</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/87953939</guid><author>DurianPudding</author><pubDate>Tue, 26 Feb 2019 22:37:08 +0800</pubDate><description><![CDATA[答
因为编辑器会在判断有已经声明的同名变量时忽略var，然后直接赋值
原理
在JS代码运行过程中：

引擎负责整个代码的编译以及运行
编译器则负责词法分析、语法分析、代码生成等工作
作用域负责维护所有的标识符（变量）。

var a = 2;
var a = 3;
a = 4;
alert(a); // 4

当我们执行上面的代码时，我们可以简单的理解为新变量分配一块儿内存，命名为a，并赋值为2，...]]></description><category></category></item><item><title><![CDATA[let 与 var的区别]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/87952833</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/87952833</guid><author>DurianPudding</author><pubDate>Tue, 26 Feb 2019 22:16:10 +0800</pubDate><description><![CDATA[参考：let与var的区别
let 为 ES6 新添加申明变量的命令，它类似于 var，但是有以下区别：

var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
let 不允许重复声明.

变量提升

定义：函数声明和变量声明总是会被解释器悄悄地被&quot;提升&quot;到方法体的最顶部。
造成原因：JS中允许变量可以先使用再声明...]]></description><category></category></item><item><title><![CDATA[移动端如何适配]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/87951748</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/87951748</guid><author>DurianPudding</author><pubDate>Tue, 26 Feb 2019 21:59:02 +0800</pubDate><description><![CDATA[使用媒体查询做响应式布局，根据不同屏幕宽度加载不同css
@media
参考：圣杯布局完整代码
@media (max-width: 768px) {
      .holyGrail-body {
        flex-direction: column;
        flex: 1;
      }

      .holyGrail-nav, .holyGail-content, ....]]></description><category></category></item><item><title><![CDATA[CSS中四种定位的区别]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/87951317</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/87951317</guid><author>DurianPudding</author><pubDate>Tue, 26 Feb 2019 21:51:49 +0800</pubDate><description><![CDATA[1、默认static
（1）static表示没有定位，或者说不算具有定位属性。
（2）如果元素 position 属性值为 static（或者未设 position 属性），该元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、相对定位relative
占据空间，相对于自身原有位置进行偏移，可能会覆盖其他元素。
例如：top: 20px...]]></description><category></category></item><item><title><![CDATA[水平垂直居中的四种方法]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/87947530</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/87947530</guid><author>DurianPudding</author><pubDate>Tue, 26 Feb 2019 20:27:03 +0800</pubDate><description><![CDATA[&amp;amp;lt;!DOCTYPE html&amp;amp;gt;
&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt;
&amp;amp;lt;head&amp;amp;gt;
  &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt;
  &amp;amp;lt;title&amp;amp;gt;水平垂直居中&amp;amp;lt;/title&amp;amp;gt;]]></description><category></category></item><item><title><![CDATA[JS实现动画]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/87937938</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/87937938</guid><author>DurianPudding</author><pubDate>Tue, 26 Feb 2019 16:37:23 +0800</pubDate><description><![CDATA[三种方式
setTimeout
setInterval
requestAnimationFrame
&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;title&amp;gt;Title&amp;lt;/title&amp;gt;
  &amp;lt;styl]]></description><category></category></item><item><title><![CDATA[Flex布局实例：流式布局]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/87936216</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/87936216</guid><author>DurianPudding</author><pubDate>Tue, 26 Feb 2019 15:37:53 +0800</pubDate><description><![CDATA[&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;title&amp;gt;流式布局&amp;lt;/title&amp;gt;
  &amp;lt;style&amp;gt;
    .main {
      width: 200px;
      hei]]></description><category></category></item><item><title><![CDATA[Flex布局实例：悬挂式布局]]></title><link>https://blog.youkuaiyun.com/DurianPudding/article/details/87932151</link><guid>https://blog.youkuaiyun.com/DurianPudding/article/details/87932151</guid><author>DurianPudding</author><pubDate>Tue, 26 Feb 2019 11:42:09 +0800</pubDate><description><![CDATA[参考：阮一峰flex布局教程
&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;
&amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;head&amp;amp;amp;gt;
  &amp;amp;amp;lt;meta charset=&amp;amp;quot;UTF-8&amp;amp;quot;&amp;amp;amp;gt;
  &a]]></description><category></category></item></channel></rss>