模块化、闭包与立即执行函数的使用、MVC里的V和C

2018-08-12 admin

这篇文章记录我写在线个人简历过程中学习的知识 完整代码(暂未完成) 预览地址

轮播Swiper组件的使用

英文官网

中文网–Swiper4.x使用方法

模块化

学习写代码的方法: CRM 抄,运行,修改 P6R2AU.png

模块化:把对应功能放到块里面,这个块可以是文件,或者div或者别的等等

P6IEXd.png

立即执行函数的使用

将js分成不同的几个模块后,然后使用文件引入,但是会出现问题:如果使用var 声明变量,那么就会成为全局变量,这样容易覆盖.

ES6之前,只有函数里面才有局部变量. 如果只用花括号包起来,那么在C++或者JAVA里面就是局部变量,但是JS里面会变量提升,提升到当前函数的最高地方,所以仍然是全局变量.

所以如果想用局部变量,解决方法是把它放到一个函数中,然后立即执行,这样这个函数内部的变量就是局部变量.也不会被相同名字的全局变量覆盖.

P6oiEq.png 不加感叹号就会语法错误,不会执行.所以得加一个感叹号,取反,就会运行后面的代码,执行后面的函数.虽然改变了返回值,但是我们不需要返回值.所以改变了也无所谓

所以接下来我们将所有自己分离出来的单个js文件,都使用立即执行函数!function(){}.call()包起来

这样才算真正的模块化,代码相互之间没有影响. P6oZ2F.png

ps: ES6模块

闭包的使用

下面的例子都使用立即执行函数隔离作用域 如果两个模块之间需要交流,例如在第一个模块上初始化,在第二个模块上使用

方法一:使用window

比如两个模块

module1.js和module2.js都被引入一个html文件里 PcP0PS.png

//module1.js
!function(){
    var person = window.person = {
        name:"frank",
    }
    //局部变量person和全局变量person用的是同一个地址
}.call()

虽然不同变量,但是是同样的地址

//module2.js
!function(){
    var person = person;//即var person = window.person;
    console.log(person);
}.call();

这样不同模块间就可以通信,但这种方法不好.

方法二:使用闭包

始终不知道person的全部信息 ,只能知道age的信息,且只能做一些它允许你操作的事情,这样module1就会对局部变量person有一个掌控.不会出现有人把person变成-1的情况,因为他访问不到age,他只能去GrowUp,除此之外没有能访问到的方法.

//module1.js
!function(){
    var person = {
        name:"mataotao",
        age:18,
    };
    window.mataotaoGrowUp = function(){
        person.age+=1;
        return person.age;
    };
}.call();
//module2.js
!function(){
    var newAge = window.mataotaoGrowUp();
    console.log(newAge);//19
}.call();

闭包在哪里?

如果一个函数访问了函数外的变量(mataotaoGrowUp()使用了person.age),那么 函数+函数外的变量,就是 闭包.

闭包作用:

  1. 用来 隐藏数据细节 (不告诉你多少岁但是你可以让他涨一岁,隐藏了age 的细节和name)
  2. 可以用来 做访问控制 (只能访问到age,无法访问到name)

如果没有立即执行函数来模块化,那么这个闭包毫无意义,因为person直接使全局变量,所有的函数都可以访问到,并且修改也无法隐藏数据细节

PcPSH0.png

立即执行函数+闭包 实现对象细节的封装的方法

面试官会将上面的module1做如下修改(实际本质不变)

//module1.js
var accessor = function(){//这是一个返回了匿名函数的函数,accessor-访问器
    var person = {
        name:"mataotao",
        age:18,
    };
    return function(){
        person.age+=1;
        return person.age;
    };
}
var growUp = accessor();//执行accessor得到一个GrowUp函数
//growUp现在是一个全局变量了
growUp();

实际growUp()就相当于立即执行了,因为我声明了一个函数,而且立即执行了

这就是闭包

MVC的V和C

MVC的前提就是 模块化 P6IKtf.png

View就是能看到的东西

例如在 <script src="./js/init_Swiper.js"></script><!-- 初始化Swiper>标签 -->这个模块中我们初始化了一个Swiper

PciCqI.png 这个并且对.swiper-container这个div进行操作,.swiper-container这个div就是 VIEW(用户可以看到的东西).

对于轮播组件来说,这一部分就是他的view部分 PciiZt.png

这个div就是init-swiper这个模块的view.

明白这个之后我们将view单独分离出来

分离view

我们修改代码,单独将view分离,例如轮播图的view: PcFM1e.png

PcFDns.png

也将剩下的几个js模块进行修改

例如<script src="./js/sticky-navbar.js"></script>

PcF6A0.png

view就是要告诉js,html中的哪一块是我要操作的东西

PcFhjJ.png

Controller就是控制View的方法

MVC中的C用来控制/操作view

以topNavBar为例 PcFjjH.png 将要做的操作写成controller函数,并把要操作的view当做参数传进去,实现对view的控制/操作

进一步的改进:

PcEAmj.png

需要注意:

  1. 对象的函数里的this,就是对象本身controller.init(view); //相当于controller.init.call(controller,view);//this就是当前对象

`this.bindEvents();

        //相当于this.bindEventS.call(this)`,这里的this就是init函数里call的controller,所以这个this是转过来了,也是对象本身

继续优化,分离代码

如果我们要做其他的事情,比如把激活和不激活这个导航分离,不要写在bindEvents里了,继续在对象里添加操作的函数 PcV0P0.png bind(this)后,就是把controller绑定到这个函数的this上,把这个函数的this由window变成controller,之后this.active();this.deactive();这两个this 就变成了controller了

bind方法用于将函数体内的this绑定到某个对象,然后返回一个新函数。 bind()使用方法

这里的bind()就是将函数体内的this绑定到了controller,函数体内的this就是controller了

如果不用bind()也可以用箭头函数()=>{},箭头函数本身是没有this的.所以如果在箭头函数用this,那么就是箭头函数外面的离它最近的this! PceR9x.png

最终stick-navBar的代码: PcmvJ1.png

对轮播的js模块使用controller进行优化

本来: PcnCLD.png 修改后: PcnNlV.png 修改之后的前后对比 结构非常清晰有条理,将整个要做的事井井有条得分为几个部分

对当页跳转的缓动动画也进行controller的优化

下面是当页跳转的缓动动画修改后的代码: Pc8uZV.png

总结

这样代码就不会显得混乱了,controller对view的操作被有条理地分开,有初始化view,绑定view事件,激活这个view,不激活这个view等等对view的操作 controller所有的属性就是对view的所有操作!!! 这就是mvc里的c的意义

原文链接:https://segmentfault.com/a/1190000015975240

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37789.html

文章标题:模块化、闭包与立即执行函数的使用、MVC里的V和C

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
bootstrap PrintThis打印插件使用详解
bootstrap PrintThis打印效果图: 如图,这个是调用了谷歌的打印,使用很方便,可以自己調样式,需要的可以研究一下,这边贴出使用方法。 附上GitHub:https://github.com/jasonday/printTh...
2017-03-16
html5+JavaScript教程-微信打飞机小游戏源码
js &#x2F;&#x2F; JavaScript Document var c = document.getElementById(&quot;dotu&quot;); var cxt = c.getContext(&quot;2d&q...
2015-11-12
JavaScript编辑器推荐
主流编辑器有SublimeText,Notepad++,webstorm等,是使用最广泛的编辑器,但也有一些JavaScript编辑器提供有着各自的特性和功能,适应不同人的需求,以下是几款优秀的编辑器,相信你一定能找到自己喜欢的。 1. W...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
回到顶部