zoukankan      html  css  js  c++  java
  • 一些很棒的js代码

    本来是想放在博客园首页的,貌似篇幅不够被移除掉了。后来慢慢补上,看这篇文章吧:一些优秀的代码分析与学习【持续更新】,里面的内容会持续更新,这篇文章作废了

    1.jQuery初始化代码段

      技术亮点:jQuery无new化构建、每次jQuery构建的作用域隔离、jQuery拓展插件。

      实现源码:

    var jQuery = function(args){
      return new jQuery.fn.init(args);
    }
    jQuery.fn = jQuery.prototype = {
      init: function(args){
        return this;
      },
      otherFn: function(){}
    }
    jQuery.fn.init.prototype = jQuery.fn;

      分析:

      每次jQuery函数内部new的作用是隔离作用域。每次构建的都是一个新对象,新对象obj如果重写obj.__proto__下的属性不影响其他jQuery对象__proto__下的属性。

    var m = jQuery(),n= jQuery();//m = {__proto__:{init:fn(),otherFn:fn()}};n = {__proto__:{init:fn(),otherFn:fn()}}
    m.otherFn;//fn(){}
    m.otherFn = "test";//m =  {otherFn:"test",__proto__:{init:fn(),otherFn:fn()}};
    n.otherFn;//fn(){}; n的结构n = {__proto__:{init:fn(),otherFn:fn()}}

      然后jQuery.fn提供jQuery对象的拓展,只要使用jQuery.fn.xx定义的属性在通过var m = jQuery();方式获取的对象m都可以通过m.xx获取到。如果直接使用jQuery.prototype来提供拓展给人感觉不太友好。

      上面的代码换成下面这种写法也是可以的

    var jQuery = function(args){
      return new jq(args);
    }
    function jq(args){
        return this;
    }
    jQuery.fn = jq.prototype = {
      otherFn: function(){};
    }

      多出了一个函数变量jq,jQuery的这种写法只是减少了变量而已。

      关于new的详细点击这里

    2.Sizzle引擎词法缓存机制

      技术亮点:一个函数实现存、取、缓存数据。

      实现源码:

    function createCache() {
      var cache, keys = [];
      return (cache = function( key, value ) {
        // 使用 (key + " ")避免命名冲突,最大缓存createCache.cacheLength:50
        if ( keys.push( key += " " ) > createCache.cacheLength ) {
          // 去掉最老的记录
          delete cache[ keys.shift() ];
        }
        return (cache[ key ] = value);
      });
    }
    createCache.cacheLength  = 50;
    
    
    //例子
    var tokenCache = createCache(); //设置缓存 tokenCache("name", "chua"); //tokenize函数中获取缓存 cached = tokenCache[ "name" + " " ];//"chua"

      分析:

      局部变量cache使用函数表达式方式赋值,cache函数中给cache这个函数对象添加要缓存的属性。可以说是把函数对象运用到了极致。

    3.jQuery判断js数据的具体类型

      技术亮点:call的妙用

      实现源码:

    var class2type = {} ,
    core_toString = class2type.toString; 
    jQuery.type = function( obj ) {
      if ( obj == null ) {
        return String( obj );
      }
      return typeof obj === "object" || typeof obj === "function" ?
      class2type[ core_toString.call(obj) ] || "object" :
      typeof obj;
    }
    jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
      class2type[ "[object " + name + "]" ] = name.toLowerCase();
    });

       分析:

      首先我们知道toString()函数用于将当前对象以字符串的形式返回。该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法。而Object调用toString方法返回"[object ObjectName]",其中ObjectName是对象类型的名称。然后jQuery利用这一特性将准备检测的数据代入object的toString方法替换掉了其上下文环境为要检测的数据。

    4.Dean Edwards的base2格式化函数

      技术亮点:arguments的灵活运用

      实现源码:

    function format(string) {
      var args = arguments;
      var pattern = new RegExp('%([1-' + arguments.length + '])', 'g');
      return String(string).replace(pattern, function(match, index,position,all) {  
        console.log(match + ' ' + index + ' ' + position + ' ' + all);
        return args[index];  
      });  
    };
    
    //实例
    var name = "chua",
    age = 20,
    expr = "%1的年龄是%2";
    format(expr,name,age);//"chua的年龄是20"
    //控制台打印
    //%1 1 0 %1的年龄是%2
    //%2 2 6 %1的年龄是%2

      分析:这个比较简单就不分析了。主要就是arguments.length的运用。

       

      今天先到这里,明天继续。。。

  • 相关阅读:
    MQTT Server搭建(apache-apollo)和MQtt Client搭建
    playbook 包含多个play
    ansible 批量重启服务
    无法执行 BACKUP LOG,因为当前没有数据库备份
    Microsoft.SqlServer.SmoExtended
    ACTIVEMQ主题、队列设置用户名密码
    Ansible的配置文件:
    MQTT协议之订阅及发布(使用paho-mqtt-client或mqttv3实现)
    采用基于MQTT的ActiveMQ实现消息推送
    ansible Introduction To Ad-Hoc Commands:
  • 原文地址:https://www.cnblogs.com/chuaWeb/p/5302859.html
Copyright © 2011-2022 走看看