javascript 的引入
这本文章没有任何技术含量,纯粹就是解决单页引入第三发库的问题而写的,如果要理解深刻查看模块加载器祥光资料。
@(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)
})
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
第三方库模块方式。
javascript 的引入的更多相关文章
- JavaScript 基础(一) - JavaScript的引入方式,JavaScript 变量命名规则,JS 的五种基本数据类型,ECMAScript 算数运算符,逻辑运算符
JavaScript的引入方式 直接编写 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- web前端(13)—— 了解JavaScript,JavaScript的引入方式
从本篇博文开始,将进入web前端方便最关键最重要的部分——javascript,学到后面你就知道它真的太重要了 什么是JavaScript JavaScript一种直译式的脚本语言,是一种动态类型.弱 ...
- JavaScript文件引入方式区别
1.JavaScript文件引入方式 (1)正常引入 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quo ...
- 【JavaScript的引入方式】
javascript: 是基于对象和事件驱动的客户端脚本[组成] Bom:浏览对象模型(与浏览器交互的方法和接口) Dom:文档对象模型(处理网页内容的方法和接口) ecma:核心(描述了js的语 ...
- 27 JavaScript的引入&注释&弹窗&变量常量&数据类型及转换&内存&垃圾回收
JS的引入: 1 内部引入 绑定元素事件如onclick="" 绑定锚点如href="JavaScript:void(0)" script标签引入,注意:如果标 ...
- JavaScript js 引入CDN 不生效 注意事项
[博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708]https ...
- React Native:使用 JavaScript 构建原生应用
[转载] 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- web前端教程之javascript创建对象的方法
今天给大家讲讲javascript基础教程中的javascript面向对象的技术,这一次我们深入的学习一下JavaScrip基于t面向对象之创建对象,关于面向对象的一些术语这里就不给大家介绍了,不了解 ...
随机推荐
- 【Hibernate】could not instantiate class.. from tuple] with root cause
使用hibernate的过程中出现了这个问题,查询语句如下: String hql = "select new GoodsBean(id, name, price, proPic, sale ...
- java类型转换小技巧
mysql 之排序显示行号 select @r := @r+1 as rownum,birth,cardNo from card,(select @r:=0)torder by birth ASC
- Python 爬虫 NewCnblogs (爬虫-Django-数据分析)
需求分析 数据库架构 注册 登录 首页 个人站点 文章+评论 后台 爬虫 数据分析 添加搜索+已上线
- Java面试题复习笔记(框架)
1.什么是框架? 为解决一个开放性问题而设计的具有一定约束性的支撑结构,再次结构上可以根据具体问题扩展,安插更多的组成部分,从而更迅速和方便地构建完整解决问题的方案. 2.MVC模式? 用一种业务逻辑 ...
- linuxDNS
getenforce 查询状态 setenforce 0 临时关闭 永久关闭vim /etc/selinux/configlinux配置文件内容SELINUC=disabled关闭重启系统生效 ...
- shell入门(二):()、(())、[]、[[]]、{}
1.() 命令组. 括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号’;’隔开,最后一个命令可以没有分号,各命令和括号之间不必有空格. ...
- java 学习之环境配置
准备JDK 到Java官网下载jdk即可,网址:http://www.oracle.com/technetwork/java/javase/downloads/index.html. 配置开发环境 鼠 ...
- fire workflow总结
一.Fire WorkFlow核心1.IPersistenceService存储服务.Fire Workflow 缺省情况下使用hibernate 进行数据库存取.如果你的系统不是使用hibernat ...
- 使用java的Calendar工具类获取到本月的第一天起始时间和最后一天结束时间。
1.使用java的Calendar工具类获取到本月的第一天起始时间和最后一天结束时间. package com.fline.aic.utils; import java.text.DateFormat ...
- hibernate 保存报错 Hibernate operation: could not get next sequence value;
错误信息: [2017-09-28 18:51:38,854]-[org.hibernate.util.JDBCExceptionReporter:101] ERROR - Numeric Overf ...