码迷,mamicode.com
首页 > 编程语言 > 详细

javascript 的引入

时间:2019-01-08 12:28:38      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:静态   func   html标签   tee   异步   总结   htm   amp   typeof   

目录

@(es6)

静态引入

  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()
})
  1. CMD,完全忘记是什么,现在就只知道到它,就近依赖(类似动态加载)
  2. webpack .externals 构建引入(其他构建工具暂不清楚),这个根据webapck版本设置,因为webpack每个版本都有调整,参考地址 https://www.webpackjs.com/configuration/externals/#externals

动态引入

  1. import()
import(‘module1/path‘).then(res => {
    // todo
})

// 打包成chunk 模块
import(/*webpackChunkName Module1 */, ‘module1/path‘).then((res) => {
    // todo
})
  1. 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基础参考

  1. DOM节点scriptonload事件
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)
        }
    })
}
  1. 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 的引入

标签:静态   func   html标签   tee   异步   总结   htm   amp   typeof   

原文地址:https://www.cnblogs.com/liangcheng11/p/10237826.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!