取消templateURL,让组件可以单元测试

impexjs的开发起源于angularjs,所以API也参考了angular。这其中就包括templateURL——这是一个用于异步加载组件视图的接口,可以减少页面初次加载的体积。
正如粗体字标注的那样,templateURL的目的是异步加载视图,仅此而已。那么问题就来了?
  • 组件模型代码依然需要通过<script>标签提前加载,依然占用初始页面体积
  • 模型、视图分离,如果需要单元测试(针对一个组件)则需要再写一个页面进行
  • 为了减少js文件的加载,需要把不同组件的模型代码写在同一个js文件中

这些问题让templateURL显得很鸡肋,并没有起到想要的作用。针对以上问题,impexjs取消了templateURL接口,增加了组件异步加载接口
impex.component(name,url)
同时,增加了组件单元测试接口,让组件测试更简单。
    <!-- 视图  -->
<template id="unitTest">
<span>
<style type="text/css">
.x-button{
color: #fff;
font-size: 1.1em;
padding: 1em 3em;
background-color: #52A7F1;
border:none;
border-bottom: 3px solid #1463F3;
}
</style>
<button class="x-button" id="{{id}}">组件按钮{{times}}</button>
</span>
</template>
<!-- 组件 -->
<script type="javascript/impex-component">
(function(){
return {
onInit:function(){
this.view.on('click','tip()');
},
tip : function(){
alert('clicked '+(this.state.times++)+' times');
},
state:{
times:0
}
}
})();
</script>
<!-- 单元测试 -->
<script type="text/javascript" src="../lib/impex/impex.all.js"></script>
<script type="text/javascript">
impex.unitTest('unitTest');
</script>
现在一个组件的所有定义,都可以写在一个文件中。在正式部署时可以对文件进行压缩,减少网络传输时间

0 个评论

要回复文章请先登录注册