【JavaScript——页面加载】年度明星项目（蓝桥杯真题

admin管理员组

文章数量:1034417

【JavaScript——页面加载】年度明星项目（蓝桥杯真题

背景介绍

作为前端开发的主力语言，JavaScript 相关的开源项目是每一个前端开发者都应该多多关注的。我们可以通过这一年新增 star 的数量来判断一个开源项目的流行趋势。 本题请实现一个展示 2022 年 JavaScript 明星开源项目数据的网页。

准备步骤

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

代码语言：javascript代码运行次数：0运行复制

├── css
│   └── style.css
├── effect.gif
├── images
├── index.html
└── js
    ├── all-data.json
    ├── index.js
    ├── jquery-3.6.0.min.js
    └── translation.json

其中：

• css/style.css 是样式文件。
• index.html 是主页面。
• images 是图片文件夹。
• js/all-data.json 是项目数据文件。
• js/index.js 是需要补充代码的 js 文件。
• js/jquery-3.6.0.min.js 是 jQuery 库文件。
• js/translation.json 是页面所用到的翻译数据。
• effect.gif 是页面最终的效果图。

注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载：

代码语言：javascript代码运行次数：0运行复制

cd /home/project
wget .zip
unzip 2022-JavaScript.zip && rm 2022-JavaScript.zip

在浏览器中预览 index.html 页面效果如下：

目标效果

请在 js/index.js 文件中补全代码，具体需求如下： 1. 在页面初始化时使用 AJAX 请求地址为 ./js/all-data.json 和 ./js/translation.json 文件中的数据（必须使用给定的路径请求，否则可能会请求不到数据），并将后者中的数据保存至 translation 变量中。其中 all-data.json 文件中以数组的形式存储了明星项目的数据，translation.json 文件中包含了网站中英文转换所需的数据。 all-data.json 数据参数说明： 参数说明类型name项目名称stringicon项目 icon 路径stringstars项目新增 star 数量numberdescriptionCN项目中文描述stringdescriptionEN项目英文描述stringtags项目标签列表array 2. 页面初始化时利用 createProjectItem 函数创建前 15 个项目数据（即 all-data.json 数组中的前 15 项）的列表元素并加载到页面中。当用户点击 加载更多 按钮时，则按顺序再显示 15 个项目数据。直到所有项目数据都展示完毕（共 60 个）。所有项目展示完毕后需要隐藏 加载更多 按钮。项目展示效果如图所示：

3. 当用户点击页面右上方的中英文切换按钮时，根据用户的选择改变项目描述使用的语言（不改变原有项目展示数量）。当用户选择英语模式时的项目展示效果如图所示：

最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

---

要求规定

• 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。

---

判分标准

• 完成目标 1，得 5 分。
• 完成目标 2，得 10 分。
• 完成目标 3，得 5 分。

---

通关代码✔️

代码语言：javascript代码运行次数：0运行复制

let data = []
// 保存翻译文件数据的变量
let translation = {};
// 记录当前语言
let currLang = "zh-cn";
var page = 0
// TODO: 请在此补充代码实现项目数据文件和翻译数据文件的请求功能
window.onload= async()=>{
  const res1 = await fetch("./js/all-data.json ")
  data = await res1.json()
  const res2 = await fetch("./js/translation.json")
  translation = await res2.json()
  data.slice(0,15).forEach((item)=>{
    $(".list > ul").append(createProjectItem({...item,description:(currLang=="zh-cn"?item.descriptionCN:item.descriptionEN)}));
  })
  document.querySelector(".load-more").addEventListener("click",function(){
    data.slice((page+1)*15,(page+2)*15).forEach((item)=>{
      $(".list > ul").append(createProjectItem({...item,description:(currLang=="zh-cn"?item.descriptionCN:item.descriptionEN)}));
    });
    page++
    if(page == Math.ceil(data.length/15) - 1){
      this.style.display ="none"
    }
  })
}
// 用户点击切换语言的回调
$(".lang").click(() => {
  // 切换页面文字的中英文
  if (currLang === "en") {
    $(".lang").text("English");
    currLang = "zh-cn";
  } else {
    $(".lang").text("中文");
    currLang = "en";
  }
  $("body")
    .find("*")
    .each(function () {
      const text = $(this).text().trim();
      if (translation[text]) {
        $(this).text(translation[text]);
      }
    });
  // TODO: 请在此补充代码实现项目描述的语言切换
  document.querySelectorAll("body > div.container > div.list > ul > li > div.desc > p").forEach((item)=>{
    item.textContent=
    currLang == "zh-cn"
    ?data.find(i=>i.descriptionEN==item.textContent).descriptionCN
    :data.find(i=>i.descriptionCN==item.textContent).descriptionEN
  })
});

// 生成列表DOM元素的函数，将该元素的返回值append至列表中即可生成一行项目数据
/**
 * @param  {string} name - 项目名称
 * @param  {string} description - 项目描述
 * @param  {string[]} tags - 项目标签
 * @param  {number} stars - 项目star数量
 * @param  {string} icon - 项目icon路径
 */
function createProjectItem({ name, description, tags, stars, icon }) {
  return `
    <li class="item">
      <img src="images/${icon}" alt="">
      <div class="desc">
        <h3>${name}</h3>
        <p>${description}</p>
        <ul class="labels">
          ${tags.map((tag) => `<li>${tag}</li>`).join("")}
        </ul>
      </div>
      <div class="stars">
        +${stars} 
【JavaScript——页面加载】年度明星项目（蓝桥杯真题
背景介绍
 作为前端开发的主力语言，JavaScript 相关的开源项目是每一个前端开发者都应该多多关注的。我们可以通过这一年新增 star 的数量来判断一个开源项目的流行趋势。
 本题请实现一个展示 2022 年 JavaScript 明星开源项目数据的网页。
准备步骤
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
代码语言：javascript代码运行次数：0运行复制
├── css
│   └── style.css
├── effect.gif
├── images
├── index.html
└── js
    ├── all-data.json
    ├── index.js
    ├── jquery-3.6.0.min.js
    └── translation.json
其中：
css/style.css 是样式文件。
index.html 是主页面。
images 是图片文件夹。
js/all-data.json 是项目数据文件。
js/index.js 是需要补充代码的 js 文件。
js/jquery-3.6.0.min.js 是 jQuery 库文件。
js/translation.json 是页面所用到的翻译数据。
effect.gif 是页面最终的效果图。
注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载：
代码语言：javascript代码运行次数：0运行复制
cd /home/project
wget .zip
unzip 2022-JavaScript.zip && rm 2022-JavaScript.zip
在浏览器中预览 index.html 页面效果如下：
目标效果
 请在 js/index.js 文件中补全代码，具体需求如下：
 
 1. 在页面初始化时使用 AJAX 请求地址为 ./js/all-data.json 和 ./js/translation.json 文件中的数据（必须使用给定的路径请求，否则可能会请求不到数据），并将后者中的数据保存至 translation 变量中。其中 all-data.json 文件中以数组的形式存储了明星项目的数据，translation.json 文件中包含了网站中英文转换所需的数据。
 
 all-data.json 数据参数说明：
 参数说明类型name项目名称stringicon项目 icon 路径stringstars项目新增 star 数量numberdescriptionCN项目中文描述stringdescriptionEN项目英文描述stringtags项目标签列表array 2. 页面初始化时利用 createProjectItem 函数创建前 15 个项目数据（即 all-data.json 数组中的前 15 项）的列表元素并加载到页面中。当用户点击 加载更多 按钮时，则按顺序再显示 15 个项目数据。直到所有项目数据都展示完毕（共 60 个）。所有项目展示完毕后需要隐藏 加载更多 按钮。项目展示效果如图所示：

 3. 当用户点击页面右上方的中英文切换按钮时，根据用户的选择改变项目描述使用的语言（不改变原有项目展示数量）。当用户选择英语模式时的项目展示效果如图所示：
最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。
要求规定
 
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。
判分标准
 
完成目标 1，得 5 分。
完成目标 2，得 10 分。
完成目标 3，得 5 分。
通关代码✔️ 
代码语言：javascript代码运行次数：0运行复制
let data = []
// 保存翻译文件数据的变量
let translation = {};
// 记录当前语言
let currLang = "zh-cn";
var page = 0
// TODO: 请在此补充代码实现项目数据文件和翻译数据文件的请求功能
window.onload= async()=>{
  const res1 = await fetch("./js/all-data.json ")
  data = await res1.json()
  const res2 = await fetch("./js/translation.json")
  translation = await res2.json()
  data.slice(0,15).forEach((item)=>{
    $(".list > ul").append(createProjectItem({...item,description:(currLang=="zh-cn"?item.descriptionCN:item.descriptionEN)}));
  })
  document.querySelector(".load-more").addEventListener("click",function(){
    data.slice((page+1)*15,(page+2)*15).forEach((item)=>{
      $(".list > ul").append(createProjectItem({...item,description:(currLang=="zh-cn"?item.descriptionCN:item.descriptionEN)}));
    });
    page++
    if(page == Math.ceil(data.length/15) - 1){
      this.style.display ="none"
    }
  })
}
// 用户点击切换语言的回调
$(".lang").click(() => {
  // 切换页面文字的中英文
  if (currLang === "en") {
    $(".lang").text("English");
    currLang = "zh-cn";
  } else {
    $(".lang").text("中文");
    currLang = "en";
  }
  $("body")
    .find("*")
    .each(function () {
      const text = $(this).text().trim();
      if (translation[text]) {
        $(this).text(translation[text]);
      }
    });
  // TODO: 请在此补充代码实现项目描述的语言切换
  document.querySelectorAll("body > div.container > div.list > ul > li > div.desc > p").forEach((item)=>{
    item.textContent=
    currLang == "zh-cn"
    ?data.find(i=>i.descriptionEN==item.textContent).descriptionCN
    :data.find(i=>i.descriptionCN==item.textContent).descriptionEN
  })
});

// 生成列表DOM元素的函数，将该元素的返回值append至列表中即可生成一行项目数据
/**
 * @param  {string} name - 项目名称
 * @param  {string} description - 项目描述
 * @param  {string[]} tags - 项目标签
 * @param  {number} stars - 项目star数量
 * @param  {string} icon - 项目icon路径
 */
function createProjectItem({ name, description, tags, stars, icon }) {
  return `
    <li class="item">
      <img src="images/${icon}" alt="">
      <div class="desc">
        <h3>${name}</h3>
        <p>${description}</p>
        <ul class="labels">
          ${tags.map((tag) => `<li>${tag}</li>`).join("")}
        </ul>
      </div>
      <div class="stars">
        +${stars} 

                本文标签：
                JavaScript页面加载年度明星项目（蓝桥杯真题

                        版权声明：本文标题：【JavaScript——页面加载】年度明星项目（蓝桥杯真题 内容由热心网友自发贡献，该文观点仅代表作者本人，
                        转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1748144107a2259970.html，
                        本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。