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


发表于 2017-3-15 19:27:38 | 显示全部楼层 |阅读模式
Plone5 以后,js资源组织采用模块化、异步加载的思路来实现。
  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. });
  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=]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:
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() { = 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>
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.


使用道具 举报

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


QQ|小黑屋|Archiver|手机版|Plone技术资料 ( 湘ICP备14006519号-1 )

GMT+8, 2019-11-19 01:20 , Processed in 0.046526 second(s), 18 queries , Gzip On.

Powered by Plone! X3.4

© 2001-2019

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