前端组件化开发和MVC

最新推荐文章于 2022-03-04 23:19:19 发布

沈鸿斌

最新推荐文章于 2022-03-04 23:19:19 发布

阅读量3.2k

点赞数 1

文章标签：前端开发 mvc backbone javascript 组件化开发

本文链接：https://blog.csdn.net/u012422829/article/details/51044183

版权

最近接触到了前端开发一些比较不错的思想：组件化开发、MVC，是我以前瞎写课程大作业的时候所不具备的。所以想写下来做个总结，也希望能给不太了解这一块的同学一点启发和帮助。这一篇，就用一个本地博客的demo，来简单地介绍一下组件化开发和MVC。

前提准备: 适当了解Backbone 和require.js (关于require.js可以看我之前关于js模块化编程的一篇文章：深入理解JavaScript系列(四): 模块化编程)

1.初步分析

先看下页面长什么样：（因为主要讲编程的思想，css什么的就随意搞搞）

可以看到，页面分为3个部分，header, footer和中间部分。中间部分又分为左边sidebar和右边blog content部分。sidebar还可以细分为一个new button和下面的一堆item，blogContent还可以细分为...等等。

要做这样一个页面很简单，按照我以前的写法，在html文件中巴拉巴拉一堆，这个界面就出来了。但是这种方式导致的问题就是：页面上所有的部件耦合比较严重，而且单个部件的可重用性不强。针对这个问题，一个很简单的解决方法就是HTML片段化和模板化，即把各个部分分拆成不同的html文件，使用include的方式来增加重用。但是这明显远远不够，它只是重用了展示部分的代码，对于事件响应就无能为力。我们仍然需要写很多事件监听（如onclick）去直接修改页面上别的组件的展示方式，可能写出如下的代码：

newButton.onClick = function () {
	//左边sidebar中加一篇文章
	//在blogContent中展示出新的文章的初始内容
}

我们希望最终做到的是，所有的组件只管自己的事，它不需要知道页面上还有哪些别的东西。即所谓的高内聚，低耦合。

二.利用Backbone实现

1.代码结构

先看一下index.html（也就是我们在上面看到的那个页面）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
    <link href="./css/bootstrap.css" rel="stylesheet">
    <link href="./css/bootstrap-theme.css" rel="stylesheet">
    <link href="./css/page.css" rel="stylesheet">
    <script src="./js/lib/require.js"></script>
    <script src="./js/require_config.js"></script>
</head>
<body>
</body>
</html>

整个body都是空的，而整个程序的入口就在require_config.js中:

require.config({
        baseUrl: './js',
        paths: {
            'jquery': 'lib/jquery',
            'backbone': 'lib/backbone',
            'underscore': 'lib/underscore',
            'bootstrap': 'lib/bootstrap',
            'localstorage': 'lib/backbone.localStorage'
        },
        shim: {
            'localstorage': {
                deps: ['backbone']
            },
            'bootstrap': {

最低0.47元/天解锁文章

沈鸿斌

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端组件化开发和MVC

最近接触到了前端开发一些比较不错的思想：组件化开发、MVC，是我以前瞎写课程大作业的时候所不具备的。所以想写下来做个总结，也希望能给不太了解这一块的同学一点启发和帮助。这一篇，就用一个本地博客的demo，来简单地介绍一下组件化开发和MVC。前提准备：适当了解Backbone1.初步分析先看下页面长什么样：（因为主要讲编程的思想，css什么的就随意搞搞）可以看到，页面分为
复制链接

扫一扫