Chrome拓展程序开发之Jira Tool
前端工作流之脚手架
本着DRY,本着生产力,前端基础设施有很多事情可以做。UI组件库,自定义ESLintRule,ESLint配置共享,CI配置共享等,这些机制可以一定程度的提升前端工作效率,但还有一个环节需要优化。 工作中本身并不单单只有一个项目,每个项目如果都开始从配置,实际上效率会很低。 为此业界有了很多的脚手架,比如creat-react-app,jhipster,但是第三方的往往要么过于简单,要么臃肿,根据自己实际需求打造脚手架才更为顺手。于是yeoman就派上用场了。
yeoman干嘛的?THE WEB’S SCAFFOLDING TOOL FOR MODERN WEBAPPS。
没错,要的就是它,开搞。
配置步骤
- 创建生成器项目,比如这里叫
generator-react-web
,注意前缀固定为generator-
- 创建模版项目,比如这里我只创建一个
react-web-template
- 生成器项目配置,主要支持用户选择配置选项
npm link
映射本地模块,方便测试- OK后进行包发布,比如这里我是用NPM公共源发布
- 成功后,即可开心开启新项目了
1
2
3$ npm install -g generator-react-web.
$ npm install -g @stacker/generator-react-web
$ yo @stacker/react-web
JS下的链式赋值
JS扫盲之原型链
原型链是JS基础知识之一,翻阅那么多的文章,不如自行总结一下,温故而知新。
关于原型链,绕不开几个关键词,prototype,proto,constructor,new等,这里总结下。
如有错误,欢迎斧正。
prototype
是函数身上的属性,__proto__
是对象身上的属性,constructor
是对象身上的属性实例化对象的
__proto__
指向的是创建该实例的原型对象,实例原型的constructor
会是构造函数,实例原型的__proto__
指向的是上一级,如果没有其它的对象原型,那就会是Object的实例原型。关于这点,可以参考下面这张图,摘自网上。
- constructor这个构造函数,存在于两个地方,一个是es6类写法下的构造函数,一个就是如上对象的构造函数属性。es6 class本身就只是个语法糖,底层原理还是原型链,因此都是一个意思,即构造函数即创建该实例的函数。
- 原型链指的是继承链条上的各个对象,而不是函数。
Webpack4升级至5
iframe
iframe这种技术并没被淘汰,还是有一席之地,比如WEB广告播放,比如网页Chrome插件,都可能会用到。用户无感更多是在UI操作体验上,但实际上是两个不同的站点服务。对于iframe,这里总结下。
如果iframe包含的站点为同站,则共享父页面的渲染进程,Chrome并不会开启新的进程,如果不同站,则会开启新的渲染进程
- 共享同一个渲染进程即意味着,如果子页面出现了死循环,父页面会处于等待状态,操作无响应。
- 需要了解2个概念,同源即
协议;域名;端口一致
,同站即根域名一致
- 举个例子,alan.local页面iframe加载了a.alan.local页面
iframe资源加载本身并不阻塞父页面的HTML解析执行,但父页面onload事件在子页面onload之后执行
- 需要了解页面的几个生命周期
- window.onload 浏览器不仅加载完成了 HTML,还加载完成了所有外部资源:图片,样式等
- DOMContentLoaded 浏览器已完全加载 HTML,并构建了 DOM 树,但像图片和样式表之类的外部资源可能尚未加载完成。
- beforeunload/unload 页面销毁离开
- 需要了解页面的几个生命周期
iframe作为一种跨域访问资源的方案,对于iframe页面间通讯分以下两种情况
同站
- 两个站点均设置
document.domain = 'alan-test.local';
则可以通过JS操作页面元素内容,比如子页面window.parent.document.getElementById('saveSession')
,父页面操作子页面则是window.frames['frameId'].document
- 两个站点均设置
非同站
采用CDM(cross document messaging)通讯
1
2
3
4
5
6
7
8window.addEventListener("message", (event) => {
if (event.origin !== "http://example.org:8080")
return;
// ...
}, false);
targetWindow.postMessage(message, targetOrigin, [transfer]);
容易出错的export语句
ES6 Module是官方推出的JS模块方案,随着babel,TypeScript,SPA的盛行,这个技术也用的再熟悉不过了,但有时还是会写错。反思错误,觉得是对其认识理解的还不够彻底,这里就Mark下。
如图即是有时出现的写法错误
首先这个错误是TS编译器报的,属于编译报错,与Lint报错不同,lint报错会告诉具体违反的规则,而编译报错会是
ts(code)
,这点需要区分开来错误中
code-1128
与本身我们所编写的程序文件无关,是编译器内部的,翻看TypeScript源码果然找到了相关语句。因此假如遇到TS编译报错看不懂,可以以此Code辅助进行相关问题检索。1
2
3
4
5
6
7Declaration_or_statement_expected: diag(1128, ts.DiagnosticCategory.Error, "Declaration_or_statement_expected_1128", "Declaration or statement expected."),
function diag(code, category, key, message, reportsUnnecessary, elidedInCompatabilityPyramid, reportsDeprecated) {
return { code: code, category: category, key: key, message: message, reportsUnnecessary: reportsUnnecessary, elidedInCompatabilityPyramid: elidedInCompatabilityPyramid, reportsDeprecated: reportsDeprecated };
}