Plone技术论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 659|回复: 0

Plone资源注册续

[复制链接]
发表于 2017-3-15 19:27:38 | 显示全部楼层 |阅读模式
Plone5 以后,js资源组织采用模块化、异步加载的思路来实现。
主要运用RequireJs来实现这个思路。
采用AMD模式符合RequireJs规范的js模块被定义为资源,每个资源可以无限导入并依存其他资源。这种JS资源的运行必须在其所有的依赖的其他资源调入后,才会开始运行。
AMD模式RequireJS代码示例:
  1. define([
  2.   'jquery',
  3.   'underscore',
  4.   'backbone',
  5.   'mockup-ui-url/views/base',
  6.   'mockup-utils',
  7.   'text!mockup-patterns-structure-url/templates/actionmenu.xml',
  8.   'bootstrap-dropdown'
  9. ], function($, _, Backbone, BaseView, utils, ActionMenuTemplate) {
  10. 'use strict';

  11. var ActionMenu = BaseView.extend({
  12.     className: 'btn-group actionmenu',
  13.     template: _.template(ActionMenuTemplate),

  14. // ...
  15. });
  16. return ActionMenu;
  17. });
复制代码
资源注册样例:(registery.xml)
  1. <records prefix="plone.resources/mockup-router"
  2.          interface='Products.CMFPlone.interfaces.IResourceRegistry'>
  3.   <value key="js">++resource++mockupjs/router.js</value>
  4. </records>
复制代码
向前兼容的问题:
原来Plone5以前,非AMD的js文件依旧可以通过portal_javascripts 或portal_css工具来注册,这种形式的注册,资源将归到 plone-legacy bundle,plone-legacy 依存于Plone bundle。
关于Shim Resources:
当有一个js代码段,不是按照RequirJS规范来书写的,此时,要实现对其资源注册,必须采用[url=http://requirejs.org/docs/api.html#config-shim]Shim options[/url]。
If the JavaScript you wish to register does not follow the RequireJS module pattern (using define and require), you may still register it in a resource.You will need to use the shim options for your resource record.We refer to this kind of JavaScript as "legacy", as it doesn't follow our proposed best practices.For more information on configuring shims in RequireJS, see: http://requirejs.org/docs/api.html#config-shim
Shim Resources 配置选项:
exportShim export option to define a global variable where the JavaScript module should be made available.depsShim depends option to define which other RequireJS resources should be loaded before this shim module.initShim init option to define some JavaScript code to be run on initialization.Shim Resource 事实上将自定义的js模块以一个变量名的形式重新放到全局js名称空间,来供其他js资源调用。
下面是Shim resource注册样例:
  1. <records prefix="plone.resources/tinymce"
  2.          interface='Products.CMFPlone.interfaces.IResourceRegistry'>
  3.   <value key="js">++plone++static/components/tinymce/tinymce.js</value>
  4.   <value key="export">window.tinyMCE</value>
  5.   <value key="init">function() { this.tinyMCE.DOM.events.domLoaded = true; return this.tinyMCE; }</value>
  6.   <value key="css">
  7.     <element>++plone++static/components/tinymce/skins/lightgray/skin.min.css</element>
  8.     <element>++plone++static/components/tinymce/skins/lightgray/content.inline.min.css</element>
  9.   </value>
  10. </records>
复制代码



Non-AMD Bundles也就是Non-AMD js资源采用bundle形式来加载。

Sometimes it may be useful to register a simple javascript without using the AMD pattern.An example of such a bundle is provided in the example.p4p5 package.In this case, there is a simple Javascript which appends a status div to a chart (example/p4p5/browser/static/chart.js):
  1. $(document).ready(function() {
  2.     var chart = $('#chart');
  3.     var done = parseInt(chart.attr('done'));
  4.     var inprogress = parseInt(chart.attr('inprogress'));
  5.     var total = done + inprogress;
  6.     if(total == 0) {
  7.         total = 1;
  8.     }
  9.     var done_rate = Math.round(100 * done / total);
  10.     var inprogress_rate = Math.round(100 * inprogress / total);
  11.     chart.append('<div class="done" style="width:'+done_rate+'%"> </div>');
  12.     chart.append('<div class="inprogress" style="width:'+inprogress_rate+'%"> </div>');
  13. });
复制代码
In this case, the Javascript is dependent only on a global $ which is expected to be bound to jQuery.Plone provides this in the plone bundle, so that is the only dependency we need to specify.For such a case, the package can register this javascript in jsregistry.xml for Plone versions before 5.0.And in Plone 5, the following bundle record added in registry.xml will do the trick (example/p4p5/profiles/plone5/registry.xml):
注册样例:
  1. <records prefix="plone.bundles/examplep4p5"
  2.          interface='Products.CMFPlone.interfaces.IBundleRegistry'>
  3.   <value key="enabled">True</value>
  4.   <value key="jscompilation">++resource++example.p4p5/chart.js</value>
  5.   <value key="csscompilation">++resource++example.p4p5/chart.css</value>
  6.   <value key="last_compilation">2016-01-01 00:00:00</value>
  7.   <value key="compile">False</value>
  8.   <value key="depends">plone</value>
  9. </records>
复制代码
通过上述注册,这种Non-AMD资源也能被其他资源调用(用RequireJS模式,注意:待多个实例代码验证!)
Notice that this bundle provides no resources.The Javascript file from the package is provided as the value of the jscompilation option.The CSS file is likewise provided as a pre-compiled value.Finally the value of the compile option is set to False.This ensures that the Resource Registry will make no attempt to re-compile this bundle.



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|Plone技术论坛 ( 湘ICP备07003419

GMT+8, 2017-9-20 06:39 , Processed in 0.130101 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表