对组件化支持的探讨 #16

creeperyang · 2016-05-17T02:57:46Z

基于handlebars的组件化探讨。

creeperyang · 2016-05-17T04:47:49Z

组件必然是要求内聚的，组件的依赖资源（html，css，js，image等等）的管理。

组件化可以是纯前端方案，也可以是后端方案。因为项目基于handlebars的后端渲染，所以需要一个后端方案。

模板设计

{{css 引入组件的样式表}}
{{js 组件交互脚本}}
<tpl>模板</tpl>

资源引用与使用尽量靠近，利于维护

componentA
    |---- image
    |---- css
    |---- js
    |---- tpl

所有组件的css能输出到head，防止页面渲染的闪烁
所有组件的js能输出到body底部，提高渲染速度

creeperyang · 2016-05-17T04:55:26Z

在 b26dc81 中，其实已经实现了css在组件中的管理：

// component flightInfo
<!-- __component_key__={{__c_flightInfo__._key}} -->
<div class="flight-info">
...
</div>
{{cssx '/book/partials/components/flightInfo/flightInfo.css'}}

// component passenger
<!-- __component_key__={{__c_passenger__._key}} -->
<div class="basic-card">
    <div class="passenger-info">
        <div class="form">
            {{> (relative __c_passenger__._stateFile) }}
        </div>
    </div>
</div>
{{cssx '/book/partials/components/passenger/passenger.css'}}

最终输出：

<head>
<link rel="stylesheet" href="/shared/static/styles/._componentsStyle.css">
</head>
<body>
<div class="basic-card">........</div>
<div class="flight-info">.........</div>
</body>

组件中引入的css会被搜集，然后编译输出到head。

但这里的实现仍然较为简单，需要改进，包括相对路径写法的支持，包括css中资源引用的路径解析等等。

jumbo · 2016-06-06T07:08:44Z

组件分离方式基本确定，后面的改进，着重在于让使用者容易理解和便于版本控制。

creeperyang added enhancement help wanted question feature requested labels May 17, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

对组件化支持的探讨 #16

对组件化支持的探讨 #16

creeperyang commented May 17, 2016

creeperyang commented May 17, 2016

creeperyang commented May 17, 2016

jumbo commented Jun 6, 2016

对组件化支持的探讨 #16

对组件化支持的探讨 #16

Comments

creeperyang commented May 17, 2016

creeperyang commented May 17, 2016

creeperyang commented May 17, 2016

jumbo commented Jun 6, 2016