By Conmajia
我就拿Vue举个栗子。
Vue.js是什么,我想你多半知道,我也甭废话了。
这几天看到写Vue教程的文章突然多起来了。不过,就我所见,在这里发表的所有教程文章,都不支持即时演示,顶多有点儿自己画的图片之类的点缀一下。那么,请问您的文章和官网的交互式教程相比有什么优势?高级技巧或者独创的tricks就算了,那些写基础教程的作者们,您的目标读者全是不看官方文档,「吃不下饲料非得你亲口嚼碎了再喂」的蠢驴吗?或者只是为了记录一下?那刻意选中「发布至BKY首页」是源自内心压抑不住的分享热情吗?
你可是在网上发表文章呢!你以为在写实体书没法儿跟读者交互?
有些作者总是追求阅读量,又写不出什么正经八百的深刻见解,只好四处借鉴,替官方教程在网上义务存档。然而这种鸡肋发出来没几个人看。没招了,那就多抄几篇吧。内容越抄越多,文章越写越烂,一个梦想成为大牛的热血青年终于一步步退化成了知识的搬运工,码过的文章能在首页刷出好几屏,可是自己一个字都没往脑子里去。
抄书破万卷,依然是笨蛋。
但是!
看完我这篇文章,至少可以给你的教程加入一些简单的交互(或者别的骚东西),至少可以阻止你堕入C+V的罪恶深渊,至少你在码code的时候脑子还能保持一时半会儿的清醒。
比如这个被我搬过来的Vue官方例子:
《进入/离开 & 列表过渡:列表的排序过渡》
▲ 点一下按钮
一般的文章做不到生成按钮,点击交互。那种就是我说的典型鸡肋,不如去看官网教程。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官方代码举例:
《介绍:处理用户输入》
{{ message }}
整个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)
如何导出标准模板库(STL)类的实例化和包含STL类对象数据成员的类
早前阅读live555源码做的笔记
windows下 jemalloc编译
简单的BSON OID生成实现
Qt5.9静态库编译VS2015-x64
[trouble shoot]atol和atoll
LeetCode[Linked List]: Remove Duplicates from Sorted List II
HighCharts实现多数据折线图分列显示
用户空间驱动