前言
今天无聊，整整自己的blog，发现【影集部分】（blog当中的一个小版块）挺有意思，于是想着多添加一些有意思的图片上去。但是，发现原来的图片网页里写死了图片添加的位置和方式，不是很友好，遂改之！
分析
自己的图片全部放在自建图床上面，除图片名以外的前缀部分都一样。此外，已有的影集页面模板已经比较完备，样式等都已经写好了，图片项的模板也比较固定。所以我是不是只需要维护一个我想添加的图片列表就好了呢，然后在影集页面用代码去循环列表，然后用js脚本动态往页面塞图片内容。想法可行！
尝试
由于自己前端只是个半吊子，像字符串替换啊、Json解析啊、往页面特定标签插内容啊什么的都要Google，趟了一些坑。随后出了第一版，基本功能都算是满足了的，但发现一个问题，就是我把列表写死在js代码里面了，后期维护难道还要打开代码去编辑列表变量？不行！我要把这个列表放在一个在线配置项里面，比如放在一个Json文件里面，然后Js自己去请求下载解析。
落地
按照上面的想法，这个配置文件放在哪里呢，OSS仓库里？不对，如果放在OSS仓库里，第一剥离了文件相关性，第二不方便修改，遂弃之。所以就直接放在blog代码Repo里吧。查看仓库发现已经存在一个json文件了，搜索引用，并没有发现其它位置有引用，所以直接利用之。
踩坑
有了以上的基础，很明显接下来需要做的就是在JS里down下来配置文件然后解析就好了。但前端菜鸡的我愣是在这里卡住了，尝试过$.get()的方式，$.getJson()，Ajax的方式，一步一步解决，在Console控制台能获取到，但写在代码里就是无法获取，怀疑是JS引用文件的问题，但控制台并没有报错，查看源码也印证了JS已经引入的猜想。然后在关键位置打日志，并在控制台去打印相应变量，发现就是没有发起请求的问题，网络也没有对应请求记录。找到了根源。
解决
遂去查看jQuery API文档，看见下面这样的一段实例代码：
$(document).ready(function(){
$("button").click(function(){
$.getJSON("demo_ajax_json.js",function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
});
因此怀疑是不是我之前的写法其实只是相当于定义了一个函数，而没有对应的事件触发执行它。遂改之，观察控制台日志输出和网络请求记录，果然，发起请求了，后面的也就相对简单了。更新：最后发现原因并不是假设的这样，是异步请求的问题。
总结
最后的效果如我设计所想，更改添加等操作要方便多了，最好的方式当然还是弄个UI界面填写提交，或者集成一个自己的浏览器插件专门针对图床页进行定制，当发现需要的图片的时候就add一下然后插件自己帮我更新配置项就好了。但是考虑到又是插件又是GitHub key什么的，又引入不少复杂性，所以就这样了，对我一个开发人员来说不是什么大问题。
最后
最后附上简短的代码片段：
<script>
var grid = document.querySelector('.grid');
var html = '';
html += '<div class="grid-size"></div>';
$.ajaxSettings.async = false;
$.getJSON(
"https://augustrush8.com/manifest.json",
function(data){
var img_name = data.img_name;
var template = '<div class="grid-item"><a class="view" href="http://image.augustrush8.com/images/album/{template}.jpg" title="{template}" rel="vsco"><img src="http://image.XXX.com/images/album/{template}.jpg"></a></div>';
for(let i = 0; i < img_name.length; i++){
var temp = template.replace(/{template}/g, img_name[i]);
html += temp;
}
grid.innerHTML = html;
}
);
var msnry = new Masonry(grid, {
itemSelector: '.grid-item',
columnWidth: '.grid-size',
gutter: 10
});
imagesLoaded(grid).on('progress', function() {
msnry.layout();
});
</script>
网友评论