js | 易学教程

你不知道的高性能Javascript

阅读更多关于你不知道的高性能Javascript

想必大家都知道，JavaScrip是全栈开发语言，浏览器，手机，服务器端都可以看到JS的身影。本文会分享一些高效的JavaScript的最佳实践，提高大家对JS的底层和实现原理的理解。数据存储计算机学科中有一个经典问题是通过改变数据存储的位置来获得最佳的读写性能，在JavaScript中，数据存储的位置会对代码性能产生重大影响。 – 能使用{}创建对象就不要使用new Object，能使用[]创建数组就不要使用new Array。JS中字面量的访问速度要高于对象。 – 变量在作用域链中的位置越深，访问所需实践越长。对于这种变量，可以通过缓存使用局部变量保存起来，减少对作用域链访问次数 – 使用点表示法（object.name）和操作符（object[name]）操作并没有太多区别，只有Safari会有区别，点始终更快循环在JS中常见的循环有下面几种： for(var i = 0; i < 10; i++) { // do something} for(var prop in object) { // for loop object} [1,2].forEach(function(value, index, array) { // 基于函数的循环}) 毋庸质疑，第一种方式是原生的，性能消耗最低的，速度也最快。第二种方式for-in每次迭代都回产生更多的开销（局部变量）

用白话讲解JS中的继承核心

阅读更多关于用白话讲解JS中的继承核心

【前言】近来因为讲课需要，涉及到使用JavaScript中的继承，但发现遇上不懂的同学，无法用一句话带过，因为周边涉及的知识点比较多，因此决定系统的来说一说，我先简单用一点图来描述什么是继承。（不懂的同学可以先忽略英文）请先忽略prototype等看不懂的单词，可以看到祖宗改变就能影响后代，这样也就让我们能改一处，多出发生变化，减轻了工作量，提高了效率。【继承的思路】总的来说继承可以理解为设置属性或功能的多复用，那么大致有2条路子实现该功能。 1：祖宗构造函数的原型，其是创建对象时参照的模板，所有实例共享该原型对象的是属性及函数。 2：祖宗构造函数本身的复用，在子孙构造函数内部调用祖宗的构造函数，因此执行了祖宗的构造方法，从而子孙享有祖宗构造过程。【构造函数继承】重点就是子类调用父类构造函数来创建对象 // 人类 function People () { this.description = '人类'; } // 学生 function Student () { // 调用People函数，改变this指向 People.call(this); } var s = new Student(); s.description; // 人类【原型继承】重点是子类使用父类原型来共享 // 人类 function People () {} People.prototype

js通过Object.style.property=new style;改变html样式

阅读更多关于 js通过Object.style.property=new style;改变html样式

HTML中的DOM（Document Object Model）文档对象模型允许 JavaScript 改变 HTML元素和CSS样式，//语法:Object.style.property=new style;其中Object是获取的元素对象，如通过document.getElementById("id")获取的元素。 e.g;改变 <div> 元素的样式，将背景改为蓝色、高度60px、颜色白色、大小18px、字体为宋体或雅黑，展示代码如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>改变HTML样式</title> 6 </head> 7 <body> 8 <div id="ceshi">《朝花夕拾》原名《旧事重提》，是现代文学家鲁迅的散文集，文集以记事为主，饱含着浓烈的抒情气息，往往又夹以议论，做到了抒情、叙事和议论融为一体，优美和谐，朴实感人。作品富有诗情画意，又不时穿插着幽默和讽喻；形象生动，格调明朗，有强烈的感染力...</div> 9 <script type="text/javascript"> 10 var myceshi=document.getElementById('ceshi'); 11 myceshi.style.background='#0000FF';

AngularJS从构建项目开始

阅读更多关于 AngularJS从构建项目开始

AngularJS体验式编程系列文章，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。关于作者张丹(Conan), 程序员Java,R,PHP,Javascript weibo：@Conan_Z blog: http://blog.fens.me email: bsspirit@gmail.com 转载请注明出处： http://blog.fens.me/angularjs-yeoman-project/ 前言随着AngularJS被越来越多的开发人员所了解，AngularJS的应用受到市场的好评。AngularJS是一种新型的以Javascript为基础的框架，以后台的编程思路影响着web前端的开发。在扎根细节之前，让我们先了解AngularJS项目构架。自顶向下的开始，就是不一样的开发。Angular体验式编程从此开始。目录 AngularJS介绍构建AngularJS项目（Yeoman，angular-seed）

JS基础

阅读更多关于 JS基础

JS基础 1、什么是javascript？ JavaScript ———— 一个面向对象的跨平台脚本语言。(高级编程语言) 什么是面向对象？什么是跨平台？什么是脚本？凡是不能独立执行需要依赖其他程序的，通常都叫做脚本。 HTML文件必须在浏览器里执行。 JS文件必须嵌入到HTML文件里才能执行。 1.1.JS和HTML、CSS的关系如果将我们建设一个网站比作是建设一栋大楼的话。 1. html 相当于这栋楼的骨架 2. Css 相当于这栋楼的装修 3. JavaScript 相当于管理这栋楼的物业，让我们住在这个小区，有更好的入住体验。 2、JavaScript能做什么？ ■网页特效（漂浮的广告） ■用户记住账户名密码 ■网页游戏(围住神经猫) ■…… 3、JavaScript的历史 JavaScript 诞生于 1995 年。它当时的目的是为了验证表单输入的验证。因为在 JavaScript问世之前，表单的验证都是通过服务器端验证的。而当时都是电话拨号上网的年代，服务器验证数据是一件非常痛苦的事情。 1995 年，当时工作在 Netscape(网景)公司的布兰登(Brendan Eich)为解决类似于 “向服务器提交数据之前验证”的问题。在 Netscape Navigator 2.0 与 Sun 公司联手开发一个称之为 LiveScript 的脚本语言

JS实现浏览器点击下载图片

阅读更多关于 JS实现浏览器点击下载图片

点击下载图片分两种： 1、一种是同源地址图片（也就是本地本项目中的图片）； 2、另一种是不同源的图片；（不同域名下，比如阿里云七牛云上的图片）下面我们就具体说一下这两种图片下载的方式：第一种（同源）下载：利用a标签下载， a标签有一个download的属性，添加了该属性，a标签将直接下载文件，并根据download属性的值设置下载文件的文件名，不为download属性设置值则文件将以默认文件名下载: 如：  <a href="./baidu_jgylogo3.gif" download />  <a href="./baidu_jgylogo3.gif" download="baidu" />  <a href="./baidu_jgylogo3.gif" download="baidu.png" /> 注意，它仅支持同源链接下载，非同源链接还是会直接打开图片: 如非同源 <a href="http://www.baidu.com/img/baidu_jgylogo3.gif" download /> 第一种（不同源）下载：直接上代码 var x=new XMLHttpRequest(); x.open("GET", "http://danml.com

JS作用域面试题总结

阅读更多关于 JS作用域面试题总结

关于JS作用域问题，是面试的时候面试官乐此不疲的面试题，有时候确实是令人抓狂，今天看到一个讲解这个问题的视频，明白了那些所谓的“原理”顿时有种豁然开朗的感觉~~~ 1.js作用域（全局变量，局部变量）内部可以访问外部，但外部的不能访问内部的 var a=10; function aaa(){ alert(a); }; aaa(); //a 为外部变量即全局变量，所以可以直接访问到结果为10 function aaa(){ var a=10; }; aaa(); alert(a); //a 为函数aaa()内部变量量即局部变量，所以无法访问到 var a=10; function aaa(){ alert(a); }; function bbb(){ var a=20; aaa(); } bbb(); //结果为10，因为aaa()函数不能访问到bbb()里面的局部变量，所以访问到的是a=10,这个全局变量。 2.不用var 定义变量时，会默认为是全局变量（不规范，不推荐） function aaa(){ a=10; } aaa(); alert(a); //结果为10; //等价于： var a; function aaa(){ a=10; }; aaa(); alert(a); //给未声明的变量赋值，此变量就会变成全局变量；var a=b=10; 可以解析成 b=10；var

JS 瀑布流效果

阅读更多关于 JS 瀑布流效果

JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS瀑布流效果</title> <style> * { margin: 0px; padding: 0px; } #container { position: relative; } .box { padding: 5px; float: left; } .box_img { padding: 5px; border: 1px solid #cccccc; box-shadow: 0 0 5px #ccc; border-radius: 5px; } .box_img img { width: 150px; height: auto; } </style> </head> <body> <div id="container"> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div> <div class="box"> <div class

js正则表达式，最简要的笔记

阅读更多关于 js正则表达式，最简要的笔记

js正则表达式，最简要的笔记 1. 正则表达式不用引号，是 RegExp 的简写形式，因此 /[0-9]*/ 等同于 new RegExp("[0-9]")，而 /[0-9]*/gmi 等同于 new RegExp("[0-9]", "gmi"); 2. 上面的 g/m/i, g 表示全部匹配（否则只返回第1个匹配），m 表示支持多行，i 表示不区分大小写； 3. 与查找 str.indexOf(keyword) 相对应的正则搜索是 str.search(reg); 4. 替换 str.replace(keyword, newValue) 中的 keyword 支持正则表达式，根据第 1 条，两种形式都可以； 5. 用 str.replace(new RegExp("[0-9]", "g"), newValue) 可以实现全部替换，相当于 replaceAll; 6. 仍然是替换，第二个参数可以是一个回调函数，用于对匹配到的内容进行加工后返回要替换的新值。 str.replace(new RegExp("wake", "gi"), function(match, pos, originText){ return "<strong>" + match + "</strong>"; }) match 保持了原内容。来源： https://www.cnblogs.com/qkhh/p

js 唤醒app

阅读更多关于 js 唤醒app

if (isAndroid){ function android(){ window.location.href = " openwjtr://com.tyrbl.wjtr " ; /***打开app的协议，有安卓同事提供***/ window.setTimeout( function (){ window.location.href = " http://www.wjtr.com/download/index.html " ; /***打开app的协议，有安卓同事提供***/ },2000); }; if (isiOS){ function ios(){ var ifr = document.createElement( "iframe" ); ifr.src = " openwjtr://com.tyrbl.wjtr " ; /***打开app的协议，有ios同事提供***/ ifr.style.display = "none" ; document.body.appendChild(ifr); window.setTimeout( function (){ document.body.removeChild(ifr); window.location.href = " http://www.wjtr.com/download/index.html " ; /**

订阅 js