原生JavaScript
夏草v
前端工程师
展开
-
js操纵数组的技巧
操纵数组的技巧数组常用的方法一、数组更改方法常见的数组移入移除方法如以下,一般会用以下方法模拟数据结构中对栈和队列1、push()和pop()尾部操作push(): 在数组末尾添加元素,返回数组长度,会改变原数组pop(): 删除数组最后一项,返回删除的元素,会改变原数组会直接改变原数组2、shift()和unshift()头部操作shift(): 删除数组的第一项,返回删除元素的值,会改变原数组unshift(): 在数组第一项前面添加元素,返回添加后数组长度,会改变原数原创 2020-10-08 17:05:34 · 252 阅读 · 0 评论 -
JavaScript函数式编程(3)
JavaScript函数式编程(1)内置方法灵活使用JavaScript函数式编程(2)前面两篇文章有提到几个原则尽量不要定义变量,就算定义也最好使用const且保证定义变量后不再更改尽量使用官方自带的API很多面试者或ES5重度使用者 长期使用for 循环,但是你在阅读一些优质框架源码时会发现基本会被map filter reduce forEach代替,尽管很多人证明for循环或者多次定义变量对性能并没什么影响,反而函数式编程会牺牲一点性能,并以此为理由排斥函数式编程。针对以上疑原创 2020-07-26 22:24:51 · 245 阅读 · 0 评论 -
JavaScript函数式编程(2)
函数式编程主要是利用函数等特性,即给一个确定的输入总能保证相同的输出,函数只做一件事情等等,让代码看起来更简短且维护性更高(但很容易出现反效果导致被喷)。上一篇文章主要介绍js中 map/filter/reduce/sort/some等js数组操作方法。我在最初接触函数式编程时,也感到很疑惑,函数式编程和这几个ES的API方法有啥关系,直到最近跳槽,公司内以为前端技术专家反复强调 一般情况不允许直接修改变量,尤其是一些数组和对象,尽可能不要使用深拷贝;主要有以下原因防止拷贝后的对象会..原创 2020-07-13 01:29:28 · 211 阅读 · 0 评论 -
前端重新学习(19)JavaScript 特效之三大家族offset偏移-scroll滚动-client可视区
部分摘自 https://www.cnblogs.com/sj1988/p/6600829.htmlhttps://blog.csdn.net/k491022087/article/details/52629743https://blog.csdn.net/carriehaohao/article/details/60597628三大系列:offset(偏移)、scroll(滚动...原创 2018-09-07 16:09:42 · 406 阅读 · 0 评论 -
前端重新学习(0)JavaScript-理解 面向对象的程序设计
什么是面向对象http://shem.xin/article-5本文结构 创建对象对象的继承(有些不是很理解-后续会更新) 官方定义:对象是拥有属性和方法的数据。对象和函数比较: 函数是用来实现具体功能的代码,用一种方式把他们组织起来,就是函数了。 对象是有属性和方法的一个东西,...转载 2018-09-23 11:02:34 · 222 阅读 · 0 评论 -
前端重新学习(16)DOM基础
JavaScript由三部分组成 ECMAScript+DOM+BOM组成DOM的学习分为三块,1.DOM基础 2.DOM进阶( Selectors API和的 Element Traversal (元素遍历)规范,)3.DOM、DOM2DOM3的改进DOM(文档对象模型)是针对 HTML和 XML文档的一个 API(应用程序编程接口)。DOM描 绘了一个层次化的节点树,允许开发人...原创 2018-09-19 19:44:49 · 507 阅读 · 0 评论 -
前端重新学习(18)javascipt之ajax Get与Post代码封装
原生JavaScript对Ajax中的Get和Post进行封装原生的Ajax封装 xml格式的php发送和js处理 json格式的php发送和js处理已经封装的Ajax:myAjax2.js 调用格式和JQ的ajax类似/*调用格式*/ ajax({ type:"get", url:"12-ajax-json.php", ...原创 2018-09-22 11:10:50 · 241 阅读 · 0 评论 -
Html5移动端布局及(rem布局)页面自适应布局详解(转)
转载自https://www.cnblogs.com/yanayana/p/7066948.html有部分改动和我的总结笔记常见的页面布局方式有,静态布局 px布局 流式布局(Liquid Layout) 主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用) 自适应布局(Adaptive Layout) 即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围 ...转载 2018-10-06 21:36:02 · 26490 阅读 · 1 评论 -
Javascript的内存管理、性能问题和垃圾回收
垃圾回收机制JavaScript 具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。 而在 C和 C++之类的语言中,开发人员的一项基本任务就是手工跟踪内存的使用情况,这是造成许多问 题的一个根源。在编写 JavaScript 程序时,开发人员不用再关心内存使用问题,所需内存的分配以及无 用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实很简单:找出那些不再继...转载 2018-10-13 14:12:42 · 187 阅读 · 0 评论 -
前端难点汇总/面试高频知识点链接
js跨域https://www.jianshu.com/p/1b1842fdfd73web优化 https://www.cnblogs.com/liulilin/p/7245125.html前端知识点-面试技巧集合 http://www.fed123.com/2016_web_front/http协商缓存VS强缓存 https://www.cnblogs.com/wonyun/p/5524...原创 2018-10-13 17:07:19 · 1532 阅读 · 0 评论 -
js中call,apply和bind方法的区别和使用场景
原地址https://blog.csdn.net/yaojxing/article/details/71942496在js中,所有的函数再被调用的时候都会默认传入两个参数,一个是this,还有一个是arguments。在默认情况下this都是指当前的调用函数的对象。但是有时候我们需要改变this的指向,也就是说使函数可以被其他对象来调用,那么我们应该怎样做呢?这时候我们就可以使用call,...转载 2018-10-07 12:58:51 · 212 阅读 · 0 评论 -
Javascript中闭包的作用
闭包是什么干啥的 我就不细讲了 随便搜很多,我就一句话说下:一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。目录闭包的参数传递函数节流中使用作用域作用域链高级排他中使用 具体的表现形式 就是一个函数尾部有return 输出一个函数,利用这个输出函数把当前函数的局部变量带出来,如下所示:function test1() ...原创 2018-10-13 16:44:04 · 819 阅读 · 1 评论 -
JavaScript总结学习一:js中构造函数与普通函数的区别
转自https://www.cnblogs.com/cindy79/p/7245566.html构造函数不仅只出现在JavaScript中,它同样存在于很多主流的程序语言里,比如c++、Java、PHP等等。与这些主流程序语言一样,构造函数在js中的作业一样,也是用来创建对象时初始化对象,并且总与new运算符一起使用。在js中,构造函数与普通函数的区别不是很大。接下来就主要讲讲两者的区...转载 2018-10-08 13:45:10 · 397 阅读 · 0 评论 -
前端重新学习(17)DOM 扩展
DOM的两个主要扩展Selectors API(选择符 API) HTML5 Element Traversal (元素遍历)规范 专有的DOM扩展 虽然 DOM为与 XML及 HTML文档交互制定了一系列核心 API,但仍然有几个规范对标准的 DOM 进行了扩展。这些扩展中有很多原来是浏览器专有的,但后来成为了事实标准,于是其他浏览器也都提 供了相同的实现。介绍的三个这方面的规...转载 2018-09-20 11:49:03 · 226 阅读 · 0 评论 -
前端重新学习(12)javascipt之ajax代码实例(3)
Ajax-请求Github真实接口api接口详情见https://study.163.com/course/courseMain.htm?courseId=1004570051 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&原创 2018-08-16 17:58:39 · 182 阅读 · 0 评论 -
前端重新学习(14)DOM中的事件(上)
来源 《Javascript高级程序设计》 笔记JavaScript与HTML之间的交互是通过事件实现的。事件:文档或浏览器窗口中发生的一些特定的交互瞬间。就是文档或浏览器窗口中发生的一些 特定的交互瞬间。可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代 码。这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript代码)与页 面的外观(H...转载 2018-08-21 23:00:14 · 199 阅读 · 0 评论 -
前端重新学习(15)DOM中的事件(下)
来源 《Javascript高级程序设计》 笔记目录事件类型UI事件焦点事件鼠标与滚轮事件键盘与文本事件复合事件变动事件HTML5事件设备事件触摸与手势事件内存和性能事件委托移除事件程序模拟事件DOM中的事件模拟1. 模拟鼠标事件2. 模拟键盘事件 3. 模拟其他事件 4. 自定义 DOM事件IE中的事件模拟...转载 2018-08-21 23:00:05 · 653 阅读 · 0 评论 -
前端重新学习(13)javascipt之ajax代码实例(4)
Ajax请求PHP接口 获取php接口数据,以及利用get 、post向向数据库写入数据自己写接口接收数据详情见https://study.163.com/course/courseMain.htm?courseId=1004570051 首先向后台服务器发送数据 以下为html代码ajax4.html<!DOCTYPE html><...原创 2018-08-16 18:45:47 · 191 阅读 · 0 评论 -
前端重新学习(10)javascipt之ajax代码实例(1)
本文主要讲述在Ajax请求过程中xhr.onprogress以及两种方法的区别与使用实例和源码将在wamp64上面进行测试,编辑器使用sublime3详情见https://study.163.com/course/courseMain.htm?courseId=1004570051 Ajax在客戶端与服务器之间的关系 XMLHTTPReques...原创 2018-08-16 15:49:58 · 192 阅读 · 0 评论 -
前端重新学习(7)Javascipt 之json
来源 《Javascript高级程序设计》 笔记JSON是一个轻量级的数据格式,可以简化表示复杂数据结构的工作量。JSON使用 JavaScript语法 的子集表示对象、数组、字符串、数值、布尔值和 null。即使 XML也能表示同样复杂的数据结果,但 JSON没有那么烦琐,而且在 JavaScript中使用更便利。 ECMAScript 5定义了一个原生的 JSON 对象,可以用...转载 2018-08-13 13:55:31 · 191 阅读 · 0 评论 -
前端重新学习(6)HTML DOM 核心(Core) DOM区别与联系
部分摘自书籍、教学视频、w3c、百度 什么是DOM?DOM (Document Object Model文档对象模型)是 W3C(万维网联盟)的标准。DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”W3C DOM 标准被分为 3 个不同的部分:核心...转载 2018-07-27 22:24:33 · 1697 阅读 · 0 评论 -
前端重新学习(4) Cookie
来源《Javascript高级程序教程》笔记JavaScript CookieCookie 用于存储 web 页面的用户信息。什么是 Cookie?Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。Cookie 的作用就是用于解决 "如何记录客户端的用户信息":当用户访问 ...转载 2018-07-25 09:42:15 · 154 阅读 · 0 评论 -
前端重新学习(2)基本包装类型
JS 3 个特殊的引用类型:Boolean、Number 和 String。这些类型与其他引用类型相似,但同时也具有与各自的基本类型相应的特殊行为。 实际上,每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象, 从而能够调用一些方法来操作这些数据。 基本包装类型概述var box='Mr.Lee'; //定义一个字符串 var box2= box.subst...原创 2018-07-24 16:26:42 · 281 阅读 · 0 评论 -
前端重新学习(3)浏览器对象模型 (BOM)
来源《Javascript高级程序教程》笔记JavaScript Window - 浏览器对象模型什么是BOM?浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。用来获取或设置浏览器的属性、行为,例如:新建窗口、获取屏幕分辨率、浏览器版本号等。浏览器对象模型(Browser Object Model (BOM))尚无正式标准。由于现代浏览器已经(...转载 2018-07-24 20:59:13 · 336 阅读 · 0 评论 -
前端重新学习(1)JS 对象和数组
对象和数组的区别 ”数组”(array)和”对象”(object)的根本区别在哪里,两者都可以用来表示数据的集合。 比如有一个数组a=[1,2,3,4],还有一个对象a={0:1,1:2,2:3,3:4},然后你运行alert(a[1]),两种情况下的运行结果是相同的!这就是说,数据集合既可以用数组表示,也可以用对象表示,那么我到底该用哪一种呢?数组表示有序数据的集合,而...原创 2018-07-24 15:04:16 · 427 阅读 · 0 评论 -
前端重新学习(8)Javascipt 之表单
来源 《Javascript高级程序设计》 笔记JavaScript最初的一个应用,就是分担服务器处理表单的责任,打破处处依赖服务器的局面。尽 管目前的 Web 和 JavaScript已经有了长足的发展,但 Web 表单的变化并不明显。目录表单基础表单提交表单重置表单字段文本框脚本选择文本过滤输入自动切换焦点HTML5约束验证API选择框脚...转载 2018-08-13 22:00:40 · 889 阅读 · 0 评论 -
前端重新学习(9)javascipt之ajax深度概念
2005 年,Jesse James Garrett 发表了一篇在线文章,题为“Ajax: A new Approach to Web Applications”(http://www.adaptivepath.com/ideas/essays/archives/000385.php)。 他在这篇文章 里介绍了一种技术,用他的话说,就叫 Ajax,是对 Asynchronous JavaScri...转载 2018-08-15 20:47:07 · 386 阅读 · 0 评论 -
前端重新学习(11)javascipt之ajax代码实例(2)
本文主要讲述在Ajax请求json的实例实例和源码将在wamp64上面进行测试,编辑器使用sublime3详情见https://study.163.com/course/courseMain.htm?courseId=1004570051Ajax常规4步 ajax.html<!DOCTYPE html><html lang="en">&l...原创 2018-08-16 17:53:31 · 238 阅读 · 0 评论 -
前端重新学习(5)DOM与DOM2、DOM3区别以及DOM2新特性
------------摘抄自他人笔记(http://itbilu.com/javascript/js/Vyxodm_1g.html、https://blog.csdn.net/pxy_lele/article/details/49755071)感谢分享----------------------目录DOM0、DOM1、DOM2、DOM3的区别DOM0DOM0与DHTML...转载 2018-08-30 17:42:17 · 4941 阅读 · 0 评论