lia_acp_0
Version:
//初始项目构建案例：创建config.js文件 const acp = require('liang_acp_0');
282 lines (251 loc) • 8.76 kB
JavaScript
const fs = require('fs');
const path = require('path');
function init(fileObj) {
const dirPath = '../../';
traverse(fileObj, dirPath);
}
function traverse(fileObj, dirpath) {
for(const i in fileObj) {
if(typeof fileObj[i] === 'object') {
if(!fs.existsSync(path.join(__dirname, dirpath, i))) {
fs.mkdirSync(path.join(__dirname, dirpath, i));
traverse(fileObj[i], path.join(dirpath, i));
} else {
console.log(i + '文件夹已存在');
traverse(fileObj[i], path.join(dirpath, i));
}
} else {
if(fileObj[i] === 0) {
const fname = i.split('_')[0] + '.' + i.split('_')[1];
if(!fs.existsSync(path.join(__dirname, dirpath, '/', fname))) {
let template = '';
if(i.split('_')[1] == 'html') {
template = template_html('html', i.split('_')[0]);
} else if(i.split('_')[1] == 'css') {
template = template_html('css', i.split('_')[0]);
} else if(i.split('_')[1] == 'js') {
template = template_html('js', i.split('_')[0]);
}
fs.writeFile(path.join(__dirname, dirpath, '/', fname), template, function(err) {
if(err) {
console.log(err);
}
});
} else {
console.log(fname + '文件已存在')
}
} else {
console.log(fileObj[i] + '：输入错误！')
}
}
}
}
function template_html(type, name) {
if(type == 'html') {
return `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./${ name }.css">
<title>${ name }</title>
</head>
<body>
<!-- template -->
<div class="${ name }">
</div>
<!-- template -->
<script src="./${ name }.js" type="module"></script>
</body>
</html>`
} else if(type == 'css') {
return `.${ name } {
background-color: white;
}`
} else if(type == 'js') {
if(name == 'index') {
return `import { routerFun,initFun,proxyFun,getProxy } from './lib.js';
/******
import { head, bind_head } from './component/head/head.js';
import { home, bind_home } from './component/home/home.js';
import { anime, bind_anime } from './component/anime/anime.js';
import { comic, bind_comic} from './component/comic/comic.js';
import { game, bind_game } from './component/game/game.js';
import { novel, bind_novel } from './component/novel/novel.js';
******/
window.onload = function() {
/******
//创建初始化对象
const initObj = {
'.index-header': ['head', head],
'.index-mainer': ['home', home]
}
//创建路由对象
const routerObj = {
'.home_link': {
'home': ['.index-mainer', home, bind_home]
},
'.anime_link': {
'anime': ['.index-mainer', anime, bind_anime]
},
'.comic_link': {
'comic': ['.index-mainer', comic, bind_comic]
},
'.novel_link': {
'novel': ['.index-mainer', novel, bind_novel]
},
'.game_link': {
'game': ['.index-mainer', game, bind_game]
}
}
//创建响应数据对象
const dataObj = {
a: '123',
b: '456',
c: '789'
}
//配置初始页面
initFun(initObj).then(function() {
//配置路由页面
routerFun(routerObj);
}).then(function() {
proxyFun(dataObj).then(function() {
bind_head();
bind_home();
});
});
******/
}
export {
}`
} else if(name == 'lib') {
return `function ajaxFun(url, handle, componentJs, resolve) {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = async function() {
if (this.readyState == 4 && this.status == 200) { //这一步很重要，不能省略
handle(this.response, resolve);
}
}
xhr.open('GET', url);
xhr.send();
}
function componentFun(entryStr, componentStr , componentJs, resolve, bindJs) {
let url = './component/' + componentStr + '/' + componentStr +'.html';
ajaxFun(url, function(response, resolve) {
const template = response.split('<!-- template -->')[1];
document.querySelector(entryStr).innerHTML = template;
let doml = document.querySelector('[data-sign="l' + entryStr + '"]');
if(doml) {
doml.remove();
let link = document.createElement('link');
link.rel = 'stylesheet'
link.href = './component/'+ componentStr + '/' + componentStr + '.css';
link.type = 'text/css'
link.dataset.sign = 'l' + entryStr;
document.head.appendChild(link);
} else {
let link = document.createElement('link');
link.rel = 'stylesheet'
link.href = './component/'+ componentStr + '/' + componentStr + '.css';
link.type = 'text/css'
link.dataset.sign = 'l' + entryStr;
document.head.appendChild(link);
}
componentJs();
if(bindJs) {
console.log(bindJs);
bindJs();
}
if(resolve) {
resolve();
}
}, componentJs, resolve);
}
function initFun(initObj) {
return new Promise(function(resolve) {
for(const i in initObj) {
if(i == '.index-mainer') {
componentFun(i, initObj[i][0], initObj[i][1] ,resolve);
} else {
componentFun(i, initObj[i][0], initObj[i][1] ,null);
}
}
});
}
function routerFun(routerObj) {
for(const i in routerObj) {
for(const j in routerObj[i]) {
document.querySelector(i).addEventListener('click', function() {
componentFun(routerObj[i][j][0], j, routerObj[i][j][1], null, routerObj[i][j][2]);
});
}
}
}
let bindObj = {
innerHTML: [],
value: []
};
function bindFun(className, sign, property) {
if(sign == 'innerHTML') {
bindObj.innerHTML.push(property + ':' + className);
} else if(sign == 'value') {
bindObj.value.push(property + ':' + className);
}
}
let proxyObj = {};
function proxyFun(dataObj) {
return new Promise(function(resolve) {
for(const i in bindObj) {
if(document.querySelector(bindObj[i][0].split(':')[1])) {
if(i == 'innerHTML') {
document.querySelector(bindObj[i][0].split(':')[1]).innerHTML = dataObj[bindObj[i][0].split(':')[0]];
} else if(i == 'value') {
document.querySelector(bindObj[i][0].split(':')[1]).value = dataObj[bindObj[i][0].split(':')[0]];
}
}
}
const proxy = new Proxy(dataObj, {
get(target, key) {
return target[key];
},
set(target, key, value) {
target[key] = value;
for(const i in bindObj) {
if(document.querySelector(bindObj[i][0].split(':')[1])) {
if(i == 'innerHTML') {
document.querySelector(bindObj[i][0].split(':')[1]).innerHTML = target[bindObj[i][0].split(':')[0]];
} else if(i == 'value') {
document.querySelector(bindObj[i][0].split(':')[1]).value = target[bindObj[i][0].split(':')[0]];
}
}
}
return Reflect.set(target, key, value);
}
});
proxyObj.proxy = proxy;
resolve();
});
}
function getProxy() {
return proxyObj.proxy;
}
export {
routerFun,
initFun,
proxyFun,
bindFun,
getProxy
}`
} else {
return `function ${ name }() {
document.querySelector('.${ name }').style.backgroundColor = 'white';
}
function bind_${ name }() {
}
export { ${ name },bind_${ name } }`
}
}
}
module.exports = {
init: init
}