如何改造现有文件为 CMD 模块

如何改造现有文件为 CMD 模块

经过一段考察,我们终于要在项目中引入模块机制和 Sea.js 了,那么如何将现有的文件改造成 CMD 模块就成了重要的问题。下面针对一些典型场景来说明包装的方式。

首先还是请大家详细了解下 CMD 模块定义规范,只要洞悉事物的定义和本质,一切问题可迎刃而解。

改造主流模块

这里指的是 jQuery、Moment、Backbone、underscore 等业界主流模块,这些模块一般都有对 AMD 和 CommonJS 的支持代码,例如 jQuery 源文件的最后几行:

if ( typeof module === "object" && module && typeof module.exports === "object" ) {    module.exports = jQuery;
} else {    window.jQuery = window.$ = jQuery;    if ( typeof define === "function" && define.amd ) {define( "jquery", [], function () { return jQuery; } );}
}

还有 Backbone 里:

var Backbone;if (typeof exports !== 'undefined') {Backbone = exports;
} else {Backbone = root.Backbone = {};
}

对于有这些兼容代码的,只需要去掉 define.amd 的支持,或是直接包装上 define 就可以了。

define(function(require, exports, module) {  // code here ...});

如果没有模块化的兼容代码,有时候需要手动引入依赖,以及暴露对应的接口。

define(function(require, exports, module) {  var $ = require('$');  // code here ...module.exports = Placeholders;
});

可以参考 cmdjs/gallery 里的 Gruntfile 对这些主流模块的代码替换方式。

现有的 JS 文件

对于一些现有的普通 JS 文件,相对简单的多,参考 CMD 的书写规范,把那些暴露到全局命名空间的接口用 CMD 的方式进行改造就可以了。

比如现有文件 util.js 。

window.util = window.util || {};util.addClass = function() {  window.css();
};util.queryString = function() {};

改为:

define(function(require, exports, module) {  // 引入依赖var css = require('css');  util.addClass = function() {css();};  util.queryString = function() {};  // 暴露对应接口module.exports = util;
});

这里不啰嗦,就是基本的 CMD 书写规范。实际的改造过程中,情况可以比上面的例子要复杂一些,具体情况具体解决就行。

改造 jQuery 插件

这也是一个经常遇到的问题,我们推荐以下的包装方式:

// jquery-plugin-abcdefine(function(require, exports, module) {  var $ = require('$');  // 插件的代码$.fn.abc = function() {};
});

这样的改造方式实际上是强化了原有的 $ 对象(而不是重新包装出一个新的 $),在实际调用时,可以用下面的方式:

seajs.use(['$', 'jquery-plugin-abc'], function($) {  // $ 有了 jquery-plugin-abc 所提供的插件功能$.abc();
});

更多 jQuery 插件的包装,可以参考 cmdjs/jquery 里的做法。

工具

除了手动的方式修改代码外,我们推荐使用 Grunt 来进行统一的改造,官方也通过 Grunt 改造了很多主流模块和 jQuery 插件,具体的操作手册见 引入 CMD 模块指南 。你可以在 cmdjs/gallery 和 cmdjs/jquery 中找到具体的 Gruntfile ,从而借鉴到您的项目中去。所有打包好的模块可以在 spmjs.org 中找到。

小结

上面提供的是原有代码包装为 CMD 书写规范 的方法,在具体上线前,可能还需要打包为具名模块(包含 ID 的模块)。关于构建方面的进一步知识可以参考 构建工具 。

这里提到的包装方式都比较典型和简单,具体的实践可能千差万别。您在项目中有什么探索、实践和问题,欢迎来这里分享和提问。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/616281.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript删除数组中指定元素的5种方法

文章目录 目录 文章目录 前言 一、数组是什么? 二、讲解数组 总结 前言 在JavaScript开发中,处理数组是一项非常常见的任务。有时候我们需要从数组中删除特定的元素,以便对数组进行进一步操作或者满足特定的需求。幸运的是,JavaS…

Unity中URP下实现能量罩(外发光)

文章目录 前言一、实现菲涅尔效果1、求 N ⃗ \vec{N} N 2、求 V ⃗ \vec{V} V 3、得出菲涅尔效果4、得出菲涅尔相反效果5、增加菲涅尔颜色二、能量罩 交接处高亮 和 外发光效果结合1、修改混合模式,使能量罩透明2、限制 0 ≤ H i g h L i g h t C o l o r ≤ 1 0\leq HighL…

【字符串】贝贝的车牌问题(UPC)

题目描述 广州市车管所为每一辆入户的汽车都发放一块车牌,车牌的号码由六个字符组成,如A99452、B88888等,这个字符串从左边数起的第一个字符为大写英文字母,如A、B、C等,表示这辆车是属于广州市区内的汽车还是郊区的汽…

Swoft - Bean

一、Bean 在 Swoft 中,一个 Bean 就是一个类的一个对象实例。 它(Bean)是通过容器来存放和管理整个生命周期的。 最直观的感受就是省去了频繁new的过程,节省了资源的开销。 二、Bean的使用 1、创建Bean 在【gateway/app/Http/Controller】下新建一个名为…

7.vue学习笔记(模板引用+组件组成+组件嵌套关系)

文章目录 1.模板引用2.组件组成3.组件嵌套关系3.1.App.vue3.1.1.Header.vue3.1.2.Main.vue3.1.3.Aside.vue 1.模板引用 在Vue直接读取DOM 虽然Vue的声明性渲染模型为你抽象了大部分对DOM的直接操作(事件,内容,属性), …

持久双向通信网络协议-WebSocket-入门案例实现demo

1 介绍 WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接, 并进行双向数据传输。 HTTP协议和WebSocket协议对比: HTTP是短连接&#xff0…

Edge 浏览器设置自动刷新

要在 Microsoft Edge 浏览器中设置自动刷新,您可以使用第三方扩展来实现这一功能。目前,Edge 浏览器本身并没有内置的自动刷新功能。以下是启用自动刷新的一般步骤: 打开 Microsoft Edge 扩展商店:首先,在 Edge 浏览器…

【MATLAB】小波_LSTM神经网络时序预测算法

有意向获取代码,请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 小波-LSTM神经网络时序预测算法是一种结合了小波变换和长短期记忆神经网络(LSTM)的时间序列预测方法。 小波变换是一种信号处理方法,能够将信号分解为…

Postman应用打开超级慢解决办法

电脑系统环境变量增加 POSTMAN_DISABLE_GPUtrue 电脑系统环境变量增加 POSTMAN_DISABLE_GPUtrue 电脑系统环境变量增加 POSTMAN_DISABLE_GPUtrue 电脑系统环境变量增加 POSTMAN_DISABLE_GPUtrue 电脑系统环境变量增加 POSTMAN_DISABLE_GPUtrue 电脑系统环境变量增加 POSTMAN_DI…

<蓝桥杯软件赛>零基础备赛20周--第14周--BFS

报名明年4月蓝桥杯软件赛的同学们,如果你是大一零基础,目前懵懂中,不知该怎么办,可以看看本博客系列:备赛20周合集 20周的完整安排请点击:20周计划 每周发1个博客,共20周。 在QQ群上交流答疑&am…

发布_Windows系统服务器发布Java程序

windows服务器发布Java程序 一般来说再Windows服务器上发布就直接使用cmd,然后使用javaw -jar ****.jar但是使用这种方法有两种环境同时再此服务器上时(生产环境和测试环境),直接再任务管理器中杀死javaw进程就会混乱&#xff0c…

【嵌入式——C++】基础知识

【嵌入式——C】基础知识 变量作用域局部作用域全局作用域块作用域类作用域 常量标识符命名规则数据的输入运算符算术运算符赋值运算符比较运算符逻辑运算符 变量作用域 局部作用域 在函数内部声明的变量具有局部作用域,它们只能在函数内部访问。局部变量在函数每…

2085. 统计出现过一次的公共字符串

提示 给你两个字符串数组 words1 和 words2 ,请你返回在两个字符串数组中 都恰好出现一次 的字符串的数目。 示例 1: 输入:words1 ["leetcode","is","amazing","as","is"], words2 [&qu…

NowinAndroid—2024 Android现代开发全功能应用

NowinAndroid—2024 Android现代开发全功能应用 现代Android开发全功能示例应用Now-in-Android,它是用Kotlin和Jetpack Compose开发的,功能非常强大。这个应用遵循了安卓设计和开发的最佳方法,旨在给开发者提供实用的参考资料。无论你是新手…

2024年甘肃省职业院校技能大赛信息安全管理与评估 样题一 模块一

竞赛需要完成三个阶段的任务,分别完成三个模块,总分共计 1000分。三个模块内容和分值分别是: 1.第一阶段:模块一 网络平台搭建与设备安全防护(180 分钟,300 分)。 2.第二阶段:模块二…

002 Golang-channel-practice

第二题: 创建一个生产器和接收器,再建立一个无缓冲的channel。生产器负责把数据放进管道里,接收器负责把管道里面的数据打印出来。这里我们开5个协程把数据打印出来。 直接上代码! package mainimport ("fmt" )func …

个人猜测:关于《矩阵论》中的QR分解为什么用Q来表示正交矩阵(orthogonal matrix )

为什么QR分解用Q来表示正交矩阵(orthogonal matrix )? 搜过Google,问过ChatGPT, 什么说是约定俗成,什么说是历史原因,都没有一个合理的解释。 都没有准确的答案, 下面这两个链接…

“人工智能”领域的高含金量证书接受报名!

由国家工信部权威认证的人工智能证书是跨入人工智能行业的敲门砖,随着人工智能技术的发展越来越成熟,相关的从业人员也会剧增,证书的考取难度也会变高。如果已经从事或者准备从事人工智能行业的人员,对于考证宜早不宜迟&#xff0…

作业--day43

使用手动连接,将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中,在自定义的槽函数中调用关闭函数,将登录按钮使用qt5版本的连接到自定义的槽函数中,在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c…

windows系统Mysql备份脚本

一.背景 用的windows server 2019服务器,mysql8.0.34,还是应该每天备份一下。以前做了很多次,主要是带了2个徒弟,还是要写出来。 二.备份脚本 chcp 936 set date_tmp%date:~0,10% set datetime%date_tmp:/%%time:~0,2%%time:~3,…