板橋隊長張基孝のVuejs入門基礎授業を聞いて、内容を整理しました.
毎日20分ちょっとVuejs頑張れ.

ライブラリ化

最後のパブリケーションでオブジェクトのプロパティを変更します.defineProperty()を作成しました.
レコードをライブラリ化します.

1.init()という名前の関数を作成する

        function init(){

        }

2.オブジェクトはinit()にあります。作成したdefineProperty()の追加

        function init(){
            Object.defineProperty(viewModel, 'str', {
            // 속성에 접근했을 때의 동작을 정의 
            get: function(){
                console.log('접근');
            }, 
            // 속성에 값을 할당했을 때의 동작을 정의 
            set: function(newValue){
                div.innerHTML = newValue;
            }
         });
        }

これでinit()という関数が定義されます.
Init()関数には2つの機能があります.
viewModelオブジェクトのstrアクセス時の動作と割り当て時の動作を定義します.

3.付与部をrender()関数にする

set:function(newValue)には付与部分があります.

div.innerHTML = newValue;

viewModelのstrプロパティにnewValueを割り当てます.
render()関数として使用すると、次のコードが生成されます.

        function render(newValue){
            div.innerHTML = newValue;
        }

変更結果

現在init()関数はrender()関数を呼び出す形式となっている.

	// 함수 정의 
        function init(){
            Object.defineProperty(viewModel, 'str', {
            // 속성에 접근했을 때의 동작을 정의 
            get: function(){
                console.log('접근');
            }, 
            // 속성에 값을 할당했을 때의 동작을 정의 
            set: function(newValue){
                render(newValue)
            }
         });
        }

	// 함수 정의 
        function render(newValue){
            div.innerHTML = newValue;
        }
        
    // 함수 호출 
        init();

4.init()とrender()をインスタント実行関数に入れる

インスタント実行関数とは?

定義されるとすぐに実行されるJavaScript関数.

インスタント実行関数の形状

( function() )

(カッコで始まる)カッコで終わる匿名関数.
カッコで囲むのは、変数スキャンを区別するためです.
functionの横に()カッコがあり、インスタント実行関数を生成します.
これにより、JavaScriptエンジンはすぐに関数を解析して呼び出すことができます.
即時実行関数MDNドキュメント

インスタント実行関数にコードを挿入した結果

    <script>
        var div  = document.querySelector('#app');
        var viewModel = {};


        (function(){ // 즉시실행함수 

            function init(){
                Object.defineProperty(viewModel, 'str', {
                // 속성에 접근했을 때의 동작을 정의 
                get: function(){
                    console.log('접근');
                }, 
                // 속성에 값을 할당했을 때의 동작을 정의 
                set: function(newValue){
                    render(newValue)
                }
            });
            }

            function render(newValue){
                div.innerHTML = newValue;
            }

            init()
        })
    </script>

一般的なオープンソースライブラリでは、変数スキャンを保護するために関数を直ちに実行することを選択します.

5.コール

コードを保存し、「Open with Live Server」を使用してブラウザを開きます.
ブラウザの開発者ツールF 12を開きます.
コンソールはViewModelオブジェクトを呼び出します.

ここではライブラリ化がどのようなものかを学びました.