佛经里有句话,叫功不唐捐。意思是所有努力的效果不一定产生在当下,可能产生在未来,但你只要做了,它一定就有意义。我们心态平和一点,逐步去推进它,逐步去改良它,对未来必定很有意义。

有人总很狭隘地支持某一类库或框架,其实好的东西都是互相渗透的。像jQuery,它提供了对DOM的操作,但仅仅这样是不够的。请不要用后台的增删改查的目光来看前台,前台的展现是非常丰富多彩的。后台也不是那么枯燥,当然对无能的人怎么也一样。他们总是有借口逃避学习,总是问人来解决项目上的问题。这样的IT生涯真的只能撑到30岁。我们专注一个东西,其他同类型的产品都是非常有参考价值,能扩宽我们的思维。比如最早称霸javascript界的Prototype.js,它是作为rails的一个辅助项目诞生。借鉴于真正的一切都是对象的ruby的设计,Prototype.js当年横扫天下,无人可敌。我们可以看到其许多方法名都是取自ruby标准库的。像Base2这样强大的库,我觉得它也从Prototype.js吸取了不少灵感。mootools号称是Prototype.js,框架是Prototype,但许多实现却改自Base2。这三者都拥有强大的继承机制,反正学了其中一个,对其他两个就很容易上手。换言之,功不唐捐,你的智慧投资不会白费的。

西方的开源世界非常活跃,新兴类库都是有着浓厚的已知框架的影子。rightjs就是一个例子。今天讲解其两个模块,不由得感概万分。

Options模块,专门来处理参数。在Prototype著名的特效库中,已经有这种迹象了。mootools干脆交由Object.reset来做这粗活。为什么要这样做呢?因为通常我们要传入一个属性包来配置新生成的类,为它添加类成员,实例成员什么的,在mootools2的蓝图中,甚至计划配置友元成员。这个其实在mootools1.2.4中已用protect方法实现了,不过它想搞得更smart一些。

    Options = {
    
      setOptions: function(options) {
        //整合两个对象的options属性,一个是配置用的属性包,一个是新类,注意Options模块是不能独立运作的,
        //它肯定用于其他模块或类中。
        var options = this.options = Object.merge(Class.findSet(this, 'options'), options), match, key;
        //如果它的on属性为函数,执行方法,如this.on("click",function(){})
        if (isFunction(this.on)) {
          for (key in options) {
            if (match = key.match(/on([A-Z][A-Za-z]+)/)) {
              this.on(match[1].toLowerCase(), options[key]);
              delete(options[key]);
            }
          }
        }

        return this;
      },

      //由于rightjs的类工厂最多只有两个参数,父类与作为属性包的对象,现在的目的是取得那个属性包
      cutOptions: function(args) {
        var args = $A(args);
        this.setOptions(isHash(args.last()) ? args.pop() : {});
        return args;
      }
    };

下面是观察者模块,它的许多方法都支持多种传参形式,像jQuery一样,把逻辑搞得很复杂,实在恶心。

    Observer = new Class({
      include: Options,

      /**
       * general constructor
       *
       * @param Object options
       */
      initialize: function(options) {
        this.setOptions(options);
        Observer.createShortcuts(this, Class.findSet(this, 'events'));
      },


      //this.on("click", fnCallback)
      //添加回调函数与其事件名,额外参数
      on: function() {
        var args = $A(arguments), event = args.shift();

        if (isString(event)) {
          //创建一个$listeners存放一个个特别的对象
          if (!defined(this.$listeners)) this.$listeners = [];

          var callback = args.shift(), name;
          switch (typeof callback) {
            case "string":
              name     = callback;
              callback = this[callback];

            case "function":
              var hash = {};

              // DON'T move it in the one-line hash variable definition,
              // it causes problems with the Konqueror 3 later on
              hash.e = event;
              hash.f = callback;
              hash.a = args;
              hash.r = name;

              this.$listeners.push(hash);
              break;

            default:
              if (isArray(callback)) {
                for (var i=0; i 

观察者模式让自定类也拥有像事件系统的关联操作,一变大家跟着变,非常有利于解耦。从最初的Class到Options到Observer,它把能拆解的东西都拆解了。这种模块化设计非常有利于我们学习。像jQuery,它走的是另一条路,通过大量的插件来弥补其核心库的功能。当然,人多好办事,它也不时吸纳一些优秀的方法加入核心库了。但无论怎么折腾,类库的能力还是很有限,与这种全面走扩展道路的框架没得比。与对于学习javascript来说,像Prototype这样的框架能让你收获更大。

相关文章:

  • 2022-12-23
  • 2021-07-22
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-23
猜你喜欢
  • 2022-02-19
  • 2021-10-18
  • 2021-07-20
  • 2021-11-11
  • 2022-12-23
  • 2021-07-07
相关资源
相似解决方案