изучить UMD
представлять
этоскладзаписал кое-что оjavascript UMDспецификация модуляdemo, учитесь у меняUMDСпецификация очень помогла, и, надеюсь, поможет и вам.
рассмотрение
Я написал несколько статей оjavascriptБлог модуля, ссылка следующая:
- Оглядываясь назад на модульное программирование JS
- Оглядываясь назад на AMD модульного программирования JS
- Магия синхронизации для sea.js
Подготовьтесь к подведению итогов в ближайшие несколько днейjavascriptТочка знаний модуля, поэтому я построил этоGit-репозиторий, если это может вам помочь, пожалуйста, нажмитеstarБольшое спасибо!
Этот блог в основном рассказывает о себеUMDНемного познания и мышления, от реализации простогоUMDмодуль, а затем реализовать зависимыйUMDмодуль, весь процесс углубил мое пониманиеUMDпонимание модулей.
Что такое УМД
так называемыйUMD (Universal Module Definition), этоjavascriptОбщая спецификация определения модуля, чтобы ваши модули можно было использовать вjavascriptфункционировать во всех операционных средах.
Реализация простого модуля UMD
реализоватьUMDмодуль, необходимо учитывать существующий мэйнстримjavascriptспецификация модуля, напримерCommonJS, AMD, CMDЖдать. Так как же мы можем соответствовать этим требованиям одновременно?
Первое, о чем следует подумать, это то, что модуль в конечном итоге экспортирует объект, функцию или переменную.
И разные спецификации модуля, определение этой части экспорта модуля совершенно другое.
Поэтому нам нужен механизм перехода.
Во-первых, нам нуженfactory, то есть фабричная функция, отвечающая только за возврат того, что нужно экспортировать (объекты, функции, переменные и т.д.).
Начнем с экспорта простого объекта.
function factory() {
return {
name: '我是一个umd模块'
}
}
Глобальные свойства монтирования объекта
Допустим, не рассматриватьCommonJS, AMD, CMDа как написать этот модуль только как свойство глобального объекта?
(function(root, factory) {
console.log('没有模块环境，直接挂载在全局对象上')
root.umdModule = factory();
}(this, function() {
return {
name: '我是一个umd模块'
}
}))
мы кладемfactoryНапишите это как анонимную функцию, используяIIFE(немедленно выполнить функцию) для выполнения фабричной функции возвращаемый объект назначаетсяroot.umdModule,здесьrootэто указать на глобальный объектthis, значение которого может бытьwindowилиglobal, в зависимости от операционной среды.
ОткрытьСсылка на страницу эффектов(Если вы хотите увидеть исходный код, нажмитеGit-репозиторий),НаблюдаемыйNetworkПорядок загрузки файлов, вы можете видеть, что принцип заключается в том, чтобы полагаться в первую очередь.
Шаг вперед, совместимость со спецификациями AMD
быть совместимымAMDЭто также просто, судите, удовлетворена ли средаAMDТехнические характеристики. Если устраивает, используйтеrequire.jsкоторый предоставилdefineМодуль определения функций.
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// 如果环境中有define函数，并且define函数具备amd属性，则可以判断当前环境满足AMD规范
console.log('是AMD模块规范，如require.js')
define(factory)
} else {
console.log('没有模块环境，直接挂载在全局对象上')
root.umdModule = factory();
}
}(this, function() {
return {
name: '我是一个umd模块'
}
}))
ОткрытьСсылка на страницу эффектов, вы можете видеть, что принцип заключается в том, что вызывающий модуль загружается первым, а зависимые модули загружаются позже.
Взлет, прямой УМД
Точно так же определите, удовлетворена ли текущая средаCommonJSилиCMDСпецификации, соответственно, используют соответствующий метод определения модуля для определения модуля.
(function(root, factory) {
if (typeof module === 'object' && typeof module.exports === 'object') {
console.log('是commonjs模块规范，nodejs环境')
module.exports = factory();
} else if (typeof define === 'function' && define.amd) {
console.log('是AMD模块规范，如require.js')
define(factory)
} else if (typeof define === 'function' && define.cmd) {
console.log('是CMD模块规范，如sea.js')
define(function(require, exports, module) {
module.exports = factory()
})
} else {
console.log('没有模块环境，直接挂载在全局对象上')
root.umdModule = factory();
}
}(this, function() {
return {
name: '我是一个umd模块'
}
}))
Наконец, используйтеrequire.js, sea.js, nodejsИли глобальные свойства монтирования объектов и т. д. можно использовать идеальноumd-module.jsЭтот модуль обеспечивает большую унификацию.
датьsea.jsпередачаUMDссылка на страницу эффектов,sea.js вызывает модуль UMD
а такжеnodejsпередачаUMDМодуль должен выполнятьсяnodeЗаказ,
node umd-simple-used-by-nodejs
Эффект следующий:
Модули UMD с зависимостями
Конечно, мы не можем останавливаться на достигнутом, вызываются модули и, конечно же, вызываются другие модули. Поэтому нам также необходимо реализовать зависимыйUMDмодуль для проверкиUMDВыполнимость спецификации.
Глобальные свойства монтирования объекта
Это просто, вhtmlПоложитесь на ваш модуль модуль может быть введен раньше.umd-module-dependedа такжеumd-moduleобеUMDмодулей, последний зависит от первого.
<!DOCTYPE html>
<html>
<head>
<title>Test UMD</title>
<!-- 依赖放前面 -->
<script src="assets/js/umd-dep/umd-module-depended.js"></script>
<script src="assets/js/umd-dep/umd-module.js"></script>
<script src="assets/js/umd-dep/umd-global.js"></script>
</head>
<body>
<h1>测试UMD模块</h1>
<h2></h2>
<p id="content"></p>
<p id="content2"></p>
</body>
</html>
нажмите наСсылка на страницу эффектов, видеть яснее!
Совместим со спецификациями AMD.
Начнем с входного файлаumd-main-requirejs.js, определите путь к модулю для легкого вызова.
require.config({
baseUrl: "./assets/js/umd-dep/",
paths: {
umd: "umd-module",
depModule: "umd-module-depended"
}
});
Зависимые модулиumd-module-depended, нужно только просто реализоватьUMDСпецификации могут быть.
в то время как звонящийumd-module, вам нужно сделать некоторую обработку. согласно сrequire.jsспецификация может бытьdefineПри указании зависимого модуляdepModule, в то время как анонимная фабричная функция должна получить зависимый модуль от параметраdepModule.
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
console.log('是AMD模块规范，如require.js')
define(['depModule'], factory)
} else {
console.log('没有模块环境，直接挂载在全局对象上')
root.umdModule = factory(root.depModule);
}
}(this, function(depModule) {
console.log('我调用了依赖模块', depModule)
// ...省略了一些代码，去代码仓库看吧
return {
name: '我自己是一个umd模块'
}
}))
ОткрытьСсылка на страницу эффектов, видеть яснее!
UMD зависит от написания
Точно так же различные спецификации требуют, чтобы вы писали зависимости модуля так, как вы хотите их написать.
(function(root, factory) {
if (typeof module === 'object' && typeof module.exports === 'object') {
console.log('是commonjs模块规范，nodejs环境')
var depModule = require('./umd-module-depended')
module.exports = factory(depModule);
} else if (typeof define === 'function' && define.amd) {
console.log('是AMD模块规范，如require.js')
define(['depModule'], factory)
} else if (typeof define === 'function' && define.cmd) {
console.log('是CMD模块规范，如sea.js')
define(function(require, exports, module) {
var depModule = require('depModule')
module.exports = factory(depModule)
})
} else {
console.log('没有模块环境，直接挂载在全局对象上')
root.umdModule = factory(root.depModule);
}
}(this, function(depModule) {
console.log('我调用了依赖模块', depModule)
// ...省略了一些代码，去代码仓库看吧
return {
name: '我自己是一个umd模块'
}
}))
датьsea.jsназываетсяпример ссылки.
а такжеnodejsВызов также тестируется через командную строку,
node umd-dep-used-by-nodejs
Эффект следующий:
Суммировать
Вышеприведенное реализует простойUMDмодуль, тоже проверенныйUMDВыполнимость при наличии зависимостей между модулями. Хотя в этой статье в качестве примера используется простой экспорт объекта, нам достаточно углубиться в него.UMDСтандартная отправная точка, давай!
Наконец, будь дерзкимstar,зажги меня
Отсканируйте QR-код апплета ниже или выполните поискTusi博客, прочитайте последние статьи сейчас!