update 170325 22:01

SPxiaomin-zz · Mar 25, 2017 · a50bbc7 · a50bbc7
1 parent 9afe92a
commit a50bbc7
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 46 deletions.
diff --git a/react-tab-selector/src/App.js b/react-tab-selector/src/App.js
@@ -8,7 +8,6 @@ class App extends Component {
         this.state = {
             selected: this.props.selected
         };
-
         this.handleOnClick = this.handleOnClick.bind(this);
     }
 

diff --git a/react-tab-selector/src/data.js b/react-tab-selector/src/data.js
@@ -0,0 +1,9 @@
+const Data = [
+    {name: 'Red', value: 'red'},
+    {name: 'Blue', value: 'blue'},
+    {name: 'Yellow', value: 'yellow'},
+    {name: 'Green', value: 'green'},
+    {name: 'White', value: 'white'}
+];
+
+export { Data };
diff --git a/react-tab-selector/src/index.js b/react-tab-selector/src/index.js
@@ -1,16 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-
-var data = [
-    {name: 'Red', value: 'red'},
-    {name: 'Blue', value: 'blue'},
-    {name: 'Yellow', value: 'yellow'},
-    {name: 'Green', value: 'green'},
-    {name: 'White', value: 'white'}
-];
+import { Data } from './data';
 
 ReactDOM.render(
-    <App label="Color" data={data} selected={null} />,
+    <App label="Color" data={Data} selected={null} />,
     document.getElementById('root')
 );
diff --git a/react-tab-selector/tab-selector-jquery/index-1.html b/react-tab-selector/tab-selector-jquery/index-1.html
@@ -11,7 +11,7 @@
 <body>
     <div id="container"></div>
     <script>
-        var data = [
+        let data = [
             {name: 'Red', value: 'red'},
             {name: 'Blue', value: 'blue'},
             {name: 'Yellow', value: 'yellow'},
@@ -20,25 +20,29 @@
         ];
 
         function render(options) {
-            var arr = [];
-            arr.push('<div class="tab-selector">');
-            arr.push('<label>', options.label, '</label>');
-            arr.push('<ul>');
-            options.data.forEach(function (item){
-                if (item.value === options.selected) {
-                    arr.push('<li class="selected" data-value="', item.value, '">');
-                    arr.push(item.name);
-                    arr.push('</li>');
-                } else {
-                    arr.push('<li data-value="', item.value, '">');
-                    arr.push(item.name);
-                    arr.push('</li>');
-                }
-            });
-            arr.push('</ul>');
-            arr.push('</div>');
+            let html = `
+                        <div class="tab-selector">
+                            <label>${options.label}</label>
+                            <ul>
+                                ${
+                                    options.data.map((item) => {
+                                        let selected = item.value ===
+                                                       options.selected ?
+                                                       'selected' : '';
+
+                                        return `
+                                                <li class="${selected}"
+                                                    data-value="${item.value}">
+                                                    ${item.name}
+                                                </li>
+                                                `;
+                                    }).join('')
+                                }
+                            </ul>
+                        </div>
+                       `;
 
-            this.html(arr.join(''));
+            this.html(html);
         }
 
         $.fn.TabSelector = function(options) {
@@ -48,7 +52,7 @@
             // 交互
             let that = this;
             this.on('click', 'li', function() {
-                var $this = $(this);
+                let $this = $(this);
 
                 options.selected = $this.data('value');
                 render.call(that, options);

diff --git a/react-tab-selector/tab-selector-jquery/index.html b/react-tab-selector/tab-selector-jquery/index.html
@@ -11,35 +11,39 @@
 <body>
     <div id="container"></div>
     <script>
-        var data = [
+        let data = [
             {name: 'Red', value: 'red'},
             {name: 'Blue', value: 'blue'},
             {name: 'Yellow', value: 'yellow'},
             {name: 'Green', value: 'green'},
             {name: 'White', value: 'white'}
         ];
 
-        // TODO: 使用 es6 改写
         $.fn.TabSelector = function(options) {
             // DOM 构建
-            var arr = [];
-            arr.push('<div class="tab-selector">');
-            arr.push('<label>', options.label, '</label>');
-            arr.push('<ul>');
-            options.data.forEach(function(item) {
-                arr.push('<li data-value="', item.value, '">');
-                arr.push(item.name);
-                arr.push('</li>')
-            });
-            arr.push('</ul>');
-            arr.push('</div>');
+            let html = `
+                        <div class="tab-selector">
+                            <label>${options.label}</label>
+                            <ul>
+                                ${
+                                    options.data.map((item) => {
+                                        return `
+                                                <li data-value="${item.value}">
+                                                    ${item.name}
+                                                </li>
+                                                `;
+                                    }).join('')
+                                }
+                            </ul>
+                        </div>
+                       `;
 
-            this.html(arr.join(''));
+            this.html(html);
 
             // 交互
-            var lastSelected = null;
+            let lastSelected = options.selected;
             this.on('click', 'li', function() {
-                var $this = $(this);
+                let $this = $(this);
 
                 if (lastSelected) {
                     lastSelected.removeClass('selected');
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,6 @@ class App extends Component { @@
             this.state = {
                 selected: this.props.selected
             };
             this.handleOnClick = this.handleOnClick.bind(this);
         }
@@ Expand Down @@