javascript高级程序设计
javascript高级程序设计学习笔记
luckybing~
一个积极向上、乐观开朗、遇到Bug想一晚上、没秃顶、会写段子的web前端工程师
展开
-
浏览器缓存
1. 监听 storage 变动 (跨页签通信)window.addEventListener('storage', (event) => { console.log(event.newValue) })必须是同源的两个页面,拿vue脚手架为例index.vue:<template> <div class="hello"> <input type="text" v-model="name"> <but原创 2020-09-13 11:03:24 · 2261 阅读 · 0 评论 -
(二十五) 新兴的API
1. requestAnimationFramerequestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲,如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次,如果刷新率是75Hz,那么这个时间间隔就变成了1000/75=13.3ms,换句话说就是,requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕...原创 2020-05-03 14:21:03 · 148 阅读 · 0 评论 -
(二十三) 离线应用与客户端存储
1. 离线检测返回boolean值, 表示是否在线navigator.onLine网络状态监听<script> // 如果离线变在线 window.addEventListener('online', () => { console.log('online') }) // 如果在线变离线 window.add...原创 2020-05-02 20:55:46 · 137 阅读 · 0 评论 -
(二十四)最佳实践
1. 性能相关 --- (避免全局查找)<script> var imgList = document.getElementsByTagName('img') for (var i = 0; i < imgList.length; i++) { imgList[i].alt = i } </script>以上这段代码是...原创 2020-05-02 12:35:09 · 121 阅读 · 0 评论 -
(十三)事件 input输入值符合条件 自动获取下一个input焦点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自动获取焦点</title...原创 2020-04-08 11:29:48 · 326 阅读 · 0 评论 -
(十三)事件
1. 取消事件var oWrapper = document.getElementById('wrapper')// 绑定事件oWrapper.onclick = function () { console.log(1)}// 取消事件oWrapper.onclick = nullfunction handler () { console.log(1)}// 绑定事...原创 2020-04-07 15:08:22 · 118 阅读 · 0 评论 -
(十二) DOM2和DOM3
1. js操纵css样式特例float: 改变或者取值时应是 cssFloat<body> <div id="wrapper" style='float: left'>1</div> <script> var oWrapper = document.getElementById('wrapper') console....原创 2020-04-06 12:16:29 · 95 阅读 · 0 评论 -
(十)DOM
1. 文档信息(1)获取url: document.url(2)window.location.href 与 document.url 的区别:2.1 document表示的是一个文档对象,window表示的是一个窗口对象,一个窗口下可以有多个文档对象。所以一个窗口下只有一个window.location.href,但是可能有多个document.url2.2 wind...原创 2020-04-03 10:22:58 · 125 阅读 · 0 评论 -
(八) BOM
1. 尝试访问未声名的变量会抛出错误,但是通过查询window对象,可以知道可能未声名的变量是否存在<script> console.log(value) // Uncaught ReferenceError: value is not defined console.log(window.value) // undefined</script>2. l...原创 2020-03-31 15:56:49 · 163 阅读 · 0 评论 -
(二十二) 高级函数
1. 类型检测<script> // 判断是否为数组 function isArray(value) { return Object.prototype.toString.call(value) == '[object Array]' } // 判断是否为函数 function isFunction(value) { ...原创 2020-05-02 10:52:25 · 168 阅读 · 0 评论 -
(二十) 跨域资源访问
1. CORS:基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定是响应成功还是响应失败。Access-Control-Allow-Origin: http://www.nczonline.net2. JSONP:JSON with padding ( JSON填充 ) ,jsonp 由两部分组成,回调函数和数据回调函数是当响应来时,在页面中调用的函数,回...原创 2020-05-01 23:31:24 · 183 阅读 · 0 评论 -
(二十) JSON
1. JSON 定义:JSON 是 JavaScript 的一个严格的子集,利用了 JavaScript 的一些模式来表示数据化结构。JSON 是一种数据格式,并不从属于 JavaScript,很多语言都有对JSON 的解析器2. JSON的语法可以表示3种值:字符串、数组、对象3. JSON表示字符串必须使用“双引号”,如果使用单引号会发生语法错误4. JSON 表示对象:属...原创 2020-05-01 17:42:32 · 181 阅读 · 0 评论 -
(十七)错误处理与调试
1. try-catch-finallytry { // 可能会导致错误的代码} catch (error) { // 错误发生时如何处理} finally { // 无论 成功还是失败都会执行的处理}例子:try 返回0 finally 返回2 最终返回2<script> function test () { try { ...原创 2020-05-01 14:56:16 · 216 阅读 · 0 评论 -
历史状态管理
<body> <button id='btn'>跳转</button> <button id='replace'>跳转replace</button> <script> // history.pushState 不能跨域 var oButton = document.getElementById(...原创 2020-04-30 11:37:03 · 170 阅读 · 0 评论 -
(十一) DOM扩展
1. 元素遍历(1)childElementCount:返回子元素(不包括文本节点和注释)的个数(2)firstElementChild:指向第一个子元素(3)lastChildElement:指向最后一个子元素(4)previousElementSibling:指向前一个兄弟元素(5)nextElementSibling:指向后一个兄弟元素<body> ...原创 2020-04-06 09:14:33 · 127 阅读 · 0 评论 -
(七)函数表达式
1. 匿名函数执行环境具有全局性var name = 'window'var object = { name: 'my object', getNameFun: function (){ console.log(this) // object return function () { console.log(this) // 匿名函数执行环境具有全...原创 2020-03-30 10:46:12 · 156 阅读 · 0 评论 -
(六) 面向对象的程序设计
1. Object.getOwnPropertyDescriptor// 取得给定属性的描述符 需要接受两个参数,一个是对象,一个是读取其描述符的属性名称 var obj = { year: 2020 } let descriptor = Object.getOwnPropertyDescriptor(obj, 'year') console.lo...原创 2020-03-27 15:52:17 · 123 阅读 · 0 评论 -
(五)引用类型
1. 使用对象字面量创建对象、使用数组字面量创建数组的时候// 使用 对象字面量创建对象var person = { name: 'zhoufangbing', age: 22}不会调用 Object 的构造函数// 使用数组字面量创建数组var arr = [1, 2, 3]不会调用 Array 的构造函数new Object()、new Array()的...原创 2019-10-17 14:35:51 · 101 阅读 · 0 评论 -
(四)变量、作用域和内存问题
1. 类型检测(1)基本数据类型:typeof会返回 undefined、string、number、object、boolean(2)引用数据类型:instanceof(根据它的原型链来识别)var a = [1,2,3];console.log(a instanceof Array) // trueconsole.log(a instanceof Object) // ...原创 2019-10-16 16:36:05 · 120 阅读 · 0 评论 -
(三)基本概念
1. typeof 操作符返回 object则该变量可能是 object ,也可能是 null -------- 因为 null 被认为是一个空对象引用console.log(typeof null) // object2. 如果一个变量未声明,只能执行typeof操作,返回 undefinedconsole.log(typeof age) // undefined3. N...原创 2019-10-15 17:45:01 · 146 阅读 · 0 评论 -
(一)javascript简介、(二)在HTML中使用javascript
1. 一个完整的 javascript 实现应该由以下三个部分构成:核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)(1)核心(ECMAScript):这一部分主要是js的基本语法。(2)BOM:Brower Object Model(浏览器对象模型),主要是获取浏览器信息或操作浏览器的,例如:浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转...原创 2019-10-15 16:04:04 · 149 阅读 · 0 评论