web必备基础3-代码复用

[Toc]

一、css复用

• 用HTML使用CSS的六种方法

二、UI 复用

1、目前实例(jquery的load方法)

将一个页面分成多个html文件（静态html分割页面）

参考文章：

• HTML引用公共组件

  <script type="text/javascript">
  			$(".footer").load('footer.html');
  			$.nicenav(300, '216px');
  		</script>

• 将一个页面分成多个html文件（静态html分割页面）

  	<div id="header"></div>
  	<div id="content"></div>
  	<div id="footer"></div>
  	
  <script>
  	$(function(){
  		$('#header').load('header.html');
  		$('#content').load('content.html');
  		$('#footer').load('footer.html');
  	})
  </script>

2、其他方法

• 抽离出html公用部分实现多页面复用

  如何抽离出公用的部分呢？(有点类似Vue，React等框架的组件化)我选的是运用jquery的load方法，还有很多其他方法，如iframe ，include等等网上都能搜到。

• 自定义元素:在 HTML 中定义新元素 - HTML5 Rocks