添加路由对于target.href属性的判断

Author: CommanderXL

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/*.js
+webpack.*.js
+dist/**/*.js

package.json

@@ -5,7 +5,7 @@
   "main": "demo.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./dist"
+    "dev": "webpack-dashboard -- webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./dist"
   },
   "repository": {
     "type": "git",

src/components/time-select/index.js

@@ -71,7 +71,8 @@ export default class timeSelectComponent {
     }
     initAlphaModule() {
         let itemArr = [],
-            element = document.querySelector(this.configMap.containerArr[0]);
+            element1 = document.querySelector(this.configMap.containerArr[0]),
+            element2 = document.querySelector(this.configMap.containerArr[1]);
         for(let i = 65; i < 90; i++) {
             let letter = String.fromCharCode(i);
             itemArr.push({text: letter, value: letter});
@@ -82,9 +83,22 @@ export default class timeSelectComponent {
             title: '请选择车牌'
         });
 
-        element.addEventListener('click', function() {
+        element1.addEventListener('click', function() {
             picker.show();
-        })       
+        });
+
+        element2.addEventListener('click', function() {
+            picker.show();
+        })
+
+
+        picker.on('picker.change', (index, selectIndex) => {
+            picker.refill([{text: 1, value: 1}, {text: 2, value: 2}], 2);
+        })
+
+        picker.on('picker.select', (selectedVal, selectIndex) => {
+
+        })
     }
     initTimeModule() {
         var startYearArr = this.configMap.startYearArr,

src/lib/js/controller.js

@@ -56,9 +56,16 @@ export class Controller {
 
     }
 
-    //页面初始化
+    //页面初始化(willAppear阶段)
     getViewInit(fn) {
         this.viewInit = fn.bind(this) || function() {};
+        return this;
+    }
+
+    //页面销毁阶段(willDisappear阶段)
+    getViewDestory(fn) {
+        this.viewDestory = fn.bind(this) || function() {};
+        return this;
     }
 
     //获取controller的初始化状态

src/lib/js/xRoute.js

@@ -57,6 +57,8 @@ const addRoute = (path = '', cb = () => { }, config = {}, context) => {
 const handleRoute = (path, isFromHistory) => {
 
     let curContext;
+    console.log(location.hash);
+
     for (let i = 0; i < Router.length; i++) {
         let routeItem = Router[i];
         if (routeItem.path === path) {
@@ -82,23 +84,27 @@ const handleRoute = (path, isFromHistory) => {
 //TODO 事件冒泡路由拦截  <a href="a.html">   <a href="#/a">  这2种写法处理起来有什么区别?
 //路由的写法统一为:   <a data-href="aaa"></a>
 document.addEventListener('click', (e) => {
-    let dataset = e.target.dataset,
+    let href = e.target.dataset.href,
         oldHash = location.hash.slice(2);
-
+        
+    if (href) {
+        
         //添加钩子 路由进行跳转时模型model上数据的处理
-    if (dataset.href === oldHash) return;
-    if (dataset) {
-        if (handleRoute(dataset.href)) {
+        if (href === oldHash) return;
+
+
+        if (handleRoute(href)) {
             //阻止默认事件
             e.preventDefault();
 
             //通过class进行样式处理
             routeClassHandle(e);
+            
         }
     }
 });
 
-
+//路由激活状态class控制
 const routeClassHandle = (e) => {
     document.querySelector('.route-active') && document.querySelector('.route-active').classList.remove('route-active');
     e.target.classList.add('route-active');

src/modules/pageA/a-controller.js

@@ -45,7 +45,7 @@ controller
 
 		timeSelect.configModule({
 			startYearArr: [1972],
-			containerArr: ['#name'],
+			containerArr: ['#name', '#name-test'],
 			callbackArr: [function (time) {
 				console.log(time);
 			}]
@@ -106,8 +106,13 @@ controller
 		});
 
 
+	})
+	.getViewDestory(function() {
+		console.log('PageA is leaving now');
 	});
 
+
+
 export {
 controller
 }

src/modules/pageA/a.html

@@ -6,10 +6,12 @@
 </div>
 
 
-<button id="name">点击我</button>
+<button id="name">name</button>
+<button id="name-test">name test</button>
 <button id="age">点我</button>
 
 
+
 <div class="btn" style="margin-top: 50px;">
     点击显示城市选择
 </div>

src/route.js

@@ -5,15 +5,14 @@ import {modelB} from './modules/pageB/b-model';*/
 import {controller} from './modules/pageA/a-controller';
 
 
-Router.addRoute('aaa', () => {
+Router.addRoute('aaa', function () {
     //modelA.pageInit();
     let page = document.querySelector('.page-container:first-child');
     if (!controller.getInitedStatus) {
         page.innerHTML = require('modules/pageA/a.html');
         controller.init();
     }
-
-},{cache: 'on'});
+},{cache: 'on'}, controller.viewDestory);
 
 Router.addRoute('bbb', () => {
     //modelB.pageInit();

webpack.config.js

@@ -10,13 +10,13 @@ module.exports ={
     //生成source-map文件
     devtool: 'eval-source-map',
     module: {
-        preLoaders: [
+        /*preLoaders: [
             {
                 test: /\.js$/,
                 exclude: /node_modules|picker.min.js$|dialog.js$|imgResize.js$/,
                 loader: 'eslint'
             }
-        ],
+        ],*/
         loaders: [
             {
                 test: /\.js$/,