这本文章没有任何技术含量,纯粹就是解决单页引入第三发库的问题而写的,如果要理解深刻查看模块加载器祥光资料

@(es5)

一、静态引入

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

二、动态引入

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节点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)
}
})
}

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第三方库模块方式。

javascript 的引入的更多相关文章

  1. JavaScript 基础(一) - JavaScript的引入方式,JavaScript 变量命名规则,JS 的五种基本数据类型,ECMAScript 算数运算符,逻辑运算符

    JavaScript的引入方式 直接编写 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  2. web前端(13)—— 了解JavaScript,JavaScript的引入方式

    从本篇博文开始,将进入web前端方便最关键最重要的部分——javascript,学到后面你就知道它真的太重要了 什么是JavaScript JavaScript一种直译式的脚本语言,是一种动态类型.弱 ...

  3. JavaScript文件引入方式区别

    1.JavaScript文件引入方式 (1)正常引入 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quo ...

  4. 【JavaScript的引入方式】

    javascript:   是基于对象和事件驱动的客户端脚本[组成] Bom:浏览对象模型(与浏览器交互的方法和接口) Dom:文档对象模型(处理网页内容的方法和接口) ecma:核心(描述了js的语 ...

  5. 27 JavaScript的引入&注释&弹窗&变量常量&数据类型及转换&内存&垃圾回收

    JS的引入: 1 内部引入 绑定元素事件如onclick="" 绑定锚点如href="JavaScript:void(0)" script标签引入,注意:如果标 ...

  6. JavaScript js 引入CDN 不生效 注意事项

    [博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708]https ...

  7. React Native:使用 JavaScript 构建原生应用

    [转载] 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生 ...

  8. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  9. web前端教程之javascript创建对象的方法

    今天给大家讲讲javascript基础教程中的javascript面向对象的技术,这一次我们深入的学习一下JavaScrip基于t面向对象之创建对象,关于面向对象的一些术语这里就不给大家介绍了,不了解 ...

随机推荐

  1. 【Hibernate】could not instantiate class.. from tuple] with root cause

    使用hibernate的过程中出现了这个问题,查询语句如下: String hql = "select new GoodsBean(id, name, price, proPic, sale ...

  2. java类型转换小技巧

    mysql 之排序显示行号 select @r := @r+1 as rownum,birth,cardNo from card,(select @r:=0)torder by birth ASC

  3. Python 爬虫 NewCnblogs (爬虫-Django-数据分析)

    需求分析 数据库架构 注册 登录 首页 个人站点 文章+评论 后台 爬虫 数据分析 添加搜索+已上线

  4. Java面试题复习笔记(框架)

    1.什么是框架? 为解决一个开放性问题而设计的具有一定约束性的支撑结构,再次结构上可以根据具体问题扩展,安插更多的组成部分,从而更迅速和方便地构建完整解决问题的方案. 2.MVC模式? 用一种业务逻辑 ...

  5. linuxDNS

    getenforce   查询状态 setenforce 0  临时关闭 永久关闭vim /etc/selinux/configlinux配置文件内容SELINUC=disabled关闭重启系统生效 ...

  6. shell入门(二):()、(())、[]、[[]]、{}

    1.() 命令组. 括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号’;’隔开,最后一个命令可以没有分号,各命令和括号之间不必有空格. ...

  7. java 学习之环境配置

    准备JDK 到Java官网下载jdk即可,网址:http://www.oracle.com/technetwork/java/javase/downloads/index.html. 配置开发环境 鼠 ...

  8. fire workflow总结

    一.Fire WorkFlow核心1.IPersistenceService存储服务.Fire Workflow 缺省情况下使用hibernate 进行数据库存取.如果你的系统不是使用hibernat ...

  9. 使用java的Calendar工具类获取到本月的第一天起始时间和最后一天结束时间。

    1.使用java的Calendar工具类获取到本月的第一天起始时间和最后一天结束时间. package com.fline.aic.utils; import java.text.DateFormat ...

  10. hibernate 保存报错 Hibernate operation: could not get next sequence value;

    错误信息: [2017-09-28 18:51:38,854]-[org.hibernate.util.JDBCExceptionReporter:101] ERROR - Numeric Overf ...