未分类

    记最近 get 到的几个知识点

    最近陆陆续续实践了几个小点,但却零零散散的,这里整理并记录下来。包括了 commit 日志规范, postCSS, postMessage这几个小点。


    GIT Commit 日志规范

    组里没有完整的对 GIT 的规范, 但是最近看到 angular 的 commit 日志,好规范,所以还是觉得要严格要求自己, 规范自己的日志行为。这里参考了下 angular 的规范和 ivweb 规范。总结如下,以后自己会严格遵循。目的: 统一 commit 标准, 方便以后 review 和排查问题。

    基本规范说明

    格式的说明如下:

    1
    2
    3
    4
    5
    <type>(<scope>): <subject>
    <BLANK LINE>
    <body>
    <BLANK LINE>
    <footer>

    type代表某次提交的类型,比如是修复一个bug还是增加一个新的feature。

    所有的type类型如下:

    • feat: 新增feature
    • fix: 修复bug
    • docs: 仅仅修改了文档,比如README, CHANGELOG, CONTRIBUTE等等
    • style: 仅仅修改了空格、格式缩进、都好等等,不改变代码逻辑
    • refactor: 代码重构,没有加新功能或者修复bug
    • perf: 优化相关,比如提升性能、体验
    • test: 测试用例,包括单元测试、集成测试等
    • chore: 改变构建流程、或者增加依赖库、工具等
    • revert: 回滚到上一个版本
    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 标题行:50个字符以内,描述主要变更内容
    #
    # 主体内容:更详细的说明文本,建议72个字符以内。 需要描述的信息包括:
    #
    # * 为什么这个变更是必须的? 它可能是用来修复一个bug,增加一个feature,提升性能、可靠性、稳定性等等
    # * 他如何解决这个问题? 具体描述解决问题的步骤
    # * 是否存在副作用、风险?
    #
    # 尾部:如果需要,可以添加一个链接到issue地址或者其它文档,或者关闭某个issue。

    postCss/Prefixcss

    最近在看小程序的工具的时候,发现有这么一项:

    小程序开发工具截图

    ES5->ES6 是我经常用的, 如果不用,在很多机型里面就会报错。但是这个样式补全是指的什么呢???我的猜想是自动补全一些前缀,免去了用工具补全。

    后来跟重构的妹子确认,说确实是这样,在以前的 web 项目里, 她一般也不会自己去做这些兼容的事情,一般也是用工具,比如 gulp 来做。有几次测试测出来不兼容的问题,也都是由于没有勾选这个选项。

    虽然不写 css 了,但是还是简单的去查了下,记录整理如下:

    PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的,比如可以支持变量和混入(mixin),增加浏览器相关的声明前缀,或是把使用将来的 CSS 规范的样式规则转译(transpile)成当前的 CSS 规范支持的格式。从这个角度来说,PostCSS 的强大之处在于其不断发展的插件体系。目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要,开发出自己的 PostCSS 插件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 比如 在 Gulp 中使用 PostCSS 插件
    var gulp = require('gulp');
    gulp.task('css', function() {
    var postcss = require('gulp-postcss');
    return gulp.src('app/**/*.css')
    .pipe(postcss([require('autoprefixer')]))
    .pipe(gulp.dest('dist/'));
    });

    AutoPrefixer 是PostCss的一个插件

    而我们经常用的Autoprefixer 是一个流行的 PostCSS 插件,其作用是为 CSS 中的属性添加浏览器特定的前缀。由于 CSS 规范的制定和完善一般需要花费比较长的时间,浏览器厂商在实现某个 CSS 新功能时,会使用特定的浏览器前缀来作为正式规范版本之前的实验性实现。比如 Webkit 核心的浏览器使用-webkit-,微软的 IE 使用-ms-。为了兼容不同浏览器的不同版本,在编写 CSS 样式规则声明时通常需要添加额外的带前缀的属性。这是一项繁琐而无趣的工作。Autoprefixer 可以自动的完成这项工作。Autoprefixer 可以根据需要指定支持的浏览器类型和版本,自动添加所需的带前缀的属性声明。开发人员在编写 CSS 时只需要使用 CSS 规范中的标准属性名即可。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 标准的 CSS 弹性盒模型的 display 属性声明
    #content {
    display: flex;
    }
    // 使用 Autoprefixer 处理之后的 CSS
    #content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    }

    postMessage 初体验

    一直都知道 html5 postMessage是用来解决跨域、跨窗口消息传递的,但是一直都没有实践过,因为我真的很少很少用 iframe, 今天决定还是写个 demo,然后稍微记录下,要不然总感觉这个东西没掌握。

    postMessage 虽然是跨域的,但是跟我们以前用到的 cors, jsonp 都不太一样。cors 和 jsonp 趋向于 客户端与服务器端的通信。而 postMessage 却是客户端里 页面之间的数据传递。比如嵌套的 iframe 之间的消息传递。 postMessage 提供了在网页文档之间互相接收与发送信息的功能。

    otherWindow.postMessage(message, targetOrigin, [transfer]);


    otherWindow

    其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

    message

    将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。也可以使用 JSON.stringfy等。

    targetOrigin

    通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是字符串”*”(表示无限制)或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。这个机制用来控制消息可以发送到哪些窗口;例如,当用postMessage传送密码时,这个参数就显得尤为重要,必须保证它的值与这条包含密码的信息的预期接受者的orign属性完全一致,来防止密码被恶意的第三方截获。

    如果你明确的知道消息应该发送到哪个窗口,那么请始终提供一个有确切值的targetOrigin,而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。

    transfer (可选)

    是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。


    举个例子

    这里举两个例子,一个是向本页面嵌套的 iframe 发送消息, 一个是向 open 出来的一个新的 window 发送消息。

    1
    2
    3
    4
    5
    6
    <iframe src="http://pay.qq.com/2.html" frameborder="0" id="frame"></iframe>
    <input type="text" id="input">
    <button id="send">send message</button>
    <br>
    <button id="open">open a new page</button>
    <button id="sendToNewPage">send to the new page</button>

    对应本页面的js:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    window.onload = function () {
    let btn = document.getElementById('send'),
    open = document.getElementById('open'),
    sendToNewPage = document.getElementById('sendToNewPage'),
    inputVal, win;
    // 向本页面嵌套的 iframe 发送消息
    btn.onclick = function() {
    inputVal = document.getElementById('input').value;
    document.getElementById('frame').contentWindow
    .postMessage(inputVal, 'http://pay.qq.com');
    };
    // 打开一个新的窗口
    open.onclick = function () {
    win = window.open('http://pay.qq.com/2.html');
    };
    // 向新的窗口发送消息
    sendToNewPage.onclick = function () {
    win.postMessage('test messa', 'http://pay.qq.com');
    }
    }

    为了制造是跨域的情况,这里可以本地配置一层 代理, 比如 把本地的 一个 2.html 映射到 pay.qq.com 上。 比较容易,配置个 host 就可以了。

    在 2.html 页面里,我们只要监听 message 事件,得到相应的 data, 然后做处理,比如我这里就显示在页面上。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    window.onload = function () {
    let val = document.getElementById('h3');
    function log(e) {
    val.innerHTML = e.data;
    }
    if(window.addEventListener) {
    window.addEventListener('message', log, false);
    } else {
    window.attachEvent('message', log);
    }
    }

    就是一个很简单的小栗子。 使用了下 postMessage, 问了下组里的同事, 我们支付的标准版弹窗就用到了 postMessage, pay.qq.com 上也用到了。比较好用。


    总结

    除了这些, 最近还研究了下 vue 的数据绑定的实现。发现里面 【套路】 真多,能学到好些东西,比如 实践 订阅发布模式,比如 脏检测, 数据劫持等。 准备研究清楚最近好好总结下。

    本文主要记录了, commit 日志规范, postCss, postMessage 这三个小知识点。