javascript学习总结~

javascript学习总结

@author fuyilong
@time 2017年12月5日22:40:43
@home 

Keep looking, don't settle. 

Stay foolish, Stay hungry.

不乱于心,不困于情。不畏将来,不念过往。

http://nodejs.cn/api/ (Node.js 中文网)

http://es6.ruanyifeng.com/#docs/intro (ES6 阮一峰很详细很透彻)

http://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/module#export-default-%E5%91%BD%E4%BB%A4 (关于ES6 import && export default的解释)

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export (关于ES6中module中的两个命令import & export default作用的解释说明)
https://www.cnblogs.com/pengaijin/p/7646524.html (import & export的理解)

http://www.java1234.com/a/javabook/  (资料下载)
http://www.topsage.com/computer/web/  (大家网)

http://web.jobbole.com/86984/  (前端开发者不得不知的ES6十大特性) 

https://www.jianshu.com/p/384fa7cbaa63 (ES6常用知识点学习小结)

Js学习手册大全  http://www.runoob.com/js/js-tutorial.html 

w3cSchool学习网址:
http://www.w3school.com.cn/

Vue element-ui 官网
http://element-cn.eleme.io/#/zh-CN/component/installation

ES6语法学习总结:
https://www.w3cplus.com/javascript/ES6-Objects.html

学习大全
http://www.jb51.net/ 
JavaScript中事件和属性有什么区别吗?或者说事件与方法有什么区别?


方法是对象主动发生的行为,事件则是对象被动发生的行为,属性则是用来描述对象的特征的。
属性、事件、方法等这些其实就是人类认知自然界的必要元素,现在移植到电脑程序中的对象上,就会使“对象”这个“虚拟元素”具备现实生活中“实体元素”所应具备的特征。因此,面向对象的编程方式,实际上就是在模拟人类探知大自然的过程。


Add 2017年12月19日22:34:05

Js的内置对象(就是它本身就已经封装好的对象你只需new一个就可以拿来用了)
Date
Array
String

var time = new Date();
time.getTime();
ar arr = new Array();
Arr.join();

document.getElementById(‘id’).disabled = false;//或者true置灰或者禁用掉
document.getElementById(‘id’).checked = true;//选中 用于单选按钮或者复选框


Ext.getCmp(‘id’).on(‘click’,function(){...}//此处的function就是回调函数)其实是属于js的高阶函数编程即:把函数作为参数传递给另一个函数而不再是单一的数值类型或者字串字符,这样可以在回调函数中再增加逻辑和处理,使函数的使用更加灵活。
回调函数:紧接着处理某个事件或者动作之后的结果的函数
换行:var projectText = node.parentNode.text + “\n” + node.text
Decode解码
Encode编码
解析后台返回的数据为标准的JSON格式:
var ds = Ext.decode(responseText.data)
三目运算符:相当于if...else...
var pboid = pboid ? pboid1 : pboid2
Js的默认值设置方式:
var pboid = podid || “” ;//即如果存在就是pboid,如果不存在则默认给空


document.getElementById(“id”).style.display = “block”//显示或者display = “none”不显示
Ext.getCmp(‘id’).setDisabled(true); //这种方法一般需要一个true或者false来显示一种状态
Ext.getCmp(‘doclist_upload_grid’).store.loadData(reqData);
这个对象里面有store这个属性,而store是jsonStore的一个实例(对象),而jsonStore这个对象里面有loadData()这个方法,而loadData()这个方法接收一个参数即要加载的数据


window是浏览器对象是顶层对象是js运行的宿主环境中的一个实例
navigator,history,等都是浏览器内置的对象直接可以使用
location.href = “url”
window.location.reload();//重新加载当前页面
window.open(ulr);//重新打开一个新的页签页面
<a href=”url” target=”_blank”></a>//target=”_blank”即重新开一个页面打开


Ext.Ajax.request(url,params,function(r){})
Ext.getCmp(‘docGrid’).getStore().reload();
分析:docGrid有getStore()这个方法,获取到grid的store即数据,然后store有reload()这个方法即重新加载数据刷新表格重新从数据库中取一次数据填充到表格中
params是一个对象即params={}对象字面量的形式,key-value的形式
Info = {
“name”:”Tom”,
“age”:25,
“gender”:’male’,
“address”:’beijing’,
“cars”:{
“name”:’BMW’,
“color”:’white’,
“price”:60w,
speed:function(){
  return “500K/h”
}
}
run:function(){
return “this is run method”
}
}
info就是一个对象不过是以对象字面量的形式命名的对象;如果要获取info中的属性,则
info.name,info.age,info.address,info.gender,调用info中的方法则:info.run();
也有对象嵌套对象或者属性。


Add 2017年12月20日21:40:58
CSS 中position定位问题总结:
相对定位(relative):对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在(自私的相对定位)


绝对定位(absolute):会脱离文档流,原点根据最近一个有relative/absolute定位的父类元素(相对/绝对都可以)


return 语句只是不会执行函数中后面的语句,而其后面的函数则依然会顺序执行,只是在函数内return 后面的语句不会再执行了。
function myFunction(a,b) {
 if (a>b) { 
return; 

x=a+b //注意a+b不会执行
}


function myFunction(){
alert("Hello\nHow are you?");//带有换行的字符串
}


函数形参和实参:函数声明的时候传递的是形参(变量),函数调用的时候传的是实参。如下:
以下为函数表达式声明:
var x = function (a, b) {return a * b};
var z = x(4, 3);


http://www.jb51.net/article/14397.htm js自动刷新页面大全


js打开新窗口的两种方式:
1.超链接<a href="http://www.jb51.net" title="脚本之家">Welcome</a>
等效于js代码
window.location.href="http://www.jb51.net";     //在同当前窗口中打开窗口
2.超链接<a href="http://www.jb51.net" title="脚本之家" target="_blank">Welcome</a>
等效于js代码
window.open("http://www.jb51.net");//在另外新建窗口中打开窗口
也可以在ready函数中(即DOM加载完成后)加如下代码:
document.title(‘xxxx’);
http://www.jb51.net/article/35535.htm js setTimeOut()详解
Add 2017年12月23日21:39:04
因为Ajax是以异步方式来获取数据的,执行Ajax的时候你程序是继续往下面执行的,这样你那个变量没有被Ajax方法赋值,因此你的逻辑是无法使用同步方式编写的
解决方法一: 
将逻辑赋值写在ajax回调函数中,对应同一业务逻辑的后续代码需要写在Ajax的回调函数中,才能保证其串行运行
解决方法二:
$.ajax({type : "post",url :地址,data : "参数" + 参数的值,
async : false,   //改这里  改成同步执行
success : function(data){           //赋值给全局变量;}})
Ajax 以GET方式请求时,参数中包含 "#" 特殊字符的处理
在使用 jquery 的ajax调用后台的接口时,如果是get方式的话,当参数中含有”#”这些等对于URI而言有着特殊含义的符号时,发现“#”字符后面的信息全被裁掉了。 
比如:var url= "xxxx?name=" + "wz#aaa" 上面这个URL,最终发送的时候,将是下面这个样子的 xxxx?name=wz #aaa这些信息就被cut掉了
分析
因为“#”这个字符对URI来说,它的作用是指向一个锚点(任意一个元素的ID)。 
所以,xxxx?name=wz#aa
这个URL实际上的意思是,定位到xxxx?name=wz这个页面的中ID为aa的元素的位置。
比如说,大家可能都会见过一个URL直接以#结尾,后面不带任何字符了,如
xxx?name=wz#
那它就是定位到xxx?name=wz页面的最顶端。
 
 
ajax传多个值,向前台页面拼接数据
var ldc="lxr="+lxr+"&djrq="+djrq+"&djrq2="+djrq2+"&czrq="+czrq+"&czrq2="+czrq2;
get 请求的参数一般都是url地址后拼接的
即:”/doc/secFolderCI?folderOid=”+ folderOid
而post 请求一般都是多个参数写在params对象里即:
params = {folderOid: folderId,userName:username,id:id}这个形式的


全局变量:
globalvar = 'a';  //定义全部变量注意不要加var
function fun(){  
    alert(window.globalvar);  //注意要用window.属性名
}  
http://blog.csdn.net/zyz511919766/article/details/7276089 Javascript:谈谈JS的全局变量跟局部变量
总结:
一、Javascript的变量的scope是根据方法块来划分的(也就是说以function的一对大括号{ }来划分)。切记,是function块,而for、while、if块并不是作用域的划分标准
二、Javascript在执行前会对整个脚本文件的声明部分做完整分析(包括局部变量),从而确定实变量的作用域。
三、当全局变量跟局部变量重名时,局部变量的scope会覆盖掉全局变量的scope,当离开局部变量的scope后,又重回到全局变量的scope,而当全局变量遇上局部变量时,怎样使用全局变量呢?用window.globalVariableName。
https://www.cnblogs.com/kaituorensheng/p/3776527.html url 参数解析
Add 2017年12月25日21:27:47
onclick is not defined 报错原因分析:原题是写下html标签里的onclick函数
<input type="button" value="立即登录" onclick="dosave();"/> 
必须写成这样:
dosave() = function(){} 不加var 关键字是全局变量是属于window对象的作用域所以在整个页面都可以调到。
写成这样:
var dosave = function(){} 和
function dosave(){} 都会报错
window.close()
window.open()
window.location.href = url
<a target=”_blank”></a>都会重新打开一个页签
1. console.log(xx);  
2. console.log(window.xx); 
(其中xx是一个不存在的变量)
当直接打印xx变量时,直接抛出一个is not defined异常并终止执行。
然而将xx变量以window.xx的形式打印出来时,缺直接输出一个undefined,并没有出现异常,可以继续执行。
相关文档之后才知道,打印undefined说明该变量已经声明,但没有赋值;打印is not defined异常说明该变量连声明都没有。通过这条结论说明,window.xx的形式会在window对象中隐式的声明该变量。
 
第一种情况涉及到JavaScript的运行阶段,分为词法分析阶段和运行阶段,在词法分析阶段时,先声明了str2变量但没有赋值,所以在运行阶段就出现了undefined。
第二种情况在词法分析阶段也无法声明str2,因为没有var关键字声明,所以在运行阶段直接抛出异常。还有一点需要注意的是,凡是没有使用var声明的变量,最终都会成为全局对象window的属性
 
CSS怎样让一个div居中?
第三种方式:margin:0 auto
 


margin:auto法
用这个方法要求子级div必须设置宽的值,不然没有效果
margin:auto是水平垂直都居中,
如果仅仅设置水平居中,可设置为margin:auto 0;
同理,如果仅仅设置垂直居中,可设置为margin:0 auto
https://jingyan.baidu.com/article/fec7a1e5ddaa051191b4e77b.html  css中设置div居中显示的方法


网页中多个图标在一张图片上,使用css将各图标显示
显示方法很简单,就是将元素的大小设成图标的大小,图片作为元素的背景,设置图片的left和top让对应的图标被显露出来。
.tree-default{  
    width:32px;  
    height:32px;  
}  
.tree-folder{  
background-: url("images/tree_icons_32px.png") -260px -4px no-repeat; 
background-position: x y;//表示在背景图中的坐标位置(定位)
}  

Sass 或 Scss
 
 Add 2018年2月12日21:37:09
//创建一个DOM节点元素
var input = document.getElementById(“id”).createElement(“input”);
//为这个DOM元素添加各种属性元素以及赋值
input.id = “id”;
input.style = “margin-left:20px;width:20px;height:20px;”
input.hidden = true;
或input.hidden = false;
//然后把这个DOM节点追加(appendChild),或者插入(insertAfter,insertBefore)到某个父节点元素中
document.getElementById(‘parentId’).appendChild(input);
var textarea = document.getElementById(“id”).createElement(“textarea”);


问题:用原生的js 如何获取一个textarea的值?
textarea的属性有rows 行,cols列
document.getElementById(‘textarea_id’).value;//注意是value属性而不是value()方法


var li = document.getElementByTaName('li')[0];  //ul中的第一个li节点
alert(document.getElementByTaName('li')[0].innerText) // 显示Alice

删除节点:
parentNode.removeChild(childNode);  // 移除目标节点
node.parentNode.removeChild(node);    //在不清楚父节点的情况下使用


总结:常用的DOM操作API
createElement通过传入指定的一个标签名来创建一个元素,如果传入的标签名是一个未知的,则会创建一个自定义的标签,注意:IE8以下浏览器不支持自定义标签
var div = document.createElement("div");
使用createElement要注意:通过createElement创建的元素并不属于html文档,它只是创建出来,并未添加到html文档中,要调用appendChild或insertBefore等方法将其添加到HTML文档树中
createTextNode用来创建一个文本节点
createTextNode接收一个参数,这个参数就是文本节点中的文本,和createElement一样,创建后的文本节点也只是独立的一个节点,同样需要appendChild将其添加到HTML文档树中

http://www.imooc.com/article/2562  dom操作总结案例
 
 由于innerHTML可以接受任何HTML代码串,所以我们也可以用它在当前的DOM树中再新建一个em节点
document.getElementById(“id”).innerHTML(“<div></div>”);
var div = document.ElementById(“id”);//获取DOM 对象
//为DOM对象属性赋值
div.style.border = “1px solid red;”;
div.style.width = “20px”;
div.style.height = “30px;”;
 
ADD 2018年2月23日21:27:17 @home

作用域,对象,变量,数组,函数都可以看做是一个容器(很形象)
作用域包含变量的容器
对象可以看作是容纳方法和属性的容器
变量可以存储单一类型的值
函数可以存储方法和变量
数组可以存储一类值
等等…

原生js事件:
document.getElementById(“id”).onblur = function(){…}
document.getElementById(“id”).onfocus = function(){…}
document.getElementById(“id”).onclick = function(){…}
document.getElementById(“id”). onmouseout = function(){…} //属性在鼠标指针移动到元素外时触发
document.getElementById(“id”).onmousemove= function(){…} //当鼠标指针移动到元素上时触发。
 
 ADD 2018年2月25日21:41:08 

document.write("<div style='border:1px solid blue;height:30px;width:10px;background-color:blue;margin-left:30px;margin-top:10px;'></div>");

https://segmentfault.com/a/1190000003936841  (20 个CSS 高级技巧汇总)

ADD 2018年2月27日21:24:26 
项目中实际的例子:
//创建一个textarea 对象
var textarea = document.createElement(“textarea”);


//接下来创建textarea这个dom对象的各种属性和方法,事件
textarea.style.color = “gray”;
textarea.style.overflowY = “auto”;
textarea.style.fontSize = “12px”;
textarea.style.marginTop = “20px”;
textarea.style.width = “30px”;
textarea.style.heigth = “65px”;
以上这种创建属性的方式可以兼容IE8以上版本和谷歌浏览器


//设置文本域的默认的值为”please input some words…”
document.getElementById(“id”).value = “please input somewords…”
//设置文本域对象的onfocus()事件,onblur()事件
document.getElementById(“id”).onfocus = function(){…}
document.getElementById(“id”).onblur = function(){…};


注意创建好的textarea对象是游离的,必须得追加到文档中的某个父dom节点才可以
document.getElementById(“parent_id”).appendChild(textarea);
或者可以删除创建的textarea对象
document.getElementById(“parent_id”).removeChild(textarea);
ADD 2018年3月3日20:34:57 @home
JS规范总结:(就是说你就按照这么写法来写,写成习惯,简洁明白,别人和自己都容易看懂,不要那么别扭或者感觉很难受)
声明一个对象:var = {};
声明一个数组:var = [];
注意:定义一个变量包括声明和赋值两部分:var textVal = “hello”;
遍历数组中的每一项让换行展示arr.join(“\n”);
用三元操作符来代替if…else
用===来代替==(严格相等运算符进行比较时并不存在类型转换的过程)
用!来取反操作
用let x, y, z = 3;代替let x; let y; let z = 3;(简写)
 
== 的反操作是 !=
=== 的反操作是 !==
if(a) ==> if(a == true)
if(!a) ==>if(a !== true )
 
var array = [1,2,3,4,5,6,7];  
for (var i = 0; i < array.length; i++) {  
    console.log(i,array[i]);  
}
a++ <==> a+=1 这两种写法是等价的
即上面的for循环也可写成:
for(var i=0;I < array.length; i+=1){…}
上面的写法是一般最常用的写法,console.log(I,array[i]);会同时输入数组中的每一项和下标
匿名函数
立即执行函数表达式:即用()将函数包裹住,再加上()(执行符)
(function(){})();
 
 
避免后期一个文件中增加的代码太多(比如一个js文件中的代码几千行),阅读不方便,建议每增加一个功能单独写成一个文件来维护,即代码分层,这样条理清晰,层次分明,容易维护,不要全部写在一起,解耦,单独,分开,这样改动一处不会改动很多易于维护。
避免代码重复,后者写重复代码。
有现成的尽量使用已有的不要自己再化时间去发明。
一切以简单,高效,易懂,方便,快速的方法来实现,不要写的过于复杂,晦涩难懂。


善于归类,将一类的方法或者属性或者弹窗(比如dialog),button,变量(比如vue中data中的)封装到一个对象中,然后便于管理和维护。
重复的代码可以单独提炼方法,然后调用。使代码阅读起来简洁,易懂。
通过给方法中传递不同的参数来加以区分
<el-button @click=save(1)>product</el-button> //产品库
<el-button @click=save(2)>project</el-button> //项目库
然后在定义的时候这样写:
save(type){
if(type === 1) {
//则执行product相关逻辑
}else if(type === 2){
//则执行project相关逻辑
}
}
截取字符串:substring(0,2);//substring(start,number);
写出简洁高效js代码的规范:
1. 避免定义全局变量或函数
有很多的手段可以解决因为定义了全局变量而导致代码污染的情况。最简单的方法是把变量和方法封装在一个变量对象上,使其变成对象的属性。例如
var myCurrentAction = {
length: 0,
init: function(){…},
action: function(){…}
}
这样基本上可以避免全局变量或方法被覆盖的情况。但这种方案也有弊端,所有变量和函数的访问都需要通过主对象来实现了,比如访问如上的length变量,就需要通过myCurrentAction.length来访问。这就增加了代码的重复度和代码编写的繁琐性。另一种改进的方案是把全局的变量包含在一个局部作用域中,然后在这个作用域中完成这些变量的定义以及变量使用的逻辑。比如,可以通过定义一个匿名函数实现:
(function () {
  var length = 0;
  function init(){…}
  function action() {…}
})();
所有的逻辑都包含在了这个立即执行的匿名函数中,形成了一个独立的模块,最大限度地防止了代码之间的污染。当然,在实际的业务中,模块之间会有交互,这时则可以使用return语句,返回需要公开的接口,比如要公开上述代码中的init函数,则如上代码应修改为如下形式:
var myCurrentAction = (function () {
  var length = 0;
  function init(){…}
  function action() {…}
  return {
  init: init
  }
})();
经过如此调整,外部代码访问init方法时,就可以调用myCurrentAction.init了。此方案既巧妙地做到了代码逻辑的封装,又公开了外部需要访问的接口,是代码模块化的最佳实践方式之一。
另外一个避免定义全局变量的方式是:确保在定义变量时使用var关键字。如果定义变量时没有使用var,浏览器解析时并不会报错,而是自动把这一变量解析为全局变量,比如如下的代码就定义了一个全局的变量
length:(function () {
  length = 0;
  function init(){…}
  function action() {…}
})();
这种可以不通过var关键字而定义变量的方式也是JavaScript代码灵活的一种体现,但同时也是代码中潜在问题的根源之一。很多时候,开发者并非想通过这种方式定义一个全局变量,只是错误地遗漏了var关键字。规范的制定者也意识到了这种灵活性带来的问题,所以在JavaScript代码的严格模式中,变量定义必须添加var关键字,否则会报编译错误。
ADD 2018年3月5日20:11:13
let url_link = “www.baidu.com”;
let link = www.baidu.com + response.trim();
window.open(link);
总结:可以将一个url的链接地址声明为link
使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象;
使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升;
使用const声明的是常量,在后面出现的代码中不能再修改该常量的值。
总结:let 是块级作用域即{}中有效,而var 是函数作用域即在函数块中有效,且存在变量提升,而const是常量声明,即声明后值就不能再变了。
模板字符串中还可以调用函数
 
http://www.cnblogs.com/zhuzhenwei918/p/6869330.html  (axios处理http请求)
http://www.cnblogs.com/zhuzhenwei918/p/6892066.html  (如何去除vue项目中的 # --- History模式)


ADD 2018年3月6日20:56:33 @home
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
注释:indexOf() 方法对大小写敏感!
注释:如果要检索的字符串值没有出现,则该方法返回 -1,如果出现则大于-1
因此,可以用于和-1进行比较,包含则大于-1,不包含则等于-1
 
String对象的常用属性:
方法 描述
lngth 属性 字符串的长度
indexOf()
检索字符串。
lastIndexOf()
从后向前搜索字符串
match()
找到一个或多个正则表达式的匹配
replace()
替换与正则表达式匹配的子串。
split()
把字符串分割为字符串数组。
substr()
从起始索引号提取字符串中指定数目的字符
substring()
提取字符串中两个指定的索引号之间的字符
toString()
返回字符串。

Js数据结构:
let dowOwners = [“fuyilong, wx278684;gongjinsuo, WX477465;lanwei, wx422564;”];
分析下数据结构为数组,但是数组中又是一个字符串。
为了得到”fuyilong wx278684;gongjinsuo WX477465;lanwei wx422654;”
就是去掉中间的逗号,
let docOwners = [“fuyilong, wx278684;gongjinsuo, WX477465;lanwei, wx422564;”];
let doc_str = docOwners.toString();//转换为字符串
//把字符串中的所有逗号(,)替换为空""
var doc_string = doc_owners_str.replace(/,/g,"");
注意:String.split(“;”)与array.join(“;”)执行的操作是相反的,
 
Array.join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
array.join(separator)
 
 Js报错处理
docOwners.split(“;”);报错:split is not a function,原因是docOwners不是一个字符串,因为split()方法是字符串对象的方法,所以报错。
助记法:split();中有一个”S” ,所以它是Stirng对象的方法,将字符串转换为字符串数组
还有toString()方法比如:[“age”,”city”,”address”,”gender”].toString();
 
ADD 2018年3月7日20:49:36 @home
学习了vuejs中module(模块)中的import和export 和export default命令的作用
上网查了什么是单页面应用?
单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面。
 
 单页面WEB的有缺点:
 
 摘自https://www.cnblogs.com/wbxjiayou/p/6155340.html 
Js的RegExp对象(Regular Express正则表达式的意思,因为单词太长所以就缩写为RegExp)
RegExp对象有个test()方法用于校验规则
Let pattern = new RegExp(“正则表达式规则”);
pattern.test(value);//检验value是否符合正则表达式
ADD 2018年3月7日22:22:35 @home
Vuejs路由的理解和使用:
https://www.cnblogs.com/avon/p/5943008.html  (vue路由的使用和示例理解)
问题:如何截图动态的操作画面?

SCSS
https://www.sass.hk
ADD 2018年3月8日21:08:44
https://www.cnblogs.com/wangpenghui522/p/5467560.html (Sass与Scss的区别)

1. & 表示父选择器或&引用父选择器 &>i表示父选择器下的i 标签
a {
font-size:12px;
&:hover{
color:red;
}
}
用& 代替父选择器就是为了避免重复,而且好看简洁不重复的原则
@extend 继承命令
比如calss2要继承class1则:
class2 {
@extend .class1;
font-size:12px;
}
//即class2把class1的样式拷贝过来再用一套而不必在写直接继承这样class2就拥有了和class1一样的样式了,都可以用于代码重用


@Mixin混合
@clude
继承,Mixin, 变量,计算,嵌套,函数

Vuejs中注意属性和内容(Content)  {{这里名是content}}
<a :href=”item.link ? ‘item.link : javascript:void(0)’ ” :target=”item.link ? ‘_blank’ : ‘_self ’ ”><a>
要用三目运算符或者叫三元表达式去做判断的原因是因为绑定的属性的值是一个变量表达式,既然是变量,那么变量的值有可能为不存在,false,underfined,null这三种可能,所以要做判断。

ADD 2018年3月13日21:19:17 @home


Js中<a href=”#”></a>和<a href=”javascript:void(0)”></a>中href值的区别?
 
js中__proto__和prototype的区别和联系
 
 
2. 作用域是什么
显式原型的作用:用来实现基于原型的继承与属性的共享。
隐式原型的作用:构成原型链,同样用于实现基于原型的继承。举个例子,当我们访问obj这个对象中的x属性时,如果在obj中找不到,那么就会沿着__proto__依次查找。


http://www.cnblogs.com/xsfx/p/7152674.html  js中__proto__和prototype的区别和联系
 


Js实现继承的几种方式:
https://www.cnblogs.com/humin/p/4556820.html


https://www.cnblogs.com/ayqy/p/4471638.html 


http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html (阮一峰js的继承)

CSS的继承性:
css的一个主要特征就是继承,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代
继承性:从自己开始到自己后代最小的元素
color text-开头的,line-开头的  font-开头的  都是继承的
这些关于文字样式的都能继承
所以关于盒子的  定位的,布局的都是不能继承的


CSS中>的作用?
 
 ADD 2018年3月19日22:25:34 @home
https://coolshell.cn/articles/17634.html  (CHROME开发者工具的小技巧)
 
快捷键 以及 console函数

Add 2018年3月29日22:35:36
 
ADD 2018年3月31日21:24:03 @home
//首先自定义列renderer渲染函数
function showUrl(){
Return “<a href=”+ value +”>”+ value + ”</a>”
}
//定义列对象
var colM =new Ext.grid.ColumnModel(
        [
            {header:'项目名称',dataIndex:'name',sortable:true},
            {header:'开发团队',datIndex:'organization',sortable:true},
            {header:'网址',dataIndex:'homepage',renderer:showUrl}
            ]  
    );
要渲染网址那一列,就在网址那一列添加renderer函数既可。


ADD 2018年4月1日11:07:36 @home
 
 ADD 2018年4月7日19:51:54 @home
 
 如何解析一个对象?(实质是将一个对象解析成Json对象)
Ext.encode(obj);
 
var grid = new Ext.grid.GridPanel();
var store = new Ext.data.JsonStore();//这是一个json型的数据格式的store
比如如下数据格式:数组中是一个个的纯json对象即{}形式的对象
Var data = [
{‘test’, 25, ’1990-01-01’, ’address’},
{‘test’, 25, ’1990-01-01’, ’address’},
]


Var store = new Ext.data.ArrayStore();//数组型的数据格式,数据中是一个个纯数组
Var data = [
[‘test’,25,’1990-01-01’,’address’],
[‘test’,25,’1990-01-01’,’address’],
]


var store = new Ext.data.JsonStore({
//proxy:new Ext.data.HttpProxy(),
url:’’,
autoLoad:true,//即时加载,即自动加载
autoSave:true,
data:data
root:’data’,//表示解析后台返回的json对象的哪一个属性
fields:[‘name’,’age’,’birthday’,’address’]//和后台约定的字段值
});
 
Record解析成Json对象的核心代码是:
Var record = grid.getSelectionModel().getSelected();
Alert(Ext.encode(record.data));
 
function(a,b,c){}传的参数都是这个参数里面需要的,
 
 loadMask 
 
 
ToolBar
 
Menu
ADD 2018年4月10日21:54:57
 

<a href=”#” onclick=”delUser()”></a>

方法或者某个动作是谁发出的,谁去执行的,谁就是对象,就是执行者,

定义完Store后调用store的loadData();方法

 
右键菜单:

TreePanel

 
 ADD 2018年4月11日22:32:42 @home
Ajax请求中只做请求的事情,其他的比如win.show();等动作放到请求外去做,因为ajax是异步的操作,不会立即去执行,会在未来某个时间或者会延迟去执行所以,会影响立即需要结果的动作。(项目中错误总结)
ADD 2018年4月14日20:50:45
非空校验,有些方法或者属性是在有值,或者值有效的情况下才能做得,比如null,underfind,等这些值异常的情况的下会出现报错,所有,在值可以为空或者有知的情况的下,先要做非空的校验。


在初始化Grid的时候,只创建Menu实例一次并在每次用户右键点击时进行复用,是比较好的一种改善方式。即便如此,当Grid被销毁时,上下文菜单虽然已经不需要了,但却依然存在。最好的方式是在Grid被销毁时,上下文菜单也随之进行销毁。


Grid是Panel的子类,因此可以直接在Grid上使用Panel的属性
记住像Form、Tree、TabPanel和Grid都继承自Panel,因此在使用这些组件时,应特别注意不必要的组件嵌套情况。
extjs防止重复创建窗体
给窗体添加model:true,属性,每次就只会创建一个窗体
 
 2018年5月8日20:33:26
使用直接量
var aTest = new Array(); //替换为
var aTest = [];
var aTest = new Object; //替换为
var aTest = {};
var reg = new RegExp(); //替换为
var reg = /../;
//如果要创建具有一些特性的一般对象,也可以使用字面量,如下:
var oFruit = new O;
oFruit.color = "red";
oFruit.name = "apple";
//前面的代码可用对象字面量来改写成这样:
var oFruit = { color: "red", name: "apple" };

浮点数转换成整型
很多人喜欢使用parseInt(),其实parseInt()是用于将字符串转换成数字,而不是浮点数和整型之间的转换,我们应该使用Math.floor()或者Math.round()


备注:本文为作者个人学习总结使用,为原创文章,未经作者同意请勿转载或作其他使用~~

猜你喜欢

转载自blog.csdn.net/qyl_0316/article/details/80546629
今日推荐