単一ページ応用SPA開発ベストプラクティス

最近vue+vue-routerで1ページアプリケーションの項目を作りましたが、ページは15個くらいあります.いくつかの開発経験を蓄積してここでいくつかの記録をします.本文は主にメンテナンス性の面からSPAの開発実践を考慮する
全局の色定義はlessまたはscssのファイルに配置され、他のコンポーネントとページimportという構成は色を参照します.
サンプルコード:define.scss

$bgColor: #fff;
$color:#619eee;
$fontColor:#333333;
$fontColor01:#A5A5A5;
$fontColor02:#4a4a4a;
$fontColor03:#448CFF;
$color300:#ed5630;
$color3001:#fbfbfb;
$accpetColor:#2fbe27;
$refusedColor: #de0101;
$hrefColor:#4a90e2;
$redColor:#ff4c4c;

メリット:
駅全体の色のスタイルを維持しやすく、VIのアップグレードや改版などに遭遇したら、楽しんでください.
vue,vue-router単独抽出,scriptラベルで導入
bad case

npm install vue
npm install vue-router
//js
import Vue from 'vue'
import VueRouter from 'vue-router'

good case

または

//myTool.js

function get(param){
    $.get(param);
}
function post(param){
    $.post(param)
}</code></pre> 
 <p>      。。      </p> 
 <ul> 
  <li><p>1.               ，    ，   mtop     (        )，           。                      api    </p></li> 
 </ul> 
 <p>ex：</p> 
 <pre><code class="JavaScript">function get(param) {
    switch (container) {
        case "taobao":
            mtop.request(param);
            break;
        case "web":
            $.get(param)
            break;
        case "weixin":
            //balabala
            break;
        default:
            break;
    }
}</code></pre> 
 <ul> 
  <li><p>2.    csrf           token。         csrf，     </p></li> 
  <li><p>3.               loading   ,                </p></li> 
 </ul> 
 <p>ex：</p> 
 <pre><code class="JavaScript">function get(param){
    var show = param.showloading===undefined?true:param.showloading;
    if(show){
        $.showPreloader();
    }
    $.get(param);
}</code></pre> 
 <ul> 
  <li><p>4.v-model v-on:input  </p></li> 
 </ul> 
 <p>ex：vue 2.2.0+</p> 
 <pre><code class="html"><input type="text" v-model="a" v-on:input="myInput"/>
<script>
function myInput(){
    this.a = "abc";
}

myInputメソッドで入力値を検証するなどの操作をすると、v-modelも入力ボックスのinputイベントを傍受しているため、対応するinputにデータが更新されていないことがわかります.
解決策:value値をバインドし、jsはvalueを更新します.

function myInput(){
    var formattedValue = "abc";
    this.a = formattedValue;
    this.$refs.input.value = formattedValue
    this.$emit('input', Number(formattedValue))
  }

中国語:v-modelもあまり当てはまらない

     IME (   、   、    ) (IME  ’   ’)   ，    v-model    ime        。         ，    input  。

詳細は、カスタムイベントを使用したフォーム入力コンポーネントのリンクを参照してください.
5.iosのfixed問題を優雅に解決する
iosのfixed問題は古くからあり、1ページのアプリケーションではこのようなバグを処理する必要がある.この問題を優雅に解決するには
図:これは古典的なモバイルエンドレイアウトです.ヘッダーとfooterはブラウザに対して固定され、bodyの高さは可変です.
このようなレイアウトは単独のページでは難しくありません.しかしfooterをfixedに設定するとiosで奇妙な効果が見られます.
1ページのアプリケーションにこのようなページがたくさんあり、ヘッダーの高さも固定されていない場合、各ページがbodyの高さcssを解決する必要があるのは少し煩わしいことに気づきます.
このことをする優雅な方法はありませんか.コードのメンテナンス性を向上させます.
このレイアウトの難点は、bodyの異なる機種での高さをどのようにするかです.純粋なcssで作る場合はcalcやboderなどを使う必要があり、ページごとにheaderが異なる場合はbodyの高さを再計算する必要があります.
レイアウト面ではjsで処理することはお勧めしませんが、jsでbodyの高さを処理する時です.
手順:

容器の高さを取得する必要があります.

var w_height = $(window).height();

headerとfooterの等fixed要素の高さ

を取得する.
ここではfixedが必要な要素にカスタムプロパティを追加できます.
fixed-box="true"

//balabalaba

• 在每个页面被路由到加载的时候mounted触发一个事件，告知js需要计算处理body高度

mounted: function() {
            _body.trigger("mounted");        
         },

はmainです.jsなどのエントリ関数でこのイベント処理に関する論理

を傍受する

jWin.on("mounted", function () {  
  //                     
      var height = 0;    
      $("[fixed-box='true']").each(function () {
                              height = height + $(this).height();   
                             }); 
      var h = w_height - height; 
      $('[fixed-box="scroll"]').height(h);
  });

これにより、ページ全体のレイアウトがこのjsで処理され、後続の新しいページは2つのことをするだけです.

1.    fixed  。

2. mounted       。

6.他のappを引っ張る方法
Webappが他のnative appを引っ張るのは一般的なシーンで、通常はschemeを通じて他のappを引き起こす.
しかしiosではたまにこの引き上げの動作に遭遇し、たまにいくつかのwebコンテナにhistoryに記録されることがあります.この状況を処理するために通常iosの中で私たちはiframeの要素を確立してiframeのsrcをこのschemaに指向して、それからiframeをdomに挿入して、遅延してこの要素を削除します.これでhistoryにはこの記録はありません.しかし、この方法はアンドロイドには無効です.
個人ブログの同期更新https://www.56way.com/p/108.html