前言：如果对这几个概念不熟悉的童鞋，本篇文章是接着上一篇带你初步了解模块化，立即执行函数，闭包和MVC在项目中的应用（一）和（二）来继续记录下去的，一定要记得看前面哦，还有就是如果大家看了觉得对自己有帮助，麻烦给个赞吧，谢谢大家~~
关键词：模块化，立即执行函数，闭包和MVC~~......
正文：
MVC
现在，让我们先回顾下上一篇文章中的init-swiper.js，我们单独提取出来的这个js,
var mySwiper = new Swiper('.swiper-container',{
loop:true,
pagination:{
el:'.swiper-pagination'
},
navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev',
}
})
什么是mvc的view？如下就是view,是用户看得见的东西：
image.png
现在，我们把init-swiper.js稍作一个修改，还在相应的HTML外加一个div，包住所有与init-swiper.js有关的标签：
部分HTML：
image.png
init-swiper.js:
!function (){
var view = querySelector('#mySlides');
var mySwiper = new Swiper(view.querySelector('.swiper-container'),{
loop:true,
pagination:{
el:'.swiper-pagination'
},
navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev',
}
})
}.call()
有的童鞋是不是不知道我在干什么？没事，在跟着我改几个js文件就知道啦，接下来，我们再来改一个sticky-topnavbar.js：
//原来：
!function (){
window.addEventListner（'onscroll '，function(x){
if(window.scrollY > 0){
topNavBar.classList.add('sticky')
}else{
topNavBar.classList.remove('sticky')
}
}）
}
//现在
!function (){
var view = querySelector('#topNavBar');
window.addEventListner（'onscroll '，function(x){
if(window.scrollY > 0){
view .classList.add('sticky')
}else{
view .classList.remove('sticky')
}
}）
}
还有一个smoothly-navigation.js：
//原来：--------原来--------原来-------原来--------原来--------原来--------原来--------原来--------原来------原来------->
!function(){
let liTags = document.querySelectorAll('nav.menu > ul > li')
for(let i=0; i<liTags.length; i++){
liTags[i].onmouseenter = function(x){
x.currentTarget.classList.add('active')
}
liTags[i].onmouseleave = function(x){
x.currentTarget.classList.remove('active')
}
}
let aTags = document.querySelectorAll('nav.menu > ul > li > a')
function animate(time) {
requestAnimationFrame(animate);
TWEEN.update(time);
}
requestAnimationFrame(animate);
for(let i=0; i<aTags.length; i++){
aTags[i].onclick = function(x){
x.preventDefault()
let a = x.currentTarget
let href = a.getAttribute('href') //'#siteAbout'
let element = document.querySelector(href)
let top = element.offsetTop
let currentTop = window.scrollY
let targetTop = top - 80
let s = targetTop - currentTop // 路程
var coords = { y: currentTop}; // 起始位置
var t = Math.abs((s/100)*300) // 时间
if(t>500){ t = 500 }
var tween = new TWEEN.Tween(coords) // 起始位置
.to({ y: targetTop}, t) // 结束位置 和 时间
.easing(TWEEN.Easing.Cubic.InOut) // 缓动类型
.onUpdate(function() {
// coords.y 已经变了
window.scrollTo(0,coords.y) // 如何更新界面
})
.start(); // 开始缓动
}
}
}.call()
//更改后：----------更改后--------------更改后-----------更改后-----------更改后-----------更改后-----------更改后-------->
!function(){
var view = document.querySelector('nav.menu');
var liTags = view.querySelectorAll('nav.menu > ul > li');
for(let i=0; i<liTags.length; i++){
liTags[i].onmouseenter = function(x){
x.currentTarget.classList.add('active')
}
liTags[i].onmouseleave = function(x){
x.currentTarget.classList.remove('active')
}
}
let aTags = document.querySelectorAll('nav.menu > ul > li > a')
function animate(time) {
requestAnimationFrame(animate);
TWEEN.update(time);
}
requestAnimationFrame(animate);
for(let i=0; i<aTags.length; i++){
aTags[i].onclick = function(x){
x.preventDefault()
let a = x.currentTarget
let href = a.getAttribute('href') //'#siteAbout'
let element = document.querySelector(href)
let top = element.offsetTop
let currentTop = window.scrollY
let targetTop = top - 80
let s = targetTop - currentTop // 路程
var coords = { y: currentTop}; // 起始位置
var t = Math.abs((s/100)*300) // 时间
if(t>500){ t = 500 }
var tween = new TWEEN.Tween(coords) // 起始位置
.to({ y: targetTop}, t) // 结束位置 和 时间
.easing(TWEEN.Easing.Cubic.InOut) // 缓动类型
.onUpdate(function() {
// coords.y 已经变了
window.scrollTo(0,coords.y) // 如何更新界面
})
.start(); // 开始缓动
}
}
}.call()
重点在这里！！！ 我们现在接着改sticky-topnavbar.js
//现在---------现在--------现在---------现在---------现在--------现在---------现在--------现在----------现在---------现在--->
!function (){
var view = querySelector('#topNavBar');
window.addEventListner（'onscroll '，function(x){
if(window.scrollY > 0){
view .classList.add('sticky')
}else{
view .classList.remove('sticky')
}
}）
}
//再更改---------再更改--------再更改---------再更改---------再更改--------再更改---------再更改--------再更改---->
!function (){
var view = querySelector('#topNavBar');
var controller = function(view){
window.addEventListner（'onscroll '，function(x){
if(window.scrollY > 0){
view .classList.add('sticky')
}else{
view .classList.remove('sticky')
}
}）
}
controller(view);
}.call()
其他几个js也照着这个这么改,多想一想，都这么改了以后，所有的大体结构都是一样的，一个view，一个controller，controller操作view，这就是MVC里面的VC，接下来再次进行第三次改造，还是以sticky-topnavbar.js为例：
//现在---------现在--------现在---------现在--------现在-------现在--------现在--------现在---->
!function (){
var view = querySelector('#topNavBar');
var controller = function(view){
window.addEventListner（'onscroll '，function(x){
if(window.scrollY > 0){
view .classList.add('sticky')
}else{
view .classList.remove('sticky')
}
}）
}
controller(view);
}.call()
//第三次更改---------第三次更改--------第三次更改---------第三次更改---------第三次更改--------第三次更改----->
!function (){
var view = querySelector('#topNavBar');
var controller = {
view:null,
init:function(view){
this.view = view;//所以，这里的this指向的是controller；
this.bindEvents();// this.bindEvents.call(this)
},
bindEvents:function(){
window.addEventListner（'onscroll '，function(x){
if(window.scrollY > 0){
view .classList.add('sticky')
}else{
view .classList.remove('sticky')
}
}）
}
}
controller.init(view);//controller.init.call(controller,view);
}.call()
这次的变更需要费些心思了，但是代码看起来十分高级有木有？而且，这个代码变得有了结构了：
第一：这个需要一个view，及一个大模块。
第二：这个需要一个初始化函数init。
第三：他会去绑定事件。
记住：如果你是用一个对象来调用函数的，如上面的controller.init(view)，那么就相当于这个对象就是这个函数里面的this。controller.init(view)同时也可以写成：controller.init.call(controller,view);
以为这就是最终版的代码了吗，哈哈，还不是呢，bindEvents,就是绑定事件，那我就只让它绑定事件：
//现在---------现在--------现在---------现在--------现在-------现在--------现在--------现在---->
!function (){
var view = querySelector('#topNavBar');
var controller = {
view:null,
init:function(view){
this.view = view;//所以，这里的this指向的是controller；
this.bindEvents();// this.bindEvents.call(this)
},
bindEvents:function(){
window.addEventListner（'onscroll '，function(x){//这个事件里的this指向的是window，如果我们想取到controller所代表的this，就要用如下更改后的箭头函数的方法
if(window.scrollY > 0){
view .classList.add('sticky')
}else{
view .classList.remove('sticky')
}
}）
}
}
controller.init(view);//controller.init.call(controller,view);
}.call()
//第四次更改---------第四次更改--------第四次更改---------第四次更改---------第四次更改--------第四次更改----->
!function (){
var view = querySelector('#topNavBar');
var controller = {
view:null,
init:function(view){
this.view = view;//所以，这里的this指向的是controller；
this.bindEvents();// this.bindEvents.call(this)
},
bindEvents:function(){
window.addEventListner（'onscroll '，(x) =>{
if(window.scrollY > 0){
this.active();
}else{
this.deactive();
}
}).bind(this)
}，
active:function(){
this.view .classList.add('sticky');
},
deactive:function(){
this.view .classList.remove('sticky');
}
}
controller.init(view);//controller.init.call(controller,view);
}.call()
这会才是最终的代码，看起来高大上的样子如果觉得本文对你有帮助，请点赞哦谢谢~~
网友评论