content.json

{"meta":{"title":"CheDabang Blog","subtitle":null,"description":null,"author":"CheDabang","url":"http://yoursite.com"},"pages":[{"title":"categories","date":"2017-02-24T03:01:05.000Z","updated":"2017-02-24T03:08:39.732Z","comments":true,"path":"categories/index.html","permalink":"http://yoursite.com/categories/index.html","excerpt":"","text":""},{"title":"about","date":"2017-02-24T03:36:44.000Z","updated":"2017-02-24T03:43:13.296Z","comments":true,"path":"about/index.html","permalink":"http://yoursite.com/about/index.html","excerpt":"","text":"关于我路茫茫其修远兮，吾将上下而求索 前端段子手–车大棒 Email：che_dabang@qq.com"},{"title":"tags","date":"2017-02-24T02:59:17.000Z","updated":"2017-02-24T02:59:57.448Z","comments":true,"path":"tags/index.html","permalink":"http://yoursite.com/tags/index.html","excerpt":"","text":""}],"posts":[{"title":"浅谈for循环+canvas实现黑客帝国矩形阵","slug":"170113","date":"2017-01-13T12:53:32.000Z","updated":"2017-02-26T08:15:11.424Z","comments":true,"path":"2017/01/13/170113/","link":"","permalink":"http://yoursite.com/2017/01/13/170113/","excerpt":"背景 一日在网上闲逛的之时，突然看到一个利用JQ插件实现canvas实现的电影黑客帝国的小Demo。觉得创意不错，就下载下来研究一下。","text":"背景 一日在网上闲逛的之时，突然看到一个利用JQ插件实现canvas实现的电影黑客帝国的小Demo。觉得创意不错，就下载下来研究一下。 网上浏览jQuery的写法12345678910111213141516171819202122232425262728$(document).ready(function() { var s = window.screen; var width = q.width = s.width; var height = q.height; var yPositions = Array(300).join(0).split(''); var ctx = q.getContext('2d'); var draw = function() { ctx.fillStyle = 'rgba(0,0,0,.05)'; ctx.fillRect(0, 0, width, height); ctx.fillStyle = 'red'; ctx.font = '10pt Georgia'; yPositions.map(function(y, index) { text = String.fromCharCode(1e2 + Math.random() * 33); x = (index * 10) + 10; q.getContext('2d').fillText(text, x, y); if(y > Math.random() * 1e4) { yPositions[index] = 0; } else { yPositions[index] = y + 10; } }); }; RunMatrix(); function RunMatrix() { Game_Interval = setInterval(draw, 1000); }}); 全程100行不到的代码，主体的核心就是定时器调用canvas进行绘画处理。要是让我这种段子手来写，估计我把敲烂键盘都想不出这样营造效果。艺术细胞真的很重要咕~~(╯﹏╰) 老王：“等等大棒！不是说js+canvas实现黑客帝国矩形雨，可是你这个附上的代码分明是jQ+canvas.” 老管：”就是！你这个标题汪，这是又要搞事情呀！” 我：“别急呀！这个jQ+canvas因为网上很多人博客都有写，所以这边只是附上一下jQ代码供大家参考。下面才是我今天要通过for循环代替上面的map()来实现的！！ 夫子：别净扯理由，你是根本就不会map()用法！！” 老齐： “净说什么大实话！大棒是根本看不懂……” 我：………好吧！你们说对了，我的确是不会map()方法。（让我蹲墙角哭会/((╥╯^╰╥)” 万能for循环的写法好了不扯犊子了，言归正传。让我们回到下面要讲的代码上面来。 1、基本准备工作1.1、HTML骨架部分1<canvas id=\"hacker\" width=\"500\" height=\"500\">请使用Google浏览器或者IE9以上</canvas> 1.2、JavaScript部分1234var hacker = document.getElementById(\"hacker\");var width = hacker.width = screen.width; //screen.width拿到是当前屏幕宽度var height = hacker.height;var ctx = haceker.getContext('2d'); 做完这几步之后，我们就能够拿到当前屏幕的宽度、以及canvas画布的宽度和得到canvas画布的上下文。 2、数组的准备12var num = Math.ceil(width / 10);var y = Array(num).join(0).split(''); 这里估计有人会询问了，这里创建一个数组是干嘛。为什么数组的length >= num？ O(∩_∩)O哈哈~，别着急，后面的代码就会个大家逐一解释了。 3、定义一个重复调用核心draw()方法123456789101112131415161718var draw = function() { ctx.fillStyle = 'rgba(0,0,0,.05)'; //创意核心语句之一 ctx.fillRect(0, 0, width, height); ctx.fillStyle = '#0f0'; ctx.font = '10px Microsoft YaHei'; for(i = 0; i < y.length; i++) { var x = (i * 10) + 10; text = String.fromCharCode(1e2 + Math.random() * 33); var y1 = y[i]; ke.getContext('2d').fillText(text, x, y1); console.log(height); if(y1 > Math.random() * 10 * height) { y[i] = 0; } else { y[i] = parseInt(y[i]) + 10; } }} 3.1、ctx绘画过程解释**12ctx.fillStyle = 'rgba(0,0,0,.05)'; //创意核心语句之一ctx.fillRect(0, 0, width, height); 这里为设定的区域铺上一个rgba(0,0,0,.05) 这样黑色半透明的背景。 12ctx.fillStyle = '#0f0';ctx.font = '10px Microsoft YaHei'; 这里就是画出大小为 10px，字体为微软雅黑的字体。 两行代码看起来就是很普通的代码，但是组合起来却发生一个质的变化。 为什么会有层次感呢？要知道getContext(‘2d’)这句语句，就决定了canvas只能绘制2D图像，不能绘制3D层次感的图形！ 答案就在 ctx.fillStyle = 'rgba(0,0,0,.05)';上面，当重复调用方法的时候，这种半透明的灰黑色背景就会盖在之前的画好绿色文字上面。因此因此就造成了有文字是绿色，有的文字变成灰绿色。 各个文字之间形成一种视觉差，从而让人感觉到3D立体矩形代码阵效果。所以当我发现两组这么普通的代码组合起发生如此厉害效果，当即激动拍了拍键盘。大呼一声！ “哇靠！这个真心666！” 3.2、for循环解释123456789101112for(i = 0; i < num; i++) { var x = (i * 10) + 10; text = String.fromCharCode(65 + Math.random() * 62); var y1 = y[i]; ctx.fillText(text, x, y1); console.log(height); if(y1 > Math.random() * 10 * height) { y[i] = 0; } else { y[i] = parseInt(y[i]) + 10; } } 3.3、关于canvasX轴上面文字控制**因为前面每次画的文字大小都是10px，那么如果我把canvasX轴平铺满。需要多少个文字呢。 答案 = Math.ceil(width / 10); => 即就是我前面的num 小说明： 为什么得用Math.ceil()向上取整，而不能用Math.floor向下取整，parseInt()之类。 因为假设num = 300.8样子，那么使用Math.floor() 或者parseInt(),就好把这个数转换成300 那么后面，绘制300个文字在canvasX轴，那么最右边就还有0.8个文字，也就是8px空隙一种没有字母出现。向上取整，就会铺满，多的部分超出canvas区域，就会消失。 text = String.fromCharCode(65 + Math.random() * 62);这里就是每次for循环的时候产生65 - 127 的数字，之后将其转换为大写、小写字母，以及一些符号 3.4、关于canvasY轴的控制**这里前面定义的数组就派上用场了var y = Array(num).join(0).split('');,这里就是用于记录与控制每一次canvas文字的Y轴。 为什么要用数组去记录呢？说实话，当初我也是这么认为的，所以我没有尝试控制每一个文字Y轴的数据，让所以的Y轴依次累加，结果效果如下： 所以之后我就奇思妙想，让每次文字是排列X轴平铺数字随机呈现。例如第一次平铺300个，第二次平铺100个，第三次平铺200…….,但是我还是错了： 错误的代码示范 所以多次失败的尝试之后，发现还是得控制利用一个数组控记录与控制每一个数字Y轴的数据。 代码的收尾1234 Run(); function Run() { Game_Interval = setInterval(draw, 30);} 之后设置一个定时器，每次间隔30ms调用一次，然后大功告成。一个炫酷的黑客帝国矩形雨效果就出来了。 当然前面JavaScript代码可能太凌乱，所以这边就把JavaScript的全部呈上： 123456789101112131415161718192021222324252627282930 window.onload = function() { var kacker = document.getElementById(\"hacker\"); var width = hacker.width = screen.width; var height = kacker.height; var ctx = hacker.getContext('2d'); var num = Math.ceil(width / 10); var y = Array(num).join(0).split(''); var draw = function() { ctx.fillStyle = 'rgba(0,0,0,.05)'; ctx.fillRect(0, 0, width, height); ctx.fillStyle = '#0f0'; ctx.font = '10px Microsoft YaHei'; for(i = 0; i < num; i++) { var x = (i * 10) + 10; text = String.fromCharCode(65 + Math.random() * 62); //console.log(text); 用来检测 text 的值 var y1 = y[i]; ctx.fillText(text, x, y1); if(y1 > Math.random() * 10 * height) { y[i] = 0; } else { y[i] = parseInt(y[i]) + 10; } }}Run();function Run() { Game_Interval = setInterval(draw, 100); } } 看到这里不要以为代码就此结束了，好好吸收那个for循环之后。接下来再返回上面看一下map()方法，相信map()方法的用法是不是一下子清晰明了。一箭双雕，既实现了5毛的特效，又帮助熟悉了一个map()方法用法. 效果预览：黑客帝国矩形阵（ps：效果图挂在阿里云上面，部分平台点击进去可能会有提示，例如微信，请忽略…..） 我是车大棒,深藏功与名！（滑稽脸）","categories":[{"name":"前端浅谈","slug":"前端浅谈","permalink":"http://yoursite.com/categories/前端浅谈/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"canvas","slug":"canvas","permalink":"http://yoursite.com/tags/canvas/"}]},{"title":"车大棒浅谈微信红包随机分配猜想","slug":"170106","date":"2017-01-06T09:16:26.000Z","updated":"2017-02-24T09:13:37.905Z","comments":true,"path":"2017/01/06/170106/","link":"","permalink":"http://yoursite.com/2017/01/06/170106/","excerpt":"背景 做为一名贫困的月光搬砖党，如果想每天加餐能够多加一块肉。那么就得靠微信红包手速抢红包，所以为了实现梦想。我给自己制定了目标，先抢够一个亿。","text":"背景 做为一名贫困的月光搬砖党，如果想每天加餐能够多加一块肉。那么就得靠微信红包手速抢红包，所以为了实现梦想。我给自己制定了目标，先抢够一个亿。 可是这几天微信红包手气，完全都不忍直视呀。每次都手气最差，就连自己的发的红包自己抢，也还是抢几分钱。阿西吧！早餐包子钱都吃不上了。 微信红包顺序拆分猜想所以当我看见隔壁老王正在吃着热腾腾的包子加豆浆，只能默默端起了水杯去饮水机旁边打水喝，打算用水安抚我抗议的胃。 之后一边静静灌水喝，一边开始思索起来。为什么老王运气好，总是能够得到最佳手气。而我却总是几分几分，这不科学。难得微信红包有什么奥秘？难得拆分红包的先后顺序会影响最佳手气的概率？ 于是本人赶紧上网搜了搜，原来早在微信红包出来的时候。就有人已经对于微信红包的随机分配算法进行探讨，并给出了相应回复。（看看大佬们都关注点总是和我们这些弱渣关注点不一样，(ˇˍˇ) 向大佬们低头。） 可是很块我就发现，这个仅供参考的代码就有一点问题。根据图中的代码 double min = 0.01； double max = _leftMoneyPackage.remainMoney / _leftMoneyPackage.remainSize * 2; 通过知乎大神上面的提供的代码可以看出，微信发放的红包中。单个红包最小金额为0.01元，而最大金额则为 剩余的金额 / 剩余未拆开红包的数量 之后再乘以2 即我发一个5毛钱的红包，分5人发送。那么其中手气最佳的最大金额应该是 5 / 5 * 2 = 2毛。对此我在微信群，发了一个5毛红包做了测试： 这里老王在专心吃的他的包子，因此没有去抢我发的红包。可是这样我还是一样拿不到手气最佳，心疼我这个手气…… 嗯额，不扯远了。通过这个手气最佳的金额来看 0.34 > 0.5/5 * 2 ，因此从这个红包的金额来看，现在微信单个红包最大金额不满足知乎提供的公式。（在当时是不是满足，我就不清楚了，毕竟是好几年的公式了！） 但是后续在多个群里测试多个5毛红包之后，发现这个关于第一个领红包、以及最后一个领红包先后顺序领红包，获得手气最佳的概率是一样的。 只能说跟欧洲人和非洲人有关，看来这几天得多到老王的位置吸吸欧气 (￣_,￣ ) 其他的随机算法实现 在通过惨痛红包测试之后，证明现在当初那个公式可能有误。但是肿么不能这样就结束了，总得搞点事情出来呀！（于是乎，翻阅半天的帖子之后，便回到当初知乎题主提问的问题上，尝试解决他的问题。~(～￣▽￣)～） 回头解决知乎题目猜想：尝试了一下，题主的问题。我好像能够解决呢！！ 说实话，还是觉得题主的这个随机分配想法还是很妙的，要是我就想不出来这种随机分配金额的办法来。也要向提问题主低头(* ￣︿￣)！ 123456789101112131415161718192021222324252627282930313233function weixin1(money, num) { var arr1 = []; var price = 0; var ha = 0; var random = 0; for(var i = 0; i < num; i++) { if(i == num - 1) { arr1[i] = parseFloat(money.toFixed(2)); break; } arr1[i] = parseInt(parseInt(money / (num - i) * 100) / 100 * (parseInt(Math.random() * 100) / 100) * 100) / 100; if(!arr1[i]){ arr1[i] = 0.01; } money -= arr1[i]; console.log(money); } for(var i = 0; i < arr1.length; i++) { //用来检测最后的总数是否正确 price += arr1[i]; } function randomsort(a, b) { return Math.random() > 0.5 ? -1 : 1; } arr1.sort(randomsort); //数组重新随机排列 console.log(arr1) console.log(price);}weixin1(100, 5);weixin1(0.5, 5); 以上就是对微信红包随机分配猜想的胡扯篇，欢迎各位大佬们指导并给出相应的意见。（当然红包打赏我就更好了(￣︶￣)，哎呦！我又想起了我那么多可怜测试红包。）","categories":[{"name":"前端浅谈","slug":"前端浅谈","permalink":"http://yoursite.com/categories/前端浅谈/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"算法","slug":"算法","permalink":"http://yoursite.com/tags/算法/"}]},{"title":"浅谈web前端自动化工具--gulp","slug":"161129","date":"2016-11-29T02:23:32.000Z","updated":"2017-02-26T09:21:01.008Z","comments":true,"path":"2016/11/29/161129/","link":"","permalink":"http://yoursite.com/2016/11/29/161129/","excerpt":"","text":"背景：在前端的开发中上线之前可能会做的事情： 1、文件目录调整HTML注释、换行等操作。2、CSS压缩合并、JS代码压缩重命名。3、CSS语法检测4.、……. 上述这些操作是重复而枯燥的，如果是人工来一项一项做，会浪费大量时间。而且人工操作有时候还会带来一些想不到的bug。例如css改动导致页面错位、js改动可能导致功能不正常。 这个时候web前端自动化工具就出现了，当然前端的飞速发展。各种web前端自动化工具也层出不穷，这里就浅谈一下我个人用的web前端自动化工具–gulp。 准备工作1.1、 打开nodejs官网，点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。然后像安装QQ一样安装它就可以了（安装路径随意）。因为在安装并使用gulp的时候，需要先安装node.js.利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。 1.2、 安装好了之后，打开cmd命令行输入node -v，用来检测是否安装成功。如安装成功则提示node.js的版本号。 1.3 、 由于nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 npm -v 来测试是否成功安装。同上述node.js方法一样，安装成功则提示npm的版本号。 gulp全局安装2.1、说明：全局安装gulp目的是为了通过她执行gulp任务；2.2、安装：命令提示符执行npm install gulp -g；2.3、查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。 新建一个package.json文件3.1、说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；3.2、以我个人的一个项目当中的一个json文件为例 3.3、当然如果说手动配置这些东西，那么今天的主题估计就不能够称为web前端自动化了。这里我们通过CMD命令符执行npm init 3.4、为了方便读者更好了解这个 npm init 的使用，我讲自己原本的package文件删除。重新执行npm init 安装gulp 本地服务4.1、进入该项目目录下，输入npm install gulp-less –save-dev4.2、 这个时候可能有人会问，为什么前面全局下安装了一个gulp，现在又在本地文件下还要安装gulp。我们全局安装了gulp，项目也安装了gulp。为啥装两遍？？说明：全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能，作为项目的开发依赖（devDependencies）。4.3、之后继续安装gulp插件。本示例以gulp-rename（文件重命名）和gulp-uglify（js代码压缩）为例，命令提示符分别执行npm install gulp-rename –save-dev 和 npm install gulp-uglify –save-dev .4.4、CMD指令执行完毕之后，这个时候你的当前目录下，就生成了node_modules文件夹。 新建gulpfile.js文件（重要）gulpfile.js这个入口文件，在前面已经出现了不少次数了。下面就开始关于gulpfile.js文件配置，还是以本人的项目代码为例： gulp运行6.1、进入gulpfile文件下打开CMD，输入gulp dabang 6.2、运行成功之后，最后我的文件夹当中出现一个js代码压缩，后缀名添加min的js文件。 小结7.1、安装nodejs；7.2、gulp全局安装npm install gulp -g7.3、项目文件安装本地gulp服务 npm install gulp-less –save-dev以及相应的gulp 插件7.4、新建package.json文件；7.5、新建gulpfile.js文件；7.6、通过命令提示符运行gulp任务 以上就是关于web前端自动工具–gulp个人的简单一点的使用，更多gulp 插件以及API使用，请访问请查看 gulp中文网. 注：以上就是个人对于gulp使用的一点心得，欢迎各位大佬(￣ε(#￣)打脸指教！！","categories":[{"name":"前端浅谈","slug":"前端浅谈","permalink":"http://yoursite.com/categories/前端浅谈/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"},{"name":"前端工具","slug":"前端工具","permalink":"http://yoursite.com/tags/前端工具/"}]},{"title":"浅谈JavaScript 函数作用域当中的“提升”现象","slug":"161114","date":"2016-11-14T03:27:00.000Z","updated":"2017-02-26T08:35:31.247Z","comments":true,"path":"2016/11/14/161114/","link":"","permalink":"http://yoursite.com/2016/11/14/161114/","excerpt":"","text":"背景 在JavaScript当中，定义变量通过var操作符+变量名。但是不加 var 操作符，直接赋值也是可以的。例如 ： message = “hello JavaScript ! “ 即定义了一个全局变量message,并赋值 “Hello JavaScript！”–《JavaScript高级程序第三版》 如同往日一般，一群人在所谓的技术交流群里面相互斗图着。突然老王莫名的正经起来，在群里发了一道JavaScript的题目，让大家猜一猜这道题的答案。 12345678var foo = 1;function bar() { foo = 10; return; function foo() {}}bar();console.log(foo); //求控制台输出多少？ 看到这到题目之后，立刻不加思索回答了“10”。首先第一步定义一个全局变量foo = 1，然后函数执行的时候又定义全局变量 foo = 10覆盖了之前的全局变量，return之后，这个函数就直接结束， function foo {}来不及定义。因此控制台输出10；按照在《高三》上面看到知识点推断，毫无问题，简直完美呀！ 但是，在把答案发出去之后。本能就感觉这道题不可能这么简单，不正经的群突然讨论正经的代码，肯定会有大坑等着人来跳。一种不好感觉涌上心头，感觉自己又要被打脸了。 赶紧打开编辑器测试一下这段代码，手哆嗦的按下F12.只见控制台下，一个耀眼的1赫然闯入眼帘。啪啪啪！！这脸又被打的，好疼呀！！ 果不其然群里老王马上的在群里否决我的答案，啪的一下打了这张老脸。不行！这个脸打了得把场子找回来，这个老王接下来肯定会揭晓答案并公布解题思路。得在他公布之前，讲答案和原因给测试出来。 经过简单的测试之后，发现原来是后面的foo，函数提升到最顶端了。所以后面foo = 10中的foo实际上是一个局部变量了。因此后面console.log(foo)时是拿不到bar函数中的局部变量foo = 10,因此只能拿到全局变量foo = 1;所以控制台输出1。 上文代码的另外一种形式：123456789var foo = 1; function bar() { function foo(){} foo = 10; return; // function foo() {} 相当于这行代码提升到最顶部了 } bar(); console.log(foo); 被抢了风头的老王果断的不服气呀！说我瞎猜扯犊子一厢情愿的，自己随意猜想的。好的，下面就是开始解释我为什么说函数function foo(){}提升到最顶端。不改动老王的代码，让我们只是加两个console.log测试一下相应的输出结果。123456789101112var foo = 1; console.log(\"全局变量：foo = \" + window.foo) function bar() { console.log(\"此时bar函数中foo =\" + foo) foo = 10; console.log(\"bar函数中的变量是\" + foo); console.log(\"全局变量foo还是：\"+window.foo); return; function foo() {} } bar(); console.log(foo); 浏览器输出结果 通过这里可以证实我的猜想是正确的，function foo(){}直接被提升到bar()函数最顶端，然后后面foo = 10就不是再重新定义全局变量了，这里foo是一个局部变量的角色被定义出现的。因此才没有将全局变量给覆盖，而由于函数外面是不能直接拿到bar函数当中的局部变量foo，因此继续向上寻找到全局变量foo = 1.从而输出1. 这里估计联想能力丰富的小伙伴肯定会举手说，那么函数有提升的现象。那么变量也是否会有提升现象？不错！不错！！这位小伙伴联想的非常正确，学习就要多学会举一反三。 变量提升12345678var foo = 1; function bar() { foo = 10; return; var foo //几乎是相同的代码，只是把 function foo 变成了 var foo。变量也是能够提升了的！ } bar(); console.log(foo); //还是输出1. 思考同样的既然变量能够提升，函数声明能够提升。那么谁升的更高呢？1234567891011121314function test(){ console.log(dabang); function dabang(){}; var dabang; } test(); function test1(){ console.log(dabang); var dabang; function dabang(){}; } test1(); 控制台输出结果： 小结1、在JavaScript当中，函数作用域当中。变量和声明函数都能够提升。2、同样提升的情况下，声明函数提升的更加高！ 以上就是鄙人对于JavaScript函数作用域中“提升现象”一点简单理解，欢迎各位的大佬们指导学习。ps：打脸也是可以的，毕竟错了就是错了。（那是打脸可否轻一点，留着日后再打呀！(～￣▽￣)～）","categories":[{"name":"前端浅谈","slug":"前端浅谈","permalink":"http://yoursite.com/categories/前端浅谈/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"段子手车大棒自白说","slug":"161015","date":"2016-10-15T08:49:00.000Z","updated":"2017-02-26T09:51:22.554Z","comments":true,"path":"2016/10/15/161015/","link":"","permalink":"http://yoursite.com/2016/10/15/161015/","excerpt":"一日朋友A君对我说：","text":"一日朋友A君对我说： 大棒！你写的技术文章都跟那些网络段子手写的文章一样，逗死我了！ 我：“是吗？那我的目的就达到！” 其实，最开始我也想打算以跟着那些知名的博客大牛博客们，参考学习写一些标准的、规范的学术性博客的！ 但是无意间看到网文上面的一句话 “如果你不能够将你所学的东西像一个6岁小孩解释清楚，那么你其实不懂你学的什么。” 说实话当初一看这句话，瞬间觉得逼格真炸天。但是思来想去，其实也并无道理。 这句话可能要求是比较高，但是这句话还是希望我们把对于讲解知识的点的时候，要简单明了。用咱们中华传统的古语来说就是：深入浅出，通俗易懂。 所以在后面的的在写技术文章的时候，我都会在尽量尝试通俗易懂的方式解释去述说相关的代码。而到去提炼并简化成通俗易懂的话时，我才能切实的体会为什么那句话逼格那么高，通俗化去述说相关代码知识点真的好难。 但是我的朋友们，马上就开始反驳我了。 “得了吧，你写通俗就通俗呗！动不到就插入表情包，还时不时插入自编段子。你这不是博客段子手，是什么？” “那个！打人不打脸！你们这样会导致气氛变得很尴尬的，你这话我没法接！” 好吧，我我承认我已经沦落为一个弱渣的段子手。但是我之所以会这样做，只是为了当初的“初心”，想当初作为初心的时候，发现网上好多人的技术文章都是千遍一律的复制别人，然后粘贴成自己的原文文章，不加一点的的自己内容和见解。里面的知识点杂乱的很，完全没有考虑初学者和新手的感受。只有少数一些大牛的博客才是精华中的原创并给出自己的相关见解、曾经作为初学者（那个，现在也是初级战斗力不足5的弱渣！）浪迹许久才知道这些知名大牛的博客。 所以当初看那些乱七八糟的博客的时候，就感叹后面写技术文章一定要比这些博客写的通俗易懂，更加友好。而这不单独去讲一个技术的文档的时候，看久可能就乏味了。这个时候来一幅表情包和段子，一定能够很好的放松读者的大脑，这对加深大脑的记忆可是好处多多呀！。既学习了知识点，又放松的自己的大脑，两全其美 ……【一脸正经】 ……好吧！！大棒你赢了！！！ 最后附上之前那句逼逼格格满满的原作者，让我一起来膜拜这位大神吧！ If you can’t explain it to a six-year-old，you don’t understand it yourself.—-Albert Einstein","categories":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/categories/随笔/"}],"tags":[{"name":"自白说","slug":"自白说","permalink":"http://yoursite.com/tags/自白说/"}]},{"title":"浅谈this关键字","slug":"160909","date":"2016-09-09T09:06:00.000Z","updated":"2017-02-26T08:14:49.462Z","comments":true,"path":"2016/09/09/160909/","link":"","permalink":"http://yoursite.com/2016/09/09/160909/","excerpt":"前言JavaScript中this变量是一个令人难以摸清的关键字，当初学习javascript的时候被这个this指向问题折腾的我是惨不忍睹，漏洞百出。一度想在后面的代码过程中放弃对this的使用，但是this在javascript当中用处太广泛了。充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余，没办法只能硬着头皮上呀。被虐多次再结合自己查阅相关文档资料，总算有一点小小心得。特分享出来，供大家参考！ this简述关于this的清this所引用的对象到底是哪一个，也许很多资料上都有自己的解释。例如我钟爱的《高三》对this也是简单几页翻过。最后翻阅到MDN上面的web技术文档，上面解释深得我意。","text":"前言JavaScript中this变量是一个令人难以摸清的关键字，当初学习javascript的时候被这个this指向问题折腾的我是惨不忍睹，漏洞百出。一度想在后面的代码过程中放弃对this的使用，但是this在javascript当中用处太广泛了。充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余，没办法只能硬着头皮上呀。被虐多次再结合自己查阅相关文档资料，总算有一点小小心得。特分享出来，供大家参考！ this简述关于this的清this所引用的对象到底是哪一个，也许很多资料上都有自己的解释。例如我钟爱的《高三》对this也是简单几页翻过。最后翻阅到MDN上面的web技术文档，上面解释深得我意。 在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，在每次函数被调用时this的值也可能会不同。–MDN社区web技术文档 由此可以推出this的在不同的情况下，this的指向各不相同。简单来说就分为5种情况 全局环境var a = "先制定一个小目标，下一顿饭加一个鸡腿"; console.log(this); // 这里this就指向 window console.log(this.a); //控制台输出 "先制定一个小目标，下一顿饭加一个鸡腿" 这一种情况相信大家都非常好理解，在全局环境当中this默认是指向window 函数中调用function foo1() { function bar() { console.log(this); } bar(); } foo1(); // 输出window 当foo1()执行的时候 ，间接相当于window.foo1()执行函数中的this是指向window，因此控制台相应输出window结果。（foo1() 间接也等于 window.foo1(),这样就是相当于window在调用这个函数，因此this也是指向于window。） 对象中调用var x = "今天交房租"; var obj = { foo:function() { console.log(this.x); }, x:"房租减免"； }; obj.foo(); //控制台输出 "房租减免" 这是当对象obj调用foo()函数，this指向了这个调用对象，即this就等于obj，控制台式输出就变成了obj.最后控制台便输出 “房租减免”，唉！！这要是从房东嘴巴里面输出该多好！！ 构造函数中var name = "hahaha"; function Obj() { this.name = "CheDabang"; } var person = new Obj(); console.log(person.name); //输出 CheDabang 这里通过new运算符创建一个 Obj的对象实例。变成person{this.name}，因此这里this的指向也随着指向这个新实例对象。因此控制台输出 CheDabang apply、call中调用当一个函数的函数体中使用了this关键字时，通过所有函数都从Function对象的原型中继承的call()方法和apply()方法调用的时候，它的值可以绑定到一个指定的对象上。 function add(c, d){ return this.a + this.b + c + d; } var o = {a:1, b:3}; console.log(add.call(o, 5, 7)); //1 + 3 + 5 + 7 = 16 console.log(add.apply(o, [10, 20])); // 1 + 3 + 10 + 20 = 34 小练习以上就是我们常常出现的5种情况，看到这么多情况的介绍。诸位看官，也晕了吧。不要着急，让我们再来几个小练习感受一下这位this大爷的指向。 题目①1234567891011var a = 10;function test(){ a = 5; console.log(a); console.log(this.a); var a ; console.log(this.a); console.log(a);}test(); new test(); 当调用test()的时候，控制台分别输出 5、10、10、5当调用 new test()的时候，控制台分别输出 5、undefined、undefined、5 解析当var a = 10 ==> var window.a = 10 ;当test()调用的时候，间接也相当于window.test()调用。因此当这个函数执行的时候，这里面的this指向的是window对象，因此this.a 指向的是window = 10； 当new test() 实例化，因此this指向的是这个实例的对象，因此这个新对象的a，并没有直接定义过。所以控制台输出undefined 题目②123456789101112var Funllname = \"john Doe\";var obj = { Funllname:\"Colin Thrig\", prop:{ getFullname:function(){ return this.Funllname; } },}; console.log(obj.prop.getFullname());var test = obj.prop.getFullname; console.log(test()); 控制台输出undefined john Doe 解析控制台结果1：当obj.prop.getFullname()在调用的时候，相当于执行了其中的函数。而由于调用这个函数的是obj.prop调用的，因此this就直接指向obj.prop，但是obj.prop这个对象当中并没有定义Fullname,因此输出undefined。 控制台结果2：当var test = obj.prop.getFullname; 这个时候就间接相当于==>var test = function(){return this.Funllname;}因此当test()调用的时候，就相当于 ==> window.test();,因此其中的this便指向了window对象，所以便输出了 john Doe 题目③1234567891011var sex = \"male\";var saySex = {sex:\"female\",saySex:function(){ function getSex(){ console.log(\"this.sex=\"+this.sex); } getSex(); }}saySex.saySex(); 控制台输出 this.sex = male 解析控制台结果：当saySex.saySex()调用的时候，只是相当saySex的函数被调用。之后在函数中，函数getSex()被调用，此时this便指向getSex().而函数getSex()默认情况下是指向window的，因此这里输出this.sex = male 题目④12345678910111213141516var name = \"chedabang\";function sayName(){var a = { name:\"加一个鸡腿\", sayName:getName};function getName(){ console.log(this.name);}getName(); a.sayName(); getName.call(a);}sayName(); 控制台输出chedabang加一个鸡腿加一个鸡腿 解析当sayName()运行的时候时候，先是里面的第一个函数运行，getName().因此因此其中的this，便默认指向了window，因此this.name ==> chedabang其次a.sayName()运行，因为sayName = getName。所以即当于getName再次被调用，由于存在调用对象a。因此此时this又重新指向对象a，对象 a 当中存在name属性，因此输出加一个鸡腿。最后 getName.call(a).运行的时候，将对象a给绑定到上面，因此函数里面的this就不指向window，而指向的是绑定的对象a，因此输出 加一个鸡腿 题目⑤123456789101112131415var a = { name:\"张三\", sayName:function(){ console.log(\"this.name=\"+this.name); }};var name = \"李四\";function sayName1(){ var sss = a.sayName; sss(); a.sayName(); (a.sayName)(); (b = a.sayName)();}sayName1(); 控制台输出：this.name=李四this.name=张三this.name=张三this.name=李四 解析当sayName1()运行的时候，sayName1函数内部首先是控制台结果1：var sss = a.sayName ==> var sss = function(){console.log("this.name="+=this.name);} 像前面我们总结的一样函数中调用，因此这里的this指向window对象，因此输出this.name=李四控制台结果2：a.sayName();这里a直接调用其中的匿名函数，因此此时this指向a，因此a.name = “张三”，所有控制台输出this.name=张三 控制台结果3：这里(a.sayName)();其实间接相当于 == a.sayName();这里指的是值立即执行。不管如何始终是对象a在调用sayName这个函数。因此控制台也就跟着一起输出this.name=张三。 控制台结果4：和控制台结果3一样，代表变量b立即执行，而b和控制台结果1中sss一样，也属于函数中调用，因此this这里指向window。即控制台输出this.name=李四 结尾看到这里是不是豁然开朗了,相信进过this这么几道题的磨练，大家应该对this了解有加深了不少。如果讲的有错误,还请大牛们给指出来,在此谢谢了.","categories":[{"name":"前端浅谈","slug":"前端浅谈","permalink":"http://yoursite.com/categories/前端浅谈/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"浅谈JavaScript闭包心得","slug":"160823","date":"2016-08-22T16:45:00.000Z","updated":"2017-02-26T08:53:28.913Z","comments":true,"path":"2016/08/23/160823/","link":"","permalink":"http://yoursite.com/2016/08/23/160823/","excerpt":"","text":"前言 闭包就是指一个有权访问另外一个函数作用域中的变量的函数。–《JavaScript高级程序第三版》 本人对于闭包初次的认识就来自《高三》，首先仅仅通过“有权”’两个字我们便可以进一步推断出。在正常情况下，一个函数是“无权”访问另外一个函数的作用域中的变量。 什么是变量因此在浅谈闭包的时候，回顾一下Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。下面通过几个简单的例子，让我们展示一下全局变量和局部变量的区别。 全局变量 var str = "hello chedabang"; console.log(str); function test(){ console.log(str); } test(); 控制的台的结果：hello chedabanghello chedabang说明这个变量str 可以在函数外面直接被访问到，也能够被函数访问到这个变量。既然谁都有权访问到这个变量，那么就说明在函数体外面声明的变量就是全局变量。 局部变量function test1(){ var str1 = "hello chedabang"; console.log(str); } test1(); 控制台输出结果：hello chedabang再来一组代码 function test1(){ var str1 = "hello chedabang"; } console.log(str1); 控制台输出结果：Uncaught ReferenceError: str1 is not defined再来一组代码说明这个变量str1只能够被自己所在的函数访问使用，而在函数外面调用时由于无权限访问函数test1()的变量，因此控制台报错“变量未定义”。所以我们可以推断出在函数内部声明的变量，就属于局部变量。有一点需要注意，函数内部如果不用var 来声明变量，那么这个变量就不是局部变量，而是一个全局变量 12345 function test2(){ str2 = \"hello chedabang\"; console.log(str2);}console.log(str2); 控制台输出结果：hello chedabanghellow chedabang 小结1、函数内部可以直接读取全局变量2、函数外部不可以直接读取函数内部的局部变量 思考点如何从外部访问函数内部的局部变量出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是无权访问的。 123456789 function zhugeliang(){ //诸葛亮 var str3 = \"蜀国\"; function adou(){ console.log(str3); //阿斗 }}var simayi = zhugeliang(); simayi(); //控制台报错 司马懿攻不下蜀国 通过此代码可以看到,由于函数诸葛亮是在自己函数里面创建的局部变量“蜀国”;因此司马懿想获取到 var str3 = “蜀国”;那就肯定会报错，无功而返。读过三国的人应该都知道，诸葛亮虽然被人称为卧龙。但是面对阿斗这样始终扶不起庸才，也只能回天乏术，蜀国最终还是没能够一统三国，反倒是阿斗落下一个乐不思蜀的笑柄。 simayi（司马懿）获取内部变量“蜀国”的代码123456789 function zhugeliang(){ //诸葛亮 var str3 = \"蜀国\"; function adou(){ console.log(str3); // 阿斗 } return adou;}var simayi = zhugeliang(); simayi(); //控制台输出 “蜀国” 司马懿拿到蜀国 思路分析： 函数“阿斗”被包裹在函数“诸葛亮”内部，这时“诸葛亮”内部的所有局部变量，对“阿斗”都是可见的。但是反过来就不行，“阿斗”内部的局部变量，对“诸葛亮”是不可见的。这就是Javascript语言特有的“链式作用域”结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。因此既然“阿斗”可以读取“诸葛亮”中的局部变量，那么只要把“阿斗作为返回值，就可以在”诸葛亮“外部读取它的内部变量“蜀国”。 闭包的简单概念上一节代码中的阿斗函数，就是闭包。以前上网查各种专业文献上的”闭包”（closure）定义非常抽象，很难看懂。因此我个人的理解是，闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数”。所以在本质上，闭包就是将函数内部和函数外部连接在一起，而修建的秘道。 千里之堤溃于蚁穴，函数堡垒塌于闭包。 闭包的用途闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。怎么来理解这句话呢？请看下面的代码。 12345678910111213 function f1(){var n = 999;nAdd = function(){n += 1}function f2(){ console.log(n); }return f2; } var result=f1(); result(); // 999 nAdd(); result(); // 1000 //小结：没有引用就会被销毁。 在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。 为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。 这段代码中另一个值得注意的地方，就是”nAdd=function(){n+=1}”这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。 使用闭包的注意点1、由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。2、闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。 以上就是本人对于函数闭包的认识，不足的望还请赐教。PS：另外文中借鉴三国案例，只是为了方便解释案例调侃而举，如有冒犯三国迷的看法，还请见谅。","categories":[{"name":"前端浅谈","slug":"前端浅谈","permalink":"http://yoursite.com/categories/前端浅谈/"}],"tags":[{"name":"闭包","slug":"闭包","permalink":"http://yoursite.com/tags/闭包/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://yoursite.com/tags/JavaScript/"}]},{"title":"Hexo初见博客","slug":"hexo","date":"2016-07-22T07:08:32.000Z","updated":"2017-02-22T12:28:43.727Z","comments":true,"path":"2016/07/22/hexo/","link":"","permalink":"http://yoursite.com/2016/07/22/hexo/","excerpt":"","text":"关于Hexo的初次体验语法","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"http://yoursite.com/tags/hexo/"}]},{"title":"CSS经典权重题解析","slug":"160721","date":"2016-07-20T16:45:00.000Z","updated":"2017-02-26T09:19:02.831Z","comments":true,"path":"2016/07/21/160721/","link":"","permalink":"http://yoursite.com/2016/07/21/160721/","excerpt":"","text":"前言在前端的道路学习过程，CSS的选择器的权重的问题知识点是不可避免的。下面先简单回顾一下三种常用的选择器，id选择器、class选择器、标签选择器（type）。一般为了分方便区分三种选择器的权重，分别以1.0.0、0.1.0、0.0.1方式来对区分三者之间的大小关系。那么CSS样式中只需要比谁权重数组大就执行谁，可是真的是只需要比权重大小就可以了吗？还是说只是在某种情况下才适合比权重？不要着急，相信通过后面的5道题讲解。你会对CSS权重有一个更深的了解。 权重第一题** 看到这一题，想必大家都没有问题。第一个样式权重为1.1.1，第二个样式权重为1.0.3，第三个样式权重为0.3.4。所以此题最后的答案，文字的颜色就是红色。第一题很简单的基础知识，相信大部分人都应该没问题。所以第一题基本上是用来给各位增强信心的，那么后面的几题就没有那么简单了，到处埋着坑呢。 权重第二题** 看到这一题之后，按照第一题的逻辑。第一个样式权重0.2.2 第二个样式权重1.0.0.所以这一题的文字颜色应该是蓝色。最后实际的结果：文字的颜色为red红色。这里有同学会抓狂，为什么比权重的大小一个行的通，一个行不通呢？让我们重新看看这两个代码 通过代码和相关注释，相信对于权重的理解又加深一点了吧。乘热打铁，让我们马上进入下一题代码。 权重第三题 这一题对比第二种情况更加复杂了，有选中和没有选中两种情况。那么到底是执行那一种规则呢？相信有许多人犯迷糊，不知道如何选择了。那么我也不绕弯子，答案：文字最终的颜色为蓝色。具体原因，请看下面的图文介绍： 权重第四题这里两个样式都有选中元素，同时权重的等级大小也相同。那么文字的颜色到底听谁的呢？ 最后结果显示，文字颜色为橙色。因为在权重一样且又直接选中元素的的情况下，谁的样式排在后面听谁的。 权重第五题 这里的代码太长了，我就不一一全部截图下来了。但是通过图片可以大概看出来结构层，这个文字放在12个div当中。那么本题就考验的超过10个标签权重是否能够比一个类名权重更大。结果：文字的颜色为蓝色。 说明了，1.0.0、0.1.0、0.0.1之间关系并不是像平常数学中的10进制一样，逢10进一。他们之间的进制相差等级很大，至于相差多少。没有进一步深入去测试研究，因为几乎没有谁在实际开发过程当中，嵌套10个以上的标签。那样的网页会臃肿不堪，不利于维护。所以这个仅仅作为一个参考知识点！有兴趣的可以测试一下！ 总结1、 在考虑浏览器执行哪一个样式之前，先看样式有没有直接被选中。如果直接选中了，按照id数、类数、标签数来计算权重，谁最后的权重数值听谁的。如果数值一样，则谁写在后面听谁的。2、 如果没有直接被选中，那么就按照就近原则的方式执行。这里还简单的画了一下关于解决权重问题的思维草图 好了，以上就是CSS经典权重5道题解析了。如有写的不合理的地方，欢迎多多指出。","categories":[{"name":"前端浅谈","slug":"前端浅谈","permalink":"http://yoursite.com/categories/前端浅谈/"}],"tags":[{"name":"权重","slug":"权重","permalink":"http://yoursite.com/tags/权重/"},{"name":"CSS","slug":"CSS","permalink":"http://yoursite.com/tags/CSS/"}]},{"title":"浅谈清除浮动塌陷的4种经典套路","slug":"160709","date":"2016-07-09T14:25:31.000Z","updated":"2017-02-26T08:14:57.131Z","comments":true,"path":"2016/07/09/160709/","link":"","permalink":"http://yoursite.com/2016/07/09/160709/","excerpt":"前言“自古深情留不住，总是套路得人心。”这些日子，各个朋友圈随时可以见到这句话的身影。的确人们常说：“多一点真诚，少一点套路。”，但是最终现象写实也是那么残酷和无奈。同样在前端攻城狮的道路，我们都是真诚尽心尽力的去学习进取。奈何昔日各大浏览器厂商的大战不断，导致我们这群学习的人苦不堪言，一片水生火热呀。不得不想进各种hack方法解决。（没错，这里就是吐槽的IE6！）","text":"前言“自古深情留不住，总是套路得人心。”这些日子，各个朋友圈随时可以见到这句话的身影。的确人们常说：“多一点真诚，少一点套路。”，但是最终现象写实也是那么残酷和无奈。同样在前端攻城狮的道路，我们都是真诚尽心尽力的去学习进取。奈何昔日各大浏览器厂商的大战不断，导致我们这群学习的人苦不堪言，一片水生火热呀。不得不想进各种hack方法解决。（没错，这里就是吐槽的IE6！） 其次文档标准流，在浮动之后也会挖下塌陷的大坑。初学者稍有不慎，塌陷的失控的子元素到处乱窜，弄的你鸡飞狗跳苦不堪言。那么为了后面前端大道越行越远，下面就跟大家讲解一下清除浮动的4种套路。不过在讲套路得时候，咱们顺带的也把浮动之后塌陷大坑给顺便重现一样。 浮动塌陷大坑：先来看一个小小的demo：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的先是html骨架部分 下面的是css样式： 看到这里，如果说没有吃过浮动塌陷大亏的同学，肯定会以为这个网页中效果是这个样子 但是实际上浏览器最终的渲染的样子： 第二个div中的li，去贴第一个div中最后一个li的边了。原因就是因为div没有高度，不能给自己浮动的孩子们，一个容器。所以第二个div中的li，去贴第一个div中最后一个li的边了！这种现象又称作为浮动塌陷现象！ 套路讲解讲完浮动塌陷之后，让我开始回归今天的正题。清除浮动塌陷的4种套路方法 套路1：给浮动的元素的上级添加高度如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。所以只需要给li的上级ul或者div设置一个height：40px；（只要是浮动元素的上级元素就可以。），那么第二个div就好挤下来，在第一个盒子下面显示出来。 套路2：clear:both;但是在实际开发过程当中中，高度height很少出现。为什么？因为能被内容撑高！那也就是说，刚才我们讲解的方法1，工作中用的很少。那么这里有人可会脑洞大开：能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？事实上的确有这样的解决方法，是给他的上级添加一个clear：both；首先Clear就是清除的意思，both，代表左浮动和右浮动都清除掉。通俗一点来讲，就是说清除别人对我的影响。 虽然说这样可以清除浮动塌陷现象，但是同样也会有一个致命的问题。那就是两个div之间，margin值失效了，无法设置。再重申一下，是指两个div之间。 套路3：隔墙法既然用clear：both会导致两个div之间margin失效，那么到后面有人又开始脑洞大开了。在中间一个空盒子，然后给那个空盒子clear：both；（为了方便大家看效果，这里并没有放的是空盒子，而是放的有一个有高度、有颜色的盒子。） 这样加了一堵墙之后，第二个div就能掉下来并且不干扰了上面的元素。而且第二个div还是能通过magin-top调节两个div（“墙体”div不要算进去）之间的间距，所以隔墙法作为一个新的套路沿传开来。 套路3.1：隔墙法进化版—内墙法在这个世界上面存在一种人–完美主义者，在他们的世界观里面瑕疵是坚决不允许的。然后在前端行业中，也有一批追求完美主义前端攻城狮。他们对于隔墙法的小瑕疵表示完全不能接受，所以这一群完美主义的前端攻城狮开始对他的隔墙法的完美的改造进化去了。于是“内墙法”横空诞生，先来看一下代码结构： 只是将墙体的位置改变了，就完美的解决第一个div不能通过margin-bottm来调节与下面div之间的间距。所以后面很长一段时间，“内墙法”成为各大公司清除浮动主流写法。 套路4：overflow：hidden；overflow就是“溢出”的意思，hidden就是“隐藏”的意思。内容太多，溢出了盒子 overflow:hidden;溢出盒子边框的内容，隐藏了。 这个样式本意就是清除溢出到盒子外面的文字。但是，某些前端攻城狮工程师又发现了，它能做偏方。写法简单粗暴，好理解。属于在W3C文档额外扩展，就好比发明摩托车的人绝对不会想到，后面摩托车特技能够把摩托头扬起来行驶。所以这个overflow：hidden；也算是一个“祖传老偏方”，能治浮动塌陷老毛病。当然既然是“偏方”，肯定就有因为有些特殊情况下不能解决。导致只是沦为“偏方”上不正统。特殊情况就是定位的时候，若定位的区域超出那个盒子，overflow：hidden；就会把多的部分裁切掉。所以除了这个老毛病，overflow：hidden；其简单粗暴的写法，还是有与“内墙法”一争正室能力。 总结其实还有很多套路能够清除浮动，比如给浮动塌陷的元素再添加一个浮动，添加一个绝对定位……等一些方法。但是添加浮动，那样只是把塌陷对象的层级上移了而已，给塌陷对象添加绝对定位同样，也会受到其他定位的区域影响。所以这些消除定位之外，还需要额外添置的别的样式的套路因此不在我们关注的范围当中。咱们只讲这4种前端开发过程主流清除浮动塌陷的套路，听完这四种套路之后，以后各位小伙伴将采用哪一种方式清除浮动呢！估计很多小伙伴会使用“内墙法”来清除浮动的，的确内墙法以前是很流行。但是随着时代是不断进步的，很多企业在实际开发过程当中不再单纯的使用了“内墙法”这里估计有人就会吐槽了，不是说好了主流清除浮动就4种套路吗？这4种套路就目前就“内墙法”没有暴露问题，难不成用冷门的？别着急，现在企业里面采用的清除浮动方法综合法，又名内墙法2.0给浮动塌陷的盒子添加一个：after伪类 这种方法在各个大型项目上都有出现过，可谓清除浮动的万金油呀！本来说好的四种套路，现在除了那四种套路之外却一下子延伸出好几种清除浮动的套路，估计有些小伙伴要晕了吧。下面让我们通过思维导图来帮助，晕头的小伙们整理思路吧！ 之所以给各位小伙伴绕了这么大一个圈子。就是怕直接就把这种方法拿出来告诉大家。肯定会有小伙伴疑惑为什么要这么写，而此时看到相信各位看完本文的套路介绍之后，对清除的浮动的方法有了更深刻的了解了吧。我是车大棒，我的目标是星辰与大海。","categories":[{"name":"前端浅谈","slug":"前端浅谈","permalink":"http://yoursite.com/categories/前端浅谈/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://yoursite.com/tags/CSS/"},{"name":"清除浮动","slug":"清除浮动","permalink":"http://yoursite.com/tags/清除浮动/"}]},{"title":"回不去的路","slug":"160513","date":"2016-05-13T05:22:00.000Z","updated":"2017-02-26T09:58:33.072Z","comments":true,"path":"2016/05/13/160513/","link":"","permalink":"http://yoursite.com/2016/05/13/160513/","excerpt":"","text":"我叫车大棒，是一名快递员。 现在已经是五月中旬了，这座南方小城终于结束了绵绵细长的阴雨期了。艳阳高照的日子就要来了，但还是会有人抱怨。毕竟在南方夏日当中，这个艳阳可不是一般“艳”。当然从职业角度上面讲，我个人更加喜欢艳阳的日子。温度高是高一点，至少当我骑着我的3轮小毛驴穿梭大街小巷的时候不会受到风雨的影响。 而且由于这座南方小城靠着大海，到了晚上之后海风会吹散白天蕴荡在这座城市的阵阵热气，给这座夜晚的城市带来丝丝凉意。此时和朋友3-5小聚，喝着扎啤吃着烧烤人生就应该如此惬意。 如往常一样，我骑着我的3轮小毛驴穿越熟悉不能再熟悉的各个小区街道。 “喂！您好！您的快递到了。请下楼签收一下！” “好的，我马上下来！” 终于送完最后一件快递了，抬头看了看天空，此时已经是下午5点多钟了，夕阳余晖将这个天空点缀格外红艳。 “恩恩，朝霞不出门，晚霞行千里。看来后面几天都是好天气呀！” “你好！我是来拿快递的！”一声清脆柔和声音打断了我的思绪。 转过身一看，是一位留着齐刘海，穿着白色T恤、蓝色牛仔短裤和一双粉红的拖鞋的萌妹子。 “叫什么名字？” “林微雪” 林微雪，很好听的名字，很有意境。听完名字之后，走到三轮车后面的拿起了包裹。核对了一下包括包裹上面的名字，核实姓名无误。 “麻烦在上面签收一下你的名字，谢谢！”将包裹递给萌妹子，同时从我的工装口袋裤里面拿出了一支浅蓝色圆珠笔。 林微雪的手细长白皙，写的字也非常的秀气。右手腕还带着一根红绳，红绳上面挂着4枚铜钱。不过怪异的是一般铜钱上面都印的什么通宝一类，而这4枚铜钱上面却刻印“天地玄黄”四个字。这还是头一次见到，不由感叹现在的商家做工艺品也是越来越会玩。 看着林微雪签完之后，将签字的第一联快递单撕下来。这个可是快递单可是每日交差的凭证呀，将快递单放入文件盒中。一日的工作即将结束，很快又能小憩一番，心情不由也愉悦起来。 “慢着！还不能走！”见我要走林微雪，突然叫住了我。 “怎么了？包裹里面的东西损坏了？”想到我负责的快递最后一单出现了纰漏，我的心情一下子开始紧张起来了。 “不对呀，接收包裹的时候我查看外包装的胶带丝毫无损。而且我今天开小电驴开的很平稳呀！” “不是包裹的问题，是你的身体出了的问题。” “我身体出了问题？你确定！” “你印堂发黑，有邪气遮住你的额头中的天眼。” 看着林微雪一脸正经的对着我说道，我的尴尬症一下犯了！我内心不由的吐槽：“你这是在逗我？哪里是印堂发黑，长期在太阳奔波无论咋样都会被晒黑的！印堂发黑，多么掉牙的词语。”但是毕竟是顾客，我不能直接表现出来，不然到时候接到投诉悲剧了。 “额……其实是人比较黑，你肯定看错了。谢谢关心！”转过身不由的苦笑了一番，我还以为什么事情吓了一跳。名字和相貌挺好看的妹子，结果脑子不正常，可惜了！ “你还会回来找我的！”林微雪的声音再次从身后冒出来！ 伸出右手，向身后示意的摆了摆。坐上我的3轮小毛驴，准备离去。透过后视镜里面看到，车后面林微雪正在以一种诡异的笑容静静的向我这边看来 “看来病的不轻呀！”我轻声感叹了道。拧动右手车轮头的油门，小电驴欢快像前方驶去。镜子的林微雪和她身后的景色也逐渐变小，直到消失的看不见。 “叮！叮！叮！”固定在车轮头的手机响起来了，是好友老王的电话。 “喂！喂！大棒啥时候回来！快递还木有送完呢！”一打开免提老王的大嗓门就传了过来。 “刚刚送完，马上往回赶。半个多小时我就到了，到了之后我给你讲今天送快递的一件奇葩的事情。” “好嘞！那我先挂了，那你速度点！” 经历一天的奔波，想起了待会的happy。我不由的哼起来许巍的歌：“ 曾梦想仗剑走天涯，看一看世界的繁华，年少的心总有些轻狂，如今你四海为家……“ “叮！叮！叮！”手机的铃声再次响起了，老王的电话。 “喂！大棒！你在哪里？都将近2个多小时了！还没有回来！这就是你说的30分钟？” “这才过了几分，你就开始催催了。我一首歌都木有唱完了！” “那你的一首歌的时间可真是够长的了，不去拉倒。10分钟你再不来吗，我们兄弟就自己先去吃了！”说完就立刻挂了。 “这个老王，今天吃错药了。这才几分钟，就把气成这样。不过今天这个天黑的有点早呀，才几分钟的功夫就这么黑。”我不由的一阵的感叹道。 “等等，这个季节天黑的很晚才是。除非要下暴雨，可是刚才还看见晚霞了的。不可能要下暴雨。” 恍惚中感觉到什么不对劲，急忙把小毛驴停下来。打开时间，手机上面赫然显示20：14。这一刻时间静的可怕，“咚！咚！咚！”我的心脏在这一刻急促的跳到着，仿佛挣脱出我的胸膛。 “不！这不可能！”我低吼起来，想要发现什么。可是周围只有一栋栋高耸的小区居民楼，似曾熟悉却又那么陌生。好像每一个方向都可以走到回家路，一层层淡淡的迷雾环绕在四周。一股无形的压力从四周合拢过来，让人几乎都喘不过气来。 “你印堂发黑，有邪气遮住你的额头中的天眼。”林微雪的话再次从我脑子响起来！ “印堂发黑？”我不住的喃喃细语到。 这时我单手举起了我的魅族PRO6手机，小的 ，大不一样。只见魅族PRO6手机背后的10颗环形LED散发一道柔和的光芒笼罩着我，回家的路又清晰可见。 –纪念魅族神转折比赛作品","categories":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/categories/随笔/"}],"tags":[{"name":"神转折","slug":"神转折","permalink":"http://yoursite.com/tags/神转折/"}]}]}