search

mip-project / mip

MIT License
11 stars 1 forks source link

MIP 2.0 开发规范 #8

Open Ricardo-Li opened 6 years ago

Ricardo-Li commented 6 years ago

本 issues 讨论和 Update MIP 2.0 开发规范。

在本文档中，使用的关键字会以英文表示："MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", 和 "OPTIONAL"被定义在 rfc2119 中。

MIP-HTML 规范

自定义组件开发规范

命名规范

代码格式规范

template 规范

附：MIP 1.0-HTML 规范

CSS 规范

JavaScript 规范

  1. 组件 js
  2. common js
  3. 第三方 js
    • [MUST] 仅允许引入白名单中的第三方 js

参考：

easonyq commented 6 years ago

我这边还有几个限制（草案），@Ricardo-Li 评估一下

  1. 所有页面 必须 包含 <html>, <head>, <body>

  2. 所有页面 必须 在 <body> 的最后编写或引用 mip 相关的 js。其中顺序是：

    1. custom script (Mip.watch)
    2. mip.js
    3. 各组件的 js。如有相互依赖，把依赖项写在前面。

    举例来说：

    <body>
    <!-- DOM or MIP Component -->
    <script type="application/mip-script">
        Mip.watch('something', () => console.log('something changed.'));
    </script>
    <script type="text/javascript" src="https://somecdn/mip.js">
    <script type="text/javascript" src="https://somecdn/mip-component-a.js">
    <!-- component-b depends on component-a -->
    <script type="text/javascript" src="https://somecdn/mip-component-b.js">
</body>

  3. 一些和显示无关的标签 必须 是 <body> 的直接儿子，不允许嵌套到其他标签下。这些标签包括：

    1. <mip-data>
    2. 第 2 点中提到的 MIP 相关的 js 标签
ccksfh commented 6 years ago

@easonyq mip-bind 不是标签，是 attribute，这个不影响

Ricardo-Li commented 6 years ago

@easonyq 这几条规则我的想法是：

  1. MIP1 校验已经包括这点。
  2. 对于组件引用顺序的问题，spider 后端校验升级难度较大，因此无法强制保证，可以在文档规范上提出。
  3. 需求合理，具体执行上存在的问题是：由于 mip-data 属于 1.0 中的标签，添加校验可能会造成 1.0 线上页面不符合校验，因此暂时 hold。但是对 2.0 中新增的标签如 <mip-store> 可以增加校验。

另 2.0 中新增的 标签如果有校验需求， @ccksfh 可以补充。

ccksfh commented 6 years ago

@Ricardo-Li 对于组件校验我这边还想提一个规则，基于单向数据流的设计，组件里不允许调用 MIP.setData / mip.setData 方法随意在组件内更改数据，仅允许在外层通过修改 props 的值来关联组件内部数据，这个方便加吗

组件内不允许使用 m-bind: 方法来绑定全局数据

easonyq commented 6 years ago

@Ricardo-Li 经过今天和 CK 的联调，又多了一条规则：custom script 中不用包含 addEventListener('ready-to-watch')。这条会由 page 自动添加。

正确示例：

<script type="application/mip-script">
    mip.watch('a', () => mip.setData(xxx));
</script>

错误示例：

<script type="application/mip-script">
    window.addEventListener('ready-to-watch', () => {
        mip.watch('a', () => mip.setData(xxx));
    })
</script>
easonyq commented 6 years ago

MIP 页面中的链接依然使用 <a>，具体如下：

  1. 如果跳转到其他 MIP 页面，使用 mip-link 属性或者 data-type="mip"：

    <a href="./anotherPage.html" mip-link>xxx</a>
<a href="./anotherPage.html" data-type="mip">xxx</a>
    1. 使用相对路径，以保证 MIP CDN 的正常运行。（如果写绝对路径，不知道 spider 在转存 CDN 时会不会替换？记得他们是不处理 a 链接的对吧？）
    2. 不允许使用 target 属性

  2. 如果跳转到其他 非 MIP 页面 ，不添加 mip 属性：

    <a href="https://www.some-site.com/">
easonyq commented 6 years ago

关于 <mip-shell> 标签的规范。

  1. 一个页面 至多只允许存在一个 <mip-shell> 配置项。可以不写则使用默认配置项。
  2. <mip-shell> 的位置 必须 位于 <body> 内部，并且 必须 在 mip script，mip.js 和组件 js 文件之前。
  3. <mip-shell> 内部只允许存在一个 <script> 节点，并且 type 必须设置为 application/json。
  4. <script>内部是一个合法的 JSON 对象。

正确示例：

<html>
    <head></head>
    <body>
        <mip-shell>
            <script type="application/json">
                {
                    "key": "value"
                }
            </script>
        </mip-shell>

        <!-- mip script -->
    </body>
</html>