模块化、闭包与马上实行函数的运用、MVC里的V和C

模块化、MVC里的V和C、闭包与马上实行函数的运用

这篇文章纪录我写在线个人简历过程当中进修的学问
完全代码(暂未完成)
预览地点

轮播Swiper组件的运用

英文官网

中文网–Swiper4.x运用要领

模块化

进修写代码的要领:
CRM
抄,运转,修正
《模块化、闭包与马上实行函数的运用、MVC里的V和C》

模块化:把对应功用放到块内里,这个块可所以文件,或许div或许别的等等

《模块化、闭包与马上实行函数的运用、MVC里的V和C》

马上实行函数的运用

将js分红差别的几个模块后,然后运用文件引入,然则会涌现问题:假如运用var 声明变量,那末就会成为全局变量,如许轻易掩盖.

ES6之前,只要函数内里才有局部变量.
假如只用花括号包起来,那末在C++或许JAVA内里就是局部变量,然则JS内里会变量提拔,提拔到当前函数的最高处所,所以仍然是全局变量.

所以假如想用局部变量,解决要领是把它放到一个函数中,然后马上实行,如许这个函数内部的变量就是局部变量.也不会被雷同名字的全局变量掩盖.

《模块化、闭包与马上实行函数的运用、MVC里的V和C》
不加感叹号就会语法错误,不会实行.所以得加一个感叹号,取反,就会运转背面的代码,实行背面的函数.虽然改变了返回值,然则我们不须要返回值.所以改变了也无所谓

所以接下来我们将一切自身星散出来的单个js文件,都运用马上实行函数!function(){}.call()包起来

如许才算真正的模块化,代码相互之间没有影响.
《模块化、闭包与马上实行函数的运用、MVC里的V和C》

ps:
ES6模块

闭包的运用

下面的例子都运用马上实行函数断绝作用域
假如两个模块之间须要交换,比方在第一个模块上初始化,在第二个模块上运用

要领一:运用window

比方两个模块

module1.js和module2.js都被引入一个html文件里
《模块化、闭包与马上实行函数的运用、MVC里的V和C》

//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直接使全局变量,一切的函数都能够接见到,而且修正也没法隐蔽数据细节

《模块化、闭包与马上实行函数的运用、MVC里的V和C》

马上实行函数+闭包 完成对象细节的封装的要领

面试官会将上面的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的条件就是 模块化
《模块化、闭包与马上实行函数的运用、MVC里的V和C》

View就是能看到的东西

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

《模块化、闭包与马上实行函数的运用、MVC里的V和C》
这个而且对.swiper-container这个div举行操纵,.swiper-container这个div就是 VIEW(用户能够看到的东西).

关于轮播组件来讲,这一部份就是他的view部份
《模块化、闭包与马上实行函数的运用、MVC里的V和C》

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

邃晓这个以后我们将view零丁星散出来

星散view

我们修正代码,零丁将view星散,比方轮播图的view:
《模块化、闭包与马上实行函数的运用、MVC里的V和C》

《模块化、闭包与马上实行函数的运用、MVC里的V和C》

也将剩下的几个js模块举行修正

比方<script src="./js/sticky-navbar.js"></script>

《模块化、闭包与马上实行函数的运用、MVC里的V和C》

view就是要通知js,html中的哪一块是我要操纵的东西

《模块化、闭包与马上实行函数的运用、MVC里的V和C》

Controller就是掌握View的要领

MVC中的C用来掌握/操纵view

以topNavBar为例
《模块化、闭包与马上实行函数的运用、MVC里的V和C》
将要做的操纵写成controller函数,并把要操纵的view当作参数传进去,完成对view的掌握/操纵

进一步的革新:

《模块化、闭包与马上实行函数的运用、MVC里的V和C》

须要注重:

  1. 对象的函数里的this,就是对象自身controller.init(view);//相当于controller.init.call(controller,view);//this就是当前对象
  2. this.bindEvents();//相当于this.bindEventS.call(this),这里的this就是init函数里call的controller,所以这个this是转过来了,也是对象自身

继承优化,星散代码

假如我们要做其他的事变,比方把激活和不激活这个导航星散,不要写在bindEvents里了,继承在对象里增加操纵的函数
《模块化、闭包与马上实行函数的运用、MVC里的V和C》
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!
《模块化、闭包与马上实行函数的运用、MVC里的V和C》

终究stick-navBar的代码:
《模块化、闭包与马上实行函数的运用、MVC里的V和C》

对轮播的js模块运用controller举行优化

原本:
《模块化、闭包与马上实行函数的运用、MVC里的V和C》
修正后:
《模块化、闭包与马上实行函数的运用、MVC里的V和C》
修正以后的前后对照
构造异常清楚有条理,将全部要做的事有条不紊得分为几个部份

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

下面是当页跳转的缓动动画修正后的代码:
《模块化、闭包与马上实行函数的运用、MVC里的V和C》

总结

如许代码就不会显得杂沓了,controller对view的操纵被有条理地离开,有初始化view,绑定view事宜,激活这个view,不激活这个view等等对view的操纵
controller一切的属性就是对view的一切操纵!!!
这就是mvc里的c的意义

    原文作者:马涛涛
    原文地址: https://segmentfault.com/a/1190000015975240
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞