js代码

浅谈js运行机制(线程） 1.前言 从开始接触js时，我们便知道js是单线程的。单线程，异步，同步，互调，阻塞等。在实际写js的时候，我们都会用到ajax,不管是原生的实现，还是借助jQuery等工具库实现，我们都知道，ajax可以实现局部刷新，并且在请求处理时，任然可以响应用户的操作，比如点击事件。不是说js是单线程吗?这些都是怎么实现的？ 在阅读《深入理解Bootrap的源码》一书，在分析轮播组件(carousel.js)的源码时，作者对一句代码操作的注释引起了我的兴趣。 setTimeout(function(){ that.$element.trigger('slid'); },0);//触发slid事件,这里使用setTimeout是为了确保UI刷新线程不被阻塞。 1 2 3 4 后面我会一一解答这些疑惑。 2.浏览器线程 js运作在浏览器中,是单线程的，即js代码始终在一个线程上执行，这个线程称为js引擎线程。 浏览器是多线程的，除了js引擎线程，它还有： UI渲染线程 浏览器事件触发线程 http请求线程 EventLoop轮询的处理线程 …….. 这些线程的作用： UI线程用于渲染页面 js线程用于执行js任务 浏览器事件触发线程用于控制交互，响应用户 http线程用于处理请求，ajax是委托给浏览器新开一个http线程 EventLoop处理线程用于轮询消息队列

自昨天发了各浏览器内核介绍的随笔，就闲不住了，想直接写个JS来识别用户所用浏览器版本。 写着写着却发现很多坑爹的地方，比如IE10-的版本是依循常规支持attachEvent，但到了IE11，却只支持addEventListener而不再支持attachEvent。光是这一点就可以判断IE是个大坑，IE11的存在可能会导致之前你写过的代码出现错乱。另如原本可用 var ieVersion = eval("''+/*@cc_on"+" @_jscript_version@*/-0")*1 的嗅探脚本来判断是否IE，如果值非0则表示为IE浏览器，但到了IE11，也直接返回0了（即IE11不再识别@cc_on这个IE独有的条件编译语句）。。。。 还有就是上篇文章提到的Opera自从去年就抛弃了自家的Presto内核，转而跟进使用Chrome内核，导致的结果是，新版Opera不再支持window.opera，而且跟随Chrome浏览器支持window.chrome等系列Chrome特性，就连userAgent字样也去了“opera”并直接套用Chromium/Blink内核的userAgent信息（好事是在尾部还是保留了一句OPR/XX.0） 不过琢磨琢磨，问题总会得到解决的。首先解决下比较容易解决的Firefox，其userAgent信息如下： 对比其它浏览器内核的ua信息它独有

在移动端，我们经常遇到横竖屏的问题，所以我们改如何判断或针对横竖屏来写代码呢。首先需要在head中加入如下代码： <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 针对上面的viewport标签有如下说明： 1）.content 中的width指的是虚拟窗口的宽度。 2）.user-scalable=no 就一定可以保证页面不能缩放吗？NO,有些浏览器不吃这一套，这一招就是minimum-scale=1.0,maximum-scale=1.0最大与最小缩放比都设为1.0就可以了。 3）.initial-scale=1.0 初始缩放比例受user-scalable控制吗？不一定，有些浏览器会将user-scalable理解为用户手动缩放，如果user-scalable=no,initial-scale将无法生效。 4）.手机页面可以触摸移动，但是如果有禁止此操作，就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。 5）.如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来的存。 一：css判断横屏竖屏 写在同一个css中

本文转载自： https://www.cnblogs.com/goody9807/archive/2009/04/08/1431732.html 作者：goody9807 转载请注明该声明。 <script language="javascript"> /** * 功能：显示提示窗口 * 作者：申楠 qq：38371354 email： amushen1@yahoo.com.cn http;//amushen.cnblogs.com * 日期：2005-10-26 * 版本：1.1 * 备注：版权没有，随便拷贝，如果用于商业应用请通知本人，同时保留这段注释。 * */ /** * 改造：黑旋风 QQ:23929003 email： lewclear97@163.com * 日期：2006-03-17 * 版本：1.2 * 说明：本人在申楠同志的《显示提示窗口》基础上，将 */ var alternateFrame=null;//生成的iframe var alternateWin=null; window.alert=showAlert; window.confirm=showConfirm; /** * 人机交互窗口，覆盖自带的 */ function alternateWindow(){ this.win=null;//生成对话框的窗口对象 this.pBody=null;/

js是门灵活的语言，实现一种功能往往有多种做法,ECMAScript没有明确的继承机制，而是通过模仿实现的，根据js语言的本身的特性,js实现继承有以下通用的几种方式 1.使用对象冒充实现继承(该种实现方式可以实现多继承) 实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值 Js代码 function Parent(firstname) { this.fname=firstname; this.age=40; this.sayAge= function() { console.log( this.age); } } function Child(firstname) { this.parent=Parent; this.parent(firstname); delete this.parent; this.saySomeThing= function() { console.log( this.fname); this.sayAge(); } } var mychild= new Child( "李"); mychild.saySomeThing(); 2.采用call方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链，则采用5混合模式) 实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

在研究react和webpack的时候，经常看到在js文件中出现require，还有import，这两个都是为了JS模块化编程使用。CSS的是 @import 1.ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。 Require是CommonJS的语法，CommonJS的模块是对象，输入时必须查找对象属性。 // CommonJS模块 let { stat, exists, readFile } = require('fs'); // 等同于 let _fs = require('fs'); let stat = _fs.stat; let exists = _fs.exists; let readfile = _fs.readfile; above：整体加载fs模块（即加载fs所有方法），生成一个对象"_fs"，然后再从这个对象上读取三个方法，这叫“运行时加载”，因为只有运行时才能得到这个对象，不能在编译时做到静态化。 ES6模块不是对象，而是通过export命令显示指定输出代码，再通过import输入。 import { stat, exists, readFile } from 'fs'; above：从fs加载“stat, exists, readFile” 三个方法，其他方法不加载， 2.ES6模块默认使用严格模式

arguments并不是一个真正的数组，而是一个“类似数组（array-like）”的对象； 就像下面的这段输出，就是典型的类数组对象： [12, 23, callee: ƒ, Symbol(Symbol.iterator): ƒ] 一、类数组 VS 数组 相同点： 都可用下标访问每个元素 都有length属性 不同点： 数组对象的类型是Array，类数组对象的类型是Object； 类数组对象不能直接调用数组API； 数组遍历可以用for in和for循环，类数组只能用for循环遍历； function calc(){ console.log(arguments); // ["sky", "moon", callee: ƒ, Symbol(Symbol.iterator): ƒ] console.log(arguments[0]); // sky console.log(arguments.length); // 2 // arguments.pop(); // 报错，arguments.pop is not a function } calc('sky', 'moon'); 类数组对象转为数组对象方法： Array . prototype . slice . call ( arguments ); function calc(){ var newArr = Array

介绍 在js的dom操作中，除了常用的document、html**Element之外，还有三个集合对象，即 HTMLCollection、NodeList以及NamedNodeMap。试看以下操作： 1 var divs = document.getElementsByTagName("div"); 2 alert(divs instanceof HTMLCollection); //true （chrome中返回false，divs是NodeList对象） 3 4 var div = document.getElementById("div1"); 5 6 var children = div.childNodes; //获取div元素子节点集合 7 alert(children instanceof NodeList); //true 8 9 var attrs = div.attributes; //获取div元素的特性 10 alert(children instanceof NamedNodeMap); //true 以上代码中，chrome下的document.getElementsByTagName("div")将返回NodeList对象。 这三个对象都是“类数组”，可以获取他们的length，也可以通过 attrs[0] 获取数据

（一） Js 数据类型 　　分为基本数据类型以及引用类型 　　基本数据类型有 null,undefined,Boolen,Number,String，还有一种复杂数据类型 Object。 var var1 = "xianrongbin", var2 = false, var3 = null, var4 = undefined, var5 = 123; console.log(typeof var4); var var6 = [1, 23, 5]; console.log(typeof var6); 　　 这里，其实只需一个var的，为了区别基本数据类型与复杂数据类型，写了两个var 关键字。 将所有的变量定义在一个var后面，有益提升 程序运行效率 。 如果在一个函数中，不标注 var，则该变量是全局变量，是window的变量，因为所有全局变量都是由window承担的。 　　　　 function testVar() { num = 1; } testVar(); console.log(window.num); 　　　这里输出1，如果在 "num" 前加上var，输出则会报错。 基本数据类型与值类型，一个是传值，一个是改变地址。 var var6 = [1, 23, 5]; function changeValue(obj) { obj.pop(); }; changeValue

在聊JavaScript（以下简称js）深度克隆之前，我们先来了解一下js中对象的组成。 在 js 中一切实例皆是对象，具体分为 原始类型 和 合成类型 ： 原始类型 对象指的是 Undefined 、 Null 、 Boolean 、 Number 和 String ，按值传递。 合成类型 对象指的是 array 、 object 以及 function ，按址传递，传递的时候是内存中的地址。 克隆或者拷贝分为2种： 浅度克隆 、 深度克隆 。 浅度克隆 ：基本类型为值传递，对象仍为引用传递。 深度克隆 ：所有元素或属性均完全克隆，并于原引用类型完全独立，即，在后面修改对象的属性的时候，原对象不会被修改。 又或许你刚听说“深度克隆”这个词，简单来说，就是说有个变量a，a的值是个对象（包括基本数据类型），现在你要创建一个变量b，使得它拥有跟a一样的方法和属性等等。但是a和b之间不能相互影响，即a的值的改变不影响b值的变化。直接赋值可好？ var a = 1; var b = a; a = 10; console.log(b); // 1 var a = 'hello'; var b = a; a = 'world'; console.log(b); // hello var a = true; var b = a; a = false; console.log(b); //