JavaScript 加载顺序

Javascript 加载顺序 Javascript加载顺序 http://www.benben.cc/blog/?p=9 最近经常看到别人提及Javascript脚本的加载顺序,看完之后虽略有所悟,但古人云"纸上得来终觉浅,绝知此事要躬行。“这句话云的好,所以我决定亲自测试一下,看看浏览器究竟是怎么加载脚本的。 先看html部分的代码: <script>alert("我是html根节点之外的内部脚本");</script> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js</title> <style type="text/css">body {margin:0;padding:0;}</style> <script>alert("我是头部header里的内部脚本");</script> <script src="header.js"></script> <script src="outer.js"></script> </head> <body> <script>alert("我是页面body里的内部脚本");</script> <script src="body.js"></script> <input type="button" value="绑定事件" onclick="javascript:alert('我是body中的按钮,这是我自己绑定的事件');"></input> </body> </html> <script>alert("我是html根节点之外的内部脚本");</script> 再看header.js中的代码: 1 alert("我是header中src外部引用的脚本"); 接着是outer.js中的代码: document.write('<script type="text/javascript">'); document.write('alert("我是header中通过外部通过document.write生成的脚本")'); //document.write('<script src="outerouter.js"></script>'); document.write('</script>'); 最后是body.js中的代码 1 alert("我是body中src外部引用的脚本"); 代码的输出顺序如下: alert("我是html根节点之外的内部脚本"); alert("我是头部header里的内部脚本"); alert("我是header中src外部引用的脚本"); alert("我是header中通过外部通过document.write生成的脚本"); alert("我是页面body里的内部脚本"); alert("我是body中src外部引用的脚本"); alert("我是html根节点之外的内部脚本"); 最后只有点击按钮才会触发alert(‘我是body中的按钮,这是我自己绑定的事件’); 刚开始看完代码后你觉得加载顺序如何呢?其实很简单,浏览器加载的时候完全是按照自上而下顺序加载的,遇到外部引用就暂时跳出到外部js中执行,执行完毕后返回跳出的位置继续向下执行,而且经测试可以看到,按钮是在body.js执行完毕后才显示在页面中的,这也证实了浏览器是顺序加载的。 这里需要说明两点: 浏览器根节点之外是不允许有任何元素的,在这里我们只是为了判断加载顺序才写了不符合规矩的代码,这一点可以在chrome的调试中看到报错。 outer.js中通过document.write再次引用外部js的那一行我已经做了注释,虽然此方法有许多人证实可行,但是在我的环境下会报脚本错误,而且这样做会引起浏览器加载顺序的不兼容 (详情可见: Javascript加载顺序的BUG) ,因此在实际应用中若非迫不得已还是少用为妙。 维护记录 时间 修改内容 原因 2026-10-09 修复本地 Hugo 构建的 Raw HTML 警告:代码/配置放入代码块,正文中的尖括号占位符改为行内代码;文件重命名为 javascript-load-order.md;title 改为「JavaScript 加载顺序」;url 改为 javascript-load-order;旧 url 加入 aliases 正文中的 HTML/XML 片段被当作原始 HTML 丢弃;文件名/URL/标题按规范调整

Created 21216-02-21 · Updated 9096-10-09 · 1 min · 88 words · -

Javascript 重定向 window.location.href / replace / reload()

Javascript 重定向 window.location.href / replace / reload() location.href,可以点击浏览器的后退按钮返回本页。 location.assign(URL) assign() 方法可加载一个新的文档。效果与location.href相当。 location.reload(force) 如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。 如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。 location.replace(newURL) 不能点击浏览区的后退按钮返回本页。 将地址替换成新url,该方法通过指定URL替换当前缓存在历史里 (客户端) 的项目, 因此当使用replace方法之后,你不能通过"前进"和"后 退"来访问已经被替换的URL,这个特点对于做一些过渡页面非常有用! replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前记录。 http://jun1986.iteye.com/blog/1176909 一、最外层top跳转页面,适合用于iframe框架集 top.window.location.href("${pageContext.request.contextPath}/Login_goBack"); ============================================================================================ 二、window.location.href和window.location.replace的区别 1.window.location.href=“url”: 改变url地址; 三、强制页面刷新 1.window.location.reload(): 强制刷新页面,从服务器重新请求! ============================================================================================ 四、window.location.reload();页面实现跳转和刷新 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(location) 5 document.execCommand('Refresh') 6 window.navigate(location) 7 location.replace(location) 8 document.URL=location.href 这几个都可以刷新 window.location.reload();刷新 ...

Created 3036-03-03 · Updated 9096-10-09 · 1 min · 156 words · -

JS 正则标志 /g /i /m 的用法

js正则标志/g /i /m的用法 正则的思想都是一样的,但是具体的写法会有所不同,在这里提到的/g,/i,/m在其他的地方也许就不能用了。 一,js正则标志/g,/i,/m说明 1,/g 表示该表达式将用来在输入字符串中查找所有可能的匹配,返回的结果可以是多个。如果不加/g最多只会匹配一个 2,/i 表示匹配的时候不区分大小写 3,/m 表示多行匹配,什么是多行匹配呢?就是匹配换行符两端的潜在匹配。影响正则中的^$符号 二,实例说明 1,/g的用法 查看复制打印? <script type="text/javascript"> str = "tankZHang (231144)"+ "tank ying (155445)"; res = str.match(/tank/); //没有加/g alert(res); //显示一个tank res = str.match(/tank/g); //加了/g alert(res); //显示为tank,tank </script> 2,/i的用法 查看复制打印? <script type="text/javascript"> str = "tankZHang (231144)"+ "tank ying (155445)"; res = str.match(/zhang/); alert(res); //显示为null res = str.match(/zhang/i); //加了/i alert(res); //显示为ZHang </script> 3,/m的用法 查看复制打印? <script type="text/javascript"> var p = /$/mg; var s = '1\n2\n3\n4\n5\n6'; alert(p.test(s)); //显示为true alert(RegExp.rightContext.replace(/\x0A/g, '\\a')); //显示\a2\a3\a4\a5\a6 alert(RegExp.leftContext); //显示为竖的2345 alert(RegExp.rightContext); //显示为6 var p = /$/g; var s = '1\n2\n3\n4\n5\n6'; alert(p.test(s)); //显示为true alert(RegExp.rightContext.replace(/\x0A/g, '\\a')); //什么都不显示 alert(RegExp.leftContext); //显示为竖的123456 alert(RegExp.rightContext); //什么都不显示 var p = /^/mg; var s = '1\n2\n3\n4\n5\n6'; alert(p.test(s)); //显示为true alert(RegExp.rightContext.replace(/\x0A/g, '\\a')); //显示为1\a2\a3\a4\a5\a6 alert(RegExp.leftContext); //显示为竖的12345 alert(RegExp.rightContext); //显示为6 </script> //从上例中可以看出/m影响的^$的分割方式 上面说的三个例子,/i,/g,/m分开来说的,可以排列组合使用的。个人觉得/m没有多大用处 http://blog.51yip.com/jsjquery/1076.html javascript 密码 正则 let testPassword = /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!@#$%^&;*()_=+\-])[a-zA-Z\d!@#$%^&;*()_=+\-]*$/; //判断输入格式 if(testPassword.test(this.passwordText)){ ...密码匹配成功 }else { ...密码匹配失败 } ———————————————— 版权声明:本文为CSDN博主「weixin_42553179」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/weixin_42553179/article/details/103045970 ...

Created 10106-03-10 · Updated 9096-10-09 · 1 min · 165 words · -

javascript unit test

javascript unit test http://blog.sina.com.cn/s/blog_6768f2290100ubw5.html 最近由于工作和个人兴趣的关系,有幸研究了一下javascript的unit test,市面上常见且比较易用的javascript的unit test的framework有三个: jsunit, qunit和yuitest,虽然出处不同,但是本质上,使用方法都大同小异。 jsunit: http://www.jsunit.net/ 最早开发自2001年,是第一个实用的javascript的unit test framework (那时候TDD还远未流行) ,其完全遵循junit的xunit pattern, 有setup, teardown, 有testsuit概念,还有若干种assert方法,不过因为其诞生早,对非同步的ajax测试支持不够,因而有市场占有率渐低的趋势。 qunit: http://docs.jquery.com/Qunit 个人极其欣赏的一个framework,隶属于大名鼎鼎的jquery,但是又无需依赖于jquery的库可单独运行, 方法轻量易学,且具有异步测试的功能。可惜在公司没有被官方支持,只能自己玩。 yui test: http://developer.yahoo.com/yui/yuitest/ 著名的yahoo web js toolkit library中的ut子项目,使用方法和qunit极其相似,也具有异步测试功能,在本人公司被官方支持,最大的缺点是使用时要调用其他诸多的yui模块用来显示结果,不够独立。 以下以qunit为例子,介绍这些unit test framework的使用方法: 1 ) 下载qunit的测试驱动程序js文件和对应显示结果用的css文件 (分别为qunit.js 和qunit.css ) 2 ) 将这两个文件保存在某个目录,并在同一目录建立一个简单的html文件,包含该两个文件以及jquery.js 3 ) 将我们需要测试的js代码的文件也包含入该简单html中(该例中为mycode.js)。 4 ) 将我们要测试的js代码的依赖库也加入该html中(如ExtJS或者其他库) 5 ) 在html中添加script的测试代码 (test suit和assert部分) 6 ) 在浏览器中载入该html文件,页面会自动显示运行结果。 值得一提的是,网上有qunit-CLI的项目,其用rhino解释器来代替浏览器做unit test js的运行环境,提高了测试的效率,有兴趣的朋友可以去google搜索看看。 代码如下: mycode.js function (a, b) { return a + b; } test.html <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="qunit.js"></script> <!-- js to be tested --> <script type="text/javascript" src="mycode.js"></script> <!-- unit test part --> <script> $(document).ready(function(){ test("a basic test example", function() { var sum = add (1 + 1); equal( sum, "2", "We expect value to be 2" ); }); }); </script> </head> <body> QUnit example test markup, will be hidden </ 维护记录 时间 修改内容 原因 2026-10-09 修复本地 Hugo 构建的 Raw HTML 警告:代码/配置放入代码块,正文中的尖括号占位符改为行内代码 正文中的 HTML/XML 片段被当作原始 HTML 丢弃;文件名/URL/标题按规范调整

Created 25256-08-25 · Updated 9096-10-09 · 1 min · 148 words · -

TypeScript 数组

typescript 数组 版权声明: 本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/honey199396/article/details/80750408 数组的声明 let array1:Array<number>; let array2:number[]; 数组初始化 let array1:Array<number> = new Array<number>(); let array2:number[] = [1, 2, 3]; 数组元素赋值、添加、更改 let array:Array<number> = [1,2,3,4]; console.log(array) // [1, 2, 3, 4] array[0] = 20; // 修改 console.log(array) // [20, 2, 3, 4] array[4] = 5; // 赋值 console.log(array) // [20, 2, 3, 4, 5] array.push(6); // 添加 console.log(array) // [20, 2, 3, 4, 5, 6] array.unshift(8, 0); // 在第一个位置依次添加 console.log(array); // [8, 0, 20, 2, 3, 4, 5, 6] 删除 let array:Array<number> = [1,2,3,4]; console.log(array) // [1, 2, 3, 4] let popValue = array.pop(); // 弹出 console.log(array) // [1, 2, 3] array.splice(0, 1); // 删除元素 (index, deleteCount) console.log(array) // [2, 3] array.shift(); // 删除第一个元素 console.log(array); // [3] typescript的二维数组写法如下: ...

Created 17176-08-17 · Updated 9096-10-09 · 1 min · 176 words · -

JavaScript window.onload

JavaScript window.onload JavaScript的window.onload使用: window.onload方法,可以定义html中的onload方法例如: window.onload=function(){ var a = document.getElementById("loading"); a.parentNode.removeChild(a); } 这样就可以通过js代码直接定义这个方法,而不需要象这样定义了<body onload="aaa()"> window.onload方法,可以定义html中的onload方法例如: window.onload=function(){ var a = document.getElementById("loading"); a.parentNode.removeChild(a); } 这样就可以通过js代码直接定义这个方法,而不需要象这样定义了<body onload="aaa()"> 如果<body>标签原来已经定义了onload方法,则可以通过下面的方法,再追加自己的方法: if(window.onload==null){ window.onload=function(){dvwait1.style.display = "none";} }else{ eval("wtempfunction="+window.onload.toString()); window.onload=function(){wtempfunction();dvwait1.style.display = "none";} } 维护记录 时间 修改内容 原因 2026-10-09 修复本地 Hugo 构建的 Raw HTML 警告:代码/配置放入代码块,正文中的尖括号占位符改为行内代码;文件重命名为 window-onload.md;url 改为 window-onload;旧 url 加入 aliases;categories 改为 JavaScript 正文中的 HTML/XML 片段被当作原始 HTML 丢弃;文件名/URL/标题按规范调整

Created 1016-01-01 · Updated 9096-10-09 · 1 min · 58 words · -

inline script 和外链 script

inline script 和外链script 性能 从性能角度来说,inline script 和外链script (<script src="xxx" />) 各有优势。 假设你的script只有很少的几行,写在html内确实省去了一个请求。 不过用外链方式,最好的情况下可以让浏览器从本地缓存中进行一次IO读取——这只会花2ms。如果谁有兴趣的话我可以解释一下什么情况下会完全读本地缓存,什么情况下是HTTP 304,什么情况下会是全新的HTTP 200. 这些不是重点,结论是 js比较少的时候,在页面上写会有性能优势。 但是随着js代码的增加,这个优势越来越小。你需要衡量的东西也会越来越多: 外链js对页面加载速度的影响 内联js对页面加载速度的影响 外链js被缓存后,用户访问多个页面时能节约的加载时间 不同页面,新访问用户的比例 随着js代码的增加,直接在页面上嵌入script的做法获得的收益越来越小 维护性 维护性在我看来是优先于性能要考虑的,放在后面说是因为这方面外链script完胜。如果你在页面上写js,分散的js碎片要么迅速膨胀,要么被遗忘而成为隐患。 所以建议js还是写到单独的js文件里面。 再回到楼主的问题, 是否可以或者应该合并到一处? 是完全可以的,$(function(){}) 里面的function会在DOMReady之后才运行,所以放在哪里都可以 (甚至在你要操作的DOM HTML前面) 是否应该?如果模板是有很多个小模块构成,对应的js文件也尽量和模板放在一起,做模块化的管理。 <!-- module A --> a模块的HTML… </div> <script src="module-a.js"></script> <!-- module B --> b模块的HTML</div> <script src="module-b.js"></script> (sinatra + haml 用惯了,不习惯rails的静态资源管理方式) 实际上上面这个模板,更好的方式是拆分成a、b两个partial模板了 维护记录 时间 修改内容 原因 2026-10-09 修复本地 Hugo 构建的 Raw HTML 警告:代码/配置放入代码块,正文中的尖括号占位符改为行内代码;文件重命名为 inline-external-script.md;title 改为「inline script 和外链 script」;url 改为 inline-external-script;旧 url 加入 aliases;categories 改为 JavaScript 正文中的 HTML/XML 片段被当作原始 HTML 丢弃;文件名/URL/标题按规范调整

Created 9096-10-09 · Updated 9096-10-09 · 1 min · 81 words · -

call javascript in angular 7

call javascript in angular 7 https://stackoverflow.com/questions/53482324/how-can-i-use-javascript-code-in-angular-7

Created 2026-06-02 · Updated 2026-06-02 · 1 min · 6 words · -

jest

jest https://stackoverflow.com/questions/68956636/how-to-use-esm-tests-with-jest package.json use es module { "type": "module", "devDependencies": { "jest": "^29.7.0" }, "scripts": { "test": "node --experimental-vm-modules ./node_modules/.bin/jest" } } # run all test npm run test # run one test npm run test -- infoq.test.js

Created 7076-02-07 · Updated 7076-02-07 · 1 min · 38 words · -

ES Modules

ES Modules, or ECMAScript Modules foo.js class ArticleNode { constructor(node, paragraph) { this.node = node this.paragraph = paragraph } } export function createOneArticleNode(){ let articleNode0 = new ArticleNode('foo', 'bar') console.log('a n: ', articleNode0) } bar.js // jest test import { createOneArticleNode } from '../content_module.js' test('test es module 0', () => { console.log('print foo') createOneArticleNode() console.log('print bar') }); npm run test

Created 14146-12-14 · Updated 14146-12-14 · 1 min · 60 words · -

JS合并数组

JS合并数组 http://blog.csdn.net/renfufei/article/details/39376311 比较JS合并数组的各种方法及其优劣 标签: 数组合并拼接slicereduce 2014-09-18 18:09 8077人阅读 评论(0) 收藏 举报 分类: JS笔记 (29) 原文链接: Combining JS Arrays 原文日期: 2014-09-09 翻译日期: 2014-09-18 翻译人员: 铁锚 本文属于JavaScript的基础技能. 我们将学习结合/合并两个JS数组的各种常用方法,并比较各种方法的优缺点. 我们先来看看具体的场景: [javascript][/javascript] 在CODE上查看代码片派生到我的代码片 var q = [ 5, 5, 1, 9, 9, 6, 4, 5, 8]; var b = [ “tie”, “mao”, “csdn”, “ren”, “fu”, “fei” ]; 很明显,数组 q 和 b 简单拼接的结果是: [javascript][/javascript] 在CODE上查看代码片派生到我的代码片 [ 5, 5, 1, 9, 9, 6, 4, 5, 8, “tie”, “mao”, “csdn”, “ren”, “fu”, “fei” ...

Created 30306-03-30 · Updated 30306-03-30 · 2 min · 387 words · -

javascript class

// Declaration class Rectangle { constructor(height, width) { this.height = height; this.width = width; } }

Created 7076-03-07 · Updated 7076-03-07 · 1 min · 16 words · -

javascript 序列化与反序列化

javascript 序列化与反序列化 http://blog.csdn.net/zhangquanok/article/details/13002771 var objP = {}; objP.id = 1; objP.name = 2; objP.sex = 32; JSON.stringify(objP)//序列化 JSON.parse(e); //JSON.parse(e)反序列化

Created 10106-06-10 · Updated 10106-06-10 · 1 min · 19 words · -

JavaScript json 对象

JavaScript json 对象 http://www.cnblogs.com/tomxu/archive/2012/01/11/2311956.html 深入理解JavaScript系列 (9) : 根本没有"JSON对象"这回事! 前言 写这篇文章的目的是经常看到开发人员说: 把字符串转化为JSON对象,把JSON对象转化成字符串等类似的话题,所以把之前收藏的一篇老外的文章整理翻译了一下,供大家讨论,如有错误,请大家指出,多谢。 正文 本文的主题是基于ECMAScript262-3来写的,2011年的262-5新规范增加了JSON对象,和我们平时所说的JSON有关系,但是不是同一个东西,文章最后一节会讲到新增加的JSON对象。 英文原文: http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/ 我想给大家澄清一下一个非常普遍的误解,我认为很多JavaScript开发人员都错误地把 JavaScript 对象字面量 (Object Literals) 称为JSON对象 (JSON Objects) ,因为他的语法和JSON规范里描述的一样,但是该规范里也明确地说了JSON只是一个数据交换语言,只有我们将之用在string上下文的时候它才叫JSON。 序列化与反序列化 2个程序 (或服务器、语言等) 需要交互通信的时候,他们倾向于使用string字符串因为string在很多语言里解析的方式都差不多。复杂的数据结构经常需要用到,并且通过各种各样的中括号{},小括号(),叫括号<>和空格来组成,这个字符串仅仅是按照要求规范好的字符。 为此,我们为了描述这些复杂的数据结构作为一个string字符串,制定了标准的规则和语法。JSON只是其中一种语法,它可以在string上下文里描述对象,数组,字符串,数字,布尔型和null,然后通过程序间传输,并且反序列化成所需要的格式。YAML和XML (甚至request params) 也是流行的数据交换格式,但是,我们喜欢JSON,谁叫我们是JavaScript开发人员呢! 字面量 引用Mozilla Developer Center里的几句话,供大家参考: 他们是固定的值,不是变量,让你从"字面上"理解脚本。 (Literals) 字符串字面量是由双引号 (") 或单引号 (’) 包围起来的零个或多个字符组成的。(Strings Literals) 对象字面量是由大括号 ({}) 括起来的零个或多个对象的属性名-值对。(Object Literals) 何时是JSON,何时不是JSON? JSON是设计成描述数据交换格式的,他也有自己的语法,这个语法是JavaScript的一个子集。 { “prop”: “val” } 这样的声明有可能是JavaScript对象字面量也有可能是JSON字符串,取决于什么上下文使用它,如果是用在string上下文 (用单引号或双引号引住,或者从text文件读取) 的话,那它就是JSON字符串,如果是用在对象字面量上下文中,那它就是对象字面量。 // 这是JSON字符串 var foo = ‘{ “prop”: “val” }’; // 这是对象字面量 var bar = { “prop”: “val” }; ...

Created 10106-05-10 · Updated 10106-05-10 · 1 min · 161 words · -

Javascript异步编程

Javascript异步编程 http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html 一、回调函数 二、事件监听 三、发布/订阅 四、Promises对象

Created 11116-02-11 · Updated 11116-02-11 · 1 min · 6 words · -

js check platform

js check platform <script type="text/javascript"> <!- //平台、设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platform; alert(p); system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); //跳转语句 if(system.win||system.mac||system.xll){//转向后台登陆页面 window.location.href="login.jsp"; }else{ window.location.href="wapLojin.jsp"; } -> </script> var isMobile = { Android: function() { return navigator.userAgent.match(/Android/i) ? true : false; }, BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i) ? true : false; }, iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false; }, Windows: function() { return navigator.userAgent.match(/IEMobile/i) ? true : false; }, any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows()); } }; http://blog.csdn.net/yakson/article/details/9390863 ...

Created 27276-02-27 · Updated 27276-02-27 · 1 min · 112 words · -

怎样用Javascript定义一个类

怎样用Javascript定义一个类 http://www.cnblogs.com/xcj26/archive/2013/04/08/3006023.html 其实Javascript中没有类这个定义,但是有类这个概念。很多人都写过这样的代码,对,没错,就是如下代码,清晰的不能再清晰了,就是一个关键字 function,然后定义一个方法名,方法名后紧跟一对括号。如果你在项目中写过这样的代码,那么祝贺你,你可以不费任何吹毛之力,就能一口气读完这篇博文了. function Print() { …… } 当我们在写c#代码,焦头烂额,无从下手的时候,至少我们还是可以厚着脸皮在老板的面前,敲出华丽的 class ***{},是的,没错,就这几个字符。殊不知这这几个字符体现出来的境界。说浅些,我会敲键盘写代码,说深些,我有可能理解了面向对象的编程,至少我会定义一个类。是这样的,c#中定义一个类是用class。 有一天,老板变态了,让我用Javascript来定义一个类,我无从下手呀,我平时都是用("."),("#")的人物呀,思考良久,我还模糊的记的document.getElementById("")这个东西,但是好像与Javascript的类扯不上关系呀。怎么办?问了google问百度啊,最后在一个角落,找到了定义Javascript类的E文。仔细一阅,难道这是一个坑吗?明明用function定义了一个方法,活生生的把它说成一个类,反复几次Google百度后,有点怀疑了,难道Javascript中定义一个类,真的是用function?其实没错,在Javascript中,定义一个类是用fucntion() *\*{}。不管是在学校的菜鸟,还是国外的顶级程序员,在这件事上是平等的,想定义一个Javascript的类,就必须得先敲下function **(){}。 在定义Javascript类上,表现形势上大家虽然是平等的,都是用function ***(){}。但实质上,确是蕴含着大量的学问。也许有些朋友到目前为止,是不是感觉我说的太简单了,那我们就在这个function上玩点花样。 function Dog(category, name, age) { this.Category = category; this.Name = name; this.Age = age; } 一个Javascript类就这样定义完成了,现在就可以自豪的说,我会面向对象的手法编定Javascript代码了。 类定义好了,那我们怎么样来用这个类呢?其实用法和C#的用法很像。 var dog01 = new Dog(“狗类”, “土狗”, 2); var dog02 = new Dog(“狗类”, “黄狗”, 5); 有些朋友要拍砖了,这么简单的东西,都拿出来说,那我们不妨再来进阶一下。我上边的代码,实例化了两个对象,一个是dog01,dog01下边那个是dog02。因为dog01的Cateogry太口语化了,我要修改为dog01.Categry = ‘犬类’,这样听起来是不是舒服多了,这是一个很简单的事,我们仅仅需要为dog01的Cateogry重赋值就可以了。我们修改了dog01的Cateory, dog02的Category会跟着变吗?答案是肯定的,不会变,如果有变,肯定有鬼。那我们有没有方法让dog01,dog02这些对象的Cateogry属性共用起来呢?也就是说当我修改了Category属性,不管是dog01,还是dog02都跟一样的变,我们不妨来这样写写。 <img alt="复制代码" src="http://common.cnblogs.com/images/copycode.gif" /> function Dog(name,age) { this.Name = “”; this.Age = “”; } Dog.prototype.Category = “狗类”; var dog01 = new Dog(“土狗”,2); var dog02 = new Dog(“黄狗”,5); alert(dog01.Category); alert(dog02.Category); Dog.prototype.Category = “犬类”; alert(dog01.Category); alert(dog02.Category); ...

Created 25256-02-25 · Updated 25256-02-25 · 1 min · 95 words · -

JavaScript里面三个等号和两个等号的区别

JavaScript里面三个等号和两个等号的区别 == equality 等同,=== identity 恒等。 ==, 两边值类型不同的时候,要先进行类型转换,再比较。 ===,不做类型转换,类型不同的一定不等。 下面分别说明: 先说 ===,这个比较简单。下面的规则用来判断两个值是否===相等: 如果类型不同,就[不相等] 如果两个都是数值,并且是同一个值,那么[相等];(!例外)的是,如果其中至少一个是NaN,那么[不相等]。 (判断一个值是否是NaN,只能用isNaN()来判断) 如果两个都是字符串,每个位置的字符都一样,那么[相等];否则[不相等]。 如果两个值都是true,或者都是false,那么[相等]。 如果两个值都引用同一个对象或函数,那么[相等];否则[不相等]。 如果两个值都是null,或者都是undefined,那么[相等]。 再说 ==,根据以下规则: 如果两个值类型相同,进行 === 比较。 如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较: a、如果一个是null、一个是undefined,那么[相等]。 b、如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。 c、如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。 d、如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的toString或者valueOf方法。 js核心内置类,会尝试valueOf先于toString;例外的是Date,Date利用的是toString转换。非js核心的对象,令说 (比较麻 烦,我也不大懂) e、任何其他组合,都[不相等]。 举例: “1” == true 类型不等,true会先转换成数值 1,现在变成 “1” == 1,再把"1"转换成 1,比较 1 == 1, 相等。 = 赋值运算符 == 等于 === 严格等于 例: var a = 3; var b = “3”; a==b 返回 true ...

Created 14146-03-14 · Updated 14146-03-14 · 1 min · 76 words · -

input file 文件上传控件隐藏后用button触发 click事件

input file 文件上传控件隐藏后用button触发 click事件 http://bbs.csdn.net/topics/320156312 <HTML> <BODY> <input type="button" value="添加附件" onmouseover="floatFile()"> <input type="button" onclick="alert($('tt').innerHTML)" value="showHTML"> </BODY> </HTML> <SCRIPT LANGUAGE="JavaScript"> function $(id) { return document.getElementById(id); } //全局变量,记录文件数; var fileNum=1; //mouseover时,把input file移到按扭上,保证点击的是file, function floatFile() { $("file"+fileNum).style.posTop=event.srcElement.offsetTop; $("file"+fileNum).style.posLeft=event.x-$("file"+fileNum).offsetWidth/2; } //选择完一个文件之后,自动创建一个新的div 和 file表单,用于下回使用,hidden刚用过的file function showText(obj) { $(obj.id+"text").innerHTML=obj.value+" 删除"; $("file"+fileNum).style.display='none'; fileNum=fileNum+1; //直接追加innerHTML(innerHTML+=)会清空原来file中的内容 $("div"+(fileNum-1)).insertAdjacentHTML('AfterEnd',''); } function del(id) { $("div"+id).innerHTML=""; $("div"+id).style.display="none"; } </SCRIPT> IE 使用 ‘filter:alpha(opacity=50);’ 通过 Filter 的 alpha 通道滤镜使元素半透明,但元素必须触发 hasLayout 特性。 ...

Created 14146-01-14 · Updated 14146-01-14 · 1 min · 80 words · -

javascript 判断浏览器类型

javascript 判断浏览器类型 var Sys = {}; var ua = navigator.userAgent.toLowerCase(); if (window.ActiveXObject) Sys.ie = ua.match(/msie ([d.]+)/)[1] else if (document.getBoxObjectFor) Sys.firefox = ua.match(/firefox/([d.]+)/)[1] else if (window.MessageEvent && !document.getBoxObjectFor) Sys.chrome = ua.match(/chrome/([d.]+)/)[1] else if (window.opera) Sys.opera = ua.match(/opera.([d.]+)/)[1] else if (window.openDatabase) Sys.safari = ua.match(/version/([d.]+)/)[1]; //以下进行测试 if (Sys.ie) document.write('IE: ' + Sys.ie); if (Sys.firefox) document.write('Firefox: ' + Sys.firefox); if (Sys.chrome) document.write('Chrome: ' + Sys.chrome); if (Sys.opera) document.write('Opera: ' + Sys.opera); if (Sys.safari) document.write('Safari: ' + Sys.safari);

Created 14146-01-14 · Updated 14146-01-14 · 1 min · 73 words · -