<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                `審核人:張紅橋` `被審核代碼負責人:廖爽` `代碼地址:http://192.168.1.170/hyfe/demo-project/tree/master/demo-liaoshuang` #### 1、class命名不規范(已修改) 文件名:`style/index.css` ```css .carTitle { width: 644px; height: 96px; background: url(../images/car_title.png) no-repeat; background-size: 100% 100%; padding: 25px 0 0 60px; } ``` 解決方案:class命名中間使用-隔開(eg: car-title),css不建議使用駝峰命名,js使用駝峰命名 #### 2、JS文件命名不規范(已修改) ![](https://box.kancloud.cn/6e0e08affa160320c06f844763d38089_358x333.png) 解決方案:JS文件在命名時,要結合實現的功能和具體業務模塊相關,讓維護的人看到文件名稱就大概能猜到該文件中實現的功能包括哪些。 #### 3、JS文件頭部注釋錯誤(已修改) 文件名:`scripts/index.js` 文件名:`scripts/test.js` ``` /** * @Author: baizn * @DateTime: 2017-01-17 09:24:27 * @Description: 測試主JS文件 * @Last Modified By: baizn * @Last Modified Time: 2017-01-17 09:24:27 */ ``` 解決方案: 頭部注釋要注釋清楚Author、time、描述該文件的主要功能 #### 4、js文件注釋太少(已修改) 文件名:`scripts/page1.js` ``` define(function(require) { require('jquery') var request = require('request') var baseConfig = require('baseConfig') var carNum = require('carNum') require('carNumData') var roadFlow = require('roadFlow') require('roadFlowData') var brandDis = require('brandDis') require('brandDisData') var ruleNum = require('ruleNum') require('ruleNumData') var trafNum = require('trafNum') require('trafNumData') var Test = { /** * 初始化 * * 頁面模塊數據請求 執行繪制 * */ init: function() { request.sendAjax(baseConfig.carNum, function(data) { carNum(data) }) request.sendAjax(baseConfig.roadFlow, function(data) { roadFlow(data) }) request.sendAjax(baseConfig.brandDis, function(data) { brandDis(data) }) request.sendAjax(baseConfig.ruleNum, function(data) { ruleNum(data) }) request.sendAjax(baseConfig.trafNum, function(data) { trafNum(data) }) } } return Test }) ``` 解決方案: 建議注釋清楚引入的每個圖表是頁面上對應的哪個圖表,請求的數據是請求的具體哪部分的數據 #### 5、JS文件中的方法注釋不全(已修改) 很多方法及關鍵邏輯處缺少注釋。 解決方案:建議補全所有方法的功能注釋,如: ```javascript /** * 繪制圖表 * @param {string} id 容器id * @param {array} data 圖表數據 * @param {object} opt 圖表配置項 * * example: * [ * { * name: '江北區', * value1: 1140, * value2: 740 * } * ] */ drawCharts: function(id, data1, opt) { ... } ``` #### 6、JS語句尾部分號(已修改) JS文件中建議省略所有分號。 #### 7、圖表Y軸取值不靈活(未修改,故意設置的額) 文件名:`charts/trafNum.js` ``` var tickValues = [-50, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50]; // y軸要顯示的刻度值 var tickValues1 = [-50, -40, -30, -20, -10, 10, 20, 30, 40, 50]; // 移除網格0位置的繪制 ``` 解決方案:這兩組數組應動態從后端傳的數據取值,要考慮到真實數據范圍不會是固定的從-50到50之間 #### 8、函數長度太長 所有邏輯都寫在了一個方法里面(已修改) 文件名:`charts/trafNum.js` charts里面的大部文件都有該問題,此文件較明顯 解決方案:一個函數的長度控制在 50 行以內。將過多的邏輯單元混在一個大函數中,易導致難以維護。一個清晰易懂的函數應該完成單一的邏輯單元。復雜的操作應進一步抽取,通過函數的調用來體現流程。 #### 9、單行代碼太長(已修改) 文件名:`charts/trafNum.js` ``` var yScale = d3.scale.linear() .domain([-50, 0, 50]) .rangeRound([(height - padding.top - padding.bottom), (height - padding.top - padding.bottom) / 2, 0]); ``` 解決方案:一行不超過80個字符,建議將rangeRound里面的取值先計算出來用一個變量保存起來然后直接使用 #### 10、對象里面創建了多個函數(未修改,學習中待考慮) 文件名:`charts/*.js` 該文件夾下面的文件都有些問題 ![](https://box.kancloud.cn/d93831d91f95a6463fb0aa4bbca44d44_859x603.png) 這樣創建方法會影響圖表渲染性能,每次在調用的時候都要重新創建該方法 解決方案:建議將這些方法定義成對象里面的屬性,如: ``` var draw = function(data) { temp: function(data) { // code ... }, drawSvg: function(valArr, inx, selec) { // code ... } } ``` #### 11、所有圖表都未做update、enter、exit處理(未修改,待學習) 解決方案:可以先看下精通D3.js(4.5選擇集的處理) #### 12、Mock數據字段定義不規范(已修改) 貨船和客艙是是固定的兩個字段,無需返回array,圖片由前端自己切圖,images字段不需要 文件名:`mockData/carNum.js` ``` 'carNum2': [{ 'name': '貨船', 'images': Mock.Random.image('200x100', '#2688CF', '#FFF', 'Photo'), 'value|10-999999': 1 }, { 'name': '客船', 'images': Mock.Random.image('200x100', '#2688CF', '#FFF', 'Photo'), 'value|10-999999': 1 } ] ``` 解決方案:建議將carNum2改成object類型,images字段去掉
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看