码迷,mamicode.com
首页 > 其他好文 > 详细

我只是搬运工

时间:2017-07-31 23:59:17      阅读:422      评论:0      收藏:0      [点我收藏+]

标签:全局   判断   渐进   迁移   执行函数   影响   items   冲突   timeout   

一.XML和JSON的区别

1.数据体积

  JSON相对于XML来讲,数据体积小,传递的速度更快一点

2.数据交互方面

  JSON与javascript的交互更加方便,更容易解析处理,更好的数据交互。

3.数据描述方面

  JSON对数据的描述比XML较差

4.传输速度方面

  JSON的速度要远远的快鱼XML

二.对webpack的理解

  webpack是一个模块打包工具,你可以用webpack来管理你的模块依赖,并编译出模块所需要的静态文件,它能够很好的管理、打包web开发中所用到的HTML、CSS、Javascript以及图片和字体等。让开发更有效。

  对于不同的资源,webpack有不同的加载器,webpack模块打包器会分析模块间的依赖关系,最后生成了优化且合并后的静态资源。

  webpack两大特色:

    1>.code splitting(代码自动完成)

    2>.loader可以处理各种类型的静态文件,并且支持串联操作

  webpack是一commonJS的形式来书写脚本的,但对AMD、CMD的支持也很全面,方便旧项目进行代码迁移。

  webpack具有requireJS和browserify的功能,但仍有很多自己的新特性:

    1>.对commonJS、AMD、ES6的语法做了兼容

    2>.对js、css、图片等资源文件都支持打包。

    3>.串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性,例如提供独一CoffeeScript、Es6的支持。

    4>.有独立的配置文件webpack.config.js

    5>.可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间

    6>.支持SourceUrls和SourceMaps,易于调试。

    7>.具有强大的Plugin接口,大多是内部插件,使用灵活。

    8>.webpack使用异步IO并具有多级缓存,这使得webpack很快且在增量编译上更加快。

三.TCP的三次握手

  为了准确的传输数据,TCP协议采用了三次握手策略,用TCP协议吧数据包送出去后,TCP不会对传送后的情况置之不理,它一定会向对方确认是否发送成功。握手过程中使用了TCP的标志:SYN和ACK。

  发送端会首先发送一个带有SYN标志的数据包给对方。接收端收到后,回传一个带有SYN、ACK标志的数据包以示传达确认信息。

  最后发送端再回传一个ACK的标志的数据包,带表“握手”结束。

  若在握手过程中某个阶段莫名中断,TCP协议会在次以相同的顺序发送相同的数据包。

四.对作用域链的理解

  作用域链的作用是保证执行环境里有访问权限的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到window对象即被终止,作用域链向下访问变量是不允许的。

  也可以说作用域链是多个作用域嵌套,所形成的由内到外的上下结构,称之为作用域链。

  作用域是一块代码所在的区域可以称之为作用域。

  作用:隔离变量,不同作用域中的同名变量不会产生冲突

  分类:全局作用域,在JS代码开始编写时候产生

     函数作用域:在函数定义的时候就生成

     动态一个上下文对象时,必须在具体作用域内

  作用域的作用:

    最大的用处就是变量隔离,不同作用域下的变量不会冲突

五.闭包

  定义:包含被引用变量(函数)的对象

  产生:1>.嵌套函数

     2>.内部子函数引用外部函数的变量,产生闭包

  作用:使其引用的变量长期在内存中,延长生命周期

  缺点:如果不释放产生的闭包,会导致内存泄漏

  应用:循环遍历加监听,jQuery中也有闭包

  例如:

function fun1(){
      var a = 1;
      function fun2(){
         a++;
        console.log(a)
      }
      return fun2;
}
var p = fun1();
p();  //第一次调用输出2 //第二次调用输出3,说明a没有被释放,还在内存中。

六.渐进增强和优雅降级

  渐进增强:针对低版本浏览器进行构建页面,保证基础功能,然后在针对高版本浏览器进行效果、交互等改进和追加功能,来提高用户体验

  优雅降级:一开始构建完整的功能,然后针对低版本浏览器进行兼容

七.Ajax(异步的JavaScript和XML)是一种不刷新浏览器就可以实现页面局部刷新的与服务器通讯的技术。

八.创建Ajax的过程

  1>.创建XMLHttpRequest对象,也就是创建一个异步调用对象。

  2>.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

  3>.设置响应HTTP请求变化的函数。

  4>.发送HTTP请求

  5>.获取异步调用返回的数据

  6>.使用javascript和DOM实现局部刷新 

    Ajax的原理:

    通过XMLHttpRequest对象,也就是创建一个异步调用对象

    底层是ajax引擎发送http请求

    服务器接收到请求,然后返回响应数据

九.对前段模块化的认识

  AMD是Require在推广过程中对模块定义的规范产出

  CMD是SeaJs在推广过程中对模块定义的规范产出

  AMD是提前执行,推荐的风格通过返回一个对象作为模块对象。

  CMD是延迟执行,CommonJs的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

十.代码层面的优化

  少用全局变量

  用innerHTML来代替DOM操作,减少DOM操作次数,优化javascript性能

  用setTimeout来避免页面失去响应

  避免全局查询

  避免空的src属性,空的src会重新加载当前页面,影响加载速度

  尽量使用css3动画,开启硬件加速

  适当使用Touch事件来代替click事件

  可以使用transform:translateZ(0)来开始硬件加速

  尽量不适用float,float在渲染时候计算量比较大

十一. 

  jQuery将一些原型属性和方法封装在了jquery.proptype中,为了缩短命名,又赋值给了jquery.fn,这是很形象的写法。

  有一些数组或对象的方法经常能用到,jquery将其保存为局部变量以提高访问速度;jQuery的链式调用也节约许多代码,提高了代码效率。

  jQuery是一个封装好的js函数库

  特点:HTML元素选取、元素操作、事件处理、CSS操作、JS动画效果、链式调用、浏览器兼容性好、Ajax封装、易扩展插件

  jQuery定义的一个全局函数,$()执行返回的是一个对象,即jQuery核心对象

  作为一般函数使用,参数不同,内部做的工作不同。参数可以使:函数,相当于绑定window.onload事件监听回调;选择器字符串,会查找所有满足条件的DOM元素数组,并返回jQuery对象

  html标签:生成相对应的dom元素对象,并封装为jQuery对象返回;参数为dom元素,将dom元素封装成jQuery对象返回

  jQuery作为对象使用:1>.隐式遍历,2>.去除字符串两边的空格.trim() 3>.判断数据类型 .type()4>.判断是否是数组5>.判断是否是函数6>.解析字符串

    方法:$.each()  $.trim()  $.type()  $type()  $isarray()  $ifFunction()  $parseJSON()

  jQuery的选择器:基本选择器、层次选择器、过滤选择器、表单选择器

  jQuery对象的使用:attr()用来操作值不为true、false的属性,读取只返回一个,写的时候操作全部

           prop()用来操作值为trtue、false的属性

           addClass()添加class

           removeClass删除class

  jQuery事件处理:

    三个阶段:捕获、执行、冒泡

      on(eventName,  function(){  })添加事件监听

      xxx.click(function(){  })具体某个事件监听、

      off([eventName])移除所有指定事件监听

      hover(function(){  }, function(){  })鼠标离开和移入效果

      event:

        得到坐标: clientX()/page()

        阻止冒泡:event.stopPropagation()

        阻止默认行为:event.pareventDefault()

  事件委派:

    将当前的子元素打得监听事件添加到父元素上

    优势:减少事件监听,新增的子元素直接拥有添加效果

    实现:delegate()例如:$(‘ul‘).delegate(‘li‘, function(){  });这里的this指的是li

  jQuery的动画:

    1>.fadeIn、fadeOut()动画结束后还可以接回调

    2>.slideDown()、slideUp()、

    3>.show()、hide()

    4.animate()

  扩展jQuery的工具方法

  $.extend(object)

    例子:$.extend({

      deleteTirm: function(str){

        return str.replace(/^\s+/, ‘‘);

      }

               })

    deleteTirm(str);直接调用就可以

  扩展对象的方法:

    $.fn.extend({

      checkAll: function(){

        this.prop(‘checked‘, true);全选

      }

    })

    $(function(){ 

      $(‘#checkedAllBtn‘).click(function(){
           $(‘[name=items]‘).checkAll(); //调用上面创建的checkAll();
      })

    });

十二. prototype原型

  函数的prototype属性

    每个函数都有一个prototype属性,指向一个对象(原型对象)

    原型对象中都有一个constructor属性,他指向函数对象

    object原型:

      object对象的方法都定义在Object的原型对象上

      object的原型对象的原型为null

  给函数原型添加属性(方法)

    函数的实例对象会自动拥有该函数原型中的属性

      

Date.prototype.Format = function(fmt){ //author: meizz  
  var o = {     
    "M+" : this.getMonth()+1,                 //月份  
    "d+" : this.getDate(),                    //
    "h+" : this.getHours(),                   //小时  
    "m+" : this.getMinutes(),                 //
    "s+" : this.getSeconds(),                 //
    "q+" : Math.floor((this.getMonth()+3)/3), //季度  
    "S"  : this.getMilliseconds()             //毫秒  
  };     
  if(/(y+)/.test(fmt))     
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));     
  for(var k in o)     
    if(new RegExp("("+ k +")").test(fmt))     
  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));     
  return fmt;     
};

  Object的原型对象是整个原型链的尽头,object.prototype--------最后返回null

  实例对象可以调用原型 对象的方法,原型对象是实例对象的父对象

   显式原型和隐式原型

    每个函数在定义时候就拥有prototype,即为显式原型,并且每个实例对象都有一个隐式原型__prop__,他的值为构造函数的prototype的值。

  原型链:访问一个对象的属性时,现在基本属性中查找,如果没有,会沿着__prop__这条链向上找,一直找到为止,这条链即为原型链。

十三.执行上下文和执行上下文栈

  执行上下文也称为上下文环境,本质是一个对象,由JS引擎自动创建,看不见,只能直接使用其属性

  1.JS引擎在执行全局代码前会将window作为全局上下文对象,将一些变量初始化赋值,放在上下文对象里,将它们设置为全局变量

  2.JS引擎在执行函数体之前先创建对应的上下文对象,然后初始化赋值一些局部变量,将它们设置为上下文对象

  上下文栈:

    在js代码执行的过程中,JS引擎会用一个栈结构容器来管理所创建的上下文对象,

    栈:后进先出,入口和出口是同一个口,用来 存放上下文对象

作用域和执行上下文的区别:

  除了全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义的时候创建,不是在调用时

  全局上下文是在全局作用域确定后,js代码执行之前创建

  函数上下文是在函数调用时,函数代码执行前创建。

  *:作用域是静态的,只要函数定义了,就一直会存在,

     上下文是动态的,在调用时,代码执行前生成,一旦函数执行完毕,上下文会立即消失

this:

  this本质上任何函数在执行时都是通过某个对象调用的,this就是代表调用函数的当前对象

    在函数定义是this还没有确定,只有在执行的时候才确定,如果当调用函数时没有明确指定当前对象,那么this指的就是window;函数执行完毕,上下文消失。

十四.对象创建的模式

  1.构造函数

    var person = new Object();

    person.name = "bajie";

    person.age = 12;

  2.对象字面量模式

    var person = {

      name = "bajie",

      age= 12

    }

  3.工厂模式

    function createPerson(name, age){

      var p = new Object();

      p.name = name;

      p.age = age;

    }

    var person  = createPerson("bajie", 12)

我只是搬运工

标签:全局   判断   渐进   迁移   执行函数   影响   items   冲突   timeout   

原文地址:http://www.cnblogs.com/widem/p/7261137.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!