实现示例

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
43
44
45
46
47
48
49
50
51
52
53
54

var eventuality = function (that) {
  var registry = {};
  //触发事件
  that.fire = function (event) {
    var array,
      func,
      handler,
      i,
      type = typeof event === "string" ? event : event.type;
    if (registry.hasOwnProperty(type)) {
      array = registry[type];
      for (i = 0; i < array.length; i += 1) {
        handler = array[i];
        func = handler.method;
        if (typeof func === "string") {
          func = this[func];
        }
        func.apply(this, handler.parameters || [event]);
      }
    }
    return this;
  };
  that.on = function (type, method, parameters) {
    var handler = {
      method: method,
      parameters: parameters,
    };
    if (registry.hasOwnProperty(type)) {
      registry[type].push(handler);
    } else {
      registry[type] = [handler];
    }
    return this;
  };
  return that;
};
var objectEventTest = {
  a: 1,
  b: 2,
  getA: function () {
    console.log(this.a);
  },
  getB: function () {
    console.log(this.b);
  },
  showC: function (c) {
    console.log(c);
  },
};
eventuality(objectEventTest);
objectEventTest.on("show", "getA");
objectEventTest.on("show", "getB");
objectEventTest.on("show1", "showC", ["show C!!"]);
objectEventTest.fire("show");

缓存意义

  在对一个网页进行访问时，需要从对应服务器端获取资源（html,js,css.img，etc）,而在获取资源的同时，会消耗网络流量。页面获得资源后才能渲染，产生一定的延迟时间。对服务器的资源也会有一定的消耗。为了优化以上存在的问题，我们采用浏览器端缓存来优化网页的性能，与之相对应

缓存的作用主要有：

• 节约带宽。
• 减少延迟。
• 降低服务器压力。

客户端（浏览器）的缓存机制

  对于浏览器的缓存，这些规则是在 HTTP 协议头和 html 页面的 meta 标签中定义的。它们从新鲜度 和校验值
需要注意的是 Http 头中的设置优先级更高一些
两个维度来决定浏览器是否可以直接使用缓存中的副本

各字段详解：http://ourjs.com/detail/581d26b271e01c68e9619152

相关资料：

• https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching

javascript 中运算符优先级

1、 . [] {}

提取属性与调用函数

2、 delete new typeof + - !

一元运算符

3、* / %

乘法，除法，求余

4、+ -

加法，减法

5、>= <= > <

不等式的运算符

6、 === ！==

等式运算符

7、 &&

逻辑与

8、||

逻辑或

9、 ? :

三元运算符
typeof 运算符产生的值有 “number”,”string”,”boolean”,”undefiend”,”function” “object” ,如果运算数是一个数组或 null ,那么返回的是”object”

JavaScript 中的位运算符：

javascript 中有着和 java 相同的一套位运算符，

• &：and 按位与

• |：or 按位或

• ^： xor 按位异或

• ~：not 按位非

• > : 带符号的右位移

• >>> : 无符号的右位移

• <<: 左位移

概览

lodash 在我们的日常开发中起到了提高开发效率的作用，有些方法我们在这里做一下备忘录

1、capitalize

作用

• 将一个字符串的首字母变成大写

示例

源码解析

2、reject

作用

示例

源码解析

1、如何进行移动端开发

真机调试

  做移动开发的时候大多数要跟手机界面打交道，也就是说，你只能在电脑上开发写代码，最终的效果确是在另一个终端虽然各种浏览器为开发者提供了很多模拟手机设备的功能，这些功能总体来说基本可以满足我们对于调试移动设备的需求，但是模拟终究是模拟，无法完全还原场景。所以，必须在想办法在真实的机子上测试我们的代码最终的执行效果。办法当然是有的，下面是露珠在开发过程中用到的若干真机调试方法：

Chrome 真机调试

  chrome 必须有硬件的接触，
首先确保手机上和 PC 机上装有最新版本的 chrome 浏览器，然后将数据线将两台设备连接起来。在 PC 机上打开 chorme，输入 chrome://inspect,
于是你就可以看到自己的设备和打开的网页了:

   设备网址下出现 inspect、reload、close 等选项，点击 inspect 会弹出一个窗口，阁下就可以在窗口中愉快地去调试了。

Chrome 手机调试工具优点：

在熟悉的开发模式下调试，操作比较简单。个人觉得 UC 在这方面胜过 chrome。可以跨平台，在 ios 上也可以用。

Chrome 手机调试工具缺点：

有目共睹，比起 UC 来，它步骤比较繁琐，不能 wifi 调试，必须指定手机和 PC 浏览器的类型（都是 chrome），这种模式无法调试微信或者其他 app 内置浏览器。

Safari

手机端：设置 → Safari → 高级 → Web 检查器 → 开
mac 端：Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单
在 OS X 中启动 Safari 之后，以 USB 电缆正常接入 iOS 设备，并在此移动设备上启动 Safari。此时点击计算机上的 Safari 菜单中的“开发”，可以看到有 iOS 设备的名称显示，其子菜单项即为移动设备上 Safari 的所有标签页，点击任意一个开始调试。
苹果系列优点：

便捷，简单，高端大气上档次，可以调试外壳包裹的浏览器如微信。

苹果系列缺点：

设备限严重依赖其公司产品。

概览

Http 请求在我们 Web 日常开发中经常用到也非常重要，接下来我们就向大家介绍一个 http 框架，基于 Promise 方式实现的 axios 带你深入了解它

概览

目前前端领域中的布局方案主要有以下几个方案

1. Flex 布局
2. Grid (栅格布局)
3. Float 布局

常用网址导航：

• 伯乐在线书籍推荐
  npm 安装命令详解：http://www.ruanyifeng.com/blog/2016/01/npm-install.html
• T39 草案标准：https://github.com/tc39/ecma262
• ES6 教程：http://es6.ruanyifeng.com/#docs/intro
• 在线编译 es6:https://babeljs.io/repl/
• Webpack 中文文档：https://www.webpackjs.com/configuration/

在线前端编辑器

1. jsfiddle
2. codepen

常用语法记录

• 标红字体

xxx

• 展示一张图片

1、使用 hexo 来编写博客，首先需要学会使用 MarkDown 语言来快速写博客，

语法快速概览地址：
http://www.jianshu.com/p/46a4a5e17c20#philosophy
Markdown 教程 :http://www.appinn.com/markdown/
发布到线上的方法：http://www.jianshu.com/p/f4dce0e76886
Hexo API https://hexo.io/
中文文档：https://hexo.io/zh-cn/docs/tag-plugins

2，基本用法命令

1
2
3
4
5

$ hexo clean #清理之前生成的内容，即public文件
$ hexo g #生成静态文件
$ hexo d #部署
$ hexo s #启动本地服务，可以通过http://localhost:4000查看
$ hexo s --debug #使用 debug 模式启动服务

创建新文章方式：

1

$ hexo new [layout] <title>

Encouragement

每一次跌倒，都是成功的积累，义无反顾的坚持

你需变成自己希望的样子，这个世界才会变成你希望的样子，言过于行。

我们想成为一个什么样的人，我们想做什么样的事，想让这个世界因我们而有什么样的不同

async function

 异步函数是指通过事件循环异步执行的函数