随着前端的迅速的发展，前端开发出现了越来越多的库和框架，最近在看AngularJS的组件化，在此期间我遇到了很多的问题，在本人的思考和总结下得到了解决，对于这些的解决方法进行了整理，分享一下，希望能够帮助更多的人。
1.什么是组件化？
将页面中可以重复使用的标签封装成一个组件，方便这一部分UI重复使用，类似于JS中的函数，封装了一部分处理代码，通过函数调用就可以重复使用这些代码。
2.组件化的优势：
组件化的最重要作用就是提升开发和维护的效率。
最原始的组件，其功能可以单独开发测试，然后逐级拼装成更复杂的组件，直到整个应用。每一级都是易装配，可追踪，可管控的。
实例：<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<!-- 此标签是我们自定义的标签 -->
<page-header></page-header>
<page-slide></page-slide>
<page-footer></page-footer>
<script>
var app = angular.module("myApp", []);
app.component("pageHeader", {
template:"<h2>尊敬的用户{{username}}，欢迎访问本系统</h2>",
controller:function($scope) {
$scope.username = "tom";
}
});
//创建一个名叫pageSlide的组件
app.component("pageSlide", {
template:"<h2>这是一个侧边栏导航</h2>"
});
app.component("pageFooter", {
template:"<h2>这是一个网页底部代码</h2>"
});
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<!-- 此标签是我们自定义的标签 -->
<page-header></page-header>
<page-slide></page-slide>
<page-footer></page-footer>
<script>
var app = angular.module("myApp", []);
app.component("pageHeader", {
template:"<h2>尊敬的用户{{username}}，欢迎访问本系统</h2>",
controller:function($scope) {
$scope.username = "tom";
}
});
//创建一个名叫pageSlide的组件
app.component("pageSlide", {
template:"<h2>这是一个侧边栏导航</h2>"
});
app.component("pageFooter", {
template:"<h2>这是一个网页底部代码</h2>"
});
</script>
</body>
</html>
上述的代码中： app.component("pageSlide", {
template:"<h2>这是一个侧边栏导航</h2>"
});
上述代码中component是组件的意思，我们通过此关键词创建组件，template是模板的意思，我们在此关键词后创建我们的模板。
如上面的实例一样大量的减少<html>你的代码量，而是封装标签通过<script>标签引入，这样可以实现代码的重复使用，也便于我们维护。大大减少了我们的工作量。
app.component("pageSlide", {
template:"<h2>这是一个侧边栏导航</h2>"
});
2168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
