模块化与MVC的VC

标签: 设计模式 JavaScript MVC 模块化
19人阅读 评论(0) 收藏 举报
分类:

1. 模块化

模块化是 MVC 的前提。
MVC 可以解决一个很重要的问题,就是写完代码就忘的问题,通过对文件的命名和代码的简化,可以更加方便的辨别代码的功能与作用。
以js代码为例,我们把main.js,按照功能拆分成module-1.js等三个文件(名字根据做的事情不同而不同),形成模块。这样每个文件的代码都会小而清晰,这也就是模块化的一种体现。

<!--index.html-->
<body>
    module-1 of html
    module-2 of html
    module-3 of html
    <scirpt src="module-1.js"></script>   
    <scirpt src="module-2.js"></script>   
    <scirpt src="module-3.js"></script>  
</body>

2. 如何使用立即执行函数

不同模块代码里,相同的全局变量会造成代码冲突,所以我们需要把全局变量变成局部变量——立即执行函数的使用。
代码格式如下:

!function(){
    your code
}.call()

2.1 思路步骤 (这个试错过程还是很重要的)

1.我们不想要全局变量
2.我们要使用局部变量
3.ES 5 里面,只有函数有局部变量
4.于是我们声明一个 function xxx , 然后xxx.call()
5.这个时候 xxx是全局变量(全局函数)
6.所以我们不能给这个函数名字
7.function(){}.call()
8.但是 Chorme 报错, 语法错误(chorme sb)
9.试出来一种方法可以不报错: 
    (1)  !function(){}.call()   (我们不在乎这个匿名函数的返回值,所以加个 ! 取反没关系)
    (2)(function(){}).call()         不推荐(xxx 换行 (前面的东西) 这样就乱了)
    (3) frank81937501975.call()    不推荐   (利用随机数避免重复冲突)

通过使用立即执行函数,我们实现了代码之间真正的模块化(这属于js的bug,我们必须用这种方式进行代码隔离)。

2.2 代码模块隔离之后如何进行通信呢?利用闭包

1.可以借助全局对象 window 进行赋值取值操作即可。
2.还可以利用闭包。

// module-1
!function(){}.call()
!function(){
    //  code of module-1
    var person = {
        name: 'frank',
        age: 18
    }
    window.frankGrowUp = function() {
        person.age += 1    // 函数用了它以外的变量 person,所以fn和person就是闭包 ,闭包用来对数据隐藏细节,还可以进行访问控制
        return person.age
    }
}.call()

// module-2
!function(){
    // code of module-2
    var newAge = window.frankGrowUp()
    console.log(newAge)  // 19
}.call()

1) 立即执行函数使得 person 无法被外部访问
2) 闭包使得匿名函数可以操作 person
3) window.frankGrowUp 保存了匿名函数的地址
4) 任何地方都可以使用 window.frankGrowUp操作 person
=> 任何地方都可以使用 window.frankGrowUp操作 person,但是不能直接访问 person

3. 用MVC中的 VC 写代码

MVC Model(模型) View(视图) Controller(控制)

<!--index.html-->
<body>
    <div id="view-1"></div>
    <div id="view-2"></div>
    <div id="view-3"></div>
    <scirpt src="module-1.js"></script>   
    <scirpt src="module-2.js"></script>   
    <scirpt src="module-3.js"></script>  
</body>
// module-1.js 模块 1
!function(){
    var view = 找到对应的模块1元素 
    var controller = {
        view: null,
        init: function(view) {
            this.view = view // 给controller.view 赋值
            this.操作1()    // 这里的 this是通过 controller 对象调用决定的(最下面)
            this.操作2()
        },
        操作1:function(){},
        操作2:function(){},
    }
    controller.init(view)    // 执行操作
}.call()

下面这两个模块用来举例子,略乱

// module-2.js 模块 2
!function(){
    var view = document.querySelector('#view-2')  
    var controller = {
        view: null,
        init: function(view) {
            this.view = view 
            this.bindEvents()           // this.bindEvents.call(this)
        },
        bindEvents: function(){
            var view = this.view
            window.addEventListener('scroll',(x) => {
                this           // 通过箭头函数让函数内外this不变, this相当于一个变量
                                 // 如果是f(){}则this是用户触发的元素,可通过bind()绑定this
            }
        },
        active:function(){
            this.view.classList.add('xxx')
        },
        deactive: function(){
            this.view.classList.remove('yyy')
        }
    }
    controller.init(view)         // controller.init.call(controller, view)
}.call()

// module-3.js 模块 3
!function(){
    var view = 找到对应的模块3元素 
    var controller = {
        view: null,
        swiper: null,
        swiperOptions: {
            选项1:xxx,
            选项2: xxx,
            ……
        }
        init: function(view) {
            this.view = view 
            this.initSwiper()
        },
        initSwiper:function(){
            this.swiper = new Swiper(
                this.view.querySelector('选择器'),
                this.swiperOptions
            )
        }
    }
    controller.init(view)    
}.call()

这样可以保证三个模块的代码结构相同,我们写代码,html就放在view部分,js操作就放在controller部分
相关代码:MVC模式写代码

4. 总结

模块化是 MVC 的前提。
利用立即执行函数隔离各个模块,但又能实现和控制不同模块之间的通信。
利用MVC中的VC思想,保证各个模块的代码结构的一致性。

查看评论

模块化-MVC与MVVM

这段时间在写学习一个管理系统,界面比较简单,后台是基于.net编写的,整体使用mvc模式。对于前端与后台一起来时,使用mvc模式可能是很好用的,但是当我尝试着用MVC模式来写一个前端页面时候,感觉很难...
  • qiqingjin
  • qiqingjin
  • 2016-03-13 13:12:46
  • 724

AngularJS ,ASP.NET MVC – 新Web模块化开发

快速浏览标题便了解到本文要谈到公开资源平台,该平台允许快速,轻松地创建一个管理网络,并不需要在风格,导航,解决方案架构和其它跟主要任务无关的琐事上花费过多的时间。 平台视觉图和其中一块模板: 很长一...
  • virtoway
  • virtoway
  • 2015-08-06 13:29:16
  • 1122

基于ASP.NET MVC3 Razor的模块化/插件式架构实现

本文主要探讨了一种基于ASP.NET MVC3 Razor的模块化(Plugin)/插件(plugin)式架构的实现方法。本文借鉴了《Compile your asp.net mvc Razor ...
  • educast
  • educast
  • 2012-06-24 21:33:43
  • 7677

angularjs——模块化与mvc

车辆管理系统arcgis移植已经基本完成。开始下一件事情,搭建一个视频培训系统。这个系统准备用angularjs+微服务架构的方式搭建,如果有可能再引入CDN。         昨天一天时间大致看完了...
  • guduyishuai
  • guduyishuai
  • 2016-10-14 16:57:08
  • 484

前端组件化开发和MVC

最近接触到了前端开发一些比较不错的思想:组件化开发、MVC,是我以前瞎写课程大作业的时候所不具备的。所以想写下来做个总结,也希望能给不太了解这一块的同学一点启发和帮助。这一篇,就用一个本地博客的dem...
  • u012422829
  • u012422829
  • 2016-04-07 17:56:00
  • 2394

asp.net mvc 的 视图(view )的模块化开发

目前所在项目有一个视图,几个模块都涉及到,对应不同的开发人员,虽然有SVN在管理,但代码冲突时有发生。并且大家的代码挤于其中,逻辑比较容易混乱。将不同部件独立出去,实有必要。分离方式,我知道的有 3 ...
  • leftfist
  • leftfist
  • 2015-01-28 23:39:22
  • 2380

工作中Android开发用的项目框架:模块化、组件化开发,可快速集成

  • 2017年12月13日 15:29
  • 25.94MB
  • 下载

webMVC思想分析

一、Web MVC背景: 随着web 前端的迅速发展,我们在浏览网页时,随处可见各种各样复杂的界面,如浏览器主界面,出现的很多的a、span、li标签等等,而且它们的内容是实时更改的,通过前端向服务...
  • yunele
  • yunele
  • 2017-08-29 16:16:53
  • 145

让Codeigniter支持HMVC架构

很显然,Codeigniter并不支持HMVC,何为HMVC,就是它把MVC根据模块又细化成多个MVC,看如下结构图你就明白了,原来Codeigniter的MVC结构图是: 实现HMVC后结构图为:...
  • yxwb1253587469
  • yxwb1253587469
  • 2016-07-15 13:56:06
  • 965

Layui 经典模块化前端框架

from  http://www.layui.com/ Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又...
  • u010820135
  • u010820135
  • 2017-03-25 11:20:05
  • 1015
    个人资料
    等级:
    访问量: 69
    积分: 80
    排名: 154万+
    文章存档