2016年08月_旗smile

原创理解Function.prototype.bind

bind()方法会创建一个新的函数，成为绑定函数。当调用这个绑定函数时，绑定函数会以创建它时传入的第一个参数作为this，传入bind()方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调取原函数。实际使用中我们经常会碰到这样的问题：var name = "pig";function Person(name){ this.name = name

2016-08-30 12:55:41 3034 1

原创 JavaScript性能优化技巧之函数节流

在写上一篇获取宽高度的博客的时候发现了一个问题，设置了$(window).resize()和$(window).scroll()的时候，函数调用的次数特别频繁，因为我写博客只是为了展现一个简单的例子，所以函数特别简单，但是当函数比较复杂的时候，那么频繁的调用这个函数将会对性能有特别大的损耗。再写了简单的例子展现一下这个问题吧：var n = 1;$(window).resize(fu

2016-08-26 15:34:31 5019 2

原创 js、jQuery获取页面中的各种宽度和高度

在JavaScript和jQuery中，对获取各种高度和宽度都有定义方法和属性，下面我们主要来说明一下获取窗口和文档的高度（宽度与高度相同）。jQuery中的方法 $(document).height();//整个网页的高度 $(window).height();//浏览器可视窗口的高度 $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直

2016-08-25 14:56:55 7578

原创九个让JavaScript调试更简单的console命令

一、显示信息的命令<!doctype html><html><head><meta charset="utf-8"><title>常用console命令</title></head><body><script> console.log("hello"); console.info("info"); console.error("error"); conso

2016-08-20 13:19:24 561

原创 JavaScript执行机制之执行顺序

JavaScript是一种描述型的脚本语言，不同于C#或者java，它不需要进行编译成中间语言，而是由浏览器动态的解析和执行。今天我们就来说一个JavaScript是如何解析的，它的执行顺序是怎么样的？在此之前，我们先来了解几个术语。一、代码块 JavaScript中的代码块是指由<Script>标签分割的代码块。例如：<script>console.log("这是代码块一");</

2016-08-19 13:39:44 11584 4

原创 JavaScript中的对象，如何创建对象，创建对象的7种模式

ECMA-262把对象定义为：”无需属性的集合，其属性可以包含基本值、对象或者函数。”严格来讲，这就相当于说明对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。正因为这样，我们可以把ECMAScript的对象想象成散列表：无非就是一组名对值，其中值可以是数据或函数。创建自定义对象最简单的方式就是创建一个Object的实例，然后再为他添加属性和方

2016-08-14 16:33:32 14755 6

原创 JavaScript模块化

随着互联网行业的发展，网页中的js脚本代码越来越庞大，现在一个庞大的网页体系也需要像桌面程序一样进行团队分工协作完成，开发者不得不使用软件工程的方法，管理网页的业务逻辑。所以现在JavaScript的模块化编程是必不可少的，开发者只需要完成业务的核心逻辑，引入其他的模块即可。但是JavaScript语言本身没有提供模块化的功能（在ECMAScript2015标准已经支持，但还需很长时间

2016-08-10 10:39:38 661

原创 JavaScript中的本地对象、内置对象和宿主对象

初学JavaScript的时候总是分不清什么是本地对象、内置对象和宿主对象，现在写一篇博客来记录一下。一、本地对象ECMA-262把本地对象（native object）定义为：独立于宿主环境的ECMAScript实现的对象。这里简单说一下JavaScript的应用环境，JavaScript的应用环境由宿主环境和运行期环境构成。宿主环境主要是指外壳程序（shell）和Web浏览器等，运行期环境由

2016-08-09 14:29:04 6696

原创 HTML5 <script>标签中的async和defer

在HTML中执行脚本最重要的方法就是使用<script>元素，但是执行<script>元素时会阻塞后面文档的加载，为了解决这个问题HTML5为<script>元素添加了async和defer属性。一、浏览器加载到<script>元素，没有设置async或者defer<script src="main.js"></script>浏览器执行到这个元素的时候会立即下载src所指向的脚本并且执行，在执行完该

2016-08-09 11:54:20 718

原创 JavaScript闭包的理解

闭包（closure）是JavaScript语言的一个特点，要实现很多的高级功能都需要用到闭包。简单的说，闭包就是可以访问其他函数内部变量的函数。1.变量的作用域首先来了解一下JS里面变量的作用域，JS变量的作用域有两种，全局变量和局部变量，下面来了解一下他们可以在哪些地方被访问。var n=123;function al(){ console.log(n);}al();//输出为:

2016-08-08 15:09:04 446

原创前端面试基础总结

引言作为一个刚毕业的大学生，出来求职面试必不可少，在6月份的面试中很多公司的笔试题中都提到很多相同的知识要点，再结合网上查找的一些资料，写下了这篇文章来帮助更多准备做前端的初学者，让准备深入前端的初学者们节约下更多的时间取探索自己想要深入的一方面。面试笔试涉及到的领域HTML/CSS 对web标准的理解、浏览器的内核差异、兼容性、CSShack、布局、盒子模型、选择器的优先级、HTML3、CSS3

2016-08-07 18:33:35 2217

原创 jQuery自定义插件

jQuery是一个功能强大的库，提供了开发JavaScript项目所需的所有核心函数。然而，有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率。 jQuery库是为了加快JavaScript的开发速度而设计的，通过简化编写JavaScript的方式，减少代码量。jQuery编写插件有两种方式 1.添加jQuery对象级别的插件，原理是给jQuery类添加方法。写法如下：(fun

2016-08-07 14:07:44 641

原创 JS中的onload事件和jQuery中的ready事件，如何用JS实现jQuery中的ready

浏览器加载页面的顺序解析HTML结构加载外部脚本和样式表文件解析并执行脚本程序构造HTML DOM结构 ready事件执行加载图片等组件页面加载完毕 load事件执行load事件：在所有页面加载完毕执行，包括DOM、图片、iframe等组件。 ready事件在DOM加载完毕后执行。先来看一个实例：<!

2016-08-05 17:13:11 591

原创 JavaScript停止冒泡事件和阻止默认事件

事件冒泡和事件捕获事件冒泡：当事件在某一个DOM元素上触发时，先触发最具体的元素，然后依次向上触发父级元素的事件。例如一个div里面嵌套一个p元素，p元素里面嵌套一个button，当点击button时，会依次触发button、p、div上的点击事件。事件捕获：当触发某个DOM元素时，会先出发根元素的事件，然后按照该DOM元素的祖先次序依次触发事件，最后再触发该元素的事件。顺序与事件冒泡的执行顺序

2016-08-05 13:26:58 2574

原创浮动的优缺点，如何清除浮动？

什么是浮动？元素浮动以后可以想做或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。浮动的好处：在图片周围包含文字创建网页布局浮动的缺点：无法撑起父元素。同级别的兄弟元素会围绕在周围。清除浮动这是一个浮动的demo：<!doctype html><html><head><me

2016-08-05 10:46:23 3023

原创 ajax的过程

AJAX=Asynchronous JavaScript and XML（异步的JavaScript和XML） AJAX不是一种新的语言，而是一种使用现有标准的新方法。 AJAX在不重新加载整个页面的情况下，实现与服务器的数据交换刷新局部页面。详细过程：创建XMLHttpRequest对象，也就是创建一个异步调用对象创建一个新的HTTP请求，并指定请求方式、URL、是否异步调用设置响应HT

2016-08-03 22:30:13 1615

原创考察JS基础的一些题目

一、arguments(function(){ return typeof arguments; //object})();arguments是每个函数都有的内置对象，和数组十分相似，但又不是数组，arguments对应的是函数传入的参数列表。二、函数名var f=function g(){return 1;};typeof g(); //报错 g is no

2016-08-03 15:36:27 914

原创总结一下最近学到的10个JS技巧

记录一些常用的JavaScript技巧1.使用!!操作符转换Boolean值当我们要检验一个值是否为true或false时，可使用!!来快速转换为布尔值，如果值为0、NaN、null、undefined、""时，返回false，其余值返回true。 var a='123'; var b=0; console.log(!!a); //true

2016-08-02 11:00:24 1314

SweetoDream