标签：原来 slice 尺寸 article 区别 超时 attr navig 前端路由
function Person(){ }Person.prototype.name = "bill";Person.prototype.address = "GuangZhou";Person.sayName = function (){ alert(this.name); }var person1 = new Person();var person2 = new Person(); //测试代码alert(person1.name); // billalert(person2.name); // billperson1.sayName(); //billperson2.sayName(); //billperson1.name = "666";alert(person1.name); // 666alert(person2.name); // billperson1.sayName(); //666person2.sayName(); //billfunction a(name){ var b = new object(); b.name = name; b.say = function(){ alert(this.name); } return b }1. 增
创建元素节点 ：document.createElement(“div”);
创建text节点 ：document.createTextNodet(“内容”);
复制一个节点： var newNode = node.cloneNode();//参数为true复制所有子节点，参数为false只执行一次浅复制。
2. 删
removeChild()；//该方法不是在待删除的节点上调用，而是在它的父元素节点上调用。
node.parentElement.removeChild(node);
replaceChild()；//删除一个子节点，并用一个新的节点取代它。第一个参数是新节点，第二个参数是要删除的节点。
node.parentElement.replaceChild(newNode,node);
获取和设置非标准的HTML属性
Element定义了getAttribute和setAttribute方法来查询和设置非标准属性，hasAttribute和removeAttribute来检测命名属性是否存在和完全删除属性。
对内容的修改
innerHTML：包含标签的内容
innerText（火狐支持不好）：纯文本的元素内容
textContent（IE不支持）：纯文本的元素内容
4. 查
一步查找到位
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document. getElementsByClassName() 返回文档中所有指定类名的元素集合。
document.getElementsByName() 返回带有指定名称的对象集合。
document.getElementsByTagName() 返回带有指定标签名的对象集合。
查找父子兄弟
对于一个Node节点，包含很多种，像：Document节点、Text节点、Comment节点、Element节点，我们常常需要获得的是元素节点，忽略掉Text和Comment节点：
firstElementChild,lastElementChild；
children => 数组类型：children[0] ,第一个子节点
nextElementSibling,previousElementSibling => 兄弟节点
parentElement => 父亲节点
5. 插
Node有方法appendChild（）和insertBefore（）。
parent.appendChild(child); // 插入到最后
parent.insertBefore(newNode,node);//插入到node之前
1、window.location.href(设置或获取整个 URL 为字符串)
var test = window.location.href;
alert(test);
返回：http://i.cnblogs.com/EditPosts.aspx?opt=1
2、window.location.protocol(设置或获取 URL 的协议部分)
var test = window.location.protocol;
alert(test);
返回：http:
3、window.location.host(设置或获取 URL 的主机部分)
var test = window.location.host;
alert(test);
返回：i.cnblogs.com
4、window.location.port(设置或获取与 URL 关联的端口号码)
var test = window.location.port;
alert(test);
返回：空字符(如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符)
5、window.location.pathname(设置或获取与 URL 的路径部分（就是文件地址）)
var test = window.location.pathname;
alert(test);
返回：/EditPosts.aspx
6、window.location.search(设置或获取 href 属性中跟在问号后面的部分)
var test = window.location.search;
alert(test);
返回：?opt=1
PS：获得查询（参数）部分，除了给动态语言赋值以外，我们同样可以给静态页面，并使用javascript来获得相信应的参数值。
7、window.location.hash(设置或获取 href 属性中在井号“#”后面的分段)
var test = window.location.hash;
alert(test);
返回：空字符(因为url中没有)
8、js获取url中的参数值？？？逻辑判断下来琢磨
用户地理位置的 获取：
获取用户地理位置关键api：
enableHighAccuracy:true, //设置提升定位的精准度
maximumAge:0, //禁用缓存
timeout:30000 //开始获取定位信息30秒后超时
}
if(navigator.geolocation){ //判断是否支持Geolocation API
navigator.geolocation.getCurrentPosition(showPosition,showError,option)
}
function showPosition(position){
var lat = position.coords.latitude; //获取纬度
var lon = position.coords.longitude; //获取经度
alert("您的纬度是:"+lat+ "，经度是："+lon);
}
function showError(error){
switch(error.code){
case error.PERMISSION_DENIED:
alert("您拒绝了地理定位服务");
break;
case error.POSITION_UNAVAILABLE:
alert("无法获取您的位置");
break;
case error.TIMEOUT:
alert("超时");
break;
}
}
DOM链式调用的处理：
1.节约JS代码.
2.所返回的都是同一个对象，可以提高代码的效率。
//定义一个JS类
function Demo() {
}
//扩展它的prototype
Demo.prototype ={
setName:function (name) {
this.name=name;
console.log(this)
return this;
},
getName:function (name) {
// return this.name;
this.sex=name
console.log(this)
return this
},
setAge:function (age) {
this.age=age;
console.log(this)
return this;
}
};
////工厂函数
function D() {
return new Demo();
}
//去实现可链式的调用
D().setName("CJ").setAge(18).setName();
$("p").show() //显示隐藏的匹配元素
$("p").show("slow"); //参数表示速度,("slow","normal","fast"),也可为900毫秒
$("p").hide() //隐藏显示的元素
$("p").toggle(); //切换 显示/隐藏
当页面载入成功后再运行的函数事件
$(document).ready(function(){
do something...
});
//简写
$(function($) {
do something...
});
Virual DOM是用JS对象记录一个dom节点的副本，当dom发生更改时候，先用
虚拟dom进行diff，算出最小差异，然后再修改真实dom。
vue的virtual dom的diff算法是基于snabbdom算法改造而来，与react的diff算法一样
仅在同级的vnode间做diff，递归的进行同级vnode的diff，最终实现整个DOM树的更新。
虚拟DOM的缺点：
1. 代码更多，体积更大
2. 内存占用增大
3. 小量的单一的dom修改使用虚拟dom成本反而更高，不如直接修改真实dom快，所以一般简单的页面制作可以直接用jQuery，而不用框架
更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：
URL中的hash("#");History interface在HTML5中新增的方法;hash(window.location.hash)，都会在浏览器访问历史中增加一个记录。利用hash的以上特点，就可以来实现前端路由"更新视图但不重新请求页面"的功能了。
HashHistoryhash("#")符号的本来作用是加在URL指示网页中的位置：
http://www.example.com/index.html#print#本身以及它后面的字符称之为hash可通过window.location.hash属性读取.
hash虽然出现在url中，但不会被包括在http请求中，它是用来指导浏览器动作的，对服务器端完全无用，因此，改变hash不会重新加载页面。hash的改变添加监听事件：window.addEventListener("hashchange",funcRef,false)hash(window.location.hash)，都会在浏览器访问历史中增加一个记录。利用hash的以上特点，就可以来实现前端路由"更新视图但不重新请求页面"的功能了。
transitionTo()方法是父类中定义的是用来处理路由变化中的基础逻辑的，push()方法最主要的是对window的hash进行了直接赋值：window.location.hash=route.fullPath
HashHistory.replace()：
replace()方法与push()方法不同之处在于，它并不是将新路由添加到浏览器访问历史栈顶，而是替换掉当前的路由：
HTML5HistoryHistory interface是浏览器历史记录栈提供的接口，通过back(),forward(),go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。
从HTML5开始，History interface提供了2个新的方法：pushState(),replaceState()使得我们可以对浏览器历史记录栈进行修改：
window.history.pushState(stateObject,title,url)
window.history,replaceState(stateObject,title,url)stateObject:当浏览器跳转到新的状态时，将触发popState事件，该事件将携带这个stateObject参数的副本title:所添加记录的标题url:所添加记录的url这2个方法有个共同的特点：当调用他们修改浏览器历史栈后，虽然当前url改变了，但浏览器不会立即发送请求该url，这就为单页应用前端路由，更新视图但不重新请求页面提供了基础。
一般的需求场景中，hash模式与history模式是差不多的，根据MDN的介绍，调用history.pushState()相比于直接修改hash主要有以下优势：
pushState设置的新url可以是与当前url同源的任意url,而hash只可修改#后面的部分，故只可设置与当前同文档的urlpushState设置的新url可以与当前url一模一样，这样也会把记录添加到栈中，而hash设置的新值必须与原来不一样才会触发记录添加到栈中pushState通过stateObject可以添加任意类型的数据记录中，而hash只可添加短字符串pushState可额外设置title属性供后续使用理解什么是状态管理模式？
状态管理：简单的理解就是统一管理和维护各个vue组件的可变化状态。
我们明白vue是单向数据流的，那么它的状态管理一般包含如下几部分：
1. state; 驱动应用的数据(一般指data中返回的数据)。
2. view； 一般指模板，以声明的方式将state的数据映射到视图。
3. actions: 响应在view上的用户输入导致的状态变化。
但是当我们的应用遇到多个组件共享状态时候，那么单向数据流可能不太满足我们的需求：
比如如下几个方面：
1. 多个视图依赖于同一状态。
传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
2. 我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。
因此我们可以把组件的共享状态提取出来，作为全局来管理，因此vuex产生了。
vuex的优点：
最主要解决了组件之间共享同一状态的问题。可以把组件的共享状态提取出来，作为全局来管理。
什么情况下我应该使用 Vuex？
如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
二： Vuex状态管理的demo学习
每一个Vuex应用的核心就是store(仓库), store是保存应用中大部分的状态。
Vuex 和一般的全局对象有以下几点不同：
1. Vuex的状态存储是响应性的。
当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相对应的组件也就会得到相应的更新。
2. 我们不能直接修改store中的状态。
改变store中的状态的唯一途径是显示地提交(commit)mutations.
2-1 单一状态树
Vuex使用的是单一状态树，用一个对象就包含了全部的应用层级状态。这也意味着每个应用将仅仅包含一个store的实列。
Vuex的状态存储是响应性的，因此从store实列中读取一个状态的最简单的方法是在计算属性返回某个状态。
wx.setStorage({
key:"key"
data:"value"
})
wx.getStorage({
key: ‘key‘,
success: function(res) {
console.log(res.data) }
})
wx.removeStorage({
key: ‘key‘,
success: function(res) {
console.log(res.data)
}
})
wx.clearStorage()
wx.getUserInfo({
success: function(res) {
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性别 0：未知、1：男、2：女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
}
})
wx.makePhoneCall({
phoneNumber: ‘1340000‘ //仅为示例，并非真实的电话号码
}
标签：原来 slice 尺寸 article 区别 超时 attr navig 前端路由
原文地址：https://www.cnblogs.com/Dark-fire-liehuo/p/9615081.html
