refactor: load hash out of component

gulpfile.js

@@ -44,7 +44,7 @@ const paths = {
   ],
 };
 
-gulp.task('del', () => del(['dist']));
+gulp.task('clean', () => del(['dist']));
 
 gulp.task('watch', ['build'], () => {
   gulp.watch([].concat(paths.cache, paths.templates), ['templates']);

src/common.js

@@ -96,20 +96,14 @@ _.sendMessage = function (data) {
 };
 
 _.debounce = function (func, time) {
-  function run() {
-    cancel();
-    func();
-  }
-  function cancel() {
-    if (timer) {
-      clearTimeout(timer);
-      timer = null;
-    }
+  function run(thisObj, args) {
+    timer = null;
+    func.apply(thisObj, args);
   }
   var timer;
-  return function () {
-    cancel();
-    timer = setTimeout(run, time);
+  return function (args) {
+    timer && clearTimeout(timer);
+    timer = setTimeout(run, time, this, args);
   };
 };
 

src/options/app.js

@@ -28,9 +28,9 @@ function initMain() {
         var script = store.scripts.find(function (script) {
           return script.id === res.data.id;
         });
-        if (script) for (var k in res.data) {
-          Vue.set(script, k, res.data[k]);
-        }
+        script && Object.keys(script).forEach(function (key) {
+          Vue.set(script, key, res.data[key]);
+        });
       }
       break;
     case 'del':
@@ -41,6 +41,22 @@ function initMain() {
     }
   });
 }
+function loadHash() {
+  var hash = location.hash.slice(1);
+  Object.keys(routes).find(function (key) {
+    var test = routes[key];
+    var params = test(hash);
+    if (params) {
+      hashData.type = key;
+      hashData.params = params;
+      if (init[key]) {
+        init[key]();
+        init[key] = null;
+      }
+      return true;
+    }
+  });
+}
 
 var _ = require('../common');
 var utils = require('./utils');
@@ -56,6 +72,22 @@ var store = Object.assign(utils.store, {
 var init = {
   Main: initMain,
 };
+var routes = {
+  Main: utils.routeTester([
+    '',
+    'main/:tab',
+  ]),
+  Confirm: utils.routeTester([
+    'confirm/:url',
+    'confirm/:url/:referer',
+  ]),
+};
+var hashData = {
+  type: null,
+  params: null,
+};
+window.addEventListener('hashchange', loadHash, false);
+loadHash();
 zip.workerScriptsPath = '/lib/zip.js/';
 document.title = _.i18n('extName');
 
@@ -67,43 +99,6 @@ new Vue({
     Confirm: Confirm,
   },
   data: function () {
-    return {
-      type: 'Main',
-      params: {},
-    };
-  },
-  mounted: function () {
-    var _this = this;
-    _this.routes = {
-      Main: utils.routeTester([
-        '',
-        'main/:tab',
-      ]),
-      Confirm: utils.routeTester([
-        'confirm/:url',
-        'confirm/:url/:referer',
-      ]),
-    };
-    window.addEventListener('hashchange', _this.loadHash.bind(_this));
-    _this.loadHash();
-  },
-  methods: {
-    loadHash: function () {
-      var _this = this;
-      var hash = location.hash.slice(1);
-      for (var k in _this.routes) {
-        var test = _this.routes[k];
-        var params = test(hash);
-        if (params) {
-          _this.type = k;
-          _this.params = params;
-          if (init[k]) {
-            init[k]();
-            init[k] = null;
-          }
-          break;
-        }
-      }
-    },
+    return hashData;
   },
 });

src/options/views/tab-installed.html

@@ -11,8 +11,7 @@
     <div v-html="message"></div>
   </div>
   <div class="scripts">
-    <script-item v-for="script in store.scripts"
-      :script="script"></script-item>
+    <script-item v-for="script in store.scripts" :script="script"></script-item>
   </div>
   <edit v-if="script" :script="script" :on-close="endEditScript"></edit>
 </div>

src/options/views/tab-settings.html

@@ -1,40 +1,40 @@
 <div class="content">
-<h1 v-text="i18n('labelSettings')"></h1>
-<label class="line">
-  <input type=checkbox v-setting="'autoUpdate'" @change="updateAutoUpdate">
-  <span v-text="i18n('labelAutoUpdate')"></span>
-</label>
-<label class="line">
-  <input type=checkbox v-setting="'ignoreGrant'">
-  <span v-text="i18n('labelIgnoreGrant')"></span>
-</label>
-<label class="line">
-  <input type=checkbox v-setting="'autoReload'">
-  <span v-text="i18n('labelAutoReloadCurrentTab')"></span>
-</label>
-<fieldset class=title>
-  <legend v-text="i18n('labelDataImport')"></legend>
-  <button v-text="i18n('buttonImportData')" @click="importFile"></button>
-  <button :title="i18n('hintVacuum')" @click="vacuum" :disabled="vacuuming" v-text="labelVacuum"></button>
-</fieldset>
-<fieldset class=title>
-  <legend v-text="i18n('labelDataExport')"></legend>
-  <b v-text="i18n('labelScriptsToExport')"></b>
-  <label>
-    <input type=checkbox v-setting="'exportValues'">
-    <span v-text="i18n('labelExportScriptData')"></span>
+  <h1 v-text="i18n('labelSettings')"></h1>
+  <label class="line">
+    <input type=checkbox v-setting="'autoUpdate'" @change="updateAutoUpdate">
+    <span v-text="i18n('labelAutoUpdate')"></span>
   </label>
-  <select class=export-list multiple v-model="selectedIds">
-    <option class="ellipsis" v-for="script in store.scripts"
-      :value="script.id" v-text="script.custom.name||script.meta.name"></option>
-  </select>
-  <button v-text="i18n('buttonAllNone')" @click="updateSelection()"></button>
-  <button v-text="i18n('buttonExportData')" @click="exportData" :disabled="exporting"></button>
-</fieldset>
-<fieldset class=title v-feature="'sync'">
-  <legend v-text="i18n('labelSync')" class="feature-text"></legend>
-  <div class="sync-services">
-    <sync-service v-for="service in store.sync" :service="service"></sync-service>
-  </div>
-</fieldset>
+  <label class="line">
+    <input type=checkbox v-setting="'ignoreGrant'">
+    <span v-text="i18n('labelIgnoreGrant')"></span>
+  </label>
+  <label class="line">
+    <input type=checkbox v-setting="'autoReload'">
+    <span v-text="i18n('labelAutoReloadCurrentTab')"></span>
+  </label>
+  <fieldset class=title>
+    <legend v-text="i18n('labelDataImport')"></legend>
+    <button v-text="i18n('buttonImportData')" @click="importFile"></button>
+    <button :title="i18n('hintVacuum')" @click="vacuum" :disabled="vacuuming" v-text="labelVacuum"></button>
+  </fieldset>
+  <fieldset class=title>
+    <legend v-text="i18n('labelDataExport')"></legend>
+    <b v-text="i18n('labelScriptsToExport')"></b>
+    <label>
+      <input type=checkbox v-setting="'exportValues'">
+      <span v-text="i18n('labelExportScriptData')"></span>
+    </label>
+    <select class=export-list multiple v-model="selectedIds">
+      <option class="ellipsis" v-for="script in store.scripts"
+        :value="script.id" v-text="script.custom.name||script.meta.name"></option>
+    </select>
+    <button v-text="i18n('buttonAllNone')" @click="updateSelection()"></button>
+    <button v-text="i18n('buttonExportData')" @click="exportData" :disabled="exporting"></button>
+  </fieldset>
+  <fieldset class=title v-feature="'sync'">
+    <legend v-text="i18n('labelSync')" class="feature-text"></legend>
+    <div class="sync-services">
+      <sync-service v-for="service in store.sync" :service="service"></sync-service>
+    </div>
+  </fieldset>
 </div>