反正你们写的都是没有即时演示的教程，我为什么不去看官方文档？

时间：2019-02-01 19:54:10 阅读：227 评论：0 收藏：0 [点我收藏+]

标签：opacity erro reverse convert tor ber box 没有 pad

我就拿Vue举个栗子。

Vue.js是什么，我想你多半知道，不然你也不会打开这篇文章。

这几天看到写Vue教程的文章突然多起来了。不过，就我所见，在这里发表的所有教程文章，都不支持即时演示，顶多有点儿自己画的图片之类的点缀一下。那么，请问您的文章和官网的交互式教程相比有什么优势？高级技巧或者独创的tricks就算了，那些写基础教程的作者们，您的目标读者全是不看官方文档，吃不下饼干非得您给嚼碎了再喂的那种蠢驴吗？

但是！

看完这篇文章，你至少可以在你的教程里加入一些简单的Vue交互（或者别的骚东西）！就像这个被我搬过来的官方例子一样：

《进入/离开 & 列表过渡：列表的排序过渡》

▲ 点一下按钮

new Vue({
el: ‘#list-complete-demo‘,
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
}
}
})

几个关键

给文章加上interactive内容，尤其是在第三方平台（比如BKY）发表的文章，没有插件功能，必须用到HTML权限。但是文章内的<script>已经被屏蔽了，直接写是不会解析的。所以为了让文章能交互，你得绕过script的屏蔽。

简易代码执行器

我在《如何绕过BKY对 script 的屏蔽》里提供了一个简易的解决方案，我称为简易代码执行器（ECE）。就目前的效果而言，正如你在这篇文章里看到的，它的效果还挺好的，至少够用了。通过每篇文章各自执行代码，你可以省去在全局设置里不断添加新代码的烦恼。相信我，当你写的文章越来越多，global maintenance会把你逼疯的。等到哪天不用这些代码了，直接删除文章就好，免去了在狭小的设置对话框的犄角旮旯里寻找作废代码的烦恼。

ECE会读取文章里所有可识别的代码块，然后分别执行它们。对我这个博客来说，一个标准的文章内嵌代码块是用 run 或者 runearly 标签包围的代码块：

<run>
    <!-- some code -->
</run>

文章加载完毕后，ECE就会开始逐个执行代码块里的some code。拿一个简单的Vue官方代码举例：

《介绍：处理用户输入》

var app5 = new Vue({
el: ‘#app-5‘,
data: {
message: ‘Hello Vue.js!‘
},
methods: {
reverseMessage: function () {
this.message = this.message.split(‘‘).reverse().join(‘‘)
}
}
})

普通的博客文章（就是我吐槽的那些基础教程）是没法做到上面这样真正使用Vue.js实现的交互效果的。如果不用别的招，它们只能在文章里干瘪地罗列出一堆代码，读者看了半天也是满头雾水，依然不知道这玩意儿到底是个什么样。有心的读者也许会按图索骥，摸到官网去看文档和交互演示，心中满是问号：为什么不从一开始就直接看官网。而意志薄弱的哥们儿，可能就此放弃阅读，关掉网页，顺便再骂上一句：辣鸡文章。

如果用了内嵌代码块这种methodology，只需要在文章正文写上HTML代码：

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>

然后把Vue语句写到一个run标签里

<run>
var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function() {
            this.message = this.message.split('').reverse().join('')
        }
    }
})
</run>

文章正文内容加载完后，ECE会执行这些Vue代码，就能得到上面的交互效果。

简易代码执行器的实现很简单，它分为标准执行阶段和推迟执行阶段。由 runearly 包裹的代码块在DOM加载完毕后就开始执行，相当于：

$(function() {
    /* 代码 */
});

run里的代码需要等到文档全部载入后才执行，相当于：

$(window).load(function() {
    /* 代码 */
});

这很好理解，如果想不明白，看看我前面提到的那篇文章。

多个代码块之间传递变量

我的代码是用eval执行的，这带来一个问题：多个run代码块之间没法直接传递变量。比如我写：

<run>
    var a = 1;
</run>
<run>
    a = a + 1;
</run>

第二个run是没法执行的，浏览器会报错：

ReferenceError: a is not defined

a的生命周期只限于第一个run内。为了解决这个问题，我在全局设置里增加了一个缓存变量和三个助手函数，分别用来读取／写入／删除需要共享的变量：

var steady = new Array();

function getValue(name) {
    return steady[name];
}

function setValue(name, value) {
    steady[name] = value;
}

function removeValue(name) {
    steady.remove(name);
}

steady因为是写在全局设置里的，它的生命周期是整个session。通过它，各个代码块之间就可以传递变量了，这样，你在写文章尤其是长文章时就能把代码块分开写在文章不同的位置，而不用把所有的代码都挤在一个run里，影响写作思路。

另外一种变量传递解决方案是使用cookie完成。Cookie优点在于可以在不同页面间传递值，这一点上面的方案是办不到的。但是它的缺点也和优点一样明显。Cookie没办法直接保存除了字符串和数字之外的变量，比如数组。好在大部分网页内容和变量都可以通过序列化转换成JSON字符串进行保存／读取。Cookie的操作可以借用js-cookie完成，非常方便。

其他的骚操作

有了运行代码块的能力，你可以在讲解Vue的时候，引入其他的内容配合讲解。比如把Vue和ECharts结合起来，实现图文并茂的讲解和阐述。轻轻松松就可以画出精美的交互式图表，再搭配Vue的动态绑定插槽等等。这样装修之后文章自然完爆那些用着默认主题，呆板、无神的鸡肋文。下面这两张图都是可以点的，试试看：

▲ 数据演示

或者为你强大的项目画个错综复杂秀破天际的类关系图：

▲ 类关系图

function paintCanvas(canvas,data,title=‘‘){var chart=echarts.init(document.getElementById(canvas));chart.setOption({title:{text:title},tooltip:{},legend:{data:[‘‘]},dataZoom:[{id:‘dataZoomX‘,type:‘slider‘,xAxisIndex:[0],filterMode:‘filter‘}],xAxis:{type:‘category‘,data:data.x},yAxis:{scale:true},series:[{name:‘‘,type:‘bar‘,data:data.y}],grid:{top:10}})}
paintCanvas(‘chart2‘,{x:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99],y:[0.009999,0.0099791,0.0099851,0.010045,0.0099323,0.0100227,0.009973,0.0099823,0.0099812,0.0100117,0.0099555,0.0100219,0.0099808,0.0099235,0.0100256,0.0100195,0.0100347,0.0099649,0.0099957,0.0100012,0.0099983,0.0100443,0.0100185,0.0100028,0.0099762,0.0099998,0.010038,0.0099765,0.0100109,0.01005,0.01003,0.0100054,0.0099526,0.010001,0.0100172,0.0100067,0.0099779,0.0100547,0.0100519,0.009982,0.0100288,0.0100559,0.0100406,0.0099738,0.009963,0.0099715,0.0099753,0.0099745,0.0099862,0.0099928,0.0100211,0.009992,0.0100048,0.0099731,0.0100005,0.0100157,0.0100208,0.0099976,0.0099595,0.01004,0.0100246,0.0100253,0.0100169,0.0099769,0.0099607,0.0100206,0.010013,0.0099873,0.0099567,0.0099987,0.0099625,0.0100595,0.0099338,0.0100009,0.0100181,0.0099867,0.0100141,0.010015,0.0099953,0.0100089,0.0100287,0.0100257,0.0100045,0.0100001,0.0100012,0.0100357,0.0099458,0.0100448,0.0099926,0.0099496,0.0100401,0.0099849,0.0099666,0.0100041,0.0100289,0.0099873,0.009978,0.0099922,0.0099923,0.0100045]});