WEB前端学习代码片段记录
1.JS设计模式片段
Function.prototype.addMethod = function (name,fn) {
this.prototype[name] = fn;
return this;
};
var Methods = function(){};
Methods.addMethod('checkName',function () {
//验证姓名
console.log('姓名');
}).addMethod('checkEmail',function () {
//验证邮箱
console.log('邮箱');
});
var m = new Methods();
m.checkName();
m.checkEmail();
2.canvas图片预加载及进度条的实现
/*star
*loading模块
*实现图片的预加载,并显示进度条
*参数:图片数组对象,加载完成的回调函数
*/
function loadImages(sources,callback){
var loadedImages = 0;
var numImages = 0;
ctx.font='14px bold';
ctx.lineWidth=5;
var clearWidth=canvas.width;
var clearHeight=canvas.height;
// get num of sources
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
//当一张图片加载完成时执行
images[src].onload = function(){
//重绘一个进度条
ctx.clearRect(0,0,clearWidth,clearHeight);
ctx.fillText('Loading:'+loadedImages+'/'+numImages,200,280);
ctx.save();
ctx.strokeStyle='#555';
ctx.beginPath();
ctx.moveTo(200,300);
ctx.lineTo(600,300);
ctx.stroke();
ctx.beginPath();
ctx.restore();
ctx.moveTo(200,300);
ctx.lineTo(loadedImages/numImages*400+200,300);
ctx.stroke();
//当所有图片加载完成时,执行回调函数callback
if (++loadedImages >= numImages) {
callback();
}
};
//把sources中的图片信息导入images数组
images[src].src = sources[src];
}
}
//定义预加载图片数组对象,执行loading模块
window.onload = function(){
var sources = {
PaperBoy1: "images/run/PaperBoy1.png",
PaperBoy2: "images/run/PaperBoy2.png",
PaperBoy3: "images/run/PaperBoy3.png",
PaperBoy4: "images/run/PaperBoy4.png"
};
//执行图片预加载,加载完成后执行main
loadImages(sources,main);
};
/*end*/
3.JS实现跨浏览器添加事件与移除事件怎样做才最优?
一般的兼容做法,如下:
跨浏览器添加事件
//跨浏览器添加事件
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){//IE
obj.attchEvent('on'+type,fn);
}
}
跨浏览器移除事件
//跨浏览器移除事件
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){//兼容IE
obj.detachEvent('on'+type,fn);
}
}
推荐写法
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
参考地址:
addEvent()
recoding contest entry
4.Ajax用jsonp方式跨域发送请求小实例
众所周知,Ajax是通过创建XMLHttpRequest对象或ActiveXObject来连接服务器、发送请求以及响应数据,但它却不能跨域。而在分布式系统中我们又需要跨域发送接受数据,于是jsonp出现了...
它是一种跨域请求方式,主要利用了script标签里的src属性,该属性可以跨域发送请求,然后服务器返回js代码,网页端便响应其信息,然后我们可以对其传过来的js代码做处理提取其中的信息。
jsonp发送请求只需在src后面添加“?callback=函数名”就可以,例如“http://www.item.com/list?callback=myfunction
",则只需在服务端接受参数myfunction
并将函数名与想要返回的数据拼接就可以例如在java中响应该请求,可以获取参数callback的值myfunction,再拼接成myfunction+"("+data+")"格式返回就行,在前端写同名函数接受data并处理就可以了。但在jquery中对jsonp进行了封装,返回函数就是success
,数据也用success接受。
例如:
前端代码:
//发送请求
$.ajax({
//url:"http://localhost:8081/rest/itemcat/list?callback=getMessage",
url:"http://localhost:8081/rest/itemcat/message",
type:"get",
cache:false,
dataType:"jsonp",
jsonp:"callback", //这里定义了callback的参数名称,以便服务获取callback的函数名即getMessage
jsonpCallback:"getMessage", //这里定义了jsonp的回调函数
success:function(data){
alert("success:"+data);
},
error:function(){
alert("发生异常");
}
}); function getMessage(jsonp){
alert("message:"+jsonp);
}
这样发出的请求为:http://localhost:8081/rest/itemcat/message?callback=getMessage
jsonp:"callback",
jsonpCallback:"getMessage",
这两个参数的值会自动拼接在url后面,所以用jquery的$.ajax方法发出的url可以不用在后面添加callback=getMessag,返回函数则变为了success而不是getMessage
5.使用高德地图API创建地图以及获取当前地址经纬度
创建API地图带有点标记
<script src="http://webapi.amap.com/maps?v=1.4.1&key=bcf87f3263f98cc37309298bca20c622"></script>
<script type="text/javascript">
// 实例化点标记
function addMarker() {
marker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [116.41, 39.91]
});
marker.setMap(map);
} var map = new AMap.Map('container', {
resizeEnable: true,
center: [116.40, 39.91],
zoom: 13
});
addMarker();
</script>
根据浏览器定位获取当前经纬度
<div id="container_display"></div>
<script src="https://webapi.amap.com/maps?v=1.4.1&key=bcf87f3263f98cc37309298bca20c622"></script>
<script>
function loadingCurrentPosition(callback){ document.getElementById('container_display').innerHTML = '';
//加载地图,调用浏览器定位服务
map = new AMap.Map('container_display', {
resizeEnable: true
});
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
buttonPosition:'RB'
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
//解析定位结果
function onComplete(data) {
var getLngdata = data.position.getLng();
var getLatdata = data.position.getLat();
if(callback){
callback(getLngdata,getLatdata); //回调参数中传递经度与纬度
}
}
//解析定位错误信息
function onError(data) {
alert('定位失败');
}
} $(function(){
var getLng = ''; //存经度
var getLat = ''; //存纬度
//默认加载一次自动获取当前人的位置
loadingCurrentPosition(function(lngdata,Latdata){
getLng = lngdata;
getLat = Latdata;
});
$(".getCurrentPosition").on('click',function(){
loadingCurrentPosition(function(lngdata,Latdata){
getLng = lngdata;
getLat = Latdata;
});
});
}) </script>
高德地图根据浏览器定位获取当前经纬度API案例地址:http://lbs.amap.com/api/javascript-api/example/location/browser-location
高德开放平台:http://lbs.amap.com/api
6.JS创建canvas学习小例代码
1.HTML5中的Canvas标签的创建
window.onload = function(){
createCanvas();
}
function createCanvas(){
var canvas_width= 200, canvas_height = 200;
document.body.innerHTML = "<canvas id=\"canvas\" width=\""+canvas_width+"\" height=\""+canvas_height+"\"></canvas>";
}
2.HTML5Canvas标签绘制图形
var canvas_width= 500, canvas_height = 500;
var mycanvas, context;
window.onload = function(){
createCanvas();
drawRect();
}
function createCanvas(){
document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+canvas_width+"\" height=\""+canvas_height+"\"></canvas>";
mycanvas = document.getElementById("mycanvas");
context = mycanvas.getContext("2d");
} function drawRect(){
context.fillStyle ="#FF0000";
//context.rotate(45);//旋转45度
//context.translate(200,200);//移动
//context.scale(2,0.5);//缩放
context.fillRect(0,0,200,200);
}
3.HTML5Canvas标签绘制图片
var canvas_width= 500, canvas_height = 500;
var mycanvas, context;
window.onload = function(){
createCanvas();
drawImage();
}
function createCanvas(){
document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+canvas_width+"\" height=\""+canvas_height+"\"></canvas>";
mycanvas = document.getElementById("mycanvas");
context = mycanvas.getContext("2d");
} function drawImage(){
var img = new Image();
img.onload = function(){
context.drawImage(img,0,0);
}
img.src = "1.png";
}
7.Promise里的代码为什么比setTimeout先执行实例
Promise和setTimeout实例
我们把宿主发起的任务称为宏观任务,把 JavaScript 引擎发起的任务称为微观任务。许多的微观任务的队列组成了宏观任务。
为了理解微任务始终先于宏任务,我们设计一个实验:执行一个耗时 1 秒的 Promise。
setTimeout(()=> console.log('d'),0);
var r = new Promise(function(resolve,reject){
resolve();
}); r.then(() => {
var begin = Date.now();
while(Date.now() - begin < 1000);
console.log("c1"); new Promise(function(resolve,reject){
resolve();
}).then(() => console.log("c2")); })
//c1 c2 d
这里我们强制了 1 秒的执行耗时,这样,我们可以确保任务 c2 是在 d 之后被添加到任务队列。
我们可以看到,即使耗时一秒的 c1 执行完毕,再 enque 的 c2,仍然先于 d 执行了,这很好地解释了微任务优先的原理。
再看一个复杂点的例子:
function sleep(duration) {
return new Promise(function(resolve, reject) {
console.log("b");
setTimeout(resolve,duration);
})
}
console.log("a");
sleep(5000).then(()=>console.log("c")); //a b c
这是一段非常常用的封装方法,利用 Promise 把 setTimeout 封装成可以用于异步的函数。
我们首先来看,setTimeout 把整个代码分割成了 2 个宏观任务,这里不论是 5 秒还是 0 秒,都是一样的。
第一个宏观任务中,包含了先后同步执行的 console.log(“a”); 和 console.log(“b”);。
setTimeout 后,第二个宏观任务执行调用了 resolve,然后 then 中的代码异步得到执行,所以调用了 console.log(“c”),最终输出的顺序才是: a b c。
Promise 是 JavaScript 中的一个定义,但是实际编写代码时,我们可以发现,它似乎并不比回调的方式书写更简单,但是从 ES6 开始,我们有了 async/await,这个语法改进跟 Promise 配合,能够有效地改善代码结构。
新特性:async/await
async/await 是 ES2016 新加入的特性,它提供了用 for、if 等代码结构来编写异步的方式。它的运行时基础是 Promise,面对这种比较新的特性,我们先来看一下基本用法。
async 函数必定返回 Promise,我们把所有返回 Promise 的函数都可以认为是异步函数。
async 函数是一种特殊语法,特征是在 function 关键字之前加上 async 关键字,这样,就定义了一个 async 函数,我们可以在其中使用 await 来等待一个 Promise。
function sleep(duration) {
return new Promise(function(resolve, reject) {
setTimeout(resolve,duration);
})
}
async function foo(){
console.log("a")
await sleep(2000)
console.log("b")
} foo(); //a b
这段代码利用了我们之前定义的 sleep 函数。在异步函数 foo 中,我们调用 sleep。
async 函数强大之处在于,它是可以嵌套的。我们在定义了一批原子操作的情况下,可以利用 async 函数组合出新的 async 函数。
function sleep(duration) {
return new Promise(function(resolve, reject) {
setTimeout(resolve,duration);
})
}
async function foo(name){
await sleep(2000)
console.log(name);
} async function foo2(){
await foo('a');
await foo('b');
} foo2(); //a b
练习:我们现在要实现一个红绿灯,把一个圆形 div 按照绿色 3 秒,黄色 1 秒,红色 2 秒循环改变背景色。
(function (){
var btn = document.getElementById('status');
function sleep(duration){
return new Promise(function(resolve,reject){
setTimeout(resolve,duration);
})
} async function changeColor(duration,color){
btn.style.background = color;
await sleep(duration);
};
async function fn(){
while(true){
await changeColor(3000,'green');
await changeColor(1000,'yellow');
await changeColor(2000,'red');
}
}
fn();
})();
WEB前端学习代码片段记录的更多相关文章
- web前端学习常用网址记录
jetbrains下载各种软件和试用 www.jetbrains.com www.jetbrains.com/idea php服务器下载 php文档查询 php.net webAPI网站(各种教程文档 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
- web前端学习就这9个阶段,你属于哪个阶段?
第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
- web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
随机推荐
- AWS EC2实例Linux系统创建root用户并更改为root用户登录
对于刚创建AWS EC2实例,或者经常使用AWS 实例的小伙伴们来说,刚创建的EC2实例是没有ROOT权限的,因此不能直接使用ROOT用户去登陆实例,也无法获取到root权限.一般情况下,EC2实例默 ...
- 开发自定义ScriptableRenderPipeline,将DrawCall降低180倍
0x00 前言 大家都知道,Unity在2018版本中正式推出了Scriptable Render Pipeline.我们既可以通过Package Manager下载使用Unity预先创建好的Ligh ...
- .NET Core跨平台的奥秘[中篇]:复用之殇
在<.NET Core跨平台的奥秘[上篇]:历史的枷锁>中我们谈到:由于.NET是建立在CLI这一标准的规范之上,所以它天生就具有了"跨平台"的基因.在微软发布了第一个 ...
- Java线程状态Jstack线程状态BLOCKED/TIMED_WAITING/WAITING解释
一.线程5种状态 新建状态(New) 新创建了一个线程对象. 就绪状态(Runnable) 线程对象创建后,其他线程调用了该对象的start()方法.该状态的线程位于可运行线程池中,变得可运行,等待获 ...
- [Swift]LeetCode188. 买卖股票的最佳时机 IV | Best Time to Buy and Sell Stock IV
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- [Swift]LeetCode1031. 两个非重叠子数组的最大和 | Maximum Sum of Two Non-Overlapping Subarrays
Given an array A of non-negative integers, return the maximum sum of elements in two non-overlapping ...
- tensorflow 1.0 学习:十图详解tensorflow数据读取机制
本文转自:https://zhuanlan.zhihu.com/p/27238630 在学习tensorflow的过程中,有很多小伙伴反映读取数据这一块很难理解.确实这一块官方的教程比较简略,网上也找 ...
- 死磕 java集合之TreeMap源码分析(三)- 内含红黑树分析全过程
欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. 删除元素 删除元素本身比较简单,就是采用二叉树的删除规则. (1)如果删除的位置有两个叶子节点 ...
- 一段奇葩Javascript代码引发的思考
今天与一挚友加同事调试一段奇葩的javascript代码,在分析出结果后,让我萌生了写此篇文章的想法,如有不对之处望指正,也欢迎大家一起讨论.缩减后的js代码如下,你是否能准确说明他的输出值呢? fu ...
- RabbitMQ学习笔记(三) 发布与订阅
发布与订阅 在我们使用手机发送消息的时候,即可以选择给单个手机号码发送消息,也可以选择多个手机号码,群发消息. 前面学习工作队列的时候,我们使用的场景是一个消息只能被一个消费者程序实例接收并处理,但是 ...