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

By Conmajia

我就拿Vue举个栗子。

Vue.js是什么，我想你多半知道，我也甭废话了。

这几天看到写Vue教程的文章突然多起来了。不过，就我所见，在这里发表的所有教程文章，都不支持即时演示，顶多有点儿自己画的图片之类的点缀一下。那么，请问您的文章和官网的交互式教程相比有什么优势？高级技巧或者独创的tricks就算了，那些写基础教程的作者们，您的目标读者全是不看官方文档，「吃不下饲料非得你亲口嚼碎了再喂」的蠢驴吗？或者只是为了记录一下？那刻意选中「发布至BKY首页」是源自内心压抑不住的分享热情吗？

你可是在网上发表文章呢！你以为在写实体书没法儿跟读者交互？

有些作者总是追求阅读量，又写不出什么正经八百的深刻见解，只好四处借鉴，替官方教程在网上义务存档。然而这种鸡肋发出来没几个人看。没招了，那就多抄几篇吧。内容越抄越多，文章越写越烂，一个梦想成为大牛的热血青年终于一步步退化成了知识的搬运工，码过的文章能在首页刷出好几屏，可是自己一个字都没往脑子里去。

抄书破万卷，依然是笨蛋。

坚决抵制超文本抄书匠、官方文档义务保管员、低幼知识收藏家在首页倾倒垃圾。

但是！

看完我这篇文章，至少可以给你的教程加入一些简单的交互（或者别的骚东西），至少可以阻止你堕入C+V的罪恶深渊，至少你在码code的时候脑子还能保持一时半会儿的清醒。

比如这个被我搬过来的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)}}})

一般的文章做不到生成按钮，点击交互。那种就是我说的典型鸡肋，不如去看官网教程。BKY垃圾遍地，你也就在我这儿能点几下按钮玩玩儿，看看实际效果。搁别地儿的文章，上面的例子多半会变成这个德行：

（吧啦吧啦废话）
我们来看一个例子：
首先定义样式
.list-complete-item{
...
然后在HTML里写上
<div id="list-complete-demo">
  <button v-on:click="add">Add</button>
  ...
最后在 script 标签里写上Vue代码
new Vue({
  el: '#list-complete-demo',
  data: {
    ...
（一顿瞎几把分析）
各位读者可以自行新建一个网页，敲入上面的代码，看看实际的运行效果我看你呢？……
（吧啦吧啦废话）

您要是读者，是不是觉得这种文章挺操蛋的？真当自己在写实体书呢？逼逼半天连个实际效果都秀不出来，老子看你这个还不如直接上官网。

几个关键

给文章加上interactive的内容，尤其是在第三方平台（比如BKY）发表的文章，没有插件功能，必须用到HTML权限。但是文章内的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('')}}})

整个page加载完成后，ECE开始运行，读取run内的文字$('run').text()，得到代码块，通过eval执行，更新{{message}}，并绑定Vue函数，实现按钮功能。

前边儿我说过，普通的博客文章是没法做到这样真正使用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的实现很简单，它分为标准执行阶段（runearly）和推迟执行阶段（run）。标准执行阶段的代码块是在DOM树加载完即就开始执行，相当于：

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

推迟执行阶段的代码则需要等到文档全部载入后才执行，相当于：

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

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

多个代码块之间传递变量

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

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

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

ReferenceError: a is not defined

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

// cache
var bank = new Array();

function getValue(key) {
    return bank[key];
}

function setValue(key, value) {
    bank[key] = value;
}

function removeValue(key) {
    bank.remove(key);
}

bank的生命周期是整个session。通过它，各个代码块之间可以互相传递变量。上面的那俩稍微修改一下就能正常工作：

<run>
    setValue("a", 1);
</run>
<run>
    setValue("a", getValue("a") + 1);
</run>

当然，变量定义的先后顺序还是需要你来保障的。这样一来，你在写文章尤其是长文章时就能把代码块分开写在文章不同的位置，而不用把所有的代码都挤在一个run里，影响写作思路。

要注意，代码块里定义的函数也受到生命周期的影响，你得把函数也缓存起来。

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

其他的骚操作

有了运行代码块的能力，你可以在讲解Vue的时候，引入其他的内容配合讲解。比如绘制精美的交互式图表，再搭配Vue的动态绑定、插槽等等特性，写一篇图文并茂的文章，自然完爆那些用着默认主题，呆板、无神的鸡肋文。

正在画图…

▲ 演示

或者做点小小的统计：

正在画图…

▲ 演示

反正都是刷刷存在感，为什么不用你脑中那些乱七八糟的JS知识，让你的文章更骚一点？你说呢，秀儿？

本该耀眼的文章，你怎么好意思让它丑陋不堪，寡淡无味，泯然于众？！

The End. $\Box$


if(jQuery('#no-reward').text() == 'true') jQuery('.bottom-reward').addClass('hidden');

posted on 2019-02-01 19:05 Conmajia 阅读(1407) 评论(5) 编辑收藏举报

刷新评论刷新页面返回顶部

Conmajia

导航

公告