微醺岁月
微醺岁月
**本文首发我的个人博客：[前端小密圈](http://qdxmq.com/)，评论交流送1024邀请码，嘿嘿嘿😄。** 来自朋友去某信用卡管家的做的一道面试题，用原生`JavaScript`模拟`ES5`的`bind`方法，不准用`call`和`bind`方法。 至于结果嘛。。。那个人当然是没写出来，我就自己尝试研究了一番，其实早就写了，一直没有组织好语言发出来。 额。。。这个题有点刁钻，这是对`JavaScript`基本功很好的一个检测，看你`JavaScript`掌握的怎么样以及平时有没有去深入研究一些方法的实现，简而言之，就是有没有折腾精神。 不准用不用`call`和`apply`方法，这个没啥好说的，不准用我们就用原生`JavaScript`先来模拟一个`apply`方法，感兴趣的童鞋也可以看看`chrome`的`v8`怎么实现这个方法的，这里我只按照自己的思维实现，在模拟之前我们先要明白和了解原生`call`和`apply`方法是什么。 简单粗暴地来说，`call`，`apply`，`bind`是用于绑定`this`指向的。（如果你还不了解JS中this的指向问题，以及执行环境上下文的奥秘，这篇文章暂时就不太适合阅读）。 ### 什么是call和apply方法 我们单独看看`ECMAScript`规范对`apply`的定义，看个大概就行： [15.3.4.3 Function.prototype.apply (thisArg, argArray) ](http://es5.github.io/#x15.3.4.3)  顺便贴一贴中文版，免得翻译一下，[中文版地址](http://yanhaijing.com/es5/#322)：  通过定义简单说一下call和apply方法，他们就是参数不同，作用基本相同。 >1、每个函数都包含两个非继承而来的方法：apply()和call()。 >2、他们的用途相同，都是在特定的作用域中调用函数。 >3、接收参数方面不同，apply()接收两个参数，一个是函数运行的作用域(this)，另一个是参数数组。 >4、call()方法第一个参数与apply()方法相同，但传递给函数的参数必须列举出来。 知道定义然后，直接看个简单的demo ```JavaScript var jawil = { name: "jawil",...
**最近看了很多这方面的文章，能搜到的基本看了个遍，但感觉还是似懂非懂，知道这个东西，很难说出这是个什么东西，先整理一些概念，慢慢消化，以后慢慢探索其中的原因。** ### 1、PX(CSS pixels) #### 1.1 定义 >**虚拟像素**，可以理解为“直觉”像素，`CSS`和`JS`使用的抽象单位，浏览器内的一切长度都是以`CSS`像素为单位的，`CSS`像素的单位是**px**。 #### 1.2 注意 在`CSS`规范中，长度单位可以分为两类，绝对(`absolute`)单位以及相对(`relative`)单位。`px`是一个**相对单位**，相对的是设备像素(`device pixel`)。 在同样一个设备上，每1个CSS像素所代表的物理像素是可以变化的(**即CSS像素的第一方面的相对性**); 在不同的设备之间，每1个CSS像素所代表的物理像素是可以变化的(**即CSS像素的第二方面的相对性**); #### 1.3 那么PX到底是什么？ `px`实际是`pixel`（像素）的缩写，根据 [维基百科](https://zh.wikipedia.org/wiki/%E5%83%8F%E7%B4%A0)的解释，**它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念**。所以在谈论像素时一定**要清楚它的上下文**！一定要清楚它的上下文！一定要清楚它的上下文！ 不同的设备，图像基本采样单元是不同的，显示器上的物理像素等于显示器的点距，而打印机的物理像素等于打印机的墨点。而衡量点距大小和打印机墨点大小的单位分别称为`ppi`和`dpi`： **ppi**：每英寸多少像素数，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。 **dpi**：每英寸多少点。 关于打印机的点距我们不去关心，只要知道 **当用于描述显示器设备时ppi与dpi是同一个概念** 。 #### 1.4 CSS像素的真正含义 由于不同的物理设备的物理像素的大小是不一样的，所以`css`认为浏览器应该对`css`中的像素进行调节，使得浏览器中...
**在引出下面要阐述的问题答案之前，先深入了解几个重要慨念，之前这些概念也是模模糊糊，从最原始的一步步搞清楚。** ### 什么是函数(function)？ 解释定义最好的地方就是它的起源，这里便是ECMAScript规范，我们看看规范怎么定义函数(function)的。 [摘录来自ECMAScript 5.1规范的4.3.24小节：](http://yanhaijing.com/es5/#199) > 对象类型的成员，标准内置构造器 `Function`的一个实例，并且可做为子程序被调用。 > >注： 函数除了拥有命名的属性，还包含可执行代码、状态，用来确定被调用时的行为。函数的代码不限于 ECMAScript。 **至于什么是实例对象，什么构造器（构造函数）下面的会详细讲，这里我们只引用定义，知道有这么个东西它叫这个名字就够了。** **函数使用function 关键字来定义，其后跟随，函数名称标识符、 一对圆括号、一对花括号。** 结合一个栗子理解这句话： ```JavaScript function demo(){ console.log('jawil'); } ``` 上面这几行代码就是一个函数，这个函数是标准内置构造器 `Function`的一个实例，因此函数是一个对象。`demo`就是这个函数的名字，对象是保存在内存中的，函数名`demo`则是指向这个对象的指针。`console.log('jawil')`则是可执行代码。 对于内存，引用，指针不太明白，没有任何认知的童鞋可以去尝试搜索补习一下这些概念，其实都是一些概念，花点时间理解一下就好了。 在浏览器我们也可以检验一下： ```JavaScript demo...
原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。 >在一个`Web`项目中，注册，登录，修改用户信息，下订单等功能的实现都离不开提交表单。这篇文章就阐述了如何编写相对看着舒服的表单验证代码。 假设我们正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑。 * [x] 所有选项不能为空 * [x] 用户名长度不能少于6位 * [x] 密码长度不能少于6位 * [x] 手机号码必须符合格式 * [x] 邮箱地址必须符合格式 注：为简单起见，以下例子以传统的浏览器表单验证，`Ajax`异步请求不做探讨，浏览器端验证原理图：  简要说明： >这里我们前端只做浏览器端的校验。很多工具可以在表单检验过后、浏览器发送请求前截取表单数据，攻击者可以修改请求中的数据，从而绕过 `JavaScript`，将恶意数据注入服务器，这样会增加**XSS（全称 Cross Site Scripting）攻击**的机率。对于一般的网站，都不赞成采用浏览器端的表单验证方法。浏览器端和服务器端双重验证方法在浏览器端验证方法基础上增加服务器端的验证，其原理如图所示，该方法增加服务器端的验证，弥补了传统浏览器端验证的缺点。若表单输入不符合要求，浏览器端的 `Javascript`...
### 方便大家查阅,本文已首发在[segmentfault](https://segmentfault.com/)社区,已上热门,谢谢大家支持.[点我查阅](https://segmentfault.com/a/1190000008432611) **你是否在面试中遇到过各种奇葩和比较细节的问题?** ```JavaScript []==[] //false []==![] //true {}==!{} //false {}==![] //VM1896:1 Uncaught SyntaxError: Unexpected token == ![]=={} //false []==!{} //true undefined==null //true ``` **看了这种题目,是不是想抽面试官几耳光呢?哈哈,是不是看了之后一脸懵逼,两脸茫然呢?心想这什么玩意**  **其实这些都是纸老虎,知道原理和转换规则,理解明白这些很容易的,炒鸡容易的,真的一点都不难,我们要打到一切纸老虎,不信?**   **我们就从[]...
**原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。** **按照格式推荐好用的插件有福利哦，说不定会送1024论坛邀请码，好自为之，你懂的，嘿嘿嘿。**  由于github的issues没有TOC菜单栏导航，所以这里方便大家查看，先安利一款Chrome浏览器的插件，感谢github用户@BBcaptain 推荐。[点击我呀，进入商店，自备梯子，如果不会翻墙，赶紧转行](https://chrome.google.com/webstore/detail/smart-toc/lifgeihcfpkmmlfjbailfpfhbahhibba)。。。 **效果预览，是不是很方便，图片较多，建议等待一会或者多刷新几下：**  ## Echo.js – 简单易用的图片延迟加载插件 **github：https://github.com/toddmotto/echo** **官方网站：https://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/** **star：3k+** **Install：** ``` npm:npm install echo-js bower:bower install echojs ``` **大小：2KB** **功能介绍：** Echo.js 是一个独立的延迟加载图片的...
本文纯属原创? 如有雷同? 纯属抄袭? 不甚荣幸! 欢迎转载！ **原文收录在[【我的GitHub博客】](https://github.com/jawil/blog)，觉得本文写的不算烂的，可以点击[【我的GitHub博客】](https://github.com/jawil/blog)顺便登录一下账号给个星星✨鼓励一下，关注最新更新动态，大家一起多交流学习，欢迎随意转载交流，不要钱，文末没有福利哦😯，你懂的😉。** **如果你很直接，就是直白想看我的结果分析，请直接跳到[第六章]()，只要你看的懂，前面的知识点可以忽略。** ### 起因 凡是都有一个来源和起因，这个题不是我哪篇文章看到的，也不是我瞎几把乱造出来的，我也没这个天赋和能力，是我同事之前丢到群里，叫我们在浏览器输出一下，对结果出乎意料，本着实事求是的精神，探寻事物的本质，不断努力追根溯源，总算弄明白了最后的结果，最后的收获总算把js的隐式类型转换刨根问底的搞清楚了，也更加深入的明白了为什么JS是弱类型语言了。 ### 题外话 一看就看出答案的大神可以跳过，鄙文会浪费你宝贵的时间，因为此文会很长，涉及到知识点很多很杂很细，以及对js源码的解读，而且很抽象，如果没有耐心，也可以直接跳过，本文记录本人探索这道问题所有的过程，会很长。 可能写的不太清楚，逻辑不太严密，存在些许错误，还望批评指正，我会及时更正。去年毕业入坑前端一年，并不是什么老鸟，所以我也是以一个学习者的身份来写这篇文章，逆向的记录自己学习探索的过程，并不是指点江山，挥斥方遒，目空一切的大神，如果写的不好，还望见谅。 首先对于这种问题，有人说是闲的蛋疼，整天研究这些无聊的，有啥用，开发谁会这么写，你钻牛角尖搞这些有意思吗？ 对于这种质疑，我只能说：爱看不看，反正不是写给你看。 当然，这话也没错，开发过程中确实不会这么写，但是我们要把开发和学习区分开来，很多人开发只为完成事情，不求最好，但求最快，能用就行😊。学习也是这样，停留在表面，会用API就行，不会去深层次思考原理，因此很难进一步提升，就是因为这样的态度才诞生了一大批一年经验重复三五年的API大神😄。 但是学习就不同，学习本生就是一个慢慢深入，寻根问底，追根溯源的过程，如果对于探寻问题的本质追求都没有，我只能说做做外包就好，探究这种问题对于开发确实没什么卵用，但是对我们了解JavaScript这门语言却有极大的帮助，可以让我们对这门语言的了解更上一个台阶。**JavaScript为什么是弱类型语言，主要体现在哪里，弱类型转换的机制又是什么？** 有人还是觉得其实这对学习JS也没什么多大卵用，我只能说：**我就喜欢折腾，你管得着？反正我收获巨多就够了。** **++[[]][+[]]+[+[]]===10?这个对不对，我们先不管，先来看几个稍微简单的例子，当做练习入手。** ### 一、作业例子： 这几个是留给大家的作业，涉及到的知识点下面我会先一一写出来，为什么涉及这些知识点，因为我自己一步步踩坑踩过来的，所以知道涉及哪些坑，大家最后按照知识点一步一步分析，一定可以得出 答案来，列出知识点之后，我们再来一起分析++[[]][+[]]+[+[]]===10?的正确性。 >1. {}+{}//chrome:"[object Object][object Object]"，Firfox:NaN >2. {}+[]//0...
原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。 >有些童鞋肯定有所疑惑，花了大量时间学习正则表达式，却发现没有用武之地，正则不就是验证个邮箱嘛，其他地方基本用不上，其实，大部分人都是这种感觉，所以有些人干脆不学，觉得又难又没多大用处。殊不知，想要成为编程大牛，正则表达式必须玩转，GitHub上优秀的开源库和框架里面到处都是强大的正则匹配，当年jQuery作者也被称为正则小王子。这里分享一些工作中用到的和自己收集的一些正则表达式的妙用，到处闪耀着开发者智慧的火花。 实现一个需求的方法很多种，哪种更好，仁者见仁智者见智，这里只提供一种对比的思维来激发大家学习正则的兴趣和养成活用正则的思维。 作为前端开发人员，总会有点自己的奇技淫巧，毕竟前端开发不同于后端，代码全部暴漏给用户不说，代码冗余了少则影响带宽，多则效率降低。正则表达式（Regular Expression），这是一块硬骨头，很难啃，但是啃着又很香。所以今天我也来爆一些正则表达式的奇技淫巧。 **正则大法好，正则大法好，正则大法好，重要的事情说三遍。** ### 1、获取链接 **`https://www.baidu.com?name=jawil&age=23`** name的value值 **非正则实现：** ```JavaScript function getParamName(attr) { let search = window.location.search // "?name=jawil&age=23" let param_str = search.split('?')[1] // "name=jawil&age=23"...
最近在恶补计算机网络方面的知识，之前对于TCP的三次握手和四次分手也是模模糊糊，对于其中的细节更是浑然不知，最近看了很多这方面的知识，也在系统的学习计算机网络，加深自己的CS功底，就把看过的一些比较好的东西和自己的一些理解二次加工组织一下然后交流分享，一起学习进步，对了这个面试好像经常问到。 原文收录在我的 GitHub博客 ([https://github.com/jawil/blog](https://github.com/jawil/blog)) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。 ### 通俗理解:  但是为什么一定要进行三次握手来保证连接是双工的呢，一次不行么？两次不行么？我们举一个现实生活中两个人进行语言沟通的例子来模拟三次握手。 引用网上的一些通俗易懂的例子，虽然不太正确，后面会指出，但是不妨碍我们理解，大体就是这么个理解法。 #### 第一次对话： 老婆让甲出去打酱油，半路碰到一个朋友乙，甲问了一句：哥们你吃饭了么？ 结果乙带着耳机听歌呢，根本没听到，没反应。甲心里想：跟你说话也没个音，不跟你说了，沟通失败。说明乙接受不到甲传过来的信息的情况下沟通肯定是失败的。 如果乙听到了甲说的话，那么第一次对话成功，接下来进行第二次对话。 #### 第二次对话： 乙听到了甲说的话，但是他是老外，中文不好，不知道甲说的啥意思也不知道怎样回答，于是随便回答了一句学过的中文 ：我去厕所了。甲一听立刻笑喷了，“去厕所吃饭”?道不同不相为谋，离你远点吧，沟通失败。说明乙无法做出正确应答的情况下沟通失败。 如果乙听到了甲的话，做出了正确的应答，并且还进行了反问：我吃饭了，你呢？那么第二次握手成功。 **通过前两次对话证明了乙能够听懂甲说的话，并且能做出正确的应答。** 接下来进行第三次对话。 #### 第三次对话： 甲刚和乙打了个招呼，突然老婆喊他，“你个死鬼，打个酱油咋这么半天，看我回家咋收拾你”，甲是个妻管严，听完吓得二话不说就跑回家了，把乙自己晾那了。乙心想：这什么人啊，得，我也回家吧，沟通失败。说明甲无法做出应答的情况下沟通失败。 如果甲也做出了正确的应答：我也吃了。那么第三次对话成功，两人已经建立起了顺畅的沟通渠道，接下来开始持续的聊天。 **通过第二次和第三次的对话证明了甲能够听懂乙说的话，并且能做出正确的应答。** 可见，两个人进行有效的语言沟通，这三次对话的过程是必须的。 **为了保证服务端能收接受到客户端的信息并能做出正确的应答而进行前两次(第一次和第二次)握手，为了保证客户端能够接收到服务端的信息并能做出正确的应答而进行后两次(第二次和第三次)握手。** 这个例子举得挺好的。不过个人感觉为什么是三次而不是二次，不是因为为了证明甲能听懂乙并回应（第二次乙能正确的响应甲说明俩人之间沟通已无障碍了），而是怕出现以下情况而浪费感情。这个情景是这样的（例子有点不实际意会就好）：甲在路上跟乙打招呼，由于刮风什么的这句活被吹跑了，然后甲又跟打了个招呼，乙听到了并作出了回应。此时不管是三次握手还是两次握手两个人都能愉快的沟通。0.1秒后俩人四次挥手告别了。此时被风刮跑的那句话又传到了乙的耳朵里，乙认为甲又要跟他沟通，所以做出了响应的回应。（问题出现了）假如采用2次握手，乙就认定了甲要跟他沟通，于是就不停的等，浪费感情。可如果是采用3次握手，乙等了一会后发现甲没有回应他就认为甲走了然后自己也就走了！...
**觉得本人写的不算很烂的话，可以登录关注一下[我的GitHub博客](https://github.com/jawil/blog)，新手写东西写的不好之处，还望见谅，毕竟水平有限，写东西只为交流提高，一起学习，还望大神多加指点，指出纰漏，和提出宝贵的意见，博客会坚持写下去。** 今天同学去面试，做了两道面试题,全部做错了，发过来给我看,我一眼就看出来了，因为这种题我做过，至于为什么结果是那样，我也之前没有深究过，他问我为什么，我也是一脸的懵逼，不能从根源上解释问题的原因，所以并不能完全让他信服。今天就借着这个机会深扒一下，如果没有耐心可以点击右上角，以看小说的心态看技术文章，走马观花，不加思考，这样的量变并不能带来质的改变。花上10+分钟认真阅读我相信你会受益匪浅，没收获你买把武昌火车站同款菜刀砍我😄。因为我是写完这篇博客再回头写这段话的，在写的过程中也学到了很多，所以在此分享一下共同学习。 **登高自卑,与君共勉。** 下面一起看看这道题，同学微信发给我截图：  如果看的不太清楚，我把代码敲一遍,给大家看看： ```JavaScript var name = "jay"; //一看这二逼就是周杰伦的死忠粉 var person = { name: "kang", pro: { name: "Michael", getName: function() { return this.name; } } };...