Joomla JavaScript 依赖管理
在 Joomla! 中,JavaScript 的使用在过去几年中一直在增加。现在,拥有一个适当的 JavaScript 依赖处理机制来维护其 JavaScript 代码已成为一项必需的需求。
当前方法
目前,在 Joomla! 中,JavaScript 文件是通过服务器端 PHP 函数加载的,这些函数将 JavaScript 文件名包含到页面主体或标题中。以下展示了这些 PHP 脚本的特性。
例如 JHtml(‘Load Script 1’)
这要求正确排序脚本,以及手动处理脚本冲突,这需要花费时间并且变得困难。
挑战
首先,这种加载 JavaScript 的方式与需要这些脚本的 PHP 代码段紧密耦合。这种方法也限制了 JavaScript 的模块化,因为手动将逻辑分离成不同的函数以保持执行顺序是非常困难的。
此外,JavaScript 本身存在固有的问题,其中这些脚本需要使功能在全局范围内可用,这需要创建全局 JavaScript 对象,这反过来又引入了可维护性问题,导致在编写重量级的插件或组件时,JavaScript 的生产力迅速下降。
遇到的主要问题之一是 JavaScript 全局变量的意外更新引起的冲突。特别是,我在从 Joomla! 中删除 MooTools 依赖项并将其替换为 JQuery 时遇到了这个问题,因为它是通过 CMS 高度传播的,而且缺乏关注点的分离。
依赖管理的未来
需要做出的具有挑战性的决定之一是将 Joomla! 中的 JavaScript 与用 PHP 编写的服务器端逻辑分离。就依赖管理而言,这包括删除与 PHP 脚本加载的 JavaScript 依赖项加载机制,其中脚本通过 JavaScript 本身高效地加载。
目前,在各个工业项目中已经证明有许多机制是成功的。其中一种流行的方法是使用异步模块定义,或者说AMD方法,它能够加载执行一组JavaScript逻辑所需的JavaScript依赖(包括JavaScript库和文件)。这种机制还鼓励限制全局作用域变量的使用,并以用户所需的方式模块化JavaScript,而不牺牲按执行顺序加载JavaScript文件的需求。
例如,如果我们以已经实现了这些功能的Require.js为例,加载一组依赖的语法如下:
当涉及到Joomla时,这些依赖加载的语法可以定制如下,以创建一个面向未来的设计,包裹现有的库如require.js。
Joomla.LoadScript(['jQuery', 'Search', 'IndexJS'], function($, Search, Index){
// 依赖于jQuery、Search和IndexJS JavaScript库的逻辑
});
虽然乍一看可能有些令人困惑,第一个参数用于指定
- JavaScript文件的路径
- 别名,它引用一个路径
该路径将加载适当的JavaScript文件/模块,然后根据指定的JavaScript模块和文件调用回调函数,并返回其上下文(变量按顺序返回,而不是使它们成为全局的)。采用这种方法,所有依赖都可以在执行单个脚本之前在JavaScript级别加载,无需将它们添加到页眉中。
变更成本和范围
虽然这看起来似乎是一项极具挑战性的工作,但它为项目的未来带来的好处确实是宝贵的,并提供了面向未来的设计概念,可以引入更多模块化的JavaScript逻辑,以增强Joomla的可用性。
在Joomla的JavaScript环境中,根据当前的实现,需要稍微修改现有的JavaScript库,以避免破坏全局作用域,而是以类似于module require.js语法的概念返回指定的依赖项,同时保持向后兼容性。除此之外,紧密耦合的JavaScript逻辑可以分离成不同的模块,并通过适当的计划和JavaScript模块的分组以分层抽象出来。
尽管目前的需求并不明显,但提前进行这些更改将使Joomla在未来能够在减少JavaScript复杂性和利用尖端浏览器技术改进方面具有优势。
在Joomla社区杂志上发表的一些文章代表了作者对特定主题的个人意见或经验,可能并不代表Joomla项目的官方立场。
通过接受,您将访问由 https://magazine.joomla.net.cn/ 之外的第三方提供的服务
评论