dom

1、React组件化概念 1.1、组件的概念 React 应用都是构建在组件之上。 组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。 1.2、组件的特点 组件化的概念在后端早已存在多年，只不过近几年随着前端的发展，这个概念在前端开始被频繁提及，特别是在MV*的框架中。 前端中的“组件化”这个词，在UI这一层通常指“标签化”，也就是把大块的业务界面，拆分成若干小块，然后进行组装。 狭义的组件化一般是指标签化，也就是以自定义标签（自定义属性）为核心的机制。 广义的组件化包括对数据逻辑层业务梳理，形成不同层级的能力封装。 标准性 任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。 组合性 组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。 重用性 任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。 可维护性 任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解

XSS定义 　　XSS, 即为（Cross Site Scripting）, 中文名为 跨站脚本 , 是发生在 目标用户的浏览器 层面上的，当渲染DOM树的过程成发生了 不在预期内 执行的JS代码时，就发生了XSS攻击。 跨站脚本的重点不在‘跨站’上，而在于‘脚本’上。大多数XSS攻击的主要方式是嵌入一段远程或者第三方域上的JS代码。实际上是在目标网站的作用域下执行了这段js代码。 攻击手段： 　　1.盗用cookie 获取敏感信息 　　2.破坏页面结构 插入恶意内容（反射性） 　　3.利用flash（了解） 　　4.DDOS(强大 难以防御) 　　　　DDOS：分布式拒绝服务攻击（Distributed Denial of Service），简单说就是发送大量请求是使服务器瘫痪。DDos攻击是在DOS攻击基础上的，可以通俗理解，dos是单挑，而ddos是群殴，因为现代技术的发展，dos攻击的杀伤力降低，所以出现了DDOS，攻击者借助公共网络，将大数量的计算机设备联合起来，向一个或多个目标进行攻击。 在技术角度上，DDoS攻击可以针对网络通讯协议的各层，手段大致有：TCP类的SYN Flood、ACK Flood，UDP类的Fraggle、Trinoo，DNS Query Flood，ICMP Flood，Slowloris类等等。一般会根据攻击目标的情况，针对性的把技术手法混合

export function addClass ( el, className ) { if ( hasClass ( el, className )) return let newClassName = el.className.split ( ' ' ) newClassName.push ( className ) el.className = newClassName.join ( ' ' ) } export function removeClass ( el, className ) { if ( ! hasClass ( el, className )) return let newClassName = el.className.split ( ' ' ) let index = newClassName.findIndex ( item = > { return item == className } ) newClassName.splice ( index, 1 ) el.className = newClassName.join ( ' ' ) } export function hasClass ( el, className ) { let reg = new RegExp ( '(^|\\s)' + className + '($|\\s)' )

DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域，各浏览器实现了相应的方法，可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型的扩展存在，所以它能在所有元素上使用。 1、scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐。-------目前各浏览器均支持 2、scrollIntoViewIfNeeded(alignCenter) 只在当前元素在视窗的可见范围内不可见的情况下，才滚动浏览器窗口或容器元素，最终让当前元素可见。如果当前元素在视窗中可见，这个方法不做任何处理。如果将可选参数alignCenter设置为true，则表示尽量将元素显示在视窗中部（垂直方向）------Safari、Chrome实现了这个方法 3、scrollByLines(lineCount) 将元素的内容滚动指定的行数的高度，lineCount的值可以为正值或是负值。---Safari、Chrome实现了这个方法 4、scrollByPages(pageCount) 将元素的内容滚动指定的页面的高度，具体高度由元素的高度决定。---Safari、Chrome实现了这个方法 scrollIntoView(

React的常用的声明周期钩子函数 数据初始化阶段 组件初始化会执行的四个钩子函数 1.constructor( props, context) //初始化动作 //用于初始化数据 2.static getDerivedStateFromProps(props,state) //静态方法 不能使用this 不实例化也可以通过 类名.方法名 来调用 能实时更新父组件传递过来的参数 3.render() 这个方法是必须的,当他被调用是,他讲计算 this.props和this.state 并返回以下一种类型 React 元素,通过 jsx 创建,既可以是 dom元素,也可以是用户自定义的组件 字符串或数字,他们将会以文本节点形式渲染到dom中 null,什么也不许安然 布尔值,也是什么都不许安然 4.componentDidMount 组件呗装配后立即调用,初始化时的DOM节点应该进行到这里 通常在这里进行 ajax 请求 如果要初始化第三方的dom库，也是在这里进行初始化 只有到这里才能获取到真是的dom节点 更新阶段的常用的四个钩子函数 1.shouldComponentUpdate(nextProps,nextState){ return boole } 判断组件是否需要更新 返回值是一个布尔值 true 就进行渲染 flase 就会渲染 默认为 true 如果

跨平台一直是老生常谈的话题，cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放，颇有一股推倒原生开发者的势头。本文将对当下跨平台移动开发的现状、实现原理、框架的选择等进行深度解析。 为什么我们需要跨平台开发？ 本质上，跨平台开发是为了增加代码复用，减少开发者对多个平台差异适配的工作量，降低开发成本，提高业务专注的同时，提供比web更好的体验。通俗了说就是：省钱、偷懒。 本篇主要以react-native、weex、flutter，结合资讯展望，深入聊聊当前跨平台移动开发的实现原理、现状与未来。至于为什么只讲它们，因为对比ionic、phoneGap，它们更于 “naive”。 一、原理与特性 目前移动端跨平台开发中，大致归纳为以下几种情况： react native、weex均使用Java作为编程语言，目前Java在跨平台开发中，可谓占据半壁江山，大有“一统天下”的趋势。 kotlin-native开始支持 iOS 和 Web 开发，（kotlin已经成为android的一级语言）也想尝试“一统天下”。 flutter是Google跨平台移动UI框架，Dart作为谷歌的亲儿子，毫无疑问Dart成为flutter的编程语言，如下图，作为巨头新生儿，在flutter官网也可以看出，flutter同样“心怀天下

DOM 是 Document Object Model（文档对象模型）的缩写。（BOM 浏览器对象模型）； 任意的文档都可以绘制成树状结构 （一）节点层次 1.Node类型 IE中的所有DOM对象都是以COM对象的形式。 IE未公开Node类型的构造函数，直接用数字判断 node . nodeType == 1（ELEMENT_NODE） （1）nodeName : 标签名 nodeValue : 始终为null （2）节点关系 childNodes属性保存NodeList对象 虽然可以通过方括号语法来访问NodeList的值，而且这个对象也有length属性，但它并不是Array实例。索引和.item()访问。转数组： function convertToArray(nodes) { var array = null; Try { array = Array . prototype . slice . call(someNode . childNodes , 0); } cache (ex) { array = new Array(); //<=IE8 for(var i = 0, len = nodes . length; i < len; i++) { array . push(nodes[i]); } } return array; } 1 2 3 4 5 6 7 8 9

使用DOM，最重要的是快速有效的检索节点 dojo/query模块检索一个节点列表，支持CSS3的选择器 一、查询 比如以下html: 1 <ul id="list"> 2 <li class="odd"> 3 <div class="bold"> 4 <a class="odd">Odd</a> 5 </div> 6 </li> 7 <li class="even"> 8 <div class="italic"> 9 <a class="even">Even</a> 10 </div> 11 </li> 12 <li class="odd"> 13 <a class="odd">Odd</a> 14 </li> 15 <li class="even"> 16 <div class="bold"> 17 <a class="even">Even</a> 18 </div> 19 </li> 20 <li class="odd"> 21 <div class="italic"> 22 <a class="odd">Odd</a> 23 </div> 24 </li> 25 <li class="even"> 26 <a class="even">Even</a> 27 </li> 28 </ul> 29 30 <ul id="list2"> 31 <li class="odd"

使用dojo 提供的标准特效，我们能创建平滑的用户的体验， 使用 dojo/_base/fx 和 dojo/fx 模块，能组合一些动态特效 Dojo 1.10有两个fx模块： dojo/_base/fx ：在以前的dojo提供了基础特效方法，包括： animateProperty , anim , fadeIn , 和 fadeout dojo/fx ：提供了许多高级特效，包括： chain , combine , wipeIn , wipeOut 和 slideTo 一、 Fading 平滑的显示和隐藏元素，使节点淡入淡出。 1 <button id="fadeOutButton">Fade block out</button> 2 <button id="fadeInButton">Fade block in</button> 3 4 <div id="fadeTarget" class="red-block"> 5 A red block 6 </div> 7 <script> 8 require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) { 9 var fadeOutButton = dom.byId("fadeOutButton"), 10