官网开发碎碎念(一)

公司之前都是花钱用的那种模板,只需要插入内容,现在要自己开发,就到了我这里,我都没有开发过,所以只能自己慢慢摸索。

问朋友要了他写的官网的项目,然后和看我们公司另一个前端上一个公司写的官网,发现还是有很多可以优化的东西,首先我发现朋友的每个页面都要写头部和底部的代码,这样照成的代码量就非常多,而我参考我们公司前端是

一个头部,一个底部,和一个回到顶部是分别写在一个.html文件,直接<div>包裹就好

3个都一样,然后在你的js文件中,就是总的js文件,我的是script.js

用了 jQuery的$(document).ready 方法,确保在整个文档加载完成后执行其中的代码。这是为了确保 DOM 元素已经加载完毕,避免因未加载完成而导致的操作失败。

使用 jQuery 的 load 方法将外部 HTML 文件(header.htmlfooter.htmltop.html)加载到页面中指定的元素(#header#footer#top)内。这通常用于将页面的头部、底部和顶部内容分离到独立的文件中,以便于维护和复用。

这样在页面中使用就只需要

就减少了代码量,我不知道大家这部分怎么写的,我只是对比了俩个人的代码以后发现这个方法更好,希望可以帮助到你。

相关推荐
zhanghaha131417 小时前
HTML系列教程:3_HTML 基础标签 — 标题、段落、超链接、图像
前端·html
breeze jiang20 小时前
CSS 三栏布局怎么写:Flex、Grid 完整方案与 BFC 区别
前端·css
SendTomo20 小时前
SendTomo稳定传输三大核心策略
javascript·网络协议·webrtc·html5·p2p
何时梦醒20 小时前
CSS 三栏布局与 BFC 深度解析:Float、Flex、Grid 三种方案一网打尽
前端·css·面试
烬羽20 小时前
CSS 三栏布局:`margin-left: -100%` 凭什么把侧栏「拽」回上一行?彻底搞懂负 margin
css·面试·前端框架
BreezeJiang20 小时前
写了 display:flex,为什么三栏布局还没完成?
前端·css
禁止摆烂_才浅20 小时前
HTML 高频面试题
前端·面试·html
SendTomo21 小时前
send.wang(私传网)P2P直连加速文件传输
网络·网络协议·webrtc·html5·p2p
10WTW011 天前
Wget静态网站前端
html·spa·curl·网页·10wtw01
用户938515635071 天前
TypeScript 高级类型 + CSS 三列布局:从类型体操到样式工程的进阶之路
css·面试·typescript