javascript 中的面向对象实现 如何封装

javascript 是一门很灵活的语言,也是一门有缺陷的语言.比如我们今天要谈的,如何用面向对象的手法来封装javascript ,javascript是没有类的概念的.所以今天谈到的封装,其实就是用javascript的函数来实现的.varPeople{ name:’一介布衣’, age:’30' };这就是javascript中的一个对象,里面封装了2个属性.实例化一个对象的实例 peoplevarpeople=newPeople(); console.log(people.name,people.age);//一介布衣,30如果我们需要在函数里返回一个对象,如下代码:funct

javascript 中的闭包

要搞清楚闭包,首先要知道javascript中的作用域.什么是作用域,你可以简单的理解成当前上下文环境.javascript 中的作用域有2种属于全局作用域.属于局部作用域全局作用域:比如我们在浏览器端编写的 javascript 代码,varname=‘test’;我们直接定义了一个变量name ,那么这个变量当前作用域就是全局,对于浏览器端全局就是window更确切的说,name 是window 对象的一个属性.console.log(window.name);//test console.log(name);//test console.log(this.name);//test上面三种

moment .js - 不依赖任何三方库的时间日期格式化工具类

moment.js不依赖任何第三方库,支持字符串、Date、时间戳以及数组等格式,可以像PHP的date()函数一样,格式化日期时间,计算相对时间,获取特定时间后的日期时间等等,本文有如下举例。直接见代码:当前时间:moment().format('YYYY-MM-DD HH:mm:ss');2015-01-19 19:11:11今天是星期几:moment().format('d');1Unix时间戳:moment().format('X');1421665871相对时间:moment("20130101", "YY

git 本地仓库和远程仓库及本地分支和远程分支简介

之前一篇关于 git简易使用笔记 点击查看,今天的内容就是作为一个补充,主要说一下git 操作本地仓库/远程仓库及本地分支和远程分支.从远程git仓库签出代码: $ git clone git://aaa.com/git_project.git (远程git服务器项目所在地址)当你需要克隆远程项目到本地时,默认会把项目保存在名为 git_project 文件夹下面.你也可以指定本地的一个空文件夹cccgit clone git://aaa.com/git_project.git ccc$ git remote -v查看远程仓库$ git remote add [远程仓库名] [远程git服务

漫谈javascript 单线程异步io回调的特性

javascript经过浏览器大战的几次更新换代,终于一统江湖,稳坐第一把交椅,经过你会发现javascript语法和实现并不尽人意,但是丝毫不影响它的发展.我们最开始接触javascript应该大部分是从html中的js脚本开始,但是这种看似简单的语言稀里糊涂的用了好几年,也没有搞清楚它的一些原理机制,有没有躺枪!起码javascript在操作dom的时候用了各种事件回调,比如按钮,链接的点击,鼠标经过,获取焦点等等.在这个过程中,我们在dom上绑定一个事件回调函数 比如 onclick="doCheck()" 这个过程就是给dom元素注册了一个click 事件,并且绑定

userAgent判断客户端浏览器来自PC还是移动端

今天在三思悦网站通过微信上分享了一篇关于婴幼儿教育的帖子,等来到公司自己点进去一看,彻底凌乱了,看上去很多余的页头,样式完全错乱了,还有画蛇添足的页脚....移动浏览器可视化范围很小,所以充分利用有限的空间去展示有价值的东西,页头,页脚,侧边栏都是可以弱化,甚至不显示效果更佳.下面进行优化改造,我打算采用js来分辨pc浏览器还是移动端浏览器,pc端浏览器和移动客户端浏览器是通过 userAgent 来分辨,直接上代码:navigator.userAgent.match(/Android/i)//安卓客户端浏览器 navigator.userAgent.indexOf('iPhone&#

jquery链式操作,dom操作,事件操作- 基础训练第二篇

jquery选择器之基础训练第一篇链式操作jQuery允许把一系列的操作像链条一项写出来,比如下面的形式$('select').find('[class=city]').find("option:selected").val(); 上面的表达式分步显示是这样的:$('select') 找到所有下拉列表$.find('[class=city]') 过滤class=city的下拉列表$.find('option:selected').val() 找到下拉列表被选中的项的值之所有jquery支持这种极

jquery选择器之基础训练第一篇

jquery是前端开发者最喜欢的javascript开发框架之一,就像他的宣传语一样,写更少的代码,做更多的事情,现在拥有一大波开发者粉丝,甚至微软将它作为官方库,这一切说明jquery在开发者心中确实有很高的地位.jquery有一个强大的构造函数jQuery() 也就是我们常常简写的 $ ,这个构造函数强大之处在于,它能识别复杂的选择表达式进而找到你想要的元素.所以使用jquery的前提是会使用他的选择表达式,下面几种类似css选择器$(document)//选择整个文档对象 $('#documentID')//选择ID为myId的网页元素 $('a[name=me

jquery 常用小功能收集

在新窗口打开链接$(document).ready(function(){ //全部链接新页面打开 $('a[href^="http://"]').attr("target","_blank"); //部分链接新页面打开,比如class='menu'的链接 $('a[class='menu']').click(function(){ this.target="_blank"; }); });<a href="http://www.op

AngularJS快速开始

Angular学习之旅,从Hello World开始开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”:使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html。将下面的源代码复制到您的HTML文件。在web浏览器中打开这个HTML文件。源代码<!doctype html><html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script&g

node.js 下使用mocha 来做测试 test for node.js

NodeJS里最常用的测试框架估计就是mocha了。它支持多种node的assert libs, 同时支持异步和同步的测试,同时支持多种方式导出结果,也支持直接在browser上跑Javascript代码测试。本文示例大多源于官网示例,部分示例结合需要或自己的感想有所改动。更多介绍请看 官方网址:Mocha on GithubInstallation:当你成功安装nodejs v0.10 和 npm后执行下面这条命令。#npminstall-gmochap.s. Ubuntu的注意apt源里的nodejs版本会比较旧,某些module会不支持,请从nodejs官网进行源码安装。First st

Angular 基础学习教程

我们现在开始准备编写AngularJS应用——phonecat。这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用。进入angular-phonecat目录,运行如下命令:gitcheckout-fstep-0该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改。运行以下命令:nodescripts/web-server.js来启动服务器,启动后命令行终端将会提示Http Server running at http://lo

jquery 根据屏幕宽度改变图片宽度

投稿人: 海涛varclientWidth=parseInt(document.body.clientWidth); $('.detail_contentimg').each(function(i,n){ $(this).on('load',function(){ varwidth=parseInt(this.width);//图片实际宽度 varheight=parseInt(this.height); varoutwidth=width;//图片输出宽度 varoutheight=height;             var rateWidth = (cl

【随笔】javascript 超越 ruby 稳坐 github 第一把交椅

Github 托管这各式各样的开源项目,编程语言多种多样,当长久以来Ruby语言开发的项目居首.原因是因为Github 本身就是由Ruby 社区诞生出来的,所以长久以来它是Ruby的大本营.逐渐其他语言开发的开源项目也托管过来,久而久之语言种类越来越多,但是从未撼动过Ruby 的地位.但是到目前为止,javascript已经在github上稳坐第一把交椅,我个人认为是这几点因素:(1)如今前端javascript以垄断形式抢占web浏览器,可见前端javascript 工程师一抓一大把.(2)2009年发布至今的node.js 运行在服务器后端环境的javascript,以前得天独厚的web开

mac 下用 brew 安装mongodb

mac 下安装mongoDB一般俩种方法.(1)下载源码,解压,编译,配置,启动 比较艰难的一种模式.(2)brew install mongodb ,然后就可以悠闲的品一口茶,顺便瞄一眼网易新闻,这是一种傻瓜模式.但傻瓜模式也有人为干预的时候,粗略说一下使用brew 安装mongodbzhangzhi@moke:~/code$ brew install mongodb此图说明已经安装成功,安装的目录就是 /usr/local/Cellar/mongodb/2.4.9第一次启动服务端,这里需要做一些准备工作.1.默认mongodb 数据文件是放到根目录 data/db 文件夹下,如果没有这个文

走火入魔-javascript prototype 原型继承

在前几篇博客中谈到了用javascript中利用函数的函数模拟类,既然有类,那就应该存在面向对象的三大基本属性,或者说可以模拟出面向对象的三大基本属性.今天我们要学习的就是面向对象的继承 – javascript原型继承.为什么叫原型继承,因为我们知道javascript本没有类,它完全是基于原型对象的一门弱类型语言.所以javascript依靠原生对象创建出来的新对象就继承了原生对象的一些属性和方法.上面模拟了一个person类,person构造函数里初始化了姓名,然后我们创建一个学生的对象,并起名为 ‘小小’ 最后程序运行结果显示 小小.其实student 对象并没有定义姓名属性,为什么会

走火入魔 – javascript call apply 实现继承

上一博文说到了 javascript 中的原型继承,还说到了和大家分享 call , apply 实现继承,所以,就有了这篇博文.我们还是定义一个person 类 和一个 student 类,如下上面的student 类的构造函数传入了3个参数,当我们用call 实现 student 继承 person 的时候时,person的构造函数只实现了2个参数的传入,所以第三个参数必须要student自己来实现.及学生有了成绩的这个属性.student 类还重新定义eat 方法,到底之类重写父类的方法时,父类的同名方法会不会被覆盖? call 能不能实现 student 继承 person ? 这些疑

javascript 字符串和时间类型相互转化

常见的时间类型字符串:vardate1="2014-03-0912:00:00";javascript 对 类似上面这种时间转化不感冒,它更青睐的是这种字符串格式的时间 "2014/03/09 12:00:00" ,我们姑且称作date2所以有种非常简单的方法就是将 date1 的格式转换成 date2 的格式然后再转化时间类型.如下vartime1=newDate(Date.parse(date1.replace(/-/g,"/")));上面一行代码实现了date1 转 时间类型.求时间差方法:var days=time1-time

jQuery 源码分析学习 — 优秀前端框架jQuery框架认识

从今天开始学习优秀前端开源框架jQuery源码.本系列主要针对 jQuery1.6 源码分析学习.准备工作:初始jQuery 框架.(function(){ // javascript  代码…… })();所有的jQuery 代码都包含在这个自调用匿名函数中什么是匿名函数?类似这样的函数定义(function(a,b) { console.info( a+b); })( 5,6);匿名函数其实是一种函数字面量,就像对象字面量一样{name:”小小”,age:1}  第一对圆括号括起来的function(){….}  是匿名函数的函数体,第二对圆括号 (5,6) 是匿名函数的参数,此函数字面量

走火入魔javascript — 分享几个好多人执意往里跳的”坑”

javascript 是一门容易上手也是一门如意犯错的语言,为什么这么说,它零活的类型转化有时让你摸不到头脑.类型有没有定义都无所谓,一旦你的变量前少了var ,那可能会造成一个严重的bug ,污染了全局变量,甚至修改了全局变量的值,导致其他引用该变量的程序出错.函数形参和实参可以不匹配,不匹配到什么程度呢? 类型可以不匹配,甚至参数数量也可以不匹配……..等等javascript里的一些坑,如果你发现了一定要绕过去,如果你发现不了,那可能浪费你很多的时间去调试一个bug1.关于 NaN 类型,这是个非数值类型,那它的值是什么呢? 谁都不知道,的确,它自己都不知道.所以看下面的坑if(NaN=

走火入魔-javascript 中的类

嗯,没错,今天就是要讲下javascript中的类,哈哈,希望不要对大家有所误解!稍微对javascript有所了解的人应该知道,javascript这门弱类型语言没有类的概念,它是基于对象的.看了上面这句不仅有人低估起来了,既然有对象,为啥能没有类呢? 的确,javascript 是一门很怪异的弱类型语言,它的怪异之处以后慢慢讲,而它基于的对象并不是从类实例化过来的对象,而是原型对象.原型对象从哪来? 用一个不确切的比喻来说好比造物主创造世界的时候初始化了一些原生的东西,比如男人,女人,这是俩个活生生的原型而不是类型,也就是说javascript本身就内置了几种对象,而以后创建的对象都是从这

javascript中的对象

简单说下关于javascript中的对象.javascript 不是一门面向对象的语言,而是一门基于对象的语言,它的所有类型都基于Object原型而存在.但是我们常说 javascript中包括值类型 ,比如 boolean ,number, string 等值类型,其实这些值类型被称为 伪对象,他们对应javascript中三个内置对象分别是:Boolean , Number , String 而解析器将这三个对象的方法和属性同样绑定在对应字面量值类型上(boolean,number,string) 所以javascript中值类型也是也拥有了方法和属性,一般推荐直接使用这3个内置对象的字面

javascript私房菜-百变函数eval

如你所想,确实有点标题党手里有本鸟哥的<<linux私房菜>>对于一个linux菜鸟来说受益很大,所以我也来道私房菜,对鸟哥致敬!!eval 很神秘,你不觉得吗? 你可能常常会用到这个函数,但是有不太明天它到底是干什么的,其实我之前也一样非常糊涂,所以写了这篇博和大家一起学习探讨.很早一段时间我认为 eval 是个格式化函数,为什么这样认为,起因是ajax接收后台传过来的json格式字符串,javascript直接接收后台传入的json格式总是不识别,只要用神奇的 eval 函数转化一下就ok了,下面我们一起来认识一下 evalevalw3c 给出的定义是: eval(

jquery 判断某个元素在DOM中是否存在

javascript 代码下判断 DOM 下是否存在某个元素if(document.getElementByIdx_x(‘but’)){ alert(‘元素存在’); }else{ alert(‘元素不存在’); }但是在JQuery 下如判断某个元素是否存在.jquery 内置没有直接判断dom中某个元素是否存在的方法.$(“#but”) 获取到的是jquery 对象,是一个object,无法判断此元素是否存在.但是jquery 对象有个length 属性,表示当前jquery 对象中获取到几个 domElement 元素.所以我们的jquery代码可以这样写:if($(“#but”).le

走火入魔javascript — this关键字

this的指向是由它所在函数调用的上下文决定的,而不是由它所在函数定义的上下文决定的。(1)在全局范围内,this就是指全局对象.alert(this);this直接指向了当前环境的全局对象 window(2)调用函数时,this指向全局对象.例如 test();functiontest(){ alert(this); } test();因为调用test() 的环境就是全局,结合开开头第一句话,this 指向当前执行环境,而非定义环境,所以很容易理解当前this就是指向 window(3)函数的方法调用时,this指向调用方法的对象. 例如 obj.test(); 这时this 指 obj对

利用window.name 实现iframe 跨域传值

原理:浏览器跨域ifram禁止互相调用/传值.但是调用iframe时 window.name 却不变,正是利用这个特性来互相传值,当然跨域下是不容许读取ifram的window.name值.所以这里我们还要准备一个和主页面http://www.a.com/main.html 相同域下的代理页面http://www.a.com/other.html ,iframe调用子页面 http://www.b.com/iframe.aspx执行流程:浏览器执行主页面 http://www.a.com/main.html 时创建iframe 加载子页面 http://www.b.com/iframe.asp

走火入魔javascript – javascript中的垃圾回收机制

javascript的垃圾回收机制是运行环境自动收集机制.也就是说执行环境负责管理代码在执行过程中使用的内存.垃圾回收原理:找出内存中不再继续使用的变量,将其所占用的内存释放,开发人员不再关心内存的使用情况,内存的分配已经无用内存的释放完全实现了自动化管理.垃圾回收的方法有2种:(1)标记清除(2)引用计数标记清除:是目前javascript最常用的一种垃圾回收机制,当变量进入执行环境,将被标记为 “进入环境”当变量离开执行环境时,将被标记为 “离开环境”.垃圾收集器在运行时会给存储在内存中的所有变量都加上一个标记,然后检查哪些变量还在环境中使用,将去掉这些变量的标记,检查哪些变量被环境中的变

走火入魔javascript – 非值类型转化为整形方法

数值转化的3个函数(1) Number()(2) parseInt()(3) parseFloat()(1)可以用于任何类型转化为 数值型.(2),(3)专门用于字符串转化为 数值型.Number() 函数转化规则:Boolean 类型: true 转化为1, false 转化为0.数值型: 只是简单的传入和返回.Null类型: 转化为0.undefined: 转化为NaN.字符串:遵循如下规则(1)如果字符串只包含数字,直接转化为对应的数值.(2)如果字符串包含有效的浮点格式 如 “3.3″ 则直接转化为对应的浮点格式.(3)如果字符串中包含16进制格式字符串,如 “0xf” 则直接转化为对

javascript 基本类型有哪些?

Undefined:Undefined 类型只有一个值 undefined ,表示变量未定义此类型派生自Null 类型,所以出现一个很有趣的东西 if(null==undefined)alet(‘true’);将执行并弹出 true,因为条件是恒等的.当我们定义javascript变量的时候,其实默认就赋值为 undefined.var test; 其实等价于 var test=undefined;所以:当你要给一个对象定义变量时,最好这样, var testClass=null; 这样 testClass的默认值不少 undefined,保持的是一个空引用的null,下一步给testClas

采用P3P实现浏览器跨域 iframe读写 cookies

网站采用iframe框架形式嵌套了B网站的一个页面C,直接打开页面C会在本地保留一个cookie文件,而当采用A网站iframe框架形式嵌套后就无法成功生成cookie文件,该问题仅在IE浏览器环境下出现,firefox、chrome、Safari浏览器下没有问题。造成该问题的原因:一个所谓的隐私首选项(简称为P3P)的W3C标准。只有在每一页上设置一个cookie发送头,才能允许Internet Explorer接受第三方Cookie。换言之,只有在页面C上设置一个cookie发送头,那么A网站iframe框架形式嵌套后就可以在IE下成功获得页面C的cookie。PHP:header(‘P3

回到顶部