模块化
将页面中各部分执行逻辑抽取出来单独写在一个js文件模块。
模块调用
- 在模块中不要使用var声明变量（会变量提升为全局变量），模块之间会相互影响；
- 可以封装为立即执行函数：
!function(){}.call()（会改变函数返回值，但没什么关系）； - 如模块之间要共享变量，可以把变量设置在window，或使用闭包（必然跟立即执行函数一起使用）：
!function() {
// 1、把变量设置在window
var name = window.name = 'ywh'
// 2、把闭包函数设置在window（隐藏细节，使person不可以直接访问）
var person = {
name: 'ywh',
age: 18
}
window.ywhGroupUp = function() {
person.age += 1
return person.age
}
}.call()
MVC
MVC
MVC
- MVC即根据Model（模型，一般是AJAX），View（视图，DOM API），Controller（控制器，数据结构、算法和面向对象）三个层面来组织代码；
- 根据功能划分：
- 用户访问网站，与MVC中的View交互，包括获取信息和提交数据等；View接收到用户请求，通知Controller执行相应的逻辑，Controller也可以把内容更新到视图；
- Controller调用Model的方法，向服务端请求获取数据，Model把结果（数据、请求信息）返回给Controller做进一步处理；
- Model负责向服务端发起HTTP请求获取并接收响应，把响应返回给Controller。
View：在js模块中获取页面元素（如最外层div）命名为view，封装render方法
var view = document.querySelector('#topNavBar')
// ...
Controller：把对模块中元素的操作函数封装在controller对象中。
var controller = {
view: null,
init: function(view) { // 初始化
this.view = view
this.bindEvents()
// 其他初始化操作
}
bindEvents: function() { // 绑定事件
let logo = view.querySelector('.logo')
window.addEventListener('scroll', function(x){
if (window.scrolly > 0) {
this.active()
}
else {
this.deactive()
}
this.view.classList.add('test')
}.bind(this)) // 绑定this为外部（即controller）的this
// 也可以改为箭头函数，箭头函数中的this即为外部的this
},
active: function() { // 激活
this.view.classList.add('test')
}
deactive: function() { // 不激活
this.view.classList.remove('test')
}
}
controller.init(view)
Model：抽取Controller中涉及CRUD的函数放在model。
最后封装到立即执行函数中构成一个模块：
!function(){
var model = // ...
var view = // ...
var controller = // ...
controller.init(view)
}.call()
