javascript 的引入

這本文章沒有任何技術含量，純粹就是解決單頁引入第三發庫的問題而寫的，若是要理解深入查看模塊加載器祥光資料。

@(es5)

[toc]

1、靜態引入

1. html標籤script引入

2. esm 中import ModuleName from 'module/path'

3. commonjs 中 const ModuleName = reuquire(module/path)

4. AMD

年代久遠，價值在於jquery源碼採用模塊是AMD，你要學習jquery設計模式，必先學習AMD

require(['module1/path'], function (module1) {
	module.someMethod()
})

5. CMD

徹底忘記是什麼，如今就只知道到它一個特色，就近依賴（相似動態加載）

6. webpack .externals

構建引入（其餘構建工具暫不清楚），這個根據webapck版本設置，由於webpack每一個版本都有調整，參考地址 https://www.webpackjs.com/configuration/externals/#externals

2、動態引入

1. import()

https://www.webpackjs.com/guides/lazy-loading/

import('module1/path').then(res => {
	// todo
	// 若是是esm，res.default 是引入模塊地址
	// 若是是commonjs, res 是引用模塊地址
})

// 打包成chunk 模塊
import(/*webpackChunkName Module1 */, 'module1/path').then((res) => {
	// todo
})

2. require.ensure() （已經不推薦使用了）

**注意：**這不是commonjs規範，這是 webpack中module 知識點

require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)

示例：

const modulePathObj = {
	module1: 'module1/path'
}
const modulePathAry = Object.keys(modulePathObj).map(item => modulePathObj[item])
require.ensure(modulePathAry, function(require) {
	const module1 = require(modulePathObj.module1)
})

阮一峯 commonjs require基礎參考

3. DOM節點script的onload事件

export const LoadScript = (url) => {
	return new Promise((resolve, reject) => {
		try {
			const script = document.createElment('script')
			script.onload = () => {
				resolve()
			}
			script.src = url
			document.querySelect('head').appendChild(script)
		} cathc (err)  {
			reject(err)
		}
	})
}

4. jsonp

一般聽到是解決跨域（但在如今跨域的解決方案基本上是nginx）。jsonp的機制不就是返回js的callBack。

百度地圖在es6中就是這麼引入（我目前就遇到這個）

export const loadBMap = function () {
    const AK = '百度ak值'
    const url = 'https://api.map.baidu.com/api?v=2.0&ak=' + AK + '&s=1&callback=onBMapCallback'
    return new Promise((resolve, reject) => {
      // 若是已加載直接返回
      if (typeof BMap !== 'undefined') return resolve(BMap)
      // 百度地圖異步加載回調處理
      window.onBMapCallback = function () { resolve(BMap) }
      // 插入script腳本
      let scriptNode = document.createElement('script')
      scriptNode.setAttribute('type', 'text/javascript')
      scriptNode.setAttribute('src', url)
      document.body.appendChild(scriptNode)
    })
  }
}

問題: 在 es6 引入百度地圖，引入某個api的類，能夠ak的值不存在問題的（也就是，jsopn的對應的參數不存在）？

解決方案：在入口文件添加一個 script 標籤，以下：

<script src="https://api.map.baidu.com/api?v=2.0&ak=百度ak值"><script>

不用擔憂 BMap 引入問題，由於BMap 是全變量，只需 loadBMap 中判斷 BMap 是否存在，若是存在就不執行loadScript。

總結

js引入不成功，上面是10種方式中確定有一種能解決的，我目前是沒有遇到不成功的，就算是seajs，無非define第三方庫模塊方式。