JavaScript

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

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

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

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” ...

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

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)反序列化

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” }; ...

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

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 <!- js to be tested -> ...

js正则标志/g /i /m的用法 正则的思想都是一样的，但是具体的写法会有所不同，在这里提到的/g,/i,/m在其他的地方也许就不能用了。 一，js正则标志/g,/i,/m说明 1，/g 表示该表达式将用来在输入字符串中查找所有可能的匹配，返回的结果可以是多个。如果不加/g最多只会匹配一个 2，/i 表示匹配的时候不区分大小写 3，/m 表示多行匹配，什么是多行匹配呢？就是匹配换行符两端的潜在匹配。影响正则中的^$符号 二，实例说明 1，/g的用法 查看复制打印? 2，/i的用法 查看复制打印? 3，/m的用法 查看复制打印? //从上例中可以看出/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

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 ...

怎样用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); ...

Javascript 加载顺序 Javascript加载顺序 http://www.benben.cc/blog/?p=9 最近经常看到别人提及Javascript脚本的加载顺序,看完之后虽略有所悟,但古人云"纸上得来终觉浅,绝知此事要躬行。“这句话云的好,所以我决定亲自测试一下,看看浏览器究竟是怎么加载脚本的。 先看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(’’); document.write(’’); 最后是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) ,因此在实际应用中若非迫不得已还是少用为妙。

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 ...

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 特性。 ...

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);

javascript Location location.href 返回整个当前url,若对其赋值: location.href=“http://www.highya.com” 则跳转其url location.host 返回域名和端口号，如: www.highya.com:80 lcation.hostname 返回域名 location.port 返回端口 location.pathname 返回域名后第一个斜框后的字符串 location.hash 跳到本页的某个锚 location.search 取url?后的部分 location对象: location提供了关于当前打开窗口或者特定框架的url信息。一个多框架的窗口对象在location属性显示的是父窗口的URL，每个框架也有一个与之相伴的location对象。 hash属性: hash标注是一个url很好的习惯用法，它指定浏览器到一个位于文档中的anchor位置，相当于一个书签儿。 host属性: 描述渔歌url的主机名和端口，只有端口号是url的一个明确部分时，值中才包括端口号。 hostname属性: 一个典型的url的主机名是网络上服务器的名字，该网络存储有你的浏览器上可以查看的文档。对大多数Web站点来说，服务器名不仅包括域名，也包括www前缀，如果端口号是在url中特有的话，主机名并不包括，而是包括在host属性中。 href属性: 该属性提供一个指定窗口对象的整个url的字符串。 pathname属性: url的路径名部分由与服务器root (根) 卷相关的目录结构组成。根不是目录的一部分，如果url的路径是通向根目录中的一个文件，那么location.pathname属性就是 (/) 。 port属性: 端口号很少用到。当指向一个没有赋给域名的的站点的url中，可以用location.port属性获取该值，如果从一个url获取值并想用那个组建创建一个url，一定要包括服务器IP地址和段口号，IP地址和段口号之间用 (:) 分界。 protocol属性: 包括协议名，且后面紧跟着 (:) 分节目。 assign方法: assign(“url”)通过这个方法可以实现把一个新的url赋给location对象。当然你也可以采用直接赋值的方法来实现，或者location.href来导航到一个新的网页。采用assign的方法会使代码易维护。 reload方法: 这个方法可以把浏览器可能保存在内存中的元素 (在一段记录中) 的文档设置全部忽略掉，重新打开该文档，和浏览器上的刷新可不一样。它的效果好像是你选择了file菜单open file一样。当然如果你不想这样，不想这么做，有一个和这个方法比较类似的方法，就是history.go () 方法。 replace方法: 当用户从当前网页，跳转到别的网页，有时候是不是想让不能用后退按钮(Back)看到前一个网页，告诉你一个方法，就是采用location.replace(“url”)就可以实现这个功能。