真のモジュール性
フロントエンドのモジュール化は非常に早く始まりました。 JS、モジュラーパッケージのブラウザー化、または依存関係インジェクションのAngularをブラウスライドするかどうかにかかわらず、JSコードを小さなモジュールに分割して組み立てることができます。また、CSSファイルを小さなモジュールに分割するために、CSSファイルを書き込むために、より少ないまたはSASSを使用して、CSSコードでカプセル化、継承、多型などのオブジェクト指向の特性を感じます。
ただし、Webpackが出てくる前に、モジュール性と呼ばれるものをモジュール性とはまったく見なすことができませんでした。なぜ私たちはこれを言うのですか？解決されていない重要な問題があるため、これはJSモジュールのCSSモジュールへの依存性です。
たとえば、JSモジュールモードがある場合、ダイアログボックスをポップアップするために直接インポートして呼び出すことができますか？下の図に示すように大丈夫ですか？
理論的には、これは事実であるはずですが、実際、このモーダルは実際には対応するCSSモジュールModal.lessに依存しています。このモジュールをインポートしない場合、通常のダイアログボックスをポップアップできません。さらに、このCSSモジュールのインポートは、JSモジュールのインポートと同じ場所ではなく、別のCSSファイルに記述されます。言い換えれば、依存関係は実際には次のようなものです。
モジュールを使用するには、2つのファイルでインポート操作を1つずつ実行する必要があります。これは実際には非常に奇妙で不合理なものです！なぜモジュール式である必要があるのですか？モジュールをインポートした後に使用できるモジュールをカプセル化することです。このモジュール自体によって完全に処理される依存性と、どのような依存関係が存在するか。つまり、上記の図のmodal.cssへの依存性は、modal.js自体で処理する必要があります。
しかし、私たちは、正しいからではなく、この間違った方法に慣れているからではなく、N年間書いたフロントエンドのためにこのようなモジュールを書いています。現在、VUEを使用して、モジュールのすべての依存関係を完全にカプセル化できます。テンプレート、CSS、JSであろうと、もう気にする必要はありません。このモジュールを導入するだけで、それを使用でき、モジュールの依存関係は単独で処理されます。
その後、私たちの依存関係は次のようになります。
Modal.vueには必要なすべての依存関係が含まれているため、対応するCSSやテンプレートに対処する必要はなくなりました。これは、モジュール性が達成すべき効果です。
Vueプロジェクトを作成します
Vueはプロジェクトテンプレートを作成するためのツールVue-Cliを提供します：https：//github.com/vuejs/vue-cli
ここでは、最初に別のテンプレートプロジェクトを試しました：https：//github.com/vuejs-templates/webpack
その後、純粋なJSを使用する代わりにモジュールを作成できますが、Webpackを使用して、モジュールに関連するすべてのコンテンツをファイルに記述します。以前のTODOリストを例にとると、実際、前の章ではコンポーネントの使用についてのみ説明したので、そのように書きました。次のように、より良い執筆方法に変更しましょう。
list.vue：
<テンプレート> <ul> <li v-for = 'dodo in list'> <label v-bind：class = "{done：done：done}"> <input type = "checkbox" v-model = "todo.done"/> {{todo.title}}}}} </label> </li> </ul> </ul> </ul </</ul> </ul> </ul> </ul> </ul> </ul> </ul> array}}、data（）{return {list：[]}}、events：{add（input）{if（input）return this.list.unshift（{title：input、done}）}}} </script> <style lang = "scoped> ul {magne-lem;パディング：0; .done {Text-Decoration：Line-Through; }} </style>form.vue：
<テンプレート> <h1> {{username}} 's todo list </h1> <form v-on：submit = "add" v-on：submit.prevent> <入力タイプ= "text" v-model = "input"/> <input = "submit" value =' add '/> </form> </export {string> <sprist> <> <> <sprist> <sprist> 'named'}}、data（）{return {input： ''}}、methods：{add（）{this。$ dispatch（ 'add'、this.input）this.input = ''}}} </scrip>todo.vue：
<テンプレート> <div id = "todo"> <todo-form username = 'lily'> </dodo-form> <todo-list> </dotolist> </div {add（input）{this。$ broadcast（ 'add'、input）}}} </script> <style> </style>app.vue：
<テンプレート> <todo> </dodo> </template> <script> './components/todo.vueexport default {components：{' todo '：dodo}} </scrip> <style> </style> </style>このようにして、前のTODOリストをモジュール式として書き直しました。モジュール性は、大規模なアプリケーションを構築するための基礎の1つですが、これで十分ではありません。それでも必要です。
•最高の国家管理、さまざまなコンポーネントが共有する州の独立した管理
•自動テスト
•ルーティングなど。
ここでは、そのうちの1つだけを行います。これは、状態を別のモジュールに分離することです。明らかに、TODOリストアプリケーションの場合、TODOリストを保存するデータ構造は、異なるコンポーネントで共有される状態です。
なぜ以前にイベントをブロードキャストする必要があったのですか？これは、異なるコンポーネント間で動作するデータがlist.vueに保存されたためです。したがって、form.vueでデータを追加する場合は、list.vueを通知してイベントを追加する必要があります。
言い換えれば、このデータはlist.vueごとにプライベートではなく、少なくともこれら2つのコンポーネントが公開する必要があります。 list.vueが所有しているので、form.vueはそれを変更することはできず、イベントを通じて通知する必要があります。
イベント方法はエレガントですが、実際にはより良いことができます。これはデータを分離するためです。
ここでは、store.jsファイルを追加します。
export default {list：[]、add（title）{if（！title）return this.list.unshift（{title：title、done：false}）}}}次に、list.vueを変更できます。コードのJS部分のみがここに投稿されています。
'../store.js'export defaultからのインポートストア{props：{initlist：{type：array}}、data（）{return store}}form.vueはブロードキャストを必要とせず、store.addメソッドを直接呼び出すことで追加できます。
'../store.js'export default {props：{username：{type：string、default：' namamed '}}、data（）{return {input：' '}}、methods：{add（）{store.add（this.input）this.input ='}}}}} from 'からstoreをインポートするこの変更後、ロジック全体がはるかに明確になり、アプリケーションがより複雑になればなるほど、パブリックストアを抽出する必要があります。そうしないと、空中に放送されます。
さらに、このプロジェクトテンプレートを使用した後、Hot-Reloadはとてもクールで、さわやかに保存されます。
上記のソースコードは、https：//github.com/lihongxun945/vue-webpack-todo-listにあります
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。