js | 易学教程

JS高级-4：正则表达式

阅读更多关于 JS高级-4：正则表达式

正则表达式 js java c# python 学习网站 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp 概念正则表达式是为了解决字符串操作中一些比较麻烦的场景，比如字符串提取、字符串替换、字符串验证等常用于：表单验证：是否是一个数字、是一个电话号码、是一个邮箱。。。字符串替换：字符串查找正则表达式其实也是js里面的一个对象创建一个正则表达式 var reg2=new RegExp("a"); var reg1=/a/; 其中//是标记，a表示要匹配的字符正则表达式匹配 var reg=/a/; //匹配字符串中的a字符 reg.test("abc"); //正则表达式的test用来检测字符串是否满足正则表达式的要求； //由于"abc"中存在a，所以是符合要求的，所以这段代码的返回值为：true const isTrue = reg.test("coke"); //由于"coke"中不存在a字符，所以不符合条件 -->isTrue:false var reg2=/abc/; reg2.test("adbcd"); //字符串中必然存在"abc"才符合要求，所以这段代码的返回值为false reg2.test("1abc"); //true

JS高级-5：JS模块化

阅读更多关于 JS高级-5：JS模块化

模块化(切记：学习思想) 如果不用模块化编写代码，那么会具有以下问题：代码杂乱无章，没有条理性，不便于维护，不便于复用很多代码重复、逻辑重复全局变量污染不方便保护私有数据(闭包) 模块化的基本实现：闭包的自调用函数 //日期控件 var DatePicker = (function(){ return { init(){ } } })(); //Header // tabbar // login //Content // sidebar // table //Footer var KTV=(function(){ return { pay(){ }, xiaofei(){ } } })() AMD模块化 -->requireJS AMD：async module define：异步模块定义 AMD其实就是requireJS实现的模块化解决方案其他模块化解决方案： CommonJS：Node中使用的模块化解决方案 CMD（common module define）：seajs中提出来的模块化解决方案其实CMD可以认为是CommonJS的前端实现 seajs由阿里的（玉帛）编写 seajs在2，3年前比较火，从去年开始已经停止更新 vue 、angular、react已经集成了各自的模块化 es6模块化 webpack也有模块化的解决方案 vue、angular

JS设计模式（5）发布订阅模式

阅读更多关于 JS设计模式（5）发布订阅模式

什么是发布订阅模式(观察者模式)？定义：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。主要解决：一个对象状态改变给其他对象通知的问题，而且要考虑到易用和低耦合，保证高度的协作。何时使用：一个对象（目标对象）的状态发生改变，所有的依赖对象（观察者对象）都将得到通知，进行广播通知。如何解决：使用面向对象技术，可以将这种依赖关系弱化。关键代码：对于某一个topci用数组存放订阅者. 应用实例： 1、拍卖的时候，拍卖师观察最高标价，然后通知给其他竞价者竞价。 2、西游记里面悟空请求菩萨降服红孩儿，菩萨洒了一地水招来一个老乌龟，这个乌龟就是观察者，他观察菩萨洒水这个动作。优点： 1、观察者和被观察者是抽象耦合的。 2、建立一套触发机制。缺点： 1、如果一个被观察者对象有很多的直接和间接的观察者的话，将所有的观察者都通知到会花费很多时间。 2、如果在观察者和观察目标之间有循环依赖的话，观察目标会触发它们之间进行循环调用，可能导致系统崩溃。 3、观察者模式没有相应的机制让观察者知道所观察的目标对象是怎么发生变化的，而仅仅只是知道观察目标发生了变化。使用场景：一个抽象模型有两个方面，其中一个方面依赖于另一个方面。将这些方面封装在独立的对象中使它们可以各自独立地改变和复用。

JS DOM用不同方法获取节点及对节点插入、复制和移除

阅读更多关于 JS DOM用不同方法获取节点及对节点插入、复制和移除

操作节点的方法 appendChild() insertBefore() replaceChild() cloneNode() normalize() splitText() sppendChild() 追加子元素 .firstElementChild() 第一个子元素节点返回值是被操作的那个子节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var ul=document.getElementById("myul"); var txt=document.createTextNode("4"); var li=document.createElement("li"); li.appendChild(txt); var myli=ul.appendChild(li); console.log(myli);//返回值是被操作的那个子节点 // 获取到的第一个子元素被移动到了最后 var firstLi=ul

高性能网站建设指南（yahoo！14条）

阅读更多关于高性能网站建设指南（yahoo！14条）

序言压缩： Accept-Encoding <-> Content-Encoding Browser 利用本地缓存： Last-Modified <-> If-Modified-Since （ -> 304 ）：每次均会进行 http 请求确认 Expire: 在有效期内不会进行任何 http 请求 Keep-Alive: 基于单个 socket ，可以进行多个 http 请求 http1.1 管道：性能优于 Keep-Alive ，但不是所有浏览器都支持（具体待查？）减少 Http 请求 Image Map: 只能是矩形区域 Css Sprites Inline images ：基于 data:[<mediatype>][;base64],<data> ，实质就是讲图片进行编码，直接以字符串格式写入 html 或者 css 中。注意： data:[<mediatype>][;base64],<data> 可以支持 a 、 script 等所有 url 。缺点：不被 IE 支持（ IE7- ， IE8+ 待查？）；编码大小受限制合并脚本和样式表使用 Content Delivery Network 使用 Expires 头 Expires 缺点：使用一个具体的特定时间，要求服务器时间和客户端时间严格同步；服务器端过期时间需要经常检查并且更新。 Cache max

JS DOM中getElement系列和querySelector系列获取节点

阅读更多关于 JS DOM中getElement系列和querySelector系列获取节点

节点查找方法 document.getElementById() 前面必须是document document.getElementsByName() 前面必须是document ele.getElementsByTagName() 前面元素不限 ele.getElementsByClassName() 前面元素不限 querySelector() querySelectorAll() .tagName 元素名称在低版本IE中，document.getElementById() 存在bug 用来获取id或者name为指定值的元素如果某个元素的name属性值和另一个元素的id属性值相同会根据顺序选取排在前面的元素识别IE浏览器：在IE浏览器中，\V会解析成V；其他浏览器中，\V为垂直制表符（相当于空格） !+"\v1" 在IE中：!+"\v1"=!+"v1"=!NaN=true；其他浏览器中：!+"\v1"=!+" 1"=!1=false document.all是页面内所有元素的集合 document.all(0) 获取第一个元素 document.all[0] 获取第一个元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body

JS获取页面的缩放比例

阅读更多关于 JS获取页面的缩放比例

正常值为100,如果放大到150%,则显示150 //获取当前页面的缩放值 function detectZoom() { var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf('msie')) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) { ratio = window.outerWidth / window.innerWidth; } if (ratio) { ratio = Math.round(ratio * 100); } return ratio; } 来源： https://www.cnblogs.com/eternityz/p/12271942.html

js中的几种遍历方式

阅读更多关于 js中的几种遍历方式

1.for循环最常用的一种循环，常用于普通数组的遍历场景1：普通数组 var arr = [ "苹果" , "香蕉" , "雪梨" ] ; for ( var i = 0 ; i < arr . length ; i ++ ) { console . log ( arr [ i ] ) ; //打印苹果香蕉雪梨 } 场景2：数组里面装对象 var arr = [ { name : "hu" , age : 11 } , { name : "huww" , age : 20 } ] ; for ( var i = 0 ; i < arr . length ; i ++ ) { console . log ( arr [ i ] ) ; console . log ( arr [ i ] . name ) ; console . log ( arr [ i ] . age ) ; } 2.forEach循环常用于遍历对象，也就是for循环中的场景2 myArray.forEach(function (value) { console.log(value); }); 实际上forEach有三个参数分别为值下标数组本身于是我们有 [].forEach(function(value, index, array) { // … }); 对比jQuery中的$.each方法

JS获取当前时间戳的方法

阅读更多关于 JS获取当前时间戳的方法

//方法一 var timestamp = (new Date()).getTime(); console.log(timestamp); //1495302061441 //方法二 var timestamp2 = (new Date()).valueOf(); console.log(timestamp2); //1495302061447 //方法三 var timestamp3 = Date.parse(new Date()); console.log(timestamp3);//1495302061000 第一种和第二种是获取了当前毫秒的时间戳最后一种获取的时间戳是把毫秒改成000显示来源： https://www.cnblogs.com/eternityz/p/12271948.html

js排序

阅读更多关于 js排序

取出数组中最大值或最小值是开发中常见的需求，今天继续讲解如何获取javascript数组中最大和最小值。 1.排序法首先我们给数组进行排序，可以按照从小到大的顺序来排，排序之后的数组中第一个和最后一个就是我们想要获取的最小值和最大值。排序我们会用到数组的 sort 方法。 var arr = [12,56,25,5,82,51,22]; arr.sort(function (a, b) { return a-b; }); // [5,12,22,25,51,56] var min = arr[0]; // 5 var max = arr[arr.length - 1]; // 56 2.假设法假设当前数组中的第一个值是最大值，然后拿这个最大值和后面的项逐一比较，如果后面的某一个值比假设的值还大，说明假设错了，我们把假设的值进行替换。最后得到的结果就是我们想要的。 // 获取最大值： var arr = [22,13,6,55,30]; var max = arr[0]; for(var i = 1; i < arr.length; i++) { var cur = arr[i]; cur > max ? max = cur : null } console.log(max); // 55 // 获取最小值： var arr = [22,13,6,55,30]; var min

订阅 js