JS基本语法9-模块与模块实战 - 前端开发

首页 > 博客列表 > JS基本语法9-模块与模块实战

博主信息

博文 27

粉丝 0

访问量 24707

专题推荐

更多>

一.模块简介

模块就是一个JS文档
模块有自己的作用域（全局，函数，块，模块）
模块人成员，默认全部私有，只有导出后才可以被外部使用
模块导出的成员，默认全部是常量，外部不能更新

二.模块成员导出

逐个导出：export
批量导出：export{...}
别名导出：export{ as }
默认导出：export default
混全导出：export{ as default }

注意：一个模块仅允许一个export default

三.模块成员导入

同名导入：import {...} from
别名导入：import { as } from
整体导入：import * as obj from
默认导入：import obj from

注意：import 具有只读，提升二大特征

=======================

四.模块选项卡-实战

<title>选项卡-模块</title>
    <style>
      /* 隐藏类 */
      .hidden {
        display: none;
      }
      /* 显示类 */
      .active {
        display: block;
      }
      /* 激活类 */
      .box > .type > *.active,
      .content > *.active {
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <!-- 1.栏目组 -->
      <div class="type" style="display: flex"></div>
      <!-- 2.内容组 -->
      <div class="content"></div>
    </div>
    <script type="module">
    //导入模块
      import { createTab, setBtnStatue, setContentStatus } from "./1.js";
      // 1.读取栏目和内容的元素
      const type = document.querySelector(".type");
      const content = document.querySelector(".content");
      //2.当页面加载成功,交自动初始化选项卡
      window.onload = createTab(type, content);
      //3.点击栏目时自动切换内容
      type.onclick = (ev) => {
        //事件委托,将按钮上的点击事件全部由父级.type代理完成
        //ev.currentTarget:事件的绑定者(div.type)
        //ev.target:事件触发者(button)
        // console.log(ev.target);
        // console.log(ev.currentTarget);
        // console.log(this);
        // 2.设置栏目高亮
        setBtnStatue(ev);
        setContentStatus(ev, ev.target);
      };
    </script>
  </body>

//栏目
const cates = [
  { id: 1, cname: "国际新闻" },
  { id: 2, cname: "中国新闻" },
  { id: 3, cname: "本地新闻" },
];
//与栏目对应的内容
//内容必须与栏目的id一一对应
const details = [
  {
    key: 1,
    cid: 1,
    content: [
      {
        title: "俄罗斯宣布从赫尔松部分地区撤军",
        url: "https://news.ifeng.com/c/8KoK54urn1k",
      },
      {
        title: "俄罗斯宣布从赫尔松部分地区撤军",
        url: "https://news.ifeng.com/c/8KoK54urn1k",
      },
      {
        title: "俄罗斯宣布从赫尔松部分地区撤军",
        url: "https://news.ifeng.com/c/8KoK54urn1k",
      },
    ],
  },
  {
    key: 2,
    cid: 2,
    content: [
      {
        title: "空战隐身无人僚机亮相！",
        url: "https://news.ifeng.com/c/8KoeDFJXF1b",
      },
      {
        title: "空战隐身无人僚机亮相！",
        url: "https://news.ifeng.com/c/8KoeDFJXF1b",
      },
      {
        title: "空战隐身无人僚机亮相！",
        url: "https://news.ifeng.com/c/8KoeDFJXF1b",
      },
    ],
  },
  {
    key: 3,
    cid: 3,
    content: [
      {
        title: "“安康码”上新！家庭成员核酸情况查询更便捷",
        url: "https://ah.ifeng.com/c/8KkGUDhAZNZ",
      },
      {
        title: "“安康码”上新！家庭成员核酸情况查询更便捷",
        url: "https://ah.ifeng.com/c/8KkGUDhAZNZ",
      },
      {
        title: "“安康码”上新！家庭成员核酸情况查询更便捷军",
        url: "https://ah.ifeng.com/c/8KkGUDhAZNZ",
      },
    ],
  },
];
//1.自动创建栏目和对应的内容
function createTab(type, content) {
  //1.1 生成栏目
  for (let i = 0; i < cates.length; i++) {
    const btn = document.createElement("button");
    btn.textContent = cates[i].cname;
    //添加自定义数据属性 "data-key" 用于和指定的数据内容进行绑定
    btn.dataset.key = cates[i].id;
    // console.log(cates[i].id);
    if (i === 0) {
      btn.classList.add("active");
    }
    type.append(btn);
  }
  // console.log(details.length);
  // 1.2 生成内容
  for (let i = 0; i < details.length; i++) {
    let ul = document.createElement("ul");
    //与栏目组的data-key 进行绑定
    ul.dataset.key = details[i].cid;
    //全部内容,刚加载时,默认全是隐藏的,哪个需要显示由默认分类标签决定
    ul.classList.add(i === 0 ? "active" : "hidden");
    //二级循环,把与列表对应的内容全部渲染出来
    for (let j = 0; j < details[i].content.length; j++) {
      let li = document.createElement("li");
      let a = document.createElement("a");
      a.textContent = details[i].content[j].title;
      a.href = details[i].content[j].url;
      li.append(a);
      ul.append(li);
      content.append(ul);
    }
  }
}
//2.设置当前栏目高亮
function setBtnStatue(ev) {
  //(1)先把按钮上的高亮状态全取消,由于不知道你当前选的是哪个,所以遍历一下
  // ev.currentTaget:dispatchEvent.type  父级
  // console.log(ev.currentTarget.children);
  // console.log([...ev.currentTarget.children]);
  // console.log(ev.target);
  [...ev.currentTarget.children].forEach((btn) =>
    btn.classList.remove("active")
  );
  //(2)设置高亮
  ev.target.classList.add("active");
}
// 3. 设置与栏目对应的内容的激活状态
function setContentStatus(ev, currentBtn) {
  console.log(ev.target); //事件触发者 btn.onclick  子级
  // console.log(ev.currentTarget); //事件绑定者  div.type父级
  const list = document.querySelectorAll(".content>ul");
  // console.log(list);
  // list.forEach((ul) => console.log(ul));
  list.forEach((ul) => ul.classList.replace("active", "hidden"));
  // console.log(currentBtn);
  //找到与栏目id对应的内容
  const currList = [...list].find(
    (ul) => ul.dataset.key === currentBtn.dataset.key
  );
  // console.log(conList);
  currList.classList.replace("hidden", "active");
}
//导出模块成员
export { createTab, setBtnStatue, setContentStatus };