什么是模塊化
模塊化簡單來說就是把代碼模塊之后放到一個文件里霞溪。
一個模塊就是一個獨立的功能专控，它可以是一個函數(shù)，也可以是一個對象诬滩，還可以是一個文件霹粥。
實現(xiàn)模塊化的技巧
- 用函數(shù)把復(fù)雜事情分割成幾個小事情
- 一個函數(shù)只做一件事情
- 用立即執(zhí)行函數(shù)解決模塊的不完全獨立（例如暴露了foo1和foo2兩個全局變量灭将，無法保證不與其他模塊產(chǎn)生沖突，用立即執(zhí)行函數(shù)可以避免產(chǎn)生全局變量的問題后控，這樣foo1()和foo2()就都是局部變量了庙曙。還有另外一個問題，假如模塊與模塊之間有依賴關(guān)系怎么辦呢浩淘？一個簡單的例子就是當(dāng)我們引入jQuery時進(jìn)行編程捌朴，jQuery就可以認(rèn)為是一個依賴，我們可以通過傳入這個依賴來解決）
- 造一個自己的window(列如app),將一些插件掛在app上馋袜，解決和外部插件的沖突
什么樣的代碼算優(yōu)化的好
每個函數(shù)只有5行
模塊化舉例
!function($,AV){
loadSongs()
function loadSongs() {
getSongs().then(fillSongs, function (error) {
alert('獲取歌曲失敗')
})
}
function template(song,results){
return
` <li>
<a href="./song.html?id=${results.id}">
<div class="wrapper">
<h3>${song.name}</h3>
<svg class="icon " >
<use xlink:href="#icon-SQ"></use>
</svg>
<p>${song.singer}</p>
</div>
<svg class="icon " >
<use xlink:href="#icon-bofangjian60px"></use>
</svg>
</a>
</li> `
}
function getSongs(){
var query = new AV.Query('Song');
return query.find()
}
function fillSongs(results){
$('#songs-loading').remove()
for(let i=0;i<results.length;i++) {
let song = results[i].attributes
let li = template(song,results[i])
$('ul#song').append(li)
}
}
}(jQuery,AV)
使用require.js之后
define(['jquery','av'],function($,AV){
function loadSongs() {
getSongs().then(fillSongs, function (error) {
alert('獲取歌曲失敗')
})
}
function template1(song,results){
return `<li>
<a href="./song.html?id=${results.id}">
<div class="wrapper">
<h3>${song.name}</h3>
<svg class="icon " >
<use xlink:href="#icon-SQ"></use>
</svg>
<span>${song.singer}</span>
</div>
<svg class="icon " >
<use xlink:href="#icon-bofangjian60px"></use>
</svg>
</a>
</li>`
}
function template2(i,song,results){
if(i<9){
return `<li>
<a href="./song.html?id=${results.id}">
<p >0${i+1}</p>
<div class="wrapper">
<h3>${song.name}</h3>
<svg class="icon " >
<use xlink:href="#icon-SQ"></use>
</svg>
<span>${song.singer}</span>
</div>
<svg class="icon " >
<use xlink:href="#icon-bofangjian60px"></use>
</svg>
</a>
</li>`
}else{
return `<li>
<a href="./song.html?id=${results.id}">
<p >${i+1}</p>
<div class="wrapper">
<h3>${song.name}</h3>
<svg class="icon " >
<use xlink:href="#icon-SQ"></use>
</svg>
<span>${song.singer}</span>
</div>
<svg class="icon " >
<use xlink:href="#icon-bofangjian60px"></use>
</svg>
</a>
</li>`}
}
function getSongs(){
var query = new AV.Query('Song');
return query.find()
}
function fillSongs(results){
$('#songs-loading').remove()
for(let i=0;i<results.length;i++) {
let song = results[i].attributes
let li = template1(song,results[i])
$('ul#song').append(li)
}
$('#hot-songs-loading').remove()
for(let i=0;i<results.length;i++) {
let song = results[i].attributes
let li = template2(i,song,results[i])
$('ul#hot-song').append(li)
}
}
return loadSongs
})
使用loadSongs
requirejs.config({
paths: {
jquery: '../vendors/jquery.min', // 路徑2
av:'../vendors/av-min'
}
});
require(['./tabs','./load-songs','./search','./av-init','./home'],function(tabs,loadSongs,search,AVInit,yyy){
AVInit()
tabs('.tabs')
loadSongs()
search()
yyy()
})
用webpack
export default function loadSongs() {
getSongs().then(fillSongs, function (error) {
alert('獲取歌曲失敗' + error);
});
function getSongs() {
let query = new AV.Query('Song');
return query.find()
}
function fillSongs(results) {
$('#loading-music').remove();
for (let i = 0; i < results.length; i++) {
let song = results[i].attributes;
let li = songTemplate(song, results[i].id);
$("#newSongsList").append(li);
$("#hotSongsList").append(li);
}
}
function songTemplate(song, id) {
return `
<a href=/yunMusic-demo/play.html?id=${id} class="songInfo">
<p class="songTitle">${song.name}<span class="songDesc">${song.des}</span></p>
<p class="singer"><i class="icon icon-sq"></i>${song.singer} - ${song.album}</p>
<div class="playButton"><i class="icon icon-play"></i></div>
</a>
`;
}
}
import '../vendors/loaders.min.css'
import './reset.css'
import './index.css'
import avReset from './avReset'
import loadSongs from './loadSongs'
import tabs from './tabs'
import searchSongs from './searchSongs'
avReset();
tabs(".tabs",".mainPages");
loadSongs();
searchSongs();
推薦文章：
1.https://plainnany.github.io/2017/09/04/JavaScript%E6%A8%A1%E5%9D%97%E5%8C%96%E7%BC%96%E7%A8%8B-require-js/
2.http://www.reibang.com/p/b4d4855b4668
