前端模块化浅见 #24

ccchangkong · 2016-12-08T12:12:57Z

前端模块化这个概念太大了，这里只能粗略讲（wa）一（ge）下（keng）

模块化是为了更方便的实现复用，提高编程效率，是手段而不是目的，最终目标是什么，想了想，说是为了解决问题总不错吧，嘿嘿。

前端上的模块化也不算啥新概念，css中就有@import，js倒是晚了点，也有啥cmd、amd和ES6module，至于html页面的模块化，额，iframe？iframe虽然问题不少，但确实是一种前端模块化方案，此中优劣，我不多说，各位前辈多有论述，现在的主流意见是不推荐使用，那除此之外的方法有啥呢。

js异步添加

举个例子，jquery ajax的load方法加载html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://lib.baomitu.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
	<div id="header"></div>
	<script>
	$(function(){
				$('#header').load('header.html #headers',function(){
		})
	})
	</script>
</body>
</html>

上面加载的headers页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="headers">
        <style type="text/css">
			#headers {
				color: #ca1212;
			}
		</style>
		233333
	</div>
</body>
</html>

加载完毕后：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script src="https://lib.baomitu.com/jquery/3.1.1/jquery.min.js"></script>
	</head>

	<body>
		<div id="header">
			<div id="headers">
              	<style type="text/css">
					#headers {
						color: #ca1212;
					}
				</style>
				233333
			</div>
		</div>
		<script>
			$(function() {
				$('#header').load('header.html #headers', function() {})
			})
		</script>
	</body>
</html>

也不是什么新东西，应该是传统前端页面模块化比较合适的方案，html、css、js都可以通过AJAX加载，缺点也是有的，不过还是比较稳的~

基于框架的组件系统

没错，说的就是当下大热的react组件，以及更方便的vue单文件（感觉都组件到极致）,这里借下别人的项目：

缺点有一些，得用上框架（react/vue）、构建系统（webpack）和配套的加载器（loader）还有包管理器（NPM），其实就是从传统前端转变到现代前端的一些学习成本，换个角度，学习新东西能够提升效率、解决问题，显然优点更大一点

2017年2月28日更新

HTML引入

教程

被加载的页面：

<div class="warning">
  <style scoped>
    h3 {
      color: red;
    }
  </style>
  <h3>Warning!</h3>
  <p>This page is under construction</p>
</div>

<div class="outdated">
  <h3>Heads up!</h3>
  <p>This content may be out of date</p>
</div>

导入

<head>
  <link rel="import" href="warnings.html">
</head>
<body>
  ...
  <script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // 从 warning.html 的文档中获取 DOM。
    var el = content.querySelector('.warning');

    document.body.appendChild(el.cloneNode(true));
  </script>
</body>

总结

从最传统的iframe，到稍显优雅的AJAX,直至组件的应用，在现今的情况下，都有其使用的场景，我们要做的，就是根据项目实际，选择最合适的方案。

以上！

The text was updated successfully, but these errors were encountered:

ccchangkong changed the title ~~# 前端模块化浅见~~ 前端模块化浅见 Dec 8, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

前端模块化浅见 #24

前端模块化浅见 #24

ccchangkong commented Dec 8, 2016 •

edited

Loading

前端模块化浅见 #24

前端模块化浅见 #24

Comments

ccchangkong commented Dec 8, 2016 • edited Loading

js异步添加

基于框架的组件系统

HTML引入

总结

ccchangkong commented Dec 8, 2016 •

edited

Loading