发表于   |   分类于 ，   |     |   阅读次数

问

js 设置 canvas 宽高为浏览器可用宽高，滚动条仍然出现，如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CANVAS</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html,
    body {
      height: 100%;
    }
    #canvas {
      background-color: #cba;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    var canvas = document.getElementById('canvas');
    canvas.width = document.body.clientWidth;
    // canvas.width = window.innerWeight;
    canvas.height = document.body.clientHeight;
    // canvas.height = window.innerHeight;
    context = canvas.getContext('2d');
    context.beginPath();
    context.arc(100, 100, 50, 0, 1.5 * Math.PI, true);
    context.closePath();
    context.strokeStyle = '#f0f';
    context.stroke();
  </script>
</body>
</html>

答

用一元素包裹一下即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    .canvas-box {
      /* IE兼容问题 */
      /* display: flex; */
      font-size: 0;
    }
    canvas {
      background-color: #fcf;
    }
  </style>
</head>
<body>
  <div class="canvas-box">
    <canvas></canvas>
  </div>
  <script>
    var canvas = document.querySelector('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  </script>
</body>
</html>

发表于   |   分类于 ，   |     |   阅读次数

转载：http://zcfy.cc/article/what-is-the-execution-context-amp-stack-in-javascript-by-david-shariff-4007.html
原文：http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/

在这篇文章里，我会深入地探讨 JavaScript 中最基本概念之一，那就是执行上下文。通过这篇文章，你应该能够清楚地了解到 JS 解释器究竟在干嘛，为什么可以在一些函数和变量声明之前就能使用，以及它们的值是怎样被决定的。

什么是执行上下文（Execution Context）?

当 JavaScript 代码在运行的时候, 它所在的执行环境是非常重要的, 通常认为是以下其中之一:

  • Global code – 默认环境，你的代码首次执行的地方。
  • Function code – 当代码执行进入到函数体当中。
  • Eval code – 在 eval 函数内部执行的文本。
    在网上你可以找到很多关于 作用域 的文章, 本文的目的就是让你更加轻松地理解这些概念。让我们想象术语 执行上下文 就是当前代码的执行环境 / 作用域。 不多说了, 让我们看看一个代码既在 全局 又在 函数 / 局部 上下文中执行的例子。

阅读全文 »

发表于   |   分类于 ，   |     |   阅读次数

转载：http://mp.weixin.qq.com/s/lPb5BtW16-3AQTXecEVlzA
原文：www.zcfy.cc/article/what-every-javascript-developer-should-know-about-unicode-1303.html

每次遇到需要Unicode知识的编程问题时，我总是找一个hack方案来解决，但解决方案的原理我也不懂。

直到遇见一个需要深入了解Unicode知识才能解决的问题，我才停止了这种逃避。因为这个问题没办法应用特定情境的解决方案。

在努力读了一大堆文章之后，我惊讶地发现Unicode并不难懂。好吧，确实是有些文章起码得看3遍才能看懂。

但我发现Unicode标准不仅世界通用，而且十分优雅简洁，只不过要理解其中一些抽象概念有点困难。

如果你觉得理解Unicode很难，那么是时候来面对它了！其实它没你想的那么难。去沏一杯香浓的茶或咖啡吧☕，让我们进入抽象概念、字符、星光平面(辅助平面)和代理对的世界。

本文首先会解释Unicode中的基本概念，这是必需的背景知识。

然后会说明JavaScript如何解析Unicode，以及你可能踩到哪些坑。

你还会学到如何利用ECMAScript 2015的新特性来解决部分难题。

准备好了？那就燥起来吧!

阅读全文 »

发表于   |   分类于   |     |   阅读次数

更新于：2017年8月31日16:24:13
主要参考：ECMAScript 6 入门

let 和 const 命令

不存在变量提升

var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

1
2
3
4
5
6
7
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。

阅读全文 »

发表于   |   分类于 ，   |     |   阅读次数

转载：http://www.zcfy.cc/article/how-to-get-the-most-out-of-the-javascript-console-freecodecamp-3249.html

JavaScript 最基础的 debug 工具之一就是console.log()。console也自带其他一些其他有用的方法，可以丰富开发者的 debug 工具包。

你可以用console来完成下面这些任务：

  • 输出一个定时器帮助进行简单基准测试
  • 输出一个表格，用易于阅读的格式展示一个数组或对象
  • 应用 CSS 颜色和其他样式输出内容

Console 对象

console对象赋予了你访问浏览器控制台的权限。它允许输出字符串，数组和对象，这对调试代码很有帮助。console对象是window对象的一部分，被浏览器对象模型(BOM)所支持。

我们可以通过下面两种方式的任一种来访问console

阅读全文 »

发表于   |   分类于 ，   |     |   阅读次数

更新于：2017年8月30日11:29:21

零零碎碎

首字母大写

组件首字母要大写，React 会将小写开头的标签名认为是 HTML 原生标签

扩展属性

如果你已经有了个 props 对象，并且想在 JSX 中传递它，你可以使用 ... 作为扩展操作符来传递整个属性对象。下面两个组件是等效的：

1
2
3
4
5
6
7
8
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

当你构建通用容器时，扩展属性会非常有用。然而，这样做也可能让很多不相关的属性，传递到不需要它们的组件中使代码变得混乱。React建议你谨慎使用此语法。

ant-design-mobile

Create React App

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 1. 自定义配置，需要执行，此操作为单向不可逆
yarn eject
# 2. 路由
React-Router
# 3. 图表的支持
echarts-for-react
# 4. sass支持
sass-loader
node-sass
# 5. 路由依赖加载
lazy-load-react

生命周期

1. 初始化过程
1
2
3
4
1. constructor
2. componentWillMount
3. render
4. componentDidMount
2. 更新过程
1
2
3
4
shouldComponentUpdate # true 执行以下过程， false 中断更新
1. componentWillUpdate
2. render
3. componentDidUpdate

事件处理

  • 使用 camelCase 模式 onClick
  • 阻止默认事件 ev.preventDefault
  • 事件的 this 问题
    1
    2
    3
    4
    5
    6
    // 1. 使用 bind 绑定，优先使用该方式
    this.method = this.method.bind(this)
    // 2. 试验特性
    method = () => {}
    // 3. 性能问题
    onClick={() => this.method()}

Refs & DOM

如果可以通过声明式实现，则尽量避免使用 refs。

例如，不要在 Dialog 组件上直接暴露 open() 和 close() 方法，最好传递 isOpen 属性。

React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数，它在组件被加载或卸载时会立即执行。

  • 当给 HTML 元素添加 ref 属性时，ref 回调接收了底层的 DOM 元素作为参数。例如，下面的代码使用 ref 回调来存储 DOM 节点的引用。

    1
    <input type="text" ref={(input) => { this.textInput = input; }} />

  • 当 ref 属性用于使用 class 声明的自定义组件时，ref 的回调接收的是已经加载的 React 实例。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    class AutoFocusTextInput extends React.Component {
      componentDidMount() {
        this.textInput.focus();
      }
      render() {
        return (
          <CustomTextInput
            ref={(input) => { this.textInput = input; }} />
        );
      }
    }

    需要注意的是，这种方法仅对 class 声明的 CustomTextInput 有效

    1
    2
    3
    class CustomTextInput extends React.Component {
      // code here
    }

你不能在函数式组件上使用 ref 属性，因为它们没有实例

1
2
3
4
5
6
7
8
9
10
11
12
13
function MyFunctionalComponent() {
  return <input />;
}
class Parent extends React.Component {
  render() {
    // 这里 `ref` 无效！
    return (
      <MyFunctionalComponent
        ref={(input) => { this.textInput = input; }} />
    );
  }
}

如果你想使用 ref，就像你想使用生命周期方法或者 state 一样，应该将其转换为 class 组件。

发表于   |   分类于 ，   |     |   阅读次数

转载：https://zhuanlan.zhihu.com/p/25596667
原文：https://blog.fortrabbit.com/mastering-http-caching

Cookies

你已经知道了缓存头是如何起作用的，现在我们来看下在缓存里面 cookie 起了什么作用。首先， Cookie 的设定也在 HTTP 响应头中，名字是 Set-Cookie。设置一个 cookie 的目的是标识这个用户，就是说你需要为每个用户设置一个 cookie。

想象一下缓存的场景，你是否会缓存一个包含了Set-Cookie的 HTTP 响应，在缓存时间内，每个人都会得到相同的 cookie 和同样的用户 session？你肯定不想这样。

另外，用户 session 状态的改变可能会影响到响应内容的变化。一个简单的场景：电商购物车。你给用户要么提供一个空购物车，要么是用户自己选了很多物品的购物车。同样的道理，你不希望这个也被缓存，毕竟每个用户都应该有自己的购物车。

一个解决方法是在运行时通过 JavaScript 设置 Cookie，比如 Google Analytics。GA 通过 JS 设置 cookie，但这个 cookie 既不影响渲染，也不设置 Set-Cookie 头。GA 会在目标网站上添加类似于 “you are tracked via Google Analytics” 的图标，但是只要这些改变都是在运行时添加进去的，就都没有问题。

阅读全文 »

发表于   |   分类于 ，   |     |   阅读次数

转载：https://zhuanlan.zhihu.com/p/25512679
原文：https://blog.fortrabbit.com/mastering-http-caching

CDN类的网站曾经一度雄踞 Alexa 域名排行的前 100。以前一些小网站不需要使用 CDN 或者根本负担不起其价格，不过这一现象近几年发生了很大的变化，CDN 市场上出现了很多按次付费，非公司性的提供商，这使得 CDN 变成人人都能负担的起的一种服务了。本文讲述的就是如何使用这种简单易用的缓存服务。

使用内容分发网络（ CDN ）你需要先正确地认识 HTTP 响应头：和 HTTP 响应头中的哪些标签相关？它们是怎么起作用的？如何使用它们？文章中我会回答这些问题。

本文讲的并不会像教科书那么精确，实际上在某些情况下，为了叙述的清晰、简洁，我会按自己的理解简化某些问题，文章中会通过一些实际的例子来介绍缓存理论。在这篇文章的基础上，还会写一些文章来介绍对于某些指定的 CMS 或框架如何使用 CDN 来作为缓存层。

为什么使用 CDN？

阅读全文 »

发表于   |   分类于 ，   |     |   阅读次数

环境

需要安装 node https://nodejs.org/en/

开始

  1. 新建项目 mkdir rest-api-demo && cd rest-api-demo

  2. 初始化项目 npm init

  3. 安装 npm install --save-dev json-server

  4. 在项目根目录下，新建一个 JSON 文件db.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    {
      "posts": [
        { "id": 1, "title": "json-server", "author": "typicode" }
      ],
      "comments": [
        { "id": 1, "body": "some comment", "postId": 1 }
      ],
      "profile": { "name": "typicode" }
    }

  5. 打开 package.json，在 scripts 字段添加一行

    1
    2
    3
    4
    "scripts": {
      "server": "json-server db.json", // 新加行
      "test": "..."
    }

  6. 启动服务 npm run server

    1
    2
    3
    4
    5
    6
    7
    8
    9
    \{^_^}/ hi!
    Loading db.json
    Done
    Resources
    http://localhost:3000/posts
    http://localhost:3000/comments
    http://localhost:3000/profile

三个接口已经生成，支持post(新增) delete(删除) put(修改) get(查询);
推荐使用 postman 进行测试

自定义路由 custom routes

  1. 创建一个JSON文件 routes.json
    必须以/开始

    1
    2
    3
    4
    5
    {
      "/api/": "/",
      "/blog/:resource/:id/show": "/:resource/:id",
      "/blog/:category": "/posts/:id?category=:category"
    }

  2. 修改启动参数 package.json

    1
    2
    3
    4
    "scripts": {
      "server": "json-server db.json --routes routes.json", // 修改行
      "test": "..."
    }

  3. 启动服务 npm run server

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    \{^_^}/ hi!
    Loading db.json
    Loading routes.json
    Done
    Resources
    http://localhost:3000/posts
    http://localhost:3000/comments
    http://localhost:3000/profile
    Other routes
    /api/ -> /
    /blog/:resource/:id/show -> /:resource/:id
    /blog/:category -> /posts/:id?category=:category

参考代码：JavaScript-study/rest-api-demo

详情查看：https://www.npmjs.com/package/json-server

发表于   |   分类于   |     |   阅读次数

三种方式，返回同样的结果

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
let f1 = (): Promise=> {
  return new Promise((resolve, reject)=> {
    resolve("f1");
  });
}
let f2 = (str): Promise=> {
  return new Promise((resolve, reject)=> {
    resolve("f2" + str);
  });
}
console.log("方式一");
f1()
  .then(result=> {
    return f2(result)
  })
  .then(result => {
    return console.log(result)
  });
console.log("方式二");
f1()
  .then(result=> f2(result))
  .then(result => console.log(result));
console.log("方式三");
f1()
  .then(f2)
  .then(console.log);
阅读全文 »