关于面向对象记

四种写对象方式

字面量:var obj={}
构造函数:var obj=new Object()
工厂函数:

//函数里面直接添加对象返回值
 function CreateObj(name) {
      var obj = {}
      obj.name = name,
        obj.material = [ ]
      return obj
    }
    var obj1 = CreateObj("蒸羊羔")
    var obj2 = CreateObj("烧花鸭")
    console.log(obj1);
    console.log(obj2);

自定义构造函数:

//工厂函数简化版
 function createObj(name) {
      this.name = name
      this.material = [ ]
      this.cook = function () {
      }
    }
    var obj1 = new CreateObj("蒸羊羔")
    var obj2 = new CreateObj("烧花鸭")

    console.log(obj1, obj2);

对象注意问题

1.首字母大写 这个习惯养成
2.构造函数不写return
3.构造函数可以当普通函数用,但这样会失去意义

关于对象的原型

一般使用自定义构造函数

 var data1 = {
      title: "体育",
      list: ["体育-1", "体育-2", "体育-3"]
    }
    var data2 = {
      title: "综艺",
      list: ["综艺-1", "综艺-2", "综艺-3"]
    }
function CreateList(select, data) {
      this.ele = document.querySelector(select)
      this.title = data.title,
        this.list = data.list
    }
 //方法搭在CreateList原型上
  CreateList.prototype.render = function () {
      // this.render = function () {
      //渲染页面
      var h1 = this.ele.querySelector("h1")
      var ul = this.ele.querySelector("ul")
      console.log(h1, ul);

      h1.innerHTML = this.title
      ul.innerHTML = this.list.map(item => `<li>${item}</li>`).join('')
    }
        var obj1 = new CreateList(".box1", data1)
    obj1.render()
    //obj1.__proto__ === CreateList.prototype
    console.log(obj1.__proto__);
    var obj2 = new CreateList(".box2", data2)
    obj2.render()

ES6模块化

例如在js中写上 export{}或export default{}

在主页面import { } from 'xx.js'

function A1(){
  a_common()
  console.log("A1-布局创建");
}
function A2(){
  a_common()
  console.log("A2-布局创建");
}

function a_common(){
  console.log("a_common");
}

function test(){
  console.log("A1-test");
}
function A_A(){
  console.log(A_A);
}
export{
  A1,
  A2,
  test,
  A_A
}

  import { A1, A2, test as A_test } from './module/A.js'
    A1()