Jadual Kandungan
回复内容:
Rumah hujung hadapan web Tutorial H5 百度音乐随身听PC端的前端技术?

百度音乐随身听PC端的前端技术?

Jun 07, 2016 am 08:43 AM
100

百度音乐随心听
本人前端菜鸟,想100%模仿制作一个百度随身听的PC页面,但不知道该网站的团队运用了什么前端开发技术?
另外,也请前端前辈指导下如何下手?
非常感谢

回复内容:

既然楼上的高手不愿意写,那我就来献丑说一点

开工!

技术点1:浏览器的降级处理。
通过userAgent进行了判断,对支持localStorage本地存储与非IE内核浏览器加载localjs.js;否则直接加载jquery-1.7.2.js,如下图↓
百度音乐随身听PC端的前端技术?

作用:支持本地存储就通过localjs把jquery写入本地,下次再通过localjs读取jquery,就不需要用户再次请求jquery了。


技术点2:前端自动化工具,如下图↓
百度音乐随身听PC端的前端技术?
这些js创建时肯定不是这种命名方式的,读起来完全莫名其妙有木有,
补充:这里应该是 摘要算法_百度百科 相关资料 前端工程与性能优化 · Issue #3 · fouber/blog · GitHub
数据摘要算法是密码学算法中非常重要的一个分支,它通过对所有数据提取指纹信息以实现数据签名、数据完整性校验等功能,由于其不可逆性,有时候会被用做敏感信息的加密。
摘要结果(也就是文件名)会根据文件内容进行计算, 用于文件版本迭代,清理缓存。


技术点3:AMD 模块化加载 如下图↓ 我
百度音乐随身听PC端的前端技术?
用绿色框标注的data-requiremodule就是JS模块的依赖,
想要了解相关知识的话→ RequireJS 中文网

但并不是整个网页都使用这种技术,页面注释也写到:
// HACK: muplayer通过全局变量而非AMD的方式初始化
muplayer用来初始化这个网站的播放器



------------------------------------完结--------------------------------------------

CSS就不多谈了,icon用css sprites整合了起来。
不知道题主所谓的技术菜是指CSS还是JS 还是都菜 = =
个人认为 技术点2、3就够折腾一阵子了,配置环境的痛苦..

btw:如果有用能否让我骗几个赞 QAQ 其实我也不太懂。我插个大蒜装逼一下。

模仿分为两种:

第一种是假模仿,就是把他的面子模仿的一模一样。也就是能以假乱真(哪怕是纯静态的)

第二种是实质的模仿,要做到这一点,可能有点难。

百度音乐随身听PC端的前端技术?
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menambah audio ke laman web html5 saya? Bagaimana untuk menambah audio ke laman web html5 saya? Mar 10, 2025 pm 03:01 PM

Artikel ini menerangkan bagaimana untuk membenamkan audio dalam HTML5 menggunakan & lt; audio & gt; elemen, termasuk amalan terbaik untuk pemilihan format (MP3, Ogg Vorbis), pengoptimuman fail, dan kawalan JavaScript untuk main balik. Ia menekankan menggunakan pelbagai audio f

Bagaimanakah saya menggunakan API Penglihatan Halaman Html5 untuk mengesan apabila halaman dapat dilihat? Bagaimanakah saya menggunakan API Penglihatan Halaman Html5 untuk mengesan apabila halaman dapat dilihat? Mar 13, 2025 pm 07:51 PM

Artikel ini membincangkan menggunakan API Penglihatan Halaman HTML5 untuk mengesan penglihatan halaman, meningkatkan pengalaman pengguna, dan mengoptimumkan penggunaan sumber. Aspek utama termasuk berhenti media, mengurangkan beban CPU, dan menguruskan analisis berdasarkan perubahan penglihatan.

Bagaimanakah saya menggunakan tag meta viewport untuk mengawal skala halaman pada peranti mudah alih? Bagaimanakah saya menggunakan tag meta viewport untuk mengawal skala halaman pada peranti mudah alih? Mar 13, 2025 pm 08:00 PM

Artikel ini membincangkan menggunakan tag meta viewport untuk mengawal skala halaman pada peranti mudah alih, memberi tumpuan kepada tetapan seperti lebar dan skala awal untuk respons dan prestasi optimum.

Bagaimana cara menggunakan borang HTML5 untuk input pengguna? Bagaimana cara menggunakan borang HTML5 untuk input pengguna? Mar 10, 2025 pm 02:59 PM

Artikel ini menerangkan cara membuat dan mengesahkan borang HTML5. Ia memperincikan & lt; form & gt; Unsur, jenis input (teks, e -mel, nombor, dll), dan atribut (diperlukan, corak, min, max). Kelebihan bentuk html5 berbanding kaedah yang lebih lama, termasuk

Bagaimanakah saya mengendalikan privasi dan keizinan lokasi pengguna dengan API Geolokasi? Bagaimanakah saya mengendalikan privasi dan keizinan lokasi pengguna dengan API Geolokasi? Mar 18, 2025 pm 02:16 PM

Artikel ini membincangkan menguruskan privasi dan keizinan lokasi pengguna menggunakan API Geolocation, menekankan amalan terbaik untuk meminta kebenaran, memastikan keselamatan data, dan mematuhi undang -undang privasi.

Bagaimana untuk membuat permainan interaktif dengan HTML5 dan JavaScript? Bagaimana untuk membuat permainan interaktif dengan HTML5 dan JavaScript? Mar 10, 2025 pm 06:34 PM

Butiran artikel ini mewujudkan permainan HTML5 interaktif menggunakan JavaScript. Ia meliputi reka bentuk permainan, struktur HTML, gaya CSS, logik JavaScript (termasuk pengendalian acara dan animasi), dan integrasi audio. Perpustakaan JavaScript Penting (Phaser, PI

Bagaimanakah saya menggunakan API Drag dan Drop HTML5 untuk antara muka pengguna interaktif? Bagaimanakah saya menggunakan API Drag dan Drop HTML5 untuk antara muka pengguna interaktif? Mar 18, 2025 pm 02:17 PM

Artikel ini menerangkan cara menggunakan API Drag dan Drop HTML5 untuk mewujudkan antara muka pengguna interaktif, memperincikan langkah -langkah untuk membuat unsur -unsur menyeret, mengendalikan peristiwa utama, dan meningkatkan pengalaman pengguna dengan maklum balas tersuai. Ia juga membincangkan perangkap biasa dengan a

Bagaimanakah saya menggunakan API WebSockets HTML5 untuk komunikasi dua arah antara klien dan pelayan? Bagaimanakah saya menggunakan API WebSockets HTML5 untuk komunikasi dua arah antara klien dan pelayan? Mar 12, 2025 pm 03:20 PM

Artikel ini menerangkan API WebSockets HTML5 untuk komunikasi pelayan klien bidirectional masa nyata. Ia memperincikan pelaksanaan klien (JavaScript) dan pelayan (python/flask), menangani cabaran seperti skalabilitas, pengurusan negeri,

See all articles