AkaTBS
AkaTBS

javascript笔记

JavaScript

将字符串转换为数字

  • parseInt() ◆只保留数字的整数部分，不会进行四舍五入运算。
  • parseFloat()◆如果在数字后加上非数字的字符，也可以转换成功。

事件

 事件源.事件 = function(event){  事件处理函数 }或＝函数名；
事件 描述
onclick 鼠标单击
ondblclick 鼠标双击
onkeyup 按下并释放键盘上的一个键时触发
onchange 文本内容或下拉菜单中的选项发生改变
onfocus 获得焦点，表示文本框等获得鼠标光标。
onblur 失去焦点，表示文本框等失去鼠标光标。
onmouseover 鼠标悬停，即鼠标停留在图片等的上方
onmouseout 鼠标移出，即离开图片等所在的区域
onload 网页文档加载事件
onunload 关闭网页时
onsubmit 表单提交事件
onreset 重置表单时
oninput 正在输入时
  • event 常见属性
属性 作用
data 返回拖拽对象的URL字符串（dragDrop）
width 该窗口或框架的高度
height 该窗口或框架的高度
pageX 光标相对于该网页的水平位置（ie无）
pageY 光标相对于该网页的垂直位置（ie无）
screenX 光标相对于该屏幕的水平位置
screenY 光标相对于该屏幕的垂直位置
target 该事件被传送到的对象
type 事件的类型
clientX 光标相对于该网页的水平位置 （当前可见区域）
clientY 光标相对于该网页的水平位置

pageX clientX screenX 区别

  • screenX screenY 是以我们的电脑屏幕为基准点测量
  • pageX pageY 以我们的文档（绝对定位）的基准点对齐 （ie678 不认识）
  • clientX clientY 以可视区域(不包含滚动条内容）为基准点类似于固定定位

入口函数

window.onload = function(){内部放js} 页面的结构,样式,节点等加载完毕后执行。

变量声明提升

function fun(){console.log(num);
            var num = 20;}
相当于 ---
function fun(){var num;
           console.log(num);
           Num = 20;}

在函数体内部，声明变量，会把该声明提升到函数体的最顶端。 只提升变量声明，不赋值。

函数参数

  • JavaScript在创建函数的同时，会在函数内部创建一个arguments对象实例,用于存储函数传送过过来实参，长度为实参个数。
  • arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同
  • function fn(a,b){
    console.log(fn.length); //得到是函数的形参的个数
    console.log(arguments.length);
    } // 得到的是实参的个数
  • arguments.callee; 返回的是正在执行的函数本身。 也是在函数体内使用。 在使用函数递归调用时推荐使用arguments.callee代替函数名本身

this (事件的调用者)

  • 函数中遇到要修改自身属性的一定要用this来代替自身。
  • innerHTML 更换盒子里面的内容 文字 标签都换.
  • Input.value 更换表单内容（单标签内容都是通过value得到）
    $("txt").focus();给表单使用，使光标聚焦在表单可直接输入。
    $("txt").select();全选表单中的内容。

判断真假

我们用条件语句来判断5大数据类型中的真假；

数据 结论
数字类型 所有数字都是真，0是假
字符串 所有字符串都是真，’ ’串是假
对象 所有对象都是真，null是假
未定义 undefined是假，没有真

访问关系

  • 父 ： this.parentNode 得到父亲的标签
  • 兄弟： nextElementSibling 下一个兄弟
    previousElementSibling 上一个兄弟
  • 子节点: children

插入节点

  1. appendChild(); 添加子节点放到盒子的最后面。
  2. insertBefore(插入的节点，参照节点) 子节点 写满两个参数
  3. demo.insertBefore(test,childrens[0]);
    如果第二个参数为 null则默认这新生成的盒子放到最后面。

克隆节点

  • cloneNode();
    括号里面如果里面是 true 深层复制，除了复制本盒子，还复制子节点。
    如果为 false 浅层复制 只复制 本节点 不复制 子节点。

设置节点属性

  1. 获取节点属性 getAttribute(属性)
  2. 设置节点属性 setAttribute(“属性”,”值”);
  3. 删除某个属性 removeAttribute(“属性”);

声明日期

  var  date = new Date();
  • 若括号内写日期“2015/12/12 17:30:00”则是定义自己的时间 日期与时间中用空格隔开，不写日期是当前时间。
  • 提倡使用date.getTime();date.valueOf();都是得到距离 1970年的毫秒数,做计算用
  • Date.prototype.toLocaleDateString()转换为当前日期格式

定时器

 var timer= window.setInterval(“执行的函数名”,间隔时间)
  • 关闭定时器 clearInterval(定时器名称);
  • 倒计时定时器 setTimeout(“函数”, 时间 ) 只执行一次

深层次的看待定时器区别：

  • setInterval是排队执行的，假如间隔时间是1秒，而执行的程序的时间是2秒，上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒
  • setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒.

要养成习惯要使用定时器前先清楚之前的定时器。
Javascript是单线程执行的，当某段代码正在执行的时候，所有后续的任务必须等待，行程一个队列，一旦当前任务执行完毕，再从队列中取出下一个任务，被称为“阻塞式执行”。如果代码中设定了一个setTimeout，那么浏览器会在合适的时间将代码插入任务队列，如果这个时间设为0就代表立即插入队列等待执行。属于异步执行函数。

offset

  得到对象的宽度和高度(自己的，与他人无关) 
  offsetWidth =  width  + border  +  padding    
  div.style.width   这样只能得到行内样式的数值
  offsetLeft  offsetTop 返回子盒子到带有定位的父盒子边框到边框的距离
  如果父级都没有定位则以body 为准   
   offsetLeft 从父级的padding 开始算，父亲的border 不算
  offsetParent  返回改对象带有定位的父级 
  如果当前元素的父级元素中有CSS定位（position），offsetParent取最近的那个父级元素。

offsetTop 与 style.top 的区别:

  • 最大区别在于 offsetTop 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以（只有定位的盒子才有 left top right）
  • 最重要的区别style.left 只能得到行内样式offsetLeft都可以
  • offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
  • offsetTop 只读，而 style.top 可读写。
  • 如果没有给 HTML 元素指定过 top 样式，则 style.top 返回空字符串。

scrollTop scrollLeft

scrollTop 当滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离

  • 页面滚动效果

     window.onscroll = function() { 页面滚动语句  }

谷歌浏览器 和没有声明 DTD ： document.body.scrollTop;
火狐 和其他浏览器 document.documentElement.scrollTop;
ie9+ 和 最新浏览器都认识window.pageXOffset; pageYOffset （scrollTop）

  • 兼容性写法： var scrollTop = window.pageYOffset || document.documentElement.scrollTop|| document.body.scrollTop || 0;

JSON

  • JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一。
  • JSON.stringify(value,repalcer?,space?)将JSON输出字符串，replacer是一个含有参数key,value的节点访问函数，可以对每个键值进行操作后输出，return的是value值，space是使用给定的字符为每个层级缩进，生成一个对象树。只输出可枚举的属性。采用的是前序遍历算法(父元素先于子元素)。
  • 也可以JSON.stringify(value).replace(/"/g,"")对转换后的string做操作。
  • JSON.parse(text,recicer?)reviver是一个节点访问函数，可以用来转换解析后的数据，函数的参数为key，value用来对转换后的数据进行操作，return的是value值。采用的是后序遍历算法(子元素先于父元素)。
  • Json一般就是被当做一个配置单用； 字符串必须用双引号括起来。
    用for循环json时for（key in json）｛其中json［key］表示相应的value｝
    var json1 = {name :"刘德华",age: 55};
    console.log(json1.name); // 输出名字 刘德华

正则表达式

  1. /g 表示该表达式将用来在输入字符串中查找所有可能的匹配，返回的结果可以是多个。如果不加/g最多只会匹配一个
  2. /i 表示匹配的时候不区分大小写，这个跟其它语言的正则用法相同
  3. /m 表示多行匹配。什么是多行匹配呢？就是匹配换行符两端的潜在匹配。影响正则中的^$符号
  4. /s 与/m相对，单行模式匹配。
  5. /e 可执行模式，此为PHP专有参数，例如preg_replace函数。
  6. /x 忽略空白模式。

scroll函数返回scrollLeft和scrollTop的json

function scroll() {
if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
{return {left: window.pageXOffset,
        top: window.pageYOffset}}
else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
// 检测是不是怪异模式的浏览器 -- 就是没有声明
{return {left: document.documentElement.scrollLeft,
        top: document.documentElement.scrollTop}}
return {left: document.body.scrollLeft,   //  剩下的肯定是怪异模式的
        top: document.body.scrollTop}}

页面点击滑动效果

        var leader = 0,target = 0,timer = null;
        for(var i= 0; i

client 家族（可视区域）

offsetWidth:   width  +  padding  +  border     
clientWidth：  width  +  padding     不包含border  
scrollWidth:   大小是内容的大小

检测屏幕宽度(可视区域)

  • ie9及其以上的版本 window.innerWidth
  • 标准模式 document.documentElement.clientWidth
  • 怪异模式 document.body.clientWidth
自己封装一个 返回可视区宽度和高度的函数。
function client() {
        if(window.innerWidth != null)  // ie9 +  最新浏览器
        { return {width: window.innerWidth, 
                  height: window.innerHeight}}
        else if(document.compatMode === "CSS1Compat")  // 标准浏览器
        {return {width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight}}
        return { width: document.body.clientWidth,
                 height: document.body.clientHeight}}    // 怪异浏览器

window.onresize 改变窗口事件

window.onresize = function() {}  窗口框架被调整大小时的事件

简单冒泡机制

  • 事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有父元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
  • 顺序div -> body -> html -> document -> window
  • 不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload

  • **阻止冒泡的方法 **

      if(event && event.stopPropagation)
  {event.stopPropagation();}     // w3c 标准
  else
  {event.cancelBubble = true; }  // ie678 ie浏览器

判断当前对象

火狐 谷歌 等 event.target.id
ie 678 event.srcElement.id

  • 兼容 var targetId = event.target ? event.target.id : event.srcElement.id;

获得用户选择内容

window.getSelection()     标准浏览器
document.selection.createRange().text;      ie 获得选择的文字
兼容性的写法：
if(window.getSelection)
{txt = window.getSelection().toString();}  // 转换为字符串
else {txt = document.selection.createRange().text;}   // ie 的写法

动画原理： style.left = 盒子的 offsetLeft + 步长

  function animate(obj,target){
        var speed = obj.offsetLeft < target ? 5 : -5;  // 用来判断应该+还是 -
        obj.timer = setInterval(function() {
            var result = target - obj.offsetLeft; // 因为他们的差值不会超过5
            obj.style.left = obj.offsetLeft + speed + "px";
            if(Math.abs(result)<=5)  // 如果差值不小于 5 说明到位置了
            {clearInterval(obj.timer);
             obj.style.left = target + "px";  //直接跳转目标位置
            }
        },30) }

我们访问得到css 属性，比较常用的有两种：

  1. 利用点语法
    box.style.width box.style.top
    但是这个语法有非常大的缺陷，不变的。 后面的width和 top没有办法传递参数的。
  2. 利用 [] 访问属性
    语法格式: box.style[“width”]
    元素.style[“属性”];
    最大的优点 ： 可以给属性传递参数

得到css 样式

box.style.left box.style.backgorundColor 只能得到行内的样式。

得到内嵌或者外链的样式

  1. obj.currentStyle ie opera 常用
    外部（使用link）和内嵌（使用style）样式表中的样式（ie和opera）

  2. window.getComputedStyle("元素", "伪类") w3c
    两个选项是必须的， 没有伪类用 null 替代

  3. 兼容写法 ：

    封装获取属性的方法。
function getStyle(obj,attr) {  
    if(obj.currentStyle)  // ie 等
    {return obj.currentStyle[attr];}
    else
    {return window.getComputedStyle(obj,null)[attr]; }｝ // w3c 浏览器

in 运算符

in运算符也是一个二元运算符，但是对运算符左右两个操作数的要求比较严格。in运算符要求第1个（左边的）操作数必须是字符串类型或可以转换为字符串类型的其他类型，而第2个（右边的）操作数必须是数组或对象。只有第1个操作数的值是第2个操作数的属性名，才会返回true，否则返回false.

html5中javascript的提升

新选择器 JS多了一个原始支持，类似jqueryDOM选择器

document.querySelector(selector) 可以通过CSS选择器的语法找到DOM元素
document.querySelectorAll('.item') 返回所有满足该条件元素dom类型数组

  1. 本质上jquery方式和querySelector方式都是获取DOM数组， 只不过jquery会多一些其他成员。
  2. DOM数组的每一个成员注册事件不能像jquery一样直接注册， 必须分别给每个元素注册.
  3. h5就是将我们经常需要的操作又包装一层

元素.classList

  1. 新H5中DOM对象多了一个classList属性，是一个数组
  2. .add() 添加一个新的类名
  3. .remove() 删除一个的类名
  4. .contains() 判断是否包含一个指定的类名
  5. .toggle() 切换一个class element.toggle('class-name',[add_or_remove])
  6. .toggle()函数的第二个参数true为添加 false删除

访问历史 API

界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态
在HTML5中可以通过window.history操作访问历史状态，让一个页面可以有多个历史状态

  1. window.history.forward(); // 前进
  2. window.history.back(); // 后退
  3. window.history.go(); // 刷新
  4. history.pushState(放入历史中的状态数据, 设置title(现在浏览器不支持)， 改变历史状态)

2.2 网页存储

2.2.1 Web Storage

  1. localStorge.setItem(键，值)方式向本地存储数据，sessionStorge临时数据

2.4 拖放操作

想要捕获drop事件就一定要在改事件里阻止默认事件
target.addEventListener(“dragover”,function(e ){
e.preventDefault();
e.stopPropagation();
})

使用indexDB数据库

  1. 获取浏览器关于indexDB的一些对象，为了浏览器兼容性
    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
    window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
    window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
    var dbInfo = { //

  2. 定义一些数据库配置信息
    dbName:"IndexDB", // 数据库的名称
    dbVersion:2018 // 数据库的版本号
    };数据库创建的时候默认版本号为1，当我们传入的版本号和数据库当前版本号不一致的时候onupgradeneeded就会被调用，当然我们不能试图打开比当前数据库版本低的version，否则调用的就是onerror了
    var dbContent = window.indexedDB.open(dbInfo.dbName, dbInfo.dbVersion); // 3、创建数据库连接

  3. 控制数据库版本升级的方法，创建新store（表），或者是修改，都在这里面执行

    dbContent.onupgradeneeded = function (e) {console.log("数据库版本发生变化");}
//  3.2当数据库连接成功的时候执行的方法，我们一般的增删改查都在这里面进行操作
dbContent.onsuccess = function (e) {console.log(e);}
//  3.3当我们数据库连接是失败的时候执行的方法。
dbContent.onerror  = function (e) {  }

面向对象构造函数方式，传参时使用对象形式{ }

    function Sprite( option ) {this._init( option );}
    Sprite.prototype = {
        _init: function( option ) {// 加下划线进行区分，仅用于内部调用。
            this.name = option.name;
            this.x = option.x === 0 ? 0 : (option.x || 10);
    //传入参数x不为数字或没有传入参数情况下使用默认值10，因为有可能传入0，所以使用三元运算符来保证传入0的时候不被当做false而使用默认值
            this.color = 'red';
        },
        angleToRad: function( angel ) {
            return angel * Math.PI / 180;
        },
        show: function( arg ) {
            console.log( this.angleToRad( 30 ) );
            console.log( 'ss' + arg );
        }
    };

get set语法规范

    Object.defineProperty(this, "price", {
    get: function () {return price*0.9;},
    set: function (value) {
        /*大概普通产品的价格都在0--1万*/
        if(value>10000)
        {
            alert('产品价格必须在0--1万之间');
        }else{
            price = value;
        }
    }
    });

javascript中的封装

封装：通过将一个方法或者属性声明为私用的，可以让对象的实现细节对其他对象保密以降低对象之间的耦合程度，可以保持数据的完整性并对其修改方式加以约束，这样可以是代码更可靠，更易于调试。封装是面向对象的设计的基石。

  • 封装实现细节指的是，使得对象内部的变化对于其他对象而言是不可见的，对象只对自己的行为负责。对象之间的耦合变松散，对象之间只通过暴露的API接口来通讯。这样一来，即便当我们需要修改对象时，可以任意修改它的内部实现，而由于对外接口没有变化，则不会影响程序的其他功能。
  • 很多编程语言是通过语法解析来实现封装数据的，比如Java提供private、public、protected等关键字来限定访问权限，而JavaScript缺乏这些关键字的支持，只能依赖变量的作用域来实现public和private的封装特性。
  • 私有属性和方法：函数有作用域，在函数内用var 关键字声明的变量在外部无法访问，私有属性和方法本质就是你希望在对象外部无法访问的变量。
  • 特权属性和方法：创建属性和方法时使用的this关键字，因为这些方法定义在构造器的作用域中，所以它们可以访问到私有属性和方法；只有那些需要直接访问私有成员的方法才应该被设计为特权方法。
  • 共有属性和方法：直接链在prototype上的属性和方法，不可以访问构造器内的私有成员，可以访问特权成员，子类会继承所有的共有方法。
  • 共有静态属性和方法：最好的理解方式就是把它想象成一个命名空间，实际上相当于把构造器作为命名空间来使用。
 /* -- 封装 -- */
　　var _packaging =function(){
   　　//私有属性和方法
   　　var name ='Darren';
   　　var method1 =function(){
    　　  //...
   　　}
   　　//特权属性和方法
   　　this.title ='JavaScript Design Patterns' ;
   　　this.getName =function(){
    　　  return name;
   　　}
　　}
　　//共有静态属性和方法
　　_packaging._name ='Darren code';
　　_packaging.alertName =function(){
   　　alert(_packaging._name);
　　}
　　//共有属性和方法
　　_packaging.prototype = {
   　　init:function(){
      　　//...
   　　}
　　}

javascript中的继承

  • 继承本身就是一个抽象的话题，在JavaScript中继承更是一个复杂的话题，因为JavaScript想要实现继承有两种实现方式，分别是类式继承和原型式继承，每种实现的方式都需要采取不少措施，下面本人通过分析例子的方式讲解JavaScript中这个很重要的话题。
/* -- 类式继承 -- */
　　//先声明一个超类
　　function Person(name){
　　　　this.name = name;
　　}
　　//给这个超类的原型对象上添加方法 getName 
　　Person.prototype.getName =function(){
   　　returnthis.name;
　　}
　　//实例化这个超类
　　var a =new Person('Darren1')
　　alert(a.getName());
　　//再声明类
　　function Programmer(name,sex){
   　　//这个类中要调用超类Person的构造函数，并将参数name传给它
   　　Person.call(this,name);
   　　this.sex = sex;
　　}
　 //这个子类的原型对象等于超类的实例
　　Programmer.prototype =new Person();
　　//因为子类的原型对象等于超类的实例，所以prototype.constructor这个方法也等于超类构造函数，你可以自己测试一下，
//如果没这一步，alert(Programmer.prototype.constructor)，这个是Person超类的引用，所以要从新赋值为自己本身
　　Programmer.prototype.constructor = Programmer;
　　//子类本身添加了getSex 方法
　　Programmer.prototype.getSex =function(){
   　　returnthis.sex;
　　}
　　//实例化这个子类
　　var _m =new Programmer('Darren2','male');
　　//自身的方法
　　alert(_m.getSex());
　　//继承超类的方法
　　alert(_m.getName());

/* -- 原型式继承 -- */
　　//clone()函数用来创建新的类Person对象
　　var clone =function(obj){
var _f =function(){};
   　　//这句是原型式继承最核心的地方，函数的原型对象为对象字面量
   　　_f.prototype = obj; 
   　　returnnew _f;
　　}
　　//先声明一个对象字面量
　　var Person = {
   　　name:'Darren',
   　　getName:function(){
      　　returnthis.name;
   　　}
　　}
　　//不需要定义一个Person的子类，只要执行一次克隆即可
　　var Programmer = clone(Person);
　　//可以直接获得Person提供的默认值，也可以添加或者修改属性和方法
　　alert(Programmer.getName())
　　Programmer.name ='Darren2'
　　alert(Programmer.getName())

　　//声明子类,执行一次克隆即可
　　var Someone = clone(Programmer);

  • 原型编程泛型包括以下的特点：

    • 所有的数据都是对象；
    • 不通过实例化创建对象，而是找到一个对象作为原型并克隆它；
    • 对象会记住个各自的原型；
    • 如果对象无法响应某个请求，会把这个请求委托给自己的原型；

  • 你使用new操作符调用构造函数时，会经历以下步骤：

    1. 创建一个空对象，作为将要返回的实例对象；
    2. 将空对象的原型指向构造函数的prototype属性，也就是Keith构造函数的prototype属性；
    3. 将空对象赋值给构造函数内部的this关键字，也就是this关键字会指向实例对象；
    4. 开始执行构造函数内部的代码；

  • 对象会记住各自的原型，如果对象无法响应某个请求，会把这个请求委托给自己的原型。

JavaScript中的多态

  • 多态最根本的作用是消除条件分之语句，将过程化的条件分之语句转化为对象的多态性。
  • 每个对象应该做什么，封装在成对象内部的一个方法，每个对象负责自己的行为。所以这些对象可以根据同一个指令，有条不紊地分别进行各自的工作，这正是面向对象的优点。
  • 由于JavaScript的变量类型在运行期是可变的，意味着JavaScript对象的多态性是与生俱来的 。判断对象是否具有某种能力，不需要判断对象是否属于某种类型，只取决于它有没有相对应的方法，不存在任何程度的“类型耦合”。

小知识点：

  1. 设置图片时单设置一个长或宽则剩下的边长按比例自动设置。

  2. 鼠标移至图片上时变成小手给图片添加样式 cursor：pointer；

  3. 阻止表单提交

  4. 设置盒子权重时在样式中写 z-index:数字越大优先级越高。

  5. id选择器与类选择器的区别：同一个页面中一个标签只能对应一个id但是可以选择多个类，类也可以应用在多个标签中。

  6. 给a标签的href="javascript:;" 其中javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时，如果页面内容很多，有滚动条时，页面不会乱跳，用户体验更好。相当于执行了一段javascript空代码，地址不发生跳转。与这个相同

  7. 去掉li前面的小点用list-style-type: none;

  8. 使li或span的外形变为圆形用border-radius: 50%; 添加圆角边框。

  9. textarea设置resize：none；可以防止用户改变文本框大小。

  10. 想让盒子根据里面内容多少改变大小将盒子height改成auto。

  11. 使按钮或者表单不可用this.disable=true；

  12. a&&b 如果a 为假 ，则返回 a ；如果a 为真 ，则返回 b 。
    i. a||b 如果 a 为假 ，则返回b ；如果 a 为真 ，则返回a 。

  13. img {vertical-align: top; } /取消图片底部3像素距离/

  14. 一定要注意在javascript里修改style样式时候赋值都要用“”以字符串形式赋值。

  15. javascript修改style中的数值后都可以到行内数值样式上看到。

  16. 使用webstorm新建javascript文件时候先把右下角的编码格式改为utf－8否则后面运行会出错。新建css文件也一样。

  17. 如果在head里面引用javascript文件则需要考虑文件内函数是否在window.onload里面否则会产生因为网页未加载完造成javascript出错。

  18. 表单中的input可以直接通过name属性获取到DOM对象，form.控件name

  19. 创建字符串时若里带有标签的最好用单引号括起来避免和里面的双引号冲突。

  20. JS 页面跳转: window.location.href = ”http://www.itcast.cn”。

  21. 要获取当前页面宽度用document.documentElement.clientWidth。

  22. 获取当前页面相对滚动document.documentElement.scrollTop||document.body.scrollTop;

  23. input的type改为search时可以将回车当确认键。

  24. 获取屏幕触摸用addEventListener（“touchstart”，function(event){}）在函数中用event.touches[0].clientY;来获取鼠标点击的Y坐标用touchmove来获取触摸离开时鼠标最后所在的坐标。

  25. 使用var img=new Image(width，height );效果和cratelement的效果相同。用img.src添加图片。

  26. 字符串转换成JSON对象用全局的JSON函数 JSON.parse(string);

  27. 可以利用instanceof来判断对象的构造函数。

  28. 若函数中加return就不能当做构造函数来看，构造函数return的是一个对象。

  29. 判断数据类型时常用typeof和call，在使用 typeof 运算符时采用引用类型存储值（NULL，数组，对象）会出现一个问题，无论引用的是什么类型的对象，它都返回 "object"。

  30. console.log(toString.call({})) //[object Object]

  31. console.log(toString.call([])) //[object Array]

  32. 用window.addListener(“hashchange”,function(e){})来监听地址栏中#后的哈希值变化，利用window.location来得到地址对象。

  33. 解析一个地址先创建一个a对象var aLink=document.creatElement(“a”)

  34. 再给a标签对象href赋值为地址字符串，之后既可通过aLink.hash得到地址哈希值

  35. 小技巧给一个数组不断添加内容可以arr[arr.length]=…;来给数组不断赋值。

  36. 从数组中删除元素也可以splice（元素索引，删除元素数目）。

  37. for循环数组或对象时若用（index in arry）作为条件index表示当前元素索引。

  38. 可以使用外部链接的标签img（支持跨域但无法获取服务端数据）、iframe（可以接受数据单操作复杂）、link（在CSS处理阶段会报错）、script（可以获取服务器数据，被选做jsonp传送方式）。

  39. 为了使代码易于维护采用开闭原则，对于后期会产生变化的量一定不能写死，以后需要通过修改来迭代。

  40. 变化点封装，一般都把今后会变化的地址类的写在config函数里面，后面通过别名来使用。一定不要暴露在代码中。

  41. 将一个对象利用“=”赋值给另一个对象时传递的是一个内存对象，若修改其中一个的属性则都会发生改动，想要避免源对象被篡改可以利用object.assign()方法或者object.creat()方法。

  42. js中函数对象是有长度的，它的长度是由参数的个数决定。(function (a, b, c, d) {}).length === 4。

  43. 想要正确处理上传的文件，并接受到文件的内容，需要把表单的enctype属性设置为multipart/form-data,这是个适用于于BLOB（大型二进制文件）的MIME类型。

  44. 想要将一个包含对象的数组以字符串的形式保存到文件中，需要循环遍历数组并用JSON对象的.stringify方法将对象转化为字符串形式，再进行保存。

  45. 写静态网页可以使用gulp+browersync（yo webapp生成模板），编写动态网站用express+ejs+sass.
    Sass监听文件夹：sass --watch sassFileDirectory:cssFileDirectory；
    Sass监听单个文件：sass --watch style.scss:style.css；

  46. 函数的柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。增加了函数的适用性，但同时也降低了函数的适用范围。

  47. 惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行，在第一次调用过程中，该函数会被覆盖为另一个按照合适方式执行的函数，这样任何对原函数的调用就不用再经过执行的分支了。如函数功能是对应不同浏览器创建XMLHttpRquest当第一次执行时判断完浏览器类型并创建完成后及可以返回一个被修改过后的本函数，覆盖原来的函数，这样以后调用此函数时就不需要再判断浏览器类型，可以直接创建对应XMLHttpRquest。

  48. 面向切面编程AOP主要实现的目的是针对业务处理过程中的切面进行提取，它所面对的是处理过程中的某个步骤或阶段，以获得逻辑过程中各部分之间低耦合性的隔离效果。比如最常见的就是日志记录了.

  49. String的search、match、replace参数都可以为正则表达式。

  50. 任何语言在浮点数运算时都会有误差，浮点数运算的时候，先转化为二进制，用二进制来算，结果再转回十进制，转换的过程中会装换成无限循环小数，所以最后结果会有误差。js中使用Number.prototype.toFixed()来设置保留小数的位数,返回的是字符串。可以使用valueOf()来再转为number类型。

  51. 数组的归约函数reduce（function(prev,cur，i){}）会从左到右进行迭代，每次返回的值作为下一次的prev参数。

  52. 在循环遍历数组时若是想在找到结果后将结果在数组中剔除防止重复，因为若是直接删除会影响数组的循环，解决办法是将此值赋为NaN，这样在数组中显示时为null。使用delete删除数值元素，删除元素会产生空缺，不会更新length，空缺部分显示undefined。如果没按照数组顺序给数组某一索引赋值，数组将不连续，中间空缺部分会显示undefined。forEach()会忽略undefined。使用splice()函数可以移除元素而不产生空缺。若修改数组的length为某个值，数组在此索引之外的部分都会被删除。使用array.filter(function(v){return true;})可以滤出空缺函数。

  53. 使用闭包要注意，由于变量被保存在内存中，所以会对内存造成消耗，所以不能滥用闭包。解决方法是 在退出函数之前，将不使用的局部变量全部删除。

  54. 使用array.filter(function(val){})可以遍历数组里的所有内容，return true的话数组会保留当前内容，false移除当前内容。

  55. 获得所有传入的参数放入一个数组args = Array.prototype.slice.call(arguments);

  56. 写递归函数时要注意：无论是否满足跳出递归的条件，下一步的执行都要带上return，即在调用自身时前面一定要带上return，满足跳出条件时才能一步一步跳出循环。

var lefted,sliced = [];
function chunkArrayInGroups(arr, size) {
sliced.push(arr.slice(0, size));
lefted = arr.slice(size, arr.length);
if (lefted.length == 0) {
return sliced;
} else {
return chunkArrayInGroups(lefted, size);
}
}
```

面向对象

  1. 在构造函数中创建共有属性通过this.创建，私有属性通过var 创建。
  2. 使用delete collection.tracks，可以删除collection的tracks属性。
  3. 数据属性有4个描述的行为特性，通过Object.defineProperty(obj,propKey,propDesc)设置。
    • writable 表示能否修改属性的值。默认为false
    • Enumerable 表示能否过过for in循环返回属性是否可以枚举。默认为false可以枚举
    • configuralbe 表示是否能过来delete删除属性从来重新定义属性，能否修改其配置。默认为false。
    • value 包含这个属性的数据值。读取属性值的时候，从这个位置读取。
  4. 使用Object.keys(obj)可以得到obj对象的所有自有（非继承）可枚举的属性键，属性通常都是可枚举的，Object.getOwnPropertyNames(obj)返回obj对象的所有属性键。
  5. 枚举的一般规则是，系统创建的属性不可枚举，用户创建的属性可枚举。枚举的主要目的是判断for-in循环中的哪些属性该忽略。对于自己的代码，通常可忽略枚举属性，且应该避免用for-in循环，属性的枚举特性默认为可枚举。
  6. 保护对象的三种方式：
    • 防止扩展：Object.preventExtensions(obj);设置对象不能添加属性。
    • 封闭：Object.seal(obj);可以改变属性的值，但属性的特性不能被改变。
    • 冻结：Object.freeze(obj)使所有的属性不可写，且封闭obj不能扩展。
  7. A instanceof B运算符可以用来判断B构造函数的prototype属性是否存在A对象的原型链上。等价于B.prototype.isPrototypeOf(A);
  8. 设置原型的另一种方法Object.creat(proto,propDescObj?);
  9. 获取原型的另一种方法Object.getPropertypeOf(obj);

实现模块化编程

  • // 计算模块calc_v2015.js
(function(calculator，$) {
  function convert(input) {return parseInt(input);}
  calculator.add = function(a, b) {return convert(a) + convert(b);}
  window.calculator = calculator;
})(window.calculator || {},jquery);

//自执行函数先判断window里面是否含有calculator没有的话传入空对象{}

// 新增需求calc_v2016.js
(function(calculator,$) {
  function convert(input) {return parseInt(input);}
  // calculator 如果存在的话，我就是扩展，不存在我就是新加
  calculator.remain = function(a, b) {return convert(a) % convert(b);}
  window.calculator = calculator;
})(window.calculator || {},jquery);

//为了使代码高内聚低耦合不过度依赖第三方库,在自执行函数外给代码注入第三方的库。
// 开闭原则，对新增开放，对修改关闭；
```

你可能感兴趣的:(javascript笔记)

  • 转码日记——Javascript笔记（8） zzcoding_ 转码日记数据结构javascript前端开发语言
    数组（Array）数组也是一个对象，和普通对象功能类似。普通对象使用字符串作为属性名，而数组使用数字来作为索引操作。索引：从0开始的整数。数组的存储效率比较高，对属性名没有要求的时候可以使用。基本应用//创建数组对象vararr=newArray();//向数组中添加对象//语法：数组[索引]=值;arr[0]=10;arr[1]=33;//如果读取不存在的索引则返回undefined//获取数组
  • 转码日记——Javascript笔记（14）BOM对象 zzcoding_ 转码日记javascript前端html5
    BOM（browserobjectmodel）浏览器对象模型在BOM中，为我们提供了一组对象，用来帮助我们完成对浏览器的操作。BOM对象：Window（代表整个浏览器的窗口，同时也是网页中的全局对象）,Navigator（代表当前浏览器的信息，通过该对象可以识别不同的浏览器）,Location（代表当前浏览器的地址栏信息，可以获得地址栏信息并操纵浏览器跳转页面）,History（代表浏览器的历史记
  • JavaScript笔记/ES6常用语法(笔记) joker731
    ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是
  • Javascript笔记 nuomi_w javascript前端html
    1、什么是JavaScript1.1、概述JavaScript是一门世界上最流行的脚本语言Java、JavaScript=一个合格的后端人员，必须要精通JavaScript=1.2、历史https://www.w3school.com.cn/js/pro_js_history.aspECMAScript它可以理解为是JavaScript的一个标准最新版本已经到es6版本但大部分浏览器还只停留在支持
  • JavaScript笔记整理 无所不能的蓝巨人 前端javascript
    title:JavaScripttags:JavaScriptnotebook:JavaScript笔记整理1.JavaScript基础2022年3月18日大数据类型使用bigIntnull有数据位置但是没有数据，undefined是完全没有数据位置object{}对象，array[]数组if中如果没有写判断语句则括号中的内容会被转换成布尔类型（隐式转换）false：nullnuderfined0
  • web前端javascript笔记——（14）Navigator 、History、Location Komorebi_9999 前端javascript笔记
    Navigator/*DOM文档对象，通过js操作网页BOM浏览器对象BOM可以使我们通过JS来操作浏览器在BOM中为我们提供了一组对象。用来完成对浏览器的操作BOM对象window代表的是整个浏览器的窗口，同时window也是网页中的全局对象Navigator代表的是当前浏览器的信息，通过该对象可以来识别不同的浏览器由于历史原因，Navigator对象中的大部分属性都已经不能帮我们识别浏览器了一
  • web前端javascript笔记——（15）定时器 Komorebi_9999 前端javascript笔记
    定时器简介window.onload=function(){//获取countvarcount=document.getElementById("count");//使得count中的内容，自动切换/*JS的程序的执行速度是非常非常快的如果希望一段程序，可以每隔一段时间执行一次，可以使用定时调用*//*for(vari=0;i1切换图片练习img{width:600;height:450px;}w
  • web前端javascript笔记——（16）类 Komorebi_9999 前端javascript笔记
    类的操作.b1{width:100px;height:100px;background-color:red;}.b2{width:200px;height:200px;background-color:yellow;}window.onload=function(){//获取boxvarbox=document.getElementById("box");//获取btn01varbtn01=doc
  • javascript笔记 Tdithyrambus
    javascript代码必须位于与中脚本可被放置于或中单引号双引号均可双斜杠//或/*...*/之间的代码被视为注释标识符用于命名变量（以及关键词、函数和标签），首字符必须是字母、下划线（-）或美元符号（$）对大小写敏感不能使用连字符，如first-nameJavaScript能够以不同方式“显示”数据：使用window.alert()写入警告框使用document.write()写入HTML输出
  • web前端javascript笔记——（13）事件(2） Komorebi_9999 前端javascript笔记
    一、拖拽#box1{width:300px;height:300px;background-color:yellowgreen;position:absolute;}#box2{width:300px;height:300px;background-color:yellow;position:absolute;left:300px;top:300px;}window.onload=function
  • web前端javascript笔记——（12）样式 Komorebi_9999 前端javascript笔记
    一、通过style操作内联样式#box1{width:200px;height:200px;background-color:red;}/*通过style属性读取和设置的都是内联样式通过JS修改元素的样式语法：元素.style.样式名=样式值*通过JS读取元素的样式*语法：元素.style.样式名*/window.onload=function(){/*点击按钮以后，修改box1的大小*///获取
  • web前端javascript笔记——（13）事件(1) Komorebi_9999 前端javascript笔记
    一、事件对象鼠标/键盘属性altKey返回当事件被触发时，“ALT”是否被按下。button返回当事件被触发时，哪个鼠标按钮被点击clientX返回当事件被触发时，鼠标指针的水平坐标。clientY返回当事件被触发时，鼠标指针的垂直坐标。ctrlkey返回当事件被触发时，“CTRL"键是否被按下。metakey返回当事件被触发时，"meta"键是否被按下。relatedTarget返回与事件的目标
  • JavaScript笔记之一：JS原生 浅度学习的ryan 吃掉这本前端基础javascriptes6
    JavaScript一、基础运行在客户端的脚本语言脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来解释执行也可以基于Node.js技术进行服务器端编程1.作用表单动态验证网页特效服务端开发Node.js桌面程序ElectronApp物联网游戏开发2.浏览器执行JS浏览器分为两部分：渲染引擎、JS引擎渲染引擎：用来解释HTML和CSS，内核JS引擎：JS解释器，读取网页中的JS代码，处
  • web前端javaScript笔记——（11）DOM Komorebi_9999 前端javascript笔记
    一、DOM简介DOM简介/*宿主对象，由浏览器，运行环境为我们提供的对象，BOM对象和DOM对象DOMdocumentobjectmodel文档对象模型JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面文档-文档表示的就是整个的HTML网页文档，一个HTML网页就是一个文档对象-对象表示将网页中的每一个部分，各种标签、属性、文本都转换为了一个对象模型-使用模型
  • web前端javaScript笔记——（8）call()、apply()、arguments() Komorebi_9999 前端javascript笔记
    /*functionfun(){alert("我是fun函数！");}*//*call()和apply()这两个方法都是函数对象的方法，需要通过函数对象来调用当会函数调用call()和apply()都会调用函数执行在调用call()和appply()可以将一个对象指定为第一个参数此时这个对象将会成为函数执行时的this*///fun();//弹出"我是fun函数"//fun.apply();//弹
  • web前端javaScript笔记——（10）正则表达式 Komorebi_9999 前端javascript正则表达式
    正则表达式的简介/*正则表达式*邮箱举例：*[email protected]*[email protected]*adminatguigu.com*邮件的规则：*1.前边可以是xxxxx乱七八糟*2.跟着一个@*3.后边可以是xxxxx乱七八糟*4..com获取其他的乱七八糟**正则表达式用于定义一些字符串的规则*计算机可以根据正则表达式，来检查一个字符串是否符合规则*或者将字符串中复合规则的内容提取出来*
  • web前端javaScript笔记——（9）包装类和字符串 Komorebi_9999 前端javascript笔记
    /*基本数据类型StringNumberBooleanNullUndefined引用数据类型Object在JS中为我们提供了三个包装类u，通过这三个包装类可以将基本数据类型转换为对象String()可以将基本数据类型字符串转换为String对象Number()可以将基本数据类型的数字转换为Number对象Boolean（）可以将基本数据类型的boolean值转换为Boolean对象String()
  • JavaScript笔记之Date之 Date.now()===new Date().getTime() kfepiza HTMLCSSJS#JsJavaScriptECMAScript日期时间时区等javascriptjs
    Date.now和newDate().getTime()相同点都是获取1970年1月1日到现在的毫秒数不同点1.性能不同一千万次测试Date.now()用时0.8秒newDate().getTime()用时1.4秒2.调用方式不同now()是直接调用getTime()是原型链上的方法性能的差异也体现了调用prototype的损耗
  • JavaScript笔记之 console计时器 time() timeLog() timeEnd() kfepiza #JsJavaScriptECMAScriptHTMLCSSJSjsjavascript
    用法先取个名字:letname=“计时器1”;然后console.time(name);计时器起点可选console.timeLog(name);显示当前耗时console.timeEnd(name);显示当前耗时,并结束计时器测试代码timetimeLogtimeEnd.CodeIB,.CodeB{padding:0px10px;border-left:10pxsolidblue;backgro
  • web前端javaScript笔记——（7）Math和Date方法 Komorebi_9999 前端javascript笔记
    Math-Math和其他的对象不同，它不是一个构造函数，它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法比如Math.PI表示的圆周率使用方法Math.方法();Math.abs()可以用来计算一个数的绝对值Math.ceil()可以对一个数进行向上取整abs(x)返回数的绝对值。console.log(Math.abs(-1));acos(x)返回数的反余弦值。asin(x)返
  • javascript笔记5 michaelYH
    时间Date对象方法及运算BOMwindow中常用方法window常用事件-onload加载事件和onunload卸载事件window中常用事件-onscroll滚动事件window中常用事件-onresize窗口变化事件时间//格里尼治时间//世界协调时间（1970年1月1日0点）Date对象方法及运算vard=Date();console.log(d);//TueSep04201818:17:
  • HTML/CSS/JavaScript笔记 neukfc htmlcss
    HTML/CSS/JavaScript个人学习笔记前言简介HTML一些最常见的HTML标签汇总CSS内联样式内部样式表前言学习用途所做的个人笔记，部分资料图片来自：菜鸟教程.，如有侵权或标注遗漏请随时告知：）简介HTML：超文本标记语言，是一种描述性语言。CSS：层叠样式表，是一种用来表现HTML、XML等文件样式的语言，如字体、颜色、位置等等。JavaScript：多用于前端网页开发的脚本编程语
  • JavaScript笔记整理3 -- JS基础概念之 变量与函数 Lynx256 JavaScriptJavaScript
    JavaScript笔记整理3--JS基础概念之变量与函数变量什么是变量声明和定义变量声明变量定义变量变量名的命名规则变量的数据类型typeof方法基本（标量）数据类型字符串型String数值型类型Number布尔型Boolean未定义型undefined空型null复合数据类型对象Object数组Array变量数据类型的转换自动转换强制转换函数1：`Boolean(`变量名`)`函数2：`Num
  • JavaScript笔记之如何写好JavaScript HeyCChen 前端javascript前端
    写好JavaScript的三个原则：各司其责组件封装过程抽象各司其责HTML/CSS/JavaScript各司其责HTML->Structural;CSS->Presentational;JavaScript->Behavioral应当避免不必要的由JS直接操作样式可以用class来表示状态纯展示类交互应寻求零JS方案组件封装组件是指Web页面上抽出来的一个个包含模块（HTML）、样式（CSS）和
  • HTML+CSS+JavaScript 小归空. 前端htmljavascriptcss笔记前端
    HTML+CSS+JavaScript笔记由B站狂神说视频整理HTMLHTML：HyperTextMarkupLanguage（超文本标记语言）HTML5+CSS3W3C：WorldWideWebConsortium（万维网联盟）W3C标准包括：结构化标准语言（HTML、XML配置文件）、表现语言标准（CSS）、行为标准（DOM文档对象模型、ECMAScript）标签基础标签Title一级标签二级
  • web前端javaScript笔记——（6）数组 Komorebi_9999 前端javascript笔记
    对象一般分为内建对象，宿主对象，自定义对象。数组(Array)数组也是一个对象它和我们普通对象功能类似，也是用来存储一些值的不同的是普通对象是使用字符串作为属性名的，而数组时使用数字来作为索引操作元素案引:从0开始的整数就是索引数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据创建数组对象vararr=newArray();console.log(arr);//””console
  • 学习JavaScript笔记——读取当前日期 巨汉子
    这个故事发生在某天，喝完早茶帮女同事打包了个陈村粉就回公司，上网收集有趣的文字，整理修订多年前写好的《JavaScript》教程，并创作汉语SEO要用的《Html5》教程，存起来以后当文化传播作品使用。一边整理《JavaScript》教程,一边在网上和女粉丝侃大山，突然间一个说自已是从武汉来广州渡假的女粉丝问：“陈老师，最近文化传播教程又打算教点什么新东西？”。我问：“你们都想学啥？”。女粉丝说：
  • Javascript笔记（持续更新中） 瑶瑶南波万 笔记javascript开发语言ecmascript
    前端学习路线图先附上一张前端学习路线图：（一）Javascript的定义Javascript是一门跨平台、面向对象的脚本语言，来控制网页的行为，它可以实现网页的交互网页由三部分构成：结构：Html表现：Css行为：Javascript（二）Javascript的作用网页特效（监听用户的一些行为让网页作出对应反馈）表单验证（针对表单数据的合法性进行判断）数据交互（获取后台的数据，渲染到前端）服务端编
  • JavaScript笔记 沉默的大憨君
    Javascript笔记Javascript数据类型有哪些？JavaScript的数据类型分为两大类，一类是基本数据类型另一类是引用数据类型基本数据类型有:NumberStringUndefinedNullSymbol(ES6新增数据类型)引用数据类型有:ArrayFunctionObjectDateRegExp用户自定义的类型备注:所有引用类型的值都是Object类型的实例比如下面的代码：let
  • web前端JavaScript笔记——（2）对象 Komorebi_9999 javascript前端angular.js
    对象对象的简介只要不是Number，StringBooleannullundefined这五种基本类型的数据都是对象。基本数据类型都是单一的值"hello”123true,值和值之间没有任何的联系。在JS中来表示一个人的信息(namegenderage)varname=”孙悟空”;vargender="男";varage=18;如果使用基本数据类型的数据，我们所创建的变量都是独立，不能成为一个整体
  • mysql主从数据同步 林鹤霄 mysql主从数据同步
    配置mysql5.5主从服务器(转) 教程开始：一、安装MySQL 说明：在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作，安装MySQL 5.5.22  二、配置MySQL主服务器（192.168.21.169）mysql  -uroot  -p   &nb
  • oracle学习笔记 caoyong oracle
    1、ORACLE的安装    a>、ORACLE的版本    8i,9i :   i是internet    10g,11g : grid (网格)    12c : cloud (云计算)       b>、10g不支持win7 &
  • 数据库，SQL零基础入门 天子之骄 sql数据库入门基本术语
    数据库，SQL零基础入门        做网站肯定离不开数据库，本人之前没怎么具体接触SQL，这几天起早贪黑得各种入门，恶补脑洞。一些具体的知识点，可以让小白不再迷茫的术语，拿来与大家分享。          数据库，永久数据的一个或多个大型结构化集合，通常与更新和查询数据的软件相关
  • pom.xml 一炮送你回车库 pom.xml
    1、一级元素dependencies是可以被子项目继承的 2、一级元素dependencyManagement是定义该项目群里jar包版本号的，通常和一级元素properties一起使用，既然有继承，也肯定有一级元素modules来定义子元素 3、父项目里的一级元素<modules> <module>lcas-admin-war</module> <
  • sql查地区省市县 3213213333332132 sqlmysql
    -- db_yhm_city SELECT * FROM db_yhm_city WHERE class_parent_id = 1 -- 海南 class_id = 9 港、奥、台 class_id = 33、34、35 SELECT * FROM db_yhm_city WHERE class_parent_id =169 SELECT d1.cla
  • 关于监听器那些让人头疼的事 宝剑锋梅花香 画图板监听器鼠标监听器
           本人初学JAVA，对于界面开发我只能说有点蛋疼，用JAVA来做界面的话确实需要一定的耐心（不使用插件，就算使用插件的话也没好多少）既然Java提供了界面开发，老师又要求做，只能硬着头皮上啦。但是监听器还真是个难懂的地方，我是上了几次课才略微搞懂了些。       
  • JAVA的遍历MAP darkranger map
    Java Map遍历方式的选择 1. 阐述 　　对于Java中Map的遍历方式，很多文章都推荐使用entrySet，认为其比keySet的效率高很多。理由是：entrySet方法一次拿到所有key和value的集合；而keySet拿到的只是key的集合，针对每个key，都要去Map中额外查找一次value，从而降低了总体效率。那么实际情况如何呢？ 　　为了解遍历性能的真实差距，包括在遍历ke
  • POJ 2312 Battle City 优先多列+bfs aijuans 搜索
    来源：http://poj.org/problem?id=2312 题意：题目背景就是小时候玩的坦克大战，求从起点到终点最少需要多少步。已知S和R是不能走得，E是空的，可以走，B是砖，只有打掉后才可以通过。 思路：很容易看出来这是一道广搜的题目，但是因为走E和走B所需要的时间不一样，因此不能用普通的队列存点。因为对于走B来说，要先打掉砖才能通过，所以我们可以理解为走B需要两步，而走E是指需要1
  • Hibernate与Jpa的关系，终于弄懂 avords javaHibernate数据库jpa
    我知道Jpa是一种规范，而Hibernate是它的一种实现。除了Hibernate，还有EclipseLink(曾经的toplink)，OpenJPA等可供选择，所以使用Jpa的一个好处是，可以更换实现而不必改动太多代码。 在play中定义Model时，使用的是jpa的annotations，比如javax.persistence.Entity, Table, Column, OneToMany
  • 酸爽的console.log bee1314 console
    在前端的开发中，console.log那是开发必备啊，简直直观。通过写小函数，组合大功能。更容易测试。但是在打版本时，就要删除console.log，打完版本进入开发状态又要添加，真不够爽。重复劳动太多。所以可以做些简单地封装，方便开发和上线。 /** * log.js hufeng * The safe wrapper for `console.xxx` functions *
  • 哈佛教授：穷人和过于忙碌的人有一个共同思维特质 bijian1013 时间管理励志人生穷人过于忙碌
            一个跨学科团队今年完成了一项对资源稀缺状况下人的思维方式的研究，结论是：穷人和过于忙碌的人有一个共同思维特质，即注意力被稀缺资源过分占据，引起认知和判断力的全面下降。这项研究是心理学、行为经济学和政策研究学者协作的典范。 　　这个研究源于穆来纳森对自己拖延症的憎恨。他7岁从印度移民美国，很快就如鱼得水，哈佛毕业
  • other operate 征客丶 OSosx
    一、Mac Finder 设置排序方式，预览栏 在显示－》查看显示选项中 二、有时预览显示时，卡死在那，有可能是一些临时文件夹被删除了，如：/private/tmp[有待验证] -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出， 我好及时改正，同时也让我们一
  • 【Scala五】分析Spark源代码总结的Scala语法三 bit1129 scala
    1. If语句作为表达式 val properties = if (jobIdToActiveJob.contains(jobId)) { jobIdToActiveJob(stage.jobId).properties } else { // this stage will be assigned to "default" po
  • ZooKeeper 入门 BlueSkator 中间件zk
    ZooKeeper是一个高可用的分布式数据管理与系统协调框架。基于对Paxos算法的实现，使该框架保证了分布式环境中数据的强一致性，也正是基于这样的特性，使得ZooKeeper解决很多分布式问题。网上对ZK的应用场景也有不少介绍，本文将结合作者身边的项目例子，系统地对ZK的应用场景进行一个分门归类的介绍。 值得注意的是，ZK并非天生就是为这些应用场景设计的，都是后来众多开发者根据其框架的特性，利
  • MySQL取得当前时间的函数是什么 格式化日期的函数是什么 BreakingBad mysqlDate
    取得当前时间用 now() 就行。 在数据库中格式化时间 用DATE_FORMA T(date, format) . 根据格式串format 格式化日期或日期和时间值date，返回结果串。 可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值，以便得到所希望的格式。根据format字符串格式化date值: %S, %s 两位数字形式的秒（ 00,01,
  • 读《研磨设计模式》-代码笔记-组合模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
  • 4_JAVA+Oracle面试题(有答案) chenke oracle
    基础测试题 卷面上不能出现任何的涂写文字，所有的答案要求写在答题纸上，考卷不得带走。 选择题 1、 What will happen when you attempt to compile and run the following code? （3） public class Static { static { int x = 5; // 在static内有效 } st
  • 新一代工作流系统设计目标 comsci 工作算法脚本
      用户只需要给工作流系统制定若干个需求，流程系统根据需求，并结合事先输入的组织机构和权限结构，调用若干算法，在流程展示版面上面显示出系统自动生成的流程图，然后由用户根据实际情况对该流程图进行微调，直到满意为止，流程在运行过程中，系统和用户可以根据情况对流程进行实时的调整，包括拓扑结构的调整，权限的调整，内置脚本的调整。。。。。 在这个设计中，最难的地方是系统根据什么来生成流
  • oracle 行链接与行迁移 daizj oracle行迁移
    表里的一行对于一个数据块太大的情况有二种(一行在一个数据块里放不下) 第一种情况: INSERT的时候，INSERT时候行的大小就超一个块的大小。Oracle把这行的数据存储在一连串的数据块里(Oracle Stores the data for the row in a chain of data blocks)，这种情况称为行链接(Row Chain)，一般不可避免(除非使用更大的数据
  • [JShop]开源电子商务系统jshop的系统缓存实现 dinguangx jshop电子商务
    前言 jeeshop中通过SystemManager管理了大量的缓存数据，来提升系统的性能，但这些缓存数据全部都是存放于内存中的，无法满足特定场景的数据更新（如集群环境）。JShop对jeeshop的缓存机制进行了扩展，提供CacheProvider来辅助SystemManager管理这些缓存数据，通过CacheProvider,可以把缓存存放在内存,ehcache,redis，memcache
  • 初三全学年难记忆单词 dcj3sjt126com englishword
    several 儿子；若干 shelf 架子 knowledge 知识；学问 librarian 图书管理员 abroad 到国外，在国外 surf 冲浪 wave 浪；波浪 twice 两次；两倍 describe 描写；叙述 especially 特别；尤其 attract 吸引 prize 奖品；奖赏 competition 比赛；竞争 event 大事；事件 O
  • sphinx实践 dcj3sjt126com sphinx
      安装参考地址:http://briansnelson.com/How_to_install_Sphinx_on_Centos_Server   yum install sphinx 如果失败的话使用下面的方式安装 wget http://sphinxsearch.com/files/sphinx-2.2.9-1.rhel6.x86_64.rpm yum loca
  • JPA之JPQL（三） frank1234 ormjpaJPQL
    1 什么是JPQL JPQL是Java Persistence Query Language的简称，可以看成是JPA中的HQL， JPQL支持各种复杂查询。 2 检索单个对象 @Test public  void querySingleObject1() {     Query query = em.createQuery("sele
  • Remove Duplicates from Sorted Array II hcx2013 remove
    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For example,Given sorted array nums = [1,1,1,2,2,3], Your function should return length
  • Spring4新特性——Groovy Bean定义DSL jinnianshilongnian spring 4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装Mysql5.5 liuxingguome centos
    CentOS下以RPM方式安装MySQL5.5 首先卸载系统自带Mysql： yum remove mysql mysql-server mysql-libs compat-mysql51 rm -rf /var/lib/mysql rm /etc/my.cnf 查看是否还有mysql软件： rpm -qa|grep mysql 去http://dev.mysql.c
  • 第14章 工具函数（下） onestopweb 函数
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • POJ 1050 SaraWon 二维数组子矩阵最大和
    POJ ACM第1050题的详细描述，请参照 http://acm.pku.edu.cn/JudgeOnline/problem?id=1050 题目意思： 给定包含有正负整型的二维数组，找出所有子矩阵的和的最大值。 如二维数组 0 -2 -7 0 9 2 -6 2 -4 1 -4 1 -1 8 0 -2 中和最大的子矩阵是 9 2 -4 1 -1 8 且最大和是15
  • [5]设计模式——单例模式 tsface java单例设计模式虚拟机
    单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点   安全的单例模式：     /* * @(#)Singleton.java 2014-8-1 * * Copyright 2014 XXXX, Inc. All rights reserved. */ package com.fiberhome.singleton;
  • Java8全新打造，英语学习supertool yangshangchuan javasuperword闭包java8函数式编程
    superword是一个Java实现的英文单词分析软件，主要研究英语单词音近形似转化规律、前缀后缀规律、词之间的相似性规律等等。Clean code、Fluent style、Java8 feature: Lambdas, Streams and Functional-style Programming。   升学考试、工作求职、充电提高，都少不了英语的身影，英语对我们来说实在太重要
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他