资源开发/资源开发

来自MyaWiki.Org
跳转到导航 跳到搜索
捷径:RL/DEV

这是RealSeloDoad的PHP接口的高级演练,用于理解如何使用RealSeloDADER创建模块束。

更多关于ResourceLoader,它是如何工作的,以及为什么它工作的方式,看到资源管理器/体系结构.

说明[编辑]

在每个页面视图中,JavaScript运行时从系统中存在哪些包、它们之间的关系以及它们当前版本的散列开始。MediaWiKi可以指示在给定页面上加载其中的一个或多个。这些指令采取的形式是AddioMulk模块()AddioMistEclipse()PHP中的函数调用。通常从特殊页、解析器函数或输出页挂钩。

在相同的最终用户场景中,一个包通常代表所有需要的代码。例如,用户界面维基编辑器扩展是1个模块包,从编辑页面加载(可能基于内容类型和用户偏好的条件)。

注意,绑定生成可以通过站点、皮肤和用户语言来改变。这样,捆绑包还可以包括特定于站点的配置变量、特定于一个或多个皮肤或语言的附加脚本和样式,以及基于wiki和/或其他已安装扩展的配置的附加依赖关系或脚本文件。

可能有一些小部分的接口只在稍后使用,或者在某些情况下使用,但是一般的默认应该是将它们捆绑在一起。分割模块应保留为优化,并与感知性能问题的测量相一致,并用最终用户利益量化。

如果你发现你需要超过三个模块用于一个扩展或核心功能,目标是部署在维基媒体基金会维基上,那么维基媒体表演团队谁可能能够帮助找到或设计替代的方法来解决手头的问题。

注册[编辑]

每个模块包需要一个在给定站点上唯一的符号名称。

对于MyaWiKi核心,模块定义在资源/ Resources.php文件

对于扩展,模块是通过资源小体你的属性扩展/扩展文件

下面是扩展的模块定义的一个例子(参见:延期登记

“资源小结” {
    “Ext.MyDebug” {
        “脚本” [
            “模块/ExtMyExeltual.Cys.js”
            “模块/ExtMyExeltual.FooBar .js”
        
        “风格” “模块/ExtMyExeltual.CSS”
        “消息” [
            “我的世界”
            “我的世界再见”
        
        “依赖” [
            “OOJS”
        ]
    }
}

命名[编辑]

扩展包通常携带“Ext”前缀,并使用LeaveCAMELSE表单中的扩展名作为模块名的主段。附加段应用圆点分隔。

定义[编辑]

有关模块定义的键(如脚本、样式、消息等)的更多信息,请参见资源小体.

加载模块[编辑]

服务器端[编辑]

也见手册:OutPuthP.PHP帕塞尔输出

在构建页面时,通过调用页面将一个或多个模块添加到页面中。附加模块方法在输出页面帕塞尔输出对象,并传递一个或多个模块名(如中庸之道“或”夸克“”

输出页面>附加模块 “FoBar” 

输出页面将给定的模块名称添加到页面的加载队列中。客户端加载程序请求此模块的所有组件(脚本、样式、消息、依赖项等)并正确执行它们。如果您的模块包含影响PHP输出的元素以及动态创建的元素的样式,那么您应该对模块进行拆分。一个用于造型/增强输出,一个用于动态素材。第一个模块应该只具有样式表并加载附加模块式(见铯铯另一个模块将简单地由客户端异步加载,而不是阻止对页面的进一步解析。

输出页面>附加模块 [ “MiaWiki-Foo” ExtMyExt' ] 

若要从扩展中获取OutPoPoT对象的引用,请使用超前显示钩.

CSS[编辑]

如果在页面呈现之前必须加载CSS(甚至当JavaScript不可用时),将其通过队列进行排队。输出页面::. 这将确保模块从<链接Re=样式表>标签

对于涉及JavaScript的任何样式,首选方法是将它们包括在内。输出页面::哪些负载模块作为一个完整的包组合请求(脚本,样式,消息)动态地(从轻量级的)客户在JavaScript中)。这是因为它对于这个目的更有效(对所有资源的单个请求),支持依赖性解析,请求批处理,是高度可缓存的(通过访问具有所有版本号的启动清单,它可以动态地生成永久可缓存URL),并且减少高速缓存碎片(先前加载在其他页面视图上的模块直接从本地存储加载)。它不应该用于仅CSS模块。

由于依赖性更改可以独立于缓存页而部署,因此静态加载与附加模块式不能使用依赖项。由于无法在没有JavaScript执行的情况下从静态HTML动态访问最新版本的启动清单,因此它也不能在URL中拥有版本,因此缓存了较短的时间。

在实践中,你只应该使用输出页面::对于基本生成服务器生成内容(PHP输出和核心皮肤)所需的样式表。用JavaScript和动态生成内容的样式将这些CSS从模块中分离出来。

JavaScript[编辑]

像CSS文件一样,JavaScript文件也按它们在A中定义的顺序进行评估。脚本包装文件数组。

在下面的示例中,我们将使用条目“包文件”:[索引.js ],“fo.js”]注册模块时。

//Fo.js
var  = {
    说你好 功能  元元  {
        元元.追加 'P>你好模块!</P> 
    }
};
模块.出口 = 

//Noj.js
var  = 要求 '/fo.js’ 
$ 功能 () {
    //此代码不能在加载文档之前执行。
    .说你好 $ “你好”  
(});

加载此模块的页面将在某个地方使用$-> GETOutPUT()-> ADDHTML('< div id=“hello”> /div >);输出元素。

从PHP到JavaScript传递信息[编辑]

封装模块关于如何在模块的服务器端捆绑额外的数据。这些变量可以是配置变量,也可以是丰富的回调结果,这些数据可以生成其他形式的数据,这些数据可以序列化到JSON,甚至生成JavaScript代码。

或者,您可能希望从应用程序接口(例如使用IMAIWIKIIAPI图书馆)。

如果需要导出特定于当前页输出的信息,例如从解析器函数导出,请考虑使用数据属性,并从JavaScript中选择它。或者如果需要更复杂的数据,则调用AdjsCaseValx()输出页面帕塞尔输出目标在很少的情况下,无法访问输出页或PARServices对象,Mag全局变量脚本使用钩子。

客户端(动态)[编辑]

小工具应该通过它们列出它们的依赖关系“依赖”选项在他们定义.

对于用户脚本,依赖关系不能提前声明(不像小工具)。相反,对于用户脚本,将代码打包为装载机使用块,并指定所需的模块。例如:

兆瓦级.装载机.使用 ['MuiaWiki.UTIL '“MiaWiki.title”] 然后 功能 () {
    /*此回调在模块可用时被调用。*/
} 

这将保证加载指定的模块。不要担心多个(单独的)脚本都要求加载程序为同一个模块。RealSeloDoad内部确保多次加载。

条件延迟加载[编辑]

如果你有一个脚本,只需要在用户界面的某个场景中需要另一个模块,你可以创建一个小的单独的模块(称为“init模块”),从那里使用JavaScript动态加载模块的其余部分。

例子:

var 可供索取的美元 = 美元内容.发现 “桌子,可排序的” 
如果  可供索取的美元.长度  {
    兆瓦级.装载机.使用 'jQuery .TabelOrthter 然后 功能 () {
        可供索取的美元.表制作者();
    } 
}

并行执行[编辑]

如果有多个异步任务,最好并行运行这些任务。使用什么时候跟踪多个单独的异步任务(称为“承诺”)或“延迟”。下面是等待和Ajax请求以及加载RealSeloDoad模块和“文档就绪”状态的示例:

//好:这三个进程并行运行。
$.什么时候
  $.盖特森 “HTTPS://API.ExpRul.Org/Foo” 
  兆瓦级.装载机.使用 ['MuiaWiki.UTIL ' “MiaWiki.title”] 
  $.准备好的
然后 功能  足数据  {
 //当Ajax请求完成后,模块加载,
 /文件准备就绪
 $ “举例” 阿特尔 “HREF” 兆瓦级.乌蒂尔.获取网址 足数据.网页  
} 

//Boo:这些是嵌套的,一个在另一个开始之前等待:
$ 功能 () {
  兆瓦级.装载机.使用 ['MuiaWiki.UTIL ' “MiaWiki.title”] 然后 功能 () {
    $.盖特森 “HTTPS://API.ExpRul.Org/Foo” 然后 功能  足数据  {
      $ “举例” 阿特尔 “HREF” 兆瓦级.乌蒂尔.获取网址 足数据.网页  
    } 
  } 
} 

/不太坏:用装入()进行预加载
$ 功能 () {
  兆瓦级.装载机.负载 ['MuiaWiki.UTIL ' “MiaWiki.title”] 
  $.盖特森 “HTTPS://API.ExpRul.Org/Foo” 然后 功能  足数据  {
      兆瓦级.装载机.使用 ['MuiaWiki.UTIL ' “MiaWiki.title” 功能 () {
        $ “举例” 阿特尔 “HREF” 兆瓦级.乌蒂尔.获取网址 足数据.网页  
      } 
  } 
} 

CSS[编辑]

您的样式资源可以是CSS,也可以是MITAWIKI 1.22,较少文件当写作风格时,我们建议你跟随我们。公约.

媒体查询[编辑]

在定义模块时,可以使用媒体查询,以指定何时使用CSS/FULL文件:

{	“风格” {
		“总是。CSS” { “媒体” “银幕” }
		“打印。CSS” { “媒体” “打印” }
		“高分辨率CSS” { “媒体” “屏幕和(最小宽度:982px)” }
	}
}

在上面的例子中,阿尔韦斯样式表将始终适用于所有的屏幕,打印样式样式表应用于打印(以及在“可打印版本”模式下),以及高分辨率CSS当视口宽度至少为982个像素时,应用样式表。相应的CSS/FULL文件的内容将被封装在定义的媒体查询中:

/RealStudioCSS的RealSeleODADER输出*
@媒体 打印 {
	/Cs的内容。
}

/*高分辨率.CSS的RealSeleODADER输出*
@媒体 屏幕   最小宽度 982PX  {
	高分辨率Cs**的含量
}

注解[编辑]

RealSeloDead中的CSS预处理器支持多个注释,您可以使用这些注释来优化样式表。

@嵌入[编辑]

也见资源处理器/体系结构嵌入

如果用CSS指定图像URL()功能和足够小(最多24KB)的注释@嵌入可以用在CSS评论中。这指示RealSeloDoad将图像嵌入CSS输出中作为一个数据URI. 例如:

.MW反馈旋转器 {
    显示 内联块
    /*@嵌入*//
    背景 网址纺丝机
    
}

如果你看到资源请求器对于这个模块,您可以看到RealSeloDoad将此映像文件转换为嵌入的数据URL,仅将外部URL作为回退。为了清晰起见,RealSeloDADER的响应包括:

.MW反馈旋转器{显示内联块
 背景网址数据:图像/GIF;BASE64,R0LGLULHEGA…=
 背景网址HTTPS://www. MyaWiki.Org/W/RealsS/Src/MediaWiki/MediaWik.Field.Primel.GIF?F41ED工业工程

}

在CSS中支持数据URI的浏览器使用嵌入的图像而不是生成另一个网络请求。

MIDAWIKI版本: ±一点二二

在MediaWiKi 1.22和NeXER中,您也可以使用较少MIXIN指定一个图像,MIXIN函数输出@嵌入指导你。例如,ButoStudio -IMAGE()混合蛋白少混合堆芯在你较少的文件中:

.MW FO棒 {
    背景图像(图像/图标Fo.bar,PNG)
    衬垫 二甲苯   二甲苯 四十二甲苯
}

也见资源映像,它从单个源SVG文件生成光栅图像和多个彩色图标。

诺夫利普[编辑]

也见资源管理器/体系结构

若要禁用对一个CSS声明或整个规则集的翻转功能,请使用诺夫利普注释:

例如:

/*@ NoFLIP*// 
.MW Portlet项目 { 
    浮动 左边 
    线高 一点二五 
}

这一个翻转!*/ 
.MW Portlet项目 { 
    缘顶 零点五相对长度单位 
    除此之外:*/ 
    /*@ NoFLIP*// 
    左边余量 零点七五相对长度单位 
    字体大小 零点七五相对长度单位 
    白色空间 诺拉普 
}

调试[编辑]

切换调试模式[编辑]

RealSeloDoad支持生产和开发环境中的复杂客户端Web应用程序。由于这些不同的环境有不同的需求,RealSeloDoad提供了两种不同的模式:生产模式与调试模式(也称为“开发”模式)。

调试模式被设计为尽可能容易地开发,优先于识别和解决软件中的问题,而不是性能上的问题。生产模式使得相反的优先次序,强调性能比开发的容易。

在调试和生产模式下测试代码是很重要的。在日常开发中,大多数开发人员会发现在大多数情况下都使用调试模式是有益的,只是在提交更改之前在生产模式中验证代码的功能。

您可以启用所有页面视图的调试模式,也可以启用单个页面请求(通过追加)。调试=真指向URL);参见资源管理器/体系结构调试模式有关切换的细节。

服务器端异常[编辑]

RealSeloDoad捕获模块打包过程中出现的任何错误(如模块定义中的错误或丢失的文件)加载程序请求它在JavaScript注释中响应于该请求的顶部输出该错误信息,例如:

/**
*异常“MWExExchange”带有消息“RealSeroAdSeriFLimeMod::Read StasyFrfile:样式文件未找到:
*问题模块:{皮肤。蓝图。样式:“错误”}
*/

您可以在开发工具中的网络面板中查看大多数浏览器的请求,或者您可以复制加载程序URL并在新的浏览器窗口中加载它。注意,带有故障模块的HTTP请求仍然返回状态200 OK,它返回错误。

还可以通过服务器端日志文件将错误输出到服务器端日志文件中。设置日志文件$WGDebug$WGDebug. 它们不被添加到主调试日志中($WGDebug文件由于默认情况下,日志记录被禁用为请求加载程序虫47960

客户端错误[编辑]

未审查的

RealSeloDADER返回的JavaScript在浏览器中执行,并且可能有运行时错误。大多数浏览器不向用户显示这些内容,因此在开发过程中应该让浏览器的JavaScript控制台打开以通知它们。

你可以用ResourceLoader的加载程序.GETSTATE()检查函数模的状态,例如进入加载程序.GETStand(“皮肤.vector,js”)在浏览器的JavaScript控制台中。如果它返回:

无效的
该模块对于RealSeloDad并不了解。检查键入,并验证模块是否已正确注册和定义。
注册的
RealSeloDADER知道这个模块,但是还没有加载它在当前页面上。检查您的逻辑添加模块,无论是服务器端还是客户端。您可以通过输入强制它加载。装载机负载(‘我的模块名称’).
错误
无论是服务器端还是客户端执行过程中,都有一些错误,这个模块或它的一个依赖项。检查浏览器控制台和网络监视器是否存在与Load .PHP请求有关的错误。或者,考虑在调试模式下重新加载页面。
准备好的
模块加载在当前页上,没有错误。

中断高速缓存[编辑]

当频繁地更改代码并在浏览器中进行检查时,为提高Web浏览性能而设计的缓存机制会很快变得不方便。当在一个不使用A的系统上开发时反向代理你只需要强迫浏览器在刷新时绕过它的缓存。这可以通过按压来实现。CTRL+F5在Internet Explorer中,或者在大多数浏览器中单击浏览器的刷新按钮时,按住Shift键。

如果您在反向代理后面开发,您可以更改$WG或使用调试=真绕过缓存。

也见