一直感觉自己时间不够用，因此学习过 GTD 和番茄时间管理法等，每种管理法都有自己的优缺点，也有自己不习惯的部分。经过一长段时间（接近两年）的实践与改良、结合番茄时间管理法和 GTD 的优点，最后总结了 SGTD 时间管理法，在这里分享给大家。程序员为什么感觉时间不够用？试想一下，你日常工作中会不会经常遇到如下场景：突然来了一条消息，问你一些事情，PD 又有新需求突然接到通知，有 BUG 抓紧改好像今天有快递，什么时候去拿？刚完成了工作，咦，现在是不是没事情做了，先刷个微博吧！快下班了，我靠，还有个重要的事情没做今天都干啥去了，时间就没了？如果你经常遇到，那么请继续往下看，你就是 SGTD 时间管理法的受众。为什么会感觉时间不够用？之所以感觉时间不够用，通过日常观察，我汇总出来如下主要四点：1，分心、注意力不集中通讯工具乱叫、任务多乱、多人同时找你，让你不知所措，不知道做什么。刚开始搞这个，马上又要去解决另外一个事情。感觉很忙，但实际上没有完成什么事情。2，事情小而多、多套环境间切换任务和事情可能在不同环境下（比如朋友、同事，JS 问题或者 CSS 问题等），来回解决需要切换环境和大脑思维。事情虽然小，但是切换的开发环境等会浪费一些时间和精力。3，大脑需要记住这些事情在没有工具的情况下，你需要记住要做的这些事情，事情一多就容易忘记，这样就会产生：总感觉有点事情没做，但又想不起来是什 ...继续阅读 (16)

当时学习 Grunt 的时候，真是很头疼。分了两个时间段，学习了两次才硬啃下来，之后才能用在项目中。主要原因我认为是学习资料和文档上面写的太高端了。这类的文档或者资料有个显著特点，上来先简单介绍一下这个玩意（Grunt 是一个 JavaScript 任务运行器），然后就是如何安装，直接给你配置文件的语法，如何使用插件，新手往往看完还不知所以然。就像我第一次学习的时候，只是大体知道 Grunt 很火，大家都在用，但耐着心看文档和一些别人的学习总结，还是困惑，这到底是个什么东西？究竟干什么用？为什么要这么麻烦配置这些东西？到现在应用在项目中也有一小段时间了，稍微有一点点经验，好吧，我决定写一篇即便是新手也能马上看懂的文章。用途和使用场景先不要管 Grunt，我们先来看下微硬公司小明和小红的日常前端开发工作：小明在开发一个 JS 插件，写了好多代码，终于写完了，放在 HTML 文件里调用一看，console 里面好多 error，于是就挨个调整修改。为了排除深层潜在问题，他还打开了http://www.jshint.com/这个网站，把自己的代码复制进去用 jshint 检测了，结果发现了好多细节问题和不规范的地方，依次修改。最后要发布了，他又打开了http://tool.css-js.com/网站，把自己的代码复制进去，使用 Uglify 来压缩了一下，提供一个压缩版本。然后上传到了 ...继续阅读 (25)

前几天想做一个测试，思路就是获取 UA 并保存然后分析数据。就实现 UA 获取功能做一个 HTML 页面使用 JavaScript 就可以实现了，这样正好可以托管到 Github Pages 上，连服务器都省下了。但实现一个数据存放统计功能，单纯获取信息是不行的，我们还需要一个数据库来存放数据，然后读取分析。那么问题来了，如何在静态页面上来保存信息、存储数据？方法肯定是 AJAX 发送到第三方服务，由于最近在看 Github 的 API 文档，所以考虑在对应 Repo 上创建 Issue 来实现。但是这类 POST 操作，肯定是需要各种权限校验的，Github 当然不例外，实在是太麻烦了，所以寻找其他替代品。Issue 带有评论功能，于是就想到了多说。看了一下多说 API 的发表评论文档和获取评论文档，太棒了，正好具备我们需要的功能。可以通过 AJAX 发表评论，评论的内容就是我们需要记录的数据，我们也可以将评论数据拉去下来进行分析。它的权限校验也没有很复杂，只需要发送对应的 Secret ID 即可。下面就看看具体如何实现。使用多说存储、分析数据配置多说站点首先你需要创建一个新站点，无论你之前有没有用过他们的服务，你都应该为测试项目创建一个单独的站点。因为需要使用 Secret ID，并且会暴露在前端被别人看到。打开多说首页，点击“我要安装”，会跳转到创建站点界面，填写完成即可创 ...继续阅读 (29)

注意：通过 UA 探测判断内核方法的准确性有待讨论，因为 APP 可以任意修改 UA，简单的测试，不同平台下差距较大。如果你有好的建议欢迎提出。在移动端前端开发中，WebView 占的份额很大，特别是微信前段时间还公开了自己的 JS SDK 使得基于微信 WebView 的开发越来越有竞争力。但是 WebView 始终是 WebView，是通过手机上浏览器来提供 Web 渲染功能。该测试的主要目的是想要验证以下问题：QQ、微信的 WebView 使用的是什么内核？它们跟 Android 原生浏览器有什么关系？安装 QQ 浏览器对 QQ、微信 WebView 有什么影响？安装 Chrome 会对 WebView 有没有影响，跟 Android 原生浏览器有什么关系？UC、百度 浏览器使用的什么内核？跟 Android 原生浏览器有什么关系？了解 WebView 使用的内核对于调试和开发非常有帮助。当你测试你的 WebAPP 时，它可能在你的 Chrome for Android 里面很正常，但并不意味在微信的 WebView 里面正常（因为内核不一定相同）。如果通过测试得知他们使用的内核的版本和规则，那么测试起来就会方便很多，避免无用的测试。这一点应该在对应 APP 的开发者文档中说明，但是没有搜索到，如果有了解的朋友，欢迎留下评论。由于手机品牌、操作系统众多，本人测试机不多，所以希 ...继续阅读 (20)

通过移动端使用 Web 服务的比率越来越大，例如淘宝今年双十一，移动端交易份额就达到42.6%。由此可见，掌握移动端的前端开发和测试是非常有必要的。由于之前做过大量有响应式需求的项目；今年（2014）年初也配合 Denis 的微信机器人做了一些用于微信的移动端项目；在淘宝 UED 实习的时候，也有参与过一个针对移动端的游戏的部分开发。所以算是积累了一点移动端调试的经验，在这里分享一下。本文只介绍与调试有关的内容，至于其他移动端开发知识（技巧、坑）太多太大，推荐Mars移动前端开发知识库。这个项目很久没有大动静了，欢迎大家猛烈关注，不要让它“太监”了。由于本文较长，如果没有太多时间和精力查看，建议跳转到不同测试场景下需要用到的技术和工具一节，找到适合自己测试需求的场景，再查阅相关章节。响应式测试响应式现在基本是中小型项目的标配了，先来谈谈响应式测试技巧。基础的响应式测试响应式的测试特别简单，通过改变视窗大小（也就是缩放你的浏览器）即可测试。当然，你的 CSS 中 Media Queries 判断条件设置时要使用max-width才行，如果使用max-device-width则会根据你设备的屏幕尺寸来判断。区别详情请看这里。对于 Chrome 浏览器，你可以将 Chrome DevTools 放在右边，这种布局方式尤其适合用在外接的大屏幕上。然后通过拖动 DevTools 快速测试响应 ...继续阅读 (30)

与浏览器进行交互的时候浏览器就会触发各种事件。比如当我们打开某一个网页的时候，浏览器加载完成了这个网页，就会触发一个load事件；当我们点击页面中的某一个“地方”，浏览器就会在那个“地方”触发一个click事件。这样，我们就可以编写 JavaScript，通过监听某一个事件，来实现某些功能扩展。例如监听load事件，显示欢迎信息，那么当浏览器加载完一个网页之后，就会显示欢迎信息。下面就来介绍一下事件。基础事件操作监听事件浏览器会根据某些操作触发对应事件，如果我们需要针对某种事件进行处理，则需要监听这个事件。监听事件的方法主要有以下几种：HTML 内联属性（避免使用）HTML 元素里面直接填写事件有关属性，属性值为 JavaScript 代码，即可在触发该事件的时候，执行属性值的内容。例如：点击这个按钮button>onclick属性表示触发click，属性值的内容（JavaScript 代码）会在单击该 HTML 节点时执行。显而易见，使用这种方法，JavaScript 代码与 HTML 代码耦合在了一起，不便于维护和开发。所以除非在必须使用的情况（例如统计链接点击数据）下，尽量避免使用这种方法。DOM 属性绑定也可以直接设置 DOM 属性来指定某个事件对应的处理函数，这个方法比较简单：element.onclick =function(event){ alert('你点击 ...继续阅读 (20)

当我们使用 Google 等搜索功能时，会出现与搜索内容有关的候选项。使用 JavaScript 搜索字符串，通常会使用indexOf或者search函数，但是非常僵硬，只能搜索匹配特定词语。比如使用关键词今天是星期几想要检索今天是星期五这个内容，就无法实现，虽然它们只有很小的差别。本文就来介绍一个有趣的算法编辑距离（Levenshtein Distance），然后用它来实现一个简单的候选项推荐（模糊搜索）功能。编辑距离（Levenshtein Distance）简单的说，编辑距离就是把一个字符串修改变成另一个字符串的修改次数。如果修改的次数越小，我们可以简单的认为这两个字符串之间的关系越紧密。比如今天是星期几对于今天是星期五和明天是星期五比较，跟今天是星期五更加紧密一些，因为前者的编辑距离是 1，后者的编辑距离是 2。更详细的百度百科已经说的很清楚了，这里不再赘述，主要给出 JavaScript 的实现方法：按照自然语言表达的算法，我们先需要根据两个字符串的长度创建一个二维表：function levenshtein(a, b) {varal = a.length +1;varbl = b.length +1;varresult= [];vartemp =0;// 创建一个二维数组for(vari =0; i < al;result[i] = [i++]) {}for(vari ...继续阅读 (22)

书签栏工具是特别有意思的东西，比插件轻量，比手工敲到 DevTools Console 里面方便，特别实用。比如之前在学校系统上计算自己的学分，别的同学手工计算三年多的考试成绩，其实写一段 JS 一循环就出来了。于是我就做成了书签栏工具，分享给大家，点击一下就计算出来了。因为复杂点的书签栏工具代码往往比较多，同时为了方便更新版本，往往通过加载外链的方式，于是就搞了个bookmark-tool-loader书签栏加载函数。由于一些 JS 有依赖关系，或者需要在调用之后初始化一下。所以就有了这种检测通过 JS 动态加载的资源是否完成加载的需求，当 load 完成之后，我们就可以继续加载新脚本，或者调用函数进行初始化了。检测动态加载资源是否完成加载的方法在资源加载完成的时候，会抛出一个load事件。所以我们可以监听load事件来判断该资源已经正确加载了。例如：varurl ="CSS URL",head =document.getElementsByTagName('head')[0];link =document.createElement('link');link.type ="text/css";link.rel ="stylesheet"link.href = url;head.appendChild(link);link.onload =function(){// 加载完成}但 ...继续阅读 (22)

CodeWars（附带我邀请码的地址） 是一个在线做题的网站，提供一些问题，然后让你用代码（支持 JS、Java、Ruby、Python 等）来解决这个问题。当你编写好函数并 submit，它会为代码做单元测试判断是否正确。如果正确就可以提交代码，这时候可以看到别人写的代码。一般的来说，等你 submit 之后，看到排名第一的答案，会真真正正的感觉自己写了一坨翔。而仔细思考学习别人的代码，就是一种进步。决定每过一段时间刷一下 CodeWars 然后总结，记录一些精彩的技巧（Tips，一些技巧）和解决方案（Solution，一个思路）。Tips精确判断 JavaScript 值的类型提到判断类型，立马想到typeof但是这种方式判断出来的特别不准，例如：var a = {'b':2};typeof a; //->"object"a = ['b','c'];typeof a; //->"object"可以使用toString方法：vara = ['b','c'];Object.prototype.toString.call(a);之后会返回"[object Array]"这个值是绝对准确的，详情请看：Example: Using toString() to detect object class。此外，配合使用typeof和instanceof也可以判断某些特定的类型，前提是你对它们俩 ...继续阅读 (26)

鉴于众所周知的原因，有时候获取有趣的信息需要翻墙。下面就总结一下常用的翻墙方式。特别声明：本人从不网购，家里没有水管。移居比如搬家或者租房子去上海自贸区、香港、台湾或者国外。优点真正的翻墙。缺点有点贵，比较麻烦。上国内网站可能还得翻墙。。GAE 翻墙好吧，来点认真的。翻墙的基本原理就是用可以访问的国外服务器做一个代理，让国外服务器访问墙外网站，然后传输给你。GAE 就是Google App Engine，国内Sina App Engine与之类似，就是一些服务器，提供一些开发服务等。那么就可以开发个应用，连接上去，让 GAE 的服务器做一个代理转发实现翻墙。phuslu开发出来了，就是goagent，按照教程操作即可，这里不在赘述。大体原理就是创建 GAE 应用，配置上传，在浏览器里面安装代理插件，配置插件连接 GAE 代理服务器，实现翻墙。优点简单快捷，免费。通过代理插件，按需使用，即需要翻墙的网站才翻墙，国内网站不使用翻墙。缺点鉴于众所周知的原因，google 的服务器原来越不稳定，翻墙速度也越来越不稳定。只能在浏览器里面翻墙，访问网页时翻墙。例如：下载个墙外的东西，也得用浏览器。客户端软件无法翻墙。按需使用的 VPN 翻墙大部分公开出售的 VPN 是用来翻墙用的。一般是要收费的，免费的很不好用，推荐购买收费的，平均下来一天几毛钱而已。VPN 使用教程在这里不在赘述，为了方便通 ...继续阅读 (41)

什么是 Post Type ？WordPress 里面内置了两种常用的 Post Type ：Post（文章）、Page（页面），分别用来展示两种类型的内容，一种是相对动态的文章，另一种是相对固定的页面。除此之外，WordPress 还内置了其他几种 Post Type 用来展示不同类型的内容。但如果是一个比较复杂的网站或者需求自定义程度比较高，这时候就可以手动自己创建一个 Post Type 来展示某类信息。比如大型杂志网站，可以为每个杂志类型创建不同的 Post Type 来进行管理；大型企业网站，可以为每个产品类型创建不同的 Post Type 来展示。本教程以创建一个 Movies Post Type 为例，介绍一系列与 Post Type 有关的事情。创建之后，我们可以新建 Movie 介绍，每一篇 Movie 可以自己添加 导演 等信息，还可以创建单独的电影列表等。使用的主题是官方的twentyfourteen，建议边看边在本地服务器修改测试。创建一个 post type创建一个新的 Post Type 需要使用register_post_type函数来注册一下。需要在你主题的functions.php文件下调用该函数：register_post_type($post_type,$args);$post_type参数就是你自定义 Post Type 的名称，Post T ...继续阅读 (37)

数字游民是一类工作者，他们的工作只需要电脑和网络，因此不受限于地点。所以他们边工作边旅游，把工作的收入用来支付旅行的花费。这种生活方式，在国外比较常见，国内还有待发展，主要受限于国人的思想和收入。不过特别适合远程工作者，喜欢旅游的朋友可以尝试一下。从 10月23日 开始，到 11月5日，本人就规划了这样一场”轻量数字游民“的生活，并谈一点经验和体会。吃住行在外生活，最重要的就是吃住行。这次我的计划是从杭州-》上海-》苏州-》南京，提前网上规划好旅游景点以及预计的时间，然后在网上提前联系朋友以及预订房间、购买车票等。住出门在外最大的开支在住上面，如果你能联系到朋友，跟他挤挤一个床或者在其他房间、沙发睡，显然会省下一大笔钱，而且还可能增进感情（当然是比较好的朋友）。如果没有的花，需要在网上提前预订酒店或者青年旅社。这里特别推荐青年旅社的床位。青年旅社装修特别好，非常有氛围，而且通常会有很多人，闲暇时候可以与他人聊天排解一个人的孤闷。至于安全性，这点实际来看完全没有必要担忧，前台可以寄存，房间也会有专门的柜子。重要物品随身携带背包，一般不会有问题。青年旅社最重要的当然就是价格便宜了，一般60左右一天。比较推荐带有国际的青年旅社，这类旅社比较正规，会有很多外国人入住。比如上海蓝山外滩青年旅社，就很多外国人、装潢、质量都非常不错，在外滩这种黄金地带，也只是 70 一天。住个4天也才 280， ...继续阅读 (22)

很早之前对 jQuery 略懂的时候，写过一篇简单实现弹窗功能的文章，而且“不害怕”的发表到了我爱水煮鱼上。很基础，很简单，里面的有些做法都是不成熟的，只能说简单的实现了那么一个弹窗效果。虽然写的很基础很一般，但是从统计数据来看，这篇文章还是有很多人搜索很多人看，再加上到现在过了的这一年多，做过很多遍弹窗功能，对简单的弹窗效果也有了进一步的理解，再次总结一篇更加深入的文章。弹窗的实现原理和方法弹窗通常就是两部分，一部分是半透明的背景遮罩，另一部分就是承载主体内容的区域。当点击某个按钮或者某个地方触发，将隐藏的遮罩和内容通过某种动画效果显示出来。然后点击内容中的关闭或者遮罩区域，就会将遮罩和内容通过某种动画效果隐藏起来。所以，实现弹窗第一步，就是要写结构和 CSS。弹窗的 HTML 结构和 CSS既然知道实现方法，一般的结构主要有下面两种（分情况使用）：第一种，将内容块独立出来，再声明一个.overlay结构用来做背景遮罩。结构如下："box-login">..."overlay">这样的话，就可以为.overlay结构设置半透明的背景图片或者使用 rgba 的背景，然后为.box-login应用绝对居中的布局模式或者使用 JS 动态计算宽高或者位置。(当然，这种方法的兼容性 IE8+ 特别在乎的，可以使用 JS 来计算位置，以及用半透明的 gif 图片当背景）。这种结构的优势是，遮 ...继续阅读 (19)

最近刚买了 Mac Pro，折腾了半个月，目前已经完全适应并投入使用。因为我是做前端的，所以在这里总结记录一下 Mac 系统下的基础前端开发环境搭建和必备软件，给新手一点帮助。几点感悟和心得超级强大碉堡的触摸板和手势控制，简直不需要鼠标的存在，将程序等全屏，然后手势切换，即可在小屏幕实现外接大屏幕 PC 的工作效率。所以一定要熟练掌握手势操作，我已经不再用鼠标了。比较适合双屏幕工作，因为最新的系统，两个屏幕之间比较独立，多个程序界面切换相当方便。配合时时刷新的插件，可以快速方便的看到效果。不过也有地方不太好，不够灵活开放，例如外接显示器也有一些要求，字体会发虚；机身会带静电，但是习惯就好。第一次遇到这样的安装软件方法，之前配置 linux 的时候，都得编译，或者用 yum 自己安装，执行命令之类的。而 Mac 的程序安装，感觉有点奇怪。一般是挂载 dmg 镜像，然后会弹出一个窗口，让你把 app 文件拖动到 Application 文件夹中。或者直接解压出现 app 文件，双击就算是安装好了。卸载可以直接删掉 app 文件或者（最好）用 CleanMyMac 这类软件。系统里还内置里很多很多有用的功能，你可以多探索探索，比如三指敲击触摸板会弹出单词翻译，选中英文摁下 option ＋ esc 会给你读出来，而且发音不错。当然这些功能需要你设置一下，发音的设置可以参考：程序员如何优雅 ...继续阅读 (14)

距离上一篇文章居然一个月整，这段时间都没这么活跃，也没怎么写文章，主要忙活学科二了。记录下。其实我是不想学车的刚开始的时候，我其实不想学车，学车太麻烦太浪费时间了，而且我觉得以后学车的用处越来越小。私家车越来越多，政府肯定是会限制你购买车辆，而且价格会越来越贵。房子都是个问题，哪里有钱买汽车。如果好几年都买不上车开，那现在学个车干毛用。此外，我坚信以后公共交通会是主流，越来越好。到时候出行，一出门就坐上公交车很快就到了，既节约成本，又保护环境，出行虽然稍微慢点，但是比你找半天车位找不到的好。但是家里一直催着学。后来我也看到很多很多抱怨或者建议，大体就是说大学时间多，以后工作了之后再学就会特别麻烦。好吧，报上名学吧，也不算太贵，应该就是全国最便宜的了，3k左右。学车是个很浪费时间的事情之前学过的同学给我们推荐了一个驾校的好教练，然后我们就直接去找教练报名。这样可以分一个好教练，同时还能让他拿个介绍费。没成想这个教练太好了，大家都来找，结果居然有 20多个人在这个车上。这样开始学了之后，每个人轮一遍要两三个小时。这样待在驾校一天也只能上车三四次，每次也只是几分钟而已。而剩下的时间都得在那里等着，风吹日晒雨淋，而且没有地方座，刚开始直接坐在地上，后来都带了垫子和马扎，还好点。但是很浪费时间。为了多练一会，只能早去晚回一天。驾校是 7：30 开始上班，刚开始 7：20 到得同学就是非常非常 ...继续阅读 (16)

前端重构项目外包做了也有一年左右了，分享一下还原设计稿的一些经验。为什么要还原像素级别的设计稿前端重构和美工是两个级别的，一个就在于精准还原设计稿而另一个是自我感觉怎么好怎么来。而比较高端的项目是分三块的，由专业的设计师做设计，由前端工程师切图做页面，再由后端工程师开发功能整合到系统上。术业有专攻，每一个环节都会有很高的水准，组合成一个各方面都非常专业的网站，为客户的业务提供更好的帮助，因此客户也愿意支付高价。所以，前端工程师的任务，就是精确还原设计稿甚至要精确到像素级别，不然为什么还需要设计师？Photoshop 切图技巧精确第一步，精准的使用 Photoshop 切图。拿到设计稿一般是 PSD 格式的，我们首先会认真观察一下设计稿，思考一下对应的 HTML 结构和 CSS 设计模式，然后开始根据需求进行切图。传统的切图流程确定好了切图方案之后，对于大的 PSD 来说，往往新建一个画布，然后将 PSD 里面需要切出来的图层拖动到新画布中，使用“剪裁”工具把这个图层进一步的剪切，变成最小内容，剪去多余的部分。然后打开“存储为 Web 所用格式”对话框，根据图片选择格式、压缩比以及是否是渐进式等等，然后选择路径修改文件名。这样的缺点很明显，有时候图标或者图层有半透明的阴影，这时候对于边界的界定就不好处理，此外需要大量重复的剪裁、返回上一步、继续剪裁、保存图片等等。人工操作过多，导致效 ...继续阅读 (25)

先简单的说一下 Sass 这个东西。CSS 是一些非常基础简单得语句的组合，既然简单的语句，就不可避免的有很多重复，冗余的东西。而且没有传统编程语言变量、控制语句等高级特性，所以造成了 CSS 编写低效，往往需要通过查找替换、大量复制来修改或者编写。Sass 就是用来弥补这个缺陷，为 CSS 提供额外的高级功能，使其开发更加方便快捷，更加方便管理。所以你需要使用 Sass 的语法来编写代码，然后通过 Sass 编译成具体的 CSS 代码，然后使用。所以这里就需要学习一下 Sass 的语法。Sass 的语法是按照一定规则进行缩进然后编写有关 CSS 属性，与传统 CSS 代码差别较大，学习成本高，于是 Sass 就有了一套 Scss 语法规则。Scss 中你可以直接写 CSS，即便你不会 Sass 的语法特性，直接编写 CSS 代码也是可以通过编译的，你只需要保存成.scss后缀的文件名即可。这样学习成本就低很多。Sass 基础速成本文讨论 Sass 进阶有关话题，不谈基础的使用方法和语法规则。网上已经有非常多的相关教程和资料了。如果你还不太了解，强烈推荐阮一峰老师写过文章SASS用法指南，拿出一个小时，认真看完，拿出编辑器，认真敲一遍，就可以在项目中尝试应用了。Sass 进阶Sass 的数据类型Sass 既然有了类似编程语言的功能，自然也就有了简单的数据类型。这里简单的介绍一些 S ...继续阅读 (31)

这段时间把之前的 JavaScript 的笔记复习了一遍，又学习了一些新的内容，所以把自己的学习笔记加上个人理解在这里总结一下，并提供一个简单的应用示例，希望能帮助一些刚入门的朋友。主要参考《JavaScript 高级程序设计》一书，你可以在上面看到更详细的内容。基础知识之前看不懂原型之类的时候，其实是对基础知识掌握的不好，后来认真阅读了数据类型等等基础知识之后，再看一些难度更大的内容，就有了自己的新理解。所以在这里简单的回顾一下有关的内容。引用类型引用类型主要包括：Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型等等。引用类型使用时，需要从它们身上生成一个对象（实例）。也就是说，引用类型相当于一个模版，当我们想要用某个引用类型的时候，就需要用这个模版来生成一个对象来使用，所以引用类型有时候也称作对象定义。例如，我们需要生成一个 person 对象，来定义某人的个人信息和行为，那么我们就需要依赖 Object 类型：varperson =newObject(); person.name ="jiangshui"; person.sayName =function(){console.log(this.name); }上面的这个 person 对象，通过 new 操作符使用 Object 类型这个“模版”定义。之后就可以对这个对象添加属 ...继续阅读 (18)

基础知识由于之前打算将继承和原型一起写，但后来篇幅太大只能分开，所以部分内容放在了之前那篇原型文章（JavaScript 原型理解与创建对象应用），强烈建议先看一下那篇文章。本文参考自己学习《JavaScript 高级程序设计》的笔记，加上自己的个人理解，有不对之处还望指出。此外在《JavaScript 高级程序设计》书中对应部分可以看到更详细的内容和图表。继承是什么继承是面向对象编程的一种特性，其实开发一个东西跟造物主创造世界一样，那我就通过造物主创造世界来解释一下面向对象和继承。造物主造了一些动物，造人的时候，因为每个人都不一样，所以他要一个一个的制造，也就是先做一个人类的模型，然后给这个人的模型，添加各种参数（身高、姓名、体重等），然后再添加各种行为（走路能力、手臂摆动、移动货物、跑多块、跳多高）。由于要造的人太多，造物主造烦了，于是他观察之前造出来的人，好多工作都是重复的，比如有一大批人都有走路这个行为，也可以手臂摆动，好多人身高等也相同，于是他就用了一个工具（function）来创建人类，首先设置好工具的功能（创建一个人模型，然后添加各种参数和行为），然后向工具中传递一些个性的东西（例如姓名等）。这样造人的时候，就方便多了，只需要向这个工具中传递一些人与人不同的东西（例如姓名），就可以造出一个人来，省下了大量的重复工作。造出的人就是一个对象，这个对象包含了一些属性和方法， ...继续阅读 (23)

有必要先来看一下为什么会出现模块化加载开发。传统简单的前端项目中 JS 的开发非常简单随意，就是一堆函数和调用函数代码的罗列，一个人就可以搞定。之后，页面变得越来越大，前端交互和功能越来越多，这个文件就越来越大，一个人也搞不定了，于是需要招聘好几个人来共同开发。多人协作开发，就需要制定一些规范和协议，不然就会产生一些冲突。包括变量、功能等等，于是就会用闭包等 JS 特性来分割模块防止出现冲突，每个人负责一个页面等。与此同时，有好多代码是功能重复的，而且是很多页面都需要的，于是就有高手出来将这部分代码抽象出来，做成组件，让大家复用。这样的前端开发就比很早之前的愉快的多，遇到什么功能，找一下组件，生成个对象就可以开始在自己的闭包里放心的调用，然后编写一些细节功能代码。最后产品上线的时候，把所有人的代码合并到一起就可以了。人是不会满足的，到了这个时候，就开始考虑 JS 性能问题。一整个大型网站需要的 JS 功能是非常多的，事无巨细的全部打包起来，尺寸就会非常大。而不同的页面类型需要的 JS 却是不相同的。比如 list 页面可能需要排序功能，但是不会需要 page 页面中的图片放大和标签页切换功能。那如何在 list 页面只需要 list 需要的 JS 代码，而不会加载无用的代码？很简单，分别打包，把 list 页面之外的页面 JS 都去掉，专门打包合并一个用于 list 页面的 JS。 ...继续阅读 (29)