learnQuery, 通过构建你自己的jQuery等价库来学习JavaScript基础知识

分享于 

8分钟阅读

GitHub

  繁體 雙語
Learn JavaScript fundamentals by building your own jQuery equivalent library
  • 源代码名称:learnQuery
  • 源代码网址:http://www.github.com/infinum/learnQuery
  • learnQuery源代码文档
  • learnQuery源代码下载
  • Git URL:
    git://www.github.com/infinum/learnQuery.git
    Git Clone代码到本地:
    git clone http://www.github.com/infinum/learnQuery
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/infinum/learnQuery
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    分配

    你的任务将是通过一系列不同的步骤构建你自己的jQuery库。 这将帮助你学习 JavaScript。 所有任务都是等价的。

    要清楚,你不能使用 jQuery。 你必须使用标准的JavaScript方法来创建的jQuery等价方法

    规则:

    • 每个任务都应该在自己的文件夹中
    • 每个任务都应该用 jasmine 测试。 规格应该是名称文件夹中的"规格"
    • 每个任务都应该按顺序完成。 不要跳过,因为任务是互相构建

    你应该一次解决一个任务。 每个任务都由规范描述,你的实现必须通过它们。 对于你来说,有一个或者多个导向程序是好的,但这不是必需的。 他们应该通过你的代码,并给你反馈什么好,什么坏,以及如何写得更好。 另外,导师将帮助你保持任务,最小化你的失败,最大化这个项目的价值。

    命令行任务

    所有任务都应该与W3C标准兼容。 所有的工作都需要在所有主流浏览器中工作。 你不需要让它们与旧的IE 浏览器向后兼容。

    有帮助的参考:

    0.示例

    你需要写一个计算斐波那契号的函数。

    代码可以在 repository/00. 示例/src中找到。

    同样,这个任务的规格可以在/00. 示例/规范中找到。

    1简单选择器函数

    术语:

    • 选择器- 选择DOM中要使用的元素。

    参考:

    描述:

    • 可以基于以下三个项之一选择元素:

      • 给定的标记名称
      • 类名
      • 或者 ID
    • 应返回所选HTML元素的array

    例如:

    domSelector('#some-id');domSelector('.some-class');domSelector('some-tag');

    2.CSS操作

    术语:

    • CSS ( 级联样式表) 是用来描述用HTML或者XML编写的文档的样式表语言。

    参考:

    描述:

    • 应能够为选定元素设置/更改单个或者多个CSS属性值,也可以获取任何现有CSS属性的值

    例如:

    // set single propertycssProp(htmlElement, cssProperty, value);// set multiple propertiescssProp(htmlElement, {cssProperty: value, cssProperty: value});// get CSS property valuecssProp(htmlElement, cssProperty);

    3。CSS类操作

    术语:

    • 基于元素属性类的内容,CSS类选择器是一个元素,其中一个元素必须完全按照给定的类 NAME 来

    参考:

    描述:

    • 应该添加,删除或者切换命名类到匹配的element(s),,否则确定该元素是否被指定为指定类。

    例如:

    cssClass.add(htmlElement, className);cssClass.remove(htmlElement, className);cssClass.toggle(htmlElement, className);cssClass.has(htmlElement, className);

    4.DOM操作

    术语:

    • "文档对象模型( DOM ) 是用于 HTML。XML和SVG文档的编程接口。 它提供了文档( 树)的结构化表示,它定义了可以从程序中访问的结构,以便更改文档结构。"

    参考:

    描述:

    • 应该以指定的方式操作 DOM:
      • 删除元素
      • 将元素附加到 DOM
      • 在指定元素之后插入DOM中的元素
      • 在指定元素之前插入DOM中的元素
      • 获取选定元素的值

    例如:

    dom.remove(element);dom.append(targetElement, element);dom.after(targetElement, element);dom.prepend(targetElement, element);dom.before(targetElement, element);dom.val(targetElement);

    5.Ajax请求函数

    术语:

    • Ajax代表异步JavaScript和 XML。 模型结合多种技术,使web应用程序能够快速。增量地更新用户界面,而不会重新加载整个浏览器页面。
    • 所有数据都以JSON形式发送

    参考:

    描述:

    • 应该成功地发出Ajax请求和 post
    • 应在成功或者失败时调用自定义函数( 使用自定义上下文)
    • 当请求完成时应该调用自定义函数( 使用自定义上下文)

    例如:

    ajaxReq(url, options);ajaxReq(url, {
     method:'POST',
     data: {},
     context:this,
     failure:function() {},
     success:function() {},
     complete:function() {}
    });

    6事件侦听器

    术语:

    • 事件监听器将事件处理程序附加到元素并侦听指定的事件。 它们指定当特定事件 register 在这些元素上发生时应该做什么

    参考:

    描述:

    • 应用于指定元素上单个或者多个事件的register 侦听器,并应用回调
    • 应该能够从指定的元素中移除侦听器回调

    例如:

    eventListener.on(element, event, callback);// removes a specific callback on an element of the event typeeventListener.off(element, event, callback);// removes all callbacks on an element of the event typeeventListener.off(element, event);// removes all callbacks on an elementeventListener.off(element);

    6.1附加事件侦听器触发器

    描述:

    • 应触发选定元素上的特定事件

    例如:

    
    eventListener.trigger(element, event);
    
    
    
    

    6.2事件委托

    描述:

    • 将特定事件委托给具有指定类名的元素

    例如:

    eventListener
    . delegate(monitoredElement, className, event, callback);

    7.生成 learnQuery !

    创建你自己的learnQuery库,使用从前面的函数获得的知识。 它应该包括在前面的任务中创建的所有函数,它应该看起来和功能类似于 jQuery。

    你已经在前面的任务中创建了功能。 现在你只需要提供一种实现它们的方法。

    你的解决方案必须支持英镑链接 !

    提示: 注意范围。闭包和上下文。

    例如:

    learnQuery('.thisClass')
    . on('click', callback)
    . removeClass('thisClass')
    . addClass('anotherClass');
    常见问题解答
    • 什么是"词缀( )"?

    Affix接受CSS选择器作为参数并将这些元素添加到 DOM。 详细信息:https://github.com/searls/jasmine-fixture

    许可证

    LearnQuery是在 MIT许可协议下发布的。

    Credits

    由 [Infinum] ( http://www.infinum.co ) 维护和赞助。


    相关文章