一、定位技术
1.1 定位技术有哪些
- GPS - 美国(卫星定位):1、缴纳版权费用 2、安全性低
- 北斗 - 中国自主:最初并不是民用,而是军用,使用的是惯性定位(定位并不精准),后期发展为了民用,添加了卫星定位了(更精确了)
- 基站定位 - 信号的范围发射,可以检测到你现在的信号属于哪个范围。
- IP定位
1.2 网站的定位技术都是使用的GPS
1.3 开发者如何使用百度/高德地图
- 打开百度:搜索百度地图开放平台
- 注册、登录百度账号
- 拉到最下面、点击立即注册成为开发者
- 进入控制台
- 应用管理->我的应用->创建应用->实名认证->获得密钥(AK)
- 鼠标移动到导航条->放到开发文档上->web开发->JavaScript API->示例DEMO
- 挑选出你喜欢的地图,然后复制全部代码(HTML/CSS/JS),到你需要的位置
- 查询经纬度:api.map.baidu.com/lbsapi/getp…
- 百度地图你看上的每一个都可以混搭在一起,但是一定要注意版本:普通版(老) 和 webGL(新),是不可以混搭的
二、匿名函数
没有名字的函数
2.1 匿名函数的两种用法
- 自调:只能执行一次,函数中的没用的变量是会自动释放的
<script>
(function(){
console.log(1);
})()
</script>
- 回调:匿名函数不是自调,就是回调,切的回调函数,都可以简化为箭头函数
elem.on事件名=function(){}
arr.sort(function(){})
var obj={
"方法名":function(){}
}
三、设计模式
不仅仅局限于前端,它是一种编程思想
3.1 单例模式
也称之为单体模式,保证一个类仅有一个实例对象,并且提供一个访问它的全局访问点
<script>
// 最简单的单例模式 利用let不允许重复声明的特性 不推荐
/* let obj = {
"name" : "张三",
"getName" : function () {
return this.name
}
}
console.log(obj);
console.log(obj.name);
console.log(obj.getName()); */
// 推荐写法
var h52301 = (function () {
let state = null
return function(name,age) {
this.name = name;
this.age = age;
if (state) {
return state
}
return state = this
}
})()
h52301.prototype.say = function () {
console.log(this.name);
}
var zs = new h52301('张三',18)
console.log(zs);//{name: '张三', age: 18}
var ls = new h52301('李四',20)
console.log(ls);//{name: '张三', age: 18}
zs.say()//张三
ls.say()//张三
console.log(zs==ls);//true
</script>
3.2 发布订阅模式
<button id="btn">发布</button>
<script>
let obj = {};
// 创建订阅者
function on(id,fn) {
if (!obj[id]) {
obj[id] = []
}
obj[id].push(fn)
}
on("张三",(msg)=>{console.log('1111',msg);})
on("张三",(msg)=>{console.log('2222',msg);})
console.log(obj);//{"张三":[fn,fn]}
// 发布者的操作
function emit(id,msg) {
obj[id].forEach(fn=>fn(msg))
}
btn.onclick = () => {
emit('张三','5555')
}
</script>
四、事件轮询
js其实是单线程引用,代码必然是从上向下,一步一步的执行,如果某一块代码非常耗时,可能会导致整个页面卡住,尤其如果你把js放在head之中,会看到页面是一个白板
4.1 宏任务:
不会再卡住我们的单线程应用,可以让后续代码先走,但是多个宏任务同时存在,到底谁先执行谁后执行,分不清
- 定时器:setInterval和setTimeout
- Ajax
<script>
setTimeout(function(){
console.log(1);
},Math.random()*3000)
setTimeout(function(){
console.log(2);
},Math.random()*3000)
setTimeout(function(){
console.log(3);
},Math.random()*3000)
console.log('后续代码');
</script>
4.2 微任务:
ES6提供的Promise对象,可以控制异步代码执行的顺序
<script>
function ajax1(resolve) {
setTimeout(()=>{
console.log(1);
resolve()
},Math.random()*3000)
}
function ajax2() {
return new Promise
(resolve=>{
setTimeout(()=>{
console.log(2);
resolve()
},Math.random()*3000)
})
}
function ajax3() {
setTimeout(()=>{
console.log(3);
},Math.random()*3000)
}
new Promise(ajax1).then(ajax2).then(ajax3)
console.log('后续代码');
</script>