JQuery&Javascript 笔记

date
Oct 28, 2017
slug
sharp-jquery
status
Published
tags
Javascript
summary
type
Post

Javascript

  1. bind() 方法创建一个新的函数,当被调用时将其的this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。返回由指定的this值和初始化参数改造的原函数拷贝
  1. call&apply call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。该方法的作用和 apply() 方法类似,只有一个区别,就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。
  1. apply 是 call 的语法糖
    1. 在fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。
      返回值是你调用的方法的返回值,若该方法没有返回值,则返回undefined
      this.x = 9;
      var module = {
        x: 81,
        getX: function() { return this.x; }
      };
      
      module.getX(); // 返回 81
      
      var retrieveX = module.getX;
      retrieveX(); // 9
      
      var retrieveX_1 = module.getX.bind(module);
      retrieveX_1(); // 81
      
      var retrieveX_2 = module.getX.call(module);
      console.log(retrieveX_2); // 81
      
  1. slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。slice 不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝:如果该元素是个对象引用 (不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。 对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。 如果向两个数组任一中添加了新元素,则另一个不会受到影响。
  1. concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。返回值:新的 Array 实例
  1. 单行写一个评级组件:"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。
对于数字要敏感,尤其是不同情境下的数字代表的意义,在这行代码中 rate 代表 1-10 中间的某个整数,我们可以单纯的认为是数字1/2/3...但是如果回头再想想其实是索引1/2/3...既然是索引的话那 1 代表索引1 5-1=4 4代表索引4,那么我们可以理解为在5的范围中我们如果取1的对称索引即5-1。
  1. 返回值 一个表示给定对象的所有可枚举属性的字符串数组。
  1. 统计字符串中相同字符出现的次数:
    1. var arr = 'abcdaabc';
      var info = arr
          .split('')
          .reduce((p, k) => (p[k]++ || (p[k] = 1), p), {});
      
      console.log(info); //{ a: 3, b: 2, c: 2, d: 1 }
      
  1. 优雅地取整
    1. var a = ~~2.33
      
      var b = 2.33 | 0
      
      var c = 2.33 >> 0
  1. 作用域链&原型链:
    1. 作用域链针对于函数,在函数执行时确定。在函数中通过标识符访问变量是按照作用域链上顺序来访问,顶层是window。
      原型链针对于对象,在对象创建时确定。通过 ./[]访问属性时按照原型链顺序访问,顶层是object.prototype

Jquery

Jq解决冲突方法: jquery在其他库文件之后引入,比如说在zepto后引入。 jQuery.noConflict();把控制权转交给zepto 如果还是想$来代表jq使用的话可以这样写:
jQuery(function($){})
(function($){})(jQuery)

// jQ 获得是对象,判断的时候 if($('.tt'))即使.tt不存在也不会报错,所以判断的时候应该
JQ 获得高度得方法: css() / height() 二者得区别是,height可以获得元素得真正的高度,而css有可能获得auto em这些
$('.tt').length>0
if($('tt')[0])
// 判断 dom
load函数: $(documen).ready(function(){})/$(function(){})/$().read(function(){}) 经过jquery封装后得load得函数在网页dom全部准备到位后就可以执行而window.load()则必须等到有关dom得所有资源加载完成后才能执行。比如说图片等如果在jquer中想操作这些资源,ready时是不能操作得可以使用load函数
jquery性能优化 选择器的使用:id>el>class>属性>:selected 最好的做法是在使用选择器的时候能指定对应的上下文这样可以提高性能。eg: $('#cnt option').filter(':selected') 缓存对象 操作dom的时候一定是一次性把dom准备好,然后插入一次而不是循环插入。 事件代理 尽量使用join拼接字符串 合理运用h5的data属性,data-id:23 data(‘id’)

© i7eo 2017 - 2022