javascript 的引入
Posted liangcheng11
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 的引入相关的知识,希望对你有一定的参考价值。
目录
@(es6)
静态引入
- html标签script引入
- esm 中
import ModuleName from ‘module/path‘
- commonjs 中
const ModuleName = reuquire(module/path)
- AMD,年代久远,价值在于jquery源码采用模块是AMD,你要学习jquery设计模式,必先学习AMD
require([‘module1/path‘], function (module1) {
module.someMethod()
})
- CMD,完全忘记是什么,现在就只知道到它,就近依赖(类似动态加载)
webpack .externals
构建引入(其他构建工具暂不清楚),这个根据webapck版本设置,因为webpack每个版本都有调整,参考地址 https://www.webpackjs.com/configuration/externals/#externals
动态引入
import()
import(‘module1/path‘).then(res => {
// todo
})
// 打包成chunk 模块
import(/*webpackChunkName Module1 */, ‘module1/path‘).then((res) => {
// todo
})
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)
})
- 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)
}
})
}
- 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)
})
}
}
总结
js引入不成功,上面是10种方式中肯定有一种能解决的,我目前是没有遇到不成功的,就算是seajs,无非define
第三方库模块方式。
以上是关于javascript 的引入的主要内容,如果未能解决你的问题,请参考以下文章
VSCode自定义代码片段12——JavaScript的Promise对象