前端学习

前端学习

@色少11年前

09/1
15:28
前端技能

arguments对象转换为数组

函数内的arguments 对象,有人称之为“类数组”对象,因为它具有数组的一些特性:拥有length 属性、并且用数字索引存放着参数以便访问,可大家都知道其实它并不是数组。

有的时候需要将参数列表看作一数组,以便使用数组的一些方法(如concat, splice 等)进行操作,这就要想办法做一个转换,

(function() {

aArguments = Array.prototype.slice.apply(arguments);

})(1,2,3);

 也可以简单写成

(function() {
var aArguments = [].slice.apply(arguments);

})(1,2,3);

 

此时aArguments 已经是参数数组[1, 2, 3] 了。

slice 方法确实可用于拷贝数组,但它是属于数组的方法,直接arguments.slice() 肯定是不行的。上面的方法则比较巧妙,它利用了arguments 对象的那些数组特性,然后通过apply 使自身运用于数组的slice 方法,以达到转换为数组类型的效果。

补充:在这里使用了

1
<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span>forEach<span class="token punctuation">.</span>call

而不是

1
Array<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>forEach<span class="token punctuation">.</span>call

,二者等价,但是前者可以节省几个字节。

下面一个小例子:

使用mySort()能将传入的参数按照从小到大的顺序显示出来

function mySort(){

var args=new Array();   //使用数组作为参数存储容器

//补充代码

return args;

}

var result=mySort(50,11,16,24,88,57,…,10); //传入的参数个数不定

console.log(result);

 

下面是补充代码:

//           方法1

//          args=args.slice.call(arguments).sort(function(a,b){return a-b})

//           方法2

//            for(var i=0;i<arguments.length;i++) {

//                args[i]=arguments[i];

//            }

//           args.sort(function(n1,n2){

//                return n1-n2;

//            });

2014年12月更新:

http://blog.csdn.net/myhahaxiao/article/details/6952321

深入解析apply和call的区别和用法

我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享..  如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高..

主要我是要解决一下几个问题:

1.        apply和call的区别在哪里

2.        什么情况下用apply,什么情况下用call

3.        apply的其他巧妙用法(一般在什么情况下可以使用apply)

我首先从网上查到关于apply和call的定义,然后用示例来解释这两个方法的意思和如何去用.

apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性.

 Function.apply(obj,args)方法能接收两个参数
obj:这个对象将代替Function类里this对象
args:这个是数组,它将作为参数传给Function(args–>arguments)

call:和apply的意思一样,只不过是参数列表不一样.

 Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj:这个对象将代替Function类里this对象
params:这个是一个参数列表

1.        apply示例:

  1. <script type=“text/javascript”>
  2.     /*定义一个人类*/
  3.     function Person(name,age)
  4.     {
  5.         this.name=name;
  6.         this.age=age;
  7.     }
  8.     /*定义一个学生类*/
  9.     function Student(name,age,grade)
  10.     {
  11.         Person.apply(this,arguments);
  12.         this.grade=grade;
  13.     }
  14.     //创建一个学生类
  15.     var student=new Student(“zhangsan”,21,“一年级”);
  16.     //测试
  17.     alert(“name:”+student.name+“\n”+“age:”+student.age+“\n”+“grade:”+student.grade);
  18.     //大家可以看到测试结果name:zhangsan age:21  grade:一年级
  19.     //学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.
  20. </script>

 

分析: Person.apply(this,arguments);

this:在创建对象在这个时候代表的是student

arguments:是一个数组,也就是[“zhangsan”,”21”,”一年级”];

                   也就是通俗一点讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面

 

2.        call示例

在Studen函数里面可以将apply中修改成如下:

Person.call(this,name,age);

这样就ok了

3.        什么情况下用apply,什么情况下用call

在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply , 如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

4.        apply的一些其他巧妙用法

细心的人可能已经察觉到,在我调用apply方法的时候,第一个参数是对象(this), 第二个参数是一个数组集合, 在调用Person的时候,他需要的不是一个数组,但是为什么他给我一个数组我仍然可以将数组解析为一个一个的参数,这个就是apply的一个巧妙的用处,可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3) 这个如果让我们用程序来实现将数组的每一个项,来装换为参数的列表,可能都得费一会功夫,借助apply的这点特性,所以就有了以下高效率的方法:

 

a)        Math.max 可以实现得到数组中最大的一项

因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组

但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决 var max=Math.max.apply(null,array),这样轻易的可以得到一个数组中最大的一项(apply会将一个数组装换为一个参数接一个参数的传递给方法)

这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去

b)        Math.min  可以实现得到数组中最小的一项

同样和 max是一个思想 var min=Math.min.apply(null,array);

c)        Array.prototype.push 可以实现两个数组合并

同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来装换一下这个数组,即:

  1. vararr1=new Array(“1”,“2”,“3”);
  2. vararr2=new Array(“4”,“5”,“6”);
  3. Array.prototype.push.apply(arr1,arr2);

 

也可以这样理解,arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合.

通常在什么情况下,可以使用apply类似Math.min等之类的特殊用法:

一般在目标函数只需要n个参数列表,而不接收一个数组的形式([param1[,param2[,…[,paramN]]]]),可以通过apply的方式巧妙地解决这个问题!

5.        总结:

一开始我对apply 非常的不懂,最后多看了几遍,自己多敲了几遍代码,才明白了中间的道理,所以,不管做什么事情,只要自己肯动脑子,肯动手敲代码,这样一个技术就会掌握…

还有比如第四部分得内容,巧妙的解决了实实在在存在的问题,这个肯定不是一个初学者能想到的解决方案(这个也不是我自己想的),没有对编程有一定认识的不会想到这个的,还是一句话,多积累,多学习,提升自己的能力和对编程思想的理解能力才是最关键!

arguments对象转换为数组

@色少11年前

08/19
17:55
javascript 前端技能

iframe 高度自适应 获取iframe里面内容的高度




ps:不怎么建议利用jq的content函数,因为获取不正确有兼容问题,亲测

iframe 高度自适应 获取iframe里面内容的高度

@色少11年前

08/6
15:24
javascript 前端技能

Math Array String 对象方法

     最近看了很多不同的面试题,其中看到一题写出Math Array String的方法。尽可能写全。突然就懵了。就只记得array的pop,join,concat,push等!对于基础的知识的不扎实我自我反省特此记录,防止自己老人痴呆。

Math对象方法
  1 abs(x) 返回绝对值
  2 ceil(x)上 floor(x)下  round(x)最近 对数进行四舍五入
  3 exp(x) 返回e的指数 log(x)返回数的自然对数底为e
  4 max(x,y) min(x,y) 返回x,y的最大(小)值
  5 pow(x,y)返回x的y次方 sqrt(x,y)返回x,y的平方根
  6 tan() sin() cos() atan() asin acos()
  7 random() 生成0-1之间的随机数
  8 valueOf() 返回math对象的原始值
  
Array对象方法
  1 concat() 链接两个或更多的数组
  2 join() 把数组的所有元素放到一个字符串,并通过指定字符链接
  3 pop() shift()删除并返回数组的最后一个或第一个元素
  4 push() unshift() 像数组的头或尾部增加一个或多个新元素并返回新的长度
  5 reverse() 翻转数组
  6 slice(start必需,end 可选) 返回选取的元素 如果是负数从尾部开始
  7 sort()对元素进行排序
  8 toString() 转换为字符串 tolocalString()返回本地字符串 如date根据西方中方的习惯不同而转变
  9 splice(start,end,new) 删除元素 并为数组添加新元素,用法类似于slice end为0不删除元素+


String对象方法
  1 charAt() 返回指定位置的字符
  2 charCodeAt() 返回指定位置字符的Unicode编码
  3 concat() 链接字符串
  4 indexOf(string,from) 检索字符串,对大小写敏感,from表示从第几个字符开始检索 未找到返回-1
    lastindexof()从后往前
  5 match() 找到一个或多个正则表达式匹配
  6 replace() 替换与正则表达式匹配的值
  7 search() 查找与正则表达式匹配的值 返回位置
  8 big bink bold一堆控制样式方法
  9 split() 把字符串分割为字符串数组
  10 subStr(start,number) 返回指定长度的字符串  
     slice(start,end可选) 提取字符串片段 并返回提取字符串部分
     subString(start,end) 返回指定位置的字符串
  11 toLowerCase()字符串转换为小写 toUpperCase()字符串转换为大写

Math Array String 对象方法

@色少11年前

07/2
20:07
前端技能 终端

关于移动开发端的一些事一些情(一)

 

首先此篇文章是关于iPhone和andriod等智能手机网站webapp的开发的一些小小的心得,中等屏幕的智能手机(物理尺寸为7寸以内)。比如iPhone3GS、iPhone4、iPhone4s等。首先,我们先来定义一下手机的屏幕大小的归类档次:

A.小屏幕:宽度240 px 以下屏幕或者2.4 以下屏幕

一般以非智能机为主,归在这个分类中的手机屏幕,一般是以java版本的客户端为主。

B. 中等屏幕:宽度240~320 px,或者2.4~3.0吋屏幕

智能手机以Symbian或S60 v1,2,3,Windows mobile为主流;或者是非智能手机的客户端以java版本为主。

同时包括240*320的宽屏手机。

C. 大屏幕:宽度320 px以上屏幕或者 3.0吋以上的屏幕

iPhone 手机只有两个版本的适配,屏幕物理尺寸保持一致;

Android 系统手机及衍生平台手机

Win phone 7 系统手机

Nokia S60 v5,symbian 3等

如果是为了满足功能的话对于小屏幕的手机可以选择结合xhtml、wml开发wap2.0.

 

以下是关于页面制作的一些小技巧:

首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用

第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览。

<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no” />尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开,如果不规范将不会起作用。

initial-scale – 初始的缩放比例

minimum-scale – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

第二个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;<meta content=”black” name=”apple-mobile-web-app-status-bar-style” />

 

第三个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码 <meta content=”telephone=no” name=”format-detection” />

 

如何去除Android平台中对邮箱地址的识别,看过iOS webapp API的人都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的,但在Android平台,它会自动检测邮件地址,当用户touch到这个邮件地址时,Android会弹出一个框提示用户发送邮件,如果你不想Android自动识别页面中的邮件地址,你不妨加上这样一句meta标签在head中<meta content=”email=no” name=”format-detection” />

 

第四个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览; <meta content=”yes” name=”apple-mobile-web-app-capable” />

 

其次是关于页面css运用的小技巧:

1、  放弃CSS float属性。在项目开发过程中可以会遇到内容排列排列显示的布局(如图),假如你遇见这样的视觉稿,我会建议你放弃float,可以直接使用display:block; 在andriod2.3中对于浮动的支持度简直无比蛋疼,也可以选择css3中一个新的属性box-flex。在css中为display: box; 结合box-orient:horizontal;这个属性一起用就可以达到内容排列排列显示的布局。具体这两个属性可以参考:

http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/(来自张鑫旭的blog)

 

1

(内容排列排列显示的布局)

2、利用CSS3制作有内外发光和圆角还有高光加渐变的按钮,这样的按钮虽然勉强可以利用css3来制作,但是在andriod2.3中渐变圆角等属性是不兼容的。因此,这个时候你不妨使用border-image来定义这个按钮的样式。具体这个属性可以参考http://www.w3cplus.com/content/css3-border-image

 

3、如何解决Android 2.0平台中圆角的问题

在对一个元素定义圆角时,为完全兼容android 2.0的平台,我们必须要按照以下技巧来定义边框圆角:

  1. -webkit这个前缀必须要加上(在iOS中,你可以不加,但android中一定要加);
  2. 如果对针对边框做样式定义,比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。
  3. 假如我们有这样的视觉元素,左上角和右上角是圆角时,我们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:5px;然后再依次的覆盖左下角和右下角-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-border:0;否则在android 2.0的平台中将全部显示直角。

 

4、块级化a标签 请保证将每条数据都放在一个a标签中,为何这样做呢?因为在触屏手机上,为提升用户体验,尽可能的保证用户的可点击区域较大。

 

5、如何关闭iOS中键盘自动大写。我们知道在IOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。
6、IOS禁止用户在新窗口打开页面。有时我们可能需要禁止用户在新窗口打开页面,我们可以使用a标签的target=”_self“来指定用户在新窗口打开,或者target属性保持空,但是你会发现iOS的用户在这个链接的上方长按3秒钟后,iOS会弹出一个列表按钮,用户通过这些按钮仍然可以在新窗口打开页面,这样的话,开发者指定的target属性就失效了,但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。

 

7、iOS中如何禁止用户保存图片、复制图片
img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮,这样用户就无法保存、复制你的图片了。

8、iOS中如何禁止用户选中文字。我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。

 

9、textarea在手机浏览器中的问题:不能够尽贴外面的容器边框。无论是有没有padding还是margin默认有对于外容器有一定距离,可以利用lineheight:0;解决

 

10、自适应布局模式。在编写CSS时,我不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。为达到适配各种手持设备,我建议前端工程师按照页面的复杂程度选择使用自适应布局模式或按百分比的流体布局。

 

自适应布局 百分比流体布局
优点: 无dpi缩放,根据不同分辨率,在不同终端均用最合适的方式显示 开发成本低,一次开发,到处运行在大分辨率下表现良好对于未来自适应性良好

 

缺点: 1、沟通成本高,从交互设计、UI设计到前端工程师均需参与2、开发成本高,做大量嗅探,写多个分支。3、未来的新的主流分辨率出现,需再增加分支 1、有dpi缩放,显示效果非最优2、大分辨率下,交互设计受制约3、小分辨率下,图片大小没有得到最大优化

 

 

 

2

(百分比流体布局如图)

 

在这里介绍多个测试多个分辨率的小工具:

http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/

如图:3

 

4

还有一个就是最新版本的火狐也具备响应式设计视图:

56

11、如何禁止用户旋转设备。我曾经也想禁止用户旋转设备,也想实现像某些客户端那样:只能在肖像模式或景观模式下才能正常运行。但是我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件,而且在Android平台,确实也是阻止不了的。提供IOS中禁止用户旋转设备的参考事件:

event :  window.onorientationchange

vaule: window.orientation

 

12、某些样式的小细节:

-webkit-text-size-adjust:none;苹果移动设备上会识别,用于保证文字大小。禁止其在IOS上的文字缩放。

-webkit-tap-highlight-color: ;  //手指触发链接时颜色

CSS变换(Transitions)

-webkit-transition-property 定义需要渐变的属性 -webkit-transition-duration 定义动画时间 -webkit-transition-delay 定义延迟时间 -webkit-transition-timing-function 定义贝赛尔曲线函数

-webkit-transition-property可以定义具体的属性,例如width,height,多个属性用逗号隔开, 也可以定义all,这样所有具有连续数值类型的样式属性变化都会触发transtions,现在我们可以尝试 创建一个transitions,

div.zoom-fade{-webkit-transition-property:-webkit-transform,opacity; -webkit-transition-duration: 4s, 2s; -webkit-transition-delay: 2s, 0; }

我们也可以把这些属性写在一行,

div.sliding { -webkit-transition: opacity 500ms ease-out 100ms; }

-webkit-appearance:none: //取消默认样式

text-shadow: #666 0 -1px 0; 文字阴影

-webkit-border-radius:10px; 圆角

background:url(),url(),url()_//多重背景

color:rgba (255.255,255,.7)//定义透明颜色

border-width:0 14px 0 14px;

-webkit-border-image:url(img.png) 0 14 0 14 //创建按钮

 

下面是关于页面功能介绍(主要是利用某些属性):

1、如何检测用户是通过主屏启动你的webapp 。看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能,按下iphone\ipod\ipod touch底部工具中的小加号,或者ipad顶部左侧的小加号,就可以将当前的页面添加到设备的主屏,在设备的主屏会自动增加一个当前页面的启动图标,点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条,这样你的webapp就更加像是nativeapp了,还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时,navigator.standalone为false,从主屏启动webapp时,navigator.standalone为true, 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。 在Android中从来没有添加到主屏这个东西的。

2、隐藏地址栏

普通的是利用 setTimeout(scrollTo,0,0,0);就可以实现静态页面在IOS和android的设备,请注意,这句代码必须放在window.onload里才能够正常的工作,而且你的当前文档的内容高度必须是高于窗口的高度时,这句代码才能有效的执行。然而一个网站不可能就是静态页面,很多时候需要利用到置顶的组件如:7

这样就会和本身普通隐藏顶部导航栏有些许区别而且ios上和android也是有不一样的兼容问题,因此可以利用addEventListener(‘load’.funcion(){

setTimeout(function(){window.scrollTo(0,1);},100};

})

3、iOS中如何获取滚动条的值

桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两个属性是未定义的,为什么呢?因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获取滚动条的值呢?

通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。

4、如何解决盒子边框溢出

当你指定了一个块级元素时,并且为其定义了边框,设置了其宽度为100%。在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

 

 

关于移动开发端的一些事一些情(一)