新普金娱乐网址


地理简简单单了解一下啊是Django或者说Django是开啊的?

地理中华文明的昌盛之路

地理【初家必读】:前端工程师的学识体系

  • 十月 21, 2018
  • 地理
  • 没有评论

2.XHTML

2 DOM编程

DOM操作实际JQuery已经做得好好了,这里大概加一下本来生JS的知
HTML文档中单单出一个根节点

2.1 访问HTML元素

  1. id getElementById(‘id’); or getElementsByName(‘name’);
  2. 基于节点关系

 Node parentNode: 返回父节点
 Node previousSibling: 返回前一个兄弟节点
 Node nextSibling: 饭后后一个兄弟节点
 Node[] childNodes 返回当前节点的所有节点
 Node[] getElementsByTagName('标签名称'): 返回当前节点具有制定标签的子节点
 //注意ol标签的子标签IE8和其他浏览器不一样(其他浏览器会把ol下的li和其后面的空白分别当成2个节点,IE8则不会)

2.2 增加HTML函数

  1. document.createElement(“标签名”);
  2. 复制节点 var node
    =ul.firstChild.nextSibling.cloneNode(boolean),boolean为true时,复制所有所有后代节点.false则仅复制当前节点.clone了节点以后还要寻找一个节点添加进去.

2.3 添加节点

  1. appendChild(Node);添加为目前节点的末梢一个子节点
  2. inserBefore(newNode,refNode);在refNode前添加newNode
  3. replaceChild(newChild,oldChild);替换节点
  4. 增加select选项 new Option(text,value,defaultSelected,selected);

2.4 删除节点

  1. removeChild(oldNode);

2.5 window对象

  1. 返上一个页面: back()
  2. window.href: 当前url
  3. window.width: 屏幕横向分辨率
  4. window.height: 屏幕纵向分辨率
  5. 方方面面历window.screen,包含所以屏幕属性

 for(var propName in window.screen){
     alert(propName+":" +screent[propname]);
 }
  1. cofrim(‘标题’); 能弹出是否肯定之提拔框
  2. prompt(‘标题’); 能弹来一个文书输入框输入.
  3. 定时器:setInterVal,clearInterval()

 var timer;
 var cur = new Date().getTime();
 var setTime = function(){
     document.getElementById("tm").innerHTML = new Date().toLocationString();
     if(new Date().getTime- cur > 60 *1000){
         clearInterval(timer);
     }
 }
 //每1S执行一次,执行了60次就暂停
 timer = window.setInterval("setTime()",1000);

2.6 navigator和地理位置

navigator汉堡浏览器所有信息,遍历循环获取信息

for(var propName in window.navigator){
    alert(propName + ":" + window.navigator[propName]);
}   

HTML5新增geolocation属性
Geolocation提供的不二法门

  1. getCurrentPosition(onSuccess,onError,options)
  2. int
    watchCurrentPostion(OnSuccess,onError,options),周期性调用getCurrentPosition,返回的int代表是”监听器”的ID,用来clearWatch(watchID)取消监听
  3. clearWatch(watchID),用于取消watchCurrentPosition

点的面前少只章程的options参数是一个对象,可含蓄3独变量

  1. enabelHighAccuracy(是否制定高精度地理位置)
  2. tiemout 设置过时长
  3. maximumAge,设置缓存时间
    例子:

var geoHandler = function(position){
    var geoMsg = "用户地址位置是 : <br/>"
    geoMsg += "timestamp属性为 :" + position.timestamp + "<br/>"//获取位置的时间
    var cords =position.coords;
    for(var prop in coords ){
        geoMsg += prop + ": " + coords[prop] +"<br/>"//经纬度,移动速度等
    }
    document.writeln(geoMsg);
}

var errorHandler = function(error){
    var errMsg = {
        1: '用户拒绝了位置服务'
        2: '无法获取地址位置信息'
        3: '获取地理位置信息超时'
    };
    alert(error[error.code]);
}

navigator.geolocation.getCurrentPosition(geoHandler
, errorHandler
, {
    enableHighAccuracy:true,
    maximuAge:1000
});

2.7 HTML5新加浏览器分析

兑现该功能重要通过performance对象
里头的(PerformanceTiming)timing属性包含加载时间相关的特性
此外(PerformanceNavigation)navigation,主要性能有
type :

TYPE_NAVIGATE(数值为0): 超链接/输入url
TYPE_RELOAD(1): 重新加载方式,diaoyonglocation.reload()等
TYPE_BACK_FORWARD(2): 通过浏览器的前进方式
TYPE_RESERVED(255): 未知方式

3 事件处理机制

3.1 常见事件

  1. onabort: 图片加载终端
  2. onblur: 失去焦点
  3. onchange: 表单域更改
  4. onclick: 点击
  5. onerror: 图片加载出错
  6. onfocus: 获得焦点
  7. onkeydown: 按下鼠标
  8. onkeypress: 当焦点以当下元素上,单击键盘某个键触发
  9. onkeyup: 当焦点以脚下元素上,松开某个键触发
  10. onload: 某个对象加载了,适用于img,oframe,body
  11. onunload: 当某个对象从窗口下卸载触发,适用于img,oframe,body
  12. onmousedown: 焦点停留于眼前元素上,按下鼠标点
  13. onmousemore: 当焦点以当下元素上,鼠标移动至该因素
  14. onmouseout: 鼠标移出时元素触发
  15. onmouseover: 鼠标移动到该因素触发
  16. onmouseup: 焦点以手上因素,松开鼠标时接触
  17. onreset: 重置表单时点
  18. onsubmit: 表单提交触发

3.2 事件处理和this

p.info = function(){
    alert(this.name);
}
document.getElementById("bt").onclick = p.info//this指向'bt'控件
document.getElementById("bt").onclick = new function (){ p.info();} //this总是指向p

留意表单设置id为x和name为y时候,相当给表单创建了x属性和y属性,所以id和name不能够是第一字submit等

3.3 DOM

创监听事件

objectTarget.addEventListener(“eventType”,handler,capture),第一只参数表示绑定的波,如click、keypress之类的,第二个制定绑定的函数,第3个号boolean,true表示监听捕获阶段,false表示监听冒泡阶段
objectTarget.removeEventListener(“eventType”,handler,captureFlag):
删除绑定事件

破获状态等的绑定事件先实施,事件冒泡状态等的绑定事件后执行.
捕获状态等于外往内接触,事件冒泡状态等从外为外触发.
绑定例子

var got_click = function (event){
    for ( event_one in event){
        alert(event_one + "  : " + event[event_one]);
    }
}   

document.getElementByID("test").addEventListener("cilck",got_click,true);

阻止事件传播

event.stopPropagation();

撤消事件之默认行为,如超过反页面等,但不见面阻止事件传播.

event.preventDefault();

3.3.1转化事件
DOM提供了dispathEvent方法用于事件转发,该方式属于Node
target.dispathEvent(Event event),将event转发到target上
DOM的dispath()必须换车人工合成的Event事件
document.createEvent(String
type),tpy参数用于指定事件类,eg:普通事件Events,UI事件UIEvents,鼠标事件:MouseEvents
初始化事件

initEvent(具体参数...)

initUIEvent(具体参数...)

intMouseEvent(具体参数...)

//例子

<input id="bt1">
<input id="bt2">
...

var rd =function(evt){
    alert("事件冒泡阶段: " + evt.currentTarget.value +"被点击了");
    var e =document.createEvent("Evnets");
    e.initEvent("click",true,false);//true表示是否支持冒泡,false表示是否有默认行为
    document.getElementById("bn2").dispathEvent(e);
}
var go_click = function (evt){
    alert("事件冒泡阶段: " + evt.currentTarget.value);
}

document.getElementById("bn1").addEventListener("click",rd,false);

document.getElementById("bn2").addEventListener("click",go_click,false);;

//点解按钮一结果
alert(事件冒泡阶段: 按钮一被点击了);
alert(事件冒泡阶段:按钮2);

点击按钮1,按钮执行了前按钮一被点击了提拔语句后,将点击事件转给了遵循钮2,按钮2推行自身的点击事件.

潜出:把握总体前端项目,做尽前端项目的架构师。

6 客户端通信

WebSocket: 服务器主动推送信息/客户端实时推送数据及服务器

6.1 跨文档通信

window对象新增方法

  1. targetWindow.postMessage(message,targetOrigin):
    该办法用户为targetWindow中状态的HTML发送信息,targetOrigin表示接到html的域名.
  2. onmessage: 调用艺术:windows.onmessage =function(event){…}
    event中的性:

  3. data: 数据

  4. orgin: 发送信息window的源域名
  5. lastEventID: 返回发送消失时间之ID
  6. source: 返回发送信息的窗口

html想发送要做

  1. 获取接收信息的window对象
  2. 调用接收信息的window对象的postMessage(any message)方法

html想吸收要做

  1. 本html绑定事件window.message = function(event){…};
    跨文档消息传递

//source.html
var targetWin = window.open("接收方url",'_blank','windth=400,height=300');

targetWin.onload =function(){
    targetWin.postMessage("传输消息","接收方域名");
}

window.onmessage =function(event){
    //忽略其他域名发送的消息
    if(event.orgin !="指定域名"){
        return ;
    }
    alert(event.data);
}

//接收页面.html
window.onmessage = function(event){
    //忽略其他域名发送的消息
    if(event.orgin !="指定域名"){
        return ;
    }
    alert("接收到消息拉!"+event.data);
    event.source.postMessage("回传消息",event.origin);
}

结果:
alert(接收至消息拉!传输信息);
alert(回传消息);
注意!一定要是判断发送方的域名!!!!!一定要判发送方的域名!!!!!一定要是认清发送方的域名!!!!!

MustCache 
JsRender

5 使用worker创建多线程

worker中无法用DOM、alert等及界面有关的操作.
运用理由:防止js阻塞主线程的js运行
WorkerAPI

  • onmessage: 获取前台js提交过来的多少
  • postMessage(data):
    前台js通过postMessage触发Worker对象的onmessage事件.
  • importScripts(urls),导入多独js,importScripts(“a.js”,“b.js”);
  • sessionStorge/localStorage: 使用Worker操作Storage本地存储
  • Worker: 创建新的Worker对象启动嵌套线程
  • XMLHttpRequest: Worker使用XMLHttpRequest发送异步请求.
  • navigator: 与window的location属性类似
  • location: 与window的location属性相似
  • self:
    WorkerGlobalScope对象,代表时Worker线程自身作用域.调用self的close()结束线程
  • setTimeout()/seInterval()/eval()/inNaN()/parseInt,等以及界面无关的js核心函数,包括Array/Data/Math/Number/Object/String等.
  • 形容一段子寻找来输入start和end之间素数的线程.
    worker.js代码

onmessage =function(event){
    var data =JSON.parse(event.data);
    var start =data.start;
    var end =data.end;
    var result ="";
    search:
    for (var n =start; n <= end :n++){
        if(n%i==0){
            continue search;
        }
        result +=(n+",");
    }
}
postMessage(result);

网页代码

<input name="start" ...>
<input name="end" ...>
<input type=button inclick="cal();" ...>
...
var car =function(){
    var start = parseInt(document.getElementById("start").value);
    var end = parseInt(document.getElementById("end").value);
    //创建线程
    var cal = new Worker("worker.js");
    var data ={
        "start" : srart,
        "end" : end
    };
    //发送数据
    cal.postMessage(JSON.stringify(data));
    cal.onmessage = function (evnet){
        alert(event);
    }
}

彼此的鲜漫漫Worker不可知互相通信,但Wroker可嵌套.

  • 标签表示一个素

  • 遵性质划分: Block-Level和Inline-Level

  • 随语义划分:

0 总结

本书的JS

  1. 第一段来云语法有挺多常见的坑点和原理讲很是
  2. 仲章DOM编程讲述了挺多API
  3. 老三节事件处理机制其实对事件备受之this关键字和事件传播顺序讲4.
    解还不错
  4. 季章WebStorage本地存储例子鲜明
  5. 第五章Worker应付复杂的js操作
  6. 第六段客户端通信WebSocket挺有因此,可以实现用户和用户在浏览器被相互
  • 数据类型

  • 变量

  • 表达式与运算符

  • 支配语句

  • 函数

  • 异常

  • OO

  • 事件

  • BOM

  • 闭包

1. JavaScript语法

1.1 执行js代码

javascript:alert(‘执行js’);//一般位于超链接中,用户点击即行,
<script>alert(“执行js”)</script>

1.2 变量赋值

var a = 1;//显式
a =1; //隐式

1.3 全局变量与有变量

...
var scope = "全局变量";
function test(){
    alert(scope); // undefiend
    var scope = "局部变量";
    alert(scope); // 局部变量
}

为全局变量被有变量覆盖了.虽然片段变量的scope还没赋值,但是已经于方里”占”上岗位了.
而是若拿一部分变量的var删了,就会优先输出全局变量后输出局部变量,因为没有var在方式里叫一些变量”占”位置;

1.4 浮点数

var a =.333
var b = a * 5;
alert(b);

得生之结果是 1.66499999999999999
因此在js中判断浮点数是否相等
建议判断双方的差值是否低于一个敷的频繁(例如0.0000000000001)

1.5 字符串

js中从不字符类型变量 “”与’‘一致

var s ="abcdefg"

//b = "def"
b = s.slice(3, -1);

1.6 字符串的正则表达式方法中

  1. match()返回匹配的字符串(数组或null),可加/g进行全局匹配多个
  2. search()返回匹配的索引值 单个

1.7 undefined和null

null == undefined //true

null === undefined //false

undefined 是未曾设值
null则是设定了邪null值

1.8 运算符

//逗号运算符 取最右返回值
a = (b =5 , c = 7 , d =56) //a =56

a = void(b =5 , c = 7 , d =56) //a = undefined

1.9 typeof和instanceof
typeof 用来博取 实例类型 :

typeof("123"); //string

instanceof 判断变量是否为某类的实例

var a = [4,5];
alert(a instanceof Array); //true

1.10 语句
撇来深

throw new Error("用户自定义异常"); //一般用于终止程序和返回错误提示是个不错的选择;

try{

}catch(e){
    alert(e.message); // "用户自定义异常"
}

for in

//这回输出浏览器的所有属性,做浏览器兼容之前可以考虑看看.
for( prop_name in navigator){
    document.wrti(prop_name + " : " + navigator[propname]);
}   

跳出命名for

outer: 
for(...){
    for(...){
        ...
        continue outer;
    }
}

1.11 函数

js 允许先调用函数 再定义函数

1.11.1 定义匿名函数

var show_name = function(name){
    alert(name);
}

show_name("K"); //K

如此这般的便宜是呀,如果直白定义function 它其实为是创建了一个目标

1.11.2 函数既对象

var hello = function(){...};

hello instanceof Function //true;

hello instanceof Object //true;

alert(heelo) //输出函数源代码

1.11.3 调用函数方式的两样

  1. 直白调用函数 返回return的价或void
  2. new 函数 得到的且是目标 – -…….

1.11.4 this关键字.

  1. 每当函数中采取this.变量
    该变量就是函数的实例变量,而非有变量,无论她当哪里.
  2. 函数可依附于类似中.如没指定 则依附在winodw对象中

var hello =function(){...}

window.hello();

var p = {
    wark: function(){...}
}
p.wark();

1.11.5 函数中之变量有三栽

function Person(){
    //局部变量 只能在函数里访问
    var id ;

    //实例属性 通过对象.访问
    this.age ;

    //类属性 通过Patient.name访问 与static类似
    Person.name ;
}

1.11.6 js是均等种植动态语言,能时刻被目标多属性与道

function Student(){ };

var student =new Student();
//动态增加name属性
student.name = 'K';
alert(sutdent.name) //K

Student.age =22 ;
alert(Student.age); //22 类属性也是可以动态添加的

1.11.7 调用函数的老三种植艺术

  1. 直调用

 windows.alert();
 //or
 alert();
  1. call()调用
    企图:动态地传一个函数引用

 var each = function(array,fn){
     for(var index in arrary){
         //null表示以window为调用者fn函数
         fn.call(null,index,arrary[index]);
     }
 }

 each([4,20,3] , function(index ,ele){
     alert("第 " + index "个元素是 : " + ele);
 });

call()调用函数语法为:函数引用.call(调用者,参数1,参数2...)
一直调用函数语法为:调用者.函数(参数1,参数2 ...) = 函数.call(调用者,参数1,参数2 ...)

  1. apply()调用
    apply和()call()基本相似,区别如下:

  2. 经过call()调用函数时,括号必须详细列有每个参数

  3. 透过apply()动态地调用函数时,可以以括号中以arguments来代表所有参数

var myfun = function (a , b){
     alert(a + "  " +b);
 }

 myfun.call(window ,12 ,23); //12 23;

 myfun.apply(window ,[20 , 39]); //20 39

 var example = function (num1 ,num2){
     //直接调用arguments代表调用者(example,this代表example)时的传入的所有参数
     myfun.apply(this,arguments); 
 }
 example(20,40) //20 40 

1.11.8 函数的独立性
当函数A中得定义函数B,但是函数B还是独于函数A

function Person(name){
    this.name = name;

    this.info = function(){
        alert(this.name);
    }
}   

var person =new Person('K');
person.info(); //K
var name = 'K_window';

//由于window为调用者 ,this.name访问的是window.name
p.info.call(window); //K_window

来爽一发猫学狗叫?.

function Dog(name,bark){
    this.name = name;
    this.bark = bark;
    this.info =function(){
        alert(this.name + "  " + this.bark);
    }
}

function Cat(name){
    this.name =name;
}   

var dog = new Dog("K","汪汪!");
var cat = new Cat("K_2");
dog.info.call(cat); //K_2 undefined

1.11.9 参数传递方式

跟JAVA一样 都是价值传递拉~.
骨干项目

function change(arg){
    arg =10 ;
    alert(arg);
}
var x = 5;
alert(x); //5
change(x); //10
alert(x); //5

复合类型

function change(person){
    person.age = 10;
    alert(person.age);
    person = null;
}

var person = {age : 5};
alert(person.age); //5
change(person); //10
alert(person.age); // 10
alert(person); // []object Object]

复合类型的传递为价值传递,原person和参数person指向同一javascript对象,所以当改变age的时节,是在转移javascript对象的age,但是参数person赋值为null,原person并无改变.

1.11.10 空参数

function text(person){
    alert( typeof parson);
}

text(); //undefined

因此对弱类型,方法重载是管图的,因为js会把空参数作为undefined传递进入;
与名函数,后面出现的相会挂前的,无论参数个数是多少.

1.11.11 目标同涉嫌数组

javascript和Map有点类似,当key为目标,value为函数,该该函数就是目标的章程,当key为目标,value为骨干项目,则该中心型为对象的属于性.(以上也利理解,切勿细琢)所以看属性时,可以obj.propName也可obj[propName].
但是偶尔我们只好用obj[propName],因为.propName不可知管propName当做变量处理,而是将他正是’propName’字符串

function Person(name){
    this.name =name;
    this.info = function(){
        alert(K);
    }
}

var person = new Person("K");
//遍历person属性
for (propName in person){
    alert(p[propName]);//alet K info源代码 假如此处用p.propName则undefined,因为Person无'propName'变量.
}

1.11.12 继承和prototype

于一个近似(函数)中定义一个函数会招

  1. 性能低下:每次new一个类 都见面变卦一个函数
  2. 函数中一旦引用类的一些变量会发闭包 导致有些变量一直有

 function Person(){
     var local = "局部变量"
     this.info = function(){
         //产生闭包
         alert(local);
     }
 }

 var person = new Person();
 person.ifno(); // 局部变量 

化解方案:prototype
加了prototype属性的切近可说是继续了原来的近乎(伪继承)

function Person(){...}

var person = new Person();

//person.wark(); 程序报错wark不存在
Person.prototype.wark = function(){...}

person.wark(); //ok

当prototype之前实例化的类会具有wark方法为?
有的,因为prototype这样并无会见有一个初的切近,而是直接动态的为Person里加函数.

看清有艺术是否持续了拖欠目标

该对象.prototype['某方法'] != undefined;

var test = new 该对象();
test.某方法 !=undefined ;

1.12 创建对象三种艺术

//(单身汪别说自莫使你)

  1. new关键字调用构造器创建对象

 function Person(name){...}
 var person_1 = new Person();
 var person_2 = new Person('K'); //js不存在方法重载,空参数undefined顶替
  1. 采取Object直接创建对象

 var my_obj = new Object();
 my_ojb.name = 'K';
 my_obj.handsome = function(){...}

 function text(){...}
 my_obj.text = text;//不要添加(),不然会认为是调用方法
  1. JSON创建对象

 ver person = {
     name : 'K',
     school : ['ChangAn','TianJin'],
     girl_friends :[
         {
             name : 'Haski',
             age : 11
         },
         {
             name : 'Samoyed',
             age : '8'
         }
     ]
 }

 alert(person.girl_friends[0].name); //Haski

深切:掌握前端核心技术,可以独自工作。

4 本地存储和离线应用

4.1 Web Storage
采用理由之一Cookie的局限性:

  1. Cookie大小为限为4KB

  2. Cookie会包含在历次HTTP请求被

  3. Cookie网络传输不加密(除非整套应用都下SSL)
    Web Storage分两种
    Session Storage:
    生命周期与用户Session一致(用户Session是赖:用户从走访网址到距网址/关闭浏览器)
    Local Storage: 保存在用户之磁盘中,失效的方为用户/程序显示删除.
    Web Storage的法来

  4. length: 返回key-value对数

  5. key(index): 返回第index个key

  6. getItem(key): 获取key对应的value

  7. set(key,value): 设置key-value

  8. removeItem(key): 删除key-value

  9. clear(): 清除所有key-value

Web Storage包含在window对象中
当value为对象时,建议用JSON存储

4.2 构建离线应用

  1. 当html标签中修改

 //表明该页使用index.manifest文件
 <html manifest="index.manifest">
  1. index.mainfest文件

 CACHE MANIFEST
 //第一行必须为上述字符
 //指定版本号
 #version 1
 //本地缓存资源
 CACHE
 inedx.html
 logo.jpg
 //不缓存的资源
 NETWORK
 *
 //前者表示在线状态使用的资源,后者代表离线状态使用的资源
 FALLBACK
 test.js offline.js
  1. Tomcat也例,天津投文件

<!--conf的web.xml根元素中增加MIME映射-->
 <mine-mapping>
     <extension>manifest</extension>
     <mine-type>text/cache-mainfest</mime-type>
 </mime-mapping>

开行以后,页面可刷新(即使离线状态),并动用离线时候的资源

4.2.1 判断在线状态

navigator.onLine属性: true表示在线
online/offline事件:
当在线/离线状态切换时,body上的online/offine事件会为硌,沿着document.body、document和window冒泡

window.addEventListener("offline",function(){
    alert("离线状态")
},true);
if(navigator.onLine){
    alert("在线");
}

4.2.2 applicationCache对象

js可透过applicationCache控制离线缓存.
status属性:

  • UNCACHE: 主机没被离线功能.
  • IDLE: 空闲状态.
  • CHECKING: 正在检查本地manifest和服务器中manifest的区别
  • DOWNLOADING: 正在下载需要之缓存数据
  • OBSOLETE: 缓存已经过

常用方法

  • void update(): 强制检查服务器的mainfest文件是否出创新
  • void swapCache():
    更新缓存,只能当applicationCache的updateReady事件给触发时调用.

 setInterval(function(){
     applicationCache.update()
 },2000);

 applicationCache.onupdateready = function(){
     if(confirm("已从远程服务器下载了需要的缓存,是否更新?")){
         applicationCache.swapCache();
         location.reload();
     }
 }

4.2.3 离线应用的事件和监听

走访html页面过程

  • 浏览器请求index.html
  • 服务器返回index.html
  • 浏览器页面是否制订manifest属性,若制定,触发checking事件,检查服务器遭受之manifest文件是否在,不在则触发error事件,不会见制定第六部及其后续手续
  • 浏览器解析index.html,请求该页其他资源.
  • 服务器返回所以告
  • 浏览器处理mainfest文件,重新请manifest文件中之之所以页面,包括index.html页面,前面下充斥了之资源,扔会再下同样遍.
  • 服务器返回所以要求被求缓存的资源
  • 浏览器开始下载需要以该地缓存的资源,开始下载时触发ondownloading事件,在下载过程被穿梭触发onprogress事件.以便开发人员了解下充斥上度.
  • 下载好后触发oncache事件.缓存完成

当用户更拜访index.html时,前面1~5完全相同,接下去检测mainfest文件是否有改变.

  • 没转触发onnoupdate事件,结束.
  • mainfest改变,执行第7,8管,当用文件本地缓存下充斥了毕后,浏览器-
    触发onupdateready事件,而不见面触发oncached事件.
  • 前端模板:主要是为着缓解复杂的数拼接问题,可以拿模板语言转换化为HTML结构,可以大大简化工作量,同时代码的可维护性得到特别可怜的加强。目前较主流前端模板来:

6.2 WebSocket与服务器通信

原先方案:

  1. 周期发送请求
  2. 页面使用藏窗口和劳动器长连接

WebSocket方法

  1. send(“数据”);向服务器发送数据.
  2. close();关闭该WebSocket.

WebSocket监听事件

  1. onopen: 当WebSocket建立网络连接触发该.
  2. onerror: 网络连接错误
  3. onclose: WebScokt被关触发
  4. onmessage: WebSocket接收到服务器数据经常

WebSocket属性

  1. readyState
    1.1 CONNECTING(0): WebSocket正在尝试连接
    1.2 OPEN(1): 已经连续
    1.3 CLOSING(2): 正在关闭连接
    1.4 CLOSED(3): 已经倒闭连接

WebSocket及服务器通信步骤

  1. WebSocket.Constructor(url,[DOMString protocols]);创建WebSocket对象
  2. 发送信息: WebSocket对象的send()
  3. 收信息: WebSocket对象的onmessage属性绑定函数;
    兑现客户端多总人口聊天,JAVA也条例

客户端代码:

var web_socket =new WebSocket("ws://域名:端口");

web_socket.onopen =function(){
    web_socket.onmessage =function(event){
        document.getElementById('show').innerHTML += event.data +"</br>"
    }
};

var sendMsg =function(val){
    var inputElement = document.getElementByID('msg');
    webSocket.send(inputElement.value);
    inputElement.value="";
}

...

服务端代码

<article class="post" >


import java.io.*;
import java.net.*;
import java.nio.charset.Charset;
import java.security.MessageDigest;
import java.util.regex.*;
import java.util.*;
import sun.misc.BASE64Encoder;

public class ChatServer
{
    // 记录所有的客户端Soccket
    public static List<Socket> clientSockets
        = new ArrayList<Socket>();
public ChatServer()throws IOException
{
    // 创建ServerSocket,准备接受客户端连接
    ServerSocket ss = new ServerSocket(30000);
    while(true)
    {
        // 接收到客户端连接
        Socket socket = ss.accept();
        // 将客户端Socket添加到clientSockets集合中
        clientSockets.add(socket);
        // 启动线程
        new ServerThread(socket).start();
    }
}
public static void main(String[] args)
    throws Exception{
    new ChatServer();
}
}
class ServerThread extends Thread
{
    private Socket socket;
    public ServerThread(Socket socket)
    {
        this.socket = socket;
    }
    public void run()
    {
    try
    {
        // 得到Socket对应的输入流
        InputStream in = socket.getInputStream();
        // 得到Socket对应的输出流
        OutputStream out = socket.getOutputStream();
        byte[] buff = new byte[1024];
        String req = "";
        // 读取数据,此时建立与WebSocket的"握手"。
        int count = in.read(buff);
        // 如果读取的数据长度大于0
        if(count > 0)
        {
            // 将读取的数据转化为字符串
            req = new String(buff , 0 , count);
            System.out.println("握手请求:" + req);
            // 获取WebSocket的key
            String secKey = getSecWebSocketKey(req);
            System.out.println("secKey = " + secKey);
            String response = "HTTP/1.1 101 Switching Protocols\r\nUpgrade: "
                + "websocket\r\nConnection: Upgrade\r\nSec-WebSocket-Accept: "
                    + getSecWebSocketAccept(secKey) + "\r\n\r\n";
            System.out.println("secAccept = " + getSecWebSocketAccept(secKey));
            out.write(response.getBytes());
        }
        int hasRead = 0;
        // 不断读取WebSocket发送过来的数据
        while((hasRead = in.read(buff)) > 0){
            System.out.println("接收的字节数:" + hasRead);
            /*
                因为WebSocket发送过来的数据遵循了一定的协议格式,
                其中第3个〜第6个字节是数据掩码。
                从第7个字节开始才是真正的有效数据。
                因此程序使用第3个〜第6个字节对后面的数据进行了处理
            */
            for (int i = 0 ; i < hasRead - 6 ; i++ ){
                buff[i + 6] = (byte) (buff[i % 4 + 2] ^ buff[i + 6]);
            }
            // 获得从浏览器发送过来的数据
            String pushMsg = new String(buff
                , 6 , hasRead - 6 , "UTF-8");
            // 遍历Socket集合,依次向每个Socket发送数据
            for (Iterator<Socket> it = ChatServer.clientSockets.iterator()
                ; it.hasNext() ;)
            {
                try
                {
                    Socket s = it.next();
                    // 发送数据时,第一个字节必须与读到的第一个字节相同
                    byte[] pushHead = new byte[2];
                    pushHead[0] = buff[0];
                    // 发送数据时,第二个字节记录发送数据的长度
                    pushHead[1] = (byte) pushMsg.getBytes("UTF-8").length;
                    // 发送前两个字节
                    s.getOutputStream().write(pushHead);
                    // 发送有效数据
                    s.getOutputStream().write(pushMsg.getBytes("UTF-8"));
                }
                catch (SocketException ex)
                {
                    // 如果捕捉到异常,表明该Socket已经关闭
                    // 将该Socket从Socket集合中删除
                    it.remove();
                }
            }
        }
    }
    catch (Exception e)
    {
        e.printStackTrace();
    }
    finally
    {
        try
        {
            // 关闭Socket
            socket.close();
        }
        catch (IOException ex)
        {
            ex.printStackTrace();
        }
    }
}
// 获取WebSocket请求的SecKey
private String getSecWebSocketKey(String req)
{
    //构建正则表达式,获取Sec-WebSocket-Key: 后面的内容
    Pattern p = Pattern.compile("^(Sec-WebSocket-Key:).+",
            Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
    Matcher m = p.matcher(req);
    if (m.find())
    {
        // 提取Sec-WebSocket-Key
        String foundstring = m.group();
        return foundstring.split(":")[1].trim();
    }
    else
    {
        return null;
    }
}
// 根据WebSocket请求的SecKey计算SecAccept
private String getSecWebSocketAccept(String key)
    throws Exception
{
    String guid = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";
    key += guid;
    MessageDigest md = MessageDigest.getInstance("SHA-1");
    md.update(key.getBytes("ISO-8859-1") , 0 , key.length());
    byte[] sha1Hash = md.digest();
    BASE64Encoder encoder = new BASE64Encoder();
    return encoder.encode(sha1Hash);
}
}

[javascript](http://mzkmzk.github.io/blog/categories/javascript/)

</article>

<a class="addthis_button_facebook_like" fb:like:layout="button_count" ></a><a class="addthis_button_tweet" ></a>

【我来一个前端学习交流QQ群:328058344
如果你当上前端的历程遭到相见什么问题,欢迎来自己的QQ群提问,群里每天还会见更新一些读书资源。禁止闲聊,非喜不进。】

地理 1

下图是前者工程师图解:

  • CSS Sprite:CSS
    Sprite主要用于前端性能优化的相同种技术,原理是经过以多摆背景图片合成在相同摆图及用减少HTTP请求,加快载入速度。

  • 浏览器兼容性:绝大部分情况下我们要考虑浏览器的兼容性,目前正利用的浏览器版本非常多,IE6,
    IE7, IE8, IE9, IE10, Chrome, Firefox, Safari。

  • IE HasLayout和Block Format Content:IE HasLayout是一个 Internet
    Explorer for
    Windows的私家概念,它控制了一个因素如何展示与约其蕴含的情、如何跟任何因素交互与建立联系、如何响应与传递应用程序事件、用户事件相当。这种渲染特性可透过某些
    CSS 属性被不可逆转地接触。而聊 HTML
    元素则默认就具备”layout”。目前只有IE6和IE7有夫概率。BFC是 W3C CSS
    2.1
    规范着之一个概念,它控制了元素如何对其情节开展定点,以及跟其它因素的涉嫌以及相互作用。这个其实和浏览器的兼容性有关,因为绝大部分之兼容性问题都是其引起的。(web前端上交流群:328058344
    禁止闲聊,非喜不进!)

  • CSS
    Frameworks:CSS框架是平等层层CSS文件之集合体,包含了核心的因素重置,页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的劳作,提高工作效率。目前普遍框架来:


  • HMTL & XHTML
  • CSS基础知识
  • JavaScript基础知识
  • DOM
  • JSON
  • AJAX
  • JavaScript Frameworks

虽说CSS3还不曾正经化业内,但是连IE9+, chrome,
Firefox等现代浏览器还支持CSS3。CSS提供了众多先用为此JavaScript和切图才能够搞定的效果,目前首要意义来:

HTML

  • 运动技术流路线,即深入钻研前端相关的各类技能,比如浏览器原理,JavaScript本身的研究,W3C各种专业相当。前端技术提高高效,各种新技巧层出不穷,这漫漫路移动下是大麻烦的。

  • 往交互设计方向动,前端工程师完成一定程度后相互设计力量为会落充分充分之加强,对总体信息架构的握住能力吗会再度强。可以非常好的弥补视觉设计师在交换设计上之欠缺。这长达路实在跟率先漫漫凡免冲突之,甚至可领略呢同条路。

  • 通向后运动,即夺学学后台开发的艺,比如JAVA/PHP等,其实绝大部分风俗习惯的后台开发人员就是以此状态,即前后台都开。个人觉得这样的话其实都倒回老路了,毕竟前端就是由本的后台开发那里独立出来的。

  • 通往管理方向,比如项目经理,或者干脆转行,比如公务员等。

  • HTML5:同CSS3类似,即虽然从未成为规范,但是主流的浏览器都支持了。HTML5免是HMTL,虽然为提供了一部分初标签,但是它们的主要用途还是JavaScript。HTML5重要提供以下职能:

优质之前端工程师需要所有得天独厚的关系能力,因为您的干活暨众总人口之工作息息相关。在旁情况下,前端工程师至少都使满足下列四近似客户的要求。 
(web前端上交流群:328058344 禁止闲聊,非喜不进!)

  • 可用性指的凡:产品是否爱上手,用户能否成功任务,效率如何,以及马上过程遭到用户之主观感受可好,是打用户的角度来拘禁产品之身分。可用性好代表产品质量高,是企业之中心竞争力。
  • 而是访问性:上网用户蒙受那些视力受损的人头,通过屏幕阅读器使用键盘命令将网页的始末念给他们放。以语义化的HTML(结构和呈现相互分离之HTML)编写的网页文件,就可以叫此类用户更便于导航,且网页文件中之要害消息吗重发出或吃这些用户找到。

安增强前端技术

前端的前程

自从某种意义上说,优秀之前端工程师就如是同样员大使,需要天天获得在外交官的心情来应针对各个一样龙的劳作。

2.进阶

圆角 
多背景 
@font-face 
动画以及日益变 
渐变色 
Box阴影 
RGBa-加入透明色 
文阴影

  • 模块化开发:特点是“模块化开发,按需加载“。这之中CommonJS组织定义了AMD的正式用来规范浏览器端的模块定义。RequireJS和SeaJS是实现了AMD的星星点点独美之框架。详见:http://www.weakweb.com/articles/341.html

  • JavaScript单元测试:QUnit

  • JavaScript设计模式

  • NodeJS:把JavaScript移植到劳动器端了,这样前端和后端就得使相同的技艺,方便统一出。而且NodeJS是非阻塞调用的,在一定领域性能是不行强大的。而且这是前端开发人员出动后台开发的好会,进而前后端统一出,但与此同时未用失去学习其他后台开发语言。

  • ES5:ECMAScript
    5,也即是行的JavaScript规范,对之前的JavaScript作了众改良,增加了累累初的特征,比如JSONECMAScript
    5,也就是是流行的JavaScript规范,对前的JavaScript作了很多改良,增加了诸多初的风味,比如JSON。

CSS3:

Headings: h1, h2, h3, h4, h5, h6Paragraphs: pText Formatting: em,
strong, sub, del, ins, smallLists: ul, li, ol, dl, dt, ddTables:
table, thead, tbody, tr, th, tdForms and Input: form, input, select,
textareaOthers: div, span, a, img, HTML5: header, footer, article,
section

  • 属于性名和标签号必须小写

  • 属于性值必须加引号

  • 性能不克简写

  • 因而 Id 属性代替 name 属性

  • XHTML 元素必须让科学地嵌套

  • XHTML 元素必须为关门

当地音频视频播放 
Canvas/SVG 
地理信息 
硬件加速 
地方运行 
地面存储 
从桌面拖放文件及浏览器上传 
语义化标签,Form表单

2.进阶

  • XSS,跨站脚论攻击(Cross Site
    Script)。它凭借的凡黑心攻击者往Web页面里插恶意html代码,当用户浏览该页之常,嵌入的恶意html代码会吃实践,从而达成恶意用户之出格目的。
  • CSRF(Cross Site Request Forgery),跨站点伪造请求。顾名思义就是
    通过伪造连接要在用户不知情的景象下,让用户因温馨的地位来完成攻击者需要达成的组成部分目的。
  • cookie劫持,通过获取页面的权限,在页面中描绘一个简的顶黑心站点的恳求,并带用户之cookie
    获取cookie后透过cookie 就好直以被盗用户的地位登录站点。

出征:一代宗师。

抑或一个较出名和独特之框架是Twitter的Bootstrap。Bootstrap是飞速开Web应用程序的前端工具包。它是一个CSS和HTML的集纳,它用了行的浏览器技术,给你的Web开发提供了时尚之版式,表单,buttons,表格,网格系统等等。它是依据Less开发之。不支持IE6,在IE7和IE8里效果也未咋地。

1.签的分类

CSS

  • 前端MVC:Web应用的效果越来越大,Javascript代码也越多,大量的JS代码要坐何种架构来集团便变成了一个归心似箭的题材,于是便有人将传统的MVC架构移植到前端来解决这些题材。目前主流前端MVC框架主要有以下这些: 
    (web前端上交流群:328058344 禁止闲聊,非喜不进!)

1.基础

  • 跨域处理:同源策略规定跨域之间的下论是割裂的,一个域之台本不克看同操作另外一个域底多方特性和方法。所谓的跨域处理便是地处不用域之间的步子互相调用,目前时有发生许多术来拍卖它。

  • 调节工具:前端的调试工具很多,比如Firebug,Webkit核心的web
    inspector, IE的iedeveloper。HTTP相关的fiddler,
    httpwatch等,还有格式化代码的jsbeatutifier,它促进阅读压缩处理了之JavaScript代码。IETester可以套所有的IE版本,是调剂IE兼容性的好工具。

  • SEO:搜索引擎优化

  • A/B
    test:确定两独因素或本(A和B)哪个版本更好,你待以实验两单版。最后,选择最好之本子采用。

  • 可用性/可访问性:

  • DOM:DOM即文档对象模型,HTML DOM
    定义了顾同操作HTML文档的正经方法。几乎有的现代浏览器都能很好的支持DOM了。

  • JSON:(JavaScript Object Notation)
    是均等种轻量级的数据交换格式,易于人阅读与编制,同时也易机器解析和浮动。是当前实际上数据交换的正规格式,几乎有语言都支持JSON,比XML强太多矣。

  • AJAX:即“Asynchronous JavaScript and XML”(异步JavaScript和-
    XML),AJAX并非缩写词,而是由Jesse James
    Gaiiett创造的名词,由Google发扬光大。用于创造更好重快和交互性更胜之
    Web 应用程序的技艺。

  • JavaScript
    Frameworks:极大简化我们JavaScript编程的工作量,它主要提供了以下几只重点功能:
    DOM操作,跨浏览器兼容性,以及程序架构。当然像jQuery它自身其实并无是一个框架,它是一个库房(lib)。目前主流的框架或库有如下几单:

  • 甭使table布局,table是故来表格显示的。

  • 毫不到处滥用div标签,div是因此来分块用之

  • 绝不以样式标签,如font, center, big, small, b,
    i,样式可以据此CSS来控制,b和i可以为此strong和em来代表。

  • 无须采用换行标签以及空格来支配样式,请用CSS。

  • 尽可能不要使内联CSS

  • CSS性能优化
  • LESS and SASS
  • JavaScript单元测试
  • JavaScript设计模式
  • NodeJS
  • ES5
  • Web移动开
  • 浏览器插件开发
  • 前端安全
  • 跨域处理
  • SEO
  • A/B test
  • 可用性/可访问性
  • 前者流程/部署
  • 浏览器原理
  • 出品经理——这些是肩负策划应用程序的一致广大口。他们能想像发生什么通过应用程序来满足用户需求,以及哪通过她们设计之模式赚到钱(往往从和愿违)。一般的话,这些人追的是增长的效果。

  • UI设计师——这些口承受应用程序的视觉设计与交互模拟。他们关心的凡用户指向啊敏感、交互的一贯性以及完整的好用性。他们心爱让流畅靓丽可并无爱实现的用户界面,但考虑问题往往无周全。

  • 项目经理——这些口负担实际地运转和保安应用程序。项目管理之要关注点,无外乎正常运行时刻(uptime)——应用程序始终健康可用之光阴、性能和了日期。项目经理追求的目标往往是不择手段保障业务的简单化,以及不在晋级更新时引入新题材。

  • 最终用户——当然是应用程序的基本点消费者。尽管我们无会见时不时同最终用户打交道,但他俩的汇报意见主要;没人感念就此的应用程序毫无价值。最终用户要求极其多的即是指向私家中之功能,以及竞争性产品所怀有的效能。

入门:打基础同时会参与到项目中失。

  • 层叠和连续

  • 优先级

  • 盒模型

  • 定位

  • 浮动

960 Grid System 
Blueprint CSS 
Bluetrip 
Minimum Page

前端开发的为主是HTML + CSS +
JavaScript。本质上它构成一个MVC框架,即HTML作为信息模型(Model),CSS控制样式(View),JavaScript负责调度数据以及贯彻某种展现逻辑(Controller)。

沟通能力

  • 勿停歇的读新的技术
  • 互动设计能力,管理力量
  • HTML5签,TML标签语义化
  • CSS Sprite
  • 浏览器兼容性
  • IE HasLayout和Block Format Content
  • CSS3
  • 精通JavaScript Frameworks
  • HTML5
  • 前者模板
  • 前端MVC
  • 模块化开发
  • Http1.1
  • 调节工具
  • 正则表达式
  • 响应式设计

jQuery 
YUI 
DOJO

Others

  • 响应式设计:伴随在各种智能装备的风靡,响应式设计本凡是雅炎热。以前开网页只要面向PC机的浏览器,页面一直定位宽度就实行,比如960px,而如今经手机的访问量已过PC机,并且配备的尺码多种多样,未来会晤再次多。在这种背景下,网页支持具有装备进行访问是基本要求了,而响应式设计能怪好的解决这些题材。

  • Http1.1:GET,POST方式,Request/Response 头部,状态码等。

  • Web移动支付:开发方式一般是native的法或Web方式,作为前端开发人员的话当然是错过上Web移动开了。PhoneGap是必学的,前端层面的框架如jQueryMobile,
    Sencha Touch, jQTouch等还是毋庸置疑的挑三拣四。

  • 前端安全:随着前端技术的发展,安全问题已起服务器悄然来临了各级一个用户之底前方,盗取用户数量,
    制造恶意的得自我复制的蠕虫代码,让病毒在用户中传播,使服务器当掉.
    更有甚者可能会见于用户不知觉得情况下,让用户成为攻击者,这纯属免是骇人听闻。富客户端的使更加普遍,前端的平安问题呢随后增加。常见的口诛笔伐方法来:

XHTML 于2000年底1月26日变成 W3C 标准。W3C 将 XHTML
定义为新型的HTML版本。XHTML 将逐级替代 HTML。XHTML是通过把 HTML 和 XML
各自的独到之处加以结合形成的。XHTML 语法规则如下:

javascript

  • 前端流程/部署:Grunt,Bower和Yeoman今昔几乎是前者最流行的自动化的种构建工具

  • 正则表达式

  • 浏览器插件开发

  • 浏览器原理
  • Github是一个佳绩的代码托管网站,我们得以以达成开创我们个人的品类,同时为是读之好地方,我们好关注其他优秀的门类。JSFiddle是一个web开发人员的勤学苦练习场,一个可以在群方面利用之家伙。我们得据此他来在线编辑一些HTML,CSS,javascript片段。你编的代码可以跟其他人分享,或放你的博客当
  • 翻阅优秀之开源代码
  • 体贴入微技术发展趋势,了解最新的正业技术,可以由此订阅知名博客,阅读技术情报获取
  • 写博客/记笔记,可以拓展文化积累。

前端修炼之路

1.基础

3.标签的语义化为发挥语义而标记文档,而休是为样式,结构可以的文档可以往浏览器传达尽可能多之语义,不论是浏览器在掌上电脑还是风行的桌面图形浏览器。结构可以的文档都能够望用户传达可视化的语义,即使是于老的浏览器,或是在给用户关闭了
CSS
的当代浏览器被。同时结构可以的HTML代码也有助于搜索引擎索引而的网站。(web前端上交流群:328058344
禁止闲聊,非喜不进!)

Backbone.js 
Spine 
YUI 
Agility.js 
Ember.js 
Batman.js 
Dojo 
AngularJS(MVVM) 
KnockoutJS(MVVM)

  • CSS性能优化:CSS
    代码是决定页面显示样式与作用的极其直接“工具”,但是当性调优时她俩便被
    Web 开发工程师所忽视,而实质上不正经之 CSS
    会对页面渲染之效率来严重影响,尤其是于结构复杂的 Web 2.0
    页面,这种影响更为不可磨灭。所以,写来正规的、高性能的 CSS
    代码会极大的提高应用程序的频率。

  • LESS and SASS:CSS 预处理器,用来呢 CSS
    增加一些编程的底特征,无需考虑浏览器的兼容性问题,例如你得在 CSS
    中使变量、简单的程序逻辑、函数等等在编程语言中的有的中心技术,可以吃您的
    CSS
    更展现简洁,适应性更强,代码更直观等众多益处。SASS基于Ruby开发。LESS既好当客户端运行,也可因Node.js或者Rhino在劳动端运行。

相关文章

No Comments, Be The First!
近期评论
    分类目录
    功能
    网站地图xml地图