J query使用技巧

  • 343 views
Uploaded on

 

More in: Design , Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
343
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jQuery使用技巧
  • 2. 大纲
    简单的js书写规则
    jQ静态方法
    jQ实例方法
    DIP、OCP原则
    jQ选择器
  • 3. 简单的js书写规则
    我一直在寻找一种简单并统一的方式书写JS。
  • 4. 从java,C#等多人协作开发语言获得的经验
    语法严谨,没有太多的选择
    类和方法的创建只有一种方式
    没有任我们无限嵌套的closure(虽然可能会在java 7 中支持)
    约定大于配置(convension over configuration)
    1. 类名和文件名一致
    2. 构造方法和类名一致
    3. 包名和目录名一致

    如果我们对JS书写进行规则上的限制,且不削弱它的描述能力, 它应该能够极大地提高可读性,并且 更适合团队开发。
    代码应该有结构,合适的位置写合适的代码
  • 5. 规则
    名称:
    一个文件一个主类(或单例), 类名和文件名一致,用于描述功能
    包名和文件夹结构一致
    module/widget/dialog.js  FE.platform.winport.widget.Dialog
    module/widget/ui.js FE.platform.winport.widget.UI
    module/widget/switchable.js  FE.platform.winport.widget.Switchable
    .widget.Switcher
    .widget.PagingSwitcher
    .widget.Tabs
    module/diy/msg.js FE.platform.winport.diy.Msg
    module/diy/form-dialog  FE.platform.winport.diy.FormDialog
    page/diy/site/site-publish.js  SitePublish
    page/diy/site/switch-version  SwitchVersion
    page/diy/mod/mod-list-panel  ModListPanel
  • 6. 2. 结构:
    单例或多例类使用模板中的结构书写
    顶层结构中只包含import语句,类(对象)定义语句, 名字空间声明语句
    方法调用遵循向下规则
    3. 访问控制:
    非公共类, 不需要挂接在名字空间下
    公共类, 私有方法以下划线为前缀
  • 7. 方法
    在方法内部的函数,需要访问this, 则定义 var self = this, 并且此语句是var语句的第一句。
    如:
    var self = this, // self = this放在var语句的第一句
    ret = [],
    a = 1;
    代码体缩进不大于3层, Closure嵌套不大于2层
    open: function() {
    if (a === 1) {
    for (vari = 0; i < 10; i++) {
    if (b === 3) {
    for (….) { <---- 请重构此方法, 让缩进<= 3层
    }
    }
    }
    }
  • 8. test: function() {
    elm.click(function() {
    var a = function() {
    var b = function() { // 超过2层, 请重构
    }
    }
    });
    }
    方法尽量不超过一屏,否则请重构
    winport.js 1个方法达到39行, 1个47行
    supplier-info.js 1个方法达到60行, 其中注释和空格占了20行
    inplaceeditor.js 1个方法达到40行
    ui.js 2 个方法达到 40行 (不过没有按这个规则书写,有方法内部有函数对象,所以比较长)
    company-name-handler 有1个方法达到60行 (里面有较大的数据结构)
    有1个50行
    diy/header.js 有1个方法40行
    pages.js 有1个方法达到50行
  • 9. 类(或对象)如果太长,则需要重构(根据功能来划分)
    如果切割类的定义, 下次再详细分享
  • 10. 静态方法
    $.each
    可以对数组或对象进行迭代
    this为当前项,可使用proxy改变this指向,
    return false相当于break
    如果对this进行相等性或类型检测时, 需要注意,typeof this === ‘object’
    new String(‘hello’) === ‘hello’ // false
    new String(‘hello’) == ‘hello’ // true
    建议: 使用带参数方式, 顺便为当前项取个好名字
    $.extend
    设置默认参数
    undefined值的项不会被复制
    $.proxy
    $.proxy(context, name) 减少缩进层次
  • 11. $.ajax
    在script 调用返回302,IE78, FF会进入success函数, IE6会进入error函数, 行为不一致
    在jsonp调用返回302时, IE678 FF都会进行error, 行为比较一致
    总结:
    在script调用时, 需要在success中进行数据检测, 因为有时候不一定正常返回
    做出错处理时, 需要在success和error中同时做
    在jsonp调用时, 行为一致, 在success中只做成功逻辑, 在error中做出错逻辑,
    但在FF中会由于超时而产生一个js错误, 不影响功能
    $.param
    array/object -> querystring
    对于中文参数的script请求,使用$.paramSpecial(…
    旺铺中只用到一次paramSpecial, 只用在搜索的url拼接中,因为搜索关键字中会出现中文
    $.serialize -> $.param($.serializeArray())
    $.serializeArray ->
    [{ name: ‘user’, value: ‘hello’}, { name: ‘pass’: ‘value’: ‘helo123’ }]
  • 12. 实例方法
    index(element), 在1.4引入index(), index(selector), 认识一下
    eq(index), 请用elm.eq(0) 代替 $(elm[0])
    当在一个作用域中两次以上操作同一selector, 请保存一个引用
    attr(function)
    jQuery中在1.4版本后,有好多的setting方法支持function参数
    toggleClass(class, switch), toggle(fun1, fun2, fun3…)
    closest(expr)
    andSelf()
    end()
  • 13. 事件
    event helpers:
    click, mouseenter, submit… 通过bind实现的
    focusin / focusout支持冒泡, 可以在delegate和live中使用
    one(type, func)
    bind(type, func)
    可一次绑定多个事件,API比较详细,可参考它
    trigger(event)
    triggerHandler(event)
    不触发浏览器默认行为
    只针对第1个节点
    不冒泡
    返回事件函数结果,而不是jQ对象
    live(type, handler)
    delegate(selector, type, handler)
  • 14. 什么时候使用自定义事件?如何处理类(对象)之间的关系?
    依赖倒置原则(DIP)
    “抽象不应依赖于细节,细节应该依赖于抽象。”
    思考各种回调函数,是如何引入间接层来 反转 依赖的
  • 15. jQuery#data的使用
    存贮节点相关数据
    配合html5 data标签使用
  • 16. jQ选择器Sizzle
    优先采用#id, name, tag, tag.class, class最好要有tag修饰
    Selector如果没有位置信息:
    POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:((d*)))?(?=[^-]|$)/,
    那么将采用从右到左的顺序解析
    如 li.item a span 首先查找页面中所有的span, 然后再过滤出a内部的部分, 然后再过滤出 符合li.item的部分
    在jQuery中,可以通过扩展 $.expr对 Sizzle进行扩展
  • 17. 如何扩展?
    开放封闭原则(Open-Closed principle)
    “软件实体应该是可以扩展的,但是不可修改。“
  • 18. 例子
    jQuery的扩展
    通过 $.extend 和 $.fn.extend扩展, 不需要修改原代码
    Sizzle的扩展也非常方便, 通过Sizzle.selectors进行扩展
    侧边栏广告位
    tracelog.js
    instantvalidator.js
    sign.js
    数据结构是静止的算法 & 申明式编程
  • 19. OCP是一个目标
    面对变化时,我们修改代码, 改完之后, 面对同类变化, 我们以添加代码的方式完成扩展, 而不需要修改原来的代码
    受一次伤原理
    不预测需求,只完成现有需求并符合OCP, 变化时才修改代码