フロントエンドの「姿勢」の変化を体験してみた（前編）_html/css_WEB-ITnose

書くことは、自分を楽にするための時間です。前回の記事「Vue ES6 Jade Scss Webpack Gulp」では、今日はフロントエンド作業の「オープン方法」について説明しましたが、これまでのところ、フロントエンドに費やした時間は短く、経験も浅いため、途中での姿勢の変化は元に戻ります。まず、この過去を記録して、来年に思い出すことができます。次に、輝かしいキャリアを思い出すためにテキストを使用することもできます。封印されれば過去も未来も開ける。

この記事 Vue ES6 Jade Scss Webpack Gulp では、主にモバイル SPA ページの開発に関わるこのセクションの作業内容についても説明します。私がチームに参加したとき、私はフロントエンドの基本的な知識がまったくありませんでした (大学時代は HTML ページを txt で書いただけで、CSS はほとんど関与していませんでした)。ただし、その時点でチームは 1 年以上開発していました。 、さまざまな理由（取り組んでいる人が多すぎるなど）により、数が少なく、開発がほとんどありません。それに比べて、この 1 年間の発展は遅かったとはいえ、大きく前進しました。この過去の期間は次の段階で説明されます。

Phase 1: jQuery+Customization

以下は、初めてチームに参加したときにページレイアウトを書くときの「姿勢」です。もちろん、ここ 1 年間、レイアウト、スタイル、ロジックなどはすべて手作業で書かれており、モバイル端末では Dreamweaver ドラッグ アンド ドロップ のようなエディターを使用して PC 端末のように実装することはできないと報告されています。 Chrome での手書きレイアウト ページとデバッグ スタイルについては、これまでの経験からかなり心配になりました。

<div class="content">    <section>        <p data-source="string" data-name="conf.titleText"></p>        <a href="javascript:;" class="call-toast" data-source="string" data-name="conf.conf.callToastText"></a>    </section>    <section style="display:none">		<ol class="act-rule" data-source="list" data-name="conf.actRule"></ol>	</section></div>

この仕組みを知ってから、これは当時のチームがカスタマイズしたセットであることに気づきました。 方法はおおよそ次のとおりです。

var system = {	addData : function(setting){		$("[data-name]").html("");		$("[data-source='string']").each(function(){			var key = $(this).data("name");			var type = $(this).data("source");			$(this).html(eval("setting."+key));		});		$("[data-source='img']").each(function(){			var key = $(this).data("name");			var type = $(this).data("source");			$(this).attr("src",vars.cdn+eval("setting."+key));		});	}}

ページ上でデータをリクエストした後、 call the self 定義メソッドは次のとおりです: system.addData(data); 時間応答に関して言えば、当時採用されたメソッドは非常に独創的だったようです:

$('call-toast"').click(function(){ // do call toast })

そういえば、 jQuery の使用は、当時は確かに多くの利点をもたらしましたが、同時に多くの問題も引き起こしました。あまり慣れていない場合でも使用できますが、簡単に問題が発生する可能性もあります。 ; 当時、このような書き方に悩まされたのはかなり悲惨だったということをぼんやりと覚えていますが、そのために jQuery について勉強したメモも残しました。後で、次のように使用する必要があることを知りました。

$('call-toast"').on('click',function(){ // do call toast })

この段階では、フロントエンドとバックエンドは分離されていますが、フロントエンドのページ レイアウトとロジックはまだ完全に分離されていません。 php ファイルからスタイルとリソースのみが取り出され、cdn にデプロイされます。私の記憶に新しいことは、次のとおりです。動作メカニズムでは、要件が完了したら、まずイントラネットでテストし、OK 後に svn に送信し、その後オンラインでリリースする必要があります。これは現在も続いています。まあ、この件について話すと、不平不満を言っているように感じますが、実際はそうではなく、それほど無駄な時間を費やしたくないだけです。このローカル ファイル同期 ftp を例に挙げると、そのときに教えられたのは Xftp 4 を使用するということでした。あはは、変更を加えるたびに FTP を手動で同期することはできません。手が痛くなり、時間が無駄になります。そのため、ローカルに同期する前に、常に Xftp 4 を使用してオンライン ファイルを開きます。

フェーズ 2: jQuery+Backbone+Underscore

約 1 ～ 2 か月後、各プラットフォームは jQuery+Backbone+Underscore に徐々に移行しました。今では、選択が非常に重要であるように見えます。 Angular React が使用されていないことは不明です (Vue は今日ほど普及していなかったはずです。この使用法は現在でも使用されています)。それは人々に簡単だと思わせますが、それがこの問題を進めるのを難しくしていることがよくあります。現在、Backbone Underscore を使用して作業のニーズを達成しているようです。

<div class="content">    <section>        <p><%= conf.titleText %></p>        <a href="javascript:;" class="call-toast"><%= conf.callToastText %></a>    </section>    <section style="display:none">        <table class="act-rule">            <%_.each(conf.actRule , function(ruleDesc ,index){%>                <tr>                    <td><%= ruleDesc %></td>                </tr>            <% }) %>        </table>	</section></div>

この段階でも、レイアウト ファイルとロジック コードは分離されておらず、

var mainView = Backbone.View.extend({	, initialize: function(options){		// this.listenTo(this.model,"change",this.render);		this.render();	}			, render: function(){		App.V.prototype.render.apply(this);		return this;	}		, events:   {	    'click .call-toast':'onCallToast',	}	, onCallToast : function(e){		// do call toast	}});

この段階では、以前と比べて開発効率の観点からは、どれくらい改善されましたか? ただし、ツールの点では、

Xftp 4

、

WinScp

などを放棄し、Sublimeのsftpプラグインを採用しました。このプラグインには古いポップアップ ボックスがあり、とても使いやすいです。「Sublime Text をエレガントに使用する方法」に喜んで記録した人もいます。それらはすべて、現状の不快感に対する抵抗の一種です。 フェーズ 3: jQuery+Backbone+Underscore+RequireJs RequireJs はこの段階で導入され、段階的に移行するのに 2 か月以上かかりました。これ自体は段階とみなされませんが、フロントエンド プロジェクトの開発構造は次のとおりです。大幅に変更されました: フロントエンドとバックエンドが完全に分離され、レイアウト、ロジック、スタイルが初めて完全に独立しました。前のステージと比較して、そのモードには次の主な変更があります:

define('text!xyz/default.tpl',[],function () { return 'Html template String';});define('xyz/main',["tool","app", "text!xyz/default.tpl"],function(Tool, App, tpl){    var mainView = App.V.extend({    	, initialize: function(options){    		// this.listenTo(this.model,"change",this.render);    		this.render();    	}, render: function(){    		App.V.prototype.render.apply(this);    		return this;    	}, events:   {    	    'click .call-toast':'onCallToast',    	}, onCallToast : function(e){        }    });}

可喜的是，项目终于开启了 模块化 的进程；可悲的是，即便如此然并卵；坦率来讲，这个阶段，并为此感到兴奋；因为模块化的引进，并未给开发效率带来任何提升；反而下降不少：一是，前后端完全分离，前端js，样式，资源全部署cdn，然而并未有很好cdn缓存清理机制，导致发布后有问题，难以快速有效更新(蛮久之后才出一折衷方案)。二，布局写成模板(default.tpl)，没当要发布，因线上存在的跨域问题，需当模板文件压缩成string，以如下模式注入mian.js:

define('text!xyz/default.tpl',[],function () { return 'html template content string';});

也是后来很久才知道，require.js提供了对应的打包方式；可是那时并不知道，在几次发布十分忘记合并（合并也不容易），造成十二分不爽后，才去研究下了，此时得知 Gulp ；为此学会gulp之后，有改善了整个流程：以 gulp-tlp2mod 来将tpl转化为js并借助 gulp-concat 进行合并打包；如此Sublime的sftp插件就显得不能很好作用，因此也找到 gulp-sftp 予以替代；其他如代码检测，压缩；图片一键压缩等也是在这时期优化的。

A Problem Is A Chance For You To Do Your Best：当发现一事物不怎么合理时，也是自我成长的机会；也在这阶段留下了两篇关于gulp的学习笔记：Gulp探究折腾之路(I)，Gulp折腾之路(II)；同时也去了解了下Win下跑起命令行的具体，随后用了近5小时写下了Win下必备神器之Cmder。现在回顾，这都是十二分值得的，这为之后项目迁移 Vue Es6 Webpack 打下了一个良好的基础。

阶段四：jQuery+ Vue ES6 Jade Scss Webpack Gulp

前端如今发现可谓纷繁杂乱而欣欣向荣；如今这阶段，组件化开发已是大势所趋；具体已在 Vue ES6 Jade Scss Webpack Gulp 有过叙述，按下不提；以下便是采用 Vue 来搞事儿的“姿势”：

<template>    <div class="content">        <section>            <p>{{ conf.titleText }}</p>            <a href="javascript:;" class="call-toast" @click="onCallToast">{{ conf.callToastText }}</a>        </section>        <section style="display:none">            <table class="act-rule" v-for='ruleDesc in conf.actRule'>                <tr>                    <td>{{ ruleDesc }}</td>                </tr>            </table>    	</section>    </div></template><script type="text/javascript">import ActTools from  "ActTools";export default {    data () {        return{            conf: {},        }    },    compiled(){    },    methods: {        callToast: function(){            // do call toast        },        /*-----------------Callback Function--------------------Private Func*/         onCallToast: function(){            this.callToast();        }    },    events: {        'call-toast': function () {            this.callToast(dlgMsgObj)        }    }}</script><style> /*comp style*/ .call-toast{    color: #fe0;}</style>

如若采用 jade 像写 python 一般写html模板，可有感觉一股简洁美铺面开来？示例如下：

<template lang="jade">    div.content        section            p {{ conf.titleText }}            a(href="javascript:;" class="call-toast" @click="onCallToast") {{ conf.callToastText }}        section(style="display:none")            table(class="act-rule" v-for='ruleDesc in conf.actRule')                tr                      td {{ ruleDesc }}<template>

虽然 布局，逻辑，样式又回归至原始阶段，然而却是全新的概念，这般描述网上充盈，就不多赘述；因为组件化的引入，上述示例即可改造成如下模样：

<template lang="jade">    div.content        section            p {{ conf.titleText }}            a(href="#" class="call-toast" @click="onCallToast") {{ conf.callToastText }}            act-rule-copm        <template>  import ActTools from  "ActTools";import ActRuleCopm from "ActRuleCopm";//这里路径是利用webpack做了别名控制的；export default {    data () {        return{            conf: {},        }    },    methods: {        callToast: function(){            // do call toast        },        /*-----------------Callback Function--------------------Private Func*/         onCallToast: function(){            this.callToast();        }    }，    components: {        ActRuleCopm,    },}</script>

一经这般，公用代码得以提取为组件，在各大纷繁的应用中得以轻易复用；借助 jade 模板可以清晰而简洁；借助 ec6 ，更方便书写js，借助 webpack+gulp ，U Can Do what U Want To Do；如此一来，运行效率，产品体验，开发效率各大方面均有大幅度提升，其所怀悦，幸甚至哉。

前端框架更迭如此迅速，即便当然模式已然觉得挺okay，也不当停滞不前；想来日后撸起前端来，更为便捷；即便就目前状态而言，很多已经存在妙处，还当去学习&使用：譬如jQuery的替代；虚拟Dom的使用(前不久发布的Vue2.0已添此法)等等；故而先行在文章命名后有加 （其一） ，至于 （其二） 想必不就得将来即会将其唠叨来，Fighting。

以上，于深圳.南山 16-05-14 晴