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

  • A+
所属分类:qq可爱名字

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

我就拿Vue举个栗子。

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

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

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

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

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

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

但是!

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

比如这个被我搬过来的Vue官方例子:

《进入/离开 & 列表过渡:列表的排序过渡》 Add Remove
{{ item }}

▲ 点一下按钮

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{display:inline-block;margin-right:10px;transition:all 1s}
...

然后在HTML里写上

<div id="list-complete-demo">
  <button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition-group name="list-complete" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-complete-item">
      {{ item }}
  ...
</div>

最后在 script 标签里写上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)
    },
    ...
  }
})

(吧啦吧啦)
(一顿瞎几把分析)
各位读者可以自行新建一个网页,敲入上面的代码,看看实际的运行效果……

您要是读者,是不是觉得这种文章挺操蛋的?真当自己在写实体书呢?我他妈看你这个还不如直接上官网。

几个关键

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

简易代码执行器

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

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

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

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

《介绍:处理用户输入》

{{ message }}

逆转消息

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内。为了解决这个问题,我在全局设置里增加了一个数组型的缓存和三个助手函数,分别用来读取/写入/删除需要共享的变量:

// cache
var steady = new Array();

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

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

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

steady写在全局设置里,它的生命周期是整个session。通过它,各个代码块之间就可以传递变量了。当然,变量定义的先后顺序还是需要你来保障的。这样一来,你在写文章尤其是长文章时就能把代码块分开写在文章不同的位置,而不用把所有的代码都挤在一个run里,影响写作思路。

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

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

其他的骚操作

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

Loading... ▲ 演示

function paintCanvas(canvas){var myChart=echarts.init(document.getElementById(canvas));myChart.showLoading();var json_data={"name":"flare","children":[{"name":"analytics","children":[{"name":"cluster","children":[{"name":"AgglomerativeCluster","value":3938},{"name":"CommunityStructure","value":3812},{"name":"HierarchicalCluster","value":6714},{"name":"MergeEdge","value":743}]},{"name":"graph","children":[{"name":"BetweennessCentrality","value":3534},{"name":"LinkDistance","value":5731},{"name":"MaxFlowMinCut","value":7840},{"name":"ShortestPaths","value":5914},{"name":"SpanningTree","value":3416}]},{"name":"optimization","children":[{"name":"AspectRatioBanker","value":7074}]}]},{"name":"animate","children":[{"name":"Easing","value":17010},{"name":"FunctionSequence","value":5842},{"name":"interpolate","children":[{"name":"ArrayInterpolator","value":1983},{"name":"ColorInterpolator","value":2047},{"name":"DateInterpolator","value":1375},{"name":"Interpolator","value":8746},{"name":"MatrixInterpolator","value":2202},{"name":"NumberInterpolator","value":1382},{"name":"ObjectInterpolator","value":1629},{"name":"PointInterpolator","value":1675},{"name":"RectangleInterpolator","value":2042}]},{"name":"ISchedulable","value":1041},{"name":"Parallel","value":5176},{"name":"Pause","value":449},{"name":"Scheduler","value":5593},{"name":"Sequence","value":5534},{"name":"Transition","value":9201},{"name":"Transitioner","value":19975},{"name":"TransitionEvent","value":1116},{"name":"Tween","value":6006}]},{"name":"data","children":[{"name":"converters","children":[{"name":"Converters","value":721},{"name":"DelimitedTextConverter","value":4294},{"name":"GraphMLConverter","value":9800},{"name":"IDataConverter","value":1314},{"name":"JSONConverter","value":2220}]},{"name":"DataField","value":1759},{"name":"DataSchema","value":2165},{"name":"DataSet","value":586},{"name":"DataSource","value":3331},{"name":"DataTable","value":772},{"name":"DataUtil","value":3322}]},{"name":"display","children":[{"name":"DirtySprite","value":8833},{"name":"LineSprite","value":1732},{"name":"RectSprite","value":3623},{"name":"TextSprite","value":10066}]},{"name":"flex","children":[{"name":"FlareVis","value":4116}]},{"name":"physics","children":[{"name":"DragForce","value":1082},{"name":"GravityForce","value":1336},{"name":"IForce","value":319},{"name":"NBodyForce","value":10498},{"name":"Particle","value":2822},{"name":"Simulation","value":9983},{"name":"Spring","value":2213},{"name":"SpringForce","value":1681}]},{"name":"query","children":[{"name":"AggregateExpression","value":1616},{"name":"And","value":1027},{"name":"Arithmetic","value":3891},{"name":"Average","value":891},{"name":"BinaryExpression","value":2893},{"name":"Comparison","value":5103},{"name":"CompositeExpression","value":3677},{"name":"Count","value":781},{"name":"DateUtil","value":4141},{"name":"Distinct","value":933},{"name":"Expression","value":5130},{"name":"ExpressionIterator","value":3617},{"name":"Fn","value":3240},{"name":"If","value":2732},{"name":"IsA","value":2039},{"name":"Literal","value":1214},{"name":"Match","value":3748},{"name":"Maximum","value":843},{"name":"methods","children":[{"name":"add","value":593},{"name":"and","value":330},{"name":"average","value":287},{"name":"count","value":277},{"name":"distinct","value":292},{"name":"div","value":595},{"name":"eq","value":594},{"name":"fn","value":460},{"name":"gt","value":603},{"name":"gte","value":625},{"name":"iff","value":748},{"name":"isa","value":461},{"name":"lt","value":597},{"name":"lte","value":619},{"name":"max","value":283},{"name":"min","value":283},{"name":"mod","value":591},{"name":"mul","value":603},{"name":"neq","value":599},{"name":"not","value":386},{"name":"or","value":323},{"name":"orderby","value":307},{"name":"range","value":772},{"name":"select","value":296},{"name":"stddev","value":363},{"name":"sub","value":600},{"name":"sum","value":280},{"name":"update","value":307},{"name":"variance","value":335},{"name":"where","value":299},{"name":"xor","value":354},{"name":"-","value":264}]},{"name":"Minimum","value":843},{"name":"Not","value":1554},{"name":"Or","value":970},{"name":"Query","value":13896},{"name":"Range","value":1594},{"name":"StringUtil","value":4130},{"name":"Sum","value":791},{"name":"Variable","value":1124},{"name":"Variance","value":1876},{"name":"Xor","value":1101}]},{"name":"scale","children":[{"name":"IScaleMap","value":2105},{"name":"LinearScale","value":1316},{"name":"LogScale","value":3151},{"name":"OrdinalScale","value":3770},{"name":"QuantileScale","value":2435},{"name":"QuantitativeScale","value":4839},{"name":"RootScale","value":1756},{"name":"Scale","value":4268},{"name":"ScaleType","value":1821},{"name":"TimeScale","value":5833}]},{"name":"util","children":[{"name":"Arrays","value":8258},{"name":"Colors","value":10001},{"name":"Dates","value":8217},{"name":"Displays","value":12555},{"name":"Filter","value":2324},{"name":"Geometry","value":10993},{"name":"heap","children":[{"name":"FibonacciHeap","value":9354},{"name":"HeapNode","value":1233}]},{"name":"IEvaluable","value":335},{"name":"IPredicate","value":383},{"name":"IValueProxy","value":874},{"name":"math","children":[{"name":"DenseMatrix","value":3165},{"name":"IMatrix","value":2815},{"name":"SparseMatrix","value":3366}]},{"name":"Maths","value":17705},{"name":"Orientation","value":1486},{"name":"palette","children":[{"name":"ColorPalette","value":6367},{"name":"Palette","value":1229},{"name":"ShapePalette","value":2059},{"name":"SizePalette","value":2291}]},{"name":"Property","value":5559},{"name":"Shapes","value":19118},{"name":"Sort","value":6887},{"name":"Stats","value":6557},{"name":"Strings","value":22026}]},{"name":"vis","children":[{"name":"axis","children":[{"name":"Axes","value":1302},{"name":"Axis","value":24593},{"name":"AxisGridLine","value":652},{"name":"AxisLabel","value":636},{"name":"CartesianAxes","value":6703}]},{"name":"controls","children":[{"name":"AnchorControl","value":2138},{"name":"ClickControl","value":3824},{"name":"Control","value":1353},{"name":"ControlList","value":4665},{"name":"DragControl","value":2649},{"name":"ExpandControl","value":2832},{"name":"HoverControl","value":4896},{"name":"IControl","value":763},{"name":"PanZoomControl","value":5222},{"name":"SelectionControl","value":7862},{"name":"TooltipControl","value":8435}]},{"name":"data","children":[{"name":"Data","value":20544},{"name":"DataList","value":19788},{"name":"DataSprite","value":10349},{"name":"EdgeSprite","value":3301},{"name":"NodeSprite","value":19382},{"name":"render","children":[{"name":"ArrowType","value":698},{"name":"EdgeRenderer","value":5569},{"name":"IRenderer","value":353},{"name":"ShapeRenderer","value":2247}]},{"name":"ScaleBinding","value":11275},{"name":"Tree","value":7147},{"name":"TreeBuilder","value":9930}]},{"name":"events","children":[{"name":"DataEvent","value":2313},{"name":"SelectionEvent","value":1880},{"name":"TooltipEvent","value":1701},{"name":"VisualizationEvent","value":1117}]},{"name":"legend","children":[{"name":"Legend","value":20859},{"name":"LegendItem","value":4614},{"name":"LegendRange","value":10530}]},{"name":"operator","children":[{"name":"distortion","children":[{"name":"BifocalDistortion","value":4461},{"name":"Distortion","value":6314},{"name":"FisheyeDistortion","value":3444}]},{"name":"encoder","children":[{"name":"ColorEncoder","value":3179},{"name":"Encoder","value":4060},{"name":"PropertyEncoder","value":4138},{"name":"ShapeEncoder","value":1690},{"name":"SizeEncoder","value":1830}]},{"name":"filter","children":[{"name":"FisheyeTreeFilter","value":5219},{"name":"GraphDistanceFilter","value":3165},{"name":"VisibilityFilter","value":3509}]},{"name":"IOperator","value":1286},{"name":"label","children":[{"name":"Labeler","value":9956},{"name":"RadialLabeler","value":3899},{"name":"StackedAreaLabeler","value":3202}]},{"name":"layout","children":[{"name":"AxisLayout","value":6725},{"name":"BundledEdgeRouter","value":3727},{"name":"CircleLayout","value":9317},{"name":"CirclePackingLayout","value":12003},{"name":"DendrogramLayout","value":4853},{"name":"ForceDirectedLayout","value":8411},{"name":"IcicleTreeLayout","value":4864},{"name":"IndentedTreeLayout","value":3174},{"name":"Layout","value":7881},{"name":"NodeLinkTreeLayout","value":12870},{"name":"PieLayout","value":2728},{"name":"RadialTreeLayout","value":12348},{"name":"RandomLayout","value":870},{"name":"StackedAreaLayout","value":9121},{"name":"TreeMapLayout","value":9191}]},{"name":"Operator","value":2490},{"name":"OperatorList","value":5248},{"name":"OperatorSequence","value":4190},{"name":"OperatorSwitch","value":2581},{"name":"SortOperator","value":2023}]},{"name":"Visualization","value":16540}]}]};myChart.hideLoading();myChart.setOption(option={tooltip:{trigger:'item',triggerOn:'mousemove'},series:[{type:'tree', data:[json_data],top:'18%',bottom:'14%',layout:'radial',symbol:'emptyCircle',symbolSize:7,initialTreeDepth:3,animationDurationUpdate:750}]})}paintCanvas('chart1');

或者做点小小的统计:

Loading... ▲ 演示

function getVirtulData(year) {
year = year || '2019';
var date = +echarts.number.parseDate(year + '-01-01');
var end = +echarts.number.parseDate((+year + 1) + '-01-01');
var dayTime = 3600 * 24 * 1000;
var data = [];
for (var time = date; time < end; time += dayTime) {
data.push([
echarts.format.formatTime('yyyy-MM-dd', time),
Math.floor(Math.random() * 10000)
]);
}
return data;
}
function paintCanvas(canvas) {
var myChart = echarts.init(document.getElementById(canvas));
myChart.showLoading();
var data = getVirtulData(2018);
option = {
backgroundColor: '#f5f5f5',
title: {
top: 30,
text: '2018 年我每天的开销',
subtext: '数据纯属虚构',
left: 'center',
textStyle: {
color: '#333'
}
},
tooltip: {
trigger: 'item'
},
legend: {
top: '30',
left: '100',
data: ['金额', 'Top 10'],
textStyle: {
color: '#333'
}
},
calendar: [{
top: 100,
left: 'center',
range: ['2018-01-01', '2018-06-30'],
splitLine: {
show: true,
lineStyle: {
color: '#000',
width: 4,
type: 'solid'
}
},
yearLabel: {
formatter: '{start} 上半年',
textStyle: {
color: '#333'
}
},
itemStyle: {
normal: {
color: '#323c48',
borderWidth: 1,
borderColor: '#111'
}
}
}, {
top: 300,
left: 'center',
range: ['2018-07-01', '2018-12-31'],
splitLine: {
show: true,
lineStyle: {
color: '#000',
width: 4,
type: 'solid'
}
},
yearLabel: {
formatter: '{start} 下半年',
textStyle: {
color: '#333'
}
},
itemStyle: {
normal: {
color: '#323c48',
borderWidth: 1,
borderColor: '#111'
}
}
}],
series: [{
name: '金额',
type: 'scatter',
coordinateSystem: 'calendar',
data: data,
symbolSize: function (val) {
return val[1] / 500;
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
}, {
name: '金额',
type: 'scatter',
coordinateSystem: 'calendar',
calendarIndex: 1,
data: data,
symbolSize: function (val) {
return val[1] / 500;
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
}, {
name: 'Top 10',
type: 'effectScatter',
coordinateSystem: 'calendar',
calendarIndex: 1,
data: data.sort(function (a, b) {
return b[1] - a[1];
}).slice(0, 10),
symbolSize: function (val) {
return val[1] / 500;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}, {
name: 'Top 10',
type: 'effectScatter',
coordinateSystem: 'calendar',
data: data.sort(function (a, b) {
return b[1] - a[1];
}).slice(0, 10),
symbolSize: function (val) {
return val[1] / 500;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}]
};
myChart.hideLoading();
myChart.setOption(option);
}
paintCanvas('chart2');

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

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

The End. \(\Box\)