diff --git a/src/views/index/index.js b/src/views/index/index.js index 56a8820..8382d62 100644 --- a/src/views/index/index.js +++ b/src/views/index/index.js @@ -7,38 +7,52 @@ import './index.scss' import __ from 'utils/dom' import EjsTest from '@/templates/index.test.ejs' -__('.index-title').html('HOME') -// 测试ejs模板使用 -const data = [ - { - link: 'html/test-demo.html', - key: '测试页面', - icon: 'iconfont icon-rocket' - }, - { - link: 'html/fonts-demo.html', - key: '内置图标库', - icon: 'iconfont icon-Dollar' - }, - { - link: 'html/login.html', - key: '登录页面', - icon: 'iconfont icon-login' - }, - { - link: 'html/news-tech.html', - key: '多目录测试', - icon: 'iconfont icon-edit' +class HomePage { + init() { + this.testTitle() + this.testEjsTemplete() } -] -// 注入模板数据 -// 经过测试 ajax异步返回数据, 打包后亦正常渲染 -__('.ejs-dynamic-inject').html(EjsTest({ - index: data -})) -// setTimeout(() => { -// $('.ejs-dynamic-inject').html(EjsTest({ -// index: data -// })) -// }, 1000) \ No newline at end of file + testTitle() { + __('.index-title').html('HOME') + } + + testEjsTemplete() { + // 测试ejs模板使用 + const data = [ + { + link: 'html/test-demo.html', + key: '测试页面', + icon: 'iconfont icon-rocket' + }, + { + link: 'html/fonts-demo.html', + key: '内置图标库', + icon: 'iconfont icon-Dollar' + }, + { + link: 'html/login.html', + key: '登录页面', + icon: 'iconfont icon-login' + }, + { + link: 'html/news-tech.html', + key: '多目录测试', + icon: 'iconfont icon-edit' + } + ] + __('.ejs-dynamic-inject').html(EjsTest({ + index: data + })) + } + // 暂未用到 + testEjsTempleteAsync() { + setTimeout(() => { + $('.ejs-dynamic-inject').html(EjsTest({ + index: data + })) + }, 1000) + } +} + +new HomePage().init() diff --git a/src/views/login/index.js b/src/views/login/index.js index 93c6f5f..bf96c49 100644 --- a/src/views/login/index.js +++ b/src/views/login/index.js @@ -7,5 +7,4 @@ import __ from 'utils/dom' __('.login-btn').on('click', () => { window.location.href = '../index.html' -}) -console.log('login page') \ No newline at end of file +}) \ No newline at end of file diff --git a/src/views/test-demo/index.js b/src/views/test-demo/index.js index 3e314a9..483fdaa 100644 --- a/src/views/test-demo/index.js +++ b/src/views/test-demo/index.js @@ -4,50 +4,58 @@ import '@/common/js/base' import './test-demo.scss' // 测试用的工具函数 -import { isEmptyObject } from 'utils/tools' import __ from 'utils/dom' import { movieList } from '@/api/movie' -/*********测试工具函数**********/ -__('.about-title').html('Test Page') +class TestDemo { + init() { + this.testToolFun() + this.testFetchData() + } -__('.about-test').on('click', () => { - alert('Test Page Js') -}) + testToolFun() { + __('.about-title').html('Test Page') -console.log(isEmptyObject({}), isEmptyObject({a: '123'})) - -/*********测试接口请求**********/ -const aboutAjax = __('.about-ajax') -aboutAjax.on('click', () => { - aboutAjax - .prop('disabled', true) - .css({ - cursor: 'not-allowed' + __('.about-test').on('click', () => { + alert('Test Page Js') }) - __('.movie-item').html('正在加载中......') + } - let template = '' - movieList({}).then(res => { - const list = res.data.subjects - list.forEach(item => { - template += ` -
  • ${item.title} --- ${item.genres.join(',')}
  • -
    ` - }) - - __('.movie-item').html(template) - aboutAjax - .prop('disabled', false) - .css({ - cursor: 'pointer' - }) - }).catch(error => { - __('.movie-item').html('请求失败,请检查网络, 重新发起请求') - aboutAjax - .prop('disabled', false) - .css({ - cursor: 'pointer' + testFetchData() { + const aboutAjax = __('.about-ajax') + aboutAjax.on('click', () => { + aboutAjax + .prop('disabled', true) + .css({ + cursor: 'not-allowed' + }) + __('.movie-item').html('正在加载中......') + + let template = '' + movieList({}).then(res => { + const list = res.data.subjects + list.forEach(item => { + template += ` +
  • ${item.title} --- ${item.genres.join(',')}
  • +
    ` + }) + + __('.movie-item').html(template) + aboutAjax + .prop('disabled', false) + .css({ + cursor: 'pointer' + }) + }).catch(error => { + __('.movie-item').html('请求失败,请检查网络, 重新发起请求') + aboutAjax + .prop('disabled', false) + .css({ + cursor: 'pointer' + }) }) - }) -}) + }) + } +} + +new TestDemo().init() \ No newline at end of file