模块化 命名空间

模块化

不同功能的js放入不同的文件

每个文件用立即执行函数封装

! function () {}.call

如果要相互访问，可以使用闭包，传出一个函数让其他文件操作部分功能

var a = function(){
    var bb = 1;
    return function(){
        return bb+1;
    }
}.call()
! function(){
    var bb = 1;
    window.grow = function(){
        return bb+1;
    }
}.call()

将每个文件封装成MVC对象

! function () {
  /**添加导航菜单事件 */
  let view = document.getElementsByClassName('menuTrigger');
  var controller = {
    view: null,
    init: function (view) {
      this.view = view;
      this.bindEvents()
    },
    bindEvents: function () {
      var view = this.view
      for (let i = 0; i < view.length; i++) {
        view[i].onmouseenter = function (e) {
          e.currentTarget.classList.add('active')
        }
        view[i].onmouseleave = function (e) {
          e.currentTarget.classList.remove('active')
        }
      }
    }
  }
  controller.init(view);
}.call()

! function () {
  var view = document.querySelector('.content')
  var controller = {
    view: null,
    swiper: null,
    swiperOptions: {
      loop: true,
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    },
    init: function (view) {
      this.view = view
      console.log(this.view)
      this.initSwiper()
    },
    initSwiper: function () {
      this.swiper = new Swiper(this.view.querySelector('.swiper-container'), this.swiperOptions)
    }
  }
  controller.init(view)
}.call()

! function () {
  var view = document.querySelector('section.message')
  var model = {
    init: function () {
      var APP_ID = 'qXl6W9vxbolyxcUCjs67LHQq-gzGzoHsz';
      var APP_KEY = 'eOq0UluoW79IgUqEyAp1YIYe';
      AV.init({
        appId: APP_ID,
        appKey: APP_KEY
      });
    },
    fetch: function () {
      var query = new AV.Query('Message');
      return query.find()
    },
    save: function (name, content) {
      var Message = AV.Object.extend('Message');
      var message = new Message();
      return message.save({
        'name': name,
        'content': content
      })
    }
  }
  var controller = {
    view: null,
    model: null,
    messageList: null,
    form: null,
    init: function (view, model) {
      this.view = view
      this.model = model
      this.messageList = view.querySelector('#messageList')
      this.form = view.querySelector('form')
      this.model.init()
      this.loadMessages()
      this.bindEvents()
    },
    loadMessages: function () {
      this.model.fetch()
        .then(
          (messages) => {
            let array = messages.map(item => item.attributes)
            array.forEach(item => {
              let li = document.createElement('li')
              li.innerText = `${item.name}: ${item.content}`
              this.messageList.append(li)
            });
          },
          function (error) {
            console.log(error)
          }
        );
    },
    saveMessage: function () {
      let myForm = this.form
      let content = myForm.querySelector('input[name=content]').value
      let name = myForm.querySelector('input[name=name]').value
      this.model.save(name, content)
        .then(function (object) {
          let li = document.createElement('li')
          li.innerText = `${object.attributes.name}: ${object.attributes.content}`
          this.messageList.append(li)
          myForm.querySelector('input[name=content]').value = ''
        })
    },
    bindEvents: function () {
      let myForm = this.form
      myForm = document.querySelector('#postMessage')
      var that = this
      myForm.addEventListener('submit', function (e) {
        e.preventDefault()
        that.saveMessage()
      })
    }
  }
  controller.init(view, model)
}.call()

MVC

window.View = function (selector) {
  return document.querySelector(selector)
}

window.Model = function ({
  resourceName
}) {
  return {
    init: function () {
      var APP_ID = 'qXl6W9vxbolyxcUCjs67LHQq-gzGzoHsz';
      var APP_KEY = 'eOq0UluoW79IgUqEyAp1YIYe';
      AV.init({
        appId: APP_ID,
        appKey: APP_KEY
      });
    },
    fetch: function () {
      var query = new AV.Query(resourceName);
      return query.find()
    },
    save: function (object) {
      var Instance = AV.Object.extend(resourceName);
      var ins = new Instance();
      return ins.save(object)
    }
  }
}

window.Controller = function (options) {
  var init = options.init
  var object = {
    view: null,
    model: null,
    init: function (view, model) {
      console.log(this)
      this.view = view
      this.model = model
      this.model.init()
      init.call(this, view, model)
      this.bindEvents.call(this)
    }
  }
  for (const key in options) {
    if (key !== 'init') {
      object[key] = options[key]
    }
  }
  return object
}

! function () {
  var view = View('section.message')
  var model = Model({
    resourceName: 'Message'
  })
  var controller = Controller({
    messageList: null,
    form: null,
    init: function (view, model) {
      console.log(this)
      this.messageList = view.querySelector('#messageList')
      this.form = view.querySelector('form')
      this.loadMessages()
    },
    loadMessages: function () {
      this.model.fetch()
        .then(
          (messages) => {
            let array = messages.map(item => item.attributes)
            array.forEach(item => {
              let li = document.createElement('li')
              li.innerText = `${item.name}: ${item.content}`
              this.messageList.append(li)
            });
          },
          function (error) {
            console.log(error)
          }
        );
    },
    saveMessage: function () {
      let myForm = this.form
      let content = myForm.querySelector('input[name=content]').value
      let name = myForm.querySelector('input[name=name]').value
      this.model.save({
          'name': name,
          'content': content
        })
        .then(function (object) {
          let li = document.createElement('li')
          li.innerText = `${object.attributes.name}: ${object.attributes.content}`
          this.messageList.append(li)
          myForm.querySelector('input[name=content]').value = ''
        })
    },
    bindEvents: function () {
      this.form.addEventListener('submit', (e) => {
        e.preventDefault()
        this.saveMessage()
      })
    }
  })
  controller.init(view, model)
}.call()

命名空间

模块化开发，防止污染全局变量
多人开发，对象命名容易重复，就要 解决命名空间的问题

老旧的解决方法：

用闭包来解决（也可用 webpack），返回方法的调用，变量也污染全局变量