Night Sun

JS中经常能看到 `(function(){...})()`，那么双括号()到底是什么意思呢？ ## 背景 我们先来看看一些实际工作中用到的()的例子。 形式是这样的： ```js (function(){ //TODO })(); ``` 当然在jquery中，有时候为了避免变量$冲突，也经常这么用： ```js jQuery.noConflict(); (function($){ //TODO })(jQuery); ``` ## 分析 引自 `Ecma-262` 第 `12.2.10.4章节` 的语句： ``` ParenthesizedExpression : ( Expression...

web前端目录中的 `lib` 和 `vendor` 到底有啥区别？ ## 讨论 先来看看定义： * lib，即libraries * vendor，即third-party libraries 从这个层面上来看，vendor应该是lib的一个子集。 于是，第一种目录关系出现了，即： ``` |- lib |- plugin |- util |- ... |- vendor |- jquery/ |- boostrap/...

浏览器如何展示页面的？ ## 一、浏览器工作流程 ### 1、加载 根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。 ### 2、解析 对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等） ### 3、渲染 构建渲染树，对各个元素进行位置计算、样式计算等等，然后根据渲染树对页面进行渲染（可以理解为“画”元素） > 这几个过程不是完全孤立的，会有交叉，比如HTML加载后就会进行解析，然后拉取HTML中指定的CSS、JS等。 其中，仅针对浏览器拿到资源后的渲染这一部分，可以包含两部分流程。 ## 二、渲染流程 ### 1、排版 根据文档流，加上浮动、定位等属性，确定各个盒子的位置还有尺寸。 ### 2、绘制 将css的属性例如字体、背景色、圆角等等按照给定的方式呈现出来。 **注意：** 这里涉及到2个性能优化的概念： 1. Repaint：重绘 1. Reflow：重新渲染 ##...

css3中新增单位 `rem`，那么如何区分和何时使用 `rem` 和 `em` 呢？ ## 一、定义 ### 1、rem 相对于document根目录字体而言的相对单位，默认是相对于浏览器默认字体（16px）,即：1rem = 16px。 ### 2、em 相当于使用它的容器的字体而言，如果使用者的字体定义单位也是 `em` ，那么就有继承关系。 如： ``` |-- div1（font-size:12px;） |-- div2（font-size:2em;padding:3em;） ``` div2的padding = 3 x 2...

JavaScript中，函数OR变量提前（Hoist）是什么意思？它在Js中发挥着什么作用呢？本文结合自身经验来解释下这个概念。 其实要说这个概念，需要用到很多JS的概念，如果本文中未讲解的，建议大家先弄懂这些概念。 ## 一、定义 Hoist，[跟我读：好意思特]，升起、吊起的意思。 在JS中的解释是：在作用域（Scope）内变量或者函数会提前到作用域顶部执行。 示例： ```js // step 1 var myvar = 'my value'; alert(myvar); // my value // step 2 var myvar = 'my value'; (function() {...

要了解 `Google搜索和手气不错的区别` ，请大家跟着我的思路来慢慢分析。 ## 揭秘 我自从2013年开始，零星时间做 [歌德书签](http://www.gede123.com) 的过程中想了很多很多， [歌德书签](http://www.gede123.com) 也经历了3个大的版本调整，而大家现在能看到的页面上的所有功能，也是我认为最应该保留的。 * [歌德书签](http://www.gede123.com) 的使命：为IT人士提供友好的书签分类收藏。 * [歌德书签](http://www.gede123.com) 的目标人群：IT人士。 * [歌德书签](http://www.gede123.com) 的自身定位：IT人士办公入口。 **注意：** 小白用户就可以略过了，因为我建议你使用 [hao123](http://www.hao123.com)。或者如果您的网址收藏不超过10个，那么建议你使用浏览器自带的书签收藏功能。 在做产品的过程中，我对一个观点非常认同，即：“一个产品不在于你能增加多少功能，而在于你能舍弃多少功能。” [歌德书签](http://www.gede123.com) 中要不要搜索的功能的问题困扰了我很久，最终决定一定要保留！因为既然歌德书签是入口，那么对于已收藏的书签，点击后直接打开目标页；而当用户在书签主页，突然想打开一个未知网站，或者搜素一个关键词的时候，你没有入口，难道让用户再在新标签页打开百度或者Google，搜索吗？那这就会让用户很忧虑，只有收藏的东西才能快速访问，没收藏的还得借助外力。 而 [歌德书签](http://www.gede123.com) 主要功能在于书签分类收藏，而搜索并非其使命！但是这个又是用户一个附加必要功能。如果搜索做的太厚？自己有点得不偿失，做薄了，用户可能还是得打开百度或者Google搜索。 周鸿祎说过，“自己一定要是自己产品的忠实粉丝，不然做不好产品。”，这点我深有体会。我自己在用的过程中发现，我收藏的网址，只是在一天工作开始的时候点击打开，或者零星工作中打开。而搜索这个功能，在我工作中占了很大一部分比例，也就是这是一个高频的事情。所以，搜索这个功能一定要有，而且要极力做到好用。 再确定了搜索要保留到...

总结下我最近对于知识的认知，希望能与君共勉。 ### 1、知识要成体系，即画圆。 * 工作几年总觉得自己很牛，但是在面试被问到一些具体问题，就语无伦次，最后心理还犯嘀咕：我能很快做出很多东西，问那么多有个鸟用！！！ * 后来我意识到，自己真是个傻缺！如果我的知识真的画圆了的话，你从任何一个位置问我，我都能左右关联回答你，这体现在工作中，不是能更周全的想问题吗？ * 我现在的体会，凡是某个知识点说不上来个123的，基本都是没掌握牢固，或者半瓶子晃荡！ ### 2、读书很重要，是真的。 * 上学的时候，有个数学老师下棋很厉害，基本全市数一数二，很多人找他下棋，他会问一个问题：你看过棋谱没？凡是没看过的，他都婉拒了。后来他说，我不太喜欢和没谱的人下棋。 * 而我之前的特点是喜欢先动手搞出结果（我自信自己有创造天赋），再看书，这样我会很有动力看，要不然我就实在没兴趣看书。但是后来，随着时间推移，我在动手的过程中，想起了很多之前硬逼着自己看的一些书中说的理论！而恰恰是这些理论，让我做出了很多美好的结果。于是我慢慢的喜欢读书了，其实也就是这2年的事情。 * 所以，如果你不喜欢读书，那么抽时间找感兴趣的点，逼迫自己先读一点点，从中找到认知的地方。如果哪一天你用到了这个知识点，而且你能从中获益，你就会跟我一样，慢慢喜欢读书，这就跟一层窗户纸一样，以后也会喜欢读书，而且会吸收的多。 * 读书破万卷，下笔如有神！程序猿更是这样，尤其半路出家做前端WEB的，更应该多看看书。

站在巨人的肩膀上，你才能走的更远！ 但前提是你得思考，思考，再思考！重要的事情说三遍，不然你就不是站在肩膀上，而是跟在屁股上！ ## 23条军规 ### 目录 * 翻译：[http://www.cnblogs.com/flyfish2012/p/3911846.html](http://www.cnblogs.com/flyfish2012/p/3911846.html) * 原文：[http://yslow.org/](http://yslow.org/) ### 详情 * 原文：[http://developer.yahoo.com/performance/rules.html](http://developer.yahoo.com/performance/rules.html) * 中文：[performance-rules-web-site.pdf](http://www.ghugo.com/wp-content/uploads/2010/09/performance-rules-web-site.zip) 个人觉得，里面的每一条都应该仔细研读！ ### 参考 * [http://www.ghugo.com/performance-rules-web-site/](http://www.ghugo.com/performance-rules-web-site/)

html为什么要使用include？如何include？ ## 一、为什么要include 我们知道，web的三驾马车：html, js和css，其中： * js 我们由传统的所有逻辑写到一个js文件中，现在我们都提倡分模块开发，于是涌现出来 `require.js` 、 `sea.js` 和 `CommonJs` 等模块加载框架，以及 `AMD` 、`CMD` 等模块加载机制，同时ES6也提供了 `class` 和 `modules` 等机制，目的只有一个：模块化开发。 * css 我们在页面上通过 `link` 可以引入各个css文件，在css里面可以使用 `import` 来引入其他css文件，为什么要这么做？如果所有文件都写在一个里面，那要这么引入干嘛？目的只有一个：模块化开发。 * html...

让一个函数页面加载后就运行（专业术语叫：[IIFE](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)），你的脑海中能想出几种办法呢？ 本文就总结下一些常用的办法，同时一些不常用的，但是在一些牛人写的框架的源码中经常会出现的函数自执行的方法。 ## 一、几种常见的方法 ### 1、在body中直接执行方法 ```js function autoFun(){}; autoFun(); ``` ### 2、在head中window.onload 函数中执行函数 ```js function autoFun(){}; window.onload = function(){ autoFun(); }; ``` ### 3、使用body的onload事件执行 ```js function autoFun(){}; ``` ###...