【技術分享會】 @第四期 JQuery插件

時間 2019-11-18

原文原文鏈接

本講內容css

JavaScript
JQuery
JQuery插件
實例

JavaScripthtml

前端開發工程師必須掌握的三種技能
    描述內容的HTML
    描述網頁樣式的CSS
    描述網頁行爲的JavaScript

JavaScript是一門高端的、動態的、弱類型的編程語言，很是適合面向對象和函數式的編程風格

JQuery前端

站在巨人的肩膀上
JQuery是類庫仍是JQuery框架？
類庫：用來實現各類功能的類的集合
框架：是整個或部分系統的可重用設計，表現爲一組抽象構件及構件實例間交互的方法；另外一種定義認爲，框架是可定製的應用骨架
常見的JS框架
如：Angular、Node
亦如前端UI框架：Pure

插件jquery

鏈式調用

讓插件接受參數，靈活定製

面向對象的插件開發

自調用匿名函數

實例代碼編程

<html>
<head>
    <title>
        實例
    </title>
    <script src="jquery-1.8.0.min.js"></script>
    
    <script>
        $(function () {

            //function add(a, b) {
            //    add.num++;
            //    return a + b;
            //}
            //add.num = 3;
            //alert(add.num);
            //alert(add(2, 2));
            //alert(add.num);

            //function Person(name, sex) {
            //    this.name = name;
            //    this.sex = sex;
            //}
            //Person.prototype = {
            //    getName: function () {
            //        return this.name;
            //    },
            //    getSex: function () {
            //        return this.sex;
            //    }
            //}
            //Person.prototype.age = 33;

            //var zhang = new Person("測試1", "man");
            //alert(zhang.getName());
            //alert(zhang.age);
            //zhang.age = 30;
            //alert(Person.prototype.age);
            //alert(zhang.age);
            //var chun = new Person("測試2", "woman");
            //alert(chun.getName());
            //alert(chun.age);
            //Person.prototype.age = 18;
            //delete chun.age;
            //alert(chun.age);
            //alert(zhang.age);
            //chun.age = 22;
            //alert(Person.prototype.age);

            //function Employee(name, sex, employeeid) {
            //    this.employeeid = employeeid;
            //    this.name = name;
            //    this.sex = sex;
            //}

            //Employee.prototype = new Person();
            //Employee.prototype.getEmployeeID = function () {
            //    return this.employeeid;
            //}

            //var test1 = new Employee("ceshi1", "man", "1234");
            //console.log(test1.getName());
            //console.log(test1.age);

            ///*實例一*/
            //$.extend({
            //    sayHello: function (name) {
            //        console.log("Hello " + (name ? name : "LJY" + "！"));
            //    }
            //});
            //$.sayHello();
            //$.sayHello("yy");

            /*實例二*/
            //$.extend({
            //    log: function (message) {
            //        var now = new Date(),
            //            y = now.getFullYear(),
            //            m = now.getMonth() + 1,
            //            d = now.getDate(),
            //            h = now.getHours(),
            //            min = now.getMinutes(),
            //            s = now.getSeconds(),
            //            time = y + "/" + m + "/" + d + " " + h + ":" + min + ":" + s;
            //        console.log(time + " My APP:" + message);

            //    }
            //});

            //$.log("initializing...");

            /*實例三 基礎用法*/
            //$.fn.myPlugin = function () {
            //    //this指代的是咱們在調用該插件時，用jQuery選擇器選中的元素，通常指一個jQuery類型的集合。
            //    this.css("color", "blue");
            //    this.each(function () {
            //        $(this).append(" " + $(this).attr("href"));
            //        //this.append(" " + this.attr("href"));
            //    });
            //    //this.append(" " + this.attr("href"));
            //}
            //$("a").myPlugin();

            /*實例四 鏈式調用方法*/
            //$.fn.myPlugin = function () {
            //    //this指代的是咱們在調用該插件時，用jQuery選擇器選中的元素，通常指一個jQuery類型的集合。
            //    this.css("color", "red");
            //    //支持鏈式調用
            //    return this.each(function () {
            //        $(this).append(" " + $(this).attr("href"));
            //    });
            //}

            //$("a").myPlugin().css("color", "blue").css("color", "black");


            /*實例五 讓插件接受參數，靈活定製*/
            //$.fn.myPlugin = function (options) {
            //    var defaults = {
            //            "color": "red",
            //            "fontSize":"12px"
            //        };

            //    //var settings = $.extend(defaults, options);
            //    var settings = $.extend({}, defaults, options);

            //    //支持鏈式調用
            //    return this.css({
            //        "color": settings.color,
            //        "fontSize": settings.fontSize
            //    });
            //}
            //$("a").myPlugin({ "color": "#2c9929","fontSize":"20px" });

            /*實例六 面向對象的插件開發*/
            //定義Beautifier的構造函數
            //var Beautifier = function (ele, opt) {
            //    this.$element=ele,
            //    this.defaults = {
            //        "color": "red",
            //        "fontSize": "12px",
            //        "textDecoration":"none"
            //    },
            //    this.options = $.extend({},this.defaults,opt)
            //}
            ////定義Beautifier的方法
            //Beautifier.prototype = {
            //    beautify: function () {
            //        return this.$element.css({
            //            "color": this.options.color,
            //            "fontSize": this.options.fontSize,
            //            "textDecoration":this.options.textDecoration
            //        });
            //    }
            //}

            ////在插件中使用Beatuifier對象
            //$.fn.myPlugin = function (options) {
            //    var beautifier = new Beautifier(this, options);
            //    return beautifier.beautify();
            //}

            //$("a").myPlugin({ "color": "#2c9929", "fontSize": "20px","textDecoration":"underline" });
            
            //實例七自調用匿名函數
            ;(function ($,window,document,undefined) {
                //定義Beautifier的構造函數
                var Beautifier = function (ele, opt) {
                    this.$element = ele,
                    this.defaults = {
                        "color": "red",
                        "fontSize": "12px",
                        "textDecoration": "none"
                    },
                    this.options = $.extend({}, this.defaults, opt)
                }
                //定義Beautifier的方法
                Beautifier.prototype = {
                    beautify: function () {
                        return this.$element.css({
                            "color": this.options.color,
                            "fontSize": this.options.fontSize,
                            "textDecoration": this.options.textDecoration
                        });
                    }
                }

                //在插件中使用Beatuifier對象
                $.fn.myPlugin = function (options) {
                    var beautifier = new Beautifier(this, options);
                    return beautifier.beautify();
                }
            })(jQuery, window, document);

            $("a").myPlugin({ "color": "#2c9929", "fontSize": "20px", "textDecoration": "underline" });//.css("color", "red");
        });
    </script>
</head>

<body>
    <ul>
        <li>
            <a href="http://baidu.com">百度</a>
        </li>
        <li>
            <a href="http://v.ktgj.com/">空鐵後臺</a>
        </li>
    </ul>
</body>

</html>