JS高级程序设计3
PS：有一小部分写在了 JS 2017了
JSON
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
IE8支持 JSON.stringify()
<script>
var book = {
"title":"js",
"author":"kang",
"edition":3
}
// 1.过滤结果
var res =JSON.stringify(book,['title','author'])
console.log(res);
console.log(JSON.parse(res).title);
// 2 自定义数据
var res2=JSON.stringify(book,function (key, val) {
switch (key){
case "title":
return val+ ' es6'
case "author":
return 'jia'
case "edition":
return undefined
default:
return val
}
})
console.log(res2);
// 3 格式化
var res3=JSON.stringify(book,['title'],2) // 第3个值是格式化属性，可以为数字，代码缩进的空格数，如果是字符串，则是用字符串代替空格来缩进
// var res3=JSON.stringify(book,['title'],'---')
console.log(res3);
// 4 toJSON 不实用
var book2 = {
"title":"es5 es6",
"year":2017,
toJSON:function () {
return this.title
}
}
console.log(book2.toJSON()); // es5 es6
</script>
</body>
</html>
跨域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
IE8通过XDomainRequest对象支持CORS跨域，21.4.5有原生的跨域封装，不知有没有用 JQ没封装
【跨域1】： img标签
一个网页可以从任意网页中加载图像，没有跨域的概念
<script>
var img = new Image();
img.src='http://xxxxxx'
img.onload=function () {
// ... 缺点是得不到任何具体的数据，用于在线广告跟踪浏览量，检测是否接收到而已
}
img.onerror=function () {
// ...
}
</script>
【跨域2】 jsonp
jsonp是通过动态script元素来使用的, JQ有实现
跨域请求，可能其他域不安全，有恶意代码
通过onerror来判断
<script>
function handleResponse() {
// ...
}
var script = document.createElement('script')
script.src='http://xxx?callback=handleResponse' // callback 回调函数
document.body.insertBefore(script,document.body.firstChild)
</script>
【跨域3】 comet ie不支持
【跨域4】 web sockets ie不支持
</body>
</html>
什么是跨域？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。 所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子： http://www.123.com/index.html 调用 http://www.123.com/server.PHP （非跨域） http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域） http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域） http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域） http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域） 请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。
//作用域安全的构造函数
// 多人在同一页面写js代码，推荐使用作用域安全的构造函数，防止乱来
function Person(name, age) {
this.name = name;
this.age = age;
}
var p = new Person('kang', 12)
console.log(p.name);
// 乱来
var p2 = Person('jia', 11)
console.log(window.name); // jia 乱来
// 作用域安全的构造函数，
function Student(hobby, age) {
if (this instanceof Student) {
this.hobby = hobby;
this.age = age;
} else {
return new Student(hobby, age)
}
}
var s1 = Student('play', 3)
console.log(window.hobby); // undefined 防止乱来
console.log(s1.hobby);
// 防篡改对象 preventExtensions 密封对象seal 冻结对象freeze
// 防篡改对象 preventExtensions
var f1 = {name: 'xx'}
Object.preventExtensions(f1); // es5
f1.age = 22;
console.log(f1.age); // undefiend
delete f1.name;
console.log(f1.name); // 属性被删除
// 密封对象 seal
var f2 = {name: 'xx'}
Object.seal(f2); // es5
f2.age = 22;
console.log(f2.age); // undefiend
delete f2.name;
console.log(f2.name); // xx 对象密封后，删除不了对象属性
// 冻结对象 freeze 不能修改原有属性值
var f3 = {name: 'xx'}
Object.freeze(f3); // es5
f3.name = 22
console.log(f3.name);
第22章 22.1高级函数
安全的类型检测
惰性载入函数 22.1.3 P620页 处理多个 if else
函数绑定
函数柯里化
脚本长时间运行的原因之一是有大量处理的for循环，可用定时器切割成小任务 第22章 22.3.2
操作DOM比起非DOM交互需要更多的内存和CPU时间，当使用 onresize调整窗口大小事件时，事件会连续触发，可用定时器
限制100ms后才调用某函数，如果 100ms内调用函数20次，则函数只会被调用一次（定时器会把重复的请求给忽略掉，当上一次调用未执行时，新的请求会被忽略）
第22章 22.3高级定时器
// 断网 online offline navigator.onLine()
window.addEventListener('online', function () {})
// sessionStorage localStorage ie8+
js规范
<script>
// js规范
/*
* 变量名为名词 ，car
* 函数名为动词， getCar() isPhone()
* 变量名和函数名不用担心长度，可压缩
* 变量初始化一：
* var found = false // 表示布尔型
* var person = null; // 表示对象
* 变量初始化二：
* var bFound; // 布尔型'b' 对象'o' 字符串's' 'i'整数 ’f'浮点数
* var iCount; // 整数
* var oPerson; //对象
* var sName; // 字符串
* */
// html与js分离
/*
* 减少用js追加html，可在html中直接显示html，再隐藏
* */
// 应用逻辑和事件处理分开成两个函数
function validate(value) {
value = 5 * parseInt(value)
if (value > 10) {
document.getElementById('error-msg').style.display = 'block'
}
}
function handleKeyPress(event) {
if (event.keyCode == 13) {
validate(event) // 把逻辑代码独立出来
}
}
// 只为自己创建的对象 var Index = function(){} 添加方法，不为 Array、document等原生对象添加方法
// 减少全局变量,改成对象的形式
var name = 'kang';
function getName() { // 两个全局变量 name 和 getName
return name;
}
var MyName = { // 对象写法
name: 'kang',
getName: function () {
return name;
}
}
// 命名空间
var Person = {}
Person.kang = {} // kang就是命名空间
Person.kang.test1 = function () { }
// 减少null 比较
function sortArray(val) {
// if(value !=null){
if (val instanceof Array) { // 代替 null 判断 还可以用 typeof
val.sort(compare)
}
}
// 常量处理 重复值、用户界面字符串、url 、 任意可能会更改的值都要处理成常量，方便修改
var Constants = {
INVALID_VALUE_MSG:'invalid value',
INVALID_VALUE_URL:'/home.html'
}
function validate2(val) {
if(!val){
alert(Constants.INVALID_VALUE_MSG)
location.href=Constants.INVALID_VALUE_URL
}
}
// 避免全局查找
function updateUI() {
var doc = document; // 把 document 存起来
var imgs = doc.getElementsByTagName('img')
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].title=doc.title + ' image' + i;
}
var msg = doc.getElementById('msg')
msg.innerHTML = 'update ok'
}
// 属性的查找，
/*
* 常量、数组查找最快，只有O(1), 执行时间恒定
* for循环 O(n),跟元素数量有关
* window.location.href.indexOf('?'); O(3) 查找3次 一个点表示一次
*
* */
var url = window.location.href;
var query = url.substring(url.indexOf('?')) // O(4)
var query2 = window.location.href.substring(window.location.href.indexOf('?')) // O(6) var value=[5,10];
var sum = value[0]+value[1]; // O(1)
var values={first:5,second:10}
var sums = values.first + values.second; // O(2)
// for循环减值迭代 如果顺序不影响的话
for(var i =value.length-1;i>=0;i--){
// ...
}
// 使用 do-while 比for运行快，不想用
// 展开循环
/*
* 当循环的次数是确定的，消除循环并使用多次函数调用比 for循环快
* process(value[0]);
* process(value[1]);
* process(value[2]);
* */
/* 原生方法快 使用原生js方法而不是自己的js， 原生js是c/c++写出来的，比js快
* switch比 if-else 快，还可以把 case 按常用顺序排列
* 位运算符比任何布尔运算或算数运算快， 取模、逻辑与和逻辑或 都可以用位运算符来处理
* */
/* 最小化语句数
* 多个变量声明
* var a =1,b=2,c=3; // 推荐
* var a=1;
* var b=2;
* var c=3;
*
var name = value[i];
* i++;
* 简化为 var name = value[i++]
*
* */
</script>
JS高级程序设计3的更多相关文章
- js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定
js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...
- 《JS高级程序设计》笔记 —— 解析查询字符串
今天在继续翻阅<JS高级程序设计>的时候,正好翻到location对象这一小节,其中有一部分就是讲的解析查询字符串.看到这个内容立马想到了做去哪儿秋招笔试题的时候有这么一道题. 去哪儿笔试 ...
- angular.js高级程序设计书本开头配置环境出错，谁能给解答一下
server.jsvar connect=require('connect');serveStatic=require('serve-static');var app=connect();app.us ...
- 读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图
读书笔记 - js高级程序设计 - 第十三章 事件 canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好 有时候即使浏览器支持,操作系统如果缺缺 ...
- JS高级程序设计拾遗
<JavaScript高级程序设计(第三版)>反反复复看了好多遍了,这次复习作为2017年上半年的最后一次,将所有模糊的.记不清的地方记录下来,方便以后巩固. 0. <script& ...
- js高级程序设计书中，有一句话在全局作用域中定义的函数实际上只 能被某个对象调用？？？
js没有块级作用域(题外话:函数可以作为一个块级),所以我们经常使用闭包来模拟块级作用域,以避免变量或者函数因为名称相同而产生的冲突. 重点来了: 所以,如果我们把哪个变量或者函数放在全局作用域中,那 ...
- JS高级程序设计 笔记
1.instanceof 可以判断实例是否在某个对象的原型上: function A() { this.a = "a"; } function B() { this.b = &qu ...
- JS高级程序设计2nd部分知识要点5
JS Regexp 字面量模式 用\反斜杠转义 构造函数中的字符串 也用\转义正则也用\ RegExp实例属性 global -布尔值 /g ignoreCase -布尔值 /i lastIndex ...
- js高级程序设计（三）基本概念
数据类型 ECMAscript中有五种简单数据类型Undefined,Null,Boolean,Number,String 还有一种复杂数据类型Object. typeof操作符 typeof可能返回 ...
随机推荐
- cosmic_download-AsyncPool待修正
# !/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/11/16 10:02 AM # @Author : cxa # @File ...
- u3d摇杆
using UnityEngine; using System.Collections; public class JoystickController : MonoBehaviour { priva ...
- 【转】线程join()方法的含义
在很多情况下,主线程生成并启动了子线程,如果子线程里要进行大量的耗时运算,主线程往往将于子线程之前结束,但是如果主线程处理完其它事务后,需要用到子线程的处理结果,也就是主线程需要等待子线程执行完成之后 ...
- [JLOI2011]飞行路线 不同的算法，不同的悲伤
题目 :BZOJ2763 洛谷P4568 [JLOI2011]飞行路线 一道最短路的题目,想想写个题解也不错(好久没写题解了_(:з」∠)_) 然后这道题中心思路是dijikstra处理最短路,所以没 ...
- PostgreSQL安装和创建用户和创建数据库
一.安装 可以参考postgresql官网安装教程:https://www.postgresql.org/download/linux/redhat/ Centos 6 安装postgresql 10 ...
- [PHP]一些坑
一.如果有一个字符串变量等于'error',它跟0 == 运算时,会返回true,但是它并不是一个预置常量 $test = 'error'; var_dump($test == 0);//true 二 ...
- Confluence 6 查看系统属性
当你添加了内存,设置了代理(proxy)或者修改了 Java 的选项,通常比较难判断系统是否已经按照你的修改进行了配置和启动.这个页面将会帮助你查看 Confluence 站点运行使用的系统属性. 你 ...
- Confluence 6 数据模型
本文档提供了 Confluence 的数据结构视图(schema )和数据模型概念上的的概述. 备注: Hibernate 的映射文件是针对 Confluence 数据模型的直接描述.在系统中的 Co ...
- 以resnet作为前置网络的ssd目标提取检测
http://blog.csdn.net/zhangjunbob/article/details/53119959
- linux 下安装vscode
下载安装包 https://code.visualstudio.com/docs/?dv=linux64_deb (注意是deb包) sudo dpkg -i code_1.18.1-15108573 ...