javascript技巧及总结

之前的一些关于js的博客

• js实现遮罩效果
• javascript中call的用法总结
• javascript变量提升
• event.srcElement event.target
• JavaScript关于1,0,数字与boolean之间的关系
• JavaScript的prototype

1. 关键字

1.1. this的使用场景

简单说：谁调用，谁this

//1.构造函数
function Car(name,color){
	this.name = name;
	this.color = color;
}
//2.事件中代表元素

• 作为纯粹的函数调用this指向全局对象。如：(function(){console.log(this)}())打印结果是window
• this是一个关键字，它代表函数运行时，自动生成一个内部对象，只能在函数内部使用
• 作为对象的方法调用this指向调用对象
• 作为构造函数被调用this指向新的对象（new会改变this的指向）
• apply调用this指向apply方法的第一个参数
• this总是指向函数的直接调用者（而并非间接调用者）；
• 如果有new关键字，this指向new出来的那个对象；
• 在事件中，this指向这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；

1.2. new

使用new时，

1. 创建一个空对象
2. this变量引用该对象，同时还继承了该函数的原型。
3. 属性和方法被加入到this所引用的对象中，即执行构造函数。
4. 新创建的对象由this所引用，并且最后隐式的返回this。

当代码 new Foo(…) 执行时，会发生以下事情：

• 一个继承自 Foo.prototype 的新对象被创建。
• 使用指定的参数调用构造函数 Foo ，并将 this 绑定到新创建的对象。new Foo等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。
• 由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）

你始终可以对已定义的对象添加新的属性。但是，这不会影响任何其他对象。要将新属性添加到相同类型的所有对象，你必须将该属性添加到Car对象类型的定义中。

你可以使用 Function.prototype 属性将共享属性添加到以前定义的对象类型。这定义了一个由该函数创建的所有对象共享的属性，而不仅仅是对象类型的其中一个实例。

例1：如下，

function fn() {
    this.a = 0;
    this.b = function() {
        alert(this.a)
    }
}
fn.prototype = {
    b: function() {
        this.a = 20;
        alert(this.a);
    },
    c: function() {
        this.a = 30;
        alert(this.a);
    }
}
var myfn = new fn();
myfn.b();
myfn.c();

解析：
这个例子主要是 原型链的考察。
首先，this指向的都是myfn。
然后b()在fn()，及fn.prototype中都存在，所以将按照原型链进行追溯
c()则不同，在fn()中没有找到，所以，追溯prototype。

1.3. delete

总的来说，delete不能删除直接对象（如let/var/const声明的），也无法删除不可配置的属性（设置属性的configurable为false）

与通常的看法不同，delete操作符与直接释放内存无关。内存管理通过断开引用来间接完成的，查看内存管理页可了解详情。

delete 操作符会从某个对象上移除指定属性。成功删除的时候回返回 true，否则返回 false。但是，以下情况需要重点考虑：

• 如果你试图删除的属性不存在，那么delete将不会起任何作用，但仍会返回true
• 如果对象的原型链上有一个与待删除属性同名的属性，那么删除属性之后，对象会使用原型链上的那个属性（也就是说，delete操作只会在自身的属性上起作用）
• 任何使用 var 声明的属性不能从全局作用域或函数的作用域中删除。
  
  - 这样的话，delete操作不能删除任何在全局作用域中的函数（无论这个函数是来自于函数声明或函数表达式）
  
  - 除了在全局作用域中的函数不能被删除，在对象(object)中的函数是能够用delete操作删除的。
• 任何用let或const声明的属性不能够从它被声明的作用域中删除。
• 不可设置的(Non-configurable)属性不能被移除。这意味着像Math, Array, Object内置对象的属性以及使用Object.defineProperty()方法设置为不可设置的属性不能被删除。

1.3.1. 例子

例1

//当一个属性被设置为不可设置，delete操作将不会有任何效果，并且会返回false。在严格模式下会抛出语法错误（SyntaxError）。
var Employee = {};
Object.defineProperty(Employee, 'name', {configurable: false});
console.log(delete Employee.name);  // returns false

//var, let以及const创建的不可设置的属性不能被delete操作删除。
var nameOther = 'XYZ';

// 通过以下方法获取全局属性:
Object.getOwnPropertyDescriptor(window, 'nameOther');  

// 输出: Object {value: "XYZ", 
//                  writable: true, 
//                  enumerable: true,
//                  configurable: false}

// 因为“nameOther”使用var关键词添加，
// 它被设置为不可设置（non-configurable）
delete nameOther;   // return false

// 在全局作用域创建 adminName 属性
adminName = 'xyz';            

// 在全局作用域创建 empCount 属性
// 因为我们使用了 var，它会标记为不可配置。同样 let 或 const 也是不可配置的。
var empCount = 43;

EmployeeDetails = {
  name: 'xyz',
  age: 5,
  designation: 'Developer'
};

// adminName 是全局作用域的一个属性。
// 因为它不是用 var 创建的，所在可以删除。
// 因此，它是可配置的。
delete adminName;       // 返回 true

// 相反，empCount 是不可配置的， 
// 因为创建它时使用了 var。
delete empCount;       // 返回 false 

// delete 可用于删除对象的属性
delete EmployeeDetails.name; // 返回 true 

// 甚至属性不存在，它也会返回 "true"
delete EmployeeDetails.salary; // 返回 true 

// delete 对内建静态属性不起作用
delete Math.PI; // 返回 false 

// EmployeeDetails 是全局作用域的一个属性。
// 因为定义它的时候没有使用 "var"，它被标记为可配置。
delete EmployeeDetails;   // 返回 true

function f() {
  var z = 44;

  // delete 对局部变量名不起作用
  delete z;     // 返回 false
}

例子2

var output = (function(x){
    delete x;
    return x;
})(0);
  
console.log(output);

解析

输出是 0。 delete 操作符是将object的属性删去的操作。但是这里的 x 是并不是对象的属性， delete 操作符并不能作用。

例子3

var x = { foo : 1};
var output = (function(){
    delete x.foo;
    return x.foo;
})();

console.log(output);

解析

输出是 undefined。x虽然是全局变量，但是它是一个object。delete作用在x.foo上，成功的将x.foo删去。所以返回undefined

例子4

ar Employee = {
    company: 'xyz'
}
var emp1 = Object.create(Employee);
delete emp1.company
console.log(emp1.company);

解析

输出是 xyz，这里的 emp1 通过 prototype 继承了 Employee的 company。emp1自己并没有company属性。所以delete操作符的作用是无效的。

例子5

var trees = ["xyz","xxxx","test","ryan","apple"];
delete trees[3];
  
console.log(trees.length);
//输出是5。因为delete操作符并不是影响数组的长度。

2. 数据类型

2.1. 类型转换

例子1

console.log(1 +  "2" + "2");//122
console.log(1 +  +"2" + "2");//32,因为+"2"中的+为一元运算符，所以+"2"转为了2
console.log(1 +  -"1" + "2");//02,同上
console.log(+"1" +  "1" + "2");//112
console.log( "A" - "B" + "2");//NaN2
console.log( "A" - "B" + 2);//NaN

解析

这里的根本问题是，JavaScript（ECMAScript）是一种弱类型语言，它可对值进行自动类型转换，以适应正在执行的操作

例子2

//隐式类型转换
console.log(false == '0')//true
console.log(false === '0')//false

2.2. undefined

undefined 和 not defined 的区别

JavaScript 未声明变量直接使用会抛出异常：var name is not defined，如果没有处理异常，代码就停止运行了。
但是，使用typeof undeclared_variable并不会产生异常，会直接返回 undefined。

undefined和null的区别

undefined说明没有这个属性（no house）；null表示有属性，但这个属性没值（家徒四壁）

2.3. 类型校验

2.3.1. typeof的使用。

值得注意的时候typeof null的结果为object
typeof的结果如下
number,boolean,string,function,object,undefined

typeof ''==='string';
typeof('') === 'string';
''.constructor===String
typeof null //object

2.3.2. toString的使用

var arr = [1,'abc',true,new Function(),null,void 0,{},[]];
var obj = {};arr.map((item)=>{console.log(toString.call(item))});
//[object Number]
//[object String]
//[object Boolean]
//[object Function]
//[object Null]
//[object Undefined]
//[object Object]
//[object Array]
funcion Func(){}
var f=new Func();
toString.call(f);//[object Object]

2.3.3. instanceof的使用

``

2.4. 关键数据类型

2.4.1. Object API

例子1

var a={},
    b={key:'b'},
    c={key:'c'};
 
a[b]=123;
a[c]=456;
 
console.log(a[b]);//456

解析

当设置对象属性时，JavaScript会暗中字符串化参数值。在这种情况下，由于 b 和 c都是对象，因此它们都将被转换为"[object Object]"。结果就是， a[b]和a[c]均相当于a["[object Object]"] ，并可以互换使用。因此，设置或引用 a[c]和设置或引用 a[b]完全相同。

2.4.1.1. Object.freeze()

在vue的源码中看到如下一行代码引起了我的好奇

export const emptyObject = Object.freeze({})

查阅MDN后备忘如下:

Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说，这个对象永远是不可变的。该方法返回被冻结的对象。

要使对象不可变，需要递归冻结每个类型为对象的属性（深冻结）。当你知道对象在引用图中不包含任何 环 (循环引用)时，将根据你的设计逐个使用该模式，否则将触发无限循环。对 deepFreeze() 的增强将是具有接收路径（例如Array）参数的内部函数，以便当对象进入不变时，可以递归地调用 deepFreeze() 。你仍然有冻结不应冻结的对象的风险，例如[window]。

2.4.1.2. Object.keys

Object.keys() 方法会返回一个由一个 给定对象的自身可枚举属性*组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 （ 两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性）。

MSDN上的解释很清楚，不做阐述。示例如下

var obj = {a:1,b:2};
console.log(1,Object.keys(obj));//1 Array[2] , 0:'a',1:'b'
Object.prototype.c=3;
console.log(2,Object.keys(obj));//2 Array[2] , 0:'a',1:'b'
for(key in obj){
	console.log(3,key);//3 "a" 3 "b" 3 "c"
}
//由上述代码可验证MDN说明中Object.keys返回的是"给定对象的自身可枚举属性"

2.4.2. String API

concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。
indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 。
charAt() – 返回指定位置的字符。
lastIndexOf() – 返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回 -1 。
match() – 检查一个字符串是否匹配一个正则表达式。
substr() 函数 -- 返回从string的startPos位置，长度为length的字符串
substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。
slice() – 提取字符串的一部分，并返回一个新字符串。
replace() – 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。
search() – 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。
split() – 通过将字符串划分成子串，将一个字符串做成一个字符串数组。
length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。
toLowerCase() – 将整个字符串转成小写字母。
toUpperCase() – 将整个字符串转成大写字母。

2.4.3. Array api

2.4.3.1. 例子

2.4.3.1.1. 清空数组

var arrayList = ['a','b','c','d','e','f'];
//1
arrayList = [];
//2
arrayList.length=0;

2.4.3.1.2. reverse

var arr1 = "john".split('');
var arr2 = arr1.reverse();
var arr3 = "jones".split('');
arr2.push(arr3);
console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));
console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));
//输出结果是：
"array 1: length=5 last=j,o,n,e,s"
"array 2: length=5 last=j,o,n,e,s"

解析

• 调用数组对象的 reverse() 方法并不只返回反顺序的阵列，它也反转了数组本身的顺序（即，在这种情况下，指的是 arr1）。
   
• reverse() 方法返回一个到数组本身的引用（在这种情况下即，arr1）。其结果为，arr2 仅仅是一个到 arr1的引用（而不是副本）。因此，当对 arr2做了任何事情（即当我们调用 arr2.push(arr3);）时，arr1 也会受到影响，因为 arr1 和 arr2 引用的是同一个对象。
   
• 传递数组到另一个数组的 push() 方法会让整个数组作为单个元素映射到数组的末端。其结果是，语句 arr2.push(arr3); 在其整体中添加 arr3 作为一个单一的元素到 arr2 的末端（也就是说，它并没有连接两个数组，连接数组是 concat() 方法的目的）。
   
• JavaScript标榜数组方法调用中的负数下标，例如 slice() 可作为引用数组末尾元素的方法：例如，-1下标表示数组中的最后一个元素

2.4.3.1.3. 数组去重

//1.使用filter
[1,2,2,4,9,6,7,5,2,3,5,6,5].filter((item,index,arr)=>{return arr.indexOf(item)===index});//[1, 2, 4, 9, 6, 7, 5, 3]
//2.使用object，利用Object的key不重复性.但这种方法影响原有顺序
var obj = {};[1,2,2,4,9,6,7,5,2,3,5,6,5].filter((item,index,arr)=>{obj[item]=null;})
Object.keys(obj)
//3.还有就是

3. 技巧

搜集了一些有意思的东西。

参考:js代码常见技巧总结

3.1. 清空数组

可以使用arr.length=0来清空数组，但是需要注意时间问题。实际测试arr.length=0耗时较长。如下所示，时间差了将近7倍。这也许就是因为arr.length=0是真的清空了原本的数组对象耗费了时间，而arr=[]并没有清空。

//使用arr=[]来清空
//但这种方法有严重缺陷！它实际上并没有清空原本的数组对象！ 
//它创建了一个新的、空的数组对象[]，然后将它赋给原本的**数组变量**array，因此原本非空的数组对象并没有清空，而是等待垃圾回收机制处理。
var b=Date.now(),arr = [1,2,3,4,5];
for(var i=0;i<100000000;i++){
	arr=[];
}
var e=Date.now();
console.log(e-b)//2158

//使用arr.length=0来清空
var b=Date.now(),arr = [1,2,3,4,5];
for(var i=0;i<100000000;i++){
	arr.length=0;
}
var e=Date.now();
console.log(e-b)//14626

3.2. 大括号的使用

大括号的使用主要是2个方面：

3.2.1. 第1，不要省略大括号，即使可以忽略

比如：

for(var i =1;i<10 ;i++)
    console.log(i) //此处原则上可以忽略大括号

上述语句并没有问题，但是如果后期函数体内增加了其他语句的时候，很容易忘记补上大括号，因此建议都带上大括号；

3.2.2. 第2，大括号的必须跟在前一个语句的同一行

这个问题非常容易被忽略，通常我们都觉得大括号是跟在语句的同一行还是下一行只是习惯问题，但是实际上不是的！看下面这个例子：

function func(){
  return 
  {
    name:'xxx'
  }
}
var res = func()
console.log(res)//输出undefined

是不是觉得很奇怪，看代码第一感觉应该是输出一个包含name属性的对象。请注意，由于js的 分号插入机制：如果语句没有使用分号结束，会自动补充分号。因此上面的代码实际相当于如下写法：

function func(){
  return undefined;//自动插入分号
  {
    name:'xxx'
  }
}

正确的写法应该是：

function func(){
  return {
    name:'xxx'
  }
}
var res = func()
console.log(res)//输出{name:'xxx'}

3.3. 避免链式声明

如下代码

function test(){
 //这里链式声明变量v1/v2
 //但是因为运算符优先级问题,实际执行顺序为:var v1 = (v2 = 0)
 //这样v2就成为了全局变量
 var v1 = v2 = 0;
 console.log(v1,v2);
}

test()//0 0
console.log(v1)//Uncaught ReferenceError: v1 is not defined(…)
console.log(v2)//0	这就证明了v2已经成为了全局变量

3.4. 单一var原则

这个主要是因为在js中存在变量提升(es6以前,es6中不再存在该问题),以及由变量提升带来的其它问题

function test(){
 console.log(v3);//
 var v3 = 0;
 console.log(v3);
}

test()
//第一个打印这里本应该是报错Uncaught ReferenceError: v3 is not defined(…),
//但是因为存在变量提升,所以实际执行顺序为
//var v3;
//console.log(v3)
//v3 = 0;
//console.log(v3)
//所以打印结果变成了undefined了
//undefined
//0

3.5. 使用for循环,缓存长度

特别是dom遍历,这样做效率更好

function test(){
 var arr = [];
 for(var len = arr.length,i=0;i

3.6. 使用for…in的同时,使用hasOwnProperty

这个主要是因为for…in循环会循环原型链上的内容,使用hasOwnProperty可以减少 不必要的麻烦.当然也可以使用Object.keys()/Object.prototype.values()[上述两个方法不包括原型链和不可枚举的]/Object.getOwnPropertyNames()[不包括原型链,但是包括不可枚举的]

3.7. 使用===代替==

类型的隐式转换问题

3.8. 使用parseInt()带上第二个参数

避免以0开头的字符串被错认为八进制(es3)

3.9. 标准内置对象的分类

标准内置对象的分类

3.9.1. 值属性

这些全局属性返回一个简单值，这些值没有自己的属性和方法。

• Infinity
• NaN
• undefined
• null 字面量

3.9.2. 函数属性

全局函数可以直接调用，不需要在调用时指定所属对象，执行结束后会将结果直接返回给调用者。

• eval()
• uneval()
• isFinite()
• isNaN()
• parseFloat()
• parseInt()
• decodeURI()
• decodeURIComponent()
• encodeURI()
• encodeURIComponent()

3.10. isFinite()

Finite指的是有限数。因此，当isFinite()的参数是一个大于Number.MIN_VALUE小于Number.MAX_VALUE的数字、或者是可以转换为这个区间的数字时，isFinite()将返回true，否则返回false

3.11. void

javascript中void
void该运算符指定要计算一个表达式但是不论该表达式原来是否有自己的返回值，其返回值都为undefined。void运算符的操作数可以是任意类型。

返回undefined,(对于为什么不直接使用undefined，是因为undefined不是关键字，意味着它随时可能被篡改成其他值。。。)。

3.11.1. void 0

在es5中有一些有特殊意义的字符串，如undefined，null，Infinity，NaN等。在window作用域下，这些都是只读的、不可更改的，但是在函数作用域下，却可以更改。如下：

//在window作用域下
Infinity=1
console.log(Infinity)//Infinity
var Infinity=1
console.log(Infinity)//Infinity
//在函数作用域下
function test(){
    Infinity = 1;
    console.log('----',Infinity)//---- Infinity
}
function test(){
    var Infinity = 1;
    console.log('----',Infinity)//----1
}

如上，因此这些类型就不再“可靠”了，需要使用更可靠的值或者表达式来替代

3.11.2. void 5+5和void (5+5)

这个本质上是运算符的优先级问题。void 5+5等价于(void 5)+5

3.12. NaN对比

在javascript中一个神奇的属性。NaN 与所有值都不相等，包括它自己。NaN 不是常量，可以把它设置为其他值
判断是否是一个数字可以用isNaN()方法，但是有时候，我们希望NaN和NaN是相等的，要怎么做呢？

//下边是vue源码中的一段代码
 set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val//获取旧值
   //这个地方为什么要对自身进行对比呢?
   //今天看Object.is()方法的pollfily时,忽然知道这里是为什么了.
   //假设var n = parseInt('abc');//这里的n为NaN
   //无论n==n还是n===n都是false,又因为除了NaN之外,所有的值自身与自身相比都是true
   //所以自身对比就可以知道值为NaN了
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {//自定义setter
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
   //值改变后,通知订阅者见./dep.js
      dep.notify()
    }
//MDN中Object.is()中也有一段polyfill
if (!Object.is) {
  Object.is = function(x, y) {
    // SameValue algorithm
    if (x === y) { // Steps 1-5, 7-10
      // Steps 6.b-6.e: +0 != -0
      return x !== 0 || 1 / x === 1 / y;
    } else {
      // Step 6.a: NaN == NaN
      return x !== x && y !== y;
    }
  };
}

3.13. 隐式转换

[1,null,3].map(x=>x+1)//[2, 1, 4]
[1,undefined,3].map(x=>x+1)//[2, NaN, 4]
//下边这句代码显示的是undefined*1，但是使用arr变量接收并显示，却是undefined
//这个*n应该指的是有多少个undefined的
[1,,3].map(x=>x+1)//[2, undefined × 1, 4]

3.14. !!

如上图所示，共有6个值相当于false：false、undefined、NaN、""、0（包括+0、-0）、null，在判断时默认会进行隐式类型转换，但无论是从实际意义还是在后续操作中，我们都经常需要真正的true、false，这时候就可以使用!!来进行强制类型转换了，即将上述6中值转为false，其它转为true

3.15. &&和||

鉴于JavaScript的逻辑运算特性，可以用来替换过长的if...else...。
缺点：这种方式将原本多行的if-else浓缩成一行，可读性大大降低，因此在实际开发中要慎用，以防止时间太久，连自己都不清楚代码的意图。

在Java中，&&和||最后总会返回一个布尔值。在JavaScript中却不仅仅是这样。
首先需要知道的是，JavaScript中的true、false并不是“绝对的”。默认的false、undefined、NaN、""、0、null都会被当做false。
下边是一段常用代码，来自于jquery源码。这段代码意思是说：如果Array.isArray为undefined，则使用后边的function。从这段代码看，||并不是返回true或者false，而是返回了一个Array.isArray或者function，只是这个返回值在if或者其它逻辑表达中代表着true而已

isArray: Array.isArray || function(obj) {
     return jQuery.type(obj) === "array";
    },

下边是vue中的一段源码，其中的e && e.__ob__ && e.__ob__.dep.depend()则是巧妙的使用&&来避免了if的嵌套

function dependArray (value: Array<any>) {
  for (let e, i = 0, l = value.length; i < l; i++) {
    e = value[i]
 //巧用&&化解多个if
 //递归订阅？
    e && e.__ob__ && e.__ob__.dep.depend()
    if (Array.isArray(e)) {
      dependArray(e)
    }
  }
}

下边是vue源码中使用&&来赋值

const getter = property && property.get

总结一句话：在JavaScript中，逻辑表达式的返回值并不只是true或者false，而是一个值，这个值可以转为true或者false而已，明白这句话，也就明白了所谓的||、&&的妙用本质了。

3.16. null和{}的差别

这个其实可以延伸到比如说null和’’(空字符串)的差别等。
网上有一个比喻说的好：一个是无家可归，另一个是家徒四壁（O(∩_∩)O哈哈~）

3.17. 去除空格

' a  bc  '.replace(/ /g,'');//去除字符串中的所有空格
' a  bc  '.replace(/\s*/g,'');//去除字符串中的所有空白字符
' a  bc  '.replace(/^\s*/g,'');//去除字符串中左边所有空白字符
' a  bc  '.replace(/\s*$/g,'');//去除字符串中右边所有空白字符
' a  bc  '.replace(/^\s*|\s*$/g,'');//去除字符串中开头和结尾空白字符
' a  bc  '.trim();//去除字符串中开头和结尾空白字符

3.18. 获取url中的参数部分

//这只是一个思路，事实上需要很多必要的判断。
//可以使用的方法大都是关于Array，这里需要复习Array的es6 API
let param={};
paramsArr = 'http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23'.split('?')[1].split('&');
//1.使用map
paramsArr.map(function(ele){
	param[ele.split('=')[0]]=ele.split('=')[1]
});
param={};
//2.使用filter
paramsArr.filter((ele)=>{
	param[ele.split('=')[0]]=ele.split('=')[1];
})

4. DOM操作

4.1. 事件

• 事件分为三个阶段： 事件捕获 --> 事件目标 --> 事件冒泡
• 事件捕获：事件发生时（onclick,onmouseover……）首先发生在document上，然后依次传递给body、……最后到达目的节点（即事件目标）。
• 事件冒泡：事件到达事件目标之后不会结束，会逐层向上冒泡，直至document对象，跟事件捕获相反

1、onlick -->事件冒泡，重写onlick会覆盖之前属性，没有兼容性问题

ele.onclik = null;   //解绑单击事件，将onlick属性设为null即可

2、addEventListener(event.type, handle, boolean); IE8及以下不支持，属于DOM2级的方法，可添加多个方法不被覆盖，触发时会按照添加顺序依次调用。

//事件类型没有on
//false 表示在事件第三阶段（冒泡）触发
//true表示在事件第一阶段（捕获）触发。 如果handle是同一个方法，只执行一次。
ele.addEventListener('click', function(){ }, false);  
//解绑事件，参数和绑定一样
//不能移除匿名添加的函数。
ele.removeEventListener(event.type, handle, boolean);

3、attachEvent(event.type, handle ); IE特有，兼容IE8及以下，可添加多个事件处理程序，只支持冒泡阶段

//如果handle是同一个方法，绑定几次执行几次，这点和addEventListener不同,事件类型要加on,例如onclick而不是click
ele.attachEvent('onclick', function(){ }); 
//解绑事件，参数和绑定一样
ele.detachEvent("onclick", function(){ });

4、默认事件行为：href=""链接，submit表单提交等

● 阻止默认事件：

（1）return false; 阻止独享属性（通过on这种方式）绑定的事件的默认事件

ele.onclick = function() {
    ……                         //你的代码
    return false;              //通过返回false值阻止默认事件行为
};

（2）event.preventDefault( ); 阻止通过 addEventListener( ) 添加的事件的默认事件

element.addEventListener("click", function(e){
    var event = e || window.event;
    ……
    event.preventDefault( );      //阻止默认事件
},false);

（3）event.returnValue = false; 阻止通过 attachEvent( ) 添加的事件的默认事件

element.attachEvent("onclick", function(e){
    var event = e || window.event;
    ……
    event.returnValue = false;       //阻止默认事件
},false);

5、接下来我们把事件绑定以及事件解绑封装成为一个函数，兼容浏览器，包括IE6及以上

// 事件绑定
function addEvent(element, eType, handle, bol) {
    if(element.addEventListener){           //如果支持addEventListener
        element.addEventListener(eType, handle, bol);
    }else if(element.attachEvent){          //如果支持attachEvent
        element.attachEvent("on"+eType, handle);
    }else{                                  //否则使用兼容的onclick绑定
        element["on"+eType] = handle;
    }
}

// 事件解绑
function removeEvent(element, eType, handle, bol) {
    if(element.addEventListener){
        element.removeEventListener(eType, handle, bol);
    }else if(element.attachEvent){
        element.detachEvent("on"+eType, handle);
    }else{
        element["on"+eType] = null;
    }
}

---

A.● 事件冒泡、事件捕获阻止：

event.stopPropagation( );                // 阻止事件的进一步传播，包括（冒泡，捕获），无参数
event.cancelBubble = true;             // true 为阻止冒泡

B.● 事件委托：利用事件冒泡的特性，将里层的事件委托给外层事件，根据event对象的属性进行事件委托，改善性能。
使用事件委托能够避免对特定的每个节点添加事件监听器；事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。

4.1.1. 示例

4.1.1.1. JavaScript获取html元素的相关内容

<div id='secondpage' class="con show signup_box2">div>

var ele = document.getElementById('secondpage');
//获取元素标签名称
ele.tagName;//DIV
//获取元素属性
ele.getAttribute('id');//secondpage
//获取元素的class
ele.className;//"con show signup_box2"

4.1.1.2. javascript获取form表单中的字段值

<html>
<body>
    <form id='test-form'>
        用户名:<input name='userName' value="123" /><br> 密码:
        <input name='pass' /><br>
    form>
    <script type="text/javascript">
        var testForm1 = document.forms['test-form'];
        console.log('testForm1=' + testForm1);
        var testForm2 = document.getElementById('test-form');
        console.log('testForm2=' + testForm2);
        var userName1 = testForm1.userName;
        console.log('userName1=' + userName1);
        var userName2 = testForm1.elements[0];
        console.log('userName2=' + userName2);
        var userNameVal = userName1.value;
        console.log('userNameVal=' + userNameVal);
    script>
body>
html>

4.1.1.3. javascript手动触发控件的click事件

<html>
	<body>
		<input type='button' id='test' onclick='alert(1)' value='按钮'/>
		<script type="text/javascript">
		//也可以使用document.getElementById('').click();
		function simulation_click(){
			var e = document.createEvent("MouseEvents");//创建新的MouseEvents事件
			
			//初始化新创建的 Event 对象的属性。
			//event.initEvent(eventType,canBubble,cancelable)
			//eventType		字符串值。事件的类型。
			//canBubble		事件是否起泡。
			//cancelable	是否可以用 preventDefault() 方法取消事件。
			e.initEvent("click", true, true);
			
			//dispatchEvent给节点分派一个合成事件。
			//如果在事件传播过程中调用了 evt 的 preventDefault() 方法，则返回 false，否则返回 true。
			document.getElementById("test").dispatchEvent(e);
		}
		simulation_dialog();
		script>
	body>
html>

4.2. DOM

//1.创建dom
var div = document.createElement('div');//创建一个元素
var textNode = document.createTextNode('hello');//创建一个文本节点
div.appendChild(textNode);//添加子元素
div.removeChild(textNode)//移除子元素
var newText = document.createTextNode('world');
div.replaceChild(newText,textNode);//注意是new在前，old在后，否则报错
div.insertBefore(newText,textNode);//注意，新的在前，原有的在后
console.log(div);//
hello
//2.给元素添加属性
//第一种方法，使用document.createAttribute,然后再使用setAttributeNode
var styleAttr = document.createAttribute('style');
styleAttr.value='border:1px solid black;background-color:red;';
div.setAttributeNode(styleAttr);
//第二种方法
div.setAttribute('id','test');//
hello
//3.获取属性
div.style;//该方法很可能获取到的不是我们需要的内容
div.getAttribute('style');
//4.添加到页面
document.write('
hello world
');
document.body.appendChild(div);
//5.获取元素内容
document.getElementById('test').outerHTML;//获取元素内容，包括本身
document.getElementById('test').outerHTML='123';//设置元素内容，包括本身

document.getElementById('test').innerHTML;//获取元素内容，不包括本身
document.getElementById('test').innerHTML='123';//设置元素内容，不包括本身

element.textContent = "this is some sample text";
document.getElementById('test').innerText;//获取元素中的文本
document.getElementById('test').outerText;//该特性是非标准的，请尽量不要在生产环境中使用它！用于获取元素中的文本时，和innerText效果相当；用于设置时，则比innerText多了元素本身。
document.getElementById('test').innerHTML='123';//设置元素中的文本
//6.获取元素
document.getElementById('test');
document.getElementsByTagName('div');
document.getElementsByName('name');

4.3. textConent

4.3.1. textConent与innerText的差别

• textContent 会获取所有元素的内容，包括

你可能感兴趣的:(javascript)

• Long类型前后端数据不一致 igotyback 前端
  响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
• DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
  ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
• 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
  ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
• HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
  Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
• node.js学习 小猿L node.jsnode.js学习vim
  node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
• JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
  在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
• JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
  在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
• 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
  切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
• 高性能javascript--算法和流程控制 海淀萌狗
  -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
• 360前端星计划-动画可以这么玩 马小蜗
  动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
• JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
  我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
• Nginx从入门到实践(三) 听你讲故事啊
  动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
• Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
  Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
• 前端知识点 ZhangTao_zata 前端javascriptcss
  下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
• 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
  前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
• webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
  点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
• 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
  前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
• 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
  在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
• 2019-05-29 vue-router的两种模式的区别 Kason晨
  1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
• electron多标签页模式更像客户端 diygwcom electronjavascript前端
  Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
• 外卖霸王餐返利外卖会员卡小程序开发 闹小艾 good506070微信小程序小程序
  外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
• Axure设计之全屏与退出全屏交互实现 招风的黑耳 Axureaxure交互
  在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
• 全面指南：用户行为从前端数据采集到实时处理的最佳实践 数字沉思 营销流量运营系统架构前端内容运营大数据
  引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
• EcmaScript和JavaScript的区别 每天吃八顿 前端ecmascript
  ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
• javascript添加p元素，html添加文字，appendChild 游勇一 javascripthtml添加pappendChild
  javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
• CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制 SteveJi666 WebGLcesiumEarthSDKSuperMap3djavascript前端arcgis
  版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
• html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示 睿理
  html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
• 如何在 Python 中声明一个静态属性? 潮易 python开发语言
  在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
• 数据格式：什么是JSON和XML isNotNullX jsonxml
  JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
• HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
  什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
• mongodb3.03开启认证 21jhf mongodb
  下载了最新mongodb3.03版本，当使用--auth 参数命令行开启mongodb用户认证时遇到很多问题，现总结如下： （百度上搜到的基本都是老版本的，看到db.addUser的就是，请忽略） Windows下我做了一个bat文件，用来启动mongodb，命令行如下： mongod --dbpath db\data --port 27017 --directoryperdb --logp
• 【Spark103】Task not serializable bit1129 Serializable
  Task not serializable是Spark开发过程最令人头疼的问题之一，这里记录下出现这个问题的两个实例，一个是自己遇到的，另一个是stackoverflow上看到。等有时间了再仔细探究出现Task not serialiazable的各种原因以及出现问题后如何快速定位问题的所在，至少目前阶段碰到此类问题，没有什么章法 1.   package spark.exampl
• 你所熟知的 LRU(最近最少使用) dalan_123 java
  关于LRU这个名词在很多地方或听说，或使用，接下来看下lru缓存回收的实现 1、大体的想法     a、查询出最近最晚使用的项     b、给最近的使用的项做标记 通过使用链表就可以完成这两个操作，关于最近最少使用的项只需要返回链表的尾部；标记最近使用的项，只需要将该项移除并放置到头部，那么难点就出现 你如何能够快速在链表定位对应的该项？ 这时候多
• Javascript 跨域 周凡杨 JavaScriptjsonp跨域cross-domain
                                     
• linux下安装apache服务器 g21121 apache
  安装apache 下载windows版本apache，下载地址：http://httpd.apache.org/download.cgi   1.windows下安装apache Windows下安装apache比较简单，注意选择路径和端口即可，这里就不再赘述了。 2.linux下安装apache： 下载之后上传到linux的相关目录，这里指定为/home/apach
• FineReport的JS编辑框和URL地址栏语法简介 老A不折腾 finereportweb报表报表软件语法总结
    JS编辑框： 1.FineReport的js。 作为一款BS产品，browser端的JavaScript是必不可少的。 FineReport中的js是已经调用了finereport.js的。 大家知道，预览报表时，报表servlet会将cpt模板转为html，在这个html的head头部中会引入FineReport的js，这个finereport.js中包含了许多内置的fun
• 根据STATUS信息对MySQL进行优化 墙头上一根草 status
  mysql  查看当前正在执行的操作，即正在执行的sql语句的方法为:      show processlist 命令   mysql> show global status;可以列出MySQL服务器运行各种状态值，我个人较喜欢的用法是show status like '查询值%';一、慢查询mysql> show variab
• 我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名 aijuans Spring 3
  本文介绍如何给Spring的Bean配置文件的Bean定义别名？ 原始的 <bean id="business" class="onlyfun.caterpillar.device.Business"> <property name="writer"> <ref b
• 高性能mysql 之 性能剖析 annan211 性能mysqlmysql 性能剖析剖析
  1 定义性能优化 mysql服务器性能，此处定义为 响应时间。 在解释性能优化之前，先来消除一个误解，很多人认为，性能优化就是降低cpu的利用率或者减少对资源的使用。 这是一个陷阱。 资源时用来消耗并用来工作的，所以有时候消耗更多的资源能够加快查询速度，保持cpu忙绿，这是必要的。很多时候发现 编译进了新版本的InnoDB之后，cpu利用率上升的很厉害，这并不
• 主外键和索引唯一性约束 百合不是茶 索引唯一性约束主外键约束联机删除
  目标;第一步;创建两张表 用户表和文章表         第二步;发表文章       1,建表; ---用户表 BlogUsers --userID唯一的 --userName --pwd --sex create
• 线程的调度 bijian1013 java多线程thread线程的调度java多线程
  1.       Java提供一个线程调度程序来监控程序中启动后进入可运行状态的所有线程。线程调度程序按照线程的优先级决定应调度哪些线程来执行。   2.       多数线程的调度是抢占式的（即我想中断程序运行就中断，不需要和将被中断的程序协商） a) 
• 查看日志常用命令 bijian1013 linux命令unix
  一.日志查找方法，可以用通配符查某台主机上的所有服务器grep "关键字" /wls/applogs/custom-*/error.log   二.查看日志常用命令1.grep '关键字' error.log：在error.log中搜索'关键字'2.grep -C10 '关键字' error.log：显示关键字前后10行记录3.grep '关键字' error.l
• 【持久化框架MyBatis3一】MyBatis版HelloWorld bit1129 helloworld
  MyBatis这个系列的文章，主要参考《Java Persistence with MyBatis 3》。   样例数据 本文以MySQL数据库为例，建立一个STUDENTS表，插入两条数据，然后进行单表的增删改查     CREATE TABLE STUDENTS ( stud_id int(11) NOT NULL AUTO_INCREMENT,
• 【Hadoop十五】Hadoop Counter bit1129 hadoop
     1. 只有Map任务的Map Reduce Job File System Counters FILE: Number of bytes read=3629530 FILE: Number of bytes written=98312 FILE: Number of read operations=0 FILE: Number of lar
• 解决Tomcat数据连接池无法释放 ronin47 tomcat 连接池　优化
  近段时间，公司的检测中心报表系统(SMC)的开发人员时不时找到我，说用户老是出现无法登录的情况。前些日子因为手头上 有Jboss集群的测试工作，发现用户不能登录时，都是在Tomcat中将这个项目Reload一下就好了，不过只是治标而已，因为大概几个小时之后又会 再次出现无法登录的情况。 今天上午，开发人员小毛又找到我，要我协助将这个问题根治一下，拖太久用户难保不投诉。 简单分析了一
• java-75-二叉树两结点的最低共同父结点 bylijinnan java
  import java.util.LinkedList; import java.util.List; import ljn.help.*; public class BTreeLowestParentOfTwoNodes { public static void main(String[] args) { /* * node data is stored in
• 行业垂直搜索引擎网页抓取项目 carlwu LuceneNutchHeritrixSolr
  公司有一个搜索引擎项目，希望各路高人有空来帮忙指导，谢谢！ 这是详细需求： （1） 通过提供的网站地址(大概100-200个网站)，网页抓取程序能不断抓取网页和其它类型的文件（如Excel、PDF、Word、ppt及zip类型），并且程序能够根据事先提供的规则，过滤掉不相干的下载内容。 （2） 程序能够搜索这些抓取的内容，并能对这些抓取文件按照油田名进行分类，然后放到服务器不同的目录中。
• [通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费 comsci 资源
        降低通讯服务资费，就意味着有更多的用户进入，就意味着通讯服务提供商要接待和服务更多的用户，在总体运维成本没有由于技术升级而大幅下降的情况下，这种降低资费的行为将导致每个用户的平均带宽不断下降，而享受到的服务质量也在下降，这对用户和服务商都是不利的。。。。。。。。     &nbs
• Java时区转换及时间格式 Cwind java
  本文介绍Java API 中 Date, Calendar, TimeZone和DateFormat的使用，以及不同时区时间相互转化的方法和原理。   问题描述： 向处于不同时区的服务器发请求时需要考虑时区转换的问题。譬如，服务器位于东八区（北京时间，GMT+8:00），而身处东四区的用户想要查询当天的销售记录。则需把东四区的“今天”这个时间范围转换为服务器所在时区的时间范围。
• readonly,只读，不可用 dashuaifu jsjspdisablereadOnlyreadOnly
  readOnly 和 readonly 不同，在做js开发时一定要注意函数大小写和jsp黄线的警告！！！我就经历过这么一件事： 使用readOnly在某些浏览器或同一浏览器不同版本有的可以实现“只读”功能，有的就不行，而且函数readOnly有黄线警告！！！就这样被折磨了不短时间！！！（期间使用过disable函数，但是发现disable函数之后后台接收不到前台的的数据！！！）  
• LABjs、RequireJS、SeaJS 介绍 dcj3sjt126com jsWeb
  LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 则是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更
• [应用结构]入口脚本 dcj3sjt126com PHPyii2
  入口脚本 入口脚本是应用启动流程中的第一环，一个应用（不管是网页应用还是控制台应用）只有一个入口脚本。终端用户的请求通过入口脚本实例化应用并将将请求转发到应用。 Web 应用的入口脚本必须放在终端用户能够访问的目录下，通常命名为 index.php，也可以使用 Web 服务器能定位到的其他名称。 控制台应用的入口脚本一般在应用根目录下命名为 yii（后缀为.php），该文
• haoop shell命令 eksliang hadoophadoop shell
  cat chgrp chmod chown copyFromLocal copyToLocal cp du dus expunge get getmerge ls lsr mkdir movefromLocal mv put rm rmr setrep stat tail test text
• MultiStateView不同的状态下显示不同的界面 gundumw100 android
  只要将指定的view放在该控件里面，可以该view在不同的状态下显示不同的界面，这对ListView很有用，比如加载界面，空白界面，错误界面。而且这些见面由你指定布局，非常灵活。 PS：ListView虽然可以设置一个EmptyView，但使用起来不方便，不灵活，有点累赘。 <com.kennyc.view.MultiStateView xmlns:android=&qu
• jQuery实现页面内锚点平滑跳转 ini JavaScripthtmljqueryhtml5css
  平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。   效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/37.htmHTML文件代码： &
• kafka offset迁移 kane_xie kafka
  在早前的kafka版本中（0.8.0），offset是被存储在zookeeper中的。   到当前版本（0.8.2）为止，kafka同时支持offset存储在zookeeper和offset manager（broker）中。   从官方的说明来看，未来offset的zookeeper存储将会被弃用。因此现有的基于kafka的项目如果今后计划保持更新的话，可以考虑在合适
• android > 搭建 cordova 环境 mft8899 android
    1 , 安装 node.js        http://nodejs.org      node -v   查看版本   2, 安装 npm   可以先从  https://github.com/isaacs/npm/tags  下载 源码 解压到
• java封装的比较器，比较是否全相同，获取不同字段名字 qifeifei
   非常实用的java比较器，贴上代码： import java.util.HashSet; import java.util.List; import java.util.Set; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import net.sf.json.JsonConfig; i
• 记录一些函数用法 .Aky. 位运算PHP数据库函数IP
  高手们照旧忽略。 想弄个全天朝IP段数据库，找了个今天最新更新的国内所有运营商IP段，copy到文件，用文件函数，字符串函数把玩下。分割出startIp和endIp这样格式写入.txt文件，直接用phpmyadmin导入.csv文件的形式导入。（生命在于折腾，也许你们觉得我傻X，直接下载人家弄好的导入不就可以，做自己的菜鸟，让别人去说吧） 当然用到了ip2long()函数把字符串转为整型数
• sublime text 3 rust wudixiaotie Sublime Text
  1.sublime text 3 => install package => Rust 2.cd ~/.config/sublime-text-3/Packages 3.mkdir rust 4.git clone https://github.com/sp0/rust-style 5.cd rust-style 6.cargo build --release 7.ctrl

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.