js代码 | 易学教程

一道考察this指向和js运行原理细节的单例模式测试题

阅读更多关于一道考察this指向和js运行原理细节的单例模式测试题

原题： var n = 2 ; var obj = { n : 30 , fn : ( function ( n ) { n *= 2 ; this . n += 2 ; var n = 5 ; return function ( m ) { this . n *= 2 ; console . log ( m + ( ++ n ) ) ; } } ) ( n ) } ; var fn = obj . fn ; fn ( 3 ) ; obj . fn ( 3 ) ; console . log ( n , obj . n ) ; 带解析的代码js var n = 2 ; var obj = { n : 30 , fn : ( function ( n ) { n *= 2 ; this . n += 2 ; //this.n =>window.n=2 +=2=4 window.n=4 //console.log(this.n); var n = 5 ; //n在这重新定义赋值5 return function ( m ) { //console.log(m);//3 //console.log(n);//6 在16行被定义成5,因为下面有个++n所以+1 => 6 // console.log(this.n == window.n)//true this . n *= 2 ; /

es6 es6规范模块打包es6语法js文件

阅读更多关于 es6 es6规范模块打包es6语法js文件

ES6 基于Babel、browserify模块化打包 1、生成package.json文件, npm init； name不能为大写和中文 2、下载babel-cli、babel-preset-es2015、browserify模块 //cli表示命令行接口,其中包含babel命令 npm install browserify -g npm install browserify --save-dev npm install babel-cli -g npm install babel-preset-es2015 --save-dev //preset预设,将es6转换成es5的所有插件打包 3、根目录创建.babelrc文件,即运行控制文件; (1)若直接创建不是json格式，则需要file==》settings==>Editor==>File Types；点击上方的Json，点击右下角+号，添加文本类型.babelrc (2)写入内容: { "presets":["es2015"] } 4、各模块内暴露语法常规暴露: (1)分别暴露: export xxx; export xxx; (2)统一暴露: xx export {暴露变量名1,暴露变量名2,...}; //这里使用了es6对象简写方式,若属性名和内容相同,则只需要写属性名默认暴露: export default

VUE组件

阅读更多关于 VUE组件

v-once指令　　v-once：单独使用，限制的标签内容一旦赋值，便不可被动更改(如果是输入框，可以主动修改) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <input type="text" v-model="msg"> <input type="text" v-model="msg" v-once> <p>{{ msg }}</p> <p v-once>{{ msg }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: '初始值' } }) </script> </html> v-cloak指令：防止页面闪烁 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app" v-cloak> {{ }} {{ }} {{

JS学习日记--jQuery(1)

阅读更多关于 JS学习日记--jQuery(1)

一、什么是jQuery jQuery是一个基于JavaScript的框架，特点是简洁高效，比原生js代码简直方便了太多倍… 这里放上jQuery的下载页面:https://jquery.com/download/,用的是未压缩的开发版二、$符学习jQuery首先就要学习一下什么是$,当我们在学习jQuery的时候，会发现里面到处都在使用$符号.其实在jQuery中，$===jQuery，当我们写代码$===jQuery时，会发现输出结果为true，所以$其实就是jQuery的一个简写而$最经常的用处就是在页面上选取元素，b=$(“选择器”)，这里的b其实是一个伪数组，是jQuery的一个实例用法：$(“选择器标签”)，比如$(‘li’),就可以选取页面上所有li标签，三、可以操作的属性（1）简介 html==>innerHTML 【作用】:设定和取得元素标签内的innerHTML 【用法】：$().html(“设置的内容”) 【设置时】：覆盖所有匹配元素的内容【返回值】：返回第一个匹配元素的内容 val==>value 【作用】：设定和取得一个input标签value内容【用法】：$().val(“设置的内容”) 【返回值】：标签内的value值 < ! DOCTYPE html > < html > < head > < meta charset =

js入门基础知识（一）

阅读更多关于 js入门基础知识（一）

js的能力： 1.JavaScript 能够改变 HTML 内容（JavaScript 同时接受双引号和单引号：） document.getElementById(“demo”).innerHTML = “Hello JavaScript”; 2.JavaScript 能够改变 HTML 属性 document.getElementById(“demo”).style.fontSize = “25px”; 3.JavaScript 能够显示/隐藏 HTML 元素 document.getElementById(“demo”).style.display=“block”; document.getElementById(“demo”).style.display=“none”; 注：在 HTML 中，JavaScript 代码必须位于标签之间。可以放在HTML 页面的或部分中，也可以放置外部脚本引用，可以放置任意数量的脚本。注释：外部脚本不能包含 JavaScript 输出 --------JavaScript 能够以不同方式“显示”数据： -使用 window.alert() 写入警告框 -使用 document.write() 写入 HTML 输出 -使用 innerHTML 写入 HTML 元素 -使用 console.log() 写入浏览器控制台 break 终止

JS事件绑定的三种方式比较

阅读更多关于 JS事件绑定的三种方式比较

js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var btn = document.querySelector("#btn"); //时间句柄 var clickme = function(){ alert("hello~"); } btn.addEventListener("click", clickme); }); </script> </head> <body> <button id="btn">点击我</button> </body> </html> 事件监听的三种方法： 1、直接在html上添加事件（不建议）强耦合，不利用代码复用 2、DOM 0级一个元素只能绑定一个事件的限制如果绑定了多个事件，后面的会覆盖掉前面的 2、DOM 2级一个事件可以绑定多个监听函数

JS笔记之第二天

阅读更多关于 JS笔记之第二天

一元运算符：++ -- 分为前++和后++ and 前--和后-- 如果++在后面，如：num++ +10参与运算，先参与运算，自身再加1 如果++在前面，如：++num+10参与运算，先自身加1，然后再参与运算如果--在后面，如：num-- +10参与运算，先参与运算，自身再减1 如果--在前面，如：--num+10参与运算，先自身减1，然后再参与运算例子：代码是从上到下，一行一行执行的。 ++在后面： var num1=10; var sum1=num1++ +10; //sum1=num1++ +10=10+10=20 //num1++=10+1=11 console.log(sum1);//20 ++在前面 var num2=10; var sum2=++num2+10; //++num2=10+1=11 //sum2=++num2+10=11+10=21 console.log(sum2);//21 - -在后面 var num3=10; var sum3=num3-- +10; //sum3=num3-- +10=10+10=20; //num3--=10-1=9 console.log(sum3);//20 - -在前面 var num4=10; var sum4=--num4+10; //--num4=10-1=9 //sum4=--num4+10=9+10

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获取四位年份和2位年份

阅读更多关于 JS获取四位年份和2位年份

let date=new Date(); //四位 let yearFour=date.getFullYear(); //两位 let yearFour=date.getFullYear().toString().subsr(2,2); 众所周知，js里面有个内置对象Date，记录了有关系统时间的信息。我们只要实例化一个Date对象，var date= new Date(); 然后就可以用这个对象获取有关当前时间的各种信息，比如年份，月份，日期以及时间等。这里有一个小小的问题，在获取年份的时候，不同的浏览器竟然有不一样的结果喔。 var year=date.getYear(); alert(year); IE中显示2010，没问题；但是FF，Chrome等却显示110，神奇呢~~~ 我们仔细观察一下，发现2010-1900=110！溯其根源，是因为在2000年之前，我们是两位数来表示年份的，比如拳皇97，拳皇99，没有说拳皇1997的吧？所以呢，在javascript里，获取的年份是默认减去1900的，当然在2000年之前，这是没问题的，但是2000年之后，就会出现110年这样的怪现象。其实这么说来，110年才是正常的，IE中显示2010年的原因只是IE这个“万能”的浏览器自作主张地对getYear()的值加上1900罢了。对了，这里顺便说一下，在java里面

订阅 js代码