blog
blog copied to clipboard
aermin
📝 My blog / notes
Good morning everyone. Today I am here to talk to you about why we prefer to Puppeteer than webdriverIO. Puppeteer and webdriverIO are E2E testing frameworks. Recently our team wanted...
### 什么是Babel Babel是一个JavaScript编译器，更确切地说是源码到源码的编译器(如ES6编译成ES5)，通常也叫做“转换编译器（transpiler）”。 意思是说你为 Babel 提供一些 JavaScript 代码，Babel 更改这些代码，然后返回给你新生成的代码。可用于不同形式的静态分析（在不需要执行代码的前提下对代码分析的处理过程，反过来说，动态分析就是执行代码的同时进行代码分析）。静态分析可用于语法检查，编译，代码高亮，代码转换，优化，压缩等等。 挖坑未完待续
## 我的动机 我在GoDaddy的一个全栈团队工作，帮助支持一系列产品：从GoDaddy的新客户门户(网站)到用于开发新Web内容的内部工具。 为了测试这些当中的每一个前端(译者注：界面和功能)，我们使用了带有[Selenium](https://www.seleniumhq.org/) (译者注：Selenium 是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样) 浏览器自动化的测试框架：[WebdriverIO](http://webdriver.io/)。虽然我们对setup的跨平台可配置性表示赞赏，但我们遇到了关于Selenium的一些问题。 ## 部署浏览器Images 将Selenium浏览器整合到部署中时出现了第一个问题。我们尝试的一种方法是在部署时将Selenium浏览器下载到与代码库相同的容器中。这导致了复杂的Dockerfiles，当浏览器部署出现问题时，调试成本很高。 幸运的是，这个问题有一个简单的解决方案：[Selenium预先构建的Docker容器](https://github.com/SeleniumHQ/docker-selenium)。这些images是模块化的，维护的，随时可用的。但它带来了自己的问题。默认情况下，Docker不允许您在本地开发时查看浏览器UI，但images带有[方便的调试模式](https://github.com/SeleniumHQ/docker-selenium#debugging)以解决此问题。 ## CICD Flakiness 第二个痛点是没有我们的CICD管道，Selenium将导致薄脆度。(The second pain point was that Selenium was causing flakiness within our CICD pipeline. 不大好翻译....) 。...
## 前言 去年刚好负责团队一个repo的cli，然后写了一些后，这周又回来继续写个cli的功能，生成一个初始化的项目的cli，虽说没难度，但是如果当初写cli有做笔记的话现在来写会更省时省事些。所以现在做个笔记吧 ## 使用的库 [commander.js](https://segmentfault.com/a/1190000000736629)： node.js命令行接口的工具 [Inquirer.js](https://github.com/SBoudrias/Inquirer.js/)： 让命令行跟用户交互，通用化地收集交互数据 [chalk](https://github.com/chalk/chalk)： 用来给命令加颜色 ## 用例子上手 首先创建这个cli的项目  最后要的效果是执行node bin/init.js init my-app 创建一个项目  ### 核心代码 `bin/init.js` ``` #!/usr/bin/env node // 表明这是一个可执行的应用 const...
### 深浅拷贝区别 深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象（引用类型）的。 复制引用（引用类型）的拷贝方法称之为浅拷贝，也因为直接复制引用类型，导致新旧对象共用一块内存地址，会互相影响，具体看例子 深拷贝就是指完全的拷贝一个对象，将原对象的各个属性递归复制下来。这样即使嵌套了对象，两者也相互分离。 ### 浅拷贝 ```js var shallowCopy = function(obj) { if (typeof obj !== 'object') return; // 只拷贝对象 var newObj = obj instanceof Array...
## 创建对象 创建单个对象可以用对象字面量，object构造函数（new Object() ）方法来创建，为啥还要单独拿出来讲呢？因为这些方式有个明显的缺点：使用同 一个接口创建很多对象，会产生大量的重复代码。 为了写质量更高的代码，需要学习这些创建对象模式。 创建对象是下文实现继承的基础。 ### 工厂模式 （创建对象） 也是一种是软件工程领域一种广为人知的设计模式 `思路`：在一个函数内创建一个空对象，给空对象添加属性和属性值，return这个对象。然后调用这个函数并传入参数来使用。 `实例` ```js function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age;...
PM给的userstory： > Zendesk should support zh-HK. (notice that zh-HK is same as zh-TW) 也就是我们集成在Zendesk（一个产品）上的应用需要支持香港版的翻译（用户在浏览器选择香港语言，我们的应用的语言需要跟着变成香港的）， 然而台湾和香港都是繁体，所以在每个翻译文件夹直接拷贝已有的台湾翻译内容穿件新的zh-HK文件即可，作为程序员，手动去一个一个创建文件是不可能的，一辈都不可能的😂所以写个脚本解放双手。 代码： ```js import fs from 'fs'; import path from 'path'; async function readFiles( dir: string,...
## 字符串 ### split() [mdn](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/split) 用法：string.split(separator,limit) ，与join相反 例子： ```js var a="0,1,2,3,4,5,6"; a.split(""); //["0", ",", "1", ",", "2", ",", "3", ",", "4", ",", "5", ",", "6"] var a="0,1,2,3,4,5,6"; a.split("",3); // ["0",...
javaScript 与 HTML 之间的交互是通过事件实现的。 ## 事件流 `概念`：事件流描述的是从页面中接收事件的顺序。 ### 事件冒泡 `概念`：即事件开始时由最具体的元素（文档中嵌套层次最深 的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。  `理论及运用` - 任何可以冒泡的事件都不仅仅可以在事件目标上进行处理，目标的任何祖先节点上也能处理。 `运用`：**事件委托** 更详细的介绍看[这篇文章](https://zhuanlan.zhihu.com/p/26536815) `事件委托原理`：以将事件处理程序附加到更高层的地方负责多个目标的事件处理。 大多数 Web 应用在用户交互上大量用到事件处理程序。页面上的事件处理程序的数量和页面响应 用户交互的速度之间有个负相关。为了减轻这种惩罚，最好使用事件代理。 `事件委托实例`： ```html 我是孩子1 我是孩子2 我是孩子3 我是孩子4 我是孩子5 添加一个新孩子...
 今天查看email发现我来RC满一年了 时间好快，仿佛去年今天来实习报道刚过不久 这一年虽说还是蛮充实的，但没能完成之前给自己立的全部flag 不过这一年在公司成长还是蛮多的，业务是写较大型的功能型应用，而且团队很注重代码质量，每个pr都需要的code review， 定期的coding dojo 让自己收益匪浅，代码质量和以前比好了很多。团队用的技术也都比较新颖(react， webpack等都在跟进新版本)，ES6是日常基础了，架构也感觉挺好的 团队很多优秀的人值得自己去学习，每次跟不同的partner合作都有不同的学习收获~ 然后呢，因为是外企，除了所有文档和日常工作记录都是用英文的，有时候还需要跟美国的leader开demo meeting， 所以英文自然也是相比之前有了不少成长（当然依然被一口流利英文的同事们吊打....😂） 团队用敏捷项目管理方法，每个人轮流当Captain，学了不少代码之外的，项目管理带队方面的，有意义的东西 还有挺重要的一点就是，这里不是leader或者mentor(没有mentor 哈哈哈)让你干啥你再干啥，而是你要自己去思考，自己做决定，从全局去考虑，来评审需求或者技术方案等 自己呢，还在空余时间撸了个新项目[ghChat](https://github.com/aermin/ghChat)，这是我最用心去写的开源项目了，不断重构占的时间比开发功能的时间还多。现在真觉得大部分业务功能开发其实还好，写出好代码才是真正值得自豪的事情 然后说下不足吧，立的flag要去完成呀！