mcs 介绍

使用方式：mcs 代码可以编写在 mcml 文件中的 <mcs> 标签内，或以 .mcs 为后缀名的文件内。

模块

每一个<mcs> 标签和 .mcs 文件都是一个单独的模块。

每个模块都有自己独立的作用域，对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

<mcs> 标签

module 属性

module 属性是当前 <mcs> 标签的模块名。在单个 mcml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 mcs 模块名不会相互覆盖。

module 属性值的命名必须符合下面两个规则：

• 首字符必须是：字母（a-zA-Z），下划线（_）
• 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）

在 mcml 文件中的 <mcs> 标签内编写MCS：

示例代码：

<!--index.mcml-->
<mcs module="foo">
  var some_msg = "Hello Morecross!";
  var bar = function(){
    return "from mcs tag"
  }
  module.exports = {
    msg : some_msg,
    bar : bar
  }
</mcs>

<view> {{foo.msg}} </view>
<view> {{foo.bar()}} </view>

src 属性

src 属性可以用来引用其他的 mcs 文件模块。

示例代码：

//my-mcs.mcs
var foo = "from my-mcs.mcs ";
var index = 0;
var bar = function(d) {
  index++;
  return d + index;
}
module.exports = {
  foo: foo,
  bar: bar
};
module.exports.msg = "Hello Morecross!"
var utils = require('./utils.mcs');
module.exports.utils = utils.bar();

<!--index.mcml-->
<mcs src="my-mcs.mcs" module="tools" />
<view> {{tools.bar(tools.foo)}} </view>

注意

• <mcs> 模块只能在定义模块的 MCML 文件中被访问到。使用 <include> 或 <import> 时，<mcs> 模块不会被引入到对应的 MCML 文件中。
• <template> 标签中，只能使用定义该 <template> 的 MCML 文件中定义的 <mcs> 模块。

.mcs 文件

在 .mcs 文件中定义 MCS：

示例代码：

//my-mcs.mcs
var foo = "from my-mcs.mcs ";
var index = 0;
var bar = function(d) {
  index++;
  return d + index;
}
module.exports = {
  foo: foo,
  bar: bar
};
module.exports.msg = "Hello Morecross!"

module 对象

每个 mcs 模块均有一个内置的 module 对象。 示例代码：

var foo = "from my-mcs.mcs ";
var index = 0;
var bar = function(d) {
  index++;
  return d + index;
}
module.exports = {
  foo: foo,
  bar: bar
};

require函数

在 .mcs 模块中引用其他 mcs 文件模块，可以使用 require 函数。

示例代码：

//my-mcs.mcs
var utils = require('./utils.mcs');
module.exports.utils = utils.bar();

MCS 语法

mcs 运行在视图层的 javascript 环境中，因此直接使用 js 语法编写。

内置函数

可以使用 getDate 函数, 返回一个当前时间的对象。

/*
getDate()
getDate(milliseconds)
getDate(datestring)
getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])
*/

var date = getDate(); //返回当前时间对象

date = getDate(1500000000000);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
date = getDate('2017-7-14');
// Fri Jul 14 2017 00:00:00 GMT+0800 (中国标准时间)
date = getDate(2017, 6, 14, 10, 40, 0, 0);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)

可以使用 getRegExp 函数, 生成 regexp 对象。

/*
getRegExp(pattern[, flags])

  pattern: 正则表达式的内容。
  flags：修饰符。该字段只能包含以下字符:
  g: global
  i: ignoreCase
  m: multiline。 
 **/

//示例
var a = getRegExp("x", "img");
console.log("x" === a.source);
console.log(true === a.global);
console.log(true === a.ignoreCase);
console.log(true === a.multiline);

示例代码：

var x, y;    // 如何声明变量
x = 7; y = 8;    // 如何赋值
z = x + y;    // 如何计算值

function test(){
    return z;
}

module.exports = {
    result: test()
};

响应事件

为了提高频繁用户交互的体验，MCS 支持视图层响应事件。

使用MCS函数响应事件

MCS事件函数接受2个参数，第一个是event，在原有的event的基础上加了event.instance对象，第二个参数是ownerInstance，和event.instance一样是一个ComponentDescriptor对象。具体使用如下：

<!--index-->
<mcs module="test" src="./movable.mcs"></mcs> 
  <view class="movearea">
    <view data-index="1" data-obj="{{dataObj}}" 
    style="color:#fff;"
    bindtouchstart="{{test.touchstart}}" 
    bindtouchmove="{{test.touchmove}}" 
    bindtouchend="{{test.touchmove}}"
    class="moveable" 
    change:prop="{{test.propObserver}}"
    prop="{{moveableTop}}">可以拖动</view>
  </view>
</view>

注：绑定的MCS函数必须用{{}}括起来

//moveable.mcs
var startX = 0
var startY = 0
var lastLeft = 0
var lastTop = 0
function touchstart(event, ownerInstance) {
  var touch = event.touches[0] || event.changedTouches[0]
  startX = touch.pageX
  startY = touch.pageY
  return false;
  // false表示不往上冒泡，相当于调用了同时调用了stopPropagation和preventDefault
}
function touchmove(event, ownerInstance) {
  var touch = event.touches[0] || event.changedTouches[0]
  var pageX = touch.pageX
  var pageY = touch.pageY
  var left = pageX - startX + lastLeft
  var top = pageY - startY + lastTop
  startX = pageX
  startY = pageY
  lastLeft = left
  lastTop = top
  ownerInstance.selectComponent('.moveable').setStyle({
    left: left + 'px',
    top: top + 'px'
  })


  ownerInstance.callMethod('setMoved', {
    moved: true
  })
  return false;
}
module.exports = {
  a: 1,
  touchstart: touchstart,
  touchmove: touchmove,
  propObserver: function (newValue, oldValue, ownerInstance, instance) {
    lastLeft = lastTop = 0
    instance.setStyle({
      left: '0px',
      top: '0px'
    })
  }
}

ComponentDescriptor的定义如下：

注意：

• 为保持开发开放性，MCS 未禁止视图层的系统对象和方法（如 window, document ），请谨慎使用这些对象和方法，以防出现未知问题。