什么是模块化

模块化简单来说就是把代码模块之后放到一个文件里。
一个模块就是一个独立的功能，它可以是一个函数，也可以是一个对象，还可以是一个文件。

实现模块化的技巧

用函数把复杂事情分割成几个小事情
一个函数只做一件事情
用立即执行函数解决模块的不完全独立（例如暴露了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();