AMD 支持

AMD 定义了 define 函数，可以用 define 探测该函数是否定义，或进一步用 define.amd 是否有定义（用于检测是否在 AMI）环境，如果是，就用 define 定义模块，如果不是，继续检测是否运行于 CommonJS 中，比如 NodeJS，如果是，则将 my 复制给 module.exports。

1
2
3
4
5
6
7
8
9

var MODULE = function() {
  var my = {};
  // 代码……
  if (typeof define == "function") {
    define(function() {
      return my;
    });
  }
};

• 1em=16px（浏览器默认值）

• 在 before 或 after 伪类中使用字体图标时，记得设置 font-weight，否则显示不出来

• oncontextmenu=”return false” 在

  标签中用来取消鼠标右键

• 使用数学运算的时候，可以先查看 Math 对象。运行速度比用 js 算快。

• 使用缓存机制来提升页面回访效率。

• jquery 在 1.9 开始的版本都不支持 live()和 bind()方法了，全部都改成 on()方法

工程结构

工程目录结构如下
/bin # —— 命令执行文件
/lib # —— 工具模块
package.json

使用 commander.js 开发命令行工具

nodejs 内置了对命令行操作的支持，node 工程下 package.json 中的 bin 字段可以定义命令名和关联的执行文件。

1
2
3
4
5
6
7
8

{
  "name": "demo-cli",
  "version": "1.0.0",
  "description": "我的cli",
  "bin": {
    "demo": "./bin/demo.js"
  }
}

在bin目录下创建一个 demo.js 文件，用于处理命令行的逻辑。
在 demo.js 中编写命令行的入口逻辑

1
2
3
4
5
6
7
8
9

#!/usr/bin/env node

const program = require('commander')  // npm i commander -D

program.version('1.0.0')
	.usage('<command> [项目名称]')
	.command('hello', 'hello')
	.parse(process.argv)

接着，在 bin 目录下创建 demo-hello.js，放一个打印语句

1
2

touch ./bin/demo-hello.js
echo "console.log('hello, commander')" > ./bin/demo-hello.js

这样，通过 node 命令测试一下

1

node ./bin/demo.js hello

可以在终端上看到一句话：hello, commander。

Mac 安装 Homebrew 速度慢的解决办法，采用国内镜像：

1

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

以下代码以react为例：

Object 对象

Object.prototype.toString

判断对象属于什么类型

1
2
3

var toString = Object.prototype.toString;
var a = toString.call(new Date()); // [object date]
var b = a.slice(8, -1); // b=date

Object.prototype.hasOwnProperty

返回一个布尔值，指示对象自身属性中是否具有指定的属性

1
2
3
4
5
6
7

var foo = {
  hasOwnProperty: function() {
    return false;
  },
  bar: "Here be dragons"
};
Object.prototype.hasOwnProperty(foo, "bar"); // true

canvas 宽高设置

canvas 的宽高需要写在 html 上，如下代码:

1

<canvas width="800" height="600"></canvas>

如果你用 CSS 设置的话它会变成拉伸，变得比较模糊。

颜色、样式和阴影

• 正确的标签做正确的事情
• 页面内容结构化
• 无CSS样子时也容易阅读，便于阅读维护和理解
• 便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO

语义元素

• 非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。
• 语义元素的例子：<form>、<table> 以及 <img> - 清晰地定义其内容。

能用 HTML/CSS 解决的问题就不要用 JS

导航高亮

可以用 class 来标识菜单是否选中，选中的 class 增加特殊样式，:hover 选择器可以用来表示鼠标悬浮的样式

鼠标悬浮时显示

使用 :hover 选择器实现

自定义 radio/checkbox 的样式

input 始终隐藏，通过设置 span.checkbox 的样式来实现自定义样式，通过 :checked 伪类更改选中状态的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<style>
    input[type=checkbox]{
    display: none;
    }
    /* 未选中的 checkbox 的样式 */
    .checkbox{
        /* 具体实现 */
    }
    input[type=checkbox]:checked + .checkbox{
        /* 具体实现 */
    }
</style>
<label>
    <input type="checkbox">
    <span class="checkbox"></span>
</label>

页面加载过程

• 浏览器根据 DNS 服务器查询得到域名对应的 IP 地址
• 向这个 IP 机器发送 HTTP 请求
• 服务器收到、处理并返回 HTTP 请求
• 浏览器得到返回的内容

例如访问 GitHub，会解析得到 IP 地址为 52.74.223.119，浏览器会向这个地址发送 HTTP 请求。