两个问题

1.window 和 document 的区别?
window 表示浏览器中打开(包含DOM文档)的窗口
window 是可以省略的,如 alert();window.alert()

document 表示任何在浏览器中已经加载好的网页，并作为一个入口去操作网页内容（也就是DOM tree）
document 对象是 window 对象的一部分,如 document.body;window.document.body

2.window.location 和 document.location 一样吗?
window.location 只读属性，返回一个 Location 对象,表示该窗口当前显示文档的URL相关信息

document.location 只读属性，返回一个 Location 对象,表示该文档的URL相关信息
window.location === document.location;//true 即使在 iframe 中也是一样的

尽管 window.location 是一个只读 Location 对象，你仍然可以赋给它一个 DOMString。
这意味着您可以在大多数情况下处理 location，就像它是一个字符串一样：window.location = 'http://www.example.com'，
是 window.location.href = 'http://www.example.com'的同义词 

角标

应用角标是iOS的一个特色,原生Android并不支持。
第三方深度定制过的android系统有此类功能,如：三星、小米、魅族、华为等。
各方产商定制方法各不相同,我选择使用第三方开源的项目实现。

环境

1
2
3

"react": "16.3.1",
"react-native": "0.55.4",
"ShortcutBadger":"1.1.22" // 这个不是 package.json 的 dependencies

ShortcutBadger 引入

1.下载
通过 git
git clone https://github.com/leolin310148/ShortcutBadger.git
或 直接下载zip文件
ShortcutBadger github地址
2.解压 将文件放入工程 android 文件夹中

也可将文件放在其他位置

mp4 视频 无法在 chrome 中播放

chrome 支持 H.264 格式的视频

为了推广H.264，MPEG-LA规定，只要你的视频用于互联网上的免费播放，就可以无偿获得使用许可证。所以YouTube可以免费使用MPEG-LA许可证。

chrome video 无法自动播放

添加 muted 属性可解决

1

<video muted autoplay src=""></video>

遇到一个需求,需要截取网页上多张指定位置指定尺寸的图片,我想这简单,找一个可以设置截图矩形框的截图软件,自己在将矩形框挪到我想要的位置不就可以了(虽然累了点),
然后我就去找啊找啊…两个小时就过去了,居然找不到!

screencapture

不可不知的Mac OS X专用命令行工具(持续更新中)
通过此篇博文了解到了 screencapture

截取屏幕 指定位置指定尺寸图片 并保存

screencapture -R 90,340,660,540 -P ./市禽畜粪便产气量.png

其中 -R 捕捉矩形区域
-P屏幕截图将在预览中打开
./市禽畜粪便产气量.png 保存的图片名称及路径 此处为当前文件夹

最近在使用别人网站图片时,出现图片在自己的网页上无法显示,但通过浏览器地址栏却能打开

1

<img src="http://images2015.cnblogs.com/blog/138012/201610/138012-20161016191639092-2000037796.png" alt="暑假5折">

通过chrome控制台发现是403错误


You do not have permission to get URL ‘/blog/138012/201610/138012-20161016191639092-2000037796.png’ from this server.

解决方法:
使用Referer Meta标签控制referer

1

<meta name="referrer" content="never">

什么是http

HTTP（HyperText Transport Protocol）是超文本传输协议的缩写，它用于传送WWW方式的数据，关于HTTP协议的详细内容请参考RFC2616。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求，请求头包含请求的方法、URL、协议版本、以及包含请求修饰符、客户信息和内容的类似于MIME的消息结构。服务器以一个状态行作为响应，响应的内容包括消息协议的版本，成功或者错误编码加上包含服务器信息、实体元信息以及可能的实体内容。
具体可看 [图解http](https://ttop5.gitbooks.io/illustration-http/content/index.html)

什么是https

超文本传输安全协议（英语：Hypertext Transfer Protocol Secure，缩写：HTTPS，常称为HTTP over TLS，HTTP over SSL或HTTP Secure）是一种通过计算机网络进行安全通信的传输协议。HTTPS经由HTTP进行通信，但利用SSL/TLS来加密数据包。HTTPS开发的主要目的，是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。这个协议由网景公司（Netscape）在1994年首次提出，随后扩展到互联网上。

http与https的区别

　　1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

　　2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

　　3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

　　4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

1、类注释

在每个类前面必须加上类注释，注释模板如下：

1
2
3
4
5
6
7
8
9

/**
* Copyright (C), 2006-2010, ChengDu Lovo info. Co., Ltd.
* FileName: Test.java
* 类的详细说明
*
* @author 类创建者姓名
* @Date    创建日期
* @version 1.00
*/

2、属性注释

在每个属性前面必须加上属性注释，注释模板如下：

1
2

/** 提示信息 */
private String strMsg = null;

3、方法注释

在每个方法前面必须加上方法注释，注释模板如下：

1
2
3
4
5
6
7

/**
* 类方法的详细使用说明
*
* @param 参数1 参数1的使用说明
* @return 返回结果的说明
* @throws 异常类型.错误代码 注明从此类方法中抛出异常的说明
*/

4、构造方法注释

在每个构造方法前面必须加上注释，注释模板如下：

1
2
3
4
5
6

/**
* 构造方法的详细使用说明
*
* @param 参数1 参数1的使用说明
* @throws 异常类型.错误代码 注明从此类方法中抛出异常的说明
*/

5、方法内部注释

在方法内部使用单行或者多行注释，该注释根据实际情况添加。

如：

1
2

//背景颜色
Color bgColor = Color.RED

原生路由

关键事件 window.onhashchange

1
2
3

<a href="#/home">home</a>
<a href="#/about">about</a>
<div id="routerPage"></div>

1
2
3
4
5
6
7

window.addEventListener('hashchange', () => {
  let hash = window.location.hash.substr(1);
  switch(hash){
      case '/about': routerPage.innerHTML=about; break;
      default:  routerPage.innerHTML=home;
  }
})

等待后续。。。。

chrome 中的 == $0

在浏览器的开发者工具中的 Elements 下 选中元素 后面会跟上 == $0
这是快速选中dom元素的方式 在 Console 输入 $0 表示的便是 当前选中的元素 ，这比选择器方便的多。

如果class名称仅作为Javascript调用的“钩子”，可在名称中添加“js”前缀

1

<div class='js-active'>Web前端开发最佳实践</div>

函数的第一个单词名称可以是动词（而不是名词），以避免与变量混淆。

1
2
3

function doSomething() {
    // 代码
}

好看的if…else

首先看个难看点的。。。

1
2
3
4
5
6

var code = 0;
if(code=0){
    show('显示')
}else if(code=1){
    show('不显示')
}

但它可以好看 一点

1
2

var codeInfo=['显示','不显示'];
show(codeInfo[code]);