常見的模組化規範

CommonJS、AMD、CMD，也有ES6的Modules

1.commonJS

CommonJS的匯出 :

modul.exports = { lazy: true, test(a, b) { return a + b }, demo(a, b) { return a * b }}

CommonJS的匯入：

//CommonJs模組let {test, demo, lazy} = require('moduleA')//等同於let _mA = require('moduleA')let test = _mA.textlet demo = _mA.demolet lazy = _mA.lazy

2.ES6

export指令用於匯出變數/函式/物件：

info.jsexport let name = 'why'export let age = 18export let height = 1.78或let name = 'why'let age = 18let height = 1.78export {name, age, height}或不給功能命名，而且讓匯入者可以自己來命名export default function () { console.log('default function')}注：export default在同一個模組中，不允許同時存在多個

引用:

import myLazy from './info.js'

注引用的步驟：

<script src="info.js" type="module"></script><script src="main.js" type="module"></script>

import {name, age, height} from "./info.js" //引用變數或import * as info from './info.js' //引入所有加別名

引入外部JS檔案

1.定義JS庫

var Velocity = function (string) {  // 這裡是Velocity的具體實現演算法 }

2.匯出JS函式

export { Velocity}

3.匯入JS指令碼

import { Velocity } from '../config/velocity.js'

4.呼叫函式

enter: function (el, done) { Velocity( el,  {opacity: 1, fontSize: '1.4em' },  {duration: 300 } );  Velocity(  el,  { fontSize: '1em' },   { complete: done } ); },

模組化應用例項

案例效果

main.js檔案

main.js:    import Vue from 'vue'    import App from './App'       // 引入路由元件、自定義路由元件    import VueRouter from "vue-router"       import router from "./router"        //使用路由元件    /*如果是直接在html頁面中使用，引入js檔案後，會自動安裝*/    /*在模組工程中使用vue-router，需要通過Vue.use()明確的安裝路由功能。*/    Vue.use(VueRouter)     new Vue({      el: '#app',      template: '<App/>',      /*注意在 ES2015+ 中，在物件中放一個類似 ComponentA 的變數名其實是 ComponentA: ComponentA 的縮寫，和Babel以及webpack有關係*/      components: { App },      router:router    })

App.vue

App.vue:    <template>      <div>        <nav class="top-menu">            <ul>                <li v-for="item in menulist">                    <router-link :to="item.url">{{item.name}}</router-link>                </li>            </ul>        </nav>        <hr>        <div>            <router-view></router-view>        </div>      </div>    </template>    <script>        export default {            name:'app',            data:function(){                return {                    menulist:[                        {name:'首頁',url:'/home'},                        {name:'使用者',url:'/user/18'},                        {name:'產品',url:'/product/20'}                    ]                }            }        }    </script>    <style>    #app {    } .top-menu ul, .top-meun li{list-style:none;}    .top-menu{overflow:hidden;}    .top-menu li{float:left; width:100px;}    </style>

router.js

router.js:    /*import語法是ES6標準規範，使用export指令匯出介面，import指令匯入模組。*/    /*直接寫檔名，則從node_modules下面開始找。*/    import VueRouter from 'vue-router'     /*使用./、../等相對路徑寫法時，按相對路徑來找export出來的內容*/    import Home from "./components/home.vue"    /*路徑中使用@開頭，這時webpack配置的路徑別名。預設配置為src路徑。*/    import User from "@/components/user.vue"    import Product from "@/components/product.vue"    /*如果最終找到的是一個資料夾，則首先看資料夾下是否有package.json。有的話會載入main欄位指向的檔案。沒有的話，找資料夾下的index檔案並載入*/    /*定義註冊3個路由*/    /*匯出建立的VueRouter物件，建立時傳入配置引數*/    export default new VueRouter({        routes:[{path:"/home",component:Home},                /*動態路徑引數，以冒號開頭*/                /*當匹配到一個路由時，引數值會被設定的到this.$route.params中，可以使用this.$route.params.id來取出引數值*/                {path:"/user/:id",component:User},                {path:"/product/:id",component:Product}]    })

home.vue: