原文链接：The 12 Things You Need to Consider When Evaluating Any New JavaScript Library

水平有限，根据自己的理解进行删减和重排，有能力还是看原文比较好，我只是个小小的搬运工😜。

反观这些，当自己写一个库的时候，也需要思考下这些有没有做到。

正文开始：

完整因素

1、🕹️ 特性（Features）

2、🐞 稳定性（Stability）

3、⚡ 性能（Performance）

4、🎁 依赖包生态（Package Ecosystem）

5、🌎 社区（Community）

6、👶 学习曲线（Learning Curve）

7、📖 文档（Documentation）

8、🔧 工具（Tooling）

9、🏛️ 发展史（Track Record）

10、👫 团队（Team）

11、⚖️ 兼容性（Compatibility）

12、📈 趋势（Momentum）

特性

选择一种技术的首要原因就是：这种技术可以做啥？

评分等级

• A - 能完成以前不能完成的事
• B - 用更加优雅的方式做相同的事
• C - 比现有方案差

稳定性

不管你的库功能有多么丰富，稳定性都是不可忽视的。如果开发人员在使用的过程中每隔两分钟都发生一次错误，那简直要崩溃了。

评分等级

• A - 少量的bugs和问题，很容易调试和解决掉
• B - 还有些问题，但是不影响你的软件的稳定性
• C - 已经影响到你的软件的稳定性

性能

如果一个用户打开你的网站需要15秒的话，一切的功能都是徒劳，还没打开，用户已经离开了。

这也是为什么有一个功能这么完善的react，而像preact、riot还能存活下来的原因。

评分等级

• A - 体积小，加载快，支持各种优化方案
• B - 对你的软件性能没有影响
• C - 对你的软件性能有影响

包生态

早起的小程序相信使用过的都很痛苦，大家都用npm、es6模块管理，它却只支持commonjs。还有第三方包的成熟度，对TS的支持等。

评分等级

• A - 圈子里对一些公共问题有明确的解决方案，第三方包有很好的维护性和文档
• B - 有很多可选的竞争对手
• C - 没有可选包，都要自己动手

社区

另一个考虑的因素综合性社区，当有问题的时候，这些问题可以得到解答。比如Stack Overflow、GitHub的issues。

评分等级

• A - 有论坛、聊天室、GitHub issues 活跃度高。Stack Overflow 有大量相关问题回答。
• B - 论坛或聊天室活跃度低
• C - 除了GitHub没有其它社区

学习曲线

想想react和vue就知道了。

评分等级

• A - 马上就能上手
• B - 需要学习一周
• C - 需要学习几周

文档

好的文档能让学习曲线大大降低。这个看看react和vue的文档就知道了。

评分等级

• A - 有独立的文档站点，文档有演示、项目事例、指导、api说明、良好的代码注释
• B - 有基本的Readme和api说明
• C - 只有简明的readme，得读源码才知道如何使用

工具

调试Redux的时候，浏览器开发工具简洁明了的图形化界面，VS Code对TypeScript的良好支持。

评分等级

• A - 两个或以上的工具，包括浏览器扩展，代码编辑器拓展、CLI 工具、第三方SaaS服务
• B - 一个工具
• C - 没有工具

发展史

历史越悠久的库，风险越小，像Rails/PHP，除非它的技术栈很陈旧语言本身不适应发展，面临淘汰。

评分等级

• A - 4 年以上历史，大量公司实践过
• B - 1-4 年历史，已经有不少人使用过了
• C - 少于一年，几乎没有人用过

团队

Angular.js 出于Google和 React出于Facebook，都是世界一流大厂，家底厚，人员充足，资源多。Vue是个美丽的例外，对工程艺术的执着，总比背着api而完成要好些。

评分等级

• A - 一线大厂的开源团队

• B - 中型团队维护，并有良好的分工

• C - 独立维护

兼容性

除了库本身对浏览器的兼容性重要之外，版本的迭代对旧版本的兼容也很重要。想想你升级babel的时候。

评分等级

• A - 升级总是能最大程度向后兼容，不兼容部分给出警告。不兼容的老版本维护两年或更久
• B - 不兼容性升级，但给出文档说明
• C - 频繁升级改动大，又没有好的说明

趋势

大家保持着对这个库的新鲜关注度，能在这个库上面发现一些好的技术点。

评分等级

• A - 在Hacker News热烈讨论，stars数量多，各大会议都要提及
• B - 启动阶段大家有些兴趣，少量stars
• C - stars少得可怜

大概是一年前，做了第一个微信小程序。那时候小程序刚起步，很多功能也都不太完善，使用起来很鸡肋。经过这么长时间，微信小程序的数量达到100多万，对开发者的开发体验也好（la）了（ji）蛮（yi）多（jiu）。最近又做了些微信小程序，有必要重新认识下。

1、小程序整体架构

下面是来自网上的一张图片，显示了微信小程序的整个框架和交互过程。

从上面的架构可以看到，整个小程序分成两个模块独立运行，一个是View层，还有一个Service层。View层用于前端UI展示，Service层控制后台逻辑，然后通过JSBridge进行交互。这就解释了为什么在小程序里面js不能直接使用浏览器的DOM和BOM接口。一个典型的交互流程如下：在View层，用户操作触发event，通过JSBridge通知到Service层，Service层处理完逻辑，把处理后的data再通过JSBridge传给View层，View层更新。

2、异步流程控制

在js开发里少不了异步的操作，小程序里也不例外。目前异步编程中，主要有以下几种解决方案：

• 事件发布/订阅模式

• Promise 模式

• 一些异步流程控制库Q.js、Async、Bluebird等

  好在小程序已经提供了Promise的支持，避免回调地狱非常容易。下面是用小程序提供的api来发起网络请求：

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

  wx.request({ url: method: success: () => { // 另一个异步请求 wx.request({ ... success: () => { // 再有另一个异步请求 } }) } fail: })

  这样的代码不太好，我们可以使用一个函数来封装一下api，使它支持promise。

  1 2 3 4 5 6 7

  function promisify(api) { return (options, ...params) => { return new Promise((resolve, reject) => { api(Object.assign({}, options, {success: resolve, fail: reject}), ...params) }) } }

  再使用wx.request时可以像这样：

  1 2 3 4 5 6 7 8 9 10 11 12

  request = promisify(wx.request) request({ url: method: }).then(() => { // 异步成功 }).catch(() => { // 异步失败 }) download = promisify(wx.download) ...

  这样是不是简洁清晰很多。当然，有了Promise，并行异步任务，流程异步依赖的问题也可以很好处理。

3、页面间通信

小程序已经提供了组件功能，组件间的通信可以通过事件派发。但是在页面之间的通信却没有提供对应的机制。有这样一个需求，在首页显示了用户的钱包金额，到下单页下单之后，用户金额减少。要想在下单后首页的金额数发生变化，可以在首页的onShow事件中重新获取数据，这种处理显然不够妥。

更好的处理方式是建立一个全局的事件中心，所有页面间的通信通过事件中心统一管理。下面是一个简单的事件中心，使用事件发布/订阅方式处理。

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

class Event {
  constructor() {
    this._queue = {}
  }
  on(key, callback) {
    if (Array.isArray(key)) {
      key.map(item => {
        this._queue[item] = this._queue[item] || []
        this._queue[item].push(callback)
      })
    } else {
      this._queue[key] = this._queue[key] || []
      this._queue[key].push(callback)
    }
    return this
  }
  off(key, callback) {
    if (this._queue[key]) {
      const index = typeof callback === undefined ? -2 : this._queue[key].indexOf(callback)
      if (index === -2) {
        delete this._queue[key]
      } else if (index !== -1) {
        this._queue[key].splice(index, 1)
      }
      if (this._queue[key] && this._queue[key].length === 0) delete this._queue[key]
    }
    return this
  }
  has(key) {
    return !!this._queue[key]
  }
  emit(key, ...args) { 
    if (this._queue[key]) {
      this._queue[key].forEach(callback => callback.apply(this, args))
    }
    return this
  }
}

把事件中心注入到App内，通过在页面getApp()，可以获得全局的事件控制。

4、小程序数据埋点

预置的数据埋点是在各种App，Page事件上进行跟踪，发送所需数据给后台。下面这张图是Page实例的生命周期：

现在需要在onHide事件中发送这个事件并把相应的数据传给后台。容易想到的是直接在Page onHide事件里发送，但是这样代码没有跟业务解耦，也难在其它项目中复用。有没有更好的方式？

我们可以对Page方法进行重写，满足既执行埋点代码，也执行业务代码。

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

const pageHide = () => {
    // 这里是埋点代码
}
// page/index/index
Page({
    onHide: () => {
        // 里面是业务代码
    }
})
// 对Page重写
const copyPage = page
page = function(obj) {
    copyPage(proxy(obj, { onHide: pageHide }))
}
// proxy函数返回新的obj
function proxy(obj, events) {
  for (let key in events) {
    if (typeof obj[key] === 'function') {
      const fn = obj[key]
      obj[key] = function() {
        fn.call(this)
        events[key].call(this)
      }
    } else {
      obj[key] = function() {
        events[key].call(this)
      }
    }
  }
  return obj
}

这样只需在App.js里引入埋点代码即可。

5、小程序开发框架

在小程序还不支持组件化、Promise、箭头函数的时候，这是很痛苦的，这时候一些框架应运而生，解决掉了这些痛点。比较流弊的框架有Wepy（腾讯团队）、mpvue（美团团队）、Taro（京东凹凸）。Wepy是比较早出现的小程序开发框架，采用类vue风格语法，但是官方又推荐redux做状态管理，应该是吸收了vue和react的优点，大家都说坑太多；mpvue fork自vue，对runtime 和compiler部分进行了修改，vuex做状态管理，各技术栈一致，思想统一，有问题好解决；Taro号称是多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信小程序、H5、React Native 等的应用，但是，现实有些差距。

综合一下，以后用mpvue来开发不错，vue 的组件在H5和小程序公用，支持npm包管理，各种工程化开发方式解锁。

1、数据流输入输出

我们可以从一个数据输入输出流中，查看web安全的整体是怎么样的。

1
2
3
4
5

1. 如果在操作系统层上没处理好，比如Linux的Bash环境把“特殊数据”当做指令执行时，就产生了OS命令执行的安全问题，这段“特殊数据”可能长得如下这般：; rm -rf /;
2. 如果在存储层的数据库中没处理好，数据库的SQL解析引擎把这个“特殊数据”当做指令执行时，就产生SQL注入这样的安全问题，这段“特殊数据”可能长得如下这般：' union select user, pwd, 1, 2, 3, 4 from users--
3. 如果在Web容器层如nginx中没处理好，nginx把“特殊数据”当做指令执行时，可能会产生远程溢出、DoS等各种安全问题，这段“特殊数据”可能长得如下这般：%c0.%c0./%c0.%c0./%c0.%c0./%c0.%c0./%20
4. 如果在Web开发框架或Web应用层中没处理好，把“特殊数据”当做指令执行时，可能会产生远程命令执行的安全问题，这段“特殊数据”可能长得如下这般：eval($_REQUEST['x']);
5. 如果在Web前端层中没处理好，浏览器的JS引擎把“特殊数据”当做指令执行时，可能会产生XSS跨站脚本的安全问题，这段“特殊数据”可能长得如下这般：'"><script>alert(/cos is my hero./)</script>

2、DDoS攻击

DoS(Denial of Service)，即拒绝服务，造成远程服务器拒绝服务的行为被称为DoS攻击。其目的是使计算机或网络无法提供正常的服务。最常见的DoS攻击有计算机网络带宽攻击和连通性攻击。攻击的问题就出在TCP连接的三次握手中，假设一个用户向服务器发送了SYN报文后突然死机或掉线，那么服务器在发出SYN+ACK应答报文后是无法收到客户端的ACK报文的，从而导致第三次握手无法完成。在这种情况下服务器端一般会重试，即再次发送SYN+ACK给客户端，并等待一段时间后丢弃这个未完成的连接。这段时间的长度我们称为SYN Timeout，一般来说这个时间是分钟的数量级，大约为30秒到2分钟。一个用户出现异常导致服务器的一个线程等待1分钟并不是什么很大的问题，但如果有一个恶意的攻击者大量模拟这种情况，服务器端将为了维护一个非常大的半连接列表而消耗非常多的资源，即数以万计的半连接，将会对服务器的CPU和内存造成极大的消耗。若服务器的TCP/IP栈不够强大，最后的结果往往是堆栈溢出崩溃。实际上，就算服务器端的系统足够强大，服务器端也将忙于处理攻击者伪造的TCP连接请求而无暇理睬客户的正常请求，导致用户的正常请求失去响应。

对于DDoS攻击，我们可以做如下防范：

(1) 反欺骗：对数据包的地址及端口的正确性进行验证，同时进行反向探测。

(2) 协议栈行为模式分析：每个数据包类型需要符合RFC规定，这就好像每个数据包都要有完整规范的着装，只要不符合规范，就自动识别并将其过滤掉。

(3) 特定应用防护：非法流量总是有一些特定特征的，这就好比即便你混进了顾客群中，但你的行为还是会暴露出你的动机，比如老重复问店员同一个问题，老做同样的动作，这样你仍然还是会被发现的。

(4) 带宽控制：真实的访问数据过大时，可以限制其最大输出的流量，以减少下游网络系统的压力

3、跨站脚本攻击（XSS）

XSS(Cross Site Scripting)，跨站脚本攻击。为和层叠样式表(Cascading Style Sheets，CSS)区分开，跨站脚本在安全领域叫做“XSS”。恶意攻击者往Web页面里注入恶意Script代码，当用户浏览这些网页时，就会执行其中的恶意代码，可对用户进行盗取cookie信息、会话劫持等各种攻击。XSS是常见的Web攻击技术之一，由于跨站脚本漏洞易于出现且利用成本低，所以被OWASP列为当前的头号Web安全威胁。

根据XSS攻击的效果，可以将XSS分为3类：

(1) 反射型XSS(Non-persistent XSS)，服务器接受客户端的请求包，不会存储请求包的内容，只是简单的把用户输入的数据“反射”给浏览器。例如：www.a.com?xss.php?name=

alert('哈哈，你的cookie我已经拿到')。修改为script标签，访问这个链接则会弹出页面的cookie内容，若攻击者把alert改为一个精心构造的发送函数，就可以把用户的cookie偷走。

(2) 存储型XSS(Persistent XSS)，这类XSS攻击会把用户输入的数据“存储”在服务器端，具有很强的稳定性。注入脚本跟反射型XSS大同小异，只是脚本不是通过浏览器à服务器à浏览器这样的反射方式，而是多发生在富文本编辑器、日志、留言、配置系统等数据库保存用户输入内容的业务场景。即用户的注入脚本保存到了数据库里，其他用户进行访问涉及到包含恶意脚本的链接都会中招。由于这段恶意的脚本被上传保存到了服务器，这种XSS攻击就叫做“存储型XSS”。例如：

服务器端代码：

HTML页面代码：

对于XSS攻击，我们可以做如下防范：

(1) 输入过滤。永远不要相信用户的输入，对用户输入的数据做一定的过滤。如输入的数据是否符合预期的格式，比如日期格式，Email格式，电话号码格式等等。这样可以初步对XSS漏洞进行防御。

上面的措施只在web端做了限制，攻击者通抓包工具如Fiddler还是可以绕过前端输入的限制，修改请求注入攻击脚本。因此，后台服务器需要在接收到用户输入的数据后，对特殊危险字符进行过滤或者转义处理，然后再存储到数据库中。

(2) 输出编码。服务器端输出到浏览器的数据，可以使用系统的安全函数来进行编码或转义来防范XSS攻击。在PHP中，有htmlentities()和htmlspecialchars()两个函数可以满足安全要求。相应的JavaScript的编码方式可以使用JavascriptEncode。

(3) 安全编码。开发需尽量避免Web客户端文档重写、重定向或其他敏感操作，同时要避免使用客户端数据，这些操作需尽量在服务器端使用动态页面来实现。

(4) HttpOnly Cookie。预防XSS攻击窃取用户cookie最有效的防御手段。Web应用程序在设置cookie时，将其属性设为HttpOnly，就可以避免该网页的cookie被客户端恶意JavaScript窃取，保护用户cookie信息。

(5)WAF(Web Application Firewall)，Web应用防火墙，主要的功能是防范诸如网页木马、XSS以及CSRF等常见的Web漏洞攻击。由第三方公司开发，在企业环境中深受欢迎。

4、跨站点请求伪造（CSRF）

CSRF(Cross Site Request Forgery)，即跨站请求伪造，是一种常见的Web攻击，但很多开发者对它很陌生。CSRF也是Web安全中最容易被忽略的一种攻击。下面先介绍一下CSRF攻击的原理。

受害者用户登录网站A，输入个人信息，在本地保存服务器生成的cookie。攻击者构建一条恶意链接，例如对受害者在网站A的信息及状态进行操作，典型的例子就是转账。受害者打开了攻击者构建的网页B，浏览器发出该恶意连接的请求，浏览器发起会话的过程中发送本地保存的cookie到网址A，A网站收到cookie，以为此链接是受害者发出的操作，导致受害者的身份被盗用，完成攻击者恶意的目的。

举个简单的例子来说明下CSRF的危害。用户登陆某银行网站，以Get请求的方式完成到另一银行的转账，如：http://www.mybank.com/Transfer.php?toBankId=11&money=1000。攻击者可构造另一危险链接http://www.mybank.com/Transfer.php?toUserId=100&money=1000并把该链接通过一定方式发给受害者用户。受害者用户若在浏览器打开此链接，会将之前登陆后的cookie信息一起发送给银行网站，服务器在接收到该请求后，确认cookie信息无误，会完成改请求操作，造成攻击行为完成。攻击者可以构造CGI的每一个参数，伪造请求。这也是存在CSRF漏洞的最本质原因。

对于CSRF攻击，我们可以做如下防范：

(1) 验证码。应用程序和用户进行交互过程中，特别是账户交易这种核心步骤，强制用户输入验证码，才能完成最终请求。在通常情况下，验证码够很好地遏制CSRF攻击。

但增加验证码降低了用户的体验，网站不能给所有的操作都加上验证码。所以只能将验证码作为一种辅助手段，在关键业务点设置验证码。

(2) Referer Check。HTTP Referer是header的一部分，当浏览器向web服务器发送请求时，一般会带上Referer信息告诉服务器是从哪个页面链接过来的，服务器籍此可以获得一些信息用于处理。可以通过检查请求的来源来防御CSRF攻击。正常请求的referer具有一定规律，如在提交表单的referer必定是在该页面发起的请求。所以通过检查http包头referer的值是不是这个页面，来判断是不是CSRF攻击。

但在某些情况下如从https跳转到http，浏览器处于安全考虑，不会发送referer，服务器就无法进行check了。若与该网站同域的其他网站有XSS漏洞，那么攻击者可以在其他网站注入恶意脚本，受害者进入了此类同域的网址，也会遭受攻击。出于以上原因，无法完全依赖Referer Check作为防御CSRF的主要手段。但是可以通过Referer Check来监控CSRF攻击的发生。

(3) Anti CSRF Token。目前比较完善的解决方案是加入Anti-CSRF-Token，即发送请求时在HTTP 请求中以参数的形式加入一个随机产生的token，并在服务器建立一个拦截器来验证这个token。服务器读取浏览器当前域cookie中这个token值，会进行校验该请求当中的token和cookie当中的token值是否都存在且相等，才认为这是合法的请求。否则认为这次请求是违法的，拒绝该次服务。

5、点击劫持（ClickJacking）

点击攻击就是一种视觉上的欺骗。攻击者用一个透明的不可见的iframe，覆盖在一个网页上，用户在不知情的情况下，点击透明的iframe。

6、数据库注入攻击

SQL注入(SQL Injection)，应用程序在向后台数据库传递SQL(Structured Query Language，结构化查询语言)时，攻击者将SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。

SQL注入常见产生的原因有：

(1) 转义字符处理不当。特别是输入验证和单引号处理不当。用户简单的在url页面输入一个单引号，就能快速识别Web站点是否易收到SQL注入攻击。

(2) 后台查询语句处理不当。开发者完全信赖用户的输入，未对输入的字段进行判断和过滤处理，直接调用用户输入字段访问数据库。

(3) SQL语句被拼接。攻击者构造精心设计拼接过的SQL语句，来达到恶意的目的。如构造语句：select * from users where userid=123; DROP TABLE users;直接导致user表被删除。

7、文件上传漏洞

上传漏洞在DVBBS6.0时代被黑客们利用的最为猖獗，利用上传漏洞可以直接得到WEBSHELL，危害等级超级高，现在的入侵中上传漏洞也是常见的漏洞。该漏洞允许用户上传任意文件可能会让攻击者注入危险内容或恶意代码，并在服务器上运行。

文件上传漏洞的原理：由于文件上传功能实现代码没有严格限制用户上传的文件后缀以及文件类型，导致允许攻击者向某个可通过 Web 访问的目录上传任意PHP文件，并能够将这些文件传递给 PHP 解释器，就可以在远程服务器上执行任意PHP脚本。

对于文件上传漏洞攻击，我们可以做如下防范：

(1)检查服务器是否判断了上传文件类型及后缀。

(2) 定义上传文件类型白名单，即只允许白名单里面类型的文件上传。

(3) 文件上传目录禁止执行脚本解析，避免攻击者进行二次攻击。

参考资料

《白帽子讲web安全》

为了更好的了解JavaScript函数的执行，看了下ECMAScript标准有关函数的创建过程。

下面的伪代码展现了函数的创建算法。

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

// 解释了原型链最顶部的类型
F = new NativeObject();
  
// property [[Class]] is "Function"
F.[[Class]] = "Function"
  
// a prototype of a function object
F.[[Prototype]] = Function.prototype
  
// reference to function itself
// [[Call]] is activated by call expression F()
// and creates a new execution context
// 函数调用时执行[[Call]]，并创建执行上下文
F.[[Call]] = <reference to function>
  
// built in general constructor of objects
// [[Construct]] is activated via "new" keyword
// and it is the one who allocates memory for new
// objects; then it calls F.[[Call]]
// to initialize created objects passing as
// "this" value newly created object 
// 当使用 new 操作符时会调用[[Construct]]，并为新的对象分配内存，再调用[[Call]]
F.[[Construct]] = internalConstructor
  
// scope chain of the current context
// i.e. context which creates function F
// 这里说明了使用new操作符与直接调用的不同，
// 不同的原型链，不同的this指向
F.[[Scope]] = activeContext.Scope
// if this functions is created 
// via new Function(...), then
F.[[Scope]] = globalContext.Scope
  
// number of formal parameters
// 函数参数
F.length = countParameters
  
// a prototype of created by F objects
__objectPrototype = new Object();
__objectPrototype.constructor = F // {DontEnum}, is not enumerable in loops
F.prototype = __objectPrototype
  
return F

需要注意的是，*F.[[Prototype]]*是函数(构造器)的原型，也被这个函数所创建的对象的原型。怎么翻译都感觉不对，自己体会吧。(F.[[Prototype]] is a prototype of the function (constructor) and F.prototype is a prototype of objects created by this function)

翻看了之前的文章，有说到，如果有一个对象的访问链是这样的a.b.c，那么其实它可以用数组来表示，写为[a, b, c]。要达到a.b.c转为*[a, b, c]是比较简单的，只需要遍历a*的所有可枚举的属性，再push到一个数组里面。

好了，现在考虑这样一个场景，在一颗树中，我搜索出了c的路径为*[a, b, c]，如何把它转化为一个对象a.b.c*？

为了解决这个问题，去复习了下对象的创建方式，这篇文章更像是笔记。

说了那么多的废话，现在开始吧。下面都是参考《JavaScript高级程序设计》。

1、工厂模式

1
2
3
4
5
6
7
8
9
10

function createPerson(name) {
    var o = new Object();
    o.name = name;
    o.getName = function () {
        console.log(this.name);
    };
    return o;
}
var person1 = createPerson('kevin');

这种方式所有的对象都是从一个函数创建的。所有的实例都指向一个原型，对象无法识别。

2、构造函数模式

1
2
3
4
5
6
7
8

function Person(name) {
    this.name = name;
    this.getName = function () {
        console.log(this.name);
    };
}
var person1 = new Person('kevin');

这种方式的实例可以识别为一个特定的类型，但是每次创建实例时，每个方法都要被创建一次。

2.1、构造函数模式优化

1
2
3
4
5
6
7
8
9
10

function Person(name) {
    this.name = name;
    this.getName = getName;
}
function getName() {
    console.log(this.name);
}
var person1 = new Person('kevin');

这种方式解决了创建实例时，每个方法都要被创建一次的问题，但是，这代码。。

3、原型模式

1
2
3
4
5
6
7
8
9
10

function Person(name) {
}
Person.prototype.name = 'keivn';
Person.prototype.getName = function () {
    console.log(this.name);
};
var person1 = new Person();

这样的话，原型方法不会被重新创建，但是所有的属性和方法都是被共享的，很多自定义参数也不能初始化。

3.1、原型模式优化1

1
2
3
4
5
6
7
8
9
10
11
12

function Person(name) {
}
Person.prototype = {
    name: 'kevin',
    getName: function () {
        console.log(this.name);
    }
};
var person1 = new Person();

封装性好了一点，但是重写了原型，丢失了constructor属性。

3.2、原型模式优化2

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

function Person(name) {
}
Person.prototype = {
    constructor: Person,
    name: 'kevin',
    getName: function () {
        console.log(this.name);
    }
};
var person1 = new Person();

保留了构造函数，但是所有的属性和参数还是被共享。

4、组合模式

1
2
3
4
5
6
7
8
9
10
11
12

function Person(name) {
    this.name = name;
}
Person.prototype = {
    constructor: Person,
    getName: function () {
        console.log(this.name);
    }
};
var person1 = new Person();

构造函数模式与原型模式的组合，该共享的共享，该私有的私有，使用最广泛的方式。但是有人就喜欢有更好的封装，所有的东西写在一块。

4.1、动态原型模式

1
2
3
4
5
6
7
8
9
10

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype.getName = function () {
            console.log(this.name);
        }
    }
}
var person1 = new Person();

使用这种方式时，不能用对象字面量重写原型。

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

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }
    }
}
var person1 = new Person('kevin');
var person2 = new Person('daisy');
// 报错 并没有该方法
person1.getName();
// 注释掉上面的代码，这句是可以执行的。
person2.getName();

使用字面量方式直接覆盖 Person.prototype，并不会更改原来实例的原型的值，person1 依然是指向了以前的原型，而不是 Person.prototype。而之前的原型是没有 getName 方法的，所以就报错了！

5.1、寄生构造函数模式

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

function Person(name) {
    var o = new Object();
    o.name = name;
    o.getName = function () {
        console.log(this.name);
    };
    return o;
}
var person1 = new Person('kevin');
console.log(person1 instanceof Person) // false
console.log(person1 instanceof Object)  // true

就是寄生在构造函数中的一种模式，应用场景在于比如我们想创建一个具有额外方法的特殊数组，但是又不想直接修改Array构造函数。

1
2
3
4
5
6
7

function SpecialArray() {
    var array = new Array();
    array.selfFn = function () {
    };
    return array;
}

5.2、稳妥构造函数模式

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

function person(name){
    var o = new Object();
    o.sayName = function(){
        console.log(name);
    };
    return o;
}
var person1 = person('kevin');
person1.sayName(); // kevin
person1.name = "daisy";
person1.sayName(); // kevin
console.log(person1.name); // daisy

所谓稳妥，指的是没有公共属性，而且其方法也不引用 this 的对象。适合在一些安全的环境中。

每一种模式都对应着不同的应用场景，我们使用的最多的应该是组合模式。

在大量的数据处理中，我们经常会使用到数据去重，得到唯一数组，以便展示。下面来看看常用的几种数组去重的方式。

1、循环遍历

在这种方式中，通过源数组与目标数组进行比较，来判断源数组的元素在目标数组中是否唯一存在。上代码：

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

const sourceArray = ['1', 1, 1, '1', 2, 2];
function unique(sourceArray) {
    // targetArray用来存储结果
    let targetArray = [];
    for (let i = 0, sourceArrayLen = sourceArray.length; i < sourceArrayLen; i++) {
        for (var j = 0, targetArrayLen = targetArray.length; j < targetArrayLen; j++ ) {
            if (sourceArray[i] === targetArray[j]) {
                break;
            }
        }
        // 如果sourceArray[i]是唯一的，那么执行完循环，j等于targetArrayLen
        if (j === targetArrayLen) {
            targetArray.push(sourceArray[i])
        }
    }
    return targetArray;
}
console.log(unique(sourceArray)); // ['1', 1, 2]

在内循环中，如果sourceArray[i] 与 targetArray[j] 的值不相等，说明元素是唯一的，这时候，j的值就会等于targetArray的长度。

在数组中检测某个元素是否存在，可以使用indexOf方法，这样便可以简化内循环。

1
2
3
4
5
6
7
8
9
10
11
12

function unique(sourceArray) {
  let targetArray = [];
  for (let i = 0, len = sourceArray.length; i < len; i++) {
    const current = sourceArray[i];
    if (targetArray.indexOf(current) === -1) {
      targetArray.push(current)
    }
  }
  return targetArray;
}
const sourceArray = [1, 2, 1, 1, 1, 2];
console.log(unique(sourceArray)); // ['1', 1, 2]

2、排序后去重

对于一个已经排序的数组，上面的方法显得效率有点低下，因为我们只需判断当前元素与上一个元素是否相同，不需要再进行循环。

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

function unique(sourceArray) {
  let targetArray = [];
  const sortedSourceArray = sourceArray.concat().sort((a,b) => a-b); // 没有对源数组进行直接操作
  let pre;
  for (let i = 0, len = sortedSourceArray.length; i < len; i++) {
    let current = sortedSourceArray[i];
    if (!i || pre !== current) {
      targetArray.push(current);
    }
    pre = current;
  }
  return targetArray;
}
const sourceArray = [1, 2, 1, 1, 1, 2];
console.log(unique(sourceArray)); // [1, 2]

这种方式对于大量已经排序的数组效率有很大的提升，但是如果你的数据没有排序，又存在多种数据类型，那还是考虑其它方式会比较好。

3、filter

若是依赖ES5提供的强大原生方法，可以大大的简化我们的代码：

1
2
3
4
5

function unique(sourceArray) {
  return sourceArray.filter((item, index , arr) => sourceArray.indexOf(item) === index);
}
const sourceArray = [1, '2', 1, '1', 1, 2];
console.log(unique(sourceArray)); // [1, '2', '1', 2]

是不是超级简洁了。

4、键值对

在用键值对判断另外一个值的时候，如果该属性存在，则说明该值是重复的。我们可以利用hasOwnProperty这个方法进行判断。

1
2
3
4
5
6
7
8

function unique(sourceArray) {
  var obj = {};
  return sourceArray.filter(function (item, index, array) {
    return obj.hasOwnProperty(item) ? false : (obj[item] = true)
  })
}
const sourceArray = [1, '2', 1, '1', 1, 2];
console.log(unique(sourceArray)); // [1, '2']

只打印出来了1, '2'，字符串‘2’和数字2在对象里面表示的是同一个属性，我们其实可以用拼接字符串的形式来避免这个问题。

1
2
3
4
5
6
7
8

function unique(sourceArray) {
  var obj = {};
  return sourceArray.filter(function (item, index, array) {
    return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true);
  })
}
const sourceArray = [1, '2', 1, '1', 1, 2];
console.log(unique(sourceArray)); // [1, '2', '1', 2]

最后如果遇到item是对象的情况，那么经过typeof item + item后将会是object[object Object]。如果要对象将转化为字符串的形式，我们可以使用JSON.stringify方法：

1
2
3
4
5
6
7
8
9

function unique(sourceArray) {
  var obj = {};
  return sourceArray.filter(function (item, index, array) {
    console.log(typeof item + item);
    return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + item] = true);
  })
}
const sourceArray = [1, '2', 1, '1', 1, 2];
console.log(unique(sourceArray)); // [1, '2', '1', 2]

5、ES6

ES6的Set对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。我们可以利用这个对象来储存数组的唯一值。

1
2
3

const unique = sourceArray => [...new Set(sourceArray)];
const sourceArray = [1, '2', 1, '1', 1, 2];
console.log(unique(sourceArray)); // [1, '2', '1', 2]

JavaScript竟然进化到了如此程度。

在前端的开发中经常会使用到模板引擎，前端渲染中比如前端框架Knockout、Vue和Angular（React的JSX不属于模板，它是一个带语法糖的手写 AST），在解析指令语法时都会使用对应的模板引擎进行解析，而基于Node.js进行渲染的EJS，DoTjs这些，原理也都是类似。

现在我们一步步来，看看它们是怎么实现的。

首先，我想它的使用方式是这样的：

1
2
3
4
5
6
7
8

const templateEngine = (tpl, data) => {
    // 这里模板引擎实现方式
}
const template = '<p>Hi, my name is <%name%>. My job is <%job%>.</p>';
console.log(templateEngine(template, {
    name: "nuoka",
    job: 'write bug'
}));

当使用templateEngine这个函数，并传入一些参数，我们期待它得到

1

<p>Hi, my name is nuoka. My job is write bug.</p>

第一步我们要得到动态模板，也就是<%name%>这些，然后再用真实的数据去替换它。对于字符串的处理，我们很容易就想到使用正则来处理，关于正则的使用基础，可以看看前面的文章。好了，来写我们的第一个正则表达式，

1

const reg = /<%([^%>]+)?%>/g;

通过这个正则，我们可以获取到以<%开头，以%>结尾的片段。用exec执行下，可以得到一个包含匹配结果的数组：

1
2
3
4
5
6
7
8
9
10

const match = reg.exec(template);
console.log(match);
// 得到下面的输出
// [
//		"<%name%>"
//		1: "name"
//		groups: undefined
//		index: 18
//		input: "<p>Hi, my name is <%name%>. My job is <%job%>.</p>"
// ]

可以看到返回的数组里只包括一个匹配结果，所以这是我们还需要使用一个while循环来获取全部的结果。

1
2
3
4
5
6

let match;
const reg = /<%([^%>]+)?%>/g,
      template = '<p>Hi, my name is <%name%>. My job is <%job%>.</p>';
while (match = re.exec(template)) {
    console.log(match);
}

好了，现在我们能够获取到所有的模板片段，只需要把数据填充进去就可以了，这里使用replace方法来实现。来看看我们最粗略的模板函数：

1
2
3
4
5
6
7
8
9
10
11
12

const templateEngine = (tpl, data) => {
    let reg = /<%([^%>]+)?%>/g, 
        match;
    while(match = reg.exec(tpl)) {
        tpl = tpl.replace(match[0], data[match[1]])
    }
    return tpl;
}
console.log(templateEngine(template, {
    name: "nuoka",
    job: 'write bug'
}));

Boom，第一个模板函数实现了，是不是很简单？

这样足够了吗？然而并没有，考虑下面的情况，我们把输入数据变成这样：

1
2
3
4
5
6

{
    name: 'nuoka',
    profile: {
        job: 'write bug',
    }
}

当使用profile.job去填充数据的时候，发现使用不了了，因为并没有找到profile.job这个属性。要如何解决这个问题呢？

要是profile.job是一个语句就好了，这样就可以通过.操作符去获取到job属性。通过这个思路，也容易想到，在JavaScript中要把字符串当作语句来执行，可用的方式有eval和new Function，在这里我们就用new Function来试试。来看一下它的基本使用方式：

1
2

const fn = new Function('arg', 'console.log(arg + 1);');
fn(1);  // 输出2

上面的代码等价于：

1
2
3
4

const fn = (arg) => {
    console.log(arg + 1);
};
fn(1);  // 输出2

现在，我们可以定义一个函数，它的参数和函数体都来自于字符串，很棒，这正是我们想要的。在创建这个函数之前，我们还需要想想怎么构造出它的函数体？

这个函数体应该返回一个处理好的模板字符串，像是这样：

1
2
3
4
5
6

return 
"<p>Hi, my name is " + 
this.name + 
"My job is" + 
this.profile.job + 
" .</p>";

但是这种方式并不完美，因为如果我们想在模板里嵌套循环的话，这没法做，例如：

1
2
3
4
5

const template = 
'My skills:' + 
'<%for(var index in this.skills) {%>' + 
'<a href=""><%this.skills[index]%></a>' +
'<%}%>';

转化为等价函数：

1
2
3
4
5
6
7

return
'My skills:' + 
for(var index in this.skills) { +
'<a href="">' + 
this.skills[index] +
'</a>' +
}

报语法错误了！

怎么办？

最终我们是要返回一个字符串的，但是又想在返回语句里把真实的语法和字符串分开，并且支持for循环，这里可以先把字符串放入数组里，再通过join方法转化为字符串：

1
2
3
4
5
6
7
8

let r = [];
r.push('My skills:'); 
for(let index in this.skills) {
r.push('<a href="">');
r.push(this.skills[index]);
r.push('</a>');
}
return r.join('');

下一步，我们来重写我们的模板函数，为了方便在浏览器中测试，我们使用旧的语法：

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

var templateEngine = function(tpl, data) {
    var re = /<%([^%>]+)?%>/g,
        code = 'var r=[];\n',
        cursor = 0, // 这个用来指示处理到了哪个字符
        match;
    var add = function(line) {
        // 替换掉转义字符'"'，并放入数组里
        code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
    }
    while(match = re.exec(tpl)) {
        // 通过正则把模板和非模板分开
        add(tpl.slice(cursor, match.index));
        add(match[1]);
        cursor = match.index + match[0].length;
    }
    add(tpl.substr(cursor, tpl.length - cursor));
    code += 'return r.join("");'; // <-- return the result
    console.log(code);
    return tpl;
}
var template = '<p>Hi, my name is <%this.name%>. My job is <%this.profile.job%>.</p>';
console.log(templateEngine(template, {
    name: "nuoka",
    profile: { job: 'write bug' }
}));

这里要注意的是处理双引号那部分，如果不进行转义，那么它将是无效的js语法。运行一下上面的例子，看看它打印出什么来。

1
2
3
4
5
6
7

var r=[];
r.push("<p>Hi, my name is ");
r.push("this.name");
r.push(". My job is ");
r.push("this.profile.job");
r.push(".");
return r.join("");

出了点意外，this.name和this.profile.job不是我们想要的，它们不应该被双引号包裹着。来修改一下add方法：

1
2
3
4
5
6
7
8
9
10

var add = function(line, js) {
    js ? code += 'r.push(' + line + ');\n' 
       : code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
}
var match;
while(match = re.exec(tpl)) {
    add(tpl.slice(cursor, match.index));
    add(match[1], true); // 匹配的字符应该是有效的js语法
    cursor = match.index + match[0].length;
}

最后生成了：

1
2
3
4
5
6
7

var r=[];
r.push("<p>Hi, my name is ");
r.push(this.name);
r.push(". My job is ");
r.push(this.profile.job);
r.push(".");
return r.join("");

在templateEngine函数的最后，就可以执行生成的函数体了：

1

return new Function(code.replace(/[\r\t\n]/g, '')).apply(data);

我们使用apply方法来调用这个函数，它生成一个函数作用域，这样里面this就自动指向了data。

到现在我们已经做得非常好了，能够支持基本的js语法，分离出模板，最后我们还想支持更多的js语法，比如说if/else、for循环。

1
2
3
4
5
6
7
8

var template = 
'My skills:' + 
'<%for(var index in this.skills) {%>' + 
'<a href="#"><%this.skills[index]%></a>' +
'<%}%>';
console.log(templateEngine(template, {
    skills: ["js", "html", "css"]
}));

对于上面的模板就会抛出一个Uncaught SyntaxError. Unexpected token for语法错误。我们调试一下，在控制台上就会看到错误所在：

1
2
3
4
5
6
7
8
9

var r=[];
r.push("My skills:");
r.push(for(var index in this.skills) {);
r.push("<a href=\"\">");
r.push(this.skills[index]);
r.push("</a>");
r.push(});
r.push("");
return r.join("");

for循环不应该放入数组里面，我们再添加一个正则表达式，把if, for, else, switch, case, break, { 或者 } 开头的单独的放在一行，

1
2
3
4
5
6
7
8
9
10

var re = /<%([^%>]+)?%>/g,
    reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,  // 新增处理更多语法
    code = 'var r=[];\n',
    cursor = 0;
var add = function(line, js) {
    js ? code += line.match(reExp) 
       ? line + '\n' 
       : 'r.push(' + line + ');\n' 
       : code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
}

增加一个正则处理后的结果像这样：

1
2
3
4
5
6
7
8
9

var r=[];
r.push("My skills:");
for(var index in this.skills) {
r.push("<a href=\"#\">");
r.push(this.skills[index]);
r.push("</a>");
}
r.push("");
return r.join("");

模板渲染后就是这样啦：

1

My skills:<a href="#">js</a><a href="#">html</a><a href="#">css</a>

当然我们还可以使用更多复杂的表达式了，比如：

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

var template = 
'My skills:' + 
'<%if(this.showSkills) {%>' +
    '<%for(var index in this.skills) {%>' + 
    '<a href="#"><%this.skills[index]%></a>' +
    '<%}%>' +
'<%} else {%>' +
    '<p>none</p>' +
'<%}%>';
console.log(templateEngine(template, {
    skills: ["js", "html", "css"],
    showSkills: true
}));

现在再把代码稍微整理下，得到一个最终版本的模板处理函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

var templateEngine = function(html, options) {
    var re     = /<%([^%>]+)?%>/g, 
        reExp  = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, 
        code   = 'var r=[];\n', 
        cursor = 0, 
        match;
    var add = function(line, js) {
        js ? (code += line.match(reExp) 
           ? line + '\n' 
           : 'r.push(' + line + ');\n') 
           : (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
        return add;
    }
    while(match = re.exec(html)) {
        add(html.slice(cursor, match.index))(match[1], true);
        cursor = match.index + match[0].length;
    }
    add(html.substr(cursor, html.length - cursor));
    code += 'return r.join("");';
    return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
}

参考资料：

1、https://github.com/krasimir/absurd/blob/master/lib/processors/html/helpers/TemplateEngine.js

什么是数组扁平化

就是将多维数组转化为一维数组，并且不能改变原来数组的值。比如说原来的数组是：

1

var arr = [1, [2, [3, 4]]];

那么扁平化之后就是：

1

[1, 2, 3, 4]

那么我们实现数组扁平化有什么用呢？可以用它来求几个数组的并集，也可以用它来找出差集。

如何实现

下面看看实现的方式。第一种很容易想到的是循环数组元素，如果还是一个数组，就递归调用该方法：

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

// 方法 1
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
    var result = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        if (Array.isArray(arr[i])) {
            result = result.concat(flatten(arr[i]))
        }
        else {
            result.push(arr[i])
        }
    }
    return result;
}
console.log(flatten(arr))

这是一个简单的实现，并没有做什么优化。

我们知道Array.prototype.toString可以返回一个字符串，表示指定的数组及其元素。对于数组对象，toString 方法返回一个字符串，该字符串由数组中的每个元素的 toString() 返回值经调用 join() 方法连接（由逗号隔开）组成。而String.prototype.split方法使用指定的分隔符字符串将一个String对象分割成字符串数组，以将字符串分隔为子字符串，以确定每个拆分的位置。

1
2
3
4
5
6
7
8
9
10

// 方法2
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
    return arr.toString().split(',').map(function(item){
        return +item
    })
}
console.log(flatten(arr))

对于数组里面含有不同类型的数据时，这种方式就不适用了。

既然是对数组进行处理，最终返回一个值，我们就可以考虑使用 Array.prototype.reduce 来简化代码，这个方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。

1
2
3
4
5
6
7
8
9
10

// 方法3
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
    return arr.reduce(function(prev, next){
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}
console.log(flatten(arr))

ES6 增加了扩展运算符，用于取出参数对象的所有可遍历属性，拷贝到当前对象之中：

1
2

var arr = [1, [2, [3, 4]]];
console.log([].concat(...arr)); // [1, 2, [3, 4]]

这种方法只可以扁平一层，但是可以稍微改改：

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

// 方法4
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr))

最后放出终极大招，看看underscore是怎么实现的？

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

/**
 * 数组扁平化
 * @param  {Array} input   要处理的数组
 * @param  {boolean} shallow 是否只扁平一层
 * @param  {boolean} strict  是否严格处理元素，下面有解释
 * @param  {Array} output  这是为了方便递归而传递的参数
 * 源码地址：https://github.com/jashkenas/underscore/blob/master/underscore.js#L528
 */
function flatten(input, shallow, strict, output) {
    // 递归使用的时候会用到output
    output = output || [];
    var idx = output.length;
    for (var i = 0, len = input.length; i < len; i++) {
        var value = input[i];
        // 如果是数组，就进行处理
        if (Array.isArray(value)) {
            // 如果是只扁平一层，遍历该数组，依此填入 output
            if (shallow) {
                var j = 0, len = value.length;
                while (j < len) output[idx++] = value[j++];
            }
            // 如果是全部扁平就递归，传入已经处理的 output，递归中接着处理 output
            else {
                flatten(value, shallow, strict, output);
                idx = output.length;
            }
        }
        // 不是数组，根据 strict 的值判断是跳过不处理还是放入 output
        else if (!strict){
            output[idx++] = value;
        }
    }
    return output;
}

来看看主要的参数解释：

• shallow true + strict false ：正常扁平一层
• shallow false + strict false ：正常扁平所有层
• shallow true + strict true ：去掉非数组元素
• shallow false + strict true ： 返回一个[]

Underscore确实有非常多值得学习的地方，更推荐Lodash。

这篇文章主要是对之前项目的一点总结，提出一些在开发中可以进行性能优化的点，针对vue-cli初始化或webpack打包的项目。如果需要了解web性能方面的知识，请参考web性能。

代码分割

默认的情况下，webpack会把你应用的代码打包到一个bundle中，如果你的项目有很多的页面，这样打包出来的文件会非常大，导致加载慢。最好的方式是按照页面划分，每个页面单独分割出一个文件，然后按需加载。比如，你的页面中有一个首页和一个用户信息页，那么可以把它们分成两个文件index.vue和info.vue。当然，如果首页还是很大，还可以按照页面组件来划分，比如menu.vue、tab.vue、modal.vue等。

组件动态加载

通过上面的分割代码之后，bundle被分成了很多小部分，这样我们可以动态加载需要的部分。来看看是怎么实现的？

利用import()作为动态模块加载器。在webpack中已经把import()作为一个代码分割点，它把import来的模块打包成一个单独的文件，并在需要的时候去加载。import接收一个文件路径作为参数，然后返回一个Promise。这里有一个异步单文件组件：

AsyncComponent.vue

1
2
3
4
5
6

<template>
  <div>Async Component</div>
</template>
<script>
  export default { }
</script>

使用import就像这样如此简单整洁的完成异步加载：

1
2
3
4
5
6

new Vue({ 
  el: '#app',
  components: {
    AsyncComponent: () => import('./AsyncComponent.vue')
  }
});

vue-router路由懒加载

在vue的项目中，经常会使用vue-router去管理SPA应用。当页面非常多时，打包的文件会变得很大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。使用import，再结合webpack，很容易就能做到。

首先，定义一个能够被 Webpack 自动代码分割的异步组件：

1

const AsyncComponent = () => import('./AsyncComponent.vue')

然后在路由定义中去引用它：

1
2
3
4
5

const router = new VueRouter({
  routes: [
    { path: '/asyncComponent', component: AsyncComponent }
  ]
})

当然，如果你想对你的组件使用不同的名字，也很容易做到：

1

const asyncComponent = () => import(/* webpackChunkName: "async-component" */ './asyncComponent.vue')

这样打包出来的分块名就是async-component.[hash].js。

运行时构建

如果在应用中你只使用了渲染函数(render functions)（在单文件组件中，会把组件编译成render function），而不需要html 模板(templates)，那么其实你不需要vue的模板编译器，这样在webpack打包的时候大约会减少25%的体积。当使用import vue from 'vue'时，默认使用运行时构建，你也可以改变webpack的配置：

1
2
3
4
5

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js' // Use the full build
  }
},

在生产环境中去掉warnings and error信息

把process.env.NODE_ENV设置成production，就可以去掉这些不需要的信息代码。

1
2
3
4
5
6
7
8
9
10

if (process.env.NODE_ENV === 'production') {
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin()
  ])
}

CDN化

如果使用vue-cli，配置CDN路径很简单：

1
2
3
4
5

module.exports = {
  build: {
    assetsSubDirectory: 'static',
    assetsPublicPath: './',  // 这里换成CDN地址
  }

这样对于打包后的js和css路径引用是没有问题的，但是js里使用绝对路径或相对路径引用的图片却没有正常引用CDN地址。

1
2
3
4
5
6
7

export default {
    data() {
        return {
            img: './logo.png'
        }
    }
}

这里换一种方式就能正确引用了：

1
2
3
4
5
6
7
8
9

import logo from './logo.png'
export default {
    data() {
        return {
            img: logo
        }
    }
}

代码层面

v-show or v-if：如果不是频繁的切换显示，我更倾向于使用v-if，它可以减少页面中dom总数，并且它的切换时间肉眼基本没有什么感觉的。

参考资料

1、潜谈vue项目优化

2、vue路由懒加载

3、vue-js-code-splitting-webpack

4、vue-js-boost-your-app-with-webpack

先来看下面的例子输出什么？

1
2
3
4
5
6
7
8
9
10

function foo(args) {
  args.push(4);
  console.log(args); // 1、输出？
  args = [4, 5, 6];
  args.push(7);
  console.log(args); // 2、输出？
}
var arr = [1, 2, 3];
foo(arr);
console.log(arr); // 3、输出？

1处输出[1, 2, 3, 4]；2处输出[4, 5, 6, 7]；3处输出[1, 2, 3, 4]，为什么不是[4, 5, 6, 7]？

我们知道在最新的ECMAScript标准中定义了7种数据类型，其中，

6种原始类型：Boolean，Null，Undefined，Number，String，Symbol（ECMAScript 6新定义）；

和Object。

而Javascript対值的引用和赋值或者传递完全由值的类型来决定。

对于简单值，总是通过值复制的方式来赋值或传递，包括null、undefined、字符串、数字、布尔以及ES6中的symbol；对于复合值总是通过引用复制的方式赋值或传递，包括对象（数组或封装的对象）、函数。

我们再来看上面的例子，变量arr是数组，属于复合值类型，它的赋值和传递都是通过引用的方式，来看看执行foo函数的时候发生了什么。

1
2
3
4
5
6
7
8
9
10

foo(arr);
// 对上面函数的执行做一个等价转换
function foo(args) {
  var args = arr; // 创建变量args指向arr指向的值
  args.push(4); // args和arr是分别指向同一个复合值[1, 2, 3]的两个不同引用。注意，args和arr仅仅是指向值[1, 2, 3]，并非持有，所以调用.push(4)的时候，它们更改的是同一个值，然后它们都指向更改后的新值[1, 2, 3, 4]。
  console.log(args); // [1, 2, 3, 4]
  args = [4, 5, 6]; // 对args重新赋值，相当于重新改变了args的指向，当是并不影响arr原来的指向，也就是说arr还是指向[1, 2, 3, 4]
  args.push(7); // args = [4, 5, 6, 7]
}
// 执行完foo函数后，arr的值为[1, 2, 3, 4]

从这个例子中我们可以得出：

• 运算符=就是创建或修改变量在内存中的指向。
• 初始化变量时为创建，重新赋值即为修改。
• 我们无法自行决定使用值复制还是引用复制，一切由值的类型来决定。

下面我们再尝试从内存占用的角度来解释。

首先看一个简单的例子：

1
2
3
4

var o1 = { m: 1 }; // a1 = { m: 1 }
var o2 = o1; // o2 = { m: 1}
o1 = 2; // 对o1重新赋值
console.log(o2); // { m: 1 }

前两句代码的内存区情况如下：

接下来：

1. 创建变量o1指向对象{m: 1};
2. 创建变量o2指向对象{m: 1};
3. 修改o1重新指向常量2;

现在再来看看内存区情况：

所以o2从头到尾都是指向对象{m: 1}。

修改上面一个例子：

1
2
3
4

var o1 = { m: 1 }; // a1 = { m: 1 }
var o2 = o1; // o2 = { m: 1}
o1.m = 2; // 对o1重新赋值
console.log(o2); // { m: 2 }

前两句代码执行完o1, o2, m在内存中的分布：

执行完o1.m = 2后：

执行o1.m = 2，相当于通过o1的间接引用改变了m的值，那么所有原来指向m的引用的值都改变了，在这里就是o2所引用的值也改变了。o1和o2从始至终都未改变过其引用，只是m改变了。

根据上面的理论知识，就会想到工作中为了分离变量间的引用所用的操作：

1
2
3
4

// 1、JSON.parse(JSON.stringfify({ a: 0 })); 
// 2、arr.slice()、arr.concat()
// 3、_.cloneDeep()
// 4、解构赋值

总结：

简单标量基本类型值(字符串和数字等)通过值复制来赋值 / 传递，而复合值(对象等)通过引用复制来赋值 / 传递。

JavaScript 中的引用和其他语言中的引用 / 指针不同，它们不能指向别的变量 / 引用，只能指向值。

​ ​ ​