js代码

欢迎大家前往 腾讯云+社区 ，获取更多腾讯海量技术实践干货哦~ 本文由 郭诗雅 发表于 云+社区专栏 在数学中，极坐标系（英语：Polar coordinate system）是一个二维坐标系统。该坐标系统中任意位置可由一个夹角和一段相对原点—极点的距离来表示。在两点间的关系用夹角和距离很容易表示时，极坐标系便显得尤为有用；而在平面直角坐标系中，这样的关系就只能使用三角函数来表示。对于很多类型的曲线，极坐标方程是最简单的表达形式，甚至对于某些曲线来说，只有极坐标方程能够表示。（来自维基百科） ​ 通过转换，极坐标的(φ, r)可以变换为直角坐标系中的(x,y)坐标，转化公式如下 这样，许多用极坐标函数表示的曲线，都可以在js里面转成直角坐标系并画出来了。下面介绍一下以下几种曲线并用canvas绘制了曲线动画： 1. 心形线 函数： 参数意义：a表示从x轴上从原点到最远点的一半。 js动画：在js中实现时，只需将极坐标角度从0到360代入方程，求出(x,y)坐标 2. 伯努利双纽线 函数： 参数意义：a表示从中心点到两端最远处的距离。 js动画：绘制时，代入角度的区间是[-45，45]，需要绘制(-x,-y)和(x,y)两部分的坐标。 3. 星形线 函数： 参数意义：a表示从中心点到最远处的距离。 js动画：在js中实现时，只需将角度从0到360代入方程，求解过程中不需要转换极坐标

性能优化： 一、减少请求资源大小或者次数　 1、尽量和并和压缩css和js文件。（将css文件和并为一个。将js合并为一个） 　　原因：主要是为了减少http请求次数以及减少请求资源的大小 　　打包工具： 　　webpack 　　gulp 　　grunt .　　.... 2、尽量所使用的字体图标或者SVG图标来代替传统png图 　　因为字体图标或者SVG是矢量图，代码编写出来的，方大不会变形，而且渲染速度快 3、采用图片的懒加载（延迟加载） 　　目的为了，减少页面第一次加载过程中http的请求次数 　　具体步骤： 　　　　1、页面开始加载时不去发送http请求，而是放置一张占位图 　　　　2、当页面加载完时，并且图片在可视区域再去请求加载图片信息 4、能用css做的效果，不要用js做，能用原生js做的，不要轻易去使用第三方插件。 　　避免引入第三方大量的库。而自己却只是用里面的一个小功能 5、使用雪碧图或者是说图片精灵 　　把所有相对较小的资源图片，绘制在一张大图上，只需要将大图下载下来，然后利用 　　图片定位来讲小图展现在页面中（background-position:百分比，数值） 6、减少对cookie的使用（最主要的就是减少本地cookie存储内容的大小），因为客户端 操作cookie的时候，这些信息总是在客户端和服务端传递。如果上设置不当，每次发送

我的上篇博文详细介绍了jquery tmpl，因为我想在我的项目里引入JS模版，所以就研究了一下，有人告诉我这个引擎的速度很慢，于是我又去搜集了一下资料，结果发现jquery tmpl是最慢的，于是乎我就放弃了，对比下来发现胜出的有以下几种artTemplate,dot,juicer三个从速度上胜出(chrome)，但是在IE下最终选择了dot，dot的文件是最小只有5K（没有压缩），并且在IE里也是最快的。 下面介绍下dot的用法，其实用法非常简单 dot的API里有以下几种标签 //{{ }} JS原生态代码 //{{= }} 变量运算，赋值 {{=it.f1 + it.f2}} //{{! }} 赋值并且编码 //{{# }} //{{## #}} 上面两个没有仔细研究，基本我也不用它 //{{? }} 条件语句 //{{~ }} 循环 其实条件语句和循环可以用{{if}}{{else if}}{{for(var i=0;i<length;i++)}}来代替，也就是JS的原生态代码 那么我们用到的只有前三种标签就完全够用了，下面给出一个例子，就很容易看明白了 <script id="tmpl-demo" type="text/tmpl"> {%if($data.suc){%} {%for (var i = 0; i < $data.users.length; i++) { %

晨叔周刊，每周一话题，技术天天涨。 本周的话题是JS的内存问题（加入本周话题，请点击 传送门 ）。 图 话题入口 今天的技术晨报来，就来谈谈JS中变量的，值传递和引用传递的问题。现在，对于很多的JSer来讲，基本不关心堆和栈的问题，代码照样666。 但是，现在的前端，不再是传统的JQ时代，而是MVVM，组件化，工程化。前端的承载着复杂业务逻辑。为此，内存问题，成为JSer必须要考虑的问题。 本文从堆栈讲起，让大家理解JS中变量的内存使用以及变动情况 。 一、初步了解堆栈 先初步了解JS中的堆和栈，首先，内存空间分为 堆和栈两个区域，js 代码运行时，js解析器会先判断变量类型，根据变量类型，将变量放到不同的内存空间中（堆和栈）。 图 1 基本的数据类型（String,Number,Boolean,Null,Undefined）都会分配栈区。而Object （对象）类型的变量都放到堆区。 如下代码示例 1 var a = 12; 2 var b = false; 3 var c = "string" 4 5 var chenshu = {name:"晨叔周刊",desc:"每周一话题，技术天天涨" } 对应的内存分配图如下图2 图 2 栈区的特点：空间小，数据类型简单，读写速度快，一般由JS引擎自动释放 堆区的特点：空间大，数据类型复杂，读写速度稍逊，当对象不在被引用时

版权声明 该文章原创于Qter开源社区（ www.qter.org ），作者yafeilinux，转载请注明出处！ 导语 这一篇我们来加上查找菜单的功能。因为要涉及Qt Creator的很多实用功能，所以单独用一篇文章来介绍。以前都用设计器设计界面，而这次我们用代码实现一个简单的查找对话框。除了讲解怎么实现查找功能，这里还详细地说明了怎么进行类中方法的查找和使用。其中也讲解了Qt Creator程序中怎样在函数的声明位置和定义位置间进行快速切换。 环境是： Windows 7 + Qt 4.8.1+ Qt Creator 2.4.1 目录 一、添加查找对话框 二、实现查找功能 正文 一、添加查找对话框 1. 我们继续在前一篇程序的基础之上进行更改。首先到mainwindow.h文件中添加类的前置声明（对于什么是前置声明，以及这样使用的好处，可以在网上百度）： class QLineEdit ; class QDialog ; 前置声明所在的位置跟头文件包含的位置相同。 然后在private中添加对象定义： QLineEdit * findLineEdit ; QDialog * findDlg ; 下面再添加一个私有槽声明： private slots : void showFindText(); 槽可以看做是一个函数，只不过可以和信号进行关联。 2. 下面到mainwindow

在JS中判断 浏览器 的类型，估计是每个编辑过页面的开发人员都遇到过的问题。在众多的浏览器产品中，IE、Firefox、Opera、Safari........众多品牌却标准不一，因此时常需要根据不同的浏览器，甚至相同浏览器不同版本做不同的操作，因此，知晓浏览器的判断方法，还是很重要的。下面列举一下常用的判断方法： 1、判断浏览器是否为IE document.all ? 'IE' : 'others'：在IE下document.all值为1，而其他浏览器下的值为0； navigator.userAgent.indexOf("MSIE")>0 ? 'IE' : 'others'：navigator.userAgent是描述用户代理信息。 navigator.appName.indexOf("Microsoft") != -1 ? 'IE' : 'others'：navigator.appName描述浏览器名称信息。 2、判断IE版本 navigator.appVersion.match(/6./i)=="6." ? 'IE6' : 'other version'：在已知是IE浏览器的情况下，可以通过此方法判断是否是IE6； navigator.userAgent.indexOf("MSIE 6.0")>0 ? 'IE7' : 'other version'：同上； navigator

说明 JavaScript在比较的时候，会进行隐式转换，你如果对隐式转换不是特别熟悉，结果往往出乎你的意料。 我们来看看这行代码 (![]+[])[+!![]- -+!![]- -+!![]]+({}+[])[+!![]]+(![]+[])[+!![]- -+!![]- -+!![]] 这行代码的结果可能出乎你的意料，看结果 结果居然是sos，这就是为什么会给文章这样一个题目了，这行代码看上去似乎是乱七八糟的，但是相信你看完这篇文章，一定能自己写出这样的代码来。 解释 相信我，这行代码是简单的，它并不复杂，我们先来分解一下这行代码 (![]+[])[+!![]- -+!![]- -+!![]] //s + ({}+[])[+!![]] //o + (![]+[])[+!![]- -+!![]- -+!![]] //s 我们把这一行，分解成了3行了。 先看第一行 (![]+[])[+!![]- -+!![]- -+!![]] 这行还能分成两部分 (![]+[]) [+!![]- -+!![]- -+!![]] 我们继续看这分开的两部分 (![]+[]) 看看这个是什么意思 友情提示： [ ] 转为布尔值是 true [ ] 转为字符串是 "" 如果想知道为什么，推荐看看下面的两篇文章。 简单说 JavaScript中的tostring( ) 与 valueOf( )方法 简单说 !!

1 < SCRIPT LANGUAGE = " JavaScript " > 2 <!-- 3 var maxtime = 60 * 60 // 一个小时，按秒计算，自己调整! 4 function CountDown() { 5 if (maxtime >= 0 ) { 6 minutes = Math.floor(maxtime / 60 ); 7 seconds = Math.floor(maxtime % 60 ); 8 msg = " 距离结束还有 " + minutes + " 分 " + seconds + " 秒 " ; 9 document.all[ " timer " ].innerHTML = msg; 10 if (maxtime == 5 * 60 ) alert('注意，还有5分钟 ! '); 11 -- maxtime; 12 } 13 else { 14 clearInterval(timer); 15 alert( " 时间到，结束! " ); 16 } 17 } 18 timer = setInterval( " CountDown() " , 1000 ); 19 // --> 20 </ SCRIPT > 21 < div id = " timer " style = " color:red " ></ div > 1 <!--

它到底是什么 String Array 都是系统内置对象（已经定义好，可以直接使用）当然，这货也是一样， 我们之前定义的函数，其实就是一个这货的实例。 在 JS 中，所有的对象都是由函数实现的，函数的数据类型是 object 。 So ，我们以前定义的函数也是一个对象。 几种写法 1 function fn1(a,b){ 2 return a+b; 3 } 4 5 //前面表示参数，后面表示函数语句 6 var fn2 = new Function("a","b","return a+b"); 7 8 // 匿名函数 9 var fn3=function(a,b){ 10 return a+b; 11 } 12 13 14 console.log(fn1(1,2)); 15 console.log(fn2(1,2)); 16 console.log(fn3(1,2)); // 注意，一定要在声明函数的后面调用 另外，如果函数没有明确的返回值，或者调用了没有参数的return, 那么它真正 返回的值是 undefined 1 function fn(){ 2 //..... 3 } 4 5 6 function fn1(){ 7 return; 8 } 9 10 11 console.log(fn()===undefined); // true 12 console.log(fn1(

前言： 为了加快开发效率，目前公司一些功能使用H5开发，这里难免会用到Js与Java函数互相调用的问题，这个Android是提供了原生支持的，不过存在安全隐患，今天我们来学习一种安全方式来满足Js与java互相调用的需求。它就是WebViewJavascriptBridge。 学习动机： 先看下之前的解决办法： Android混合开发之WebView与Javascript交互 最近棒棒安全的一个市场推广来我们公司推广他们的产品，当时也没太引起我的注意，后来这个市场推广人员把我们的app的进行了他们的安全验证，然后发给我一份检测报告，关于WebView的检测内容大致如下： 其实目前公司采用H5的业务都是相对不是很重要的一些业务，而且安全性要求相对比较低，不过作为技术负责人的我，觉得现在很有必要尽快寻找一个相对安全的方式来解决这个问题，算是未雨绸缪吧。经过搜过资料寻找的解决办法就是使用WebViewJavascriptBridge来实现Js与Java的互相调用。 WebViewJavascriptBridge介绍： WebViewJavascriptBridge是WebView和Js交互通信的桥梁，用作者的话来说就是实现java和js的互相调用的桥梁。替代了WebView的自带的JavascriptInterface的接口，使得开发者更方便的让js和native灵活交互