efront 3.34.12 → 3.35.0

package/apps/moue/content//344/275/240/345/245/275/344/270/226/347/225/214.vue

@@ -0,0 +1,21 @@
+<style>
+& {
+  text-align: center;
+  padding: 60px 0;
+}
+</style>
+<template>
+  <div>
+    <btn @click="alert('你好，一线开发者', 'success')">你好，世界</btn>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    alert,
+  },
+  components: {
+    btn: moue(button, "click"),
+  },
+};
+</script>

package/apps/moue/content//344/275/240/345/245/275/345/274/200/345/217/221/350/200/205.html

@@ -0,0 +1 @@
+<div><btn @click="alert('你好，基线开发者')">你好开发者</btn></div>

package/apps/moue/{home/index.js → content//344/275/240/345/245/275/345/274/200/345/217/221/350/200/205.js}

@@ -1,10 +1,12 @@
 function main() {
     var compiled = Vue.compile(template.toString());
-    console.log(compiled);
     return new Vue({
+        methods: { alert },
+        components: {
+            btn: moue(button, 'click')
+        },
         render() {
             var res = compiled.render.apply(this, arguments);
-            console.log(res);
             return res;
         },
         staticRenderFns: compiled.staticRenderFns,

package/apps/moue/content//344/275/240/345/245/275/345/274/200/345/217/221/350/200/205.less

@@ -0,0 +1,4 @@
+&{
+    text-align: center;
+    padding: 60px 0;
+}

package/apps/moue/home/index2.vue

@@ -1,20 +1,24 @@
 <style lang="less" scoped>
+// 只支持 less 一种
 & {
   color: #fff;
-  background: #ccc;
+  background: #567;
   height: 100%;
   width: 100%;
   position: relative;
   appearance: none;
 }
+
 &,
 * {
   box-sizing: border-box;
 }
+@theight: 54px;
+@lwidth: 300px;
 .nav {
-  height: 60px;
-  margin-top: -60px;
-  background: #0cf;
+  height: @theight;
+  margin-top: -@theight;
+  background: #069;
 }
 > .menu,
 > .main {
@@ -24,39 +28,114 @@
 }
 > .menu {
   background: #000;
-  width: 200px;
-  margin-left: -200px;
+  width: @lwidth;
+  margin-left: -@lwidth;
   max-width: 600px;
-  min-width: 60px;
+  min-width: @theight;
+}
+.menu-items {
+  padding: 20px 0;
 }
 > .main {
   width: 100%;
 }
 & {
-  padding: 60px 0 0 200px;
+  padding: @theight 0 0 @lwidth;
 }
 > .body {
   width: 100%;
 }
+button {
+  display: block;
+  appearance: none;
+  width: 100%;
+  background: #fff4;
+  color: #fff;
+  position: relative;
+  padding: 10px 16px;
+  &:hover {
+    background: #9cf4;
+  }
+  &:active {
+    background: #9cf3;
+  }
+  &.actived {
+    color: #39c;
+    &:after {
+      display: block;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      margin-top: -20px;
+      line-height: 40px;
+      bottom: 0;
+
+      padding: 0 10px;
+      font-family: "宋体", sans-serif;
+      content: ">";
+    }
+  }
+}
+.button {
+  padding: 0 16px;
+}
+.title {
+  font-size: 20px;
+  line-height: 30px;
+  padding: 12px 20px;
+}
+tip {
+  display: block;
+  position: absolute;
+  font-size: 12px;
+}
 </style>
 <template>
   <div1 editable>
-    <div class="nav" solid></div>
-    <div class="menu"></div>
-    <div class="main">
-      <btn @click="alert('你好')">abc</btn>
+    <div class="nav" solid>
+      <tip>标题栏</tip>
+      <div class="title">蛤蟆坑</div>
+    </div>
+    <div class="menu">
+      <tip>菜单区</tip>
+      <div class="menu-items">
+        <button
+          :class="{ actived: m === activeMenu }"
+          @click="go(m.url), (activeMenu = m)"
+          v-for="m of menuData"
+        >
+          {{ m.name }}
+        </button>
+      </div>
     </div>
+    <div2 class="main" ref="content">
+      <tip>内容区</tip>
+    </div2>
   </div1>
 </template>
 <script>
 export default {
   methods: {
-    alert
+    alert,
+    go(url) {
+      zimoli.go(url, null, this.$refs.content);
+    },
+  },
+  data() {
+    var menuData = [
+      { name: "你好,世界", url: "/content/你好世界" },
+      { name: "你好,开发者", url: "/content/你好开发者" },
+    ];
+    return {
+      activeMenu: menuData[0],
+      menuData,
+    };
+  },
+  mounted() {
+    this.go(this.activeMenu.url);
   },
   components: {
-    btn: button_test,
-    btn: moue(button, "click"),
-    div1: moue(grid)
-  }
+    div1: moue(grid),
+  },
 };
-</script>
+</script>

package/apps/moue/index.html

@@ -10,7 +10,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
     <meta name="viewport" content="initial-scale=1,maximum-scale=1,width=device-width" />
-    <title>Efront 项目</title>
+    <title>与vue混合使用的示例项目</title>
     <style>
         body,
         html {

package/coms/basic/ArrayFill.md

@@ -0,0 +1,9 @@
+创建一个指定大小的数组，并用指定的元素填充。
+如：
+```javascript
+ArrayFill(大小,元素);
+```
+这个方法与下边的代码等效
+```javascript
+Array(大小).fill(元素)
+```

package/coms/basic/awaitable.md

@@ -0,0 +1,10 @@
+把一个类似Image对象转换成可以被`await`的对象，即附加一个then方法，当onload事件触发或complete属性为真时完成。
+如：
+```javascript
+    var img = new Image;
+    img.src = 图像路径;
+    await awaitable(img); // 等待加载完成
+    var canvas = document.createElement("canvas");
+    var context = canvas.getContext("2d");
+    context.drawImage(img,0,0); // 此时已可以直接绘制
+```

package/coms/basic/backEach.md

@@ -0,0 +1,7 @@
+倒序遍历数组，接收三个参数
+
+```javascript
+    backEach(数组, function (元素,下标,数组){
+        // 在这里写你的代码
+    }, this 指向);
+```

package/coms/basic/combine.md

@@ -0,0 +1,23 @@
+组合工具，把传入的数组队列进行组合，列出所有可能出现的情况
+如：
+```javascript
+    var 数组1=[1,2,3];
+    var 数组2=[10,20];
+    var 数组3=["字符串1","字符串二"];
+    var 组合结果 = combine(数组1,数组2,数组3);
+    组合结果 如下:
+    [
+        [1,10,"字符串1"],
+        [1,10,"字符串二"],
+        [1,20,"字符串1"],
+        [1,20,"字符串二"],
+        [2,10,"字符串1"],
+        [2,10,"字符串二"],
+        [2,20,"字符串1"],
+        [2,20,"字符串二"],
+        [3,10,"字符串1"],
+        [3,10,"字符串二"],
+        [3,20,"字符串1"],
+        [3,20,"字符串二"]
+    ]
+```

package/coms/basic/renderExpress.js

@@ -81,7 +81,7 @@ function main(express) {
             add_exp(str);
         }
         lastIndex = match.index + m.length;
-        if (match[1] || match[0] === '?' && (express.length <= lastIndex || /[\]\}\)]/.test(express.charAt(lastIndex)))) {
+        if (match[1] || match[0] === '?' && (express.length <= lastIndex || /[\]\}\)\|\*\.\?&%\^\>\<\:\;\,]/.test(express.charAt(lastIndex)))) {
             exp.push(match[1]);
         }
         else if (/[\[\{\(]/.test(m)) {

package/coms/basic/wait.js

@@ -0,0 +1,5 @@
+async function wait(call, time = 80, step = +time >>> 4 | 1) {
+    var res;
+    while (!(res = await call()) && time > 0) await new Promise(ok => setTimeout(ok, step)), time -= step;
+    return res;
+}

package/coms/basic_/readme.md

@@ -1,5 +1,6 @@
 # efront 兼容性说明
 * `coms/basic_`目录的代码均为非标准实现，如果你要兼容低版本的运行环境，尽量避免使用高级的功能
+* 当前的`efront`进行代码降级时用到了`typescript`，所以下文有些问题的描述会误伤`typescript`，不用觉得奇怪。
 * 已知在转换成低版本代码后与高级版本有区别的语法如下：
 1.  ```javascript
     class ... extends Array {...} 
@@ -26,12 +27,12 @@
         console.log(arguments[0])// 0
     }(0));
     ```
-    非严格模式且没有默认值的`arguments`是会被代码中的语句改掉的，而其他两种情况不会。`efront`和`typescript`在把默认值赋值的语句移动到函数体内时，都没有处理这一细节，即原来只读的`arguments`可能被函数内的语句改掉。`efront`内提供的一些组件，可能也会有一部分有无法降级使用的问题，如果您发现的相关的问题，可以向我反馈，我会尽快处理。
+    非严格模式且没有默认值的`arguments`是会被代码中的语句改掉的，而其他两种情况不会。`efront`和`typescript`在把默认值赋值的语句移动到函数体内时，都没有处理这一细节，即原来只读的`arguments`可能被函数内的语句改掉。`efront`内提供的一些组件，可能也会有一部分有因此而无法降级使用的问题，如果您发现了相关的问题，可以向我反馈，我会尽快处理。
 
 4. ```javascript
     async function () {
         await ...;
-        arguments; // typescript 转换后arguments对象的内容有误
+        arguments;
     }
     // 或
     function* (){
@@ -39,7 +40,7 @@
         arguments;
     }
     ```
-    这不是一个难解决的问题，应该只是`typescript`已发现但不愿解决的问题。`efront`在降级编译时临时使用变量重命名的方法对代码中的`arguments`进行替换使其内容与原生高级代码一致。
+    `typescript` 转换这两类新型函数后，`arguments`对象的内容有误。这不是一个难解决的问题，应该只是`typescript`已发现但不愿解决的问题。`efront`在降级编译时临时使用变量重命名的方法对代码中的`arguments`进行替换使其内容与原生高级代码一致。
 
 5. ```javascript
     Object.keys
@@ -80,7 +81,7 @@
     obj.for
     ```
     类似这种用`.`取属性的语句，由于属性名与`js`的保留字一样，`ie6`等浏览器会报错，但您可以在`efront`提供的环境中放心使用。因为`efront`本身就会把取属性的语句处理掉。
-10. `ie8`及以下浏览器中存在的一些与现代`js`标准不同的特性，`efront`提供的组件可能不兼容，在处理为这类环境进行应用开发时，应避免使用。
+10. `ie8`及以下浏览器中存在的一些与现代`js`标准不同的特性，`efront`提供的组件可能不兼容，在为这类环境进行应用开发时，应避免使用。
     ```javascript
     Object.defineProperty(...);
     ({

package/coms/compile/#/350/257/264/346/230/216.md

@@ -0,0 +1 @@
+ `coms/compile`目录的代码不仅不完善，且可能随时被修改或删除，仅供`efront`自身使用。您可能可以临时使用其中的暂时可用的部分功能，但不能寄希望于它会稳定或长期存在。

package/coms/compile/Html.js

@@ -0,0 +1,263 @@
+var iso8859 = require("./iso8859");
+var Program = require("./Program");
+var strings = require("../basic/strings");
+
+const {
+    /*   1 */COMMENT,
+    /*   2 */SPACE,
+    /*   4 */STRAP,
+    /*   8 */STAMP,
+    /*  16 */VALUE,
+    /*  32 */QUOTED,
+    /*  64 */PIECE,
+    /* 128 */EXPRESS,
+    /* 256 */SCOPED,
+    /* 512 */LABEL,
+    /*1024 */PROPERTY,
+    createScoped,
+} = require("./common");
+var ignore = { test() { return false } };
+
+class Html extends Program {
+    straps = [];
+    value_reg = ignore;
+    strapexp_reg = ignore;
+    forceend_reg = ignore;
+    classstrap_reg = ignore;
+    scopes = [];
+    intag = false;
+    stamps = "/<>=".split("");
+    tags = [];
+    quotes = [["'", "'", /\\[\s\S]/], ["\"", "\"", /\\[\s\S]/]]
+}
+var p = new Program;
+var replaceISO8859 = function (data) {
+    return String(data).replace(/<\!--([\s\S]*)--\>$/g, '$1').replace(/&\w+;/g, a => iso8859[a] || a).replace(/&#(\d+);/g, (_, a) => String.fromCodePoint(a))
+};
+var parseExpress = function (data, mayberepeat) {
+    data = replaceISO8859(data);
+    if (mayberepeat && /\s+(in|of)\s+/.test(data)) {
+        data = data.split(/\s+(in|of)\s+/).pop();
+    }
+    p.lastIndex = 0;
+    return p.exec(data);
+};
+var keep_reg = /^(SCRIPT|STYLE)$/i;
+Html.prototype.setType = function (o) {
+    var q = o.queue;
+    var p = o.prev;
+    if (!q.intag) {
+        if (p && p.type === STAMP) {
+            if (/^</.test(p.text)) {
+                if (o.type === EXPRESS) {
+                    if (q.keep && o.text !== q.keep) {
+                        return;
+                    }
+                    q.intag = true;
+                    o.type = LABEL;
+                    if (/^<\//.test(p.text)) o.isclose = true, q.keep = null;
+                    else if (!q.keep) o.isopen = true, q.keep = keep_reg.test(o.text) ? o.text : null;
+                }
+                return;
+            }
+        }
+        if (o.type !== STAMP && o.type !== COMMENT) o.type = PIECE;
+    }
+    else {
+        if (o.type === STAMP && /^\/?>/.test(o.text)) {
+            q.intag = false;
+            return;
+        }
+        if (p.type == STAMP && p.text === '=');
+        else if (o.type === EXPRESS) {
+            o.type = PROPERTY;
+            o.isprop = true;
+        }
+    }
+};
+var toCamelCase = function (a) {
+    return a.replace(/\-([\s\S])/g, (_, a) => a.toUpperCase());
+}
+
+class Node { }
+
+Html.prototype.createScoped = function (code) {
+    var used = Object.create(null);
+    var vars = Object.create(null);
+    var dom = new Node;
+    var nodePath = [dom];
+    var childNodes = [], children = [];
+    dom.childNodes = childNodes;
+    dom.children = children;
+    var scriptNodes = [], styleNodes = [], tempNodes = [];
+    for (var cx = 0, dx = code.length, c = code[0]; cx < dx; c = code[++cx])switch (c.type) {
+        case LABEL:
+            if (!/^(script|style|template)$/i.test(c.text)) {
+                var v = toCamelCase(c.text)
+                if (!used[v]) used[v] = [];
+                used[v].push(c);
+            }
+            if (!c.isclose) {
+                var node = new Node;
+                node.tagName = c.text.toUpperCase();
+                nodePath.push(node);
+                node.childNodes = [];
+                node.children = [];
+                var outerStart = cx;
+                while (code[outerStart] !== c.prev) outerStart--;
+                node.outerStart = outerStart;
+                childNodes.push(node);
+                children.push(node);
+                children = node.children;
+                childNodes = node.childNodes;
+            }
+            else {
+                var tagName = c.text.toUpperCase();
+                for (var cy = nodePath.length - 1; cy >= 0; cy--) {
+                    if (nodePath[cy].tagName === tagName) break;
+                }
+                var node = nodePath[cy];
+                var outerEnd = cx;
+                while (code[outerEnd++] !== c.next);
+                node.outerEnd = outerEnd;
+                var innerEnd = cx;
+                while (code[innerEnd] !== c.prev) innerEnd--;
+                node.innerEnd = innerEnd;
+                var children1 = node.children;
+                var childNodes1 = node.childNodes;
+                for (var n of nodePath.splice(cy + 1, nodePath.length)) {
+                    n.noclose = true;
+                    for (var c of n.childNodes) childNodes1.push(c);
+                    for (var c of n.children) children1.push(c);
+                }
+                if (childNodes1.length) node.innerStart = childNodes1[0].outerStart;
+                else node.innerStart = innerEnd;
+                if (node.tagName === "SCRIPT") scriptNodes.push(node), tempNodes.push(node), node.isScript = true;
+                else if (node.tagName === "STYLE") styleNodes.push(node), tempNodes.push(node), node.isStyle = true;
+                nodePath.pop();
+                node = nodePath[nodePath.length - 1];
+                childNodes = node.childNodes;
+                children = node.children;
+            }
+            continue;
+        case PROPERTY:
+            if (c.next && c.next.type === STAMP && c.next.text === '=') {
+                if (/^(element|render|)id$/i.test(c.text)) {
+                    var nn = c.next.next;
+                    if (!nn || nn.length > 0) continue;
+                    if (nn.type === EXPRESS || nn.type === QUOTED) {
+                        vars[strings.decode(nn.text)] = true;
+                    }
+                }
+            }
+            else {
+                if (/^\#/.test(c.text)) {
+                    var id = c.text.slice(1);
+                    vars[toCamelCase(id)] = true;
+                }
+            }
+            break;
+        case QUOTED:
+            var t = strings.decode(c.text);
+            var p = t.prev;
+            var pp = p && p.prev;
+            var mayberepeat = p && pp && p.type === STAMP && p.text === "=" && /\-(src|repeat|for|each|foreach)$/i.test(pp.text)
+            t = parseExpress(t, mayberepeat);
+            var envs = createScoped(t).envs;
+            for (var k in envs) {
+                if (!used[k]) used[k] = [];
+            }
+            break;
+        case EXPRESS:
+            var t = c.text;
+            t = parseExpress(t);
+            var envs = createScoped(t).envs;
+            for (var k in envs) {
+                if (!used[k]) used[k] = [];
+            }
+            break;
+        case PIECE:
+        case COMMENT:
+            var n = new Node;
+            n.text = c.text;
+            n.outerStart = cx;
+            childNodes.push(n);
+            break;
+    }
+    var envs = Object.create(null);
+    for (var k in used) {
+        if (!vars[k]) {
+            envs[k] = true;
+        }
+    }
+    var scripts = [];
+    var styles = [];
+    var scoped = [];
+    scoped.richNodes = tempNodes.slice();
+    code = code.slice();
+    for (var c of scriptNodes) scripts.push(c.innerText = replaceISO8859(this.createString(code.slice(c.innerStart, c.innerEnd))));
+    for (var c of styleNodes) styles.push(c.innerText = replaceISO8859(this.createString(code.slice(c.innerStart, c.innerEnd))));
+    while (tempNodes.length) {
+        var c = tempNodes.pop();
+        code.splice(c.outerStart, c.outerEnd - c.outerStart);
+    }
+    scoped.scripts = scripts;
+    scoped.styles = styles;
+    var rootNodes = dom.childNodes.filter(a => !/^(script|style)$/i.test(a.tagName));
+    if (rootNodes.length === 1) {
+        scoped.outerHTML = this.createString(code);
+        var root = rootNodes[0];
+        scoped.tagName = root.tagName;
+        while (code[code.length - 1].type === COMMENT || code[code.length - 1].type === SPACE) code.pop();
+        while (code[0].type === COMMENT || code[0].type === SPACE) code.shift();
+        var attrarea = code.splice(0, root.innerStart - root.outerStart);
+        var attrs = [];
+        for (var a of attrarea) {
+            if (a.type === PROPERTY) {
+                var at = { name: a.text };
+                attrs.push(at);
+                var n = a.next;
+                if (!n) continue;
+                if (n.type !== STAMP || n.text !== '=') continue;
+                var nn = n.next;
+                if (!nn) return;
+                at.value = nn.text;
+            }
+        }
+        code.splice(root.innerEnd - root.outerEnd, code.length);
+        scoped.innerHTML = this.createString(code);
+        scoped.attributes = attrs;
+    }
+    else {
+        scoped.innerHTML = this.createString(code);
+    }
+    scoped.envs = envs;
+    scoped.vars = vars;
+    scoped.used = used;
+    return scoped;
+};
+Html.prototype.createString = function (code) {
+    var dist = [];
+    var keepspace = code.keepspace;
+    var p = null;
+    for (var c of code) {
+        switch (c.type) {
+            case PIECE:
+                if (p && p.type === PIECE) dist.push(" ");
+                dist.push(c.text);
+                break;
+            case SPACE:
+                if (keepspace) dist.push(c.text);
+                break;
+            case PROPERTY:
+                dist.push(" ");
+                dist.push(c.text);
+                break;
+            default:
+                dist.push(c.text);
+        }
+        p = c;
+    }
+    return dist.join('');
+}
+module.exports = Html;

package/coms/compile/Html_test.js

@@ -0,0 +1,5 @@
+var Html = require("./Html");
+var h = new Html;
+var b = h.exec("<h><a #c>b</a><c b=x>d</c><d /><e>2px</h>");
+console.log(h.createScoped(b));
+console.log(h.createString(b));