CDN引入库

前言

如下3种可被浏览器使用
- 基于UMD规范编译的(常规版本)
  - 会暴露全局方法
  - 使用方法
```
<script src="xxx"></script>
```
- 基于IIEFs编译的 (global版本)
  - 会暴露全局变量
  - 使用方法
```
<script src="xxx"></script>
```
基于ESM编译的(browser版本) html <script type="module" src=""></script>
如下两种不能被浏览器使用
- 基于CommonJS规范编译的(npm cjs版本)
  - 只能用于服务端Node中
- 基于ESM编译的(npm ejs版本)
  - 需要npm install 然后项目内 import
注意
- 如果是自己的网站，可以先访问网址下载下来，再放到本地静态资源里引用
- 如何找到全局方法/全局变量使用？
  - 在browser版本的第一行，找到下面这一段，看最后可确定全局方法
```
!function(t,e){"object"==typeof exports
&&"undefined"!=typeof module?
module.exports=e():"function"==typeof define
&&define.amd?define(e):(t=t||self).全局方法
```
  - 在global版本的开头，找到var后面的声明的，可确定全局变量

来源

最好先在npm搜索到，再去找CDN版本

可搜索的网站
- 【国内bootcdn】不推荐 BootCDN - 免费 CDN 加速服务
- 【国外cdnjs】很推荐(很全面好找，但速度不太够？) cdnjs - free and open source CDN
- 可以搜索，貌似最终CDN是从下面的域名获取
```
https://cdnjs.cloudflare.com
```
不能搜索
- 需要自己按照如下规则访问url
- unpkg(较推荐)
```
https://unpkg.com/:package@:version/:file
```
- jsdelivr 很推荐(速度快，但不太好找)
```
https://cdn.jsdelivr.net/npm/:package@:version/:file
```
  - 这个非常快，因为国内外采用了不同的CDN线路
    - 国外用 CloudFlare 和 Fastly
    - 国内用 Quantil

vue(例子)

先找到最新版
- :package参数选择 vue
- :version参数选择 next(表示最新版)
```
https://cdn.jsdelivr.net/npm/vue@next
```
访问后，得到内容第三行如下:
```
Original file: /npm/vue@3.2.22/dist/vue.global.js
```
- 表示为【开发版】(627KB)
对于此全局变量开发版，还有如下三种选择:
- 【开发压缩版】vue.global.min.js (162KB)
```
https://cdn.jsdelivr.net/npm/vue@3.2.22/dist/vue.global.min.js
```
- 【生产版】vue.global.prod.js(126KB)
```
https://cdn.jsdelivr.net/npm/vue@3.2.22/dist/vue.global.prod.js
```
- 【生产压缩版】vue.global.prod.min.js(126KB)
```
https://cdn.jsdelivr.net/npm/vue@3.2.22/dist/vue.global.prod.min.js
```
  - 其实这个版本导向的还是生产版，二者等价(所以大小相等)
总结
- 只需要最大的开发版和最小的生产版即可
使用
- 所有方法都挂载在Vue对象上面
- 只要Vue.就能用
  - Vue.createApp()
  - Vue.onMounted()
  - Vue.ref()
  - Vue.computed()
  - Vue.toRaw()

vuex

先找最新版

https://cdn.jsdelivr.net/npm/vuex@next

等价于访问如下4.0.2开发版本(45KB)

https://cdn.jsdelivr.net/npm/vuex@4.0.2/dist/vuex.global.js

再找生产版(15KB)

https://cdn.jsdelivr.net/npm/vuex@4.0.2/dist/vuex.global.prod.js

使用
- 所有方法都挂载在Vuex对象上面
- 只要Vuex.就能用，比如
  - new Vuex.Store({})
    - 创建对象赋值vueStore变量，最终给Vue使用
  - Vuex.useStore()
    - 返回store变量
      - 可以获取全局状态集.state
      - 可以调用全局方法.commit('方法名',唯一参数)

vue-router

先找最新版(151KB)

https://cdn.jsdelivr.net/npm/vue-router@next

等价于访问如下4.0.12开发版本

https://cdn.jsdelivr.net/npm/vue-router@4.0.12/dist/vue-router.global.js

找生产版(23KB)

https://cdn.jsdelivr.net/npm/vue-router@4.0.12/dist/vue-router.global.prod.js

使用
- 所有方法都挂载在 VueRouter 对象上面
- 只要VueRouter.就能用，比如
  - VueRouter.createRouter({})
  - VueRouter.createWebHashHistory()
  - VueRouter.useRoute()
    - route用来获取参数.params.xxx
  - VueRouter.useRouter()
    - router用来推进路由.push

vue-i18n

先找最新版(186KB)

https://cdn.jsdelivr.net/npm/vue-i18n@next

等价于访问如下9.1.9开发版本

https://cdn.jsdelivr.net/npm/vue-i18n@9.1.9/dist/vue-i18n.global.js

找生产版(54KB)

https://cdn.jsdelivr.net/npm/vue-i18n@9.1.9/dist/vue-i18n.global.min.js

大型库

jquery库(生产版，92KB)
```
https://cdn.jsdelivr.net/npm/jquery@1.9.1/jquery.min.js
```
```
$.xxx;
```
会附带$.ajax方法，不用额外引入ajax

组件库

swiper库(实现: 触摸滑动)

包括js和css
- 对于css要用如下方式引用
```
<link href="" rel="stylesheet" />
```

https://cdn.jsdelivr.net/npm/swiper@6.6.1/swiper-bundle.min.js

https://cdn.jsdelivr.net/npm/swiper@6.6.1/swiper-bundle.min.css

var swiper = new Swiper(".swiper-container", swiperConfig);

video.js库(实现: 视频播放统一)

包括 js 和 css (571KB + 40KB)
- 对于css要用如下方式引用
```
<link href="" rel="stylesheet" />
```

https://cdn.jsdelivr.net/npm/video.js@7.17.0/dist/video.min.js

https://cdn.jsdelivr.net/npm/video.js@7.17.0/dist/video-js.min.css

var player = videojs('sheet_media', playOptions, function onPlayerReady() {
    if( player.readyState() >= 0 ){
        player.on('事件名',function(){

        })
    })
})

这里sheet_media是元素id

moments(实现:日期处理)

moments库(生产版，59KB)

完备日期能力

https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js

moment(xxx);

moments-locale库(生产版，73KB)
- 叠加多语言能力
```
https://momentjs.com/downloads/moment-with-locales.min.js
```
这个要去官网下载，不能用https://cdn.jsdelivr.net/npm/moment@2.29.1/moment-with-locales.min.js下载，因为根本没有提供
```
moment(xxx);
```
moment-timezone(生产版，7KB)
- 简单功能+时区转换
```
https://cdn.jsdelivr.net/npm/moment-timezone@0.5.33/moment-timezone.min.js
```
这里差点找不到，默认https://cdn.jsdelivr.net/npm/moment-timezone会访问到index页面，啥都没，需要自己指定版本和文件名
```
moment(xxx);
```

迷你库

qs库(实现: url参数转化)

uuid库(实现: 随机字符串生成)

<script src="https://cdn.bootcdn.net/ajax/libs/uuid/8.3.2/uuid.min.js"></script>

uuid.v1();
uuid.v4();

如果只用到了36位的v4函数，可以只用下面的版本

<script src="https://cdn.bootcdn.net/ajax/libs/uuid/8.3.2/uuidv4.min.js"></script>

uuidv4();

.js库

<script src=""></script>

.js库

<script src=""></script>

lodash

简介

是一个著名的js原生库，提供了数组，数字，对象，字符串等方法，不需要引入其他第三方依赖。使用了一个简单的 _ 符号(像Jquery的 $ )

类似的还有Underscore.js和Lazy.js

兼容性

chrome 43往上 Firefox 38往上 IE 6-11 MS Edge Safari 5往上几乎大部分浏览器

安装

浏览器

<script src="lodash.js"></script>

npm install -S lodash

nodejs

var _ = require("lodash");

使用案例

循环

console.log("------- javascript -------");
//js原生
for (var i = 0; i < 5; i++) {
  console.log(i);
}

console.log("------- lodash -------");
//ladash的times方法
_.times(5, function (a) {
  console.log(a);
});

深度克隆

//js原生
JSON.parse(JSON.stringify(objectToClone));
//仅在对象内部没有方法时才行

//ladash
var objA = {
  name: "戈德斯文",
};
var objB = _.cloneDeep(objA);
console.log(objA);
console.log(objB);
console.log(objA === objB);

随机值

//js原生
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
console.log(getRandomNumber(15, 20));

//ladash
console.log(_.random(15, 20));

扩展对象

//js原生
Object.prototype.extend = function (obj) {
  for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
      //判断被扩展的对象有没有某个属性，
      this[i] = obj[i];
    }
  }
};

var objA = { name: "戈德斯文", car: "宝马" };
var objB = { name: "柴硕", loveEat: true };

objA.extend(objB);
console.log(objA);

//lodash
console.log(_.assign(objA, objB));

Keyboard shortcuts