call前端_前端开发的基本方法

⑴ 前端面试会提问到哪些

在面试前端的过程中，有些问题是经常会被提问到的
一、基础篇
1. 在不使用第三个变量的情况下，如何调换a与b的值？
2. px与em的区别
3. 简述一下盒模型
4. 页面导入样式时，使用link和@import有什么区别？
5. 简述一下事件代理
二、HTML常见题目
01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？
02、HTML5为什么只需要写？
03、行内元素有哪些？块级元素有哪些？空(void)元素有哪些？
04、页面导入样式时，使用link和@import有什么区别？
05、介绍一下你对浏览器内核的理解？
06、常见的浏览器内核有哪些？
07、html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？
08、如何区分HTML和HTML5？
09、简述一下你对HTML语义化的理解？
10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
三、CSS类的题目
01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
02、CSS选择符有哪些？哪些属性可以继承？
03、CSS优先级算法如何计算？
04、CSS3新增伪类有哪些？
05、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
06、display有哪些值？说明他们的作用。
07、position的值relative和absolute定位原点是？
08、CSS3有哪些新特性？
09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
四、JavaScript类的题目
01、JavaScript中this是如何工作的
02、请解释原型继承的原理。
03、什么是闭包(closure)，如何使用它，为什么要使用它？
04、.call 和.apply的区别是什么？
05、请指出JavaScript 宿主对象(host objects) 和原生对象(native objects) 的区别？
06、请指出以下代码的区别：function Person(){}、var person = Person()、var person = new Person()？
07、请解释变量声明提升(hoisting)。
08、什么是 “use strict”; ？使用它的好处和坏处分别是什么？
09、什么是事件循环 (event loop)？
10、请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。
五、开发及性能优化类题目
01、如何规避javascript多人开发函数重名问题？
02、请说出三种减低页面加载时间的方法.
03、说说你所了解到的Web攻击技术。
04、说说你说了解的前端性能优化方法？
05、前端开发中，如何优化图像？图像格式的区别？
06、浏览器是如何渲染页面的？
07、页面重构怎么操作？
08、什么叫优雅降级和渐进增强？
09、前端需要注意哪些SEO？如何做SEO优化？
10、平时如何管理你的项目？

⑵ 如何系统有效的学习前端

网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。前端的核心价值在于对用户体验的追求，Web前端开发是从网页制作演变而来的。初学者可以参考以下的教程进行初步的系统学习！基础知识1、HTML + CSS 这部分建议在W3school在线教程上学习，边学边练，每章后还有小测试。之后可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《Head First HTML 与 CSS 中文版》，这本书讲的太细了，我没能拿出耐心细读。你可以根据情况斟酌。 2、Javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 W3school上学习。之后建议马上看《Javascript语言精粹》，JS是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。进阶有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。 1、CSS。必看《精通CSS》，看完这本书你应该对：盒子模型，流动，Block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《CSS艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。 2、Javascript。上面提到内容还不足以让你胜任JS编程。在有了基础之后，进一步学习内容包括： a）框架。推荐jQuery，简单易用，在W3school简单学习js后，直接上手jQuery即可完成一些简单的项目。学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与Web开发学习的精髓部分。补充：可以使用Codecademy学习 Javascript，jQuery，用户体验真的很好（感谢 TonyOuyang ）。 b） Javascript 语言范式。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。Javascript不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。 Javascript的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基网络，网络会是你的帮手，另外推荐《Object Oriented Javascript》，应该有中文版。对与函数式编程我了解的也不系统，不好多说，可以自己网络一下。 c） Javascript 语言内部机制。必须弄清如下概念：JS 中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this’指向的是谁。这部分内容你会在《Javascript语言精粹》中详细了解。另外，你必须理解 json。 d） dom编程，这个Web前端工程师的核心技能之一。必读《Dom编程艺术》，另外《高性能 Javascript》这本书中关于dom编程的部分讲的也很好。 e） Ajax编程，这是另一核心技术。Ajax建议在网上查些资料，了解这个概念的来龙去脉，网络，维基网络上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对Ajax有良好的封装，编程并不复杂。 f）了解浏览器差异性。这部分包括CSS和js两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。 3、HTML5和CSS3 。HTML5规范已经于2014年10月28日发布了，移动端HTML5和CSS3已经得到了非常广泛的使用，必知必会呀。代码层面有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。 1）易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是CSS,HTML,js。对于js代码，你最好了解设计模式，重构，MVC等内容。 2）可测性。 3）高性能。必读《高性能Javascript》 4）低流量。移动端关注比较多。工程层面前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。然后呢？以上内容只是简单说了前端学习的顺序。对于前段开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。 1、交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。 2、后端。应该说前段工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，入手难度比较低的应该是PHP了。这部分由可分为基于页面，基于框架两种。大型项目都是基于框架开发的，建议至少了解一个MVC框架，比如PHP的Ci、Yii、Yaf 等，好还框架的设计思想都大同小异。如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。 3、Android和IOS开发。时至今日，前端的工作领域已经非常广泛，native的界面开发本质上也是前端开发，个大公司都面临着Native环境和web环境页面同时维护的问题，如果能够在技术上得到统一，将会有巨大的价值。对于学有余力的同学，应该了解Native开发的基本流程，至少了解到界面构建的技术。哈哈，上面的教程其实小编也看不大懂，如果你对前端开发有兴趣，如果你想成为前端开发大神，不妨可以借鉴下！

⑶ 怎么学习前端开发求推荐学习路线

基础知识
1、
HTML + CSS 这部分建议在线教程上学习，边学边练.
之后可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《Head First HTML 与 CSS
中文版》，这本书讲的太细了，我没能拿出耐心细读。你可以根据情况斟酌。
2、Javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，建议看《Javascript语言精粹》，JS是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟
粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。
有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。
1、CSS。必看《精通CSS》，看完这本书你应该对：盒子模型，流动，Block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《CSS艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。
2、Javascript。上面提到内容还不足以让你胜任JS编程。在有了基础之后，进一步学习内容包括：
a）框架。
推荐jQuery，简单易用，上手jQuery即可完成一些简单的项目。学习方法也很简单，照着产品文档做
几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与Web开发学习的精髓部分。补充：可以使用
Codecademy 学习 Javascript，jQuery，用户体验真的很好（感谢 TonyOuyang ）。
b） Javascript 语言范式
。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。Javascript不完全是一个面向对象的语言，它的很多
设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。
Javascript的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要
理解，维基网络，网络会是你的帮手，另外推荐《Object Oriented
Javascript》，应该有中文版。对与函数式编程我了解的也不系统，不好多说，可以自己网络一下。
c） Javascript 语言内部机制。必须弄清如下概念：JS
中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式
下，‘this’指向的是谁。这部分内容你会在《Javascript语言精粹》中详细了解。另外，你必须理解 json。
d） dom编程，这个Web前端工程师的核心技能之一。必读《Dom编程艺术》，另外《高性能 Javascript》这本书中关于dom编程的部分讲的也很好。
e） Ajax编程，这是另一核心技术。Ajax建议在网上查些资料，了解这个概念的来龙去脉，网络，维基网络上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对Ajax有良好的封装，编程并不复杂。
f）了解浏览器差异性。这部分包括CSS和js两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。
3、HTML5和CSS3 。HTML5规范已经于2014年10月28日发布了，移动端HTML5和CSS3已经得到了非常广泛的使用，必知必会呀。

再进一阶 · 代码层面：
有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。
1）易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是CSS,HTML,js。对于js代码，你最好了解设计模式，重构，MVC等内容。
2）可测性。
3）高性能。必读《高性能Javascript》
4）低流量。移动端关注比较多。
5）对于想要学习前端的同学，尤其是自学的伙伴，自学并非永久的，假如没有定力的还是找个培训机构吧。
再进一阶 · 工程层面：
前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。

⑷ 如何系统地学习前端

目前入门前端的人群分类

1、计算机相关专业出身系统走过计算机的理论基础，比如计算机组成原理、操作系统原理、计算机网络、算法数据结构、设计模式，至少用过两门以上编程语言（强类型+弱类型）。

优点：理论、架构方面扎实，有整体计算机思维，内功不错，外功学起来比较快。

缺点：部分人，前端相关细节技术不扎实，不过花时间能很快搞定。

2、非计算机出身自学（也包括计算机专业没好好学的）理论基础薄弱，后来因个人兴趣或者职业需求，自学前端开发技能。

优点：自学能力比较强，能够根据自己的兴趣规划学习内容。

缺点：部分人对前端没有整体的学习框架，属于东一片，西一片，不成体系，部分人计算机没有整体思维，建议系统梳理下前端知识体系结构，该补的还是要补起来。

门前端时的一些困境

1、因一些基础算法、数据结构理论不扎实导致一些编程思维难于理解。比如原型链，如果清楚数据结构中链表结构，那么这个东西不难理解，再比如哈希值，懂得数据结构中哈希表，哈希值也就迎刃而解。

2、计算机体系结构、操作系统理论、网络理论不扎实导致到后期一些东西难于理解。比如有同学从前端学习入手，后来学习node开发，在 I/O ,进程、线程、IPC 、线程锁方面有些概念就比较难于理解，而导致不能很好得使用node 的api 。

3、前端整体体系架构没有做过深入思考。

导致用会用，但不知道为什么用，用另外一个有什么区别。

4、学习环境中无高手。

没有高手能够指导自己进入下一个层次。

5、有意识但是没有行动我的网盘收集了一堆资料或者一堆视频，然后就没有然后了。

如何系统学习前端

网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。如果你现在是零基础学员，大致可以按如下思路学习系统学习：

基础部分

1、HTML + CSS 这部分学习，可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《Head First HTML 与 CSS 中文版》，这本书讲的太细了，我没能拿出耐心细读。你可以根据情况斟酌。

2、Java 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，建议马上看《Java语言精粹》，JS是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。

进阶部分

有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。

1、CSS。必看《精通CSS》，看完这本书你应该对：盒子模型，流动，Block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《CSS艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。

2、Java。上面提到内容还不足以让你胜任JS编程。在有了基础之后，进一步学习内容包括：

a）框架。

推荐jQuery，简单易用，学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与Web开发学习的精髓部分。补充：可以使用 Codecademy 学习 Java，jQuery，用户体验真的很好（感谢 TonyOuyang ）。

b） Java 语言范式。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。Java不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。

Java的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基网络，网络会是你的帮手，另外推荐《Object Oriented Java》，应该有中文版。对与函数式编程我了解的也不系统，不好多说，可以自己网络一下。

c） Java 语言内部机制。必须弄清如下概念：JS 中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this’指向的是谁。这部分内容你会在《Java语言精粹》中详细了解。另外，你必须理解 json。

d） dom编程，这个Web前端工程师的核心技能之一。必读《Dom编程艺术》，另外《高性能 Java》这本书中关于dom编程的部分讲的也很好。

e） Ajax编程，这是另一核心技术。Ajax建议在网上查些资料，了解这个概念的来龙去脉，网络，维基网络上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对Ajax有良好的封装，编程并不复杂。

f）了解浏览器差异性。这部分包括CSS和js两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。

3、HTML5和CSS3 。HTML5规范已经于2014年10月28日发布了，移动端HTML5和CSS3已经得到了非常广泛的使用，必知必会呀。

升级部分

有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。

易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是CSS,HTML,js。对于js代码，你最好了解设计模式，重构，MVC等内容。

可测性。

高性能。必读《高性能Java》

低流量。移动端关注比较多。

额外补充部分

前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。

以上内容只是简单说了前端学习的顺序。对于前端开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。

1、交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。

2、后端。

应该说前端工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，入手难度比较低的应该是PHP了。这部分由可分为基于页面，基于框架两种。大型项目都是基于框架开发的，建议至少了解一个MVC框架，比如PHP的Ci、Yii、Yaf 等，好还框架的设计思想都大同小异。如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。

3、Android和IOS开发。

时至今日，前端的工作领域已经非常广泛，native的界面开发本质上也是前端开发，个大公司都面临着Native环境和web环境页面同时维护的问题，如果能够在技术上得到统一，将会有巨大的价值。

如何才能快速入门前端

1、学习东西，自学是一种途径，然而在自学的过程中，很多人处于不知道自己不知道的状态。

2、另一种是跟着高手，开阔视野，达到知道自己不知道的境界，从而有方向，在短时期内进入到一个新的境界，节约时间成本。

⑸ 现在前端好学吗怎么学有大佬指点一下吗

现在很多女生问，学前端女生可以吗？好学吗？怎么学？

简单来说吧，现在web前端开发是很火的职业方向，很多企业都需要到这样知的人才，像一线城市有经验的前端工资会在10K+。

学前端的人近几年非常多，就业确实比较好，女生学习前端的相对也比较多，简单易学，适合计算机基础不是很好的人选择。

如果你是零基础，不要自卑，你只要认真学，征服前端没问题，如果你前端有基础，不要骄傲，因为没必要，前边还有很多的路要走，踏踏实实，努力学习，认真练习，才是王道。

零基础学习

2.1 基础知识：

HTML + CSS 这部分建议在W3school 在线教程上学习，边学边练，每章后还有小测试。之后可以模仿一些网站做些页面。要做项目，记得联系我。

Javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 W3school上学习。JS是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。

2.2 进阶：
有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。
CSS。必看《精通CSS》，看完这本书你应该对：盒子模型，流动，Block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《CSS艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。
Javascript。上面提到内容还不足以让你胜任JS编程。在有了基础之后，进一步学习内容包括：

a）框架。
推荐jQuery，简单易用，可以去尚学堂上视频简单学习js后，直接上手jQuery即可完成一些简单的项目。学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注于Web开发学习的精髓部分。

b） Javascript 语言内部机制。必须弄清如下概念：JS 中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this’指向的是谁。

c） dom编程，这个Web前端工程师的核心技能之一。

d） Ajax编程，这是另一核心技术。Ajax建议在网上查些资料，了解这个概念的来龙去脉，网络，维基网络上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对Ajax有良好的封装，编程并不复杂。
HTML5和CSS3 。HTML5规范已经于2014年10月28日发布了，移动端HTML5和CSS3已经得到了非常广泛的使用，必知必会呀。

2.3 推荐书籍：

学习前端知识，必不可少的就是书籍。

《JavaScript高级程序设计(第3版) 红皮书》，适合有一定编程经验的Web应用开发人员阅读，也可作为高校及社会实用技术培训相关专业课程的教材。

《JavaScript权威指南(第6版)》犀牛书，本书不仅适合初学者系统学习，也适合有经验的 JavaScript 开发者随手翻阅。

《JavaScript DOM编程艺术 (第2版)》，本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践，并全面探讨了HTML5以及jQuery等JavaScript库。

《CSS权威指南(第三版)》，不管你是一个有经验的Web开发人员还是一个彻底的初学者，《CSS权威指南(第3版)》都是你的CSS学习源泉。

《JavaScript设计模式》，适合JavaScript初学者、前端设计者、JavaScript程序员学习，也可以作为大专院校相关专业师生的学习用书，以及培训学校的教材。

《你不知道的JavaScript(上中下卷) 》，本书既适合JavaScript语言初学者了解其精髓，又适合经验丰富的JavaScript开发人员深入学习。

《Vue.js权威指南》，该书内容全面，讲解细致，示例丰富，适用于各层次的开发者。

⑹ 前端开发的基本方法

CSS部分

盒子边倾斜

clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);

禁止点击事件/鼠标事件“穿透”

div * { pointer-events: none; /*链接啊，点击事件啊，都没有效果了*/ }

用来控制元素在移动设备上使用滚动回弹效果

.main{
-webkit-overflow-scrolling: touch;
}

可解决在IOS中使用overflow:auto 形成的滚动条，滚动不流畅的情况

文字渐变效果

.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text; color: transparent;
}

css三角形

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;

}

实现圆弧

clip-path: ellipse(80%60% at50%40%);

JS部分

JavaScript中检测数组的方法

(1)、typeof操作符

这种方法对一些常用的类型检查没有问题，但对array和null 都判断为object
(2)、instanceof操作符

这个操作符是检测对象的原型链是否指向构造函数的prototype对象的
(3)、对象的constructor属性

const arr = []

console.log(arr.constructor === Array) // true

(4)、Object.prototype.toString

constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true

(5)、Array.isArray()

常用的字符串操作

字符串转化toString()
字符串分隔split()
字符串替换replace()
获取长度length
查询子字符串 indexOf
返回指定位置的字符串或字符串编码 charAt charCodeAt
字符串匹配 match
字符串拼接concat
字符串的切割或提取slice() substring() substr()
字符串大小写转化 toLowerCase toUpperCase
字符串去空格 trim() 用来删除字符串前后的空格

其中第9中三者的区别如下：
（1）slice(), 参数可以是负数，负数表示从字符串最后一个位置开始切割到对应结束位置
（2）substring()，参数不可为负数，切割第一个位置到第二个位置的字符串
（3）substr()，参数可以是负数，第一个参数是开始位置，第二个参数为切割的长度
字符串去重

const str = '11122223333'const uniqueStr = [...new Set(str)].join('')

常用的数组操作

1、Array.map()
此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组
2、Array.forEach()
此方法是将数组中的每个元素执行传进提供的函数，没有返回值，注意和map方法区分
3、Array.filter()
此方法是将满足条件的元素作为一个新数组返回
4、Array.every()
此方法将数组所有元素进行判断返回一个布尔值，如果所有元素都符合判断条件，则返回true，否则返回false
5、Array.some()
此方法将数组所有元素进行判断返回一个布尔值,如果有一个元素满足判断条件，则返回true，所有元素都不满足则返回false
6、Array.rece()
此方法为所有元素调用返回函数
7、Array.push()
在数组最后面添加新元素
8、Array.shift()
删除数组第一个元素
9、Array.pop()
删除数组最后一个元素
10、Array.unshift()
在数组最前面增加元素
11、Array.isArray()
判断是否为一个数组
12、Array.concat()
数组拼接
13、Array.toString()
数组转化为字符串
14、Array.join()
数组转化为字符串，并用第一个参数作为连接符
15、Array.splice(开始位置，删除个数，元素)
其中rece使用方法为：

arr.rece(callback,[initialValue])

跳过第一个索引。如果提供initialValue，从索引0开始。

callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 rece 的数组） initialValue （作为第一次调用 callback 的第一个参数。）
如果没有提供initialValue，rece 会从索引1的地方开始执行 callback 方法，

数组去重：

const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]

常用对象方法

1、Object.assign()
用于克隆，两个参数，将第二个对象分配到第一个中
2、Object.is()
用于判断两个值是否相同
//注意，该函数与==运算符不同，不会强制转换任何类型，应该更加类似于===，但值得注意的是它会将+0和-0视作不同值
3、Object.keys()
用于返回对象可枚举的属性和方法的名称，返回一个属性或方法名称的字符串数组。
4、Object.defineProperty()
劫持变量的set和get方法,将属性添加到对象，或修改现有属性的特性

var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //该属性是否可枚举})

5、Object.defineProperties()
可添加多个属性,与Object.defineProperty()对应,
6、isPrototypeOf

function a(){}

var b = new a();console.log(a.prototype.isPrototypeOf(b));//true

安卓监听可视区域变化，让输入框移动至可视区域

if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();

}, 0);

}

});

};

vue中平滑滚动到某个位置

this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })

向URL追加参数

* 向URL追加参数

* @function stringifyUrlArgs

* @param {string} url - URL路径

* @param {object} params - 参数对象

* @return {string}

const stringifyUrlArgs = (url, params) => {

url += (/?/).test(url) ? '&' : '?'

url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url

}

解析URL参数

* 解析URL参数

* @function parseUrlArgs

* @param {string} url - 字符串

* @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {

a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a

}, {}) return args

}

好用的JavaSrcipt库与模块（包）

日期时间处理库

1、monent.js
2、day.js
day相对于monent要轻量许多

高精度数学运算

number-precision

NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio

实用工具库

Lodash
lodash 是一个 JavaScript 实用工具库，提供一致性，及模块化、性能和配件等功能。
Lodash 消除了处理数组的麻烦，从而简化了 JavaScript、数字、对象、字符串等

⑺ 前端为什么用call方法

因为是公用的方法。
js中call是调用一个对象的一个方法，以另一个对象替换当前对象。call方法是Function类原型上的一个公共方法，所以要用这个。

⑻ javascript中apply，call和bind的区别

有点绕的，下面用代码说明一下这三个函数的区别吧：

varname='global';
varperson={
name:'zero'
};
//输出姓名、年龄和职业
functionprintInfo(age,job){
console.log(this.name,age,job);
}
//直接调用
printInfo(20,'前端工程师');
//打印：global20前端工程师
//因为默认的上下文是window，所以this.name是全局定义的global，如果我们想打印出来zero的话，就需要改变函数执行的上下文
printInfo.call(person,20,'前端工程师');
printInfo.apply(person,[20,'前端工程师']);
//这两种方式是一样的，第一个参数都是传进去的上下文，this.name取的是person.name，所以打印出来的名字就是zero了，后面的为age和job，只是参数传递的方式不一样，apply比较特殊，把要传的参数放在数组里面
//而bind和以上两种有区别，bind是es5定义的新方法，用来返回一个有自己上下文的函数，用法也比较类似：
printInfo.bind(person)(20,'前端工程师');
//printInfo.bind(person)这一块是返回的以peron为上下文的函数，后面的(20,'前端工程师')是函数调用

⑼ 如何理解JavaScript中的caller，callee，call，apply 前端设计

在提到上述的概念之前，首先想说说javascript中函数的隐含参数：arguments
Arguments —— 该对象代表正在执行的函数和调用它的函数的参数。
[function.]arguments[n]
参数
function ：选项。当前正在执行的 Function 对象的名字。
n ：选项。要传递给 Function 对象的从0开始的参数值索引。

说明
Arguments是进行函数调用时，除了指定的参数外，还另外创建的一个隐藏对象。Arguments是一个类似数组但不是数组的对象，说它类似数组是因为其具有数组一样的访问性质及方式，可以由arguments[n]来访问对应的单个参数的值，并拥有数组长度属性length。
还有就是arguments对象存储的是实际传递给函数的参数，而不局限于函数声明所定义的参数列表，而且不能显式创建 arguments 对象。
arguments 对象只有函数开始时才可用。
下边例子详细说明了这些性质:

//arguments 对象的用法。
function ArgTest(a, b){
var i, s = "The ArgTest function expected ";
var numargs = arguments.length; // 获取被传递参数的数值。
var expargs = ArgTest.length; // 获取期望参数的数值。
if (expargs < 2)
s += expargs + " argument. ";
else
s += expargs + " arguments. ";
if (numargs < 2)
s += numargs + " was passed.";
else
s += numargs + " were passed.";
s += "\n\n"
for (i =0 ; i < numargs; i++){ // 获取参数内容。
s += " Arg " + i + " = " + arguments[i] + "\n";
}
return(s); // 返回参数列表。
}
在此添加了一个说明arguments不是数组(Array类)的代码:
Array.prototype.selfvalue = 1;
alert(new Array().selfvalue);
function testAguments(){
alert(arguments.selfvalue);
}
运行代码你会发现第一个alert显示1，这表示数组对象拥有selfvalue属性，值为1，而当你调用函数testAguments时，你会发现显示的是“undefined”，说明了不是arguments的属性，即arguments并不是一个数组对象。

现在开始caller，callee，call，apply：
caller：返回一个对函数的引用，该函数调用了当前函数。
functionName.caller functionName 对象是所执行函数的名称。

说明
对于函数来说，caller属性只有在函数执行时才有定义。如果函数是由顶层调用的，那么 caller 包含的就是 null 。
如果在字符串上下文中使用 caller 属性，那么结果和functionName.toString 一样，也就是说，显示的是函数的反编译文本。
下面的例子说明了 caller 属性的用法：
// caller demo {
function callerDemo() {
if (callerDemo.caller) {
var a= callerDemo.caller.toString();
alert(a);
} else {
alert("this is a top function");
}
}
function handleCaller() {
callerDemo();
}
//输出结果：
function handleCaller() {
callerDemo();
}

callee —— 返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文。
[function.]arguments.callee
可选项 function 参数是当前正在执行的 Function对象的名称。

说明
callee属性的初始值就是正被执行的 Function 对象。
callee属性是 arguments 对象的一个成员，它表示对函数对象本身的引用，这有利于匿名
函数的递归或者保证函数的封装性，例如下边示例的递归计算1到n的自然数之和。而该属性
仅当相关函数正在执行时才可用。还有需要注意的是callee拥有length属性，这个属性有时候
用于验证还是比较好的。arguments.length是实参长度，arguments.callee.length是
形参长度，由此可以判断调用时形参长度是否和实参长度一致。
示例
//callee可以打印其本身
function calleeDemo() {
alert(arguments.callee);
}
//用于验证参数
function calleeLengthDemo(arg1, arg2) {
if (arguments.length==arguments.callee.length) {
window.alert("验证形参和实参长度正确！");
return;
} else {
alert("实参长度：" +arguments.length);
alert("形参长度： " +arguments.callee.length);
}
}
//递归计算
var sum = function(n){
if (n <= 0)
return 1;
else
return n ＋arguments.callee(n - 1)
}
比较一般的递归函数：
var sum = function(n){
if (1==n) return 1;
elsereturn n + sum (n-1);
调用时：alert(sum(100));
其中函数内部包含了对sum自身的引用，函数名仅仅是一个变量名，在函数内部调用sum即相当于调用一个全局变量，不能很好的体现出是调用自身，这时使用callee会是一个比较好的方法。

apply and call：它们的作用都是将函数绑定到另外一个对象上去运行，两者仅在定义参数方式有所区别：
apply(thisArg,argArray);
call(thisArg[,arg1,arg2…] ]);
即所有函数内部的this指针都会被赋值为thisArg，这可实现将函数作为另外一个对象的方法运行的目的

apply的说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisArg任何一个参数，那么 Global 对象将被用作 thisArg，
并且无法被传递任何参数。

call的说明：
call方法可将一个函数的对象上下文从初始的上下文改变为由 thisArg指定的新对象。
如果没有提供 thisArg参数，那么 Global 对象被用作 thisArg
相关技巧：
应用call和apply还有一个技巧在里面，就是用call和apply应用另一个函数（类）以后，当前的函数（类）就具备了另一个函数（类）的方法或者是属性，这也可以称之为“继承”。
看下面示例:
// 继承的演示
function base() {
this.member = " dnnsun_Member";
this.method = function() {
window.alert(this.member);
}
}
function extend() {
base.call(this);
window.alert(member);
window.alert(this.method);
}

上面的例子可以看出，通过call之后，extend可以继承到base的方法和属性。
顺便提一下，在javascript框架prototype里就使用apply来创建一个定义类的模式，
其实现代码如下：
var Class = {
create: function() {
returnfunction() {
this.initialize.apply(this, arguments);
}
}
}
解析：从代码看,该对象仅包含一个方法：Create，其返回一个函数，即类。但这也同时是类的
构造函数，其中调用initialize，而这个方法是在类创建时定义的初始化函数。通过如此途径，
就可以实现prototype中的类创建模式
示例：
var vehicle=Class.create();
vehicle.prototype.initialize= function(type)
{
this.type=type;
}
vehicle.prototype.showSelf= function()
{
alert("this vehicle is "+ this.type);
}

var moto=new vehicle("Moto");
moto.showSelf();

你自己看看吧，此文章转自：http://www.cnblogs.com/ghost-draw-sign/articles/1530108.html

⑽ 前端什么时候用的到继承了

1、继承第一种方式：对象冒充2、继承第二种方式：call()方法方式call方法是Function类中的方法 call方法的第一个参数的值赋值给类(即方法)中出现的this call方法的第二个参数开始依次赋值给类(即方法)所接受的参数3、继承的第三种方式：apply()方法方式apply方法接受2个参数， A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数4、继承的第四种方式：原型链方式实现原理是使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承5、继承的第五种方式：混合方式混合了call方式、原型链方式

call前端

与call前端相关的内容