什么是模块化
模块化简单来说就是把代码模块之后放到一个文件里。
一个模块就是一个独立的功能，它可以是一个函数，也可以是一个对象，还可以是一个文件。
实现模块化的技巧
- 用函数把复杂事情分割成几个小事情
- 一个函数只做一件事情
- 用立即执行函数解决模块的不完全独立（例如暴露了foo1和foo2两个全局变量，无法保证不与其他模块产生冲突，用立即执行函数可以避免产生全局变量的问题，这样foo1()和foo2()就都是局部变量了。还有另外一个问题，假如模块与模块之间有依赖关系怎么办呢？一个简单的例子就是当我们引入jQuery时进行编程，jQuery就可以认为是一个依赖，我们可以通过传入这个依赖来解决）
- 造一个自己的window(列如app),将一些插件挂在app上，解决和外部插件的冲突
什么样的代码算优化的好
每个函数只有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.jianshu.com/p/b4d4855b4668
