using es6 class to refactor demo file

BiYuqi · Jan 23, 2019 · 08d0990 · 08d0990
1 parent 6687904
commit 08d0990
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 74 deletions.
diff --git 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)
+  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
@@ -7,5 +7,4 @@ import __ from 'utils/dom'
 
 __('.login-btn').on('click', () => {
   window.location.href = '../index.html'
-})
-console.log('login page')
+})
diff --git 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 += `<a href="${item.alt}" target="_blank">
-        <li>${item.title} --- ${item.genres.join(',')}</li>
-      </a>`
-    })
-
-    __('.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 += `<a href="${item.alt}" target="_blank">
+            <li>${item.title} --- ${item.genres.join(',')}</li>
+          </a>`
+        })
+
+        __('.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()