https://kaorz.com/blog/archives/ Recent content in Archives on 伟神的博客 Hugo -- gohugo.io zh-CN hi@kaorz.com (伟神) hi@kaorz.com (伟神) Wed, 05 Oct 2016 00:00:00 +0800 https://kaorz.com/blog/archives/2016-10-05-close-to-coffee/ Wed, 05 Oct 2016 00:00:00 +0800hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2016-10-05-close-to-coffee/ 工作之后，心血来潮，在京东下单了一台灿坤的意式家用半自动咖啡机。自己本身是一个很喜欢喝咖啡的人（一天离开咖啡就浑身不自在），但是经常喝速溶咖啡肯定对健康是不好的，喝星巴克又费钱，所以就入了一台咖啡机。现在已经爱上做意式咖啡这一过程了，同时对自己做的咖啡真心是喝不腻的。 苦于没有人教授，买了咖啡机两个月来，从来没有成功的到达拉花这个步骤。因为每一次奶泡总是打不好，奶泡总是过厚，奶泡和奶不能很好的融合，导致奶泡不够绵密，不够绵密的奶泡是无法进行拉花的，倒出来就是一坨坨的泡沫。趁着国庆这个假日，终于有时间能够好好研究下奶泡的打法，皇天不负有心人啊，下午终于成功了一次，打出来的奶泡是绵密的，很适合拉花（然而拉花失败了，没有把握好注入点）。 现在呢，总结下，打奶泡的过程吧，不要轻视这一过程，原本我也只是以为有个机器，只要打出奶泡就行了，什么事都是一键生成。这两个月随着一盒盒的牛奶钱付之东流，我才明白世界原来不是那么简单的（哭）。打个奶泡也是需要学习的，这真是充分说明了学习能力的重要性~看了那么多视频教程和原理讲解，总算是明白了，心疼前期的二逼打泡技术（还有我的牛奶和咖啡豆钱 T T）。 首先，硬件是必须元素： 意式半自动咖啡机。 咖啡机预热充足，放出蒸汽管中残留的水分，同时蒸汽管的水蒸气稳定 一个 350ml 的拉花缸（取决使用牛奶的量） 其次，原料也是很重要的： 必须使用脂肪含量大于 3.0%的纯牛奶（也叫全脂牛奶） 牛奶在 5 摄氏度下为益（当然不要低于 0 摄氏度） 牛奶多于拉花缸的 3 分之一 然后，打泡的手法： 蒸汽管起先保持在液面上（相切），并且倾斜于液面，蒸汽管的注入点为中心稍微靠人这一侧（不可贴缸壁），斜右上方 45 度靠杯缘处 打开蒸汽，蒸汽管发出嘶嘶的尖叫声（不要吓到，这是没问题的~），这个过程叫做发泡，此时要保证牛奶是在奶缸中小幅度旋转（不是的话，就是注入点错了），这个时候牛奶中的奶泡会越来越多，但是很多都浮在奶泡表面，得到自己想要的奶泡厚度后进入下一步骤（此时牛奶的温度大约 40 摄氏度）。需要注意的是，如果蒸汽管离奶平面太高，奶泡会变巨大；蒸汽管插入太深，就不会有奶泡，只是用花哨的技术加热了牛奶…… 等到奶泡到达你需要的量时，或者温度接近 40 摄氏度，将蒸汽管深入牛奶中，大概 1cm 的深度，此时进入打绵过程。这一过程，主要是让浮在表面的奶泡和底下的牛奶充分融合。注入点稍微往中间靠，依旧 45 度角倾斜，使牛奶旋转起来！此时正确的场景是这样的，牛奶不停的旋转（不跳跃），表面的奶泡在旋转下进入漩涡中间，逐渐消失，奶泡融入了牛奶中。这个过程是没有嘶嘶声的，等到牛奶温度到达 65 摄氏度左右，即可停止了。 最后，还没有结束的，打完的牛奶，呈现的是表面光滑，基本看不见泡泡。通过轻微晃动奶缸，让牛奶和奶泡更均匀，通过奶缸轻震桌面，让大泡泡消失。到这个时候，奶泡就真的完成了。 注意点是： 奶泡和奶是千万不能分离的，要融合 注入点一定要使得牛奶旋转！旋转！旋转！不许跳跃！发泡和打绵都要旋转！！全程旋转，奶泡基本成功~ 可以使用水，滴入洗洁精，观察注入点的流动方向（穷人福利） https://kaorz.com/blog/archives/2016-09-24-probation-summary-in-tencent/ Sat, 24 Sep 2016 00:00:00 +0800hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2016-09-24-probation-summary-in-tencent/ 工作职责： 作为 KM 平台中心开发组的员工，这段时间主要负责 KM 外网产品“乐享”的前端开发工作。其中涉及的工作为 PC 端的页面开发、移动端的 H5 开发、共有组件的开发和抽取等需求。主要表现为利用 jQuery、Seajs、LESS 等技术进行相关页面的数据处理，交互逻辑开发，共有组件的开发；利用 Laravel 等技术进行后台的业务逻辑的开发和维护。 工作成果（主要以开发模块做总结）： 个人空间模块的前端和后台开发 公司首页、K 吧首页、论坛首页的页面改版 共有组件的开发和抽取 不足之处： 与设计师在设计稿的出稿时间上沟通不足，导致开发时间分配紊乱 对需求的一些边界条件考虑不够齐全，出现有时开发中出现重构的问题 改进计划： 分到需求后与设计师提前沟通好出稿时间，对设计工作量大的需求进行开发时间的隔离，避免设计工作量大的需求排在一起，优先级高的需求要优先处理 多与产品进行需求上的沟通，多从产品的角度去思考需求的潜在问题 每天适当空出时间进行新技术的学习 https://kaorz.com/blog/archives/2016-08-15-es6-2-practice/ Mon, 15 Aug 2016 00:00:00 +0800hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2016-08-15-es6-2-practice/ 函数的扩展 ES6 对函数进行了扩展，新的函数支持定义默认值、扩展运算符、写法更加简洁的箭头函数等。 函数参数的默认值（3 种形式） 1.函数默认值 let fn = function (x = 1, y = 2) { return x + y; }; fn(); // 3 // 代替函数体内判断的写法 let fn = function (x, y) { x = x || 1; y = y || 2; return x + y; }; fn(); // 3 2.函数默认值——解构参数 可以通过解构变量来定义函数参数的默认值，减少参数的个数 let fn = function ({ x = 1, y = 2 }) { return x + y; }; fn(); // 3 3. https://kaorz.com/blog/archives/2016-08-07-es6-practice/ Sun, 07 Aug 2016 00:00:00 +0800hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2016-08-07-es6-practice/ 具体的 ES6 语法，可以参考阮一峰老师写的《ECMAScript 6 入门》。 该文章只整理一些实战中很有用的例子。 let&const let 块级作用域变量声明 let基本修复了以往var声明的弊端——变量全局污染，变量声明只在块级作用域中有效，不可重复声明，ES6 同时新增了新的块级作用域{}，一些实用的例子如下： 1.代替原有的闭包创建的块级作用域 { // code } // 代替IIFE写法 (function () { // code })(); 2.解决 for 循环索引变化问题 // 循环结束i被垃圾回收 for (let i = 0; i < 6; i++) {} // 循环结束i的值为5 for (var i = 0; i < 6; i++) {} const 常量声明 const解决了没有常量定义的问题，定义后的常量不能在修改，不可重复声明，同样的，常量声明只在块级作用域中有效，实用例子很简单： const URL = "http://www.google.com"; // 代替一直写js文件最开头的变量模仿常量 window.URL = "http://www.google.com"; 需要注意的问题 let声明的变量不属于window的属性 let foo = 123; console. https://kaorz.com/blog/archives/2016-05-28-jotting/ Sat, 28 May 2016 22:22:00 +0800hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2016-05-28-jotting/ 学校附近一家店有一个外卖小哥，年龄跟我差不多，二十出头，留着军队小兵的平头，皮肤是典型的东方黄，不偏不倚，大眼睛，浓眉毛，身高跟我也差不多，一米七几，说高不算，说矮也勉强，中等身材，约莫 120 斤，130 斤。 小哥平日里负责的是送外卖，主要服务对象也是学校里的学生，每天骑着一辆小电驴，电驴上驾着一泡沫箱装着的外卖，呼呼地穿梭于这几个校区之间。 可能是我名字比较特别，第二次点这家的外卖时，在宿舍楼下见到小哥，像往常一样报了宿舍名。小哥拿起写着我名字的那份，皱了下浓浓的眉毛。 “郑伟柏是吧？你的外卖。"。 “额……对”。 习惯于别人总是叫错我的名字了，我只是愣了下，并没有去更正小哥的话，我想叫错就错吧，也就拿下外卖而已。 接下来的日子里，说来也奇怪。小哥就这样记住了我错误的名字，隔了好长一段时间点他家的外卖，小哥每次送过来，电话接起，对面那头是直接喊起我的名字了。“郑伟柏，你的外卖，麻烦来楼下拿一下！"，“郑伟柏，你外卖到了”，“郑伟柏，外卖在楼下！"…… 小哥不知咋地，叫我名字特勤快，每次隔了大老远，骑着小电驴，就叫我的名字，看了那么多次订单上的我的名字，却没有一次改正叫法，这让我觉得很是有趣。小哥每次都笑的很开心，远远的就看见他咧着大嘴，露出一口白牙，骑着小电驴跑上斜坡来，丝毫 没有因为这份日复一日，年复一年的枯燥工作心烦过。 临近毕业了。这几天下雨，又叫了他家的外卖，想想这应该是最后一次叫他家的外卖了吧！八点钟点的外卖，小哥 8 点 30 分来了电话，依旧是那熟悉的开头。下了楼，不见小哥的身影。过了两分钟，小哥穿着件旧蓝色的雨衣从斜坡上慢慢跑了上来，左手提着我的外卖，大老远的依旧是标志性的表情——咧嘴笑。 “哈哈，我电动车在斜坡下骑到一半没电了！郑伟柏，你的外卖啊！"。 “那你咋回去啊现在，这下大雨的，那电动车可以直接脚踏吧？"。 “哈哈，可以啊，我慢慢骑回去，就你一份而已，无所谓无所谓，送完就下班了都。得了得了哈，我下去牵车走了，再见再见”。 “嘿小哥。"。 “咋啦咋啦？"。 “我名字叫 ABC（这里代指三字姓名），不叫 ACB”。 “嘿，好好好，原来我老叫错了啊，ABC，不管不管，ACB 叫熟了都”。 小哥晃晃悠悠的跑下了斜坡，过会儿渐渐消失在雨中。 再见啦，有趣的外卖小哥。 https://kaorz.com/blog/archives/2015-12-31-read-in-2015/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-12-31-read-in-2015/ 从14年下半个学期开始，养成了读书的这个习惯，从一开始的厌倦到现在的欲罢不能，非常感谢昔日的自己能够坚持这个好习惯，并且让这个习惯成功的转型成了爱好。 以前从来不懂得读书的好处，“读了10本书后，你会以为身边不读书的人都很愚蠢；读了50本书后，你慢慢地发现自己才是最愚昧无知的人；你读的书越多，就越认识到自己的不足~”，这是在某个地方看到的，现在觉得真的很有道理。 既然是读书小结，那就不要太多废话了，直接贴图吧，感谢大神们做出了一个如此好用的豆瓣统计！ 小结 今年读的书有点多啊，70本，读下来觉得似乎有点过了，接下来每年应该保持50本就差不多，不然吸收不了啊！再接再厉！ https://kaorz.com/blog/archives/2016-02-27-notice-chrome-inactive-tab/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2016-02-27-notice-chrome-inactive-tab/ 原生 js 轮播组件的代码在这：https://github.com/wynn719/study-baidu-ife/tree/master/task0002/task0002_3 之前做的时候，会发现轮播在浏览器可见的情况下（没有缩小，没有切换标签），轮播是正常运行的；而当浏览器不可见的情况下（缩小, 切换标签），重新打开页面，轮播会出现几秒钟抽搐（真的很像）的现象，然后又恢复正常运行。 排除了动画逻辑，定时器泄露的问题，偶然情况下，发现 IE 下居然没问题！ 看来崇拜的 chrome 也有抽筋的时候，**即 chrome 在浏览器不可见的情况下（缩小, 切换标签），会把定时器挂起（不会在后台运行），因此重新打开时，挂起的 n 个定时器突然运行，**所以 chrome 就抽风了！ 说了这么多，解决方法很简单，只要监听这个事件 visibilitychange ： // fix chrome下的bug，定时器切换选项卡时被挂起 document.addEventListener("visibilitychange", function () { if (document.visibilityState == "visible") { slide(); // 未挂起时执行轮播 } else if (document.visibilityState == "hidden") { clearInterval(timer); // 挂起时清除定时器 } }); 问题就解决了~ demo 展示在这：http://wynn719.github.io/study-baidu-ife/task0002/task0002_3/task0002_3.html （可恶，这个问题居然困惑了我好久，气煞我也，所以要记录下来……） https://kaorz.com/blog/archives/2015-11-16-pure-css-multiple-lines-truncation/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-11-16-pure-css-multiple-lines-truncation/ 废话不多说，直接讲一下常见的单行截断： <div class="single-line"> For a while I think we have got away with it, but then a flare goes up and we are caught suddenly in broad daylight. </div> .single-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px;/* 给一个宽度限制就可以出现...了 */ } 这个方法在各大浏览器都适用，然而当遇到需要多行截断时问题就来啦，除了粗暴的用后台来根据指定字数truncate掉，或者粗暴的写个jstruncate掉，其实还可以用纯css的方法来实现： <div class="multiple-lines"> For a while I think we have got away with it, but then a flare goes up and we are caught suddenly in broad daylight. </div> . https://kaorz.com/blog/archives/2015-04-26-about-css-layout/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-04-26-about-css-layout/ 等高布局 容器高度随着左右两边的增高而变化 通过padding-bottom: 10000px;和margin-bottom: -10000px;互相挤压，外容器隐藏溢出，形成自适应高度 <div class="wrap"> <div class="left">  页面内容<br/>  页面内容<br/> </div> <div class="center">  页面内容<br/>  页面内容<br/>  页面内容<br/>  页面内容<br/>  页面内容<br/> </div> <div class="right">  页面内容<br/>  页面内容<br/>  页面内容<br/>  页面内容<br/> </div> </div> .wrap { width:100%; margin:0 auto; overflow:hidden; } .wrap:after { content:""; display:block; clear:both; } .left { width:20%; background:Red; float:left; padding-bottom:10000px; margin-bottom:-10000px; } .center { float: left; padding-bottom: 10000px; margin-bottom: -10000px; background-color: yellow; width: 60%; } .right { width:20%; background:blue; float:right; padding-bottom:10000px; margin-bottom:-10000px; } 效果如下： https://kaorz.com/blog/archives/2015-02-16-git-note/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-02-16-git-note/ 创建仓库与初始化 创建新的文件夹，进入文件夹 $ git init 检出远程仓库 $ git clone /path/to/repository $ git clone username@host:/path/to/repository 添加与提交 $ git add <filename> $ git add * $ git commit -m "代码提交信息" 推送到服务器 $ git push origin master $ git remote add origin <server> https://kaorz.com/blog/archives/2015-04-06-html-css2-note/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-04-06-html-css2-note/ 1. border-style : dotted的’dotted’属性不兼容ie6 2. 不同元素的上下外边距margin会叠压，父子级包含的时候子级的margin-top会传递给父级；（内边距替代外边距） 3. word-spacing : 30px 单词间距（以空格为解析单位） 4. 样式优先级 tag(1) < class(10) < id(100) < style行间样式(1000) < js 5. IE6不支持a以外其它任何标签的伪类；IE6以上的浏览器支持所有标签的hover伪类。 6. 行内样式 inline 的特点： 默认同行可以继续跟同类型标签； 内容撑开宽度 不支持宽高 不支持上下的margin和padding 代码换行被解析 7.1 inline-block的特点: 块在一行显示； 行内属性标签支持宽高； 没有宽度的时候内容撑开宽度 7.2 inline-block存在的问题: 代码换行被解析；(代码换行的时候样式会有空隙) ie6 ie7 不支持块属性标签的inline-block; 8. img的默认属性为inline-block，img自带边框（经常在css reset中重置边框为 none） 9. cursor : url(我的鼠标.jpg),pointer;cursor也可以自带图片来模拟鼠标样式，但后面需要附上的默认样式 10. 谨慎使用通配符*，会影响性能 11. clear left/right/both/none 是指元素的某个方向不能有浮动元素 12. 在ie6下高度小于19px的元素，高度会被当做19px来处理,解决办法:给该元素设置overflow:hidden 13. ie6,7的hasLayout属性使得具有宽度的父级子元素不需要清除浮动 14. ie6,7下元素浮动，要并在同一行的元素都要加浮动 15. IE6下的双边距BUG 在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍 解决办法: display:inline 16. IE6，7下li的间隙 https://kaorz.com/blog/archives/2015-10-07-js-for-array-delete-item/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-10-07-js-for-array-delete-item/ 从后台返回的数据经常是以数组的形式传递过来的，开发中遇到的一个小问题，js在处理数组删除时很灵活，故记笔记。 for循环删除数组的某一项，一般的会马上这么写代码： for(var i = 0, len = array.length; i < len; i++){ if (array[i] === number) { array[i].splice(i, 1); } } 但是这样是不行的，因为数组的长度已经改变，这样会造成数组越界，这时可能会想到这样写： for(var i = 0; i < array.length; i++){ if (array[i] === number) { array[i].splice(i, 1); } } 同样也行不通，因为数组的索引变化难以把握 正确的做法： for(var i = array.length - 1; i >= 0; i--) { if(array[i] === number) { array.splice(i, 1); } } 这样可以保证数组 splice 后，循环还按正常的逻辑运行。 当然，如果想保证索引不改变的话，可以使用 ES5 的新操作符 for(var i = 0, len = array. https://kaorz.com/blog/archives/2015-02-15-markdown-note/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-02-15-markdown-note/ Markdown只是一种适用于网络的书写语言，而不是编程语言 兼容 在HTML区块标签间的Markdown格式语法将不会被处理，而在Markdown格式语法里的HTML区段标签是有效的 区块元素 段落 普通段落： 这是一个普通的段落 啦啦啦，将会被转换为p标签 连续的 不连续的\(^o^)/~ 标题 # h1 ## h2 ### h3 ... ###### h6 区块引用 blockquote > Proin eget tortor risus. > Curabitur aliquet quam id dui posuere blandit. 连续区块引用： > Proin eget tortor risus. > Curabitur aliquet quam id dui posuere blandit. > Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. > Donec sollicitudin molestie malesuada. > Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. https://kaorz.com/blog/archives/2016-04-11-how-to-debug-pdo-database-queries/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2016-04-11-how-to-debug-pdo-database-queries/ PDO 提供了一个PDOStatement::debugDumpParams — 打印一条 SQL 预处理命令的调试方法，但是打印出来的结果有点鸡肋，比如说： <?php try { $pdo = new PDO(); $sql = "SELECT * FROM `users` WHERE `username` = ? AND `email` = ?"; $stmt = $pdo->prepare($sql); $stmt->bindParam(1, $username, PDO::PARAM_STR); $stmt->bindParam(2, $email, PDO::PARAM_STR); $username = 'Saul Goodman'; $email = '********@qq.com'; $stmt->execute(); $stmt->debugDumpParams(); } catch (PDOException $e) { echo $e->getMessage(); } // 结果很感人： // SQL: [58] SELECT * FROM `users` WHERE `username` = ? AND `email` = ? // Params: 2 // Key: Position #0: // paramno=0 // name=[0] "" // is_param=1 // param_type=2 // Key: Position #1: // paramno=1 // name=[0] "" // is_param=1 // param_type=2 ? https://kaorz.com/blog/archives/2015-03-27-web-seo/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-03-27-web-seo/ SEO的基础知识 SEO的类别 黑帽 SEO（欺骗） 白帽 SEO（正规） 黑帽SEO 通过罗列与网站无关的关键字，或者不良关键字，来欺骗搜索引擎来增加网站的访问率 白帽SEO 网站标题、关键字、描述。 网站内容优化。增加长尾关键字，增加关键字密度。 Robot.txt 文件。 网站地图。 增加外链引用。到各个网站上宣传。 网站地图 一个网站所有链接的容器。很多网站的连接层次比较深，蜘蛛很难抓取到 ，网站地图可以方便搜索引擎蜘蛛抓取网站页面，通过抓取网站页面，清晰了解网站的 架构，网站地图一般存放在根目录下并命名为sitemap，为搜索引擎蜘蛛指路，增加网站 重要内容页面的收录。网站地图就是根据网站的结构、框架、内容，生成的导航网页文 网站地图网站地图件。大多数人都知道网站地图对于提高用户体验有好处：它们为网站 访问者指明方向，并帮助迷失的访问者找到他们想看的页面。 网站结构布局优化 控制首页链接数量（中小型网站建议一百个左右） 扁平化的目录层次（使内容的跳跃尽量不超过三次，尽量三次就能到达目的地） 导航的SEO优化（主导航，副导航，加入面包屑导航（导航尽量用文字表示，图片也要加上alt和title等属性）） 不可忽略的细节：LOGO，导航条，分页目录，页面大小 面包屑导航 让用户了解当前所处的位置 使用户可以了解网站的组织形式，提高抓取，降低跳出率 类似于：首页>篮球>NBA 这种形式的放在页首的超链接 分页目录（SEO效果逐级增强） 首页-上页-下页-尾页 首页 1 2 3 4 5 下一页 首页 1 2 3 4 5 ·下拉框· 代码上的SEO优化 在搜索引擎得到高度重视 ：在seo没有起到很好的效果 ：重要程度仅次于strong title:只强调重点，不要重复出现；每个页面不设置相同的title meta keywords:不要堆砌 meta description:每个页面都要不同 语义化代码，详见HTML5 重要内容HTML代码放在最前面。小蜘蛛抓取内容是从上到下 重要内容不要用JS输出。 小蜘蛛看不懂js 谨慎使用display:none;可以把他放到外面 精简代码。 友情链接上的优化：给a标签添加rel=“nofollow"属性，防止蜘蛛跳转到别的网站 <a href="www.qq.com" rel="nofollow" title="腾讯">腾讯</a> 让br标签只出现在p标签中 <p><br/></p> HTML5 语义化: https://kaorz.com/blog/archives/2015-09-5-sticky-footer/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-09-5-sticky-footer/ 开发中经常会碰到的一种情况是：由于页面的内容不够长，无法撑开页面，导致底部的模块下面留下一大块空白，实在不雅，sticky footer 技术解决了这个问题 1.页面结构： <div class="page-wrap"> <div class="header">header</div> <div class="content"> <button id="add">Add Content</button> </div> </div> <div class="site-footer">footer is!</div> 2.css：因为此处使用到了 after 伪元素，所以也就意味着 IE7 以下是无法使用该方法的 * { margin: 0; padding: 0; } html, body { height: 100%; /* 注意，这是必须的 */ } .header { height: 100px; background-color: #ffff80; } .page-wrap { min-height: 100%; margin-bottom: -150px; /* 必须与footer高度相等 */ } .page-wrap:after { content: ""; display: block; height: 150px; } .site-footer { height: 150px; } . https://kaorz.com/blog/archives/2015-04-21-yahoo-best-practices-for-speeding-up-web-site-/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-04-21-yahoo-best-practices-for-speeding-up-web-site-/ 看完之后很多还是似懂非懂，估计等到有相应的项目做的时候，遇到某些点就会恍然大悟吧！ 规则1——减少HTTP请求（Minimize HTTP Requests） 只有10%～20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%～90%时间都花在HTML文档所引用的所有组件（图片、脚本、样式表、Flash等）进行的HTTP请求上。因此，改善响应时间最简单的办法就是减少组件数量并由此减少HTTP请求数。减少组件数量通常会和产品设计的初衷相矛盾，因此，此处给出了一些技术： 图片地图（Image Maps）联合多个图片到一个单独的图片中。下载图片大小的总和保持不变，但是，通过减少HTTP请求数的方式加速了页面。图片地图适用于导航栏或其他超链接中使用多个图片的情形。但是，在定义图片地图上的区域坐标时，如果采用手工方式很难完成且容易出错，而且除了矩形外几乎无法定义其他形状。 CSS Sprites使用CSS background-image和background-position属性将多个图片联合成一个独立的图片来显示。它通过合并图片减少了HTTP请求，并且比图片地图更加灵活，同时也降低了图片的下载量。如果在页面中需要为背景、按钮、导航栏、链接等提供大量图片，CSS Sprites是一种优秀的解决方案。 内联图片（Inline images）使用data: URL scheme模式将图片嵌入到HTML文档中。通过此模式嵌入图片，不需要任何额外的HTTP请求开销。但是，目前的主流浏览器（主要是IE）不支持此种方式。 合并文件（Combined files）通过将所有JavaScript脚本合并到一个文件，所有CSS样式表合并到另一个文件的方式来减少HTTP请求的数量。但是简单的合并通常会遇到模块化、页面变化等问题，需要根据页面引用脚本和样式表来具体分析以确定具体的组合方式。 规则2——使用内容发布网络(CDN)（Use a Content Delivery Network） 用户同Web服务器的距离会对页面响应时间产生影响。网站最初通常将其所有服务器放在同一个地方，当用户群增加时，公司必须面对服务器放置地点不再合适的事实。因此，有必要在多个地理位置不同的服务器上部署内容。 作为实现地理位置分离的第一步，不应当首先尝试使用分布式架构重新设计Web应用程序。这样的应用程序决定了重新设计将带来如同步会话状态、在服务器放置地点间复制数据库事务等复杂问题。重新设计会推迟甚至根本无法实现缩短用户和网站内容距离的愿望。 如果应用程序Web服务器里用户更近，则一个HTTP请求的响应时间将被缩短；如果组件Web服务器离用户更近，则多个HTTP请求的响应时间将缩短。因此，与其重新开始设计应用程序，以便将应用程序Web服务器分散开，不如首先将组件Web服务器分散开。这不仅能达到响应时间大幅减少的目的，还很容易实现。 内容发布网络（CDN）是一组分布在多个不同地理位置的Web服务器，用于更加有效的向用户发布内容。向特定用户发布内容的服务器基于对网络可用度的测量，例如，CDN可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。 除了缩短响应时间外，CDN还可以带来其他优势，包括备份、扩展存储能力和进行缓存；同时，CDN还有助于缓和Web流量峰值的压力，如在获取天气或股市新闻、浏览体育或娱乐事件时。依赖CDN的一个缺点是网站的响应时间会受到其他网站——甚至可能是竞争对手流量的影响；另一个缺点是无法直接控制组件服务器所带来的问题。 CDN用于发布静态内容（如图片、脚本、样式表、Flash）。提供动态HTML页面会引入特殊的存储要求——数据库连接、状态管理、验证、硬件和OS优化等，这些复杂性超过了CDN的范围。另一方面，静态文件更容易存储并具有较少的依赖。 规则3——添加Expires头（Add an Expires or a Cache-Control Header） Web页面包含大量组件，并且数量在不断增长。页面的初访者会进行很多的HTTP请求，但通过一个长久的Expires头，可以使这些组件被缓存下来，可以在后续的页面浏览中避免不必要的HTTP请求。长久的Expires头最长用于图片，但应该将其用于所有组件上，包括脚本、样式表和Flash。 Web服务器使用Expires头告诉Web客户端它可以使用一个组件的当前副本，知道指定时间为止。HTTP规范中简要的称该头为“在这一日期/时间之后，响应将被认为是无效的”。例如： Expires: Thu, 15 Apr 2010 20:00:00 GMT 告诉浏览器该响应的有效性持续到2010年4月15日。 因为Expires头使用一个特定的时间，它要求服务端和客户端的时钟严格同步；另外，过期日期需要经常检查，一旦过期日期到了，需要在服务器中配置提供一个新的日期。所以，HTTP1.1引入了Cache-Control头来克服Exipres头的限制。Cache-Control使用max-age指令指定组件被缓存多久，它以秒为单位定义了一个更新窗。使用带有max-age的Cache-Control可以消除Expires的限制，但对于不支持HTTP1.1的应用，仍希望使用Expires头。可以同时制定这两个响应头，如果两者同时出现时，HTTP规范规定max-age指令将重写Expires头。 当出现了Expires头时，直到过期时间为止一直会使用缓存的版本，浏览器不会检查任何更新，直到过了过期时间。为了确保用户能够获取组件的最新版本，需要在所有的HTML页面中修改组件的文件名。Yahoo在此使用了将版本号嵌入在组件的文件名中的方法。 规则4——压缩组件（Gzip Components) 注意：在HTTP响应头中可以看到返回的内容通过Gzip算法进行了压缩 压缩组件通过减少HTTP请求产生的响应包的大小，从而降低传输时间的方式来提高性能。从HTTP1.1开始，Web客户端可以通过HTTP请求中的Accept-Encoding头来标识对压缩的支持： Accept-Encoding: gzip, deflate 如果Web服务器看到请求中的这个头，就会使用客户端列出的方法中的一种来压缩响应。Web服务器通过响应中的Content-Encoding头来通知Web客户端： Content-Encoding: gzip 目前许多网站通常会压缩HTML文档，脚本和样式表的压缩也是值得的（包括XML和JSON在内的任何文本响应理论上都值得被压缩）。但是，图片和PDF文件不应该被压缩，因为它们本来已经被压缩了。 压缩通常能将响应的数据量减少近70%，但是压缩通常情况下会带来服务端和客户端的CPU开销，要检测受益是否大于开销，需要综合考虑响应大小、连接的带宽和客户端也服务端直接的距离等因素。通常需要对大于1KB或2KB的文件进行压缩。 当浏览器通过代理来发送请求时，有可能出现浏览器期望接受的压缩后内容和实际接收到的不一致的情况。解决这一问题的方法是在Web服务器的响应中添加Vary头。Web服务器可以告诉代理根据一个或多个请求头来改变缓存的响应。由于压缩的决定是基于Accept-Encoding请求头的，因此需要在服务器的Vary响应头中包含Accept-Encoding: Vary: Accept-Encoding 目前大约90%的通过浏览器进行的Internet通信都需要使用gzip，使得服务端和客户端的对等性变得额外重要。无论是客户端还是服务端发送错误，都会造成页面被破坏。避免错误的一种方式是采用“浏览器白名单”方式，即只为经过证实支持压缩的浏览器提供压缩内容，但是当代理缓存加进来以后，处理边缘情形浏览器将变得更加复杂。另一种方式是使用Vary: *或Cache-Control: private头来禁用代理缓存。此种方式会为所有浏览器禁用代理缓存，从而增加带宽开销。如何平衡压缩和代理支持需要在加快响应时间、减小带宽开销和边缘情形浏览器缺陷之间进行权衡： 如果网站的用户很少，并且他们处于一个小圈子中，边缘情形浏览器不需要太多关注，可以压缩内容并使用Vary: Accept-Encoding。 如果更注重带宽开销，可以和前一种情形一样，压缩内容并使用Vary: Accept-Encoding。 https://kaorz.com/blog/archives/2015-03-22-jotting/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-03-22-jotting/ 一直觉得自己在人际交往方面有很大的缺点，嘴笨的人总是容易说错话，经常会有因为不善于表达而造成一些不必要的误会，也因为不善于交际，而错失很多让自己变得更加优秀的机会。 很大的缺点，也就表示还有很大的提升空间。这些年一直在这方面做着努力，虽然性格决定，收效甚微，但还是看到了一点点变化。从以前或是愣愣的发呆看着别人聊天，或是不经思考开口时的结结巴巴，或是交流结束后对自己言语的后悔，逐渐转变为在思考后去行动的模式。开始尝试在脑海里去琢磨自己的一言一行，然后在尝试着去组织自己的言论；开始在说错话后思考为什么会有后悔的心理，后悔的原因是什么。 今天恰好看到一篇文章，谈论的是人在有基本的礼貌和社交礼仪的情况下，当一个内向的人并不是不可取的。豁然开窍~ 一个标榜自己不善于交际的人，如果不具备做人所应有的基本的礼貌，那这个人是否不是一个内向的人，而是一个缺乏自信的人？ 在承认自己是否为内向的人的时候，只有先看清自己的本质，才能对症下药吧！ 基本的礼仪，或者说基本的礼貌是什么，知乎（感觉怎么变成搜索引擎了……）上面有一些很好的回答，贴在此，以警示自己，努力成为一个彬彬有礼亦不卑不亢的人~ 知乎推荐：哪些礼仪是一个人必备的？ https://kaorz.com/blog/archives/2015-12-15-my-2015-and-2016/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-12-15-my-2015-and-2016/ 最近读了一本书，松浦弥太郎的《今天也要用心过生活》，书里的道理总是很简单，印证那句老掉牙了的话：道理我都懂，但依然过不好这一生。突然想到，道理明明很简单，我缺乏的是主观能动性吧。生活本可以常驻新鲜，在看不到的地方保持自己的天真，curiosity，小孩子的天性，人长大后就没了，人也衰老的越来越快，心也就变硬了。 2015年快过去了，不管过的好不好，2016年终将来临。我想借由这本书的内容审视下2015年的自己，2015年所做得不好的地方要一一对自己指出，然后给2016年的自己好好指点一下迷津，让2016年的我活得更加有意义。 以下是书的内容和对自己的审视： Chapter 1 健康的早餐 每天的自我改造 2015：会尝试着学习一些小知识，小技能来丰富自己的生活，但持续性不好，一年下来不到100天 2016：一天中花时间学习小的爱好，争取做到持续时间大于150天 “早安”的功效 2015：经常会回避那些自己不喜欢接近的人（除去一些因为三观不合而不像认识的） 2016：多尝试主动与他们沟通，减少尴尬 让自己从容的一小时 2015：经常给自己独处的空间，这个做得挺好 2016：可以把这一小时从早起中抽出，继续保持 发现快乐，用心下功夫 2015：缺乏在小事中找快乐的能力 2016：如果感到做这件小事能够开心，那就尽管去做吧 发现全新自己的捷径 不认同，略过。 清洁的自信 2015：做得挺好的 2016：继续保持 起而行的行动家 2015：经常犹犹豫豫，但事后发现事情明明可以很快就做好决定，而且收效更好 2016：忌讳犹豫不决，从简单的事情开始做，小事在10分钟之内决定好，大事在1个小时到半天内决定好 自在的节奏 2015：对自己的生活节奏和工作节奏把握的不是很好，多半是因为情绪的波动导致自己节奏被打乱，没有注意合作伙伴的节奏，比如有时候容易打扰到别人，没有事先沟通好交流时间 2016：需要注意调整自己的节奏，同时也要注意合作伙伴的节奏，切勿心急 用心吃饭 虽然没有自己亲手去做饭，但一直很用心的吃饭，略过 优雅的握筷方式 不认同，略过 干净的姿态 2015：作为一个coder，虽然仪表是弄得比较整洁，但是姿态总是不够干净利落 2016：保持仪表整洁干净的同时，要多健身多锻炼，保持姿态的自然，落落大方，多注意不要弯腰驼背，坐下时不要老是头前倾 遇见“老师” 2015：遇到一些行为举止不雅的人，太容易意气用事了 2016：把那些你所厌恶的人和行为当作你自己的“老师”，有则改之，无则加勉，看不惯的东西，笑笑而过就好了 让笑容为生活保鲜 做得挺好的，继续保持 今天也要用心生活 2015：每个人都从内心里抗拒新事物的发生，抗拒面对新事物，有时候我会很喜欢去尝试新事物，但有的时候还是太畏畏缩缩，容易因为情绪失控而厌倦面对新事物 2016：年纪越大，越要有勇气挑战新事物，从小事调整开始，尝试着去学习身边每一个细微的事 Chapter 2 上乘的午餐 分享喜悦 2015：这可以说是我2015甚至是活到现在一直做不好的事情，天生不喜欢和别人分享感情，缺乏与他人的互动，也可以说是社交上的一大败笔 2016：尝试着给他人提供自己的快乐，开心的时候可以适当的分享给他人，可以是愉快一笑，也可是侃侃而谈，但要记住分享要把握尺度，既不要全部敞开，也不要过于封闭自己 “给予”的规模 做的挺好的，继续保持 在破裂之时，才真正开始 坏的东西修了继续用，我不喜欢这样，坏了就让它过去，除非是珍贵的东西，不然的话，让新的到来算是给自己带来一点喜悦感；即时是人也好，不是特别珍贵的，不希望花太多时间去修复，拆了东墙补西墙 人机关系的养成 2015：人之忌，好为人师也。人们在向他人传授独有的知识时，总是特别的兴奋，以至于得意忘形，不知分寸。传道授业，也要人之所愿，有时候自己也会犯这样的错误，遇到自己知道而别人不知道，倾向于得意忘形，给人难堪，别人下不了台阶 2016：在别人不懂的情况下，不要当面拆穿别人，可以私底下指出，给人留有余地，切勿在公共场合宣扬别人的不知，得一时之快而丢长久之和。 马卡龙沟通法 小礼物是好，但不一定所有人都喜欢，偶尔为之甚好，多则不宜 成全对方——开口的艺术 2015：在平常的偶遇中，有时候不喜欢直面他人，失去了给他人开口的机会 2016：眼神坚定点吧，抬起头来微笑着面对对方，兴许对方真的有什么话想对你说 干脆地道歉 大多数情况下，错误我都会认错，脸皮厚了好多哈哈，继续保持 凛然的诚实 现在慢慢的没有对别人有轻易下结论的习惯，挺好的，继续保持 留有余地的约定 2015：没有很好的区分生活的约定与工作的约定，容易过度，也容易节制 2016：生活的约定，要找到双方的妥协点，给对方留有余地，而不要咄咄逼人；工作的约定，严肃对待，有余地，但是一定要执行 谎言的尾巴 https://kaorz.com/blog/archives/2015-03-20-jotting/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-03-20-jotting/ 从大二下学期偶然的机会，一个朋友推荐我知乎这个软件后，就导致了现在的三天一小窥，五天一沉沦。那些博学多才，见多识广的大牛们，总是让你佩服得五体投地。不管是什么领域上都会有那么个独特的人能够交出自己的满腹经纶，大到国际局势，小到街边琐事，即使是一句不经意的调侃，也会让你由衷地崇拜~ 逛多了知乎，自卑多了心。于是乎，我也开始向往着能够成为那么一个有才识又风趣幽默的人。在获取知识的路上屡屡碰壁，才发现才识对于我这个普通本科院校的低智商高等动物来说实在难于上青天~ 于是乎，我开始努力地，使劲吃……吃奶的力气把自己往幽默风趣的地盘上扔，才发现，幽默风趣居然也一脚把我踹到了门外边，而且连门都懒得关。才明了，即使是低俗不堪的黄段子，也需要有一嘴铁齿铜牙来驾驭。 小人物的故事都是平平凡凡的，可当一个小人物开始去思考，我是谁，我从哪里来，我要到哪里去时，那么这个小人物呢，也还是一个小人物……可小人物有了思考之后，就变身成了一个高效率的小人物，而高效率的小人物是什么呢，那就要问问屎壳郎推粪球的速度提升了一倍是怎么样的体验~ https://kaorz.com/blog/archives/2015-04-06-ie-compatibility/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-04-06-ie-compatibility/ 本文涉及的代码要放在IE 6，IE 7和IE 8下运行，与标准浏览器进行对比 推荐使用IE浏览器测试程序 IE tester 常见问题 1. 在IE6元素浮动，如果宽度需要将内容撑开，就给里边的块元素都加浮动 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .box{ width:400px;} .left{background:red;float:left;} .right{float:right; background:blue;} h3{margin:0;height:30px; float:left;}/*如果不加浮动，ie6下元素不会撑开*/ </style> </head> <body> <div class="box"> <div class="left"> <h3>左侧</h3> </div> <div class="right"> <h3>右侧</h3> </div> </div> </body> </html> 2. 在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> /* 由于.right没有加浮动，ie6下就会出现间隙啦 */ .left{width:100px;height:100px;background:Red; float:left;} .right{width:200px;height:100px;background:blue;margin-left:100px;} </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"></div> </div> </body> </html> 3. https://kaorz.com/blog/archives/2015-06-18-javascript-scope-note/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-06-18-javascript-scope-note/ 学习任务来自：百度ife前端技术学院 学习资料参考自： 28 May 09 Javascript作用域原理 JavaScript 开发进阶：理解 JavaScript 作用域和作用域链 javascript的作用域链 javascript中的函数运行在她们被定义的作用域里，而不是它们被执行的作用域里 – 《javascript权威指南》 注意：在JS中，作用域的概念和其他语言差不多， 在每次调用一个函数的时候 ，就会进入一个函数内的作用域，当从函数返回以后，就返回调用前的作用域. javascript中作用域的实现方式与C/C++不同，不是使用“堆栈”的方式，而是使用列表，实现过程如下（ECMA262）： javascript高级程序设计3中，指出函数的执行环境是保存在环境栈中的，执行完函数后，会把函数环境弹出栈 ……为何不一样的说法啊（高程中没有探讨到[[scope]]上） 作用域链（scope chain）：保证对执行环境有权访问的所有变量和函数的有序访问。 任何执行上下文时刻（context）的作用域，都是由作用域链（scope chain）来实现的。 在一个函数被定义的时候，会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性。 在一个函数对象被调用的时候，会创建一个活动对象（object），然后对每一个函数的形参（arguments），都命名为该活动对象的命名属性，然后将这个活动对象做为此时的作用域链（scope chain）最前端，并将这个函数对象的[[scope]]加入到scope chain中。 解析这个例子： var func = function(lps, rps){ var name = 'laruence'; ........ } func(); 它的解析过程是这样的： 定义name 定义func时： func的[[scope]]创建，[[scope]]指向window对象 [[scope]]链接到scope chain上 执行func时： 创建活动对象funcObj（预编译时创建，假设是这个名字） 创建arguments对象，添加lps和rps属性 定义局部变量name=‘laruence’ 定义其他… 运行函数，发生标识符解析时，逆向（从作用域链最前端）开始查找funcObj的每一个属性，找到返回，找不到，返回undefined 下一个例子： var name = 'laruence'; function echo() { alert(name); } function env() { var name = 'eve'; echo(); } env(); 运行结果： https://kaorz.com/blog/archives/2015-06-20-javascript-prototype-note/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-06-20-javascript-prototype-note/ 学习任务来自：百度 ife 前端技术学院 学习资料参考自： JavaScript 探秘：强大的原型和原型链 理解 JavaScript 原型 深入理解 javascript 原型和闭包 个人注：主要是区分Prototype,prototype,__proto__,[[Prototype]]，理解constructor Prototype：原型本尊 prototype：原型属性，指向Person，实例中不存在 __proto__：原型访问器，指向 创造该对象 的原型 [[Prototype]]：等同于__proto__ constructor：构造函数，指向函数本身（如 new Person)，constructor.prototype也指向Prototype javascript 原型和原型链 对象中的proto属性（隐式原型，javascript 并不希望我们访问到该属性） 每当创建一个对象，该对象就会有一个__proto__属性，该属性指向创建该对象的函数的原型 如下代码中： var foo = { x: 10, y: 20, }; 当我们创建了一个 foo 对象，foo 对象的__proto__属性就会指向 foo 的原型Prototype；同时 foo 的Prototype也是一个对象，它也有__proto__，指向Object.prototype；在同时，Object.prototype的__proto__指向null。因此，可以说是个对象就有__proto__属性！ 而且，对象是沿着__proto__这条原型链来走的！！！ constructor 属性 function Foo(y) { this.y = y; } Foo.prototype.x = 10; Foo.prototype.calculate = function (z) { return this.x + this.y + z; }; var b = new Foo(20); alert(b. https://kaorz.com/blog/archives/2015-06-24-javascript-constructor-note/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-06-24-javascript-constructor-note/ constructor 是什么 当我们创建一个构造函数时，就会创建一个 constructor 的属性 function Foo() { this.name = "Jimmy"; } // 实例化对象 var foo = new Foo(); console.log(Foo.constructor); // Function() console.log(Foo.prototype.constructor === Foo); // true console.log(foo.constructor); // Foo() console.log(foo.constructor === Foo); // true 由于 Foo 本身是由 Function 创建的，所以 Foo 的 constructor 就自然而然的指向了 Function()，而 foo 是由 Foo()创建的，所以 foo 的 constructor 就指向了 Foo，即 constructor 默认指向创建自己的函数。 要注意的是，Foo.prototype.constructor 也指向 Foo，其实就是一个循环引用,Foo 的 prototype 属性指向 Foo 的原型，然后 Foo 的原型的 constructor 属性指向 Foo 即：Foo.prototype -> Foo 原型，Foo 原型的 constructor -> Foo https://kaorz.com/blog/archives/2015-06-26-javascript-design-patterns-note/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-06-26-javascript-design-patterns-note/ https://kaorz.com/blog/archives/2015-06-22-javascript-closure-note/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-06-22-javascript-closure-note/ 学习任务来自：百度ife前端技术学院 学习资料参考自： 闭包 深入理解javascript原型和闭包 在经过前面作用域和原型、原型链的学习，感觉遇到闭包也不怕啦… 准备被虐杀！ 先补全一些作用域上的知识： 自由变量 在A作用域中使用的变量x，却没有在A作用域中声明（即在其他作用域中声明的），对于A作用域来说，x就是一个自由变量。 例如： var x = 10; function fn(){ var b = 20; // x不在fn的作用域中声明，但却调用了 // 因此x叫做自由变量 console.log(b + x); } 一个经常容易犯错的例子： var x = 10; function fn() { console.log(x); } function show(f) { var x = 20; fn(); } show(); // 10 这个例子中，输出的不是20，而是10，因为在函数定义的时候就已经决定了函数的上下文执行环境，故，fn的作用域链上，只能找到window执行环境下的变量x 另一个例子： var x = 10; function fn(){ console.log(x); } function show(f){ var x = 20; (function(){ f(); })() } show(fn); // 10 很抱歉，还是10，原理同上~ https://kaorz.com/blog/archives/2015-06-24-javascript-oo-note/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-06-24-javascript-oo-note/ javascript 不具有其他语言的类，继承等的特性，因此 javascript 的面向对象编程更多的是基于构造函数和原型的方式实现类的功能；基于原型链来实现类的继承；基于闭包的原理来实现私有化； 当然也有非原型链的继承，如 jquery 中使用的对象拓展(extend)，通过对对象的 深度复制来实现。 javascript 面向对象编程 javascript 本身不具有类的特征，那如何模拟类的特征呢？ 一些好的尝试，但不够完美 在此之前，有工厂模式，有构造函数模式，但都存在着一些大的问题： 工厂模式的问题：无法识别对象是由谁创建的 构造函数的问题：在创建每个实例时，构造函数给每个实例的新建了方法，即使该方法本身是一模一样的，而面向对象的思想并不希望方法是一样的但是却要重复的创建，这本身浪费内存空间 原型模式 为了解决工厂模式和构造函数模式的问题，于是有了原型模式 把共享的变量和方法都放到原型上，然后让子类的原型与父类的原型建立关系，就实现了原型式继承 代码如下： function Person(){} // 定义要共享的方法 Person.prototype.name = 'Jimmy'; Person.prototype.sayName = function(){ console.log(this.name); } // 或者另一种写法 Person.prototype = { constructor: Person, // 不要忘记修正constructor指向 name : 'Jimmy', sayName = function() { console.log(this.name); } } 但是原型模式也存在着一些问题： function Person() {} // 定义要共享的方法 Person.prototype.name = "Jimmy"; Person.prototype.sayName = function () { console.log(this.name); }; // 或者另一种写法 Person.prototype = { constructor: Person, // 不要忘记修正constructor指向 name: "Jimmy", sayName: function () { console. https://kaorz.com/blog/archives/2015-06-12-ife-task0002-util-001/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-06-12-ife-task0002-util-001/ 学习任务来自：百度ife前端技术学院 任务二 trim 正确的实现： 问题：应该用字符来代替 ，chrome下\s可以匹配全角空格，但是考虑兼容的话，需要加上\uFEFF\xA0，去掉BOM头和全角空格。 function trim(str) { // 此处 \\s 等是为了去除带转义字符的字符串，如 ' \s 19 ' var re = new RegExp('(^[\\s\\t\\xa0\\u3000]+)|([\\u3000\\xa0\\s\\t]+\x24)', 'g'); return String.prototype.trim ? str.trim() : str.replace(re, ''); // MDN 的做法 // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/Trim // return String.prototype.trim ? str.trim() : str.replace(/^\s+|\s+$/g,''); } 注意： \xa0 表示不换行的空格 \u3000 表示中文全角空格 \x24 表示$ isEmail 我的实现： function isEmail(emailStr) { if (typeof emailStr ==='string') { var re = /^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$/i; return re.test(emailStr); } } 问题：无法识别lj.meng@s.baidu.com这种类型的邮箱 https://kaorz.com/blog/archives/2015-02-13-my-blog-version1.0-description/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-02-13-my-blog-version1.0-description/ 博客 1.0 哈哈，历经千幸万苦（其实也就是花了几天的时间……），我的博客的第一个版本终于完成了！！！（其实也就是一个十分简易，简陋的小博客……） 这几天各种google资料，真的是累得够呛，其实总结了下也不是很难，只是英文不行，一堆的英文资料看着头就大了，加上断断续续的家里总有一些事发生，没能够在连续的时间段里（感觉有程序猿的调调）完成博客的基本功能，所以才拖了这么久~ 现在！总结一下这个博客完成的过程…… Github账号是必不可少的 学习Git相关知识 在Github提供的主机上搭建jekyll模板 学习Markdown语言 学习Liquid语言模板 完成博客的基本主题 加入disqus评论功能 加入代码高亮 搞定啦！！！！！！！（原来这个过程这么短的啊……为何我搞了那么多天） 辛苦总是有回报的T T 先说到这里吧~（我也不知道说点啥好啊我去，等这一刻等得那么艰苦……） https://kaorz.com/blog/archives/2015-09-3-about-tencent-internship/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2015-09-3-about-tencent-internship/ 转眼间，我已经在腾讯实习了两个月了。 回想起今年4月，BG叫我一起去报腾讯的校招，我当时很犹豫，总觉得自己的能力还不足以去腾讯实习。“去看一看笔试考什么也好啊，就当做是练练胆，为以后做准备嘛。”，当时BG是这样跟我说的，然后我就抱着看笔试题的心态跑去笔试了（汗……） 4人的小分队跑去腾讯笔试，全部都通过了笔试，其实我笔试写得不怎么好，也不知道是为什么就过了……一面的面试官，也就是我现在的leader，面了有30分钟，全部都问的是前端的知识，可能跟我的简历有关吧（简历上除了前端相关的就没有别的了，还要说一句，简历真的是粗制滥造啊，跟旁边一群简历弄得漂漂亮亮的小伙伴们比起来真是相形见绌啊!=_=）,面完后的第一感觉就是–结束了。当时还很庆幸有过来面试，leader给了我很多前端学习的建议。然而，过了好几天，居然被通知面试过了，当时没有很开心，反而是更担忧了…… 二面，4人小分队只剩下3个人，雪糕弟掉队了~二面之前，我翻了翻网上别人写的腾讯二面经历，妥妥的技术面，全方位知识各种考验。可是二面的面试官却出乎了我的意料，到了之后，没怎么问技术的问题，只是问了我对前端的认识，我就噼里啪啦的说了一堆。30分钟的面试，剩下的5分钟都是在问我能够实习多久的事，真的吓坏我了！我还是以为结束了，然而，过了好几天，又被通知三面。 三面只剩下2个人了，就是我和BG。HR面，聊人生，聊思想，聊性格，聊未来……是的，HR面就是在聊天，HR人很好，见我有点紧张，一进来就帮我拿书包和推椅子，是的，我更紧张了~HR在我临走之前还是给了我一些鼓励，让我很惊讶，当时就觉得腾讯的人真的好好，情商都好高。 剩下的日子，很多小伙伴都是在担忧中度过。对于我，其实挺无所谓的，毕竟面试给我带来了挺多的知识，或许是这种淡然的态度，给我迎来了这次实习的机会。 很凑巧，最后一轮面试，只有我通过了，每一轮走一个小伙伴，真的让我很不舒服，很希望能更他们一起实习。 转眼间在腾讯实习了两个月，又到了腾讯校招的时候了，小伙伴们也重新踏上了这条路，有时候会想，要是当时我没有去报名，那今天的我也不会有这么大改变，或许还是默默无为~真的是验了一句话——不逼自己一把，永远不知道自己有多厉害。 每年母上总会去帮四个孩子求签，而我每年都有四个字——戒骄戒躁，望自己能践行。 https://kaorz.com/blog/archives/2016-06-18-read-backbonejs-source-code-3/ Mon, 01 Jan 0001 00:00:00 +0000hi@kaorz.com (伟神) https://kaorz.com/blog/archives/2016-06-18-read-backbonejs-source-code-3/ 订阅-发布模式 Backbone.js最吸引人的基本上就是事件对订阅-发布模式（pub/sub）的使用了，一个典型的Backbone例子如下： // 新建一个model var Person = Backbone.Model.extend({ ... }); var person = new Person({}); // 绑定人名变更事件（订阅） person.on('callme', function () { alert('wayne'); }); // 修改人名，触发事件（发布） person.trigger('callme'); // 此时会弹出'wayne'的信息 // 解除事件绑定（取消订阅） person.off('callme'); person.trigger('callme'); // 什么都不执行 有了这个模式，我们就可以做到一些比较节省工作的事情，一个典型的应用场景——在线笔记： 用户在笔记的其中一个分类 backbone学习 点击添加一个新的笔记并保存 保存成功，笔记总数+1 使用jQuery的大致实现过程如下： $('#save-btn').click(function() { // 保存笔记 $.ajax(function() { success: function() { changeCount(); } }); };); 看着似乎没什么问题，但是如果需求改变了，比如变成这样： 用户在笔记的其中一个分类 backbone学习 点击添加一个新的笔记并保存 保存成功后，笔记总数+1、笔记编写界面刷新、本地笔记缓存同步、服务器缓存同步、自动分享到团队笔记中。。。 这个时候代码会变成这样： $('#save-btn').click(function() { // 保存笔记 $.ajax(function() { success: function() { dataView.changeCount(); noteView.refresh(); local.