<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[baie2621的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/baie2621</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; baie2621]]></copyright><item><title><![CDATA[gulp实用配置（2）——中小项目]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940608</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940608</guid><author>baie2621</author><pubDate>Sun, 09 Jul 2017 16:49:00 +0800</pubDate><description><![CDATA[上一篇的gulp配置很简单，主要就是为了demo的查看和调试，这一篇则会相对详细一些，包括压缩合并打时间戳等。
在互联网环境比较好的城市，需要多人协作的，大一点的项目应该都用上了模块化（这里主要指commonjs和ES6模块系统，不是再早的require.js和sea.js）。代码也会更注重如何分离和注入，而不再是单纯的合并。
但是在很多小公司，开发模式或技术都还是比较传统的，或者一...]]></description><category></category></item><item><title><![CDATA[gulp实用配置（1）——demo]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940607</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940607</guid><author>baie2621</author><pubDate>Thu, 06 Jul 2017 17:53:00 +0800</pubDate><description><![CDATA[在React和Vue推进下，现在很多人都在使用webpack作为自动化构建工具，但其实在很多时候我们并不是一定需要用到它，gulp这样的轻量级构建工具就足够了。
最近一段时间不是太忙，所以就写了三份配置，用在不同的情况下。
这篇文章介绍第一份配置，也是最简单的一份。
这份配置我把它称作demo测试配置，因为在我工作的时候，经常需要快速出效果或者实现某些功能，你没有时间去自己实现，那...]]></description><category></category></item><item><title><![CDATA[使用base64提升视觉效果体验]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940606</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940606</guid><author>baie2621</author><pubDate>Thu, 06 Jul 2017 15:30:00 +0800</pubDate><description><![CDATA[最近在做一个微信端的小项目，前端代码写完后，就放在手机端测试，没什么问题，但是页面在加载和渲染时的效果却让人有些不爽，虽然是个小项目，我大可不必做这些，但是看着页面的闪动，就忍不住想做些什么。
先说说问题吧：
  
上面是首页效果图，其实在最开始的时候并没有考虑web端，这图是给IOS和安卓native App用的。为了方面两个本地APP的开发，所以上面的图中，除了那几个科目...]]></description><category></category></item><item><title><![CDATA[基于express+mongodb+pug的博客系统——后台篇]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940605</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940605</guid><author>baie2621</author><pubDate>Sun, 21 May 2017 17:48:00 +0800</pubDate><description><![CDATA[上一篇介绍了模板引擎pug.js的用法，这一篇就主要写后台逻辑了。
后台的大部分的功能都有了，只是在已经登录的状态下，前台和后台的逻辑处理还不是很完善。
先上几张图吧，仿旧版的简书，改了下UI，因为没有简书那么多内容，所以没必要完全做成一样的。





1.项目结构

app.js是整个工程的入口
model文件夹放连接数据库的逻辑
public 文件夹...]]></description><category></category></item><item><title><![CDATA[基于express+mongodb+pug的博客系统——pug篇]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940602</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940602</guid><author>baie2621</author><pubDate>Sun, 14 May 2017 17:35:00 +0800</pubDate><description><![CDATA[很久之前就想自己搭一个博客了，最开始用hexo+github，但是换电脑后总是有些麻烦。后来使用WordPress，但是用WordPress总觉得没什么技术含量，前后端都是人家写好的，而且买的垃圾虚拟机老是出问题，动不动就要提交工单解决，所以最后干脆就直接在博客园上写了。
最近比较闲，所以正好抽时间简单看了下node.js，然后看了看express，顺便搭了个博客出来练手。当然也不仅是...]]></description><category></category></item><item><title><![CDATA[JavaScript之DOM操作（二）]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940588</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940588</guid><author>baie2621</author><pubDate>Sun, 26 Mar 2017 20:19:00 +0800</pubDate><description><![CDATA[这一篇写写常用并且通用的操作节点的一些方法。
1.节点方法
1&gt;appendChild()
向childNodes列表的末尾添加一个节点，语法var aChild = element.appendChild(aChild);
需要注意的是，如果被传入的节点在文档中已经存在，那结果会将该节点从原来位置移除，然后再添加到指定位置。例：

var returnedNode...]]></description><category></category></item><item><title><![CDATA[JavaScript之DOM操作（一）]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940589</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940589</guid><author>baie2621</author><pubDate>Sun, 19 Mar 2017 18:53:00 +0800</pubDate><description><![CDATA[这篇文章写于2017-3-19，所有例子基于Chrome 56.0.X。如果时间太久，请自行查阅MDN等获取最新规范内容。
1.节点类型
　　从MDN上获取的最新情况


　　一共12种节点类型，分别由12个数值常量来表示，不过我们最常用的是元素节点1和文本节点3，也是必须要彻底弄明白的。在这篇文章里，也主要讲解这两种类型的节点。
2.节点属性
1&gt;nodeType...]]></description><category></category></item><item><title><![CDATA[JavaScript之Array]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940584</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940584</guid><author>baie2621</author><pubDate>Sun, 05 Mar 2017 22:29:00 +0800</pubDate><description><![CDATA[JavaScript是一门非常灵活的动态语言，涵盖的内容也挺多，《JavaScript高级程序设计》看了也有两遍，但是在实际开发的时候，还是有很多东西记不清，然后还得去翻书，特别是一些Array、String对象之类的操作方法，经常搞混，所以趁着这次再从头学一次JavaScript的机会，把这些操作方法或者技巧都记下来，一来加深印象，二来方便查阅。
现在的JavaScript的正式版本...]]></description><category></category></item><item><title><![CDATA[CSS属性之border]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940582</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940582</guid><author>baie2621</author><pubDate>Sat, 25 Feb 2017 16:41:00 +0800</pubDate><description><![CDATA[css的border属性相信大家都不陌生了，就是给元素加个边框嘛，在不同的盒模型下，会给元素的宽高带来怎样的影响，相信大家也都很熟悉了，这里就不再赘述，只说说大家平时没有怎么留意的东西。
0.border-color与color
大家平时使用border属性的时候，通常应该是直接写border:1px solid #ccc; 类似于这个样子。
不过大家知不知道当不给border设置...]]></description><category></category></item><item><title><![CDATA[CSS属性之attr()]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940587</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940587</guid><author>baie2621</author><pubDate>Mon, 13 Feb 2017 17:52:00 +0800</pubDate><description><![CDATA[attr()准确的说，不应该是一个属性，而是一个CSS的函数，我们先看看MDN上的介绍吧：

Summary
Theattr()CSSfunction is used to retrieve the value of an attribute of the selected element and use it in the style sheet. It can be us...]]></description><category></category></item><item><title><![CDATA[CSS属性之margin]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940603</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940603</guid><author>baie2621</author><pubDate>Fri, 10 Feb 2017 17:39:00 +0800</pubDate><description><![CDATA[0.对自身可视宽度的影响

1&gt;改变处于标准文档流中，未设置width值的block元素的可视宽度
在标准文档流中，对于没有设置宽度的block元素，当其具有内容或者设置高度后，其自身宽度为父元素宽度的100%，这个时候给block元素设置水平方向的margin值，就会改变元素的可视宽度。但是不能改变高度，因为block元素的高度是固定或者等于其内容的高度，并不会拉伸。
这...]]></description><category></category></item><item><title><![CDATA[CSS属性之padding]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940600</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940600</guid><author>baie2621</author><pubDate>Wed, 08 Feb 2017 14:42:00 +0800</pubDate><description><![CDATA[0.inline元素中的padding
大家都知道padding对于block元素和inline-block元素的影响，而对于inline元素，padding只会在水平方向产生影响，垂直方向不会产生影响。
这么说其实不准确，给inline元素设置垂直方向的padding，不会改变元素的高度，也不会影响其他元素，但是会改变他自身的背景的高度。

&lt;div class="wra...]]></description><category></category></item><item><title><![CDATA[CSS属性之relative]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940601</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940601</guid><author>baie2621</author><pubDate>Sat, 28 Jan 2017 23:36:00 +0800</pubDate><description><![CDATA[0.相对定位relative特点
相对定位relative元素总是会占据位置，所占据的位置是在relative元素没有设置left/top/right/bottom属性时的位置；
相对定位relative元素在设置定位时，不会影响其他元素；
相对定位relative元素在设置定位时，是相对于自身的定位

&lt;div class="page"&gt;
  &lt;div c...]]></description><category></category></item><item><title><![CDATA[CSS属性之absolute]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940598</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940598</guid><author>baie2621</author><pubDate>Mon, 16 Jan 2017 18:30:00 +0800</pubDate><description><![CDATA[0.脱离标准文档流
绝对定位的元素会脱离标准文档流，拥有z-index属性，并且对于它的任何操作和改变都不会影响它的兄弟元素和父级元素，这里就不过多介绍。
不过值得注意的是，虽然绝对定位元素脱离的标准文档流，但是它依然会受到父元素影响哦，比如line-height和text-align属性等。
1.跟随性
绝对定位的元素脱离标准文档流之后，并不是跑到了任意的位置，而是跟在前一个没...]]></description><category></category></item><item><title><![CDATA[css属性之float]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940599</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940599</guid><author>baie2621</author><pubDate>Sun, 08 Jan 2017 22:12:00 +0800</pubDate><description><![CDATA[0.float与margin
两个相邻的浮动元素，当第一个浮动元素（不论是左浮动还是右浮动）的宽度为100%时，第二个浮动元素会被挤到下面，通过添加负margin-right值（绝对值最少等于它自身的宽度），可以使它回到第一行。
在书写html代码时，我们通常的习惯根据UI样式，从左往右来写代码，但有时候右侧的内容比较重要，所以它的html结构需要放在左侧内容上面，让它更早的加载，比...]]></description><category></category></item><item><title><![CDATA[基于Vue2.0的单页面开发方案]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940597</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940597</guid><author>baie2621</author><pubDate>Sat, 31 Dec 2016 22:35:00 +0800</pubDate><description><![CDATA[　　2016的最后一天，多多少少都应该总结一下这一年的得失，哪里做的好，哪里需要改进，记一笔，或许将来会用到呢。
　　毕业差不多半年了，一直是一个人在负责公司项目的前端开发与维护，当时公司希望前后端分离，提高前端的开发效率和后期维护的便捷，所以自己在经过一番调查后，决定采用SPA的模式，其主要原因还是阿里中途岛的那样的东西，我们没办法搞出来。
　　项目不需要兼容IE8及以下的浏览器，...]]></description><category></category></item><item><title><![CDATA[灵活的JavaScript（一）]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940595</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940595</guid><author>baie2621</author><pubDate>Tue, 15 Nov 2016 00:32:00 +0800</pubDate><description><![CDATA[　　自己对JavaScript的原型，继承，闭包，多少也还是了解些，但是平时写的东西都挺简单的，也用不上，所以感觉提升不大。于是乎买了一本《JavaScript设计模式》来提高下自己，这本是百度写的，不是国外的那本，看了第一章，哇靠。。。写的真好，带入感真的强，看小说的朋友应该都懂。
　　平时也都会看一些别人的博客之类的，但是平时不怎么用，所以久而久之也就忘记了。这次便打算一边看，一边...]]></description><category></category></item><item><title><![CDATA[菜鸟快飞之JavaScript对象、原型、继承（三）]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940594</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940594</guid><author>baie2621</author><pubDate>Tue, 23 Feb 2016 18:58:00 +0800</pubDate><description><![CDATA[　　正文之前需要声明的一点是，菜鸟系列博文全是基于ES5的，不考虑ES6甚至更高版本。
继承
　　由于我个人不是学计算机的，所以对于很多东西只是知其然，不知其所以然。就像这个继承，刚开始学JavaScript就听人说了JavaScript几大核心，但是自己平时似乎都没怎么用到，所以一直不明白为什么需要这些东西，面试还总是问这些。
　　但是随着一点点学习，也有去看过jQuery源码，...]]></description><category></category></item><item><title><![CDATA[菜鸟快飞之JavaScript对象、原型、继承（二）]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940592</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940592</guid><author>baie2621</author><pubDate>Sun, 14 Feb 2016 22:26:00 +0800</pubDate><description><![CDATA[　　上一节写了创建对象的三种方法，而其中通过函数创建对象的方式又有三种模式，分别是工厂模式、构造函数模式、原型模式。而这三种模式最常用的则是原型模式。还是上栗子：
　　工厂模式：

function Fun1(name,age){
    var obj = {};
    obj.name = name;
    obj.age = age;
    obj.sayNma...]]></description><category></category></item><item><title><![CDATA[菜鸟快飞之JavaScript对象、原型、继承（一）]]></title><link>https://blog.youkuaiyun.com/baie2621/article/details/101940591</link><guid>https://blog.youkuaiyun.com/baie2621/article/details/101940591</guid><author>baie2621</author><pubDate>Wed, 10 Feb 2016 00:09:00 +0800</pubDate><description><![CDATA[　　有前辈说过，在JavaScript中，一切皆对象。由此可见，作为JavaScript的核心之一，对象是有多么重要。虽然今天走亲戚有点累，但还是得写写这个对象，免得吃几天好的，就又忘光了。
1.创建对象
　　通过内置对象创建：

var obj1 = new Object();
typeof obj1; // object

var obj2 = new Array();...]]></description><category></category></item></channel></rss>