Web Components

Web Components

先来个实例:

　　我想在页面中嵌入一个地图,怎么做?

　　嵌入地图的做法

1. 　引用一个地图AP的I脚本
2. 　编写HTML作为地图容器
3. 　给容器添加样式
4. 　编写javascript脚本初始化地图

 

 

...
#map_canvas{width:600px;height:400px}
...

<script src="http://api.map.baidu.com/api?v=2.0"></script>

...

<div id="map_canvas"></div>

<script>
window.onload = function(){
     var map = new BMap.Map("map_canvas");
     map.centerAndZoom(new Bmap.Point(116.404,39.915),14);
}
</script>

 

　　Web Components方式

1. 　　引用脚本
2. 　　编写特定的html作为地图容器
3. 　　添加样式

<script src="http://api.map.baidu.com/components?v=1.0"></script>

...

<lbs-map  center="116.404,39.915 " zoom="14" />

　　Web Components 适合js不熟悉的人,因为它可以不用写js语句,直接写html标签即可 .

Web Components 在2014年 的 net awards 被评为 BEST NEW WEB TECHNOLOGY  .

　　Web Components 包含的技术

• Templates
• Decorators
• Custom Elements   如:<lbs-map /> 自定义的元素名
• Shadow DOM
• Imports

 

这项技术是用来干什么的呢?

　　答:　　1.开发自己的标签,供其他人使用

　 2.嵌入别人开发的标签,达到快速开发目的。

 

　　实例：

　　嵌入地图

　　http://developer.baidu.com/map/module-mobile.html

　　参考资源

　　　　http://developer.baidu.com/map/webpackage.htm

　　　　http://www.w3.org/TR/components-intro/