Skip to content

Commit

Permalink
update to v3
Browse files Browse the repository at this point in the history 
update to v3
  • Loading branch information
@tmplink
tmplink committed Apr 10, 2019
1 parent e55324b commit b91d904
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 96 deletions.
19 changes: 6 additions & 13 deletions README_CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,19 @@
</p>

# 概述
domloader是一个模版加载小工具，帮助你简单地构建前后端分离的web前端程序。
无需太多复杂的学习成本，看完本页即可上手，甚至可以立即应用到你现有的项目。
你可以像使用其他混合 html 的后端语言一样，对你的前端项目文件进行模块化处理。
比如将页头和页脚与页面主体内容单独抽取出来，形成模块，批量应用到其他类似页面。
domloader 帮助你构建一个模块化的纯前端项目，而无需用到 react 或者 vue.js 这类技术。
没有学习成本，不需要去学额外的语法，也不用编译，只需要用原生 js 就足够了。

另外，domloader在加载时会显示一个进度界面。
进度界面会遮盖加载过程, 这类似于 iOS 上 app 启动界面机制。
因此可以缓解因网速慢，或者页面资源较多而导致显示不完全问题。
加载进度是真实的加载进度，并非模拟。
domloader 能做的事情很简单，你可以将页面中可重用的部分拆出来，并随时在其他页面重组。就像 PHP 的 include 那样！

你可以到这里浏览domloader的实际应用。
同时也欢迎应用了domloader的作品在此展示。
你可以到这里浏览 domloader 的实际应用。
同时也欢迎应用了 domloader 的作品在此展示。

* [TMP.link - 一个临时文件中转站](http://tmp.link)
* [Bootstrap 4 简体中文文档](http://bs4.vx.link)

目前已经实现的功能：
* 加载html，css以及js
* 加载 html，css 以及 js
* 可以设置一个加载进度界面的图标
* 加载时显示进度条
* 自动前缀修正，解决项目中的各种路径问题
Expand All @@ -36,8 +31,6 @@ domloader 由一个 js 文件和一个 css 文件组成，合计约 12 kb。

# 队列加载
为了确保页面功能不混乱，domloader 会队列加载预设的内容（浏览器通常是并发加载页面资源）。
这种方式在首次访问时可能会稍微降低页面的加载速度，而在之后瞬间完成。
计划在后期优化加载速度以及动画效果。

# 包含
domloader 的核心功能需要 jQuery 支持才能实现，因此在使用 domloader 时请务必加载 jQuery 。
Expand Down
13 changes: 4 additions & 9 deletions README_EN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,10 @@
</p>

# Introduction
Domloader is a template tool that helps you to easily build front-end website.
you can get started after reading this page, or even apply it to your existing project immediately.
You can modularize your front-end project just like any other hybrid html backend language(etc.. php).
For example, the page header and footer are extracted separately from the page body content to form a module and reference to other pages.

In addition, the domloader will display a loading interface when it loads.
The loading interface will cover the default loading process, like the app launcher interface on iOS.
Solve the problem of incomplete display due to slow network speed or a lot of page resources.
The loading progress is the real loading progress, not the simulation.
Domloader helps you build a modular, pure front-end project without the need for techniques such as react or vue.js.
There is no learning cost, no need to learn additional grammar, no compilation, just use native js is enough.

With domloader, you can take apart the reusable parts of the page and reorganize them on other pages at any time. Just like PHP's include!

You can browse the applications built with domloader here.
Also welcome applications built with domloader are shown here.
Expand Down
186 changes: 112 additions & 74 deletions domloader.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
/*!
* domloader.js
* v2.3
* v3
* https://github.com/tmplink/domloader/
*
* Licensed GPLv3 © TMPLINK STUDIO
*/

var domloader = {
queue: [],
queue_async:[],
queue_count: 0,
queue_total: 0,
queue_after: [],
queue_preload: [],
loading_page: false,
Expand All @@ -24,9 +25,9 @@ var domloader = {
animation_stime: 0,

preload: function (path) {
domloader.id++;
domloader.log('Preload::' + path);
domloader.queue_preload.push(
this.id++;
this.log('Preload::' + path);
this.queue_preload.push(
function () {
$.get(domloader.root + path, {v: Date.now()}, function (response) {
$('head').append(response);
Expand All @@ -37,104 +38,141 @@ var domloader = {
},

css: function (path) {
domloader.log('Include::CSS::' + path);
domloader.queue.push(
function () {
domloader.id++;
this.queue_count++;
this.queue_total++;
this.log('Include::CSS::' + path);
this.queue.push([
function () {
$.get(domloader.root + path, {v: domloader.version}, function () {
domloader.async();
}, 'text');
},
function () {
domloader.id++;
$.get(domloader.root + path, {v: domloader.version}, function () {
$('head').append("<link async id=\"domloader_" + domloader.id + "\" rel=\"stylesheet\" href=\"" + domloader.root + path + '?version=' + domloader.version + "\" >\n");
$('#domloader_' + domloader.id).ready(function () {
domloader.load(path);
});
}
);
domloader.sync();
}, 'text');
}
]);
},

html: function (dom, path) {
domloader.id++;
domloader.log('Include::HTML::' + path);
domloader.queue_async.push(
function () {
domloader.load(path);
$.get(domloader.root + path, {v: domloader.version}, function (response) {
$(dom).replaceWith(response);
}, 'text');
}
);
this.id++;
this.queue_count++;
this.queue_total++;
this.log('Include::HTML::' + path);
this.queue.push([
function () {
$.get(domloader.root + path, {v: domloader.version}, function (response) {
domloader.async();
}, 'text');
},
function () {
$.get(domloader.root + path, {v: domloader.version}, function (response) {
$(dom).replaceWith(response);
domloader.sync();
}, 'text');
}
]);
},

js: function (path) {
domloader.log('Include::JS::' + path);
domloader.queue.push(
function () {
$.get(domloader.root + path, {v: domloader.version}, function (response) {
domloader.id++;
$('body').append("<script id=\"domloader_" + domloader.id + "\" type=\"text/javascript\">\n" + response + "</script>\n");
domloader.load(path);
}, 'text');
}
);
this.queue_count++;
this.queue_total++;
this.log('Include::JS::' + path);
this.queue.push([
function () {
$.get(domloader.root + path, {v: domloader.version}, function (response) {
domloader.async();
}, 'text');
},
function () {
$.get(domloader.root + path, {v: domloader.version}, function (response) {
domloader.id++;
$('body').append("<script id=\"domloader_" + domloader.id + "\" type=\"text/javascript\">\n" + response + "</script>\n");
domloader.sync();
}, 'text');
}
]);
},

load: function (src) {
if (domloader.queue_preload.length !== 0) {
var fn = domloader.queue_preload.shift();
if (this.queue_preload.length !== 0) {
var fn = this.queue_preload.shift();
if (typeof (fn) === 'function') {
fn();
}
return false;
} else {
this.init_loading_page();
}
if (domloader.queue.length === 0 && domloader.queue_async.length === 0) {
if (domloader.queue_after.length !== 0) {
if (this.queue.length === 0) {
if (this.queue_after.length !== 0) {
var cb = null;
for (cb in domloader.queue_after) {
domloader.queue_after[cb]();
for (cb in this.queue_after) {
this.queue_after[cb]();
}
}

if (domloader.progressbar === false) {
if (this.progressbar === false) {
this.autofix();
}

} else {
if (domloader.progressbar) {
domloader.total = domloader.queue.length;
domloader.progressbar = false;
if (this.progressbar) {
this.progressbar = false;
$('#domloader_loading_bg').show();
$('#domloader_loading_show').show();
}
}
if (typeof (src) !== 'undefined') {
var percent = Math.ceil((this.total - (this.queue.length+this.queue_async.length)) / this.total * 100);
if (domloader.animation) {
$('.domloader_curRate').animate({'width': percent + '%'}, this.animation_stime, function () {
if (percent === 100) {
$('#domloader_loading_show').fadeOut(300);
$('#domloader_loading_bg').fadeOut(300);
$('body').css('overflow', '');
}
});
} else {
//
if (this.queue.length !== 0) {
var cb = null;
for (cb in this.queue) {
this.queue[cb][0]();
}
}
},

async: function () {
this.queue_count--;
if (this.queue_count === 0) {
domloader.log('Sync...');
this.sync();
} else {
this.draw();
}
},

sync: function () {
domloader.log(this.queue.length);
if (this.queue.length !== 0) {
var fn = this.queue.shift();
fn[1]();
return false;
} else {
this.draw();
this.load();
}
},

draw: function () {
var percent = Math.ceil((this.queue_total - this.queue_count) / this.queue_total * 100);
if (this.animation) {
$('.domloader_curRate').animate({'width': percent + '%'}, this.animation_stime, function () {
if (percent === 100) {
$('#domloader_loading_show').fadeOut(300);
$('#domloader_loading_bg').fadeOut(300);
$('body').css('overflow', '');
}
});
} else {
if (percent === 100) {
$('#domloader_loading_show').fadeOut(300);
$('#domloader_loading_bg').fadeOut(300);
$('body').css('overflow', '');
}

domloader.log("Loaded::" + src);
}
if (domloader.queue_async.length !== 0) {
var fn = domloader.queue_async.shift();
if (typeof (fn) === 'function') {
fn();
}
return true;
}
var fn = domloader.queue.shift();
if (typeof (fn) === 'function') {
fn();
}
},

Expand Down Expand Up @@ -173,12 +211,12 @@ var domloader = {
},

animation_slice: function () {
if ((this.queue.length+this.queue_async.length) > 1) {
this.animation_stime = Math.ceil(this.animation_time / (this.queue.length+this.queue_async.length));
if (this.queue.length > 1) {
this.animation_stime = Math.ceil(this.animation_time / this.queue.length);
} else {
this.animation_stime = this.animation_time;
}
console.log('Animation slice time: ' + this.animation_stime + ' ,total: ' + this.animation_time);
domloader.log('Animation slice time: ' + this.animation_stime + ' ,total: ' + this.animation_time);
},

init_loading_page: function () {
Expand All @@ -203,7 +241,7 @@ var domloader = {

log: function (msg) {
if (this.debug) {
console.log(msg);
domloader.log(msg);
}
}
};

0 comments on commit b91d904

Please sign in to comment.