js代码

模块化Javascript编程基础

房东的猫 提交于 2019-12-07 10:10:36
(一) 随着网站逐渐变成" 互联网应用程序 ",嵌入网页的Javascript代码越来越庞大,越来越复杂。 网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑。 Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。 但是,Javascript不是一种模块化编程语言,它不支持" 类 "(class),更遑论"模块"(module)了。(正在制定中的 ECMAScript标准 第六版,将正式支持"类"和"模块",但还需要很长时间才能投入实用。) Javascript社区做了很多努力,在现有的运行环境中,实现"模块"的效果。本文总结了当前"Javascript模块化编程"的最佳实践,说明如何投入实用。虽然这不是初级教程,但是只要稍稍了解Javascript的基本语法,就能看懂。 一、原始写法 模块就是实现特定功能的一组方法。 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。   function m1(){     //...   }   function m2(){     //...   } 上面的函数m1()和m2(),组成一个模块。使用的时候,直接调用就行了。 这种做法的缺点很明显:"污染"了全局变量

arcgis for js 小功能组件大集合

偶尔善良 提交于 2019-12-07 10:04:47
大家可能觉得既然是地图,那么肯定有一些跟用户交互的一些组件或者小功能什么的吧,聪明,确实有这些功能,漫游,放大,缩小,测面积,定位等等,这次来个大集合,为什么来大集合呢,我是不会告诉你我是因为研究这些功能的时候都把代码写在一起了,懒得分开了,我真是太(sang)机(xin)智(bing)了(kuang)!!! 贴下代码 <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title > arcgis地图完整功能 </ title > < link rel = "stylesheet" type = "text/css" href = "./arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css" /> < link rel = "stylesheet" type = "text/css" href = "./arcgis_js_api

JS格式化代码和高亮显示

╄→гoц情女王★ 提交于 2019-12-07 06:28:05
前端开发中经常遇到了一个需要,即在页面上显示一些代码。这时候就需要考虑在前端对某些代码进行格式化处理,比如压缩过的JS。格式化之后,为了显示效果,需要进行代码高亮。 为解决这两个问题,引入两个常用库。 JS Beautifier https://github.com/beautify-web/js-beautify 基于JS的代码格式化,支持 JS,HTML,CSS。可以将压缩过的文件,格式化成方便阅读并符合常规规范的格式。 例如: if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];} 会格式化成: if ('this_is' == /an_example/) { of_beautifier(); } else { var a = b ? (c % d) : e[f]; } 在 http://jsbeautifier.org/ 可以看到效果演示 基础用法: 导入JS文件(下面列的是GitHub项目主页上列出的CDN,也可以将文件下载到本地再引入): <script src=" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.14/beautify.js "></script> <!-- 用于JS格式化 --> <script src

js和java中正则表达式的易混淆点

删除回忆录丶 提交于 2019-12-07 02:59:40
js中正则表达式的使用 对表单中的值进行正则表达式匹配一般有两种方法: var reg = new RegExp(regStr); reg.test(value); 如下: var reg = new RegExp(“\\d{3}”); reg.test(“abc123def”); 结果:true 注:new RegExp中传的是正则表达式的字符串,\需要用\转义。 str.match(regex); 如”abc123def”.match(/\d{5}/); 结果:123 注:match中传的是正则表达式。不需要加””,以/开头和结束。\不需要转义。 js中对值的全匹配 通常在写网页时要用js对表单中的用户名、Email等验证。这时候验证并不是在value值中找到某一部分,而是要匹配全部。如下 如上图,如果用以下代码验证 var reg = new RegExp(“[a-zA-Z]{6,8}”); reg.test(value) 当6个以下字符时是不匹配的,6-8个时是匹配的,但8个以上时仍然是匹配的。 js中正则表达式相关函数RegExp.test()和String.match()等函数都是在字符串中寻找是否有符合正则表达式的,而非字符串一定要和正则表达式想对应。 所以如果想要按要求匹配,应该加上开始结束字符,开头和结尾统一内容,正确的正则表达式:/^[0-9a-zA-Z]{6

JS监听键盘事件

若如初见. 提交于 2019-12-07 02:22:28
document.οnkeyup=function(event){ console.log(event);//显示event具体信息 } 根据onkeyup,可以衍生出监听input文字改变,代码如下 html: <div>我负责显示input输入的内容</div> <input type="text" οninput="Keydowm()"> js: var div = document.getElementsByTagName(); var input = document.getElementsByTagName("input"); function Keydowm(){ document.onkeyup = function(event){ div[0].innerHTML = input[0].value; } } emmmm 来源: CSDN 作者: qq_38024520 链接: https://blog.csdn.net/qq_38024520/article/details/79568647

HTML基础之JS

只谈情不闲聊 提交于 2019-12-07 00:32:39
在HTML中可以将JavaScript/JS的代码写在head中,被script标签所包裹,当浏览器解释HTML时,遇到style标签时,按照CSS规则解释,遇到Script标签时,按照JavaScript的语法规则解释。 引入JavaScript代码,类似于Python的import <script src="public.js" type="text/javascript"></script> head中引入JS与body中引入JS区别 html代码从上而下解析,如果在head中引入JS,影响页面打开的速度,存在风险,所以通常放在htmlbody的最下方,这样页面内容先展示,最后在加载JS。注:写在最下面要有底线,写在body内部的最底下。 注释 单行注释通过 // 多行通过 /* */ JS变量 es5 name = 'dsx'; // 默认全局变量 function func() { var name = 'niulaoshi'; // 局部变量 } es6 // let 定义的变量没有 预解析,let可以用来定义局部变量 alert(num1); let num1 = 1; alert(num1); // const 也没有变量预解析 const 定义常量,定义的程序不可以修改 const num2 = 2; alert(num2); num2 = 3

使用js生成GUID的方法

…衆ロ難τιáo~ 提交于 2019-12-07 00:22:30
转载自:https://www.cnblogs.com/kongxiaoshuang/p/6797126.html function GUID () { this .date = new Date (); /* 判断是否初始化过,如果初始化过以下代码,则以下代码将不再执行,实际中只执行一次 */ if ( typeof this .newGUID != 'function' ) { /* 生成GUID码 */ GUID .prototype. newGUID = function () { this .date = new Date (); var guidStr = '' ; sexadecimalDate = this . hexadecimal ( this . getGUIDDate (), 16 ); sexadecimalTime = this . hexadecimal ( this . getGUIDTime (), 16 ); for ( var i = 0 ; i < 9 ; i ++ ) { guidStr += Math . floor ( Math . random () * 16 ). toString ( 16 ); } guidStr += sexadecimalDate; guidStr += sexadecimalTime; while

使用js生成GUID

别等时光非礼了梦想. 提交于 2019-12-07 00:18:06
使用方法: 1、 生成一个新 GUID : var guid = Guid.NewGuid(); 2、 生成一个所有值均为 0 的 GUID : a) var guid = new Guid(); b) var guid = Guid.Empty; 3、 比较两个 GUID 是否相等: g1.Equals(g2); 4、 获取 Guid 的字符串形式。其中, format 为 String 类型的可选参数,其含义为: a) “N” : xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx b) “D” 由连字符分隔的 32 位数字 xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx c) “B” 括在大括号中、由连字符分隔的 32 位数字: {xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx} d) “P” 括在圆括号中、由连字符分隔的 32 位数字: (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx) 代码如下: // 表示全局唯一标识符 (GUID) 。 function Guid(g){ var arr = new Array(); // 存放 32 位数值的数组 if ( typeof (g) == "string" ){ // 如果构造函数的参数为字符串 InitByString(arr,

JS生成GUID方法

ぐ巨炮叔叔 提交于 2019-12-07 00:17:52
全局唯一标识 (GUID)是一种由算法生成的二进制长度为 128位 的数字标识符,GUID主要用于拥有多个节点,多台计算机的网络或系统中。在理想情况下任何计算几何计算机群都不会生成两个相同的GUID,GUID的总数为 2^128 个,理论上是很难会两个相同。GUID 的格式为“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”,其中每个 x 是 0-9 或 a-f 范围内的一个十六进制数。例如:6F9619FF-8B86-D011-B42D-00C04FC964FF 即为有效的 GUID 值。 需要GUID的时候,可以完全由算法自动生成,不需要一个权威机构来管理。 GUID理论上能产生全球唯一的值,对于以后的数据导入很方便。 生成两个相同的GUID的可能性非常小,但不为0,所以生成GUID的短发通常都加入了非随机的参数(如 事件)保证这种重复情况绝对不会发生。 方法一: function GUID() { this.date = new Date(); /* 判断是否初始化过,如果初始化过以下代码,则以下代码将不再执行,实际中只执行一次 */ if (typeof this.newGUID != 'function') { /* 生成GUID码 */ GUID.prototype.newGUID = function () { this.date = new

eclipse出现"Building workspace". Java heap space

廉价感情. 提交于 2019-12-06 23:28:59
eclipse在引入量比较大的js文件后,出现错误An internal error occurred during: "Building workspace". Java heap space。导致eclipse提示错误,并且无法Building workspace。 解决办法,关掉js文件的Validator验证。 进入工程代码所在目录,编辑.project文件,去掉以下两处代码: <buildCommand> <name>org.eclipse.wst.jsdt.core.javascriptValidator</name> <arguments> </arguments> </buildCommand> <nature>org.eclipse.wst.jsdt.core.jsNature</nature> 保存文件。然后重启eclipse解决问题。 来源: oschina 链接: https://my.oschina.net/u/1758727/blog/666792