js原生外掛程式格式解析

來源:互聯網
上載者:User

標籤:back   var   顏色   通過   this   listen   script   接下來   建構函式   

一個合格的外掛程式必須滿足以下要求:

1.擁有獨立範圍與使用者範圍隔離,外掛程式內的私人變數不可影響使用者定義的變數

2.擁有預設參數

3.提供配置方法讓使用者可改變參數

4.提供監聽介面,以監聽頁面操作

5.支援鏈式調用

接下來是一個改變文本顏色的簡單外掛程式

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <p class="a">11</p>        <input type="button" class="clickIt"/>    </body>    <script>        //自執行函數內變數擁有獨立範圍並與外界隔離        (function(){            //預設參數寫在最前面            var obj = ‘‘            //參數方法API            var api = {                //配置方法改變參數                config: function (opt) {                    obj= document.querySelector(opt)                    //返回this對象,其指向調用此方法的對象,故可以鏈式調用                    return this                },                //監聽頁面操作                listen: function listen(elem) {                    document.querySelector(elem).onclick= ()=> {                        this.fun1(obj)                    }                    return this                },                fun1: function(obj) {                    obj.style.color= "red"                    return this                }            }            //this為window對象,simplePlugin為外掛程式名稱            this.simplePlugin= api        })()    </script>    <script>        simplePlugin.config(‘.a‘).listen(".clickIt")    </script></html>

另一種格式是通過建構函式建立執行個體:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <p class="a">11</p>        <input type="button" class="clickIt"/>    </body>    <script>        //自執行函數內變數擁有獨立範圍並與外界隔離        (function(){            function api(){                this.obj= ‘‘                this.config= (opt)=> {                    obj= document.querySelector(opt)                    //返回this對象,其指向調用此方法的對象,故可以鏈式調用                    return this                }                //監聽頁面操作                this.listen= (elem)=> {                    document.querySelector(elem).onclick= ()=> {                        this.fun1(obj)                    }                    return this                }                this.fun1= (obj)=> {                    obj.style.color= "red"                    return this                }            }            //this為window對象,simplePlugin為外掛程式名稱            this.simplePlugin= api        })()    </script>    <script>        var sp= new simplePlugin()        sp.config(‘.a‘).listen(".clickIt")    </script></html>

 

js原生外掛程式格式解析

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.