一、了解 MAC

1、C盘、D盘哪去了？

• 访达 中的 文稿 对应Windows上的 我的电脑

• 启动台 对应Windows上的 所有程序

• 系统偏好设置 是Mac上设置所有选项的地方，相当于Windows上的 控制面板 等

  

• 在 文稿 中新建几个根文件夹，然后可以作为Windows上的C盘、D盘之类的，可以右键文件夹，标记为不同的颜色，以后操作的时候，可以通过颜色快速定位到想要的目录，不必要从 文稿 一级一级往下翻

  

2、APP顶部的菜单栏去哪了？

在Mac中，所有APP共享顶部的导航栏，在不同App中，顶部的导航栏显示当前App的导航栏。比如：

• 显示桌面的时候，顶部导航栏：

  

• 在Webstorm编辑器中时，顶部导航栏：

  

3、新增按键 Command

在 Windows 上许多组件键 Ctrl + * 在 Mac 上可能都换成了 Command键 + *

比如：

• 复制 Command键 + C
• 粘贴 Command键 + V

二、自带常用软件

• 备忘录（系统自带软件，但是很好用，记录Node很舒服）
• 文本编辑器（相当于 Windows 上的记事本，也挺好用）
• 日历
• 计算器

三、装机必备

• Chrome 浏览器（入口）
• 微信（聊天）
• Sougou 输入法（打字）
• The Unarchiver（解压，挺好用）
• IINA - 视频播放软件（默认QuickTime不支持播放AVI格式）
• Kugoo（听歌）
• Office（办公）
• Project Viewer 365（查看 Office Project 软件，Mac 上没有免费的 Office Project）
• Hyperswitch（同类进程之间切换方便）
• Xnip （截图软件）

四、前端开发

• Git
• Webstorm（VSCode）
• DataGrid（管理数据库）
• Sublime Text（文本编辑器，用系统自带的也可以）
• Typora（MarkDown编辑器）
• PS
• Sketch
• Axure
• Charles（抓包）
• SwitchHosts!（修改Host）
• ColorSlurp（颜色提取器）
• kdiff3（文件对比工具）
• FileZilla（FTP工具）
• Brew（软件安装器）
• iTerm2（比原生命令行好用）
• 有道翻译（翻译，或者用系统自带的词典）

五、日常操作

1、打印机设置

系统偏好，打印机与扫描仪，点击 + 就可以扫描到网络打印机，点击确定即可添加。

2、远程电脑

# Windows -> Mac

Windows 和 Mac 上同时安装 Teamview 。

每次开会前，如果要远程主机的电脑，最好做如下的事情：

• 打开Mac上的Teamview，并拍照记下 您的ID 和 密码
• 在某个使用Windows电脑的同事机器上安装Teamview
• 远程时先通过会议室，远程同事Windows电脑，再通过同事的Teamview连接Mac的Teamview

# Mac -> Windows

安装软件：Microsoft Remote Desktop

# Mac -> Mac

在 访达 界面，按快捷键 ⌘ + K ，地址栏输入：vnc://172.25.122.86 即可远程连接另一台Mac机器。

悲催的是 Mac 远程另一台电脑，另一个电脑无法息屏，相当于在同步直播。。。。

3、访问共享目录

打开 访达 ，顶部菜单 前往/连接服务器… 或者执行快捷键

⌘ + K 调出目录，输入共享目录地址，如：smb://192.168.2.114 , 连接即可。

4、切换输入法

1. 任何App内使用快捷键：⌃ + 空格
2. 或者鼠标点击右上角输入法图标，切换

5、便捷操作

• F3 平铺所有窗口
• F4 打开应用启动台
• 触摸板两指按压 相当于右键（常用）
• 触摸板两指上下滑动 滚动页面（常用）
• 触摸板两指左右滑动 如果在浏览器中就是前进、后退（常用）
• 触摸板三指下滑 平铺同类应用，可以快速切换
• 触摸板三指上滑 平铺所有窗口（同F3）
• 触摸板四指回拢 打开应用启动台（同F4）

6、底部 Docker 栏固定顺序（建议）

我的底部 Docker 栏 从左到右依次是：

• 访达
• 启动台
• 偏好设置
• Chrome 浏览器
• 日历
• 计算器
• Webstorm
• DataGrid
• SwitchHosts!
• 备忘录
• Sublime Text3
• 文本编辑器
• Typora
• iTerm
• 微信
• Ps
• Sketch
• Axure RP
• FileZilla
• Charles
• Word
• Excel
• PowerPoint
• ColorSlurp
• KDiff3
• 有道词典

五、高级操作

1、切换窗口

在Mac下切换窗口，通用的命令：⌘+Tab ,但是这个命令有个缺陷，就是只能在不同的App直接切换。比如：Webstorm如果打开3个项目，其实就是同一个App打开了3个进程，这时候就不能切换。

如果要在这3个相同进程之间切换，如果不借助外力，目前我只找到如下两种切换方式：

• 在底部的Docker栏中，鼠标长按Webstorm的图标，然后切换：

  

• 在Webstorm中的 窗口 菜单中切换：

  

那么如何能快速切换组内窗口呢? 安装应用：hyperswitch - https://bahoom.com/hyperswitch

安装之后，可以设置组内应用切换的快捷键、全局应用切换快捷键，比如我个人设置如下：

• ⌥ + ~ 组内应用切换；
• ⌥ + TAB 所有应用切换（包括组内和组外的所有窗口）

2、触发角

Mac屏幕的4个角，可以设置快捷方式，就是当鼠标放到4个角的时候触发的操作，个人觉得非常方便，我个人的设置如下：

尤其是右上角的启动屏幕保护程序，每当我离开位置的时候，我顺手将鼠标挪到右上角，直接就进入屏保界面，同时配合从屏保唤醒桌面需要输入密码，简直比Windows上面的 Windos + L 还要方便。当然Mac上也有锁屏快捷键，即：

• ⌃ + ⌘ + Q 进入屏保界面（这种方式情况下，屏幕马上就熄灭，进入睡眠状态，但是上面进入屏保界面不会）
• ⇧ + ⌘ + Q 进入关机流程

如何进入设置触发角？

系统偏好 -> 桌面与屏幕保护程序 -> 触发角

3、多个桌面切换

Mac允许设置多个桌面，每个桌面都可以打开多个APP，这样更有助于你归类开发，默认情况下是有2个：

• 仪表盘 - 有一些小工具在上面
• 桌面 - 默认的桌面

快速切换多个桌面，可以直接在鼠标上面2个或者3个指头同时左右滑动切换。

新增桌面，只需要打开 调度中心 （快捷键 F3 ）窗口，右上角点击 + 即可。

本文不是讲history的replaceState和pushState这2个方法怎么用，而是要说在无法删除浏览器history的情况下，如何能正确回退页面的问题。

场景

有个H5的需求，需要一屏一屏的切换页面，到最后一个结果页面时，如果点击了手机的返回键，或者浏览器自带的返回键，希望能回到主页。但是在中间的切屏过程中，点返回或者前进，就是这几个页面之间切换。

比如，总共有这么几个页面：

1. 首页
2. 1/4页
3. 2/4页
4. 3/4页
5. 4/4页
6. 结果页

如果你在2/4页时，点击返回是要回到1/4页，如果你是在结果页，点击返回，是要回到首页。

处理

典型的spa应用，通过改变 location.hash 并且监听 onhashchange 事件，处理对应的页面即可。

问题

对于浏览器而言，改变了location.hash，其实也是给浏览器的history对象，写入了一条历史记录。

所以，对于我这个应用的处理，其实就生成了6条历史记录，可以通过：history.length查看（假如浏览器地址栏输入地址直接进入的首页）。

那么，对于需求来说，在中间的页面切换都没有问题，但是到了 结果页 时，默认返回是到了 4/4页页，如果要回到 首页 需要回退好多次。更麻烦的问题是，如果这每一页有参数携带的话，比如我从1/4的参数一直携带到4/4页，最后提交的时候，才取出数据使用，但是如果我直接从3/4页开始下一步，那么前2页的数据就携带不上了，最终结果可能报错。

思路

1. 首先，我想到的办法是删除历史记录，也就是到了结果页，删除前4页的历史记录，这样按返回键的时候，直接就回到首页了。但是可惜，history根本没有删除的方法。
2. 调查了半天貌似只有history.go(-n)这个函数回退页面了。

经验

关于history的几个知识点：

1. history.length ， 你前进了几页，值就等于几，但是返回的时候这个值不变，除非你再次前进，才会更新。
   • 比如：你前进了5页，这时候length=5，又回退了3页，这时候length=5（理论上应该是2），但是只要你再前进一页，这时候length=3，也就是重新前进时会更新length。
   • 所以，使用length的时候一定要注意以上问题。
2. history.go(-n)，相当于回退页面
3. history.back() 和 history.forward() 分别表示返回上一页，进入下一页，如果没有历史记录了，则没有任何操作。
4. 刷新浏览器不会影响历史记录

解决

我建立了3个页面，index.html,page.html,result.html，其中page.html使用hash控制4个页面。

在page.html中做了判断，如果location.hash 不为空，则表示刷新了页面，或者Back回来的，这时候就执行history.go(-n)

伪代码：

//page.js
//页面加载时判断
//以下逻辑可以保证，假如当前在page3，刷新后就回退3页，就到首页了；
//如果是从result.html返回来的，那么是page4，刷新后，也回到首页了；
//但是，如果在page.html页面内部，只需要控制好onhashchange对应的模块显示/隐藏即可；
switch(hash){
	case 1 : history.go(-1);break;
	case 2 : history.go(-2);break;
	case 3 : history.go(-3);break;
	case 4 : history.go(-4);break;
}

//result.js
//页面上有返回首页的按钮时，千万不能用：location.href='index.html'，不然用户点击浏览器自带的返回按钮时，又会错乱。
//应该用history.go来处理，只有这种处理了，回到首页后，如果用户用浏览器自带的返回键，是会回到进入首页的页面的，不然又会回到结果页了。
$('#backHome').click(function(){
	history.go(-5);
});

以下总结感觉纯属扯淡，讲的比较啰嗦，估计一般人没耐心看完，不过如果你恰好遇到这类型问题了，估计还是会有所启发吧。

JS解惑-连等表达式

问题

如下3个表达式的区别：

//sample1
var str = 123;
var str1 = 123;
var str2 = 123;

//sample2
var str = 123,str1 = 123,str2 = 123;

//sample3
var str = str1 = str2 = 123;

答案

//`sample1` = `sample2`，区别仅仅是代码风格而已；

//sample2
var str = 123,str1 = 123,str2 = 123; //str,str1,str2 全部为局部变量

//sample3
var str = str1 = str2 = 123; //str 局部变量，str1,str2 为全局变量

最新补充于：2018年3月18日

关于连等表达式多啰嗦一些

连等表达式执行过程说明

1. 先解析连等表达式，进行变量提升（hoisting）
   • 如果是局部变量，不存在则先定义
2. 将连等式最后一个值，同时赋给前面的其它变量；
   • 如果最后一个值是对象，则是将这个对象先在内存中开辟一个位置（匿名），然后将这个指针指向前面的所有变量。

关于以上第1步的详细解释

比如：

var str=str1=str2=123;

解析过程如下：

1. 先找到表达式中的变量：str、str1、str2；
2. 进行变量提升，并定义：
   • var str，表示这是一个局部变量，则直接在当前执行函数中定义变量str，默认值：undefined；

注意： str1 和 str2，由于他俩前面并没有直接有 var 符号，但是又得为它们赋值，这时候JS引擎赋值时，就会把他们挂到全局对象 window 对象上，因为 window 对象已经存在，所以不会在定义了；而对象的属性，只有在赋值时，才会动态在堆内存中追加。所以，var1 和 var2 也不会创建。

记住：变量提升创建的，只包含：基本类型、对象和声明的函数，不包含对象上的属性。

接下来就是一步步赋值的过程了，见下面第2步的解释。

关于以上第2步的详细解释

比如：

var str=str1=str2=123;

并不是： 将123先赋值给str2，再将str2赋值给str1，再将str1赋值给str；
而是： 将123赋值给str2，再将123赋值给str1，再将123赋值给str；

也就是上方的连等式可以理解为：

var str;
str = 123;
str1 = 123；
str2 = 123;

复杂示例

请大家给出如下表达式的执行结果：

var a = {n:1};  
var b = a;
a.x = a = {n:2};  
console.log('a.x=',a.x);//?
console.log('b.x=',b.x);//?

大家先自己给出一个答案，然后看看下面的分析跟你想的一样不？

详细分析

第一步：先将代码中的变量提升，不存在的变量先定义。

1. 先找出以上代码片段中的所有变量
   • a
   • b
2. 定义变量
   • var a：定义局部变量a，默认值 undefined；
   • var b：定义局部变量b，默认值 undefined；

于是代码片段变为：

//第一步做的事情
var a;  
var b;

//第二步开始的地方
a = {n:1}; 
b = a;

a.x = a = {n:2};  
console.log('a.x=',a.x);//?
console.log('b.x=',b.x);//?

第二步：一步步执行代码片段并赋值。

1. a = {n:1} 将a赋值为一个对象 {n:1}，这里发生了什么事情？

   

2. b = a 将a对象赋值给b，我们知道，对象赋值其实就是指针的指向问题，就是b的指针也指向了a的值；

   

3. a.x = a = {n:2}，这一步我们按照上方的原理(并不是依次从右往左执行)，把它拆解一下：

   • a.x = {n:2};
   • a = {n:2}

4. 先看前一步，a.x = {n:2}，其实就是在a的堆内存中，再额外增加一个属性x，并且指向新的对象，如下：

   

   • 执行完这一步，大家能看到，其实这时候：a 和 b 还是指向同一个对象，只是那个对象多了一个属性x而已。
   • 这时候：a.x = b.x 都等于 {n:2}

5. 再看后一步，a = {n:2}，就是将a的指针变化了，指向这个新的对象，如下：

   

   • 这时候：a = b.x 都等于 {n:2}(看蓝色的箭头指向同一个)
   • 而这时候a指针对应的对象中 {n:2}，根本不存在x这个属性，所以 a.x=undefined;

最终答案

console.log('a.x=',a.x);//undefined
console.log('b.x=',b.x);//{n:2}

其实本题最容易绕晕的2个地方：

1. 很多人把连等当成从右往左一个变量给另一个变量赋值！其实不是；
2. 最后 {n:2} 是个新的对象，注意的地方是对象赋值，一定是一个新的地址了。

参考

• javascript 连等赋值问题讨论

（全文完）

整理一些常见的浏览器兼容插件。

CSS HACK

1. Normalize.css
   • 处理一些常见的浏览器兼容性
   • https://necolas.github.io/normalize.css/
2. Google搜索：css hack
   • 会搜索到很多浏览器兼容的问题及其解决办法

JS 框架

1. HTML5 Shiv
   • 解决H5标签，在IE8-下无法解析
   • https://github.com/aFarkas/html5shiv
2. Respond.js
   • 解决CSS3的Media Queries在IE8-失效问题
   • https://github.com/scottjehl/Respond
3. Babel.js
   • ES6 到 ES5 转换
   • https://babeljs.io/

让一个函数页面加载后就运行（专业术语叫：IIFE），你的脑海中能想出几种办法呢？

本文就总结下一些常用的办法，同时一些不常用的，但是在一些牛人写的框架的源码中经常会出现的函数自执行的方法。

一、几种常见的方法

1、在body中直接执行方法

function autoFun(){};
autoFun();

2、在head中window.onload 函数中执行函数

function autoFun(){};
window.onload = function(){
    autoFun();
};

3、使用body的onload事件执行

<script>
function autoFun(){};
</script>

<body onload="autoFun()">

</body>

4、借助jquery的启动函数执行

function autoFun(){};
$(function(){
    autoFun();
});

5、使用匿名函数执行

jquery 插件就是这么用的。

(function(){})();

二、两种不常见的用法

1、+function

+function autoFun(){}();

2、!function

bootstrap 组件就是这么用的。

!function autoFun(){}();

以上两种方法，都是在function前面，增加了操作符，于是函数就自动运行了，原理是什么呢？

答案是：通过操作符，将函数申明变为函数表达式，然后再执行。

2017年3月29日21:05:26 修正和补充以下内容。

比如：!function autoFun(){}(); 可以这么理解：

• 第一步：function autoFun(){}; //函数表达式
• 第二步：!autoFun(); //执行函数，并将结果求反（!）

之所以这么连起来，最主要的问题是以下这种写法是错误的：

function autoFun(){}();

因为受JS语法解析器的影响，函数的定义和执行不能同时进行的。

但是！如果是一个表达式，那么JS语法解析器会走另外的处理流程，这个流程就是上面提到的2步。

当然，只要是表达式就可以，所以函数的定义不行，但是函数的申明就是可以的：

var autoFun = function(){}();

这么写的结果就是function会执行，但是autoFun=undefined；原因是这时候autoFun的值等于function执行的结果，由于function是个空方法里面没有return值，所以结果就是未定义。
当然，你这么写的目的，可能只是为了快速执行function，所以最后的autoFun的结果你并不关心，那就无所谓了。

具体哪些操作符，可以达到这个目的，参考：IIFE

另外，如果不知道 函数申明 和 函数表达式 的，请自行Google去吧！

参考

• function与感叹号
• IIFE

什么是语法糖？其实很简单。

定义

什么是语法糖？

语法糖，英文是：Syntactic Sugar

维基百科的定义是：

In computer science, syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express.

翻译过来的定义是：

在计算机科学中，语法糖是一种编程语言中的语法，设计语法糖的目的是为了使事情处理起来更加容易阅读或者表达。

更加直白的说法是：语法糖就是某种特性语法的简写形式。

扩展

1、什么是语法盐？

语法盐，英文是：Syntactic Salt

定义：

为避免容易犯的语法错误加上的额外语法限制

2、什么是语法糖精/语法糖浆

语法糖精，英文是：Syntactic Saccharin
语法糖浆，英文是：Syntactic Syrup

定义：

使得程序更加容易的一种语法。

关于这2个的定义，可以参看维基百科：

• 维基百科-语法盐
• 维基百科-语法糖精/语法糖浆

总结

语法糖并不是某一种特定语言的独有语法，而是所有计算机语言都有的，比如鼻祖类的C语言中就有了数组的语法糖等。

只不过现在在前端JS中，尤其ES6中为了使得程序开发更有效率，更加一致，所以增加了很多语法糖（简单语法）而已。

不要以为这是什么神秘技术，只是一种概念的称呼而已。

更多参考

1. 维基百科-语法糖
2. ES6 语法糖之我见

本文主要从Git原理、常用命令、分支管理等方面进行简单介绍说明。

Git 和 Svn 的区别

1. Git是分布式的管理，而Svn不是
   • Git的这个特性可以保证，每个使用Git的人员，本地都有一个独立的库跟远端相同。这样做的好处是，如果哪天断网了，或者在公司Clone的代码到家里了。这时候依然可以Add，Commit，依然可以查看版本记录。
2. Git的分支管理和Svn有很大区别
   • Git的分支之间可以随意合并、切换，而Svn的分支就相当于是一个额外的目录。
   • Git的分支使用要比Svn更加有优势，更加适合于快速开发、分块交付的工作。
3. Git数据存储方式和Svn大不一样
   • 这主要表现在Git一个仓库目录下有一个.git隐藏目录，用于存储git的数据信息，而仓库内部的所有文件就没有了.git临时文件。这样做的好处是，你可以随意的拷贝/挪动，而不需要考虑隐藏文件占很大的磁盘。而Svn是每个目录下都有一个.svn目录，用于控制版本和数据信息。有时候挪动了整个目录，切换了Svn的地址，需要clean等操作，非常麻烦，而且占的体积非常大。
   • 当然Git的这种存储有更大的作用，就是他实际存储了整个库到本地了，所以平时更新提交数据非常快。
   • 更多数据存储，参考：Git是如何存储对象的？

Git 架构

注：此图片来自阮一峰博客

Git 安装配置

1. host中添加以下内容：
   host所在目录：C:\Windows\System32\drivers\etc\

   192.168.1.68 git.gdd
   192.168.1.68 jenkins.gdd
   192.168.1.68 mysql.gdd
   192.168.1.68 server.gdd

2. 下载Git客户端并安装：

   • 点击下载
   • 安装时除以下步骤选择最后一个外，其他都可以默认。

   

3. 安装后进行如下操作：

   • 在E盘或者F盘新建一个目录叫：gitlab

   • 右键gitlab目录，运行：Git Bash

     

4. 在命令窗口分别执行以下命令：
   注意：每个命令，一直回车即可。

   git config --global user.name "<your username>"
   git config --global user.email "<your email>"
   ssh-keygen -t rsa -C "<your email>"
   

5. 登录git网页版

   • 地址：http://git.gdd:8889/
   • 用户名：自己的英文名字
   • 默认密码：88888888
   • 点击右上角的用户头像，进入个人设置

   

   • 点击左侧的：SSH Keys

   

   • 点击右侧的：Add SSH Key

   

   • 进入Add an SSH Key窗口

   

   • 用记事本打开文件：C:\Users\Administrator.ssh\id_rsa.pub
   • 拷贝id_rsa.pub中的内容，到上面的窗口，并保存

至此，git的环境已经配置好，现在查看自己有哪些git仓库目录。

1. 在git的首页，能看到右侧有一些Project，这是你有权访问的一些项目。

   

2. 比如：点击Administrator / gdd-doc 进入这项目后，点击SSH,并复制URL[email protected]:root/gdd-doc.git

   

3. 在刚才的Git Bash 窗口，执行如下命令并回车，开始下载gdd-doc的文件

   

   • 注意：第一次运行时，可能需要确认，直接输入：yes，回车即可。

4. 文件下载完成后，就可以看到所有的项目资料了。

到此为止，git的安装和初次使用就结束了，还要进行其他的学习和操作，可以参考本文档其他章节，后者以下文档：

• git - Book
• git - 简易指南
• git - Pro GIT

Git 常用命令

获取文件

1. git clone url 克隆一个仓库
2. git fetch origin 更新本地仓库文件跟远端一致
3. git branch 查看本地有哪些分支
4. git branch -r 查看远端有哪些分支
5. git branch -a 查看本地和远端所有分支
6. git branch -D feature1 删除本地分支feature1，远端仓库一般不建议删除（管理员除外）
7. git checkout develop 下载并切花到develop分支（如果develop分支本地已有，则直接切换过去）
8. git checkout -b feature1 以当前分支为准，创建一个新的分支，名字叫feature1，并切换到feature1分支
9. git pull origin develop 从远端develop分支更新内容到工作区

提交文件

1. git status 查看改动的文件(或者打开GUI查看)
2. git add <file> 提交文件
3. git add -A 提交改动的所有文件
4. git commit -m 'comment' 添加评论提交代码到本地仓库
5. git push origin develop 提交代码到develop分支（**注意：**前提示当前分支也是develop分支，保持一致。）

打标签

1. git tag 查看所有tag
2. git tag tag1 将当前分支的当前代码打一个标签，名称叫tag1
3. git push origin tag1 将打好的标签tag1提交到远端
4. git checkout tag1 临时切换到啊tag1标签上
5. git checkout -b feature2 tag1 从tag1标签上创建一个分支并feature1并切换到这个分支上

其它命令

1. git merge --no-ff feature1 当前分支合并feature1分支，注意： --no-ff 要加。
2. git log 查看提交日志，按：q退出
3. git reset --hard 'hash' 硬性回退到之前的一个版本。hash是每个版本有一个hash码。

Git GUI工具

稍后补充

参考

1. 常用 Git 命令清单-阮一峰：http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html
2. 我的git笔记-颜海镜：http://yanhaijing.com/git/2014/11/01/my-git-note/

Linux 常用命令，最实用的命令集锦。

常用命令

• ls -l | grep "^.json" |wc -l 查看目录文件个数
• wc -l info.log 统计文件行数
• ls -lh test.log 查看文件大小
• nano -w 比vi更好用些
  • ctrl + o 回车 保存
  • ctrl + x 退出
• grep abc jvm.log 从jvm.log中查询abc
• grep -n abc jvm.log 查看jvm.log中含有abc的个数
• tail -500f 滚屏500行
• tail -n 500 查询最后500行
• head -n 500 查询开始500行
• du -lh 查看目录大小

查看机器性能

• dstat -arlpim 查看系统整体性能：磁盘、吞吐、内存、CPU等
• df -h 查看磁盘容量
• du -h 查看目录大小
• free 查看整体容量
• top 查看性能
• htop 查看详细性能

文件 vi

• %s/find/replace/g 替换文件中所有的find字符串为replace
• split -l 50 拆分原始文件

screen 启动后台进程

• screen 回车 进入一个后台界面
• screen -S name 创建一个名为name的screen
• screen -r night 进入name为screen的窗口
• ctrl+A D 退出当前screen
• screen -r 查看所有screen
• screen -r pid 进入某一个screen
• ctrl+Z 结束当前screen
• screen -wipe 检查目前所有的screen作业，并删除已经无法使用的screen作业
• ctrl+s 锁屏
• ctrl+q 解锁

压缩/解压命令

• unzip xxx.zip -d /home 解压到指定目录home
• gzip -dc jvm-app-0.log.20141218.0506.gz | grep UnknownHostException 查看压缩文件并且搜索关键字
• tar -czf file.tar /usr/local/.. 压缩
• tar –xvf file.tar 解压 tar包
• tar -xzvf file.tar.gz 解压tar.gz

删除所有的进程

• ps -ef |grep s3cmd |awk '{print $2}'|xargs kill -9

远程传输

• dyscp 10.1.5.60 /data/py_overlord_data/td_11/ xa-02.log
• dyscp 10.1.2.18 /dianyi/app/origin-1.13/ *
• dyscp 10.1.5.60 /data/py_overlord_data/td_15/ *

软连接

• ln -s a b 创建软连接。a 就是源文件，b是链接文件名,其作用是当进入b目录，实际上是链接进入了a目录
• rm -rf b 删除软链接。注意不是 rm -rf b/

title: JS解惑-jQuery.clone
date: 20161107104059
categories: [WEB]
tags: [js]

关于jQuery中clone的一些解惑。

用途

假如你想把一个html元素copy一份到另一个元素中，就可以使用 .clone 了。

比如：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

如果你想把 .hello 放到 .goodbye 中，那么以下写法就是不对的。

$( ".hello" ).appendTo( ".goodbye" );

这样的结果将是：

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

但是，如果你使用 clone() ，那么结果将是你预期的。

$( ".hello" ).clone().appendTo( ".goodbye" );

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

注意： jquery中的clone，只针对的是 html 原型而言的！如果你将一个js对象clone()，就会报错了。

jquery.min.js:2 Uncaught TypeError: Cannot read property 'ownerDocument' of undefined(…)

API

$.clone（） 可以传递2个参数：

• withDataAndEvents，默认：false
• deepWithDataAndEvents，默认：等于withDataAndEvents（特别注意这里）

这里就不区分jQuery的版本了，假设我们都 > 1.5。如果还有低版本的，可以看看 官网 的兼容性说明。

分析

1. $.clone()：仅仅克隆当前元素的html结构以及当前元素及其子元素html上绑定的事件和数据（下文解释）；
   • 数据是指通过 data-* 属性赋值的属性。
2. $.clone(true,false)：克隆当前元素html结构、当前元素及其子元素html上绑定的事件和数据，但是不包括子元素上动态绑定的事件和数据；
3. $.clone(true)：克隆当前元素html结构、当前元素及其子元素html上绑定的事件和数据，以及子元素的事件和数据。
   • 等同于 $.clone(true,true)，因为通过API我们知道，第2个参数默认等于第1个参数。

示例

<p class="wrapper">
    <input class="test" type="text" oninput="inputEvt(this)"/>
</p>

<script src="http://code.jquery.com/jquery-1.6.1.js"></script>

function inputEvt(obj){
    console.log($(obj).val())
};

$('.wrapper').click(function () {
    console.log('click');
});

$('.test').data('obj','test');

//clone1
$('.wrapper').clone(false).prependTo($("body"));

//clone2
$('.wrapper').clone(true,false).prependTo($("body"));

//clone3
$('.wrapper').clone(true).prependTo($("body"));

结果说明：

1. clone1
   • .wrapper，click *无输出（click）；
   • .test，输入文字立即有输出（oninput）
   • .test，data=undefined（data）
2. clone2
   • .wrapper，click有输出（click）；
   • .test，输入文字立即有输出（oninput）
   • .test，data=undefined（data）
3. clone3
   • .wrapper，click有输出（click）；
   • .test，输入文字立即有输出（oninput）
   • .test，data=test（data）

总结

clone（）方法其实包含了3部分内容：

• html结果以及一开始绑定写在html上的事件和数据
• + 动态绑定到html上的事件和数据（直接绑定，live/delegate/on等委托绑定除外）
• + 子元素及其事件和数据

而以上3部分内容，分别对应以下用法：

• clone()
• clone(true,false)
• clone(true) 或 clone(true,true)

特例

处于性能的考虑 textarea 和 select 这2个标签动态增加的属性有点例外。

• textara 克隆后，值不会带过去；
• select 选中的 option 克隆后，依然是未选择状态；

副作用

如果你把一个含有ID的元素进行克隆，那么克隆以后就会出现ID重复！

为了避免这问题，建议你这么做：

• 克隆的元素尽量使用 class 而非 id;
• 克隆以后修改新元素的 id；

（全文完）

参考

1. jQuery官网API

针对HTML中href的一些特殊用法的解惑。

一、A标签的用法

1、跳转到另一个目标地址

<a href="http://www.night123.com">跳转到Night博客</a>

2、跳转到当前文档的固定章节

指定一个 hash 值，跳转到当前文档 id=hash 所在的位置。

比如：在 <body> 有如下标签。

<!-- 案例展示 -->
<div id="cases">
	...
</div>

在 页面中间一个超链接，点击后定位到 cases 所在位置，则可以增加一个 a 标签操作。

<p>
	<a href = "#header">查看案例</a>
</p>

3、调用系统默认邮件系统发送邮件

<a href="mailto:[email protected]?Subject=hello%20night">发送邮件</a>

4、执行 JavaScript 脚本

<a href="javascript:alert('Hello World!');">运行JS</a>

二、href 属性特殊用法解惑

我们通过以上章节，知道了 a 标签的功能，但是在实际工作中，还有一些特殊用法，接下来我将一一为你解惑。

1、href="#"

这个本来正常的做法，是 href="#hash"，但是偏偏只有一个 #，用意何在？

作用有2个：

1、跳转到顶部

<a href="#">返回顶部</a>

2、保留 href 默认样式的情况下，不使用默认的跳转功能

有时候为了业务需要跳转功能是通过 js 来控制，这样我们就需要屏蔽 href 的默认跳转，这时候我可能会这么做。

• 去掉 href 属性，但是去掉后，发现浏览器默认的 a 标签样式没了，鼠标滑过也没有手的形状，一切都得重置，麻烦。
• href="#" 点击后，继续在当前页面，后续逻辑交给 js 处理，但是这么处理后，假如 a 标签在页面底部，页面有滚动条，这时候，点击以后页面会先返回顶部，再执行js的操作。所以，这么做体验也还是不好。

当然，有时候我们在页面的 menu 里面，也可能会有一些 a 标签，用来定位跳转到不同的页面，如：

<ul class="nav">
	<li><a href="#">首页</a></li>
	<li><a href="#">案例</a></li>
	<li><a href="#">关于</a></li>
</ul>

如果这个 nav 在页面顶部，只要不是需要拖动滚动条的地方，那么点击后，使用 js 处理跳转页面几乎没感觉。唯一有一点点小的瑕疵，就是在地址栏上的href后面，会多出一个 #。

比如，之前的地址是：http://www.night123.com/index.html

那么点击任何一个 a 标签后，页面会变成：http://www.night123.com/index.html#

现在知道了 href="#" 的两个作用了吧，虽然这2个作用在解决相关问题，都不是很完美，但是还是有一些人一直在用。

补充说明，有人说 href 是 a 标签必不可少的一个属性，其实不然。
延伸阅读请参考：http://w3c.github.io/html/links.html#attr-hyperlink-href

2、href="javascript:;"

这种用法，现在也很常见，目的也是解决避免默认的 href 跳转的。

但是这种做法就比上面第一种做法要好，因为这么做相当于是执行了一个空的 js 片段，这样在页面的任何位置点击 a 标签后，原页面本身都是无感知的。

当然这个做法也还不是最好的，因为从功能上完全实现，体验上也没有问题，但是从写法上，总是有些怪异。比如：javascript:;，不是越看越不好理解吗？

当然要避免这种问题，可以使用js原生的事件机制，来屏蔽原始的事件，方法如下：

方法1：

<a id="click" href='#'>Click Me!</a>

<script>
document.getElementById("click").onclick  = function(e){
	// 屏蔽原始事件
    	e.preventDefault();

	// TODO: 实现自己的业务逻辑

}
</script>

或者使用另一种做法：

<script>
document.getElementById("click").onclick  = function(e){

	// TODO: 实现自己的业务逻辑

	// 阻止事件传递
	return false;
}
</script>

参考：stackoverflow激烈讨论

个人觉得方法一是最完美的处理方式。

3、href="javascript:void(0);"

这是禁止页面跳转的一种方式。

看了这篇文章就知道了：
谈谈Javascript中的void操作符

4、href="#!home"

此种写法在 SPA 应用中最为常见，原理就是通过监听js的 onStateChange 事件，来控制路由规则，加载不同的HTML模板，实现页面切换。

但是浏览器地址中的的 hash 不是 # 后面的参数吗？为什么要增加一个感叹号，不能直接这么写 #home 吗？

看看阮一峰大神的这篇文章，就明白了:
URL的井号

JS中经常能看到 (function(){...})()，那么双括号()到底是什么意思呢？

背景

我们先来看看一些实际工作中用到的()的例子。

形式是这样的：

(function(){
    //TODO
})();

当然在jquery中，有时候为了避免变量$冲突，也经常这么用：

jQuery.noConflict();
(function($){
    //TODO
})(jQuery);

分析

引自 Ecma-262 第 12.2.10.4章节 的语句：

ParenthesizedExpression : ( Expression ) 
   1. Return the result of evaluating Expression. This may be of type Reference.

我个人的理解翻译：

圆括号括起来的表达式：(表达式)

返回计算表达式的结果，这可能是一个引用。

返回计算表达式的结果

这句话怎么理解呢？举个例子：

(function(){
    console.log(123456);
});

打印结果就是这个function的函数表达式，即：

function(){
    console.log(123456);
}

如果上面的例子，后面再加一个()，那么就是立即执行这个函数，即：

(function(){
    console.log(123456);
})();

结果：123456

引申：

写到这里大家可能会问，为什么要这么用呢？

2个作用：

• 立即执行函数，即：self-executing function
• 构建独立不受污染的块级作用域

关于立即执行函数，参考我之前写过的一片文章：

• JS解惑-function前面有+和!等特殊字符

另外，我们知道JS在ES6之前是没有块级作用域的，那么通过这种 (匿名函数) 的形式，可以保证 () 函数中拥有独立的作用域，而外部无法访问。

什么是块级作用域？
即，在一些类似于C语言的编程语言中，花括号内的每一段代码都具有各自的作用域，而且变量在声明它们的代码段之外是不可见的。
出自《JavaScript 权威指南》中3.10.1章节，即57页

比如：

for(var i=0;i<10;i++){
   //TODO
};
console.log(i);

结果为：10，也就是说，你在for中定义的变量i，在for结束后依然生效。

这可能是一个引用

这句话怎么理解呢？举个例子：

var obj = {
    name : 'night',
    sayHi : function(){
        console.log('hello ' + this.name);
    }
};
(obj);

结果就是这个obj的对象本身（也就定义中说的，是对obj的引用）：

Object {name: "night"}
    name:"night"
    sayHi:()
    __proto__:Object

既然是这样，那么以下语句结果就不言而喻了吧：

(obj.sayHi)();//hello night
//注意：(obj.sayHi())()，是不正确的哦！！！
//因为(obj.sayHi)本身就返回了一个引用对象，不能在()里面直接就运行哦，那你要两个()就没用了。

我还是分析下吧：

• (obj) = obj;//即，对obj的引用
• (obj.sayHi) = obj.sayHi();//即，调用对象自己的sayHi方法

引申：

JavaScript 高级程序设计（第三版） 的 7.2.2 关于this对象 中有个例子，看了以上概念，大家肯定更好理解了。

例子在这本书的 183页 最终结果：My Object，大家自己去看。

结论

(expression) 的理解：

• 返回计算表达式的结果
• 还可能返回的是一个引用

(expression)() 的作用：

• 立即执行函数
• 构建独立不受污染的作用域

参考

1. Ecma-262
2. http://stackoverflow.com/questions/4043647/what-does-this-function-a-function-inside-brackets-mean-in-javascript
3. http://stackoverflow.com/questions/440739/what-do-parentheses-surrounding-a-javascript-object-function-class-declaration-m

有没有发现，行内元素之间有一些空隙？

一、行内元素之间的空隙

先举个栗子

<div>
	<a href="#">1</a>
	<a href="#">2</a>
	<a href="#">3</a>
</div>

展示出来的结果，你发现1、2、3之间并未严格贴在一起，而是之间有一些间隙？

这就是行内元素之间默认的间隙！

本文简单的讲下出现这种问题的常见的场景！

二、行内元素的形成

2.1 默认的行内元素存在间隙

如：a、span、img等

2.2 强制将元素属性设置为 inline 或者 inline-block的

div{
	display : inline;/* inline-block */
}

三、空隙带来的负作用

1. 无法准确控制元素之间的间隙；
2. 4个25%的inline-block元素，会出现换行（即所有元素间隙之和大于100%）；
3. 如果是图片的话，100%宽度显示图片时，父容器的底部会有间隙，除非把图片设置为：block；

四、常见的解决办法

参考：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

你知道 +new Date() 结果等于多少吗？

背景

昨天看到一种书写方式，当时就有点懵，写法如下：

var time = +new Date();

好奇之，就Google了一下，豁然开朗，于是分享之……

结果

以上代码，等于如下代码：

function(){
   return Number(new Date);
}

所以，结果其实就是 当前时间的时间戳，也等于如下结果：

new Date().getTime();//20170329205038

引申

+ 可以与以下类型进行运算：

• undefined
• null
• Object
• Array
• Boolean
• Date
• String

结果如下：

+undefined

+undefined = NaN（Not As Number的意思）

扩展： undefined 和其它任何值进行任何运算结果都是NaN，比如：1+undefined，6*undefined等

+null

• +null = 0 （为什么？看看这里：undefine和null的区别）

扩展： 1+null = 1

+Object

• +{} = NaN
• +new Object(1) = 1 （其实就等于+new Number(1) = +1）

+Array

• +new Array(1) = undefined （申明一个1维的空数组，第1个元素的值未定义，+一维数子就 = +数组中的第一个元素）
• +[2] = 2（其实等于+2，所以结果就等于2）
• +[2,3] = NaN（如果是多维数组，那么：+数组 = +对象 = NaN）

扩展： +[2,3][1] = 3（相当等于 +3 = 3）

+Boolean

• +true = 1
• +false = 0
• +new Boolean(1) = 1
• +new Boolean(0) = 0

+Date

• +new Date() = 20170329213914 （等于 new Date().getTime()）
• +new Date = 20170329213914 （补充一下：其实构造函数可以简写，也就是可以不带括号，语法是正确的，只是这种写法我们不提倡）
• +new Date(1) = 1 （其实 new Date(1).getTime() = 1）

+String

• +'' = 0
• +'1' = 1
• +'a' = NaN

其实，+String我们经常见，就是把String转换为数子然后操作，如果无法转换为数字，那么结果就是NaN啦！

参考

• What does the plus sign do in '+new Date'
• The unary + operator
• Unary plus (+)
• Constructor, operator "new"

（全文完）

大家有没有发现，在一些免费的CDN站点提供的JS或者CSS的路径都是以 // 开头的？

比如：

<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">

概念

// 开头的资源地址，其实专有名词叫：Protocol-relative URL，也就是：相对协议URL。

提起相对协议URL，其实我们实际中也经常用到，大家常见的有：

• Absolute http://www.example.com/images/icons.png
• Document-Relative ../images/icons.png
• Root-Relative /images/icons.png
• Protocol-Relative //www.example.com/images/icons.png

作用

这么书写的作用就是：浏览器在请求资源时会依据当前页面的协议头来决定加载资源的协议头。

比如：当前页面是 https 开头的，那么依赖的这个文件就会以 https 协议去加载，否则使用 http加载。

WHY

为什么要这么做呢？不是js和css可以随便引入吗？为啥还要分协议呢？我统一使用 http 开头来加载资源有啥问题呢？

• 如果你的站点就是 http 的，那么没一点问题。

• 如果你的站点是 https 的，那么默认是不建议引入 http 的资源的，资源包括：js、css、图片等。在Chrome、Firefox等浏览器下，控制台会打印警告！而在一些版本的IE浏览器下，会弹出如下警告：

  

• 如果你引入的 http 资源中又引入了别的资源，会直接被浏览器决绝掉，提示：跨域请求失败的错误信息。

  • 比如：JS中动态创建JS；
  • 比如：CSS中通过font-face引入字体；

  

解决方案

知道了为什么会出现这个问题，那么我们经常引入一些外部资源的时候，就会有以下常见的办法。

• 使用上面提到的 Protocol-relative URL 双斜杠的办法，让浏览器自动匹配，但是这种方法可能有兼容性问题，比如在IE6上，或者一些比较特殊的WEB容器中，就无法解析，这时候的处理办法，可以参考：

<!-- 优先取得CDN上的资源 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<!-- 如果CDN资源获取失败，则动态加载本地资源 -->
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>

• 判断当前页面的 protocol 动态加载js，比如：

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

这两种方法现在都比较常用，第一种一般用在CDN资源的引入上，而第二种一般用在第三方脚本引入上。比如：Google分析、百度分析、多说评论框等等，引入一段脚本的时候都会这么做。

比如，大家看看多说评论框的JS脚本：

<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"your name"};
(function() {
	var ds = document.createElement('script');
	ds.type = 'text/javascript';ds.async = true;
	ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
	ds.charset = 'UTF-8';
	(document.getElementsByTagName('head')[0] 
	 || document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共JS代码 end -->

推荐直接用HTTPS

那为什么不直接进入 https 的资源呢？

其实是可以的！只是以前，人们一直以为 https 协议请求相对来说比较耗时，所以大家一般都不用，或者有些资源网站也不支持 https。

但是现在技术发展挺快，https 也已经很稳定、高效，并且最关键的一点，在 http 网站中引入 https 是可以的！

所以，如果你现在引入资源的话，建议直接引入 https 的资源（如果支持），而且 https 网站也是趋势！

延伸

反过来看待上面的 // 的这种做法，许多人这么评价： protocol-relative URLs are an anti-pattern，翻译过来就是：相对协议URL是一种反模式。

意思就是说：其实 HTTPS 才是大势所趋，我们应该鼓励直接用 HTTPS，而不是妥协它做一些兼容性的解决方案。

比如这篇文章的观点：Moving CDNs to HTTPS

参考

• The Protocol-relative URL
• Wikipedia:Protocol-relative URL
• Types of URLs
• https 页面中引入 http 资源的解决方式
• Optimizing the asynchronous Google Analytics snippet
• Moving CDNs to HTTPS

（全文完）

总结下我最近对于知识的认知，希望能与君共勉。

1、知识要成体系，即画圆。

• 工作几年总觉得自己很牛，但是在面试被问到一些具体问题，就语无伦次，最后心理还犯嘀咕：我能很快做出很多东西，问那么多有个鸟用！！！
• 后来我意识到，自己真是个傻缺！如果我的知识真的画圆了的话，你从任何一个位置问我，我都能左右关联回答你，这体现在工作中，不是能更周全的想问题吗？
• 我现在的体会，凡是某个知识点说不上来个123的，基本都是没掌握牢固，或者半瓶子晃荡！

2、读书很重要，是真的。

• 上学的时候，有个数学老师下棋很厉害，基本全市数一数二，很多人找他下棋，他会问一个问题：你看过棋谱没？凡是没看过的，他都婉拒了。后来他说，我不太喜欢和没谱的人下棋。
• 而我之前的特点是喜欢先动手搞出结果（我自信自己有创造天赋），再看书，这样我会很有动力看，要不然我就实在没兴趣看书。但是后来，随着时间推移，我在动手的过程中，想起了很多之前硬逼着自己看的一些书中说的理论！而恰恰是这些理论，让我做出了很多美好的结果。于是我慢慢的喜欢读书了，其实也就是这2年的事情。
• 所以，如果你不喜欢读书，那么抽时间找感兴趣的点，逼迫自己先读一点点，从中找到认知的地方。如果哪一天你用到了这个知识点，而且你能从中获益，你就会跟我一样，慢慢喜欢读书，这就跟一层窗户纸一样，以后也会喜欢读书，而且会吸收的多。
• 读书破万卷，下笔如有神！程序猿更是这样，尤其半路出家做前端WEB的，更应该多看看书。

js解惑-函数执行顺序

背景

JS基础知识温习。

函数解析原理

分3个阶段：

1. 准备（Hoisting）
2. 装载（填充数据）
3. 执行（逐行处理）

准备

本阶段就是书本中所说的Hoisting，包括：形参变量创建、函数体内变量提升创建 和 函数申明创建。

就是先把函数中所有的变量或者声明的函数名都先定义好，空间都开辟好。

关于准备阶段的特别说明：

1. 如果变量已经定义过，则不会重新定义（比如：形参中有个参数a，并且调用函数时传了值进来，这时候函数中还有个变量a，那么在这一阶段，函数中的变量a是不会重新定义，形参中的值也不会被覆盖。）；

装载

这里装载填充的数据包括：形参 和 申明的函数体。

也许你要问了，为什么一般的变量只是拿到前面定义好，此时值是 undefined，填充数据需要等到执行那一行才进行，而 形参 和 申明的函数 在代码执行前就要装载好呢？

答： 我个人的理解是（有更专业的解释，欢迎批评指正）：

• 形参 是外部传进来的，是函数在执行前就已经知道的数据，所以直接就装载上；而对于函数中普通的变量，受限于JS解析顺序的机制影响，只能等到具体执行到那一行时才能知道。
• 函数申明 为什么要放到前面去呢？这应该也是JS的策略吧，不然函数表达式（var xxx=fn）为啥就没这个待遇呢？

关于装载的特别说明：

1. 数据装载的数据为：函数形参 > 函数申明；
2. 对于函数声明装载时，如果已经有相同的函数名的话，会覆盖前面的（比如：形参中有个参数a，并且外部给他赋了值，这时候函数中如果有个函数申明a，那么在这一阶段，形参中的a就会被覆盖为这个函数）。

执行

通过上面的2个阶段，大家就知道，当函数真正一行行开始执行的时候，其实有些值已经存在了，并不是大家想象中的全部为 undefined。

本阶段就是纯粹的执行代码了，执行就包括了：变量赋值、对象调用等等。

但是本阶段其实JS引擎还做了另外一件事情，就是：代码检查。如果报错了，会直接中断程序，除非使用 try/catch 捕获。

示例一

function test() {
    console.log('1、a=',a);
    var a = b = 123;
    console.log('2、a=',a);
    console.log('3、b=',b);
};
test();
console.log('4、b=',b);
console.log('5、a=',a);

分析

第一步：准备

变量提升（Hoisting），这一步执行后，实际的代码变为：

function test() {
    var a;
    console.log('1、a=',a);
    b=123;
    a=b;
    console.log('2、a=',a);
    console.log('3、b=',b);
};
test();
console.log('4、b=',b);
console.log('5、a=',a);

补充说明： 关于 var a = b = 123 的解释，请移步： JS解惑-连等表达式

第二步：装载

由于函数没有形参和函数申明，所以该步直接跳过。

第三步：执行

//1 var a;
//2 console.log('1、a=',a);
//3 b=123;
//4 a=b;
//5 console.log('2、a=',a);
//6 console.log('3、b=',b);

• //1 变量定义：a，默认值：undefined；
• //2 打印变量：a，输出：1、a= undefined；
• //3 给变量b赋值为123，由于变量b在test函数中未定义，所以js引擎就会默认在全局对象window所对应的对象下面创建属性b，并且为其赋值为123，window.b=123；
• //4 将b的值赋给a，这时候a就等于123，a=123；
• //5 打印变量：a，输出：2、a= 123；
• //6 打印变量：b，输出：3、b= 123；

最后：函数执行完后，局部变量立即销毁，全局变量仍然保留。

//7 console.log('4、b=',b);
//8 console.log('5、a=',a);

• //7 由于b为全局变量，执行完函数后未被销毁，所以输出：4、b= 123；
• //8 由于a在函数执行后已经销毁，而全局变量又没有a，所以打印时就报错了；

最终结果

补充说明： 错误类型为 ReferenceError 引用错误，也就是说系统根本不知道哪个对象或者函数下面的属性a，所以会报这个错误。如果这时候你打印 window.a，那么结果将是 undefined 而不会报错。

示例二

function test(a) {
    console.log('1、a=',a);
    var a=123;
    console.log('2、a=',a);
    function a(){};
    console.log('3、a=',a);
};
test(1);

分析

第一步：准备

定义变量a，代码变为：

function test(a) {
    var a；
    console.log('1、a=',a);
    a=123;
    console.log('2、a=',a);
    function a(){};
    console.log('3、a=',a);
};

第二步：装载

1. 先将形参的值1赋值给a，a=1；
2. 将函数申明赋值给a,a=function(){};

装载完毕后，代码变为：

function test(a) {
    var a = function(){};
    console.log('1、a=',a);
    a=123;
    console.log('2、a=',a);
    console.log('3、a=',a);
};

第三步：执行

看到第二步装载完毕后的代码，那么结果也就很清楚了。

最终结果

示例三

function test(a,b){
    console.log('1、a=',a);
    c=0;
    var c;
    console.log('2、c=',c);
    a=3;
    b=2;
    console.log('3、b=',b);
    function b(){};
    function d(){};
    console.log('4、b=',b);
};
test(1);

分析

准备

找到所有的局部变量，注意包含形参中的，包括：

• a，来自：形参
• b，来自：形参、函数申明
• c，来自：局部变量
• d，来自：函数申明

于是原函数就变为：

function test(a,b){
    var a;
    var b;
    var c;
    var d;

    console.log('1、a=',a);
    c=0;
    console.log('2、c=',c);
    a=3;
    b=2;
    console.log('3、b=',b);
    function b(){};
    function d(){};
    console.log('4、b=',b);
};
test(1);

装载

注意装载的顺序：形参先装载，其次是函数声明，而且函数申明会覆盖已定义的变量。

于是函数就变成为：

function test(){
    var a=1;
    var b=function(){};//实参并没有传第2个参数，默认为undefined；但后来又被函数申明覆盖了。
    var c=undefined;//没有地方为其赋值
    var d=function(){};

    console.log('1、a=',a);
    c=0;
    console.log('2、c=',c);
    a=3;
    b=2;
    console.log('3、b=',b);
    console.log('4、b=',b);
};
test(1);

执行

先看看装载后的函数的执行结果：

所以，其实这类题目最难的就是分析阶段，包括：（准备、装载），一旦这2个阶段处理好，执行阶段基本就是直接打印结果了。

最终结果

示例四

最后一道带一些逻辑，可能会影响到分析阶段的。

function test(a,b){
    console.log('2、b=',b);
    if(a){
        var b=100;
    };
    console.log('3、b=',b);
    c=456;
    console.log('4、c=',c);
};
var a;
console.log('1、a=',a);
test();
a=10;
console.log('5、a=',a);
console.log('6、c=',c);

分析

准备

这类题目，先不用管函数体外的代码，因为函数准备和装载，跟外部代码怎么执行没关系。

• a，来自形参、局部变量；
• b，来自形参、局部变量；（注意：函数的准备阶段，是不用管是否有if的，只要看到var b，就一定会提前）

对于变量前没有var申明的，说明是全局变量，不用理会。

于是代码变为：

function test(a,b){
    var a;
    var b;

    console.log('2、b=',b);
    if(a){
        b=100;
    };
    console.log('3、b=',b);
    c=456;
    console.log('4、c=',c);
};
var a;
console.log('1、a=',a);
test();
a=10;
console.log('5、a=',a);
console.log('6、c=',c);

装载

装载阶段依然只管函数体内。

function test(){
    var a=undefined;
    var b=undefined;

    console.log('2、b=',b);
    if(a){
        b=100;
    };
    console.log('3、b=',b);
    c=456;
    console.log('4、c=',c);
};
var a;
console.log('1、a=',a);
test();
a=10;
console.log('5、a=',a);
console.log('6、c=',c);

执行

先增加一个行号：

function test(){
      var a=undefined;
      var b=undefined;

//7   console.log('2、b=',b);
      if(a){
         b=100;
      };
//8   console.log('3、b=',b);
      c=456;
//9   console.log('4、c=',c);
};
//1 var a;
//2 console.log('1、a=',a);
//3 test();
//4 a=10;
//5 console.log('5、a=',a);
//6 console.log('6、c=',c);

• 第1行、第2行，由于没有test参与，所以结果直接就打印：a=undefined;
• 第3行开始进入函数体内；
• 第7行，b=undefined；
• 第8行，因为上方if(a)条件为假，所以b并没有赋值100，所以：b=undefined；
• 第9行，由于局部并没有变量c，于是就找全局变量c，这时候恰恰是上方赋值的c=456，所以这时候：c=456;
• 函数体内执行完毕，第4行，给外层函数的局部变量a赋值为10
• 第5行，a=10;
• 第6行，由于在函数体内赋值了一个全局变量c=456，函数执行完并没有销毁，所以这里：c=456；

最终结果

彩蛋

通过以上讲解，中间穿插了一些基础知识，这里跟大家简要总结分享下。

函数的定义

函数的定义有三种形式：

• 函数申明

  function fun1(){};

• 函数表达式

  var fun2 = function(){};

• 构造函数Function

  var fun3 = new Function("a", "b", "return a * b");

变量提升（Hoisting）

就是将函数体内的 局部变量 和 函数申明 放到函数的最前面定义。

连等表达式

请移步： JS解惑-连等表达式

什么是形参、实参

function fun4(var1,var2){//函数结构体括号内的变量，就叫做形参。
    //TODO
};
fun4('abc',123);//调用函数时，实际传的值就叫做实参。

GO和VO对象是什么

• VO，Variable Object，变量对象。这是一个伪对象，是用在函数体内，在函数 准备 阶段时，用来存放准备的数据的，这些数据包括3类：形参、变量和函数声明。
  • VO对象，不能直接在函数中访问，因为其实它只是一种说法而已，用来表示数据的存储行为的。
  • 所以，上文中就没提这个概念，你要用的时候，直接就访问函数的变量了，跟这个对象没啥关系，大家也可以不用太关心，只需要了解即可。
• GO，Global Object，全局对象。这个概念是跟VO有点对立，就是全局存在的一个对象，这个对象一般指的是 window 对象。

参考

• 浅谈js中的变量名和函数名重名
• JavaScript 函数定义

（全文完）

一、基础概念

在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：dpr 是什么意思？

移动端H5解惑-概念术语（一）

二、为什么要做页面适配

2.1 PC端为什么要解决浏览器兼容

因为在PC端，由于浏览器种类太多啦，比如几个常用的：IE、火狐、Chrome、Safari等。同时，由于历史原因，不同浏览器在不同时期针对当时的WEB标准有一些不一样的处理（虽然大部分一样），比如：IE6、IE8、IE10+等对于一些JS事件处理、CSS样式渲染有所不同。

而恰恰又有一些人在使用着不同类型的浏览器，以及不同浏览器的不同版本。所以，为了能让你的网站让这些不同的人看到效果一致，你就不得不做兼容，除非这些人不是你的目标用户。

2.2 移动端为什么要做适配

在移动端虽然整体来说大部分浏览器内核都是webkit，而且大部分都支持CSS3的所有语法。但是，由于手机屏幕尺寸不一样，分辨率不一样，或者你需要考虑横竖屏的问题，这时候你也就不得不解决在不同手机上，不同情况下的展示效果了。

另外一点，UI一般输出的视觉稿只有一份，比如淘宝就会输出：750px 宽度的（高度是动态的一般不考虑）（详情），这时候开发人员就不得不针对这一份设计稿，让其在不同屏幕宽度下显示 一致。

一致是什么意思？就是下面提到的几个主要解决的问题。

三、页面适配主要解决的问题

1. 元素自适应问题
2. 文字rem问题
3. 高清图问题
4. 1像素问题
5. 横竖屏显示问题
6. 手机字体缩放问题

3.1 元素自适应问题

举个栗子：

在 1080px 的视觉稿中，左上角有个logo，宽度是 180px（高度问题同理可得）。

那么logo在不同的手机屏幕上等比例显示应该多大尺寸呢？

其实按照比例换算，我们大致可以得到如下的结果：

• 在CSS像素是 375px 的手机上，应该显示多大呢？结果是：375px * 180 / 1080 = 62.5px
• 在CSS像素是 360px 的手机上，应该显示多大呢？结果是：360px * 180 / 1080 = 60px
• 在CSS像素是 320px 的手机上，应该显示多大呢？结果是：320px * 180 / 1080 = 53.3333px

以下就是一些实现思路：

方案1：使用css的媒体查询 @media

@media only screen and (min-width: 375px) {
  .logo {
    width : 62.5px;
  }
}

@media only screen and (min-width: 360px) {
  .logo {
    width : 60px;
  }
}

@media only screen and (min-width: 320px) {
  .logo {
    width : 53.3333px;
  }
}

这个方案有2个比较突出的问题：

1. 如果再多一种屏幕尺寸，就得多写一个 @media 查询块；
2. 页面上所有的元素都得在不同的 @media 中定义一遍不同的尺寸，这个代价有点高。

方案2：使用 rem 单位

注意我们的推导公式：

• 在CSS像素是 375px 的手机上，应该显示多大呢？结果是：375px * 180 / 1080 = 62.5px
• 在CSS像素是 360px 的手机上，应该显示多大呢？结果是：360px * 180 / 1080 = 60px
• 在CSS像素是 320px 的手机上，应该显示多大呢？结果是：320px * 180 / 1080 = 53.3333px

@media only screen and (min-width: 375px) {
  html {
    font-size : 375px;
  }
}

@media only screen and (min-width: 360px) {
  html {
    font-size : 360px;
  }
}

@media only screen and (min-width: 320px) {
  html {
    font-size : 320px;
  }
}

.logo{
	width : 180rem / 1080;
}

方案2有效的解决了方案1中，同一个元素需要在多个 media 中写的问题，这里只需要多定义几个 media 就可以大致解决问题了。

但是本方案仍然有以下问题：

1. 针对不同的手机分辨率，需要写多套 @media 查询语句，多一种机型就需要多写一套查询语句，而且随着现在手机的层出不穷，这个页面很有可能在一些新出的机型上有问题。
2. 每个元素都需要除以1080这个设计稿的尺寸。

针对除以1080我们能不能直接放到html的font-size上，变成这样：

@media only screen and (min-width: 375px) {
  html {
    font-size : 375px / 1080;
  }
}

@media only screen and (min-width: 360px) {
  html {
    font-size : 360px / 1080;
  }
}

@media only screen and (min-width: 320px) {
  html {
    font-size : 320px / 1080;
  }
}

.logo{
	width : 180rem;
}

如果变成这样，那么 .logo 的css中就只需要按设计稿的尺寸大小写就可以了。到底可不可以呢？

答案是：不可以。

主要原因是，浏览器有最小字体限制：

• PC上最小 font-size=12
• 手机上最小 font-size=8

如果小于最小字体，那么字体默认就是最小字体。

再来看上面的css，比如：

@media only screen and (min-width: 375px) {
  html {
    font-size : 375px / 1080; //0.347222px
  }
}

.logo{
	width : 180rem; //期望结果：375px / 1080 * 180 = 62.5px
}

所以当你这么设置font-size时，在手机上由于小于最小字体8px，所以页面会按照默认字体算。

所以，最终就相当于你是这么设置的：

@media only screen and (min-width: 375px) {
  html {
    font-size : 8px;
  }
}

.logo{
	width : 180rem; //实际结果：1440px
}

所以，大家在设置html的font-size的时候一定要保证最小等于8px！

因而为了解决这个问题，建议大家使用Sass这种Css开发语言，可以定义公式的，这样写css就方便了。

最终使用Sass的代码如下：

@media only screen and (min-width: 375px) {
  html {
    font-size : 375px;
  }
}

@media only screen and (min-width: 360px) {
  html {
    font-size : 360px;
  }
}

@media only screen and (min-width: 320px) {
  html {
    font-size : 320px;
  }
}

//定义方法：calc
@function calc($val){
    @return $val / 1080;
}

.logo{
	width : calc(180rem);
}

以上方案虽然解决了问题，但任然有以下缺陷：

1. 不同的尺寸需要写多个 @media
2. 依赖css的开发工具，比如：sass/less等
3. 所有涉及到使用rem的地方，全部都需要调用方法 calc() ，这个也挺麻烦的。

方案3：js动态设置根字体

由于方案2最主要的问题就是需要针对不同的屏幕尺寸，定义多个 @media，所以我们先将这个字体设置改为动态设置。

注意我们的推导公式：

• 在CSS像素是 375px 的手机上，应该显示多大呢？结果是：375px * 180 / 1080 = 62.5px
• 在CSS像素是 360px 的手机上，应该显示多大呢？结果是：360px * 180 / 1080 = 60px
• 在CSS像素是 320px 的手机上，应该显示多大呢？结果是：320px * 180 / 1080 = 53.3333px

//获取手机屏幕宽度
var deviceWidth = document.documentElement.clientWidth;

//将方案二中的media中的设置，在这里动态设置
//这里设置的就是html的font-size
document.documentElement.style.fontSize = deviceWidth + 'px';

需要注意：

document.documentElement.clientWidth 这个语句能获取到的准确的手机尺寸的前提是建立在html中设置了如下标签：

<meta name="viewport" content="width=device-width">

要不然获取到的结果将始终是：980（查看原因）

然后Sass中就可以按照设计稿的尺寸大小去写就行了：

//定义方法：calc
@function calc($val){
    @return $val / 1080;
}

.logo{
	width : calc(180rem);
}

如果不考虑别的因素，只是页面元素大体适配的话，该方案基本就满足要求了，但是现实中我们其实还有很多问题，所以我们的方案还需要继续优化。

3.2 文字rem问题

文字也采用rem的单位主要有什么问题呢？

1. 可能会出现通过rem计算，最终呈现到页面上是 23.335px 这样的奇葩的字体大小，可能还会因此出现锯齿、模糊不清等问题；
2. 对于大屏希望一行显示的文字多一些，小屏显示的少一些，而不是一视同仁的全部显示同样多的文字。这样在大屏下显得文字特别大（下文 3.5 横竖屏显示问题 会仔细讲）。

对于以上问题，我个人的建议：

1. 对于出现奇葩字体的问题，其实手机上表现并没那么明显，主要原因是现在屏幕显示效果统一编号，另外html对字体显示也做优化，所以，如果产品要求不严格，可以不用考虑处理；
2. 对于横竖屏问题，看情况吧，如果要求不严格，也可以不用考虑。

如果一定要解决这个问题，那么字体就不要使用rem方案了，而是继续使用px单位。

我们上面提到 大屏 小屏 其实隐含的意思并不是手机屏幕大，而是手机的屏幕分辨率不一样，其实就是dpr不一样，所以我们针对不同的dpr设置具体的字体就可以了。

比如，我们针对页面的标题的字体大小就可以如下设置：

.title {
    font-size: 12px;
}
[data-dpr="2"] .title {
    font-size: 24px;
}
[data-dpr="3"] .title {
    font-size: 36px;
}

3.3 高清图问题

先来看看 这里 这篇文章，有讲解了为什么在有些屏幕上要使用 @2x @3x 的高清图。

再来看看 这里 讲解了具体的高清图的解决方案。

我这里简单归纳下。

3.3.1 对于 <img> 标签引入的图片高清解决方案

1、使用 srcset 标签

<img src="http://g.ald.alicdn.com/bao/uploaded/i1/TB1d6QqGpXXXXbKXXXXXXXXXXXX_!!0-item_pic.jpg_160x160q90.jpg" srcset="http://img01.taobaocdn.com/imgextra/i1/803091114/TB2XhAPaVXXXXXmXXXXXXXXXXXX_!!803091114.jpg 2x, http://gtms04.alicdn.com/tps/i4/TB1wDjWGXXXXXbtXVXX6Cwu2XXX-398-510.jpg_q75.jpg 3x">

关于 srcset 的说明：猛戳这里

2、使用js自带的 Image 异步加载图片

<img id="img" data-src1x="[email protected]" data-src2x="[email protected]" data-src3x="[email protected]"/>

var dpr = window.devicePixelRatio;
if(dpr > 3){
	dpr = 3;
};

var imgSrc = $('#img').data('src'+dpr+'x');
var img = new Image();
img.src = imgSrc;
img.onload = function(imgObj){
	$('#img').remove().prepend(imgObj);//替换img对象
};

3.3.2 对于背景图片高清解决方案

1、使用 media query 来处理

/* 普通显示屏(设备像素比例小于等于1)使用1倍的图 */
.css{
    background-image: url(img_1x.png);
}

/* 高清显示屏(设备像素比例大于等于2)使用2倍图  */
@media only screen and (-webkit-min-device-pixel-ratio:2){
    .css{
        background-image: url(img_2x.png);
    }
}

/* 高清显示屏(设备像素比例大于等于3)使用3倍图  */
@media only screen and (-webkit-min-device-pixel-ratio:3){
    .css{
        background-image: url(img_3x.png);
    }
}

2、使用 image-set 来处理（有兼容问题）

.css {
    background-image: url(1x.png); /*不支持image-set的情况下显示*/
    background: -webkit-image-set(
            url(1x.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */
            url(2x.png) 2x,/* 支持image-set的浏览器的[2倍Retina屏幕] */
            url(3x.png) 3x/* 支持image-set的浏览器的[3倍Retina屏幕] */
    );
}

3.4 1像素问题

什么是 1像素问题 ？

我们说的1像素，就是指1 CSS像素。

比如设计师实际了一条线，但是在有些手机上看着明显很粗，为什么？

因为这个1px，在有些设备上（比如：dpr=3），就是用了横竖都是3的物理像素矩阵（即：3x3=9 CSS像素）来显示这1px，导致在这些设备上，这条线看上去非常粗！

其实在在中手机上应该是1/3px显示这条线。

关于 dpr，不理解的，可以看看之前的 这篇 文章。

问题描述清楚了，我们该怎么处理呢？

方案1：使用css3的 scaleY(0.5) 来解决

比如：div的border-top的1px问题解决。

.div:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: auto;
  right: auto;
  height: 1px;
  width: 100%;
  background-color: #c8c7cc;
  display: block;
  z-index: 15;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .div:before {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .div:before {
    -webkit-transform: scaleY(0.33);
            transform: scaleY(0.33);
  }
}

但是，这种方案只能解决直线的问题，涉及到圆角之类的，就无能为力！

方案2：页面缩放解决问题

我们先来讲讲页面缩放能解决1px问题的原理示。

首先大家需要了解一些 viewport 的常识，参考：这里

假如以下手机的 dpr=2

对于dpr=2的手机设备，1px就会有 2x2 的物理像素来渲染，但是当缩放以后其实就变成 1x1 个单位渲染了，看下面示意图：

所以，我们的思路就是将真个页面缩小dpr倍，再将页面的根字体放大dpr倍。这样页面虽然变小了，但是由于页面整体采用rem单位，当根字体放大dpr倍以后，整体都放大了，看上去整体样式没什么变化。

1、将scale设置为1/dpr

假如：dpr = 2

<meta name="viewport" content="width=device-width,initial-scale=0.5">

2、clientWidth获取的值会自动扩大dpr倍

比如，以前是360px，当页面缩小0.5倍，获取到的值会变为720px。

不知道这个原理的，这篇文章讲的还是比较清楚：这里

var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth + 'px';

3、css中涉及到1像素问题的地方使用 px 作为单位

比如：

.box{
	border : 1px solid #ddd;
}

以上步骤最终整理的结果：

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <div class="box">
        <div class="logo">Logo</div>
    </div>
</body>
</html>

js:

//获取屏幕宽度、dpr值
var deviceWidth = document.documentElement.clientWidth,
    dpr = window.devicePixelRatio || 1;

//设置根字体扩大dpr倍
//由于deviceWidth当页面缩小dpr倍时，本身获取的值就增加dpr倍
//所以这里不需要再乘以dpr了
document.documentElement.style.fontSize = deviceWidth + 'px';

//设置页面缩放dpr倍
document.getElementsByName('viewport')[0]
    .setAttribute('content','width=device-width;initial-scale=' + 1/dpr)

scss：

@function calc($val){
    @return $val / 1080;
}

.logo{
	width : calc(180rem);
}

.box{
	border : 1px solid #ddd;
}

3.5 横竖屏显示问题

横竖屏问题，就是当你横屏手机、竖屏手机时看到的不一样的效果问题。

我这里要说的这个问题，就是设计师会针对横屏或者竖屏，做不一样的设计，比如：横屏时显示摘要，竖屏时只有标题，这种情况下，我们应该怎么适配的问题。

关于横竖屏问题，我将会分2个部分来说明：

1. 横竖屏显示内容不同；
2. 横竖屏显示样式不同；

3.5.1 横竖屏显示内容问题

我们知道横屏，相当于屏幕变宽了，这时候一行显示的内容就可以更多。所以，设计师可能会对横竖屏做2种不同的内容设计，如：

如果设计师本身就设计了2套样式，那么我们只需要准备2套css，依据横竖屏直接显示对应的样式，然后html中做好兼容即可。

下文会将如何判断横竖屏。

3.5.2 横竖屏显示样式问题

这里有个要说的就是，设计师没有设计横屏的样式，那么如果我们按照上文提到的方案去处理，那么就会发现在横屏模式下字体显得非常大（因为屏幕宽了），显示的内容就少了。

这种情况会显得很不协调，虽然还是等比例显示的，只不过需要多拖动下滚动条而已，但是你会觉得很怪。尤其是再有弹出框的时候，会更麻烦，弹出框有时候可能还会显示不完全。。。

比如，下面的样式：

像这种问题，我们上面提到的依据屏幕宽度自动调整根目录font-size的大小，就有点不合适了。这样虽然保证了横向的比例是严格按照设计搞来的，但是显示上非常丑。

所以，我们一般的做法就是在横屏的时候将 deviceWidth=deviceHeight。

• 正常竖屏大小：

• 横屏时让width=height

• 不做横竖屏特殊宽度处理时

以上3组画面对比我们得到的效果是：

1. 在横屏下如果让width=height，那么整体页面的宽度等于竖屏时看到的宽度，整体布局不会有变化，只是纵向看到的内容多少发生了变化；
2. 如果横屏不做处理，横屏是width其实就等于竖屏时的height，即700px，这时候整体页面显示非常宽，文字比较大。

所以，经过我们的实际对比体验以后，一致认为横屏时让 width=height 体验比较好。

附上核心代码：

var deviceWidth = document.documentElement.clientWidth,
    deviceHeight = document.documentElement.clientHeight

//横屏状态
if (window.orientation === 90 || window.orientation === -90) {
    deviceWidth = deviceHeight;
};

//设置根字体大小
document.documentElement.style.fontSize = deviceWidth + 'px';

3.5.3 附1：JS检测横竖屏

js获取屏幕旋转方向：window.orientation

• 0 - 正常方向
• -90 - 屏幕顺时钟旋转90度
• 90 - 屏幕逆时针旋转90度
• 180 - 屏幕旋转180度

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0) { 
        console.log('竖屏状态！');
    };
    if (window.orientation === 90 || window.orientation === -90 ){ 
        console.log('横屏状态！');
    }  
}, false); 

3.5.4 附2：CSS判断横竖屏

• 写在同一个CSS中：

@media screen and (orientation: portrait) {
  /*竖屏 css*/
} 
@media screen and (orientation: landscape) {
  /*横屏 css*/
}

• 分开写在2个CSS中，在link中通过media筛选加载：

<!-- 竖屏 -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

<!-- 竖屏 -->
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

3.6 手机字体缩放问题

手机字体缩放是什么问题呢？

就是当你在手机 设置 -> 字体设置 中将字体放大或者缩小，使得手机整体系统字体发生了变化，这时候可能就会影响到H5页面正常的显示。

经过实际测试，这个问题当前发生的概率不是很大，因为很多手机厂商都已经做了保护措施。但是为了保险起见，我们还是有必要进行检测，一旦不一样就要采取措施。

3.6.1 如何检测手机字体不是默认字体

var deviceWidth = document.documentElement.clientWidth;

//设置根字体大小
var setFz = deviceWidth + 'px';
document.documentElement.style.fontSize = setFz;

//获取实际html字体大小
var realFz = window.getComputedStyle(document.documentElement)
	.getPropertyValue('font-size') //如：360px

//比较二者是否相同
if(setFz !== realFz){
    //TODO 设置的字体和实际显示的字体不同
};

3.6.2 如果手机字体不是默认字体如何处理

比如：你想设置的字体大小为100px，但是实际大小却为50px，那么你可以确定其实用户字体是缩放了0.5，这时候你就需要将你的字体扩大1倍，这样才能保证实际页面的字体是100。

所以，按照这个等比例换算以后，我们就需要重新设置页页面的font-size。

var deviceWidth = document.documentElement.clientWidth;

//设置根字体大小
var setFz = deviceWidth + 'px';
document.documentElement.style.fontSize = setFz;

//获取实际html字体大小
var realFz = window.getComputedStyle(document.documentElement)
	.getPropertyValue('font-size') //如：360px

//比较二者是否相同
if(setFz !== realFz){
    //去掉单位px，下面要参与计算
    setFz = parseFloat(setFz);
    realFz = parseFloat(realFz);
    
    //重新计算要设置的新的字体大小
    //公式推导：100 -> 50，x -> 100，求x?
    //即：setFz -> realFz, x -> setFz，求x?
    var x =  setFz * setFz / realFz;
    
    //重新设置html的font-size
    document.documentElement.style.fontSize = x + 'px';
};

这么做理论上已经解决了问题，但是还有点瑕疵，问题就是：

• 如果字体不是默认字体，首先会设置一次font-size，重新计算后再次设置一次font-size，反应到页面上就是页面可能会快速晃动一次，因为两次设置的字体大小不一样，如果手机配置不高，估计晃动会很明显。

如何解决这个问题？思路就是：

1. 给页面增加一个隐藏元素，设置其字体大小为100px
2. 获取这个元素在页面上的实际字体大小是否为100px
3. 如果设置的和实际的不等，则计算其比例。

最终代码片段如下：

var deviceWidth = document.documentElement.clientWidth;

var setFz = '100px';

//给head增加一个隐藏元素
var h = document.getElementsByTagName('head')[0],
    s = document.createElement('span');
    s.style.fontSize = setFz;
    s.style.display = 'none';
    h.appendChild(s);

//判断元素真实的字体大小是否100px
//如果不相等则获取真实的字体换算比例
var realFz = getComputedStyle(s).getPropertyValue('font-size');

if(setFz !== 'realFz'){
    //去掉单位px，下面要参与计算
    setFz = parseFloat(setFz);
    realFz = parseFloat(realFz);
    
    //由于：var x = setFz * setFz / realFz;
    //公式推导：x -> setFz, y -> deviceWidth
    //所以：var y = deviceWidth * x / setFz;
    
    //重置deviceWidth
    deviceWidth = deviceWidth * setFz / realFz;
};

document.documentElement.style.fontSize = deviceWidth + 'px';

四、最终适配方案（v1.0）

除了上面一步步的分析中间的原理之外，我们可能还需要考虑或者遇到以下问题：

1. 到底什么时候动态初始化上面的js脚本？
2. 偶尔还可能会遇到进入页面时 document.documentElement.clientWidth=0 的bug？
3. 页面晃动？页面空白？页面整体凌乱然后又正常等问题？

所以，在尽可能的解决诸多问题后，最终的脚本如下：

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <!-- 正文 -->
</body>
</html>

js:

/**
 * @DESCRIPTION 移动端页面适配解决方案 v1.0
 * @AUTHOR      Night
 * @DATE        2018年08月01日
 */
(function(window, document){
    var docEle = document.documentElement,
        dpr    = window.devicePixelRatio || 1,
        scale  = 1 / dpr;
    
    var fontSizeRadio = 1, //手机字体正常比例
        isLandscape   = false;//是否横屏
    
    ///////////////////////// viewport start //////////////////////////////////
    
    //设置页面缩放比例并禁止用户手动缩放
    document.getElementsByName('viewport')[0].setAttribute('content','width=device-width,initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');
    
	///////////////////////// viewport end //////////////////////////////////
    
    //横屏状态检测
    if (window.orientation === 90 || window.orientation === -90) {
        isLandscape = true;
    };

    ///////////////////// system font-size check start //////////////////////
    
    //试探字体大小，用于检测系统字体是否正常
    var setFz = '100px';

    //给head增加一个隐藏元素
    var headEle = document.getElementsByTagName('head')[0],
        spanEle = document.createElement('span');
        spanEle.style.fontSize = setFz;
        spanEle.style.display = 'none';
        headEle.appendChild(spanEle);

    //判断元素真实的字体大小是否setFz
    //如果不相等则获取真实的字体换算比例
    var realFz = getComputedStyle(headEle).getPropertyValue('font-size');

    if(setFz !== 'realFz'){
        //去掉单位px，下面要参与计算
        setFz = parseFloat(setFz);
        realFz = parseFloat(realFz);

        //获取字体换算比例
        fontSizeRadio = setFz / realFz;
    };
    
    ///////////////////// system font-size check end //////////////////////
    
    var setBaseFontSize = function(){
        var deviceWidth = docEle.clientWidth,
            deviceHeight= docEle.clientHeight;
        
        if(isLandscape){
            deviceWidth = deviceHeight;
        };
        
        docEle.style.fontSize = deviceWidth * fontSizeRadio + 'px';
    };
    setBaseFontSize();
    
    //页面发生变化时重置font-size
    //防止多个事件重复执行，增加延迟300ms操作(防抖)
    var tid;
    window.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(setBaseFontSize, 300);
    }, false);
    window.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(setBaseFontSize, 300);
        };
    }, false);
    
})(window, document);

scss：

//设计稿尺寸大小，假如设计稿宽度750
$baseDesignWidth = 750;

@function calc($val){
    @return $val / $baseDesignWidth;
}

//适配元素采用rem，假如设计稿中元素宽度180
.logo{
	width : calc(180rem);
}

//边框采用px，假如设计稿边框宽度1px
.box{
	border : 1px solid #ddd;
}

五、新页面适配技术可以考虑（v2.0）

如果不太考虑老的手机型号，可以采用 viewport 单位。

由于我本人也没有在项目中使用这个方案，所以不过多发表言论，大家有兴趣的可以研究下。

具体方案细节参考：

• 大漠 - 再聊移动端页面的适配
• 大漠 - 如何在Vue项目中使用vw实现移动端适配

六、后记

讲了这么多，这里总结下，任何事情弄懂原理最重要！

比如，当你首次看 使用Flexible实现手淘H5页面的终端适配 这篇文章的时候你会很感慨，感觉很有收获，但是当你实际开始项目的时候，却不知道该怎么下手。

俗话说，台上一分钟，台下十年功。

为了写本文以及姊妹篇，我个人零零散散的时间加起来不下1个月，一直到（2016年12月2日）才发表了本文的第一版。由于收到一些流言反馈和后续知识的积累，于是决定今天（2018年08月01日）再把它重新整理一遍，以让大家更清楚这中间的原理。

因为中间涉及的东西太多，只要有一个知识有些不清楚，可能就会卡克！比如这个概念 dips，不同的文章有不同的说法，而且还给你解释了它跟 dip 的不同，其实就是指 CSS像素，这些人故意发明一些专业词汇，搞的你晕头转向，所以，当你看了我的这两篇文章，也许还是一知半解，这很正常，慢慢来，多多练习，相信你会明白的。

如果还有哪里不清楚，或者本文有错误的地方，感谢批评指正。

本文重新编辑于：2018年08月01日

1. 针对大家的留言以及个人的反复推敲，重新整理了这遍文章；
2. 增加针对手机本身字体放大、缩小的解决方案，以及一些新的替代方案思路。

参考

• 使用Flexible实现手淘H5页面的终端适配
• 移动开发屏幕适配分析
• 移动端高清、多屏适配方案
• web app变革之rem
• 移动端H5页面的设计稿尺寸（上）
• 移动端H5页面的设计稿尺寸（下）
• H5自适应改造方案——rem方案
• 移动端H5页面之iphone6的适配
• WebKit最新特性srcset简介
• HTML5实战与剖析之判断移动端横屏竖屏功能
• Retina屏的移动设备如何实现真正1px的线？
• 解决因为手机设置字体大小导致h5页面在webview中变形的BUG

（全文完）

undefined和null本质上没什么区别，只是用法上代表的含义不一样罢了。

前言

为什么说，undefined和null本质上没什么区别？

通过这个来看看：

undefined == null //true
null == undefined //true

另外，再阅读本文之前，建议大家先看看阮一峰老师的博客，以便了解下这二者的历史。

阮一峰 > undefined与null的区别

定义

• null，表示一个“无”的对象；
• undefined，表示一个“无”的原始值；

如何理解这2个定义？看看例子：

typeof(null) //object
typeof(undefined) //undefined

另外，二者转换为Number的结果也不一样。

Number(null) // 0
Number(undefined) //NAN

NAN，Not a Number，在IEEE浮点数算术标准（IEEE 754）中定义，表示一些特殊数值。
INF，Infinity的缩写，无穷大的意思，比如：1/0，结果就是Infinity

用途

说到这里大家可能就犯迷糊了，你一方面说没什么本质区别，另一方面通过定义又有区别，这让老夫如何是好？

好吧，接下来看看用途你大概就明白为什么Js这么定义二者了。

二者最大的用途不同在于 阶段不同：

• undefined，用于变量声明时；
• null，用于变量赋值时；

我们知道变量的声明和赋值是2个不同阶段，只是有时候我们连起来写罢了，比如：

var name = 'night';

这里其实就是声明和赋值一起写了，拆分开来是这样：

var name; // 变量申明
name = 'night'; //变量赋值

好了，当您明白了这个逻辑有，再来看看上面说的二者迭代 阶段不同 是什么意思。

看看下面的两个例子，你可能就释然了：

var name;
console.log(name); //undefined
name = 'night';
console.log(name); //night
name = null;
console.log(name); //null

解释下上面的例子：

• 先定义一个变量，如果变量未赋值，那么就是 undefined;
• 如果赋值了，那么 undefined 的任务也就完成了；
• 但如果赋值为一个 null，那么结果也就是 null 了；

说到这里，你可能又会问：“好端端的我赋值一个 null 作甚？”

好吧，你是一个充满好奇心的人，且听洒家慢慢道来。

关于Null

在Js中，你可以这么归类：“除了基本数据类型外，其余变量全部是对象”。

关于这句话解释下：

• 基本数据类型，包括：undefined,null,number,string,boolean（个人觉得不应有object）
• 所有的函数都可归结为对象（只不过创建对象的函数名遵循首字母要大写罢了）

如果按照这么分类，那么 null 的一个作用就凸显了。

给一个变量赋值，基本数据类型可以直接赋值，那么我要赋值一个对象，或者清空一个对象的赋值，该怎么办呢？

那就发面一个空的对象吧，即：null。

当然变量被赋值为 null 后，还有另一层作用，那就是方便JS引擎对这个变量进行垃圾回收。

在JS中，凡是不用的变量，JS会定期清理掉。当我们把一个对象设置为 null 时，其实也就等于把这个对象标记为不用了，可以垃圾回收了。

参考

• http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html
• http://stackoverflow.com/questions/5076944/what-is-the-difference-between-null-and-undefined-in-javascript
• Mozilla > 垃圾回收

经验分享-jQuery.extend使用注意

问题

最近项目中有个需求，就是查询条件可以动态追加，也就是有个按钮，点击后增加查询条件，比如：查询条件中有个select，点击添加，就多一个select。

于是出现的问题是，添加一个select，option的默认值就是上一个select中选中的值，而不是默认选择第一个！

原因

实现思路大致为：

1. 将select中的值放到一个数组list中；
2. 每次新增select，就copy这个数组的内容，然后绑定到mvvm框架的vm对象上
3. 前端渲染出来，同时增加双向绑定功能

大致实现思路是：

var ary = {
    type1 : [{
            id : 1,
            name : 'name1'
        },{
            id : 2,
            name : 'name2'
        }],
    type2 : [{
            id : 3,
            name : 'name3'
        },{
            id : 4,
            name : 'name4'
        }]
};

var vm1 = $.extend({},ary);

页面上使用的是MVVM框架 avalon 的双工绑定 duplex。

问题就出现在：

var vm1 = $.extend({},ary);

看下文的分析。

分析

先来看看 jQuery.extend 的用法：

//通过递归的方式，将a对象的所有属性复制到b对象上
$.extend(true, b, a);

//如果不使用递归，而是浅拷贝，则：
$.extend(b, a);

• 而上面直接使用浅拷贝复制一个对象，也就是每次给 vm1 赋值的时候，其实是 ary 对象的一级节点的引用！
• 最后这个对象绑定到select中，而页面上变化后，会改变这个对象，其实就间接影响到了 ary 对象。
• 所以，下次新增的时候，在使用这个 ary 模板的时候，其实已经被更改了。

所以，这个问题最根本的解决办法就是使用深拷贝，即：

var vm1 = $.extend(true,{},ary);

补充

• ES6的 Object.assign 也是浅拷贝，请注意使用。
  • 参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
• 要实现 Object.assign 的深拷贝，可以自己写方法
  • 参考：https://stackoverflow.com/questions/27936772/how-to-deep-merge-instead-of-shallow-merge
• jQuery.extend 的源代码，jquery源码中搜索：jQuery.extend
  • 访问：https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js

web前端目录中的 lib 和 vendor 到底有啥区别？

讨论

先来看看定义：

• lib，即libraries
• vendor，即third-party libraries

从这个层面上来看，vendor应该是lib的一个子集。

于是，第一种目录关系出现了，即：

|- lib
   |- plugin
   |- util
   |- ...
   |- vendor
	  |- jquery/
	  |- boostrap/ 

以上目录结构也没有错，但是总感觉有些不妥，哪里不妥呢？

就是自己项目的函数库和第三方的混到一起，使得有以下问题：

• 动静不分，即经常修改的和经常不修改的混合；
• vendor，有可能使用cdn，到时候剥离起来，还得从lib/目录下删掉，影响整个结构

鉴于以上分析，有人提出了这样的概念：

• lib，application libraries，也就是自己应用内的函数库
• vendor，即third-party libraries，也就是第三方库

于是，第二种目录关系出现了，即：

|- lib
   |- plugin
   |- util
   |- ...
|- vendor
   |- jquery/
   |- boostrap/ 

这种目录结构是，lib 和 vendor 是同级的。

结论

经过仔细分析和实际项目使用，个人觉得第二种方案更适合项目规范和开发流程，我们目前就采用第二种方案。

参考

• What is the difference between the “lib” and “vendor” folders?
• Project directory structure

站在巨人的肩膀上，你才能走的更远！
但前提是你得思考，思考，再思考！重要的事情说三遍，不然你就不是站在肩膀上，而是跟在屁股上！

23条军规

目录

• 翻译：http://www.cnblogs.com/flyfish2012/p/3911846.html
• 原文：http://yslow.org/

详情

• 原文：http://developer.yahoo.com/performance/rules.html
• 中文：performance-rules-web-site.pdf

个人觉得，里面的每一条都应该仔细研读！

参考

• http://www.ghugo.com/performance-rules-web-site/

对于JS的闭包（Closure）的概念，以及闭包的作用域具有全局性。我针对我自己的实战感受，这里简单谈谈。

概念

闭包（Closure），是指有权访问另一个函数作用域中的变量的函数。

创建闭包，常见的一种方式就是在一个函数内部创建另一个函数。

概念引自：JavaScript 高级程序设计（第三版） 中 7.2 闭包 一节，178页。

示例

举个例子来解释下这个概念：

var name = 'window';
function outerFun(){
    var name = 'night';
    console.log('1',this.name);
    var innerFun = function(){
        console.log('2',name);
        console.log('3',this.name);
    };
    return innerFun;
};

outerFun()();

结果：

1 window
2 night
3 window

分析

示例代码在执行的时候，可以进行如下分解：

var name = 'window';
var fun1 = outerFun();
var fun2 = fun1();//fun2是fun1的闭包
fun2();//最终调用

再来继续加工下：

window.name = 'window';
window.fun1 = window.outerFun();
window.fun2 = window.fun1();//fun2是fun1的闭包
window.fun2();//最终调用

为什么能这么变形呢?因为在最外层，其实所有变量都是window对象的！

经过上面的分解，我们知道最终调用 fun2() 的时候，其实fun2函数，已经相当于是window环境了。

所以，我们知道任何闭包，都是最终都相当于在window环境下执行的，这也就是为什么闭包的作用域具有全局性了。

深究

接下来再来看单独拆分下每个函数：

fun1的函数：

var name = 'window';
function fun1(){
    var name = 'night';
    console.log('1',this.name);
}

为什么 fun1 中的结果是：window 而不是 night？

知识点：

1. 我们知道，任何一个函数在执行的时候，首先会为其创建一个上下文环境，接着初始化2个变量：this 和 arguments，fun1中的this（调用它的对象，也叫活动对象），即：window
2. 全局作用域 和 局部作用域 的最大区别就是，局部作用域在函数内部定义，并且在非闭包的情况下，函数运行完毕就释放掉了。

所以：

console.log('1',this.name);其实就是在window中寻找 name 属性，这个肯定是 window 了，因为在函数之前，我们定了 var name= window.name。

至于 fun1 中的 name 其实在函数中，根本就没有被使用，而如果我们不明确指定 this.name，即：

var name = 'window';
function fun1(){
    var name = 'night';
    console.log('1',name);
}

那么结果肯定是：night，再如果fun1内部未定义name，那么最终还是会通过原型链（或者叫上下文）找到全局的name。

fun2的函数：

function fun2(){
   console.log('2',name);
   console.log('3',this.name);
}

fun2所处的活动对象其实有3个：

1. 自身函数
2. fun1函数
3. window函数

console.log('2',name); 会优先从内部寻找 name 变量，没找到！那么就从为其提供闭包的父函数 fun1 中找，找到了，即：night

console.log('3',this.name); 这里明确指定了 this.name 那么，系统就会从原型链开始寻找 this.name ，由于 this 指向的是 window ，那么结果自然就是：window

扩展

其实闭包函数，在我们的日常工作中经常用到。

定义对象过程中经常会涉及到

//通过字面量定义一个对象obj
var obj = {
    name : 'night',
    bindEvent : function(){
        var _self = this;
        $('#btn').click(function(){
            console.log('hello ' + _self.name);
        });
    }
};

方法中包含setTimeout

//3s后显示：hello night
function delayDisplay(){
    var name = 'night';
    setTimeout(function(){
        console.log('hello ' + name);
    },3000);
};

其实，还有很多这方面的例子，但是不管怎么样，你要记住一个概念：函数中的函数。

而且闭包有一个优势：就是能访问创建闭包对象的变量。

要了解 Google搜索和手气不错的区别 ，请大家跟着我的思路来慢慢分析。

揭秘

我自从2013年开始，零星时间做 歌德书签 的过程中想了很多很多， 歌德书签 也经历了3个大的版本调整，而大家现在能看到的页面上的所有功能，也是我认为最应该保留的。

• 歌德书签 的使命：为IT人士提供友好的书签分类收藏。
• 歌德书签 的目标人群：IT人士。
• 歌德书签 的自身定位：IT人士办公入口。

注意： 小白用户就可以略过了，因为我建议你使用 hao123。或者如果您的网址收藏不超过10个，那么建议你使用浏览器自带的书签收藏功能。

在做产品的过程中，我对一个观点非常认同，即：“一个产品不在于你能增加多少功能，而在于你能舍弃多少功能。”

歌德书签 中要不要搜索的功能的问题困扰了我很久，最终决定一定要保留！因为既然歌德书签是入口，那么对于已收藏的书签，点击后直接打开目标页；而当用户在书签主页，突然想打开一个未知网站，或者搜素一个关键词的时候，你没有入口，难道让用户再在新标签页打开百度或者Google，搜索吗？那这就会让用户很忧虑，只有收藏的东西才能快速访问，没收藏的还得借助外力。

而 歌德书签 主要功能在于书签分类收藏，而搜索并非其使命！但是这个又是用户一个附加必要功能。如果搜索做的太厚？自己有点得不偿失，做薄了，用户可能还是得打开百度或者Google搜索。

周鸿祎说过，“自己一定要是自己产品的忠实粉丝，不然做不好产品。”，这点我深有体会。我自己在用的过程中发现，我收藏的网址，只是在一天工作开始的时候点击打开，或者零星工作中打开。而搜索这个功能，在我工作中占了很大一部分比例，也就是这是一个高频的事情。所以，搜索这个功能一定要有，而且要极力做到好用。

再确定了搜索要保留到 歌德书签 中，而且要做好的情况下，我就一直思考这个事情。其中，有一个点是这样的，我后台调用的是百度或者Google的API搜索，这个我只能这么做。但是从体验上，我每次搜索结果后，总是跳转到百度或者Google的搜索列表页面，然后再点击具体结果进入目标地址。

这里就有一个问题，比如我想进入一些官网，如：新浪网、新网微博、腾讯官网、人人网等等已非常明确关键词的网址，我搜索后依然需要先打开列表页，然后这些官网一般都是搜索结果的第一个，再点击进入。

也许你习惯了这个流程，反而没什么感觉，不就是多了一步嘛！但是，当你一旦觉察到这个事情后，你越这么搜索越觉得啰嗦！不信你现在去百度下 歌德书签，再打开 歌德书签，是不是觉得很麻烦？

说到这里，大家应该知道了Google的 手气不错 是干什么用的了吧？它就是直接打开你搜索关键词的最匹配网页，而不需要再看到中间的搜索结果。

话又说回来，怎么百度没有这个功能？肯定不是百度不知道这个事情，而是这个它根本不培养用户的这个使用习惯，为什么呢？

1. 如果有搜索列表页，是不是可以在列表页上增加广告？
2. 技术上，不一定能做到你搜索的关键词一定能打开你期望的网址！这也是Google为什么把这个按钮叫 手气不错 了。而如果一旦达不到期望，用户还是要搜索，那还不如直接搜索呢，绕着弯子干嘛？

体会

什么是用户体验？个人理解：舍身处地的使用，触类旁通的思考，持续不断的改进。

反思

关于 歌德书签 的搜索功能，目前很多没做到位！

1. 为什么让用户切换搜索引擎？ 相当然的把判断权利交给用户，让用户埋单。
2. 用户关心搜索引擎是 百度 Or Google 吗？ 其实TA需要的是结果！

改进

用户期望的是最终结果，而不在乎这个结果是通过 百度、Google 还是 站内。只要抓住这个点，其实接下来就是实现方式而已。

源码目录树构建技巧

曾几何时看到别人的代码目录展示如下，非常的漂亮，于是我就把别人的这棵树拷贝过来，一个个修改变成自己的树，如下：

project
├── dist
│   ├── css
│   │   └──  ...
│   │
│   └── js
│       ├── ...
│       │   ├── ...
│       │   ├── ...
│       │   └── ...
│       │
│       ├── ...
│       │   ├── ...
│       │   ├── ...
│       │   └── ...
│       │
│       ├── ...
│       └── ...
│
└── src
    ├── css
    │   ├── ...
    │   │   ├── ...
    │   │   ├── ...
    │   │   └── ...
    │   │
    │   ├── ...
    │   └── ...
    │
    └── js
        ├── ...
        │   ├── ...
        │   ├── ...
        │   ├── ...
        │   ├── ...
        │   └── ...
        │
        ├── ...
        │   ├── ...
        │   ├── ...
        │   └── ...
        │
        ├── ...
        │   ├── ...
        │   ├── ...
        │   ├── ...
        │   └── ...
        │
        ├── ...     // ...
        └── ...    // ...

现在告诉大家，一个命令就可以搞定了！无论是windows和linux，在shell窗口直接输入：

> tree

关于这个命令的参数，请参考：

• windows：https://www.microsoft.com/resources/documentation/windows/xp/all/proddocs/en-us/tree.mspx?mfr=true
• linux：https://www.computerhope.com/unix/tree.htm

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 如何模块化开发？(⊙o⊙)…？顿时脑子里有点懵！其实，html模块化开发，可以有很多办法，比如：

  • 使用js模板引擎，将html模块化为模板，然后在使用的时候通过ajax载入，但是这个不利于SEO；
  • 另一个办法是分模块开发，使用gulp等工具打包的同时，使用gulp的一些include的插件，重新编译html文件；
  • 且看下文！

二、html如何include

通过上面的分析，我们至少有了2种办法，来分模块开发html，但是我们不使用js，也不用gulp等编译工具，有木有办法 include 一个模板？答案是：有。

我们都知道动态脚本语言都有include方法，比如：

• JSP

<jsp:include>
<jsp:forward>

• ASP

<!--# include file="file.tpl" -->

但是 html 这种静态的页面，如何实现include呢？答案是：SSI技术。

• 什么是SSI

SSI 全称是 Server Side Include，也就是服务端引入技术，引入的是什么呢？是CGI。

• 什么是CGI

CGI 全称是 Common Gateway Interface，也就是通用网关接口，一个在Web服务器中使用的技术。

通过SSI引入CGI就可以实现服务器端Include，那具体怎么做呢？

看看Apache服务器的SSI，你就全然知晓啦！

移步至：https://httpd.apache.org/docs/current/howto/ssi.html

现在知道html中如何使用include了吧，说白了，只要web服务器支持的语法，html就可以写。

以后在html中见到如下语句，不要惊慌，那是SSI，而不是什么PHP语法，也不是JSP语法

<!--# include virtual="xxx" -->

SSI的问题

1. 特定语法对于特定的WEB容器有强依赖，以后更换WEB容器可能导致程序无法运行；
2. 性能问题
3. 安全问题

参考：http://www.t086.com/code/apache2.2/misc/security_tips.html

经验分享-提高生产效率的一些编码技巧（1）

本文包含了一些个人开发经验总结和设计模式的总结，希望能给大家有所帮助。

条件语句if使用技巧

将代码少的逻辑放到if中，而更多的逻辑当成正常系处理，更有利于阅读和理解。

方法

原始代码：

if(condition){
    //中间有100行代码
}else{
    //这里只有1行代码！
};

以上逻辑最好的书写规范是：

if(!condition){
    //1行代码！
    return;
};

//剩余100行代码

案例

原始代码：

selectCategory : function(categoryId, isRedirect) {
    if (categoryId) {
        $('#userPersonasTagDrop .input-group').hide();
        $('#tagSubCategory').addClass('subcategory-not-all').show();
        
        walleUtilStorage.setItem(this.storageLocalCategoryId, categoryId);
        walleUtilStorage.setItem(this.storageLocalTagId, '');
        
        isRedirect      // 比如从收藏夹跳转过来
            ? $('#tagSubCategory span:first').text(this.model.queryParam.tagName)
            : $('#tagSubCategory span:first').text('请选择标签');
        isRedirect || this._getPersonasTagList(categoryId, '', true);
        
    } else {
        $('#userPersonasTagDrop .input-group').show();
        $('#tagSubCategory').hide();
        $('#collectBtn').attr('disabled');
        $('.item-group-search').attr('disabled');
    }
}

优化后：

selectCategory : function(categoryId, isRedirect) {
    //优化1
    if (!categoryId) {
        $('#userPersonasTagDrop .input-group').show();
        $('#tagSubCategory').hide();
        $('#collectBtn').attr('disabled');
        $('.item-group-search').attr('disabled');
        return;
    };
    
    $('#userPersonasTagDrop .input-group').hide();
    $('#tagSubCategory').addClass('subcategory-not-all').show();
    
    walleUtilStorage.setItem(this.storageLocalCategoryId, categoryId);
    walleUtilStorage.setItem(this.storageLocalTagId, '');
    
    //优化2
    if(!isRedirect){
        $('#tagSubCategory span:first').text('请选择标签');
        return;
    };
    
    $('#tagSubCategory span:first').text(this.model.queryParam.tagName)
    this._getPersonasTagList(categoryId, '', true);
}

参考

• 代码大全，第15章

重复语句for循环化（表驱动法）

代码中发现有太多重复的语句，看似相同，但是又有些不同，于是乎就本能的习惯使用if语句写一大片！

其实最好的做法是代码去重！

核心的**： 就是想尽一切办法将相似的部分放到一个对象或者数组中，然后循环处理。

示例1

显示一年内各个月的天数。

• 最low的写法：

function getDaysByMonth(month){
    var days = 0;    
    if(month == 1){
        days = 31;
    }else if(month == 2){
        days = 28; // 不用考虑闰年的情况
    }else if(month == 3){
        days = 31；
    }else if(...){
        ...
    };
    return days;
};

• 采用表驱动法的思路

function getDaysByMonth(month){
    //创建一张表
    var daysAry = [31,28,31,30,31,30,31,31,30,31,30,31];
    return daysAry[month];
};

示例2

原始代码：

if (currentIdx === model.TAB_SYSTEM) { model.searchKeyWd.systemKeyWd = $searchInput.val(); }
if (currentIdx === model.TAB_MODULE) { model.searchKeyWd.moduleKeyWd = $searchInput.val(); }
if (currentIdx === model.TAB_AUTH) { model.searchKeyWd.authKeyWd = $searchInput.val(); }

优化：

var mapper = [{
    key : model.TAB_SYSTEM,
    model : model.searchKeyWd.systemKeyWd
},{
    key : model.TAB_MODULE,
    model : model.searchKeyWd.moduleKeyWd
},{
    key : model.TAB_AUTH,
    model : model.searchKeyWd.authKeyWd
}];

for(var i=0,size=mapper.length;i<size;i++){
    var obj = mapper[i];
    if(currentIdx === obj.key){
        obj.model = $searchInput.val();
    };
};

示例3

原始代码：

function fun1(){
    confirmTodoObj.todo === todoType.SYSTEM_UPDATE && result && result();
    confirmTodoObj.todo === todoType.MODULE_UPDATE && result && result();
    confirmTodoObj.todo === todoType.AUTH_UPDATE   && result && result();
    confirmTodoObj.todo === todoType.SYSTEM_ADD    && result && result();
    confirmTodoObj.todo === todoType.MODULE_ADD    && result && result();
    confirmTodoObj.todo === todoType.AUTH_ADD      && result && result();
}

优化1：

function fun1(){
    if(!result){
        return;
    };
    
    if(confirmTodoObj.todo === todoType.SYSTEM_UPDATE
        || confirmTodoObj.todo === todoType.MODULE_UPDATE
        || confirmTodoObj.todo === todoType.AUTH_UPDATE
        || confirmTodoObj.todo === todoType.SYSTEM_ADD
        || confirmTodoObj.todo === todoType.MODULE_ADD
        || confirmTodoObj.todo === todoType.AUTH_ADD){
    
        result();
    };
}

优化2：

function fun1(){
    if(!result){
    return;
};

switch(confirmTodoObj.todo){
    case todoType.SYSTEM_UPDATE:
    case todoType.AUTH_UPDATE:
    case todoType.SYSTEM_ADD:
    case todoType.MODULE_ADD:
    case todoType.AUTH_ADD:
        result();
        break;
};

最终优化：

function fun1(){
    if(!result){
        return;
    };
    
    var checkKeyList = [
        'SYSTEM_UPDATE',
        'AUTH_UPDATE',
        'SYSTEM_ADD',
        'MODULE_ADD',
        'AUTH_ADD'
    ];
    
    for(var i=0,size=checkKeyList.length; i<size; i++){
        if(confirmTodoObj.todo === todoType[checkKeyList[i]]){
            result();
        };
    };
}