摆脱旧浏览器才能进入未来Web开发,浅析jQuery库

2019-08-10 作者:网站首页   |   浏览(160)

浅析jQuery库的核心架构和常用API的简单实现,浅析jquery架构api

以下代码只是呈现了jQuery库中的原型继承的实现原理,以及其常用功能模块的简单实现,并不涉及过多的兼容性处理。


//This is my$;
(function (window , undefined) {
    //核心架构
    function my$(selector){
        //使用构造函数,创建my$对象,构造函数是其原型中的一个方法
        return new my$.prototype.init(selector);
    }
    my$.fn = my$.prototype = {
        constructor : my$,
        type : my$,
        events : {},
        length : 0 ,
        //核心模块init
        init : function (selector) {
            if(!selector){
                return this ;
            }
            //如果参数是字符串
            if(typeof selector ==="string"){
                //如果是html标签
                if(selector.charAt(0) === "<"){
                    [].push.apply(this , this.constructor.parseHtml(selector));
                }else{
                    //如果参数是选择器,
                    [].push.apply(this , this.constructor.Select(selector));
                }
                return this;
            }
            //如果参数是入口函数
            if(typeof selector === "function"){
                var oldfn = window.onload ;
                window.onload = function(){
                    oldfn && oldfn();
                    selector();
                }
            }
            //如果参数的DOM元素
            if(selector.nodeType){
                this[this.length   ] = selector;
                return this;
            }
            //如果参数是my$对象
            if(selector.type === "my$"){
                //return selector;
                [].push.apply(this , selector);
                return this ;
            }
            //如果参数是伪数组对象
            if(selector.length >= 0){
                [].push.apply(this, selector);
                return this ;
            }else{
                this[0] = selector;
                this.length = 1;
            }
            return this;
        },
        //常用方法模块
        toArray : function () {
            return [].slice.apply(this);
        },
        get : function (index) {
            if(index === undefined){
                return this.toArray();
            }else {
                if(index >= 0){
                    return this[index];
                }
                return this[this.length   index];
            }
        },
        eq : function(index){
            return this.constructor(this.get(index));
        },
        each : function(callback){
            this.constructor.each(this , callback);
            return this;
        },
        map : function(callback){
            return this.constructor.map(this , callback);
        },
        end : function () {
            return this.prev || this ;
        }
    }
    //实现原型链继承结构
    my$.prototype.init.prototype = my$.fn;
    //实现添加方法的功能
    my$.fn.extend = my$.extend = function(obj){
        for(var k in obj){
            this[k] = obj[k];
        }
    }
    //---------------工具方法模块------------------------------------
    //创建标签功能
    my$.parseHtml = (function () {
        var node = document.createElement("div");
        return function (str){
            var arr = [];
            node.innerHTML = str ;
            arr.push.apply(arr , node.childNodes);
            return arr ;
        }
    })();
    //选择器模块
    my$.Select = (function () {
        //不考虑兼容问题的简单实现就是采用querySelectAll的方法
        var support = {},//能力检测
            rnative = /[nativecode]/,
            push = [].push;
        support.qsa = rnative.test( document.querySelectorAll   "");
        var Select  = function( selector) {
            if (support.qsa) {
                return document.querySelectorAll(selector);
            }
        }
        return Select;
    })();
    //---------------------添加工具方法------------------------
    my$.extend({
        each : function(arr , callback){
            if( arr.length >= 0){
                for(var i = 0 ; i < arr.length ; i   ){
                    if( callback.call(arr[i] , i , arr[i] ) === false){
                        break;
                    }
                }
            } else{
                for(var k in arr){
                    if( callback.call(arr[k] , k , arr[k]) === false){
                        break;
                    }
                }
            }
            return arr;
        },
        map : function(arr , callback){
            var newArr = [];
            if( arr.length >= 0){
                for(var i = 0 ; i < arr.length ; i   ){
                    var res = callback(arr[i] , i)
                    if( res !== undefined){
                        newArr.push(res);
                    }
                }
            }else {
                for(var k in arr){
                    var res = callback(arr[k] , k)
                    if( res  !== undefined){
                        newArr.push( res );
                    }
                }
            }
            return newArr;
        },
        //DOM操作
        append : function (parent , newchild ) {
            parent.appendChild(newchild);
        },
        //样式操作
        getStyle : function (dom ,name) {
            if(dom.currentStyle){
                return dom.constructor[name];
            }else{
                return window.getComputedStyle(dom , null)[name];
            }
        },
        //属性操作
        getText : function (dom) {
            if(dom.innerText){
                return dom.innerText;
            }else{
                return dom.textContent;
            }
        }
        //可以继续添加...
    });

    //实例方法 --- DOM操作
    my$.fn.extend({
        appendTo : function (nodes){
            var list =  this.constructor(nodes);
            var newObj = this.constructor() ;
            var temp ;
            for(var i = 0 ; i < list.length ; i   ){
                for(var j = 0 ; j < this.length ; j   ){
                    temp = i === 0
                        ? this[j]
                        : this[j].cloneNode(true);
                    list[i].appendChild( temp );
                    newObj[ newObj.length    ] = temp;
                }
            }
            newObj.prev = this;
            return newObj;
        },
        append : function(nodes){
            this.constructor(nodes).appendTo(this);
            return this;
        }
        //可以继续添加...
    });
    //事件函数
    my$.fn.extend({
        on : function ( type , fn ) {
            return this.each(function(i , v ){
                v.addEventListener(type , fn);
            });
        },
        off : function( type , fn ){
            return this.each(function( i , v ){
                v.removeEventListener( type , fn );
            });
        }
    })
    my$.each(("onblur,onfocus,onclick,onmousedown,onmouseenter,onmouseleave,onmousemove,onmouseout,"  
        "onmouseover,onmouseup,onmousewheel,onkeydown,onkeypress,onkeyup").split(",")
        , function ( i , v) {
            var event = v.slice(2);
            my$.fn[event] = function(callback){
                return this.on( event , callback);
            };
        });
    //样式操作
    my$.fn.extend({
        css : function (name , value) {
            if(typeof name === "string" && typeof value === "string"){
                this.each(function () {
                    this.style[name] = value;
                })
            }else if(typeof name === "string" && value === undefined){
                return this[0].style[name];
            }else if(typeof name === "object" && value === undefined){
                this.each(function () {
                    for(var k in name){
                        this.style[k] = name[k];
                    }
                })
            }
            return  this ;
        }
    });

    //属性操作
    my$.fn.extend({
        attr : function (name , value) {
            if(typeof name === "string" && typeof value === "function"){
                this.each(function ( i , v) {
                    this.setAttribute(name , value.call(this , v , i));
                });

            }else if(typeof name === "string" && typeof value === "string"){
                this.each(function () {
                    this.setAttribute(name , value);
                });

            }else if(typeof name === "string" && value === undefined){
                return this[0].getAttribute(name);
            }else if(typeof name === "object" && value === undefined){
                this.each(function () {
                    for(var k in name){
                        this.setAttribute( k , name[k]);
                    }
                });
            }
            return  this ;
        },
        html : function (value) {;
            if(typeof value === 'string'){
                this.each(function () {
                    this.innerHTML = value;
                });
            }else if( value === undefined){
                return this[0].innerHTML ;
            }
            return this ;
        }
    });

    window.my$ = window.$ = my$ ;
})(window);

以下代码只是呈现了jQuery库中的原型继承的实现原理,以及其常用功能模块的...

搞Web开发或Web设计的多半都知道jQuery。近日Think Vitamin网站对Learning jQuery 作者 Karl Swedberg 做了一次简短访谈。Karl Swedberg 是 JavaScript 和 jQuery 技术专家,撰写了大量相关文章,并在各种 Web 开发设计大会上有与 jQuery 相关的讲座。

图片 1 
图 jQuery UI

对那些可能还没听说过 jQuery 的设计师来说,什么是 jQuery ?

  • 数学的角度看jQuery和XAML的内在机理
  • jQuery中this与$(this)的区别
  • jQuery中RadioButtonList的功能及用法
  • 浅析在Ajax和jQuery中实现GridView展开与
  • 浅析jQuery页面渐显效果的实现

jQuery 是一种让开发和设计者在他们的网页中添加交互内容的工具,它的核心命令让你在网页中定位或创建对象并对之进行操作,它事实上是一种更容易使用的 JavaScript,可以不必强迫页面刷新而对页面进行各种操作。

在你看来,为什么 jQuery 对 Web 设计师有用?

JavaScript 为设计拓宽了视野,而 jQuery 让这一切变得更简单。对那些通晓 CSS 的设计师来说,编写 jQuery 代码很类似,而对于那些拥有 Flash 经验的设计师来说,jQuery 是一种标准化的,开放的技术,它可以实现类似 Flash 的交互效果。

你将在 The Future of Web Deisgn New York 大会上做 jQuery 讲座,大体内容是什么?

我将对 jQuery 库做一简介,接下来会通过一些实践一步一步讲解如何在站点中提升用户体验,我将演示一些技术,看看 jQuery 如何弥补 CSS 或某些浏览器的 CSS 处理的不足。我将讲解如何善用动画,如何防止滥用。最后将演示一些有趣的插件。

jQuery 有不少实用插件,哪一些是设计师不可或缺的?

这要看网站,或者说客户的需求。我自己常用的一个插件是 Mike Alsup 设计的 Cycle Plugin,这是一个轮番播放图片的饰件,拥有很漂亮的过度效果,这个插件并不限于播放图片,还可以播放任何内容,它确实很不错,在那么小的空间可以放那么多内容。

最近我还对 jQuery UI 插件颇感兴趣,这套插件使富用户体验,如拖放操作,变得很简单,它包含的部件都很棒,我已经开始使用其中的对话框,Tab 以及日期选择器等。

在你看来,Web 设计的未来是什么?

在预测任何未来技术方面我完全象个傻瓜。在某些方面,如果我们无法摆脱那些旧浏览器的话,事情可能没多少改变,不过,即使现在,在那些更好的浏览器身上,我们也已经看到一些令人振奋的东西,我期待看到一些全新的东西。

Webkit 引擎开发团队已经做在 CSS 动画方面做了很多工作,他们甚至将触角伸向图形硬件来实现炫目的视觉效果。Firefox, Safari, and Chrome 正在 JavaScript 引擎方面你追我赶,而众多 JavaScript 库也在性能上大幅提升。我们会开到越来越多的 HTML 5 元素的使用,如 Canvas, 音频,视频。Web 字体方面也将更加完善,不管从技术方面还是版权方面。可以肯定的是,未来的 Web 会让人惊异。

Vitamin网站对Learning jQuery 作者 Karl Swedberg 做了一次简短访谈。Karl Swedberg 是 JavaScript 和 jQue...

本文由yzc216亚洲城发布于网站首页,转载请注明出处:摆脱旧浏览器才能进入未来Web开发,浅析jQuery库

关键词: yzc216亚洲城