原型链继承基于对象的原型链来实现，在 ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。可以总结为:当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是Object.prototypefunction Parent() { this.name = 'Parent' } Parent.prototype.getName = function () { return this.name } function Child() {} Child.prototype = new Parent() // 继承自Parent Child.prototype.constructor = Child const child = new Child() console.log(child.getName()) // "Parent"缺点:包含引用类型的原型属性会被所有实例属性共享，容易造成属性的修改混乱在创建子类型的实例时，不能向父类构造函数中传递参数基于以上问题，在实践中很少会单独使用原型链。构造函数继承构造函数继承的思想主要是在子类构造函数中调用父类构造函数，使用 call 或 apply 实现function Pa ...继续阅读 (9)

#### 原型链继承 基于对象的原型链来实现，在 ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。可以总结为:当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 `Object.prototype` ```javascript title="原型链继承" function Parent() { this.name = 'Parent' } Parent.prototype.getName = function () { return this.name } function Child() {} Child.prototype = new Parent() // 继承自Parent Child.prototype.constructor = Child const child = new Child() console.log(child.getName()) // "Parent" ``` 缺点: - 包含引用类型的原型属性会被所有实例属性共享，容易造成属性的修改混乱 - 在创建子类型的实例时，不能向父类构造函数中传递参数 > 基于以上问题，在实践中很少会单独使用原型链。 #### ...继续阅读 (8)

原型链继承基于对象的原型链来实现，在 ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。可以总结为:当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是Object.prototypefunction Parent() { this.name = 'Parent' } Parent.prototype.getName = function () { return this.name } function Child() {} Child.prototype = new Parent() // 继承自Parent Child.prototype.constructor = Child const child = new Child() console.log(child.getName()) // "Parent"缺点:包含引用类型的原型属性会被所有实例属性共享，容易造成属性的修改混乱在创建子类型的实例时，不能向父类构造函数中传递参数基于以上问题，在实践中很少会单独使用原型链。构造函数继承构造函数继承的思想主要是在子类构造函数中调用父类构造函数，使用 call 或 apply 实现function Pa ...继续阅读 (9)

早在 2018 年开始写博客的时候，就收到过编辑的出书邀请，当时答应了要写，但出了点意外就没有写成。后来 2019 年开始做 B 站，做了几个月后又收到清华大学出版编辑的邀请，而我想把曾经的愿望实现，于是就答应了，这样出版了我人生的第一部书籍《JavaScript 基础语法详解》。现在总结一下出版过程，除了好好欣赏一下劳动成果外，也给你提供一些经验，如果哪天你也决定出书了，可能会对你有所帮助。 ...继续阅读 (33)

原型__proto____proto__是每个 JavaScript 对象（除了 null）都有的一个内部属性，它指向该对象的构造函数的原型对象（即 prototype 属性）。这是一种隐式原型__proto__决定了对象的原型链。如果我们访问一个对象的属性或方法，而该对象本身没有这个属性或方法，JavaScript 会沿着**proto**指向的原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端nullconst obj = {} console.log(obj.__proto__ === Object.prototype) // true const arr = [] console.log(arr.__proto__ === Array.prototype) // trueprototypeprototype是函数对象的一个属性。每当我们定义一个函数时，JavaScript 引擎会为这个函数自动创建一个prototype属性，该属性是一个对象（默认情况下只包含一个 constructor 属性，指向这个函数本身）prototype是用于实现 JavaScript 继承的关键机制。当一个函数被用作构造函数来创建对象时，所有通过该构造函数创建的对象都将共享这个prototype对象中的属性和方法简单来说，该函数实例化的所有对象的proto的属性指向这个对象，它是该函数所 ...继续阅读 (8)

#### 原型 [**\_\_proto\_\_**](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) - `__proto__` 是每个 JavaScript 对象（除了 null）都有的一个内部属性，它指向该对象的构造函数的原型对象（即 prototype 属性）。这是一种隐式原型 - `__proto__` 决定了对象的原型链。如果我们访问一个对象的属性或方法，而该对象本身没有这个属性或方法，JavaScript 会沿着 `**proto**` 指向的原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端 `null` ```javascript title="__proto__" const obj = {} console.log(obj.__proto__ === Object.prototype) // true const arr = [] console.log(arr.__proto__ === Array.prototype) // true ``` [**prototype**](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Referen ...继续阅读 (9)

原型__proto____proto__是每个 JavaScript 对象（除了 null）都有的一个内部属性，它指向该对象的构造函数的原型对象（即 prototype 属性）。这是一种隐式原型__proto__决定了对象的原型链。如果我们访问一个对象的属性或方法，而该对象本身没有这个属性或方法，JavaScript 会沿着**proto**指向的原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端nullconst obj = {} console.log(obj.__proto__ === Object.prototype) // true const arr = [] console.log(arr.__proto__ === Array.prototype) // trueprototypeprototype是函数对象的一个属性。每当我们定义一个函数时，JavaScript 引擎会为这个函数自动创建一个prototype属性，该属性是一个对象（默认情况下只包含一个 constructor 属性，指向这个函数本身）prototype是用于实现 JavaScript 继承的关键机制。当一个函数被用作构造函数来创建对象时，所有通过该构造函数创建的对象都将共享这个prototype对象中的属性和方法简单来说，该函数实例化的所有对象的proto的属性指向这个对象，它是该函数所 ...继续阅读 (10)

#### this 与其他语言相比，函数的 `this` 关键字在 `JavaScript` 中的表现略有不同，此外，在[严格模式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)和非严格模式之间也会有一些差别。 在绝大多数情况下，函数的调用方式决定了 `this` 的值（运行时绑定）。`this` 不能在执行期间被赋值，并且在每次函数被调用时 `this` 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 `this` 值，而不用考虑函数如何被调用的。ES2015 引入了[箭头函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，箭头函数不提供自身的 this 绑定（`this` 的值将保持为闭合词法上下文的值）。 `this` 的值取决于它出现的上下文：函数、类或全局。 ##### 全局作用域 - 直接调用一个函数，就是默认绑定，this 在非严格模式下指向的为全局对象 `window` ```javascript title="全局作用域" function fn() { console.log(thi ...继续阅读 (9)

this与其他语言相比，函数的this关键字在JavaScript中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下，函数的调用方式决定了this的值（运行时绑定）。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。ES5 引入了 bind 方法来设置函数的this值，而不用考虑函数如何被调用的。ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定（this的值将保持为闭合词法上下文的值）。this的值取决于它出现的上下文：函数、类或全局。全局作用域直接调用一个函数，就是默认绑定，this 在非严格模式下指向的为全局对象windowfunction fn() { console.log(this) // window } fn()const obj = { fn: () => { console.log(this) // window }, fn1() { return function () { console.log(this) // window } }, fn2() { console.log(this) // window }, } obj.fn() obj.fn1()() const Fn = obj.fn2 Fn()函数作 ...继续阅读 (9)

this与其他语言相比，函数的this关键字在JavaScript中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下，函数的调用方式决定了this的值（运行时绑定）。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。ES5 引入了 bind 方法来设置函数的this值，而不用考虑函数如何被调用的。ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定（this的值将保持为闭合词法上下文的值）。this的值取决于它出现的上下文：函数、类或全局。全局作用域直接调用一个函数，就是默认绑定，this 在非严格模式下指向的为全局对象windowfunction fn() { console.log(this) // window } fn()const obj = { fn: () => { console.log(this) // window }, fn1() { return function () { console.log(this) // window } }, fn2() { console.log(this) // window }, } obj.fn() obj.fn1()() const Fn = obj.fn2 Fn()函数作 ...继续阅读 (7)

本文已收录到《面试知识系列》在 JavaScript 中如何判断两个值相等，这个问题看起来非常简单，但并非如此，在 JavaScript 中存在 4 种不同的相等逻辑，如果你不知道他们的区别，或者认为判断相等非常简单，那么本文非常适合你阅读。ECMAScript 是 JavaScript 的语言规范，在ECMAScript 规范中存在四种相等算法，如下图所示：上图中四种算法对应的中文名字如下，大部分前端应该熟悉严格相等和非严格相等，但对于同值零和同值却不熟悉，下面我们分别介绍这四种算法。同值同值零非严格相等严格相等非严格相等非严格相等使用两个等号，也就是我们熟悉的双等，非严格相等表示语义相等，不要求类型一样，非严格相等在比较前会先将比较参数类型转换为一致，再进行比较，代码示例如下：1==1;// true1=='1';// true 类型不同，不影响比较结果非严格相等有非常复杂的转换规则，非常难以记忆，社区中有人将上面的规则总结成了图片，一图胜千言，如下图所示：为了方便记住非严格相等的的转换逻辑，作者将非对象值，可以总结为如下三条规则：Undefined 只和 Null 相等和 Number 比较时，另一个值会自动转换为 Number和 Boolean 比较时，另一个值会转换为 Number如果值为对象，会使用内部的 ToPrimitive 转换，可以通过自定义 Symbol.to ...继续阅读 (63)

本文已收录到《面试知识系列》划重点，这是一道面试必考题，我就问过很多面试者这个问题，✧(≖ ◡ ≖✿)嘿嘿JavaScript 是一个动态类型语言，在运行时获取变量类型是常用操作，由于 JavaScript 设计的问题，看似简单的问题，在 JavaScript 中可能并不简单，比如在社区中流传的下图，仔细看一下这些坑，即便是 JavaScript 老司机也经常翻车。上图中typeof NaN会返回number，这可能和你想的不一样，在 JavaScript 准确的获取变量类型，并不简单，正因为如此，这个问题经常被用来考察面试者，由于程序=数据+算法，而基本数据是数据的基础，所以面试中考察类型也是合理的。如果面试中你只回答使用 typeof 获取类型，那大概率是会减分的，那么该如何回答这道题呢？本文将全面系统的介绍如何在 JavaScript 中判断类型，阅读本文，可以帮你，在工作中，避开类型判断雷区，如果在面试中你回答本文的内容，那么面试官将惊呼，这是高手，比我知道的都多，然后自然是好评喽。下面先从最简单的例子开始，并一步一步提升难度，扩展思路，先来看第一个例子：在工作中，对于数据为空的情况，经常要做防御式编程，误区之一是使用非运算符直接判断。但这样做是可能有坑的，比如这会把很多徦值计算在内，常见的徦值有0,'',false,null,undefined等。例如如下的 double ...继续阅读 (62)

观察者模式观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，其所有依赖者都会收到通知并自动更新。当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。可以看作拍卖场景，拍卖师观察最高标价，然后通知给其他竞价者竞价。优点:观察者和被观察者是抽象耦合的，实现简单，主题和观察者之间的关系明确，适用于一对多的关系。缺点:当观察者较多时，主题的通知机制可能会导致性能问题，因为每个观察者都会被直接通知。具体实现class Observer { constructor(name) { this.name = name } update(data) { console.log(`观察者${this.name} 收到了: ${data}`) } }class Subject { constructor() { this.observers = [] } add(observer) { this.observers.push(observer) } notify(data) { this.observers.forEach((i) => i.update(data)) } de ...继续阅读 (9)

#### 观察者模式 - 观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，其所有 `依赖者` 都会收到通知并自动更新。 - 当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。 - 可以看作 `拍卖场景` ，拍卖师观察最高标价，然后通知给其他竞价者竞价。 优点: - 观察者和被观察者是抽象耦合的，实现简单，主题和观察者之间的关系明确，适用于一对多的关系。 缺点: - 当观察者较多时，主题的通知机制可能会导致性能问题，因为每个观察者都会被直接通知。 **具体实现** ```javascript title="观察者" class Observer { constructor(name) { this.name = name } update(data) { console.log(`观察者${this.name} 收到了: ${data}`) } } ``` ```javascript title="被观察者" class Subject { constructor() { this.observers = [] } add(observer) { this.ob ...继续阅读 (8)

观察者模式观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，其所有依赖者都会收到通知并自动更新。当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。可以看作拍卖场景，拍卖师观察最高标价，然后通知给其他竞价者竞价。优点:观察者和被观察者是抽象耦合的，实现简单，主题和观察者之间的关系明确，适用于一对多的关系。缺点:当观察者较多时，主题的通知机制可能会导致性能问题，因为每个观察者都会被直接通知。具体实现class Observer { constructor(name) { this.name = name } update(data) { console.log(`观察者${this.name} 收到了: ${data}`) } }class Subject { constructor() { this.observers = [] } add(observer) { this.observers.push(observer) } notify(data) { this.observers.forEach((i) => i.update(data)) } de ...继续阅读 (9)

背景第一次开发跟地图相关的应用，一开始定位获得经纬度什么的还比较顺利，直到要在地图上显示出来的时候发现位置标记跟理想的不同，虽已提前了解也预料到，但本以为某某地图会提供相关的API实现，翻了一个晚上文档都没有看到，于是就只能自己动手寻找相关算法实现，貌似没有找到Javascript版本，于是有了该移植版本的地图纠偏算法。最新更新请移步项目地址：https://github.com/hiwanz/wgs2mars.js快速开始引入脚本XHTML调用代码JavaScriptvar gcjloc = transformFromWGSToGCJ(119.3122312,26.0240049);返回GCJ-02坐标对象｛lng: 119.31705425869873, lat: 26.02096344048847｝致谢感谢科普和其他语言版本开源作者的贡献！坐标系科普：【高德地图API】如何解决坐标转换，坐标偏移？该版本算法参考了以下两位的相关实现：C#版：地球坐标系 (WGS-84) 到火星坐标系 (GCJ-02) 的转换算法C语言版：ChinaMapShift免责声明该Javascript版本算法是基于网络上公开已知的其他语言算法实现的移植版本，作者不对其准确性和合法性做保证，请在遵守国家保密法的前提下自行斟酌使用。 ...继续阅读 (15)

前言在上一篇文章《代码质量管理平台Sonar》中，我们简单介绍了Sonar这个代码质量管理平台，提到了它可以定制多种开发语言的代码质量审查支持，也演示了官方的Javascript审查插件的使用，但是官方插件默认的规则是不够的，或者说不一定适用于我们团队自己的内部规范，因此，接下来来说说如何定制自己的审查规则。扩展规则Sonar扩展代码审查规则的方式有两种：1，使用Java编写Sonar插件；2，在SonarQube界面直接添加XPath规则。第一种方式需要用户有Java代码编写能力，定制性强，对于大部分前端来讲要求较高，如果你有能力实现，可以根据官方提供的示例进行改造。我们主要介绍第二种方式，要求懂得XPath 1.0语法，自定义规则必须使用该规范版本的语法来遍历抽象语法树（Abstract Syntax Tree，AST），因此在编写自定义规则之前，你得先知道你所调试的代码对应的语法树是什么样子，官方提供了一个SSLR Javascript Toolkit来帮助我们方便的分析Javascript的语法树，本文使用的sslr-javascript-toolkit-1.6.jar。sslr javascript toolkit 1.6如上图所示，窗口左侧是源码区，右边是语法树信息，下面是XPath语句执行区域。源码区可以手动贴入或编写代码，也可以通过Open Source File按 ...继续阅读 (25)

1、Object.keys(obj).length === 0 ? '空' : '不为空'2、if (JSON.stringify(obj) === '{}') {return true;}return false;3、for ( let i in obj) {return true;}return false声明:本文采用BY-NC-SA协议进行授权 |WEB开发分享转载请注明转自《如何判断对象为空 {}》 ...继续阅读 (72)

在前端社区里，webpack可以说是一个经久不衰的话题。其强大、灵活的功能曾极大地促进了前端工程化进程的发展，伴随了无数前端项目的起与落。其纷繁复杂的配置也曾让无数前端人望而却步，笑称需要一个新工种”webpack 配置工程师”。作为一个历史悠久，最常见、最经典的打包工具，webpack极具讨论价值。理解webpack，掌握webpack，无论是在面试环节，还是在日常项目搭建、开发、优化环节，都能带来不少的收益。那么本文将从核心理念出发，带各位读者拨开webpack的外衣，看透其本质。究竟是啥其实这个问题在webpack官网的第一段就给出了明确的定义：At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.其意为：webpack 的核心是用于现代 JavaScript 应用程序的静态模块打包器。 当 webpack 处理您的应用程序时，它 ...继续阅读 (9)

作为一个在不断的进行优化和改进的 Blog，本站算是一个小小的试验场地。所以呢，在前几天，对本站采取了一些很久以来一直想做的改进。SEO 网站优化推广，是一个以内容展示为主要目的的Blog，使用的是 Bootstrap 框架，而内容展示，在不需要那些花哨的展示手段后，所剩下的就是简单的布局需要，Bootstrap 5以来，纯粹的布局，已经可以不需要 jQuery，这个现在看来有些重的 JS 库，而且如果不需要用到那些互动的 Bootstrap 组件的话，连 Bootstrap 自己的 JS 文件都不需要载入。于是本站就变成了这个样子，布局完全使用 Bootstrap CSS。而且这些 CSS 文件，我使用了purgeCSS工具来做了一下精简，Bootstrap 5.1.3 的 CSS 文件是 bootstrap.min.css， 其文件大小为 161KB。精简之后，只有 17KB，大大减少了文件大小。更进一步的，我是直接把这个 17KB 完全内置到 html 文件中，少掉一个阻塞渲染的因素，而这 17KB 现在看来，即使不是重复使用，也问题不大，毕竟带宽是足够的，而目前的瓶颈很多时候是在 DNS解析，等待的时间。上面就是在 Webpagetest 网站上做的测试，会阻碍渲染的来自本站的静态资源已经没有了，可能会对网页的显示速度有影响的，也就是广告了，这个没法解决，需要等 Googl ...继续阅读 (22)

這篇文章是官網上Kosko 1.0 Released的中文翻譯版。關於 Kosko 本身，除了官網，也可以參考這篇文章。自從上一個穩定版本 v0.9 已經過了好一段時間了。最近我決定開始實作工作上一直都想用的一些功能，希望這些功能也能幫助到你。Nested Manifests從 v1.0 開始，component 內的 array 和 function 會被展開，這功能對於在不同 component 之間共用 manifest 會很有用。舉例來說，通常在 Kubernetes 裡，資料庫會由一個Deployment和一個Service組成。如果要在 component 裡使用資料庫的話，在 v1.0 之前，必須要自行展開這兩個 manifest；在 v1.0 之後，就能自動展開了。這樣的話，就可以把資料庫當成單一資源，在 component 到處使用了。function createDatabase() { return [new Deployment(), new Service()];}// v1.0 之前module.exports = [new Deployment(), ...createDatabase()];// v1.0 之後module.exports = [new Deployment(), createDatabase()];Valida ...继续阅读 (7)

最近為了讓Kosko和kubernetes-models能夠支援瀏覽器或是 Deno，所以先做了一些前期準備，首先最重要的就是支援ECMAScript Module (ESM)，因為這是目前所有平台都能支援的標準，但是為了要保持 Node.js 的相容性，所以暫時還是不能放下 CommonJS。這篇文章會介紹如何讓 Node.js package 能夠同時支援 CommonJS 和 ESM，以及使用 ESM 時的注意事項。先講結論以最低支援版本來區分。Node.js 10 以上：CommonJS 輸出成.js副檔名ESM 輸出成.mjs副檔名package.json加上moduleNode.js 12 以上：CommonJS 輸出成.cjs副檔名ESM 輸出成.mjs副檔名package.json加上module和exports，type可設定為module副檔名正常來說，比較建議的做法是 CommonJS 一律採用.cjs副檔名，ESM 一律採用.mjs副檔名，這樣就能避免 Node.js 用package.json的type來判斷，但是在以下情況下會出問題。Node.js 10如果你需要 require package 裡的路徑的話，在 Node.js 10 可能就會出問題。舉例來說，當 require package 的時候，Node.js 會根據package.json裡設 ...继续阅读 (6)

今年初隨著公司的 repo 越來越多，我們決定把 web 前端部分轉為 monorepo 的形式，一開始花了一段時間研究各個 monorepo 方案的利弊，最後決定基於 Yarn 2 打造一套自用的工具。這篇文章會大概分析一些我試過的 monorepo 方案的優缺點，以及最後用 Yarn 2 的成果。現有 Monorepo 方案LernaLerna是我一開始比較熟悉的方案，在Kosko和kubernetes-models-ts都有用到，算是 JavaScript monorepo 非常普遍的選擇。👍 支援 npm，也可以善用 Yarn 提供的 workspace 功能。👍 可以偵測檔案變動，只更新並發佈有變動的 npm packages。💩 主要是設計用來「發佈到 npm」的，如果是內部使用的話，並不需要用到這功能，必須得客製lerna version才能符合我們的需求。Yarn👍 本身就內建了 workspace 功能，對於 monorepo 有最基本的支援。👍 效能好，會把共用的 dependencies 抽到最上層的node_modules共用避免浪費空間。💩 如果要在 workspace 之間互相引用的話，yarn workspace @scope/a add @scope/b總是會試圖從 npm 下載 package，而不是先安裝 local 版本 (yarnpkg/ya ...继续阅读 (8)

最近在開發公司內部使用的工具時，心血來潮想用Lerna來管理monorepo，但是又想用TypeScript，結果碰到了一些編譯上的問題，例如套件之間互相依賴時，TypeScript 不知道依賴關係而無法了解編譯順序，導致整個 monorepo 無法編譯成功。之後發現了Quramy/lerna-yarn-workspaces-example這個範例，裡頭用了 Yarn、Lerna 和 TypeScript，在這之中 Yarn 並不是必須的可以忽視，重點是在 TypeScript 3.0 推出的Project References，這個功能讓 TypeScript 能夠知道各個模組之間的依賴關係，因此自動解決了編譯順序的問題。要使用Project References的話必須在tsconfig.json加上下列選項。{ "compilerOptions": { "composite": true, "declaration": true, "rootDir": "src", "outDir": "dist" }}composite- 讓 TypeScript 能夠快速找到被引用專案的位置。declaration- 編譯定義檔 (.d.ts)。rootDir- 設定專案的根目錄，預設是tsconfig.json的所屬資 ...继续阅读 (6)

敝社從 2016 年就開始Kubernetes，應該能算是相當早期的使用者了，也因此我們累積了一堆的 Kubernetes YAML 設定檔，從某個時間開始 staging 和 production 環境的設定檔更開始分裂，自此以來一直無法合併。因此這次的目標就是：整合各環境的設定能夠重複利用能夠驗證設定是否正確現有工具一開始我先從awesome-kubernetes尋找現有的設定管理工具，以下列出一些我覺得還不錯的工具以及它們的優缺點。kustomize👍 屬於sig-cli的專案，應該能夠保障更新活躍且不會突然棄坑。👍 學習成本低，使用熟悉的 YAML。👍 用 Overlay 的概念讓不同環境的參數去 patch 基礎設定檔。👎 沒有驗證設定的功能。ksonnet👍 彈性極高，能透過變數及函數共享設定。👍 支援Helm。👍 能夠驗證設定。👎 使用比較少見的jsonnet，需要另外花時間學習，而且資源也比較少。😢 已停止維護。kapitan👍 能夠管理 secrets。👍 能夠產生文件、Terraform 設定以及一些 scripts。👍 用 Inventory 的概念管理不同環境和共享設定。👎 使用jsonnet，理由同上。👎 使用jinja2做為 template engine，我不太能夠理解既然都用上jsonnet的話那為何還需要用 templates？造輪子因為現有工具對 ...继续阅读 (3)

DocSearch是Algolia最近提供的一個免費搜尋引擎服務，只要登錄網站，他們就會爬好整個網站，使用者只要把 JavaScript 腳本貼到適當的位置上即可使用，和Swiftype差不多，只是搜尋結果更好，而且速度更快。這篇文章可能看起來很像業配文，不過我真的沒收這家公司的錢啦 XD。在我登錄網站後，客服不到一小時就寄信跟我聯絡了，確認了一些事情後很快的就幫我設定好搜尋引擎，我只要把 JavaScript 腳本貼上即可使用，之後的各種要求也很快就回覆了，最後我得以在 12/31 前把所有東西都處理完成。各位可以在hexo.io看到最後的成果，搜尋速度很快，就算是中文搜尋精準度也相當不錯，然而目前的缺點就是所有的設定都必須經過客服，我想可能要等一段時間才會解決吧。 ...继续阅读 (8)

好久不見，在資服創新競賽結束後，我耍廢了好一段時間，更準確來說，從校內專題比賽結束後就開始耍廢了 XD，Hexo 的開發停滯這麼久真是不好意思 てへぺろ(・ω<)。我在暑假時開始進入Dcard，利用React+Redux+React Router寫了一個和現行網站完全分離的行動版網站，那時候Redux的文件還非常不齊全，很多東西都得自己摸索，不過拜@tomchentw所賜，解決了很多架構上的問題。然而在我跑去寫 V2 API 的這兩個月，Redux竟然從 1.0.0 升級到 3.0.4 了！React Router也終於推出 1.0.0 了！原本以為新版 Admin panel 也能沿用相同的配置，沒想到還是有一些部分得推倒重來，不禁令人感嘆前端變化之快。Redux先說說Redux究竟有什麼差別吧，其實Redux本身的修改倒還好，只要看Changelog就 OK 的程度，但是它周邊的東西就麻煩了。react-redux從 0.2.1 跳到 4.0.0，此外還多了一堆伙伴，Redux生態圈的形成也他媽的太快了吧！react-reduxreact-redux本身的 API 很簡單，但是Changelog卻能出現好幾次的Breaking Change，這東西是有這麼容易 Break 逆！主要的差別在於connectfunction 變得更好用了，過去只能用來綁定 props，現在也能綁定 ...继续阅读 (6)

最近在寫專題時，嘗試了許多新東西，例如改用 Go 來寫 API Server，還試了最近很潮的 Isomorphic JavaScript，如果未來有時間的話可能會針對這個主題再另外寫一篇文章，今天先寫最近遇到的一個怪問題。各位可能有聽過Fetch這個新一代的標準，它簡化了瀏覽器麻煩的 XMLHttpRequest API，而且支援 Promise。在開發時，Fetch運行順利，然而上線後卻會發生 Illegal Invocation 錯誤，更弔詭的是，這種錯誤只在 Chrome 上發生。（我沒有在 Safari 或 Opera 上試過）我把原始碼都翻過了遍，上網搜尋關於 Illegal Invocation 也大都是關於 jQuery 的解答，在苦心搜尋幾小時就快放棄時，終於在 GitHub 上解答：matthew-andrews/isomorphic-fetch#20解決方式非常簡單，就是把原本的：import fetch from 'isomorphic-fetch';改成：import fetch_ from 'isomorphic-fetch';const fetch = fetch_.bind(this);只要把 import 進來的fetch綁定this，就能解決這個詭異的問題了。後記題圖是本季新番「Show By Rock」，雖然一開始的展開很腦殘，不過之後的劇情卻 ...继续阅读 (8)

最近在公司負責 Dashboard 的開發，除了從資料庫挖資料以外，還得想盡辦法從其他來源找到更多的資料，而其中一個資料來源就是 Google Analytics。我過去都是在瀏覽器上使用 OAuth，這次花了一個下午才研究出如何在伺服器的 OAuth 用法，途中碰壁了好幾次，以下我將從頭到尾介紹如何接上 Google API，全文將以 Node.js 示範，其中原理可運用在其他程式語言，或 Google 其他服務的 API。建立專案首先，在Google Developer Console建立專案，並開啟「Analytics API」的存取權，到此為止都還是小菜一碟，跟不上的可以洗洗睡了，接下來才是正題。為了獲得 API 的存取權，我們必須申請一個新的用戶端 ID。請進入側邊欄中的「API 和驗證」→「憑證」頁面，你將可以看到一個預先建立的「Compute Engine 和 App Engine」的用戶端 ID，那個一點屁用都沒有，別管它。點選橘色按鈕「建立新的用戶端 ID」後，會跳出一個視窗，請選擇「服務帳戶」，並按下藍色按鈕「建立用戶端 ID」。經過數秒後，新的用戶端 ID 便建立完成，同時會跳出一個 JSON 檔案的下載視窗，該檔案是用來存放 Private key 的，非常重要，請妥善保存。服務帳戶到此為止便建立完成，你可在頁面下方看到熱騰騰剛建好的服務帳戶，你現在可以關掉 ...继续阅读 (6)

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，使其轻量又高效。Node.js让JavaScript 运行在服务端的开发平台，使JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。Node.js由Ryan Dahl开发，于2009年5月在GitHub上发布第一个版本，2011年7月，在微软的支持下发布第一个Windows版本。 ...继续阅读 (53)