【技术分享会】 @第四期 JQuery插件

本讲内容

JavaScript
JQuery
JQuery插件
实例

JavaScript

前端开发工程师必须掌握的三种技能
    描述内容的HTML
    描述网页样式的CSS
    描述网页行为的JavaScript

JavaScript是一门高端的、动态的、弱类型的编程语言，非常适合面向对象和函数式的编程风格

JQuery

站在巨人的肩膀上
JQuery是类库还是JQuery框架？
类库：用来实现各种功能的类的集合
框架：是整个或部分系统的可重用设计，表现为一组抽象构件及构件实例间交互的方法；另一种定义认为，框架是可定制的应用骨架
常见的JS框架
如：Angular、Node
亦如前端UI框架：Pure

插件

链式调用

让插件接受参数，灵活定制

面向对象的插件开发

自调用匿名函数

实例代码

<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>

View Code

例子