seacean2000的专栏

组件上的自定义事件是和组件的自定义属性一样，都是模仿HTML正常的标签，由组件给出事件句柄，由使用组件的父组件提供事件处理函数。组件自定义事件真正触发的地方是在组件模板的标签上，组件自己不提供事件处理函数，将这个处理函数给出一个定义，将这个定义抛给使用组件的父组件，由父组件给出。4、父组件提供事件处理函数可以提供组件自定义事件规定的参数，也可以提供、不提供、提供超过形参个数的参数。3、组件使用时，只有父组件为组件的自定义事件绑定了事件处理函数，组件上事件才会有效果。

有属性定义的组件在使用时，属性可以通过静态赋值、动态赋值的方式获得初始化。动态赋值是通过js表达式或者使用组件的父组件定义中给出值，如上的count、show属性属于js表达式动态赋值，list、pfun属性是父组件给出值。从前端组成BOM+DOM+js的组成来看，js是动态性的支持者，DOM是静态性HTML的支持者，vue的组件在动态性上的支持是非常强的，这也带来了组件属性的多种类型和赋值初始化的问题。组件的Props是给父组件使用的，使用时需要明确指定属性的值，或者是在组件定义时，给属性提供默认值。

动态组件是利用类似于继承关系的原理，所有的组件都有公共的父类component，所有组件的定义都是component的子类，这样不同组件都是component的子类，所有的子类都是父类型的。比较组件的局部引用和全局引用，局部引用需要明确组件的定义文件位置，全局引用不需要明确组件的定义文件位置，但是需要在使用前有明确的全局注册。组件使用过程中，组件的来源对组件的使用有很大的影响。组件的具备引用方式是组件定义完成后，不注册为Vue的全局对象，使用时需要找到对应的组件定义文件，显示的在使用处注明。

模板引用需要在对应的HTML标签上添加 “ref”属性，属性值在组件中需要有对应，这样就可以在组件中使用属性值对模板引用进行操作。由于模板引用在组件中的属性值初始化时为null，在使用时必须先检查模板引用是否已经初始化。当需要对模板引用进行事件操作，如获取焦点、点击等，这需要将模板引用的对象转型为HTMLElement，然后可以调用对应的事件，如focus、click等。Vue的模板引用是为了处理直接访问DOM底层而做的补充处理，毕竟Vue宣称是基于组件的，这种补充处理是对Vue框架的补充。

事件的处理函数除了直接指定处理函数之外，还增加了对事件简易处理函数的内联处理方式。在事件上，Vue增加了事件修饰符，这些事件修饰符极大的丰富了事件处理的效果。Vue又是一种组件式的架构方式，事件和事件处理都是在组件内部进行的，这对事件的管理有很大的改善。.exact ：允许控制触发一个事件所需的确定组合的系统按键修饰符。.passive ：事件的默认行为将会立即发生而不是等待，一般用于触摸事件的监听器，常用于改善移动设备的滚屏性能。.prevent ：阻止事件的默认行为。

前端框架选型全看业务

一个拼接怪叫Vue

es6面向对象是存在先天不适的，即便增加了类、模块相关的内容。使用面向对象框架的话，可以优先考虑AngularJS，不过最好有es6基础和面向对象的基础，如果有MVC的认识就更容易了。

当你有深厚的基础后，再学习其他的内容会很容易 这个世界或者可以观察到的世界是一个复数主角的世界，在每一个时刻都有难以计数的主角在行动，包括你我在内。这些行动装点了整个世界，让它变得生机勃勃。你我只能通过眼睛去看，通过耳朵去听，通过鼻子去嗅，通过嘴巴去尝，通过皮肤去触动，有限的五感让我们接近了世界也远离了更多世界的真实。每一种观察和认识世界的方式都是在一定范围内有效的，即便是用尽各种方式去组合或创新，仍然是有局限范围的。这个时候人们对自己的认识存在了疑惑，一......

一种大略方向上的总结

自定义类的改善和模块级别的导入导出规范使得es6具备了实现面向对象的前端架构的可能性。

es6对代理、反射、异步增加了大量的更新，代理和反射会推动es向框架方向狂奔，异步部分会增加大量的易用性。

更多的语法支持，es6向更容易组织的方向前进，特别是新增的Symbol类型

es6对字符串变量部分和数值部分的优化是比较基础的，它对前端架构部分有影响，但是说非常明显的影响其实看不到。

从开发成本上看js向es6的转变

目录1、前端架构的问题2、前端架构问题的切入方向3、解决方案与现实的交汇1、前端架构的问题无论web前端的架构如何的变化和改进，甚至是用框架或者是基于各方面的改进调整，最基本的请求返回上所有的步骤是不可缺少的。这是web前端架构的根基。最基本的请求返回路径如下：进入对应的前端页面->触发页面事件->收集数据和校验数据->组装数据->发送请求至渠道服务器->服务器返回数据->解析数据结果->组装数据结果->显示数据结果或触发新的页面事件。

创建对象    示例一:     var empty={};//An object with no property    var point={x:0,y:0};   var book={};    book.title="Javascript";   book.price=12;       for/in循环输出对象的属性   for(var nam

函数的使用技巧javascript内置的类型检测机制并非完全可靠。在Object.prototype.toString()方法没有被修改的前提下，可以使用下面的安全检测方法检测是不是原生的：function isArray(value){return Object.prototype.toString.call(value)=="[object Array]";}

DOM2与DOM3主要是在DOM1的基础上引入更多的交互能力，支持了更高级的XML特性。DOM2做的主要的扩展子集具体为：DOM Level 2 Core:在一级核心的基础上，为节点添加了更多的方法和属性。DOM Level 2 Views:为文档定义了基于样式信息的不同视图DOM Level 2 Events:说明了如何使用事件与DOM进行交互。DOM Level 2 Sty

首先要知道什么事事件流。事件流是从页面中接收事件的顺序。但是在这个问题的处理上，IE和Netscape提出了差不多完全相反的事件流概念。IE的事件流是冒泡流，而 Netscape的事件流是捕获流。冒泡流就是有最具体的元素接收，然后逐级向上传播到不具体的节点（文档）。捕获流就是不太具体的节点先收到事件，然后向下传递，最具体的节点最后接收到事件，用意在于事件到达目标之前捕获它。目前的主流浏

很多的API都有着特定的前缀，例如微软的ms，谷歌和safari的webkit。这些新兴的API去掉前面的前缀后，剩下的部分是一样的。requestAnimationFrame()用于动画重绘的API，它可以告诉浏览器，动画开始，浏览器就可以确定重绘的最佳方式。早期的动画的典型方式是使用setInterval()方法来控制所有的动画。下面是早期动画的基本方式：(func

表单的基础知识在HTML中，表单是由元素来组成的。在js中，表单对应的则是HTMLFormElement类型。它和其他HTML元素一样具有相同的默认属性。下面是HTMLFormElement独有的属性和方法：acceptCharset:服务器能够处理的字符集，等价于HTML的accept-charset特性action：接收请求的URL，等价于HTML中的action特性。elem

json是一种数据格式。json的语法它可以表示一下三种类型的值：简单值：使用与js相同的语法可以在json中表示字符串、数值、布尔值和null。但是json不支持js的undefined。对象：对象作为一种复杂的数据类型，表示的是一组有序的键值对。每个键值对的值可以是简单值，也可以是复杂数据类型的值数组：数组也是一种复杂数据类型，表示一组有有序的的值列表，可以通过数值

Ajax是一种从页面获取数据，传送到服务器，服务器进行数据处理后，将处理结果返回到页面的一种技术。  虽然在使用这种技术的时候，我们大多数时间都在使用像jquery,ext,dojo等等的框架封装过的技术来使用，这虽然能够减少很多的注意事项，不过并不是全部。下面是我在使用过程中总结的注意事项：1.同步和异步问题   如果你需要立即使用返回的数据，接下来的数据处理过程需要等待服务

1.从浏览器中获取数据2.向浏览器中s

RequireJS是一种前端的js模块管理技术，对前端的复杂的模块管理有很大的帮助。RequireJS的官网地址：http://www.requirejs.org/RequireJS对我们的前端管理做出了那些改变：第一个改变：导入JS文件部分的改变

跨站脚本的新方式

要检测浏览器是否支持DOM2级的XML，可以使用以下的代码：var hasXmlDom=document.implementation.hasFeature("XML","2.0");DOMParser类型var parser=new DOMParser();var xmldoc=parser.parseFormString("","text/html");xmld

XMLHttpRequest对象在IE5中，XHR对象是通过MSXML库中的ActiveX对象实现的。在IE中可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MXSML.XMLHttp.6.0。IE7之后的版本和其他浏览器都会使用下面的函数来创建：var xhr=new XMLHttpRequest();兼容性创建XHR的代码如

对DOM的扩展目前主要有两个，一个是Selectors API(选择符API)，另一个是HTML5.选择符API这个是通过CSS选择符选择与特定模式匹配的DOM元素，主要代表是jQuery。Selector API Level1的核心是两个方法：querySelector()和querySelectorAll().在兼容的浏览器中，可以通过Document和Element类型来调用

计时器  计时器相关的四个函数.   setTimeout()  clearTimeout()  setInterval()   clearInterval()  setTimeout(),参数为毫秒数,作用是在指定毫秒数之后运行.clearTimeout()表示清除计时器  setInterval(),参数为毫秒数,作用是以间隔指定毫秒数,重复执行.clearInterval()清除

javascript的函数无法确定参数的具体类型和个数，如有指定需求，则用typeof进行检测嵌套函数，函数的定义嵌套在其他函数内。函数直接量可以用来定义函数。它被用作表达式，无需指定函数名。函数命名规则参见java规则。函数的参数可选参数：当调用一个函数的参数少于声明参数的个数的时候，一个其他参数就有一个undefinded值。要做到这

javascript编码的字符集是Unicode。可以兼容UTF-8和UTF-16它对大小写敏感。它会忽略程序中记号之间的空格，制表符，换行符。每行程序最好使用";"结束，注释方式有2种，//和/*    */标示符要参照一般编程的规则。数据类型和值能够表示操作的值的类型称为数据类型（datatype）。javascript支持5种基本数据类型，数字，文本字符串，布

下面是一个类的例子。javascript: function Rectangle(w,h){         this.width=w;         this.height=h;  }    Rectangle.prototype.area=function(){    return this.width*this.height;  }    var rect1=new Recta

javascript的变量都是非类型的，可以存放任何变量。变量的声明需要在变量名称前面加上var。变量声明后，在未被赋值之前，其值是undefined。如果使用的变量没有被定义，会产生一个错误。如果变量声明时前面没有添加var，则变量被隐式创建为全局变量。变量的作用域变量在一个作用域范围内被声明，则在这个范围内任意地方都可以使用，在未初始化之前值为undefined。

表单验证很重要，极其重要。首先，获取绑定对象的js函数是function getActivatedObject(e) {  var obj;  if (!e) {    // early version of IE    obj = window.event.srcElement;  } else if (e.srcElement) {    // IE

重点看一下js代码是怎么设计的。window.onload = initPage;//初始化加载var usernameValid=false;//检查用户名的有效性标记var passwordValid=false;//检查密码的有效性标记function initPage() {  document.getElementById("username").onbl

创建模块的第一条规则：避免定义全局变量要为模块提供载入标记，而这个标记在全局名字空间中最好只载入一次。在使用名字空间的添加标示的时候，通常以文件的路径作为标示。下面时根据域名创建名字空间的代码var com;if(!com)com={};else if(typeof com!="object") throw new Error("com

编程环境的三个重要特性:    作为全局对象的window和javascript代码的全局执行环境    客户端对象的层次和构成它的一部分的文档对象模型(DOM)    事件驱动的编程模型window对象  主要任务是在一个窗口中显示html文档.Window对象包含两个自我引用的属性:window和self.window是全局对象,因此全局变量都被定义成该对象的属性.

动态文档内容    document.write(),是DOM遗留的一部分,作用是把内容写入文档.使用它有两种方式,一种是在脚本中使用,把输出的内容输入到当前正在被解析的文档中.如果javascript片段有defer属性,那么这个方法是不会起作用的.他不能在文档解析完成后工作.第二种方法,在其他窗口或者帧写新的文档.配套函数:window.open(),document.close().