微信小程序，學習筆記（一）框架，視圖層

原創 左撇子123 2020-02-23 21:25

微信小程序，學習筆記（一）框架，視圖層

學習鏈接：http://www.w3cschool.cn/weixinapp/

因爲其實並非原創，但是並沒有什麼好的類別可選，所以修改成：“翻譯”了。

熟悉

文檔結構介紹

--- [D] pages
--- [D] utils
--- [F] app.js
--- [F] app.json
--- [F] app.wxss
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

全局變量、對象、方法

普通類型

對象

  • App

    應用程序全局實例，在app.js中定義，每個程序只有一個實例，可以通過如下方式獲取

    var app = getApp();

    該對象內容，全局屬性或全局方法可以在這裏面定義

    App({
    onLaunch: function () { ...... },

    getUserInfo: function () { ...... },

    // 全局變量對象
    globalData： {
        userInfo: null
    },

    globalIndex: 0
});
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    使用方法：

    var app = getApp();

// 保存用戶信息
var userInfo = app.globalData.userInfo;

// 普通類型全局變量
var index = app.globalIndex;
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

視圖層（View）

數據綁定（{{}}）和條件渲染（wx:if）

使用兩個嵌套的大括號方式

Page({
    data: {
        name: 'lizc',
        index: 0,
        condition: true,
        flag: 0,
        a: 1,
        b: 2,
        c: 3,
        str: 'world'
    }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

  1. 普通綁定：

    <view>{{name}}</view>

  2. 組件屬性綁定: 必須使用引號引起來，在js改變index值的時候，頁面會自動刷新最新值

    <view id="item-{{index}}"></view>

  3. 控制屬性：即屬性值是需要通過滿足一定條件達到目的

    <view wx:if="{{condition}}"></view>

    也可以是條件表達式，或運算表達式： 
    <view hidden="{{flag ? true : false}}"></view>

    多級條件判斷，如：if ... elif ... else

    <view wx:if="{{flag !== 0}}">flag不爲0的時候才顯示這個view</view>
<view wx:elif="{{flag > 0 && flag < 8}}">flag取值在 0 ~ 8 之間的值時候顯示這個</view>
<view wx:else>上面兩個都不滿足顯示條件的時候就會顯示這個</view>
    • 1
    • 2
    • 3
    • 1
    • 2
    • 3

  4. 使用<block>塊標籤來使用條件判斷控制多個組件的行爲，<block>只起到分組的作用，並不會真的渲染到出來

    <block wx:if="{{flag > 0}}">
    <view>組件一</view>
    <view>組件二</view>
</block>
    • 1
    • 2
    • 3
    • 4
    • 1
    • 2
    • 3
    • 4

  5. 算術運算

    <view>{{a}} + {{b}} + c</view>
<view>'hello' + {{str}}</view>
    • 1
    • 2
    • 1
    • 2

  6. 對象綁定

    其實和普通類型綁定差不多

    <view>{{obj.name}} + array[0]</view>
    • 1
    • 1

PS: 使用條件來控制view時候，和hidden屬性的比較 
- view的條件判斷，會在條件中的值發生變化的時候，會先銷燬原先的，然後滿足條件的時候重新渲染和銷燬 
- hidden屬性控制view的顯示和隱藏，這個屬性的組件始終會被渲染，只是在需要的時候控制它的隱藏和顯示

最後比較得出：如果需要頻繁頻繁切換的情況下用hidden屬性控制，如果在綁定的數據基本不變的情況下使用wx:if條件來控制

列表渲染（wx:for）

  • wx:for，可以同時生成多個元素

    參數屬性說明：

    • wx:key="unique..."：指定組件的唯一標識，列表發生變化需要保持自身的狀態和特徵不發生變化，並且能在重新渲染的時候，重新排序；
    • wx:key="*this"：功能同上，但這個是要求項目中的item本身是唯一的，也就是你需要用到的屬性值是唯一；
    • wx:for-index="index"：指定循環的下標變量名，默認：index；
    • wx:for-item="item": 指定當前項變量名，默認：item

    例如：

    <view wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row">{{dates[index + idx].desc}}</view>

// dates： 需要遍歷的數據對象
// 'unique'： 數據項的唯一標識符
// 'idx'： 指定的下標變量名
// 'date'：指定的當前數據的變量名
// 指定之後可以在屬性中直接使用'idx', 'date'變量，例如，上例的'id': "ctl-list-{{idx}}，這裏就用到了'idx'來添加屬性'id'

// 生成後的實際結果：
<view class="ctl-list-row" id="ctl-list-0">1/4</view>
<view class="ctl-list-row" id="ctl-list-1">1/3</view>
<view class="ctl-list-row" id="ctl-list-2">1/2</view>
<view class="ctl-list-row" id="ctl-list-3">1/1</view>
<view class="ctl-list-row" id="ctl-list-4">12/31</view>
<view class="ctl-list-row" id="ctl-list-5">12/30</view>
<view class="ctl-list-row" id="ctl-list-6">12/29</view>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

模版（template）

用來定義代碼片段，完成之後可以在其他地方通過模版直接套用該模版中組件。

  • 模版定義：

    <!--
    index: Integer
    msg: String
    date: String

    參數可以是可用的任意類型
-->
<template name="tplName>
    <view>
        <text>{{index}}: {{msg}}</text>
        <text>Date: {{date}}</text>
    </view>
</template>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

  • 模版使用：通過模版名稱

    <template is="tplName" data="{{...item}}" />

// 數據，模版所需要的數據
Page({
    data: {
        item: {
            index: 0,
            msg: 'hello',
            date: '2017-1-4'
        }
    }
});

// wxml結構中效果：
<view>
    <text>0: hello template</text>
    <text>Date: 2017-1-4</text>
</view>

// 實際顯示效果：
0： hello template, Date: 2017-1-4
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

  • 模版和列表wx:for結合使用，同時生成多個模版

    使用的時候使用半閉合標籤，以及需要使用到is=""來指定模版名稱去使用的指定模版

    <template is="tplName" data="{{...item}}" wx:for="{{[0, 1, 2, 3]}}" wx:for-item="it" />

// wxml結構中效果
<view>
    <text>0: hello template</text>
    <text>, Date: 2017-1-4</text>
</view>
<view>...</view>
<view>...</view>
<view>...</view>

// 顯示效果，即多個重複模版

0： hello template, Date: 2017-1-4
0： hello template, Date: 2017-1-4
0： hello template, Date: 2017-1-4
0： hello template, Date: 2017-1-4

// 嘗試了下去修改 index 值，未成功，暫時還不知道怎麼弄

<template is="tplName" data="{{...item}}" wx:for="{{[0, 1, 2, 3]}}" wx:for-index="index" wx:for-item="it" />
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

  • 運行時通過條件判斷來決定使用哪個模版

    <!-- 運行時決定使用哪種模版 -->
<template name="tpl1">
    <view>template first</view>
</template>

<template name="tpl2">  
    <view>template first</view>
</template>

// 運行時根據`is=""`中的語句來判斷，決定使用的是'tpl1'還是'tpl2'
<block wx:for="{{[1, 2, 3, 4, 5, 6]}}">
    <template is="{{item % 2 === 0 ? 'tpl2' : 'tpl1'}}" />
</block>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

PS: 生成的模版擁有自己獨立的作用域，因此所使用的數據必須是data=中指定的數據

事件處理

  • 點擊事件：bindtap

    例如：<button class="button button-refresh" bindtap="refreshDateTbl">refresh</button>

    // 綁定的函數在Page中定義，事件函數的參數爲 event 事件對象

Page({
    refreshDateTbl: function ( event ) {
        var that = this,
            index = that.data.index + 1,
            len = that.data.dates.length;

        if ( index >= len ) {
          index = 0;
        }

    that.setData({index: index});

    console.log( event );
  }
});
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    從輸出結果得出，event 對象主要包含以下部分

    changedTouches:Array[1]
currentTarget:Object
detail:Object
target :Object
timeStamp:2881
touches:Array[1]
type:"tap"
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

  • 事件對象：event

    原生事件屬性列表：

    1. type: 即當前事件類型（tap / touch）；
    2. currentTarget：表示當前組件信息集合；
    3. target: 通過打印看了下，console.log( event.currentTarget == event.target ); 結果：false，說明 currentTarget 和target 不是同一個對象，但是裏面的東西應該都是當前目標的屬性(不是很確定)；看文檔解釋是：觸發事件的組件的屬性集合（currentTarget是當前，target是觸發事件的組件，不是很明白區別在哪？？）
    4. timeStamp: 這個時間也不知道是啥，應該不是點擊動作時間也不是響應時間，有2.8秒之久。（理解錯誤，正確：事件生成的時間戳）

    自定義事件對象屬性列表：

    1. detail: 當前組件的座標(x, y)；

    觸摸事件對象屬性列表：

    1. touches：這個接觸的對象數組，難道是和事件冒泡有關？表示網上冒泡的父對象集合？？瞎猜，應該是：當前觸摸事件的觸摸點信息數組；
    2. changedTouches: 應該和上面的touches有聯繫，解釋爲：當前變化的觸摸點信息的數組；

    以下是各事件屬性的內容，很容易理解

    1. target: id, dataset, offsetLeft, offsetTop，dataset要解釋下：表示事件源組件上的自定義屬性data-的集合；

    2. currentTarget: id, ‘dataset,tagName`；

      dataset：自定義屬性集合，其中自定義屬性 data- 中必須都爲小寫，需要使用 - 作爲連接符， 自定義後的屬性都會出現在事件對象的dataset對象上，舉例：

      <view data-my-name="lizc" data-myAge="30"></view>

      最終 name 和 age 可以通過如下方式去調用

      event.target.dataset.myName === 'lizc'; // `-` 連接的都會轉成駝峯式
event.target.dataset.myage === '30'; // 而駝峯式寫法會被轉成全小寫形式
      • 1
      • 2
      • 1
      • 2

      因此推薦使用 - 連接符去書寫自定義數據屬性

    3. touches：觸摸點數組，觸摸點對象 Touch 或 CanvasTouch 的集合，表示當前頁面上所有觸摸點的集合，包含屬性：

      Touch 對象

      • identifier： 觸摸點標識符，類型：Number，應該是個類似標記的東西，或者索引之類的，唯一；
      • pageX, pageY：相對於整個文檔而言，距離文檔左上角的 x 和 y 軸的距離；
      • clientX, clientY：相對於可是區域而言，xy 軸的距離

      CanvasTouch對象：

      • identifier: 同上；
      • x, y：這個只有一個座標，即相對畫布左上角而言的座標；

    4. changedTouches：表示發生變化的觸摸點對象集合，比如該觸摸點發生了touchstart, touchmove, touchend, touchcancel變化；

    5. detail：跟自定義事件有關，自定義事件攜帶的數據，不是很明白，具體內容有待考證。

PS1: 中午休息了會，打開代碼，隨便點擊了幾下按鈕，突然發現這個timestamp可能是什麼鬼了！！！

下面是打印

```

Object {type: "tap", timeStamp: 5053127, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5053311, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5053496, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5054722, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5054936, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5055120, target: Object, currentTarget: Object, detail: Object…}

new Date() 一下：

new Date(0)
Thu Jan 01 1970 08:00:00 GMT+0800 (中國標準時間)
new Date(5053127)
Thu Jan 01 1970 09:24:13 GMT+0800 (中國標準時間) 

結果發現相差了 1:24:13，這不是剛剛啓動程序那會!!!!

```

從而得出結論：這個timestamp應該就是程序運行的時間，單位：（ms）

PS2: 好傻！！看完事件大概，居然沒繼續往下看，文檔下面就有每個屬性的明確解釋

timeStamp： 事件生成時的時間戳；我還把它當成了程序運行時間~~~~, 也就是該頁面打開到事件觸發時的這段時間。

  • 事件類型：冒泡和非冒泡

    冒泡事件：（除以下冒泡事件之外的其他事件均爲非冒泡事件）

    1. touchstart: 手指剛碰觸到屏幕的時候觸發的事件；
    2. touchmove：手指觸摸後移動時觸發；
    3. touchcancel:手指觸摸動作被打斷，即非正常退出觸摸，如來電或短信等；
    4. touchend：手指觸摸結束；
    5. tap：手指觸摸，即點擊事件，觸摸即離開；
    6. longtap：手指觸摸後超過350ms再離開，會被判定爲長按。

    非冒泡事件

    1. <form/>標籤的submit事件
    2. <input/>標籤的input事件
    3. <scroll-view/>標籤的scroll事件

    特殊事件：

    1. <canvas />的觸摸事件不可冒泡，因此沒有 currentTarget，理解：因爲不存在冒泡行爲，也就是說被點擊事件和當前事件組件永遠只可能是同一個組件。

  • target 和 currentTarget 對比分析

    測試代碼：日期列表，點擊日期行，通過事件冒泡去觸發父組件的tapDateRow事件

    <view  bindtap="tapDateRow" id="ctl-list-date" class="ctl-list-date">
  <view wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row">{{dates[index + idx].desc}}</view>
</view>

// tap 後輸出：

// 點擊的當前行，即：event.target
Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}

// 綁定事件的組件，即：event.currentTarget
Object {id: "ctl-list-date", offsetLeft: 0, offsetTop: 0, dataset: Object}
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    從輸出可知，target即你點擊的那個組件，也就是觸發點擊事件的組件，而 currentTarget 是你綁定點擊事件的那個組件，如果點擊事件句柄同時綁定在被點擊的那個組件上，那麼這兩個對象是不是應該是指同一個組件呢？（猜測對一半錯一半，驗證如下：）

    // 日期列表
<view bindtap="tapDateRow" wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row">{{dates[index + idx].desc}}</view>
</view>

// 點擊日期行事件處理句柄
tapDateRow: function ( event ) {
  console.log( event.target );
  console.log( event.currentTarget );
  console.log( event.currentTarget === event.target );
}

// 輸出
Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}
Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}
false
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    結論：通過輸出可知，兩個對象的內容是一模一樣的，說明這兩個屬性都是代表着當前被點擊的組件，但是兩者卻不是指向同一個空間，即該組件。說明這兩個對象具有自己獨立的內存空間，而非在綁定事件和觸發事件對象相同時都指向同一個內存空間。

  • 事件綁定：bind 和 catch，即冒泡和非冒泡

    bind:

    bindtap, bindtouchstart, bindtouchmove, bindtouchcancel, 
bindtouchend, bindlongtap, ......
    • 1
    • 2
    • 1
    • 2

    catch:

    catchtap, catchtouchstart, catchtouchmove,catchtouchcancel, 
catchtouchend, catchlongtap, ......
    • 1
    • 2
    • 1
    • 2

    例如：

    <view id="view1" bindtap="f3">
    <view id="view2" catchtap="f2">
        <view id="view3" bindtap="f1">
        </view>
    </view>
</view>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    1. 點擊 view3 會調用 f1, 然後調用 f2，到此結束，因爲 view2 用的是非冒泡綁定，阻止了事件繼續往上冒泡到 view1；
    2. 點擊 view2 只會調到 f2；
    3. 點擊 view1 只會調到 f1；

事件總結：

  1. 事件對象：event;
  2. 事件類型：冒泡和非冒泡；
  3. 事件綁定：bindtap, bindtouch*;
  4. 事件源和觸發源：event.currentTarget 和 event.target; 
    a. id：事件組件對象的id； 
    b. target：自定義屬性集合 dataset（屬性定義：data-my-name，使用：event.target.dataset.myName）; 
    c. offsetLeft/offsetTop： 事件組件的 left/top 實際值。
  5. 事件戳： event.timeStamp，單位：（ms）；
  6. 觸摸點對象：event.touches（Touch: identifier, pageX/pageY, clientX/clientY; CanvasTouch: identifier, x/y ）；
  7. 變化的觸摸點對象：event.changedTouches；
  8. 自定義事件攜帶的數據對象：event.detail。

引用

引用外部文件方式：import 和 include，兩個引入剛好相反或者說互補，前者是引入文件中的模版代碼template，而後者是引入文件中除了template定義的之外的所有代碼完整拷貝到當前位置。

  • import

    使用import引入時不能嵌套引入，即：加入 a.wxml 中引入了 b.wxml 中的模版，然後 b.wxml 引入了 c.wxml 中的模版，那麼 a.wxml 中也無法直接引入 c.wxml 中的模版。

    <!-- a.wxml -->
<template name="tplA">
    <view id="id_a"></view>
</template>
    • 1
    • 2
    • 3
    • 4
    • 1
    • 2
    • 3
    • 4
    <!-- b.wxml -->
<import src="a.wxml" />
<template name="tplB">
    <view id="id_b"></view>
</template>

// 引入 a.wxml 中模版
<template is="tplA" />
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    <!-- c.wxml -->
<import src="b.wxml" />
<template is="tplB" />  <!-- 引用模版生效 -->
<template is="tplA" /> <!-- 引用模版無效 -->
    • 1
    • 2
    • 3
    • 4
    • 1
    • 2
    • 3
    • 4

    未報錯，只是警告，但也可知import無法嵌套跨文件引入：

    Fri Jan 06 2017 15:53:55 GMT+0800 (中國標準時間) WXML Runtime warning
Template "tplA" not found.
    • 1
    • 2
    • 1
    • 2

  • include

    這個引入的是除了template定義之外的所有代碼，相當於將代碼拷貝到當前位置。

    <!--a.wxml-->
<template name="tplA">
    <view>AAAAAAAAAAAAAAAAAAAAAAAA</view>
</template>

<view>header</view>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    <!--b.wxml-->
<template name="tplB">
    <view>BBBBBBBBBBBBBBBBBBBBBB</view>
</template>

<view>footer</view>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    <!--c.wxml-->
<include src="a.wxml" />
<view>body</view>
<include src="b.wxml" />
    • 1
    • 2
    • 3
    • 4
    • 1
    • 2
    • 3
    • 4

    結果： 如下，只是單純引入了除 template 之外的代碼，並且是拷貝到 inlucde 使用的當前位置

    <page>
<view>header</view>
<view>body</view>
<view>footer</view>
</page>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 1
    • 2
    • 3
    • 4
    • 5

總結：該文主要是根據 W3CSchool 上的資料，學習記錄下來的（後續也會一直學習微信小程序的東西）其實也基本差不多是 copy 到一起了吧，不過這樣有助於記憶，沒有什麼技術含量的東西。最近一段時間有點忙，博客什麼的壓根都沒上過，一個人在負責一塊還是感覺有點人手不足的，這段時間幾乎每天都是10點，11點多下班，週六還要加班。

忍不住要吐槽，不吐不快。。。。。。

  1. 槽點1：組內來了兩個應屆生，組長之前就說好了讓我一個跟着我讓我帶着，一起幫忙負責這一塊，可是說是這麼說，中途不停的給他安排其他任務，我總感覺是說安排到我這，就是來打醬油的，最後還是的自己去弄，後面又新接了一個開發的任務，搞的人都快搞虛了，不過也算是樂在其中吧，還是比較喜歡創造新東西，每天不停的去給別人填坑也是種苦，寶寶心裏苦~！）

新開發任務總算完結了，後期測試也算告終，其實也不是什麼複雜的東西，只是今年剛進公司對公司業務這塊並不是非常熟悉，所以花了點時間。現在搞完了自己也算有點成就感，嘿嘿~~！！！

  1. 槽點2：來了快一年，接觸過無數廠家的前端代碼，有些寫的複雜的讓人頭疼，給人感覺就是：我就是要寫的這麼複雜，甚至對象嵌套多達6-7層（Σ( ° △ °|||)︴），顯得我牛逼呀，哈哈~~~，是SB吧 - -！。還有一些廠家代碼確實非常不錯，對象，原型，閉包，命名等等，都是用的溜溜轉，也學到不少東西。

  2. 槽點3：代碼風格，代碼格式，代碼規範，規範，規範啊，重要的事情說三遍，包括本公司的代碼，和大多數其他廠家的代碼，代碼幾乎沒有任何規範，格式縮進命名等等，每次看到那種代碼，我真想跳樓， 
    本來就一個很小的BUG，因爲代碼問題，硬是要花半天甚至一天才能找到問題點，然後發現其實就是個變量用錯地方，或者是哪個單詞寫錯了。

這一年來，經歷了很多事情和看了很多代碼，對自己要求也嚴格了

  1. 變量名可以稍微長點（不能太長哦，:-)），但一定要表達清楚其意義，讓人一看到就知道是幹什麼的（繼續吐槽：全局變量漫天飛，還命名毫無語義感，不找找還真不知道是幹嘛的，另外也很少見過全局變量用一種約定方式去定義，比如說：前面統一加上個公司英文符號也好撒，或者你前面加個g/global什麼的也好啊，個人比較喜歡用g開頭去定義全局變量）；
  2. 代碼風格，包括縮進，空格的使用，有了進一步的認知和運用；
  3. 另外還就是一種思想：面向對象思想，真的很重要，包括新開發的任務上也運用上了，不過水平有限，也只是簡單的運用而已；

好了，很久沒記錄什麼了，也快放假回去過年了，雖然最近煩心事多，還是要好好努力下去不是，30歲或許是道砍，也或許不是，端看自己怎麼去看待和對待自己的人生了，多年來的感受只有一點：做自己最熱愛的事情，讓你能徹夜不眠還樂在其中的事情，那纔是人生的樂趣，一味的爲了生活而生活何嘗不是行屍走肉般的活着。

給自己加把油，加油！

友情鏈接:http://blog.csdn.net/gccll/article/details/54140177

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

微信支付元轉分的正確姿勢

雨果是程序员 2020-06-02 05:11:03

微信官方支付驗籤源碼分析

雨果是程序员 2020-06-02 05:11:03

微信小程序開發乾貨

左撇子123 2020-02-23 21:25:49

微信小程序上手指南

左撇子123 2020-02-23 21:25:48

微信支付元轉分的正確姿勢

雨果是程序员 2020-06-02 05:11:03

微信官方支付驗籤源碼分析

雨果是程序员 2020-06-02 05:11:03

微信小程序開發乾貨

左撇子123 2020-02-23 21:25:49