sookie/blog-web
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases Wiki Activity

JS优化

Browse Source
This commit is contained in:
结发受长生 2019-05-10 00:22:27 +08:00
parent f7b8721ec6
commit c8baba77fe
12 changed files with 166 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scripts/filter.js
View File

@ -5,5 +5,5 @@ hexo.extend.filter.register('before_post_render', function(data){
data.content = data.content.replace(/\]\s*\((?=(?!http).*?\))/gi, data.content = data.content.replace(/\]\s*\((?=(?!http).*?\))/gi,
`](${hexo.config.picture_cdn}`) `](${hexo.config.picture_cdn}`)
} }
return data; return data
}); })

30
themes/yilia/source-src/config/photo-wall.json
View File

@ -1,30 +0,0 @@
[
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00001.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00002.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00003.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00004.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00005.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00006.png"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00007.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00001.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00002.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00003.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00004.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00005.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00006.png"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00007.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00001.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00002.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00003.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00004.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00005.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00006.png"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00007.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00001.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00002.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00003.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00004.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00005.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00006.png"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00007.jpg"}
]

162
themes/yilia/source-src/js/anm.js
View File

@ -1,92 +1,92 @@
function init() { function init() {
var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true; var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
// Main // Main
initHeader(); initHeader();
addListeners(); addListeners();
function initHeader() { function initHeader() {
width = window.innerWidth; width = window.innerWidth;
height = window.innerHeight; height = window.innerHeight;
target = {x: 0, y: height}; target = {x: 0, y: height};
largeHeader = document.getElementById('container'); largeHeader = document.getElementById('container');
largeHeader.style.height = height+'px'; largeHeader.style.height = height+'px';
canvas = document.getElementById('anm-canvas'); canvas = document.getElementById('anm-canvas');
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
ctx = canvas.getContext('2d'); ctx = canvas.getContext('2d');
// create particles // create particles
circles = []; circles = [];
for(var x = 0; x < width*0.5; x++) { for(var x = 0; x < width*0.5; x++) {
var c = new Circle(); var c = new Circle();
circles.push(c); circles.push(c);
} }
animate(); animate();
}
// Event handling
function addListeners() {
window.addEventListener('scroll', scrollCheck);
window.addEventListener('resize', resize);
}
function scrollCheck() {
if(document.body.scrollTop > height) animateHeader = false;
else animateHeader = true;
}
function resize() {
width = window.innerWidth;
height = window.innerHeight;
largeHeader.style.height = height+'px';
canvas.width = width;
canvas.height = height;
}
function animate() {
if(animateHeader) {
ctx.clearRect(0,0,width,height);
for(var i in circles) {
circles[i].draw();
}
}
requestAnimationFrame(animate);
}
// Canvas manipulation
function Circle() {
var _this = this;
// constructor
(function() {
_this.pos = {};
init();
//console.log(_this);
})();
function init() {
_this.pos.x = Math.random()*width;
_this.pos.y = height+Math.random()*100;
_this.alpha = 0.1+Math.random()*0.3;
_this.scale = 0.1+Math.random()*0.3;
_this.velocity = Math.random();
} }
// Event handling this.draw = function() {
function addListeners() { if(_this.alpha <= 0) {
window.addEventListener('scroll', scrollCheck); init();
window.addEventListener('resize', resize); }
} _this.pos.y -= _this.velocity;
_this.alpha -= 0.0005;
function scrollCheck() { ctx.beginPath();
if(document.body.scrollTop > height) animateHeader = false; ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
else animateHeader = true; ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
} ctx.fill();
};
function resize() { }
width = window.innerWidth;
height = window.innerHeight;
largeHeader.style.height = height+'px';
canvas.width = width;
canvas.height = height;
}
function animate() {
if(animateHeader) {
ctx.clearRect(0,0,width,height);
for(var i in circles) {
circles[i].draw();
}
}
requestAnimationFrame(animate);
}
// Canvas manipulation
function Circle() {
var _this = this;
// constructor
(function() {
_this.pos = {};
init();
//console.log(_this);
})();
function init() {
_this.pos.x = Math.random()*width;
_this.pos.y = height+Math.random()*100;
_this.alpha = 0.1+Math.random()*0.3;
_this.scale = 0.1+Math.random()*0.3;
_this.velocity = Math.random();
}
this.draw = function() {
if(_this.alpha <= 0) {
init();
}
_this.pos.y -= _this.velocity;
_this.alpha -= 0.0005;
ctx.beginPath();
ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
ctx.fill();
};
}
} }
export default { init } export default { init }

4
themes/yilia/source-src/js/browser.js
View File

@ -1,6 +1,6 @@
export default { export default {
versions: function() { versions: function() {
var u = window.navigator.userAgent; var u = window.navigator.userAgent
return { return {
trident: u.indexOf('Trident') > -1, //IE内核 trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核 presto: u.indexOf('Presto') > -1, //opera内核
@ -13,6 +13,6 @@ export default {
iPad: u.indexOf('iPad') > -1, //是否为iPad iPad: u.indexOf('iPad') > -1, //是否为iPad
webApp: u.indexOf('Safari') == -1, //是否为web应用程序，没有头部与底部 webApp: u.indexOf('Safari') == -1, //是否为web应用程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') == -1 //是否为微信浏览器 weixin: u.indexOf('MicroMessenger') == -1 //是否为微信浏览器
}; }
}() }()
} }

8
themes/yilia/source-src/js/comment.js
View File

@ -1,6 +1,6 @@
// const AV = require('leancloud-storage'); // const AV = require('leancloud-storage')
window.AV = require('leancloud-storage'); window.AV = require('leancloud-storage')
// const Valine = require('../lib/Valine.min'); // const Valine = require('../lib/Valine.min')
/** /**
* 使用根据Valine项目源代码重新打包 * 使用根据Valine项目源代码重新打包
* 可以支持对于AV对象的传参输入, 而不需要暴露全局变量 * 可以支持对于AV对象的传参输入, 而不需要暴露全局变量
@ -11,6 +11,6 @@ const commentConfig = require("../config/comment.json")
import(/* webpackChunkName: "valine" */ '../lib/Valine.min').then(({ default: Valine }) => { import(/* webpackChunkName: "valine" */ '../lib/Valine.min').then(({ default: Valine }) => {
commentConfig.valine.config.path = window.location.pathname commentConfig.valine.config.path = window.location.pathname
// commentConfig.valine.config.av = AV; // commentConfig.valine.config.av = AV
new Valine(commentConfig.valine.config) new Valine(commentConfig.valine.config)
}) })

20
themes/yilia/source-src/js/mobile.js
View File

@ -21,22 +21,22 @@ function tabActive() {
} }
function getElementLeft(element) {　　　　 function getElementLeft(element) {　　　　
var actualLeft = element.offsetLeft;　　　　 var actualLeft = element.offsetLeft　　　　
var current = element.offsetParent;　　　　 var current = element.offsetParent　　　　
while (current !== null) {　　　　　　 while (current !== null) {　　　　　　
actualLeft += current.offsetLeft;　　　　 actualLeft += current.offsetLeft　　　　
current = current.offsetParent;　　 current = current.offsetParent　　
}　　 }　　
return actualLeft; return actualLeft
}　　 }　　
function getElementTop(element) {　　　　 function getElementTop(element) {　　　　
var actualTop = element.offsetTop;　　　　 var actualTop = element.offsetTop　　　　
var current = element.offsetParent;　　　　 var current = element.offsetParent　　　　
while (current !== null) {　　　　　　 while (current !== null) {　　　　　　
actualTop += current.offsetTop;　　　　　　 actualTop += current.offsetTop　　　　　　
current = current.offsetParent;　　　　 current = current.offsetParent　　　　
}　　　　 }　　　　
return actualTop;　　 return actualTop　　
} }
function scrollStop($dom, top, limit, zIndex, diff) { function scrollStop($dom, top, limit, zIndex, diff) {

45
themes/yilia/source-src/js/photo-wall.js
View File

@ -1,13 +1,36 @@
import photoWallJson from '../config/photo-wall.json' import axios from 'axios'
var content = '<div class="itemContainer">' var groupid = 1, currentIndex = 0
photoWallJson.forEach(item => {
content += `
<div class="item">
<img class="item-img" src="${item.url}" alt=""/>
</div>
`
})
content += '</div>'
document.getElementById('photo-wall').innerHTML = content function loadMore(step) {
// 滚动到底部时调用
axios.get(`${themeConfig.pictureCdn}/photo-wall/${groupid}/list.json`).then(res => {
var itemContainer = document.createElement('div')
var imgItems = '', index = currentIndex
for( ; index<currentIndex+step && index<res.data.files.length ; index++) {
imgItems += `
<div class="item">
<img class="item-img" src="${themeConfig.pictureCdn}/${res.data.files[index].name}" alt=""/>
</div>
`
}
if(index >= res.data.files.length) { // 已到达当前分组列表的末尾
groupid++
if(index<currentIndex+step) { // 如果加载的数据数量不足步长
// 则需要再加载下一个分组, 下一个分组需要加载的图片数量是剩余的步长
loadMore(currentIndex + step - index)
}
} else {
currentIndex = index
}
itemContainer.classList.add('item-container')
itemContainer.innerHTML = imgItems
document.getElementById('photo-wall').appendChild(itemContainer)
}).catch(res => { // 未加载到文件列表, 代表已经没有更多图片
// TODO 显示已没有更多内容
// console.log(res)
})
}
loadMore(20)
//TODO 在滚动到底部时调用loadMore

18
themes/yilia/source-src/js/share.js
View File

@ -4,9 +4,9 @@ function generate(url, opts) {
var url = url.replace(/<%-sUrl%>/g, encodeURIComponent(opts.sUrl)) var url = url.replace(/<%-sUrl%>/g, encodeURIComponent(opts.sUrl))
.replace(/<%-sTitle%>/g, opts.sTitle) .replace(/<%-sTitle%>/g, opts.sTitle)
.replace(/<%-sDesc%>/g, opts.sDesc) .replace(/<%-sDesc%>/g, opts.sDesc)
.replace(/<%-sPic%>/g, encodeURIComponent(opts.sPic)); .replace(/<%-sPic%>/g, encodeURIComponent(opts.sPic))
window.open(url); window.open(url)
} }
var qrcodeInit = false var qrcodeInit = false
@ -47,18 +47,18 @@ function handleClick(type, opts) {
} else if (type === 'google') { } else if (type === 'google') {
generate('https://plus.google.com/share?url=<%-sUrl%>', opts) generate('https://plus.google.com/share?url=<%-sUrl%>', opts)
} else if (type === 'weixin') { } else if (type === 'weixin') {
showWX(); showWX()
} }
} }
let init = function() { let init = function() {
let $sns = document.querySelectorAll('.share-sns'); let $sns = document.querySelectorAll('.share-sns')
if (!$sns || $sns.length === 0) return; if (!$sns || $sns.length === 0) return
let sUrl = window.location.href; let sUrl = window.location.href
let sTitle = document.querySelector('title').innerHTML; let sTitle = document.querySelector('title').innerHTML
let $img = document.querySelectorAll('.article-entry img'); let $img = document.querySelectorAll('.article-entry img')
let sPic = $img.length ? document.querySelector('.article-entry img').getAttribute('src') : ''; let sPic = $img.length ? document.querySelector('.article-entry img').getAttribute('src') : ''
if ((sPic !== '') && !/^(http:|https:)?\/\//.test(sPic)) { if ((sPic !== '') && !/^(http:|https:)?\/\//.test(sPic)) {
sPic = window.location.origin + sPic sPic = window.location.origin + sPic
} }

4
themes/yilia/source-src/js/slider.js
View File

@ -86,7 +86,7 @@ new Vue({
}, },
filters: { filters: {
urlformat: (str) => { urlformat: (str) => {
return (window.themeConfig && window.themeConfig.root) ? window.themeConfig.root + str : '/' + str; return (window.themeConfig && window.themeConfig.root) ? window.themeConfig.root + str : '/' + str
} }
}, },
watch: { watch: {
@ -186,7 +186,7 @@ const waifuTools = {
// 隐藏看板娘 // 隐藏看板娘
setTimeout(function() { setTimeout(function() {
document.querySelector('.waifu').style.display = 'none' document.querySelector('.waifu').style.display = 'none'
}, 1300); }, 1300)
}, },
"tools.eye"() { "tools.eye"() {
// 切换到夜间模式 // 切换到夜间模式

36
themes/yilia/source-src/js/util.js
View File

@ -18,7 +18,7 @@ const Util = (function(){
, a = /<br\s*\/?>/gi , a = /<br\s*\/?>/gi
, i = /\r?\n/g , i = /\r?\n/g
, f = /\s/g , f = /\s/g
, p = {}; , p = {}
for (var s in u) for (var s in u)
p[u[s]] = s; p[u[s]] = s;
return u["&apos;"] = "'", return u["&apos;"] = "'",
@ -32,39 +32,39 @@ const Util = (function(){
}, },
encodeBase16: function(e) { encodeBase16: function(e) {
if (!e) if (!e)
return e; return e
e += ""; e += ""
for (var r = [], n = 0, t = e.length; t > n; n++) for (var r = [], n = 0, t = e.length; t > n; n++)
r.push(e.charCodeAt(n).toString(16).toUpperCase()); r.push(e.charCodeAt(n).toString(16).toUpperCase())
return r.join("") return r.join("")
}, },
encodeBase16forJSON: function(e) { encodeBase16forJSON: function(e) {
if (!e) if (!e)
return e; return e
e = e.replace(/[\u4E00-\u9FBF]/gi, function(e) { e = e.replace(/[\u4E00-\u9FBF]/gi, function(e) {
return escape(e).replace("%u", "\\u") return escape(e).replace("%u", "\\u")
}); })
for (var r = [], n = 0, t = e.length; t > n; n++) for (var r = [], n = 0, t = e.length; t > n; n++)
r.push(e.charCodeAt(n).toString(16).toUpperCase()); r.push(e.charCodeAt(n).toString(16).toUpperCase())
return r.join("") return r.join("")
}, },
decodeBase16: function(e) { decodeBase16: function(e) {
if (!e) if (!e)
return e; return e
e += ""; e += ""
for (var r = [], n = 0, t = e.length; t > n; n += 2) for (var r = [], n = 0, t = e.length; t > n; n += 2)
r.push(String.fromCharCode("0x" + e.slice(n, n + 2))); r.push(String.fromCharCode("0x" + e.slice(n, n + 2)))
return r.join("") return r.join("")
}, },
encodeObject: function(r) { encodeObject: function(r) {
if (r instanceof Array) if (r instanceof Array)
for (var n = 0, t = r.length; t > n; n++) for (var n = 0, t = r.length; t > n; n++)
r[n] = e.encodeObject(r[n]); r[n] = e.encodeObject(r[n])
else if ("object" == typeof r) else if ("object" == typeof r)
for (var o in r) for (var o in r)
r[o] = e.encodeObject(r[o]); r[o] = e.encodeObject(r[o])
else if ("string" == typeof r) else if ("string" == typeof r)
return e.encode(r); return e.encode(r)
return r return r
}, },
loadScript: function(path) { loadScript: function(path) {
@ -73,17 +73,17 @@ const Util = (function(){
$script.setAttribute('src', path) $script.setAttribute('src', path)
}, },
addLoadEvent: function(func){ addLoadEvent: function(func){
var oldonload = window.onload; var oldonload = window.onload
if (typeof window.onload !== "function") { if (typeof window.onload !== "function") {
window.onload = func; window.onload = func
} else { } else {
window.onload = function() { window.onload = function() {
oldonload(); oldonload()
func(); func()
} }
} }
} }
} }
})(); })()
export default Util export default Util

4
themes/yilia/source-src/js/viewer.js
View File

@ -6,7 +6,7 @@ import '../lib/photoswipe/default-skin/default-skin.css'
import Util from './util' import Util from './util'
function init() { function init() {
let pswpElement = document.querySelectorAll('.pswp')[0]; let pswpElement = document.querySelectorAll('.pswp')[0]
let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)')) let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))
Array.prototype.forEach.call($imgArr, ($em, i) => { Array.prototype.forEach.call($imgArr, ($em, i) => {
$em.addEventListener('click', function(){ $em.addEventListener('click', function(){
@ -29,7 +29,7 @@ function init() {
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, { var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
index: parseInt(i), index: parseInt(i),
bgOpacity: 0.8 bgOpacity: 0.8
}); })
gallery.init() gallery.init()
}) })
}) })

4
themes/yilia/source-src/js/waifu.js
View File

@ -7,8 +7,8 @@ const isMobile = (Browser.versions.mobile && window.screen.width < 800)
* 判断浏览器是否支持WebGL * 判断浏览器是否支持WebGL
*/ */
function isSupportWebGL() { function isSupportWebGL() {
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas")
var webGL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); var webGL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl")
return webGL && webGL instanceof WebGLRenderingContext return webGL && webGL instanceof WebGLRenderingContext
} }