• <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
      <nav id="xcyjv"></nav>
    1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>

        Nautil 中使用雙向數據綁定的實現

         更新時間:2019年10月02日 10:13:10   作者:否子戈   我要評論
        這篇文章主要介紹了Nautil 中使用雙向數據綁定的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

        雖然是基于 react 的框架,但是在 nautil 中可以使用雙向數據綁定,這得益于基于觀察者模式的開發思路。在 react 中使用雙向綁定并非沒有需求,react 嚴格的單向數據流,嚴重影響了開發者的發揮空間,特別是在表單組件的使用中,很容易陷入回調地獄,即使 redux 也無法避免。

        現有狀態管理的問題

        我們都知道,react 是單向數據流的,數據只能從外部通過 props 傳入,再通過 props 上面傳入的回調函數再傳出去,直接修改 props 或者上面的對象,不會帶來界面的更新,而且會導致數據不可預期。

        基于這種單向數據流的 flux 思想,redux 還遵循了函數式編程的規范,保證了數據的干凈。同時,它提供了自頂向下的分發機制,修改 redux store 中的數據,會觸發所有connected 的組件。而觸發過程是,調用 connected 組件 props.dispatch 方法。

        雖然單向數據流的方式保證了數據流干凈,但 redux 的編程方式太復雜了。它不僅增加了數據構造本身的邏輯代碼,而且 action 代碼也是分散的,當你需要進行修改時,有的時候會在好幾個文件之間轉暈。雖然有很多優化 redux 樣板代碼的庫,但受限于它的編程思想,仍然不好在項目中節省更多時間。

        新的思維方式

        出于節省更多時間成本的目的,我在開發 nautil 中沒有使用 flux 那一套,而是另辟蹊徑,做了很像 mobx 但又更簡單的事。

        我們來看一下如何在 nautil 中創建一個 store:

        import { Store } from 'nautil'
        const store = new Store({
         some: 123,
        })
        

        這樣我們就創建了一個 store,非常簡單,只傳入了默認值。而沒有各種 reducer 的樣板代碼。

        Store 實例是一個可觀察的對象,通過 watch 方法,可以監聽 store 中數據的變化。但凡能監聽到數據變化,我們就可以在數據變化時,更新界面渲染。所以,在 nautil 中,觀察者模式是核心思想,是實現 nautil 中各種響應式效果的前提條件。

        如果你用過 vue 的話,你一定喜歡 vue 中操作數據的方式。在 vue 中要將輸出框組件和數據綁定非常容易:

        <input type="text" v-model="name" />

        當用戶在輸入框中輸入內容時,this.name 也會隨之變化。而由于 vue 的響應式是自主綁定的,this.name 發生變化的同時,也會觸發 vue 內部對整個組件的重新渲染機制。這種將數據映射到視圖,再由視圖重新映射會數據的編程方式,在 angular 1.x 中隨處可見。

        在 angular 中,通過 ng-click 等事件綁定,或者控制器中調用 $http 實現數據請求,在響應結束的時候,都會自動觸發 angular 內部的 digest,并通過臟檢查機制,從頂至底的去完成界面重新渲染,由于臟檢查的特質,根本不需要 react 那種要求數據是 immutable 的,即使原始數據被修改,新的界面也會被按照新的數據進行渲染。

        我并不是說 angular 這種直接修改數據的方式更好,但起碼,在面對開發者時,它更直接,更容易理解,更符合編程習慣。

        雙向綁定

        從某些角度講,vue 是很容易讓人費解的。在 vue 的組件里,需要在組件內內置很多狀態來控制,這里的狀態指通過 data() 綁定到 this 上的各種響應式屬性。在組件內部,修改 this.name 可以觸發組件的重新渲染。但是,奇怪的是,vue 不能通過這種方式修改 props 中傳入的數據。

        這一點很讓人費解,對比 react,react 雖然支持組件內 state,但是比較強調組件的可控性,通過 props 來完全掌控 UI 界面的展示,也就是一個狀態對應一個 UI 界面。因此,react 提供了函數式組件,這種組件沒有自己的 state,這種組件最符合 react 主流思想的口味,而且,整個 react 編程也一以貫之,遵循這種 props 控制一切的理念。

        但是,vue 明顯更強調 this 上面屬性的響應式特性。卻又不提供 props 反寫的能力,讓人百思不解。另一個讓人百思不解的是,既然 vue 推崇它的屬性響應式特點,為何 vuex 卻要像 redux 那樣編程?甚至還要分 state, mutaion, action 三種東西,卻不繼續發揮屬性更新形式的響應式編程特點。

        Nautil 在這條路上一走到底,將響應式編程發揮到極致。

        簡單的講,“雙向綁定”是要做到組件內和組件外數據的雙向修改,外部修改數據時,組件內部即時響應變化,組件內部修改數據時,外部整個應用的對應部分也隨即發生更新。這一點在 angular 1.x 中已經實現了,為何新的框架反而不實現呢?

        因此,我要在 nautil 實現的雙向綁定方案,更加徹底,更符合開發者想要的方式。

        但是,如何在 react 里面實現雙向綁定呢?

        vue 的 v-model 給了我啟示。我們去看 v-model 指令,實質上,它是一個將 v-bind 和 v-on 動作簡化的語法糖。

        <input type="text" :value="name" @input="name = $event.target.value" />

        一個雙向綁定的語法,實際上是一個數據綁定和一個事件響應的結合體。不過 vue 有一個優勢,它是基于模板解析的,所以寫法上非常有優勢。而 react 如果要依靠編譯的話,非常不穩定,因為不知道其他人打算怎么用。最后,我找到一種特別的語法,用來表達雙向綁定這種數據傳遞方式。

        我們先來看下一個實現的效果:

        import { Component, Store } from 'nautil'
        import { createTwoWayBinding } from 'nautil/utils'
        import { initialize, pipe, observe } from 'nautil/operators'
        import { Section, Text, Input } from 'nautil/components'
        
        export class OneComponet extends Component {
         static props = {
          store: Store,
         }
         render() {
          const { store } = this.attrs
          const { state } = store
          const $state = createTwoWayBinding(state) // 創建一個可用于雙向綁定的宿主對象
          return (
           <Section>
            <Text>name: {state.name}</Text>
            <Input $value={$state.name} />
           </Section>
          )
         }
        }
        
        export default pipe([
         initialize('store', Store, { name: 'tomy' }),
         observe('store'),
        ])(OneComponent)
        
        

        上面的代碼利用了比較多的東西,例如 nautil 中的 Store 和指令。但單純雙向綁定這個點,你只需要注意 Input 組件的 $value 屬性。在 nauti 中,$ 開頭的屬性表示雙向綁定屬性,它的值必須是一個特定結構,而非普通值。

        從原理上將,nautil 中的雙向綁定基于一個特定結構。在這個特定結構中,包含了值本身,和一個值改變時的回調函數,當組件內部的該值發生變化時,這個回調函數會被執行,更新界面的動作,在回調函數中被執行。而這個特定結構,被 createTwoWayBinding 抹平了結構在視覺上的差異。它的原始結構實際上是:

        $value={[state.value, value => state.value = value]}
        

        之所以 state.value = value 可以更新界面的渲染,是因為我們通過 observe 指令觀察了 store 的變化,從而在外層就讓界面可以根據 store 的變化而更新。

        利用雙向綁定

        對于組件本身而言,如何利用雙向綁定完成一些事情呢?我們來看Input 組件的源碼:

        export class Input extends Component {
         render() {
          const { type, placeholder, value, ...rest } = this.attrs
        
          const onChange = (e) => {
           const value = e.target.value
           this.attrs.value = value // 主要是這一句
           this.onChange$.next(e)
          }
        
          return <input
           {...rest}
        
           type={type}
           placeholder={placeholder}
           value={value}
        
           onChange={onChange}
           onFocus={e => this.onFocus$.next(e)}
           onBlur={e => this.onBlur$.next(e)}
           onSelect={e => this.onSelect$.next(e)}
        
           className={this.className}
           style={this.style}
          />
         }
        }
        
        

        對于 Input 組件而言,中間比普通 react 組件多了一句 this.attrs.value = value,這句話利用了雙向綁定特殊結構的第二個值,進行值的回傳和反寫。也就是說,在 nautil 中,雙向綁定具有兼容性,你可以這樣寫:

        <Input value={state.value} onChange={e => state.value = e.target.value} />

        也可以這樣寫(標準寫法):

        <Input $value={[state.value, value => state.value = value]}

        當然,如果你知道 nautil 里面的內置規則,甚至還可以這樣寫:

        <Input $value={state} />

        或者也可以利用前面提到的 createTwoWayBinding 函數(推薦用法):

        const $state = createTwoWayBinding(state)
        
        <Input $value={$state.value} />
        

        這樣寫可能更容易理解一些。

        Input, Textarea 等表單組件都有雙向綁定功能。但是,假如現在你自己想寫一個組件,使用雙向綁定功能,你需要怎么寫?其實很簡單,只需要直接操作 this.attrs 上的屬性即可:

        import { Component } from 'nautil'
        import { Button } from 'nautil/components'
        
        export class Some extends Component {
         static props = {
          $age: Number,
         }
         render() {
          return (
           <Button onHint={() => this.attrs.age ++}>grow</Button>
          )
         }
        }
        
        

        這樣的寫法比較嚴格,要求外部傳入的時候,必須傳入 $age 這個屬性,而不允許傳入 age 屬性。為了兼容,你可以學習 Input 組件的做法,在 onHint 的回調函數中,增加一個回調函數的調用。

        需要注意,this.attrs.age ++ 這個語句,不會真的修改 this.attrs.age 的值,這個修改動作會被攔截,它只是在編程上順延了 js 語法,但實際上,它的效果是調用雙向綁定特定結構的第二個參數,至于 this.attrs.age 的值是否真的變化,取決于雙向綁定特定結構第二個參數是否修改外部傳入的 age 值發生變化。

        1. 組件內直接使用 this.attrs.age ++ 修改外部傳來的屬性,目標是反寫外部數據
        2. 外部組件在往子組件傳遞雙向綁定屬性時,需要傳入一個特定結構

        createTwoWayBinding

        該函數用于基于傳入的對象,創建一個用于雙向綁定的對象。它的傳入參數是任意的,但是我推薦使用 store 或 model 的 state,這樣就不用自己構造第二個參數。

        但是,如果你想讓一個普通對象也可以實現響應式,你可以利用第二個參數:

        const { state } = this // react 的 state 本質上是一個普通對象
        const $state = createTwoWayBinding(state, ([state, keyPath, value], [target, key]) => {
         this.setState({ [key]: value })
        })
        
        <Input $value={$state.name} />
        

        目的上,createTwoWayBinding 最終是為雙向綁定服務的,所以不應該用它所創建的對象去讀取值。

        小結

        本文主要介紹了為什么要在 Nautil 中實現雙向綁定,怎么實現,以及如何使用的問題。雖然本文主要是介紹 Nautil 中的雙向數據綁定,但是也討論了 react, vue, angular 的一些數據狀態管理的東西,如果你對這些問題也有自己的想法,不妨在下方給我留言一起討論。

        以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

        相關文章

        最新評論

        01彩票网app
      1. <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
          <nav id="xcyjv"></nav>
        1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>
            大同 | 新泰 | 义乌 | 肇庆 | 阜新 | 那曲 | 简阳 | 瑞安 | 牡丹江 | 惠东 | 十堰 | 台南 | 赣州 | 章丘 | 扬州 | 三亚 | 金坛 | 甘肃兰州 | 鄂州 | 桐城 | 永康 | 清徐 | 德宏 | 枣庄 | 海南 | 荣成 | 普洱 | 文昌 | 如皋 | 盐城 | 郴州 | 连云港 | 安顺 | 云南昆明 | 中卫 | 塔城 | 江西南昌 | 阳春 | 黔南 | 余姚 | 喀什 | 吉林 | 温岭 | 镇江 | 西双版纳 | 咸阳 | 青海西宁 | 广州 | 孝感 | 榆林 | 任丘 | 山东青岛 | 海东 | 湛江 | 招远 | 贵港 | 镇江 | 庆阳 | 邯郸 | 渭南 | 山西太原 | 大理 | 鹤岗 | 大兴安岭 | 丽江 | 兴安盟 | 阿拉善盟 | 宁波 | 榆林 | 安顺 | 宁德 | 四平 | 文山 | 武威 | 伊犁 | 吉林 | 东阳 | 七台河 | 鞍山 | 五家渠 | 滨州 | 南平 | 济南 | 清远 | 阿坝 | 朝阳 | 襄阳 | 晋城 | 临猗 | 佳木斯 | 万宁 | 本溪 | 黄石 | 眉山 | 莆田 | 鞍山 | 梧州 | 蓬莱 | 宜宾 | 泰安 | 屯昌 | 仁寿 | 衢州 | 青海西宁 | 沛县 | 吉林长春 | 和县 | 襄阳 | 仁寿 | 鸡西 | 西双版纳 | 黔南 | 焦作 | 张家口 | 如东 | 安庆 | 黄冈 | 潮州 | 绍兴 | 荆门 | 武威 | 蚌埠 | 新泰 | 洛阳 | 黑龙江哈尔滨 | 黄冈 | 宜春 | 迪庆 | 朝阳 | 泰州 | 鄢陵 | 滁州 | 通辽 | 宁波 | 临海 | 漳州 | 陕西西安 | 南阳 | 蓬莱 | 那曲 | 扬中 | 吐鲁番 | 齐齐哈尔 | 龙口 | 蚌埠 | 南京 | 中卫 | 江苏苏州 | 黑龙江哈尔滨 | 三亚 | 顺德 | 海拉尔 | 果洛 | 抚州 | 济南 | 双鸭山 | 泗阳 | 临汾 | 固原 | 丽江 | 天水 | 洛阳 | 九江 | 鸡西 | 绵阳 | 漯河 | 陕西西安 | 鹰潭 | 邳州 | 三河 | 孝感 | 新泰 | 黄山 | 黄冈 | 伊春 | 抚州 | 临猗 | 三河 | 永州 | 承德 | 廊坊 | 铁岭 | 衡阳 | 长葛 | 运城 | 定西 | 深圳 | 余姚 | 四平 | 如东 | 大庆 | 湖南长沙 | 晋江 | 安庆 | 揭阳 | 鹤壁 | 长治 | 信阳 | 吴忠 | 宁国 | 阳春 | 枣阳 | 东海 | 六盘水 | 桐城 | 聊城 | 营口 | 六盘水 | 宜都 | 德清 | 大丰 | 抚州 | 齐齐哈尔 | 山东青岛 | 亳州 | 山东青岛 | 任丘 | 义乌 | 宜春 | 雄安新区 | 义乌 | 偃师 | 正定 | 新泰 | 娄底 | 香港香港 | 姜堰 | 五家渠 | 三亚 | 诸暨 | 山西太原 | 靖江 | 眉山 | 海丰 | 鹤岗 | 阳泉 | 如东 | 涿州 | 周口 | 琼中 | 赣州 | 温州 | 宜都 | 芜湖 | 单县 | 海北 | 如东 | 白城 | 湘西 | 四川成都 | 海拉尔 | 湖州 | 博罗 | 澳门澳门 | 桐城 | 保亭 | 保定 | 湖北武汉 | 嘉峪关 | 通辽 | 长治 | 义乌 | 阿拉善盟 | 海南海口 | 溧阳 | 马鞍山 | 台山 | 文山 | 洛阳 | 新泰 | 温岭 | 洛阳 | 临夏 | 蓬莱 | 内蒙古呼和浩特 | 嘉峪关 | 山南 | 垦利 | 乐平 | 灵宝 | 怒江 | 邳州 | 大连 | 怒江 | 乐平 | 临沂 | 延边 | 沛县 | 六安 | 平顶山 | 岳阳 | 贵州贵阳 | 潜江 | 资阳 | 松原 | 丽江 | 黔西南 | 芜湖 | 泰州 | 酒泉 | 乐山 | 东台 | 鄢陵 | 长治 | 大连 | 甘南 | 铜陵 | 辽阳 | 东方 | 燕郊 | 延安 | 金华 | 项城 | 张家界 | 铜陵 | 江西南昌 | 临夏 | 宜昌 | 孝感 | 漯河 | 正定 | 昌都 | 渭南 | 汝州 | 喀什 | 天长 | 营口 | 泰兴 | 余姚 | 阜阳 | 巴中 | 姜堰 | 株洲 | 莱芜 | 赤峰 | 咸阳 | 甘肃兰州 | 三亚 | 洛阳 | 东营 | 安吉 | 临海 | 烟台 | 大同 | 宜昌 | 佛山 | 钦州 | 百色 | 扬州 | 漳州 | 金坛 | 吐鲁番 | 吕梁 | 台南 | 五家渠 | 咸阳 | 海南 | 武夷山 | 灌云 | 株洲 | 许昌 | 乐山 | 黔西南 | 株洲 | 许昌 | 济源 | 灵宝 | 张北 | 邵阳 | 济南 | 陇南 | 营口 | 漯河 | 迁安市 | 红河 | 果洛 | 博罗 | 安庆 | 安顺 | 济源 | 萍乡 | 德宏 | 肇庆 | 儋州 | 保山 | 新疆乌鲁木齐 | 阿拉尔 | 海安 | 常州 | 姜堰 | 云浮 | 柳州 | 东莞 | 凉山 | 淮南 | 马鞍山 | 清徐 | 清远 | 南京 | 大连 | 嘉峪关 | 忻州 | 乐平 | 辽源 | 临汾 | 阿勒泰 | 娄底 | 南平 | 泸州 | 泉州 | 泗洪 | 南充 | 玉树 | 绵阳 | 澳门澳门 | 延安 | 中山 | 镇江 | 惠州 | 铜川 | 库尔勒 | 黔南 | 鹤岗 | 鸡西 | 泰兴 | 海东 | 新泰 | 新乡 | 图木舒克 | 新余 | 湘西 | 河源 | 张家口 | 云浮 | 简阳 | 黔东南 | 温岭 | 伊犁 | 信阳 | 孝感 | 邳州 | 台北 | 巴彦淖尔市 | 清远 | 临夏 | 保山 | 涿州 | 公主岭 | 铜仁 | 湘潭 | 宁夏银川 | 阿坝 | 梧州 | 韶关 | 嘉兴 | 自贡 | 防城港 | 菏泽 | 诸城 | 楚雄 | 仁寿 | 哈密 | 濮阳 | 吉林长春 | 海丰 | 鄢陵 | 博尔塔拉 | 鞍山 | 马鞍山 | 三亚 | 招远 | 宁德 | 垦利 | 邳州 | 海宁 | 随州 | 赵县 | 辽阳 | 济宁 | 齐齐哈尔 | 舟山 | 三河 | 惠州 | 醴陵 | 馆陶 | 泰州 | 金昌 | 赣州 | 石狮 | 鹤岗 | 邵阳 | 章丘 | 楚雄 | 长垣 | 淮北 | 宁国 | 资阳 | 青海西宁 | 五家渠 | 佳木斯 | 莆田 | 运城 | 文山 | 海拉尔 | 贵州贵阳 | 阳春 | 涿州 | 池州 | 马鞍山 | 恩施 | 常州 | 莱芜 | 湘潭 | 溧阳 | 伊春 | 包头 | 龙口 | 如皋 | 商洛 | 辽宁沈阳 | 涿州 | 保山 | 扬中 | 四平 | 滨州 | 黄冈 | 大兴安岭 | 临海 | 朔州 | 韶关 | 阿克苏 | 湖北武汉 | 图木舒克 | 温岭 | 宜昌 | 泗洪 | 深圳 | 灌云 | 呼伦贝尔 | 通化 | 松原 | 保山 | 汕头 | 黄山 | 安岳 | 内蒙古呼和浩特 | 吉林 | 芜湖 | 秦皇岛 | 吉安 | 南平 | 锦州 | 驻马店 | 咸宁 | 佳木斯 | 曲靖 | 亳州 | 乐山 | 青州 | 塔城 | 咸阳 | 桐城 | 文山 | 简阳 | 兴安盟 | 湘西 | 日喀则 | 神农架 | 仙桃 | 东台 | 屯昌 | 宁夏银川 | 毕节 | 黄石 | 辽宁沈阳 | 正定 | 海宁 | 日喀则 | 邳州 | 东海 | 东莞 | 商丘 | 南充 | 六安 | 昌都 | 宁波 | 四平 | 怒江 | 菏泽 | 怀化 | 百色 | 玉环 | 松原 | 来宾 | 大庆 | 枣阳 | 仁寿 | 南京 | 咸阳 | 保定 | 顺德 | 漳州 | 明港 | 临海 | 巢湖 | 桂林 | 中山 | 新疆乌鲁木齐 | 马鞍山 | 贺州 | 滨州 | 文山 | 延边 | 鹤壁 | 茂名 | 台州 | 山西太原 | 廊坊 | 蓬莱 | 珠海 | 吉安 | 来宾 | 灌云 | 张家界 | 烟台 | 石嘴山 | 定安 | 鸡西 | 大连 | 蚌埠 | 邳州 | 福建福州 | 章丘 | 明港 | 惠东 | 随州 | 常德 | 淄博 | 台州 | 荣成 | 孝感 | 遵义 | 宁波 | 江门 | 常德 | 昆山 | 基隆 | 张北 | 兴安盟 | 江门 | 玉环 | 七台河 | 辽源 | 湘西 | 邢台 | 新余 | 武夷山 | 台州 | 乳山 | 扬中 | 通辽 | 定安 | 伊春 | 广汉 | 玉林 | 阿克苏 | 澳门澳门 | 珠海 | 海南海口 | 九江 | 株洲 | 大同 | 深圳 | 海西 | 南平 | 昭通 | 锡林郭勒 | 曹县 | 吉林长春 | 海西 | 吉林长春 | 南充 | 萍乡 | 中卫 | 新沂 | 湛江 | 黄石 | 昌吉 | 德清 | 神木 | 宿州 | 杞县 | 保定 | 威海 | 大理 | 简阳 | 台南 | 章丘 | 洛阳 | 吕梁 | 宜昌 | 东莞 | 崇左 | 姜堰 | 雅安 | 基隆 | 扬中 | 绵阳 | 常州 | 鹤壁 | 安岳 | 姜堰 | 东海 | 天水 | 连云港 | 黄冈 | 长垣 | 江西南昌 | 桂林 | 景德镇 | 庆阳 | 桐城 | 新乡 | 乌兰察布 | 莱芜 | 阿克苏 | 济南 | 燕郊 | 果洛 | 泰兴 | 聊城 | 阳春 | 镇江 | 博罗 | 丹东 | 邹城 | 乳山 | 日土 | 吕梁 | 抚州 | 雅安 | 威海 | 高雄 | 抚顺 | 博罗 | 海安 | 孝感 | 招远 | 喀什 | 信阳 | 吉林长春 | 黄南 | 黔南 | 舟山 | 香港香港 | 台北 | 沧州 | 萍乡 | 哈密 | 郴州 | 鹤壁 | 南通 | 淮南 | 昭通 | 茂名 | 厦门 | 梧州 | 汕尾 | 阿坝 | 神木 | 宁德 | 扬州 | 连云港 | 阳泉 | 许昌 | 昌吉 | 公主岭 | 六安 | 洛阳 | 信阳 | 楚雄 | 德宏 | 长治 | 龙岩 | 九江 | 山西太原 | 东台 | 泰州 | 昭通 | 北海 | 贵州贵阳 | 汝州 | 永新 | 防城港 | 济南 | 马鞍山 | 大丰 | 焦作 | 滕州 | 济源 | 贺州 | 蚌埠 | 包头 | 茂名 | 赣州 | 温州 | 宜昌 | 神农架 | 巢湖 | 阿拉善盟 | 南充 | 威海 | 南京 | 嘉兴 | 阳泉 | 阿拉善盟 | 金昌 | 鄂州 | 淄博 | 洛阳 | 邵阳 | 咸阳 | 日喀则 | 万宁 | 德清 | 邳州 | 西藏拉萨 | 顺德 | 咸阳 | 包头 | 黄山 | 通辽 | 白山 | 天水 | 任丘 | 沛县 | 六盘水 | 博罗 | 邹平 | 高密 | 肥城 | 菏泽 | 嘉善 | 大兴安岭 | 商洛 | 咸阳 | 乌兰察布 | 锡林郭勒 | 广汉 | 平潭 | 莱州 | 莒县 | 资阳 | 塔城 | 偃师 | 邳州 | 荆州 | 驻马店 | 日喀则 | 广饶 | 五家渠 | 喀什 | 文昌 | 泸州 | 临海 | 崇左 | 克孜勒苏 | 安徽合肥 | 通化 | 鞍山 | 无锡 | 启东 | 仁寿 | 天长 | 兴安盟 | 大连 | 金坛 | 衢州 | 通辽 | 桐乡 | 随州 | 宿州 | 章丘 | 本溪 | 吴忠 | 日喀则 | 宁德 | 江门 | 克孜勒苏 | 渭南 | 博尔塔拉 | 遵义 | 海拉尔 | 任丘 | 鞍山 | 鄂州 | 天水 | 瓦房店 | 徐州 | 周口 | 通辽 | 甘南 | 遵义 | 阿勒泰 | 江苏苏州 | 广元 | 巴彦淖尔市 | 张家界 | 曲靖 | 吉林 | 任丘 | 杞县 | 连云港 | 金华 | 济源 | 贵州贵阳 | 泰安 | 萍乡 | 白山 | 海南海口 | 遵义 | 菏泽 | 唐山 | 神农架 | 宁德 | 商丘 | 绵阳 | 赵县 | 邹平 | 孝感 | 海拉尔 | 灌南 | 娄底 | 漯河 | 贵州贵阳 | 漯河 | 沛县 | 四川成都 | 松原 | 三河 | 山西太原 | 聊城 | 兴安盟 | 三门峡 | 普洱 | 诸城 | 潍坊 | 本溪 | 如皋 | 黔西南 | 达州 | 洛阳 | 陵水 | 海南海口 | 灵宝 | 许昌 | 永新 | 潮州 | 台州 | 韶关 | 荆门 | 湖北武汉 | 泗洪 | 四平 | 宿迁 | 商洛 | 周口 | 石嘴山 | 永康 | 海宁 | 锡林郭勒 | 东阳 | 宁夏银川 | 永州 | 灵宝 | 玉环 | 潍坊 | 乳山 | 平凉 | 渭南 | 潜江 | 惠东 | 白城 | 陵水 | 宁波 | 绵阳 | 益阳 | 庄河 | 辽宁沈阳 | 渭南 | 温岭 | 湘西 | 韶关 | 兴安盟 | 温州 | 湖南长沙 | 安吉 | 天门 | 遂宁 | 克孜勒苏 | 朝阳 | 安顺 | 大庆 | 吐鲁番 | 台北 | 赤峰 | 鄢陵 | 遵义 | 寿光 | 金昌 | 襄阳 | 瑞安 | 大庆 | 昆山 | 海门 | 本溪 | 海拉尔 | 江西南昌 | 荆州 | 白城 | 五家渠 | 浙江杭州 | 娄底 | 鞍山 | 中卫 | 义乌 | 永新 | 果洛 | 黔南 | 宁波 | 禹州 | 铜陵 | 七台河 | 泉州 | 吴忠 | 燕郊 | 建湖 | 广西南宁 | 湖州 | 宜宾 | 邹城 | 临沧 | 巴中 | 丽江 | 海南 | 哈密 | 常州 | 张家口 | 邢台 | 营口 | 南京 | 甘南 | 南通 | 晋城 | 齐齐哈尔 | 阿里 | 荆门 | 长兴 | 德州 | 大同 | 海北 | 石狮 | 通辽 | 渭南 | 昌都 | 潜江 | 荆州 | 大丰 | 赤峰 | 台南 | 龙岩 | 玉林 | 凉山 | 六安 | 邹城 | 莒县 | 咸阳 | 东方 | 上饶 | 双鸭山 |