亚洲必赢登录 > 亚洲必赢app > 框架优瑕玷相比亚洲必赢登录:,js完成原生js拖

原标题:框架优瑕玷相比亚洲必赢登录:,js完成原生js拖

浏览次数:82 时间:2019-10-09

React.js完毕原生js拖拽效果及观念

2016/07/16 · JavaScript · ReactJS

正文小编: 伯乐在线 - winty 。未经笔者许可,幸免转发!
欢迎参加伯乐在线 专栏撰稿人。

一、起因&思路

无意,已经好多天没写博客了。。。近年来除了研商React,还做了同盟社官方网站。。。

一贯想写三个原生js拖拽效果,又加上多年来学react学得比较嗨。所以就用react来贯彻那几个拖拽效果。

第一,其实拖拽效果的思绪是一点也不细略的。首要便是多个步骤:

1.onmousedown的时候,运转可拖拽事件,记录被拖拽成分的本来面目坐标参数。

2.onmousemove的时候,实时记录鼠标移动的偏离,结合被拖拽成分第一阶段的坐标参数,计算并设置新的坐标值。

3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值。

注意:这里首假诺通过相对定位的top和left来明显因素的岗位的,由此被拖拽成分的css必须要安装相对定位。

二、扶助理工科程师具

协助理工科程师具首要就是是开荒进度变得非常的慢,并且炫耀的。在这些demo中,要给大家推荐三个gulp+browser-sync的开拓工具,gulp有成都百货上千功用,在那么些demo中gulp的遵守首如果能够设置实时编写翻译react中的jsx文件,当然假如您写css用的是sass,也得以安装实时编写翻译sass。用browser-sync这几个啊,重要便是足以自行实时刷新页面,大家日常做页面,看效率的时候,平常都以经过F5来刷新浏览器,然后见到页面的。可是用了这么些插件,你写完代码的时候,只要按下,ctrl+s保存,新的功用就能活动在浏览器中刷新,然后看收获了。

用法详解:

安装:

1.在node的条件下,安装gulp,这里就一窍不通说了,具体经过可参看作者的博文《react.js入门必得清楚的那多少个事》

2.装置gulp-livereload,在命令行可能git bash ,输入npm install –save-dev gulp-livereload

3.装置gulp-watch,在命令行可能git bash ,输入npm install –save-dev gulp-watch

4.装置browser-sync,在命令行恐怕git bash ,输入npm install –save-dev browser-sync

安排及表达如图:

亚洲必赢登录 1

三、定义组件创设页面

备注:这里的代码表达均在react相关模块安装好的景色下,安装进程见笔者的博文《react.js入门必需通晓的那贰个事》.

效果图:

亚洲必赢登录 2

零件拆分思路:

本身及时以为组件拆分得细一点好,所以本人把input、button分别做成了贰个零件:

JavaScript

var React=require('react'); var MyInput=React.createClass({ render:function(){ return ( <div className="form-group"> <label htmlFor={this.props.labelId} className="col-sm-2 control-label{this.props.labelTip</label> <div className="col-sm-10"> <input name={this.props.name} type={this.props.type} onChange={this.props.onChange} className="form-control" id={this.props.labelId} placeholder={this.props.placeholder}/> </div> </div> ); } }); module.exports=MyInput;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var React=require('react');
var MyInput=React.createClass({
  render:function(){
    return (
    <div className="form-group">
        <label htmlFor={this.props.labelId} className="col-sm-2 control-label{this.props.labelTip</label>
        <div className="col-sm-10">
             <input name={this.props.name} type={this.props.type} onChange={this.props.onChange} className="form-control" id={this.props.labelId} placeholder={this.props.placeholder}/>
        </div>
    </div>
  );
  }
});
 
module.exports=MyInput;

JavaScript

var React=require('react'); var Button=React.createClass({ render:function(){ return ( <button type={this.props.type} className="loginButton">{this.props.ButtonTip}</button> ); } }) module.exports=Button;

1
2
3
4
5
6
7
8
9
10
11
var React=require('react');
var Button=React.createClass({
    render:function(){
        return (
            <button type={this.props.type} className="loginButton">{this.props.ButtonTip}</button>
        );
    }
})
module.exports=Button;

鉴于input有比相当多都以内需钦赐的,这种气象下,如若像作者这样定义须求传太多参数,况兼实际登入的input好多都是固定且没要求复用的,所以这么事实上一点都不大好。这里的input直接写相比好。

写好之后的父组件:

JavaScript

render:function(){ return ( <form className="form-horizontal" id="form" ref="dragBox" onSubmit={this.submitHandler} onMouseMove={this.move} onMouseUp={this.endDrag}> <DragArea callbackParent={this.onChildChanged} /> <div id="form-wrap"> <MyInput name="username" labelId={"userId"} labelTip={"客商名"} type={"text"} placeholder={"请输入客商名"} value={this.state.username} onChange={this.handleChange}/> <MyInput name="password" labelId={"pw"} labelTip={"密码"} type={"password"} placeholder={"请输入密码"} value={this.state.password} onChange={this.handleChange}/> <div className="form-group"> <div className="col-sm-offset-2 col-sm-10"> <div className="checkbox"> <label> <input name="checked" type="checkbox" checked={this.state.checked} onChange={this.handleChange} /> 记住笔者 </label> </div> </div> </div> <MyButton type={"submit"} ButtonTip={"登录"}/> </div> </form> );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
render:function(){
   return (
    <form className="form-horizontal" id="form"  ref="dragBox" onSubmit={this.submitHandler} onMouseMove={this.move} onMouseUp={this.endDrag}>
    <DragArea callbackParent={this.onChildChanged} />
    <div id="form-wrap">
    <MyInput name="username" labelId={"userId"} labelTip={"用户名"} type={"text"} placeholder={"请输入用户名"} value={this.state.username} onChange={this.handleChange}/>
    <MyInput name="password" labelId={"pw"} labelTip={"密码"} type={"password"} placeholder={"请输入密码"} value={this.state.password} onChange={this.handleChange}/>
    <div className="form-group">
    <div className="col-sm-offset-2 col-sm-10">
    <div className="checkbox">
    <label>
    <input name="checked" type="checkbox" checked={this.state.checked} onChange={this.handleChange} /> 记住我
    </label>
    </div>
    </div>
    </div>  
    <MyButton type={"submit"} ButtonTip={"登陆"}/>
    </div>
    </form>
    );

备考:因为demo中须要获得真实的dom节点,所以定义了ref。

再增加css样式,页面就水到渠成啦!最终,入眼来啊!!!

四、老爹和儿子组件间通信完毕拖拽

证实:由于本人要达成的功力是,鼠标按住子组件DragArea的时候,拖动的是全部form,所以运营拖拽的是DragArea,而响应的是form。所以,一开首必需把父组件的有的景观属性传给子组件,然后鼠标在DragArea按下的的时候,必需通过子组件DragArea找到父组件的固有坐标参数,然后更新父组件里面包车型客车情况属性,何况告诉父组件能够开展拖拽了。父组件给子组件传参就是直接传送的。而子组件给父组件传参必要通过事件。所以在父组件中定义这么多个函数:

JavaScript

onChildChanged:function(newState){ //因为参数过多,所以把参数放到对象里面,通过对象来传 this.setState(newState); },

1
2
3
onChildChanged:function(newState){ //因为参数过多,所以把参数放到对象里面,通过对象来传
    this.setState(newState);
},

而子组件须求绑定这些函数,如上面的代码:callbackParent={this.onChildChanged}

在子组件中,响应的函数为:

JavaScript

startDrag:function(e){ var dragBox=document.getElementById('form'); var newState={}; var event=e||window.event; event.preventDefault(); var computedStyle=document.defaultView.getComputedStyle(dragBox,null); newState.left=computedStyle.left; newState.top=computedStyle.top; newState.currentX=event.clientX; newState.currentY=event.clientY; newState.flag=true; <span style="color: #0000ff;"> this.props.callbackParent(newState);</span> }

1
2
3
4
5
6
7
8
9
10
11
12
13
startDrag:function(e){
    var dragBox=document.getElementById('form');
        var newState={};
        var event=e||window.event;
        event.preventDefault();
        var computedStyle=document.defaultView.getComputedStyle(dragBox,null);
        newState.left=computedStyle.left;
        newState.top=computedStyle.top;
        newState.currentX=event.clientX;
        newState.currentY=event.clientY;
        newState.flag=true;
    <span style="color: #0000ff;">    this.props.callbackParent(newState);</span>
}

如此那般,在子组件中就开动了拖拽按键,并且已经更新了from的相关参数,from的两外几个事件,move和endDrag分别为:

JavaScript

move:function(event){ var e = event ? event : window.event; //兼容IE的写法 if (this.state.flag) { var nowX = e.clientX, nowY = e.clientY; var disX = nowX - this.state.currentX, disY = nowY - this.state.currentY; ReactDOM.findDOMNode(this.refs.dragBox).style.left = parseInt(this.state.left) + disX + "px"; ReactDOM.findDOMNode(this.refs.dragBox).style.top = parseInt(this.state.top) + disY + "px"; } }, endDrag:function(){ var computedStyle=document.defaultView.getComputedStyle(ReactDOM.findDOMNode(this.refs.dragBox),null); this.setState({ left:computedStyle.left, top:computedStyle.top, flag:false }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
move:function(event){
    var e = event ? event : window.event;  //兼容IE的写法
    if (this.state.flag) {
        var nowX = e.clientX, nowY = e.clientY;
        var disX = nowX - this.state.currentX, disY = nowY - this.state.currentY;
        ReactDOM.findDOMNode(this.refs.dragBox).style.left = parseInt(this.state.left) + disX + "px";
        ReactDOM.findDOMNode(this.refs.dragBox).style.top = parseInt(this.state.top) + disY + "px";
    }
},
endDrag:function(){
    var computedStyle=document.defaultView.getComputedStyle(ReactDOM.findDOMNode(this.refs.dragBox),null);
    this.setState({
        left:computedStyle.left,
        top:computedStyle.top,
        flag:false
    });
}

时至后天,拖拽达成!

五、反思回看

1.辩驳上来讲,拖拽效果可以在率性成分中落到实处,拖拽的思路都以同等的,所以理论上来说,拖拽各样进程的函数能够抽离出来,做成三个Mixin,然后能够频仍调用。作者一初阶的思路正是如此,不过在传参、响应、绑定成分上边总是出错。查找了一下素材,没找到react与拖拽的轻巧写法资料,独有局部react的专项使用插件,况且是用ES6的写法,由于现行反革命的程度还未能看懂。所以不常甩掉了这种写法。希望有连锁主张的大神们和本身交换一下。

2.文中子组件获取from的参数时,用了var dragBox=document.getElementById(‘form’);去找dom,那样看似违反了react的一对思想。可是本身还不是很熟习该怎么从子组件获取父组件的dom。小编试过在父组件定义refs=this.refs.dragBox。然后传给子组件,不过不明了干什么浏览器平昔报错说那么些不是dom节点。求大神指教。

3.拖拽事件的貌似写法,是在document上边定义mousemove和mouseup事件,然则这三个事件都提到到from的参数,那样的话,假设自身在react中定义在document,就跟踪不了相关参数。所以自身就定义在了from上边。是还是不是有越来越好的章程呢?求分享!

4.革命尚未成功,同志仍需努力!

 

本demo已上传至:

备考:由于本demo相比简单,领会代码应该未有啥样难题,所以未有写代码表达,请见谅!

打赏扶助小编写出更加多好小说,多谢!

打赏小编

6 大主流 Web 框架优劣点相比

2017/12/07 · JavaScript · 3 评论 · 框架

原稿出处: Kit Kelly   译文出处:oschina   

亚洲必赢登录 3

框架优瑕玷相比亚洲必赢登录:,js完成原生js拖拽效果及思想。是该读些探究和做一些总括的时候了。当大家开首写这些数不胜数博客的时候,大家知晓 JavaScript/web 应用框架并不太好总括。我们力图对这么些不可回答的主题材料作出回应:自个儿该用哪些的框架?

在那篇文章中,我们将对那几个种类中所提到的每款框架做叁个总计,包含大家所感觉的坚强和弱点。其余,我们为您留下了一部分值得沉思的难题。

作者是不是须要采用框架?

若果不尝试回答那几个难点便是我们的渎职,那尤其成为社会上某个人的口头语,在网络平台上的争论也已经发展到就如无需额外编写 API 能更简便创制 Web 应用那样的地步。似乎本种类中装有的剧情一致,我们的答疑也差不离是基于那一个剧情。

固然无框架也能健康专门的工作,但是,那也可以有代价的。那多少个主张无框架手写 Javascript 的人,那么些平日会被大家感到是广州综合症(心境上会信任别人且易于受触动的人)的人,忘记了互连网平台上有多套迅Sagitar飞的 API ,起码有两种差别的本领,两种何啻天壤的语法。web 平台正式并规定了赶过1三千 个 API,事实上浏览器中的维恩图也出示了这一个一代天骄反差。

假诺你是多少个存有加强技巧和阅历的人,确实能够正大光明的不使用框架。但你团队的别的成员呢?你手下的那个人吧?只怕当你的主宰把你本人陷入困境的时候啊?这种状态下,大家将会看出贰个决不框架的团伙在举行冒险,最终他们会发掘自身创立了三个必要协和动手维护的框架。接着就能出现搜索人才的标题,他们无需了然框架是怎样行事的,只供给搜求会调用互连网平台 API 的高级级技巧人才也许某些自称有经历的丰姿,最终却开掘缺点和失误利于团队发展的技巧深度和经历。

共青团和少先队应有幸免虚假等价(false equivalence)的陷阱,很鲜明,在 web 技艺的选取方面抱有立异性的市肆在不断加强他们的市集市值和竞争力,谷歌(Google)、推特(Twitter)和 Netflix 集团都以很好的例证。不过比很多厂家不是如此,他们理应认可这或多或少。

亚洲必赢登录 4

总计个人采纳过的运动端布局方法

2017/07/20 · CSS · 1 评论 · 布局, 移动端

初稿出处: yiiouo   

那篇小说,首如若总计一下,小编在活动端布局用过的法子。有三种,一种是响应式布局,利用@meida判定各样size;第三种是REM;最终是安装viewport中的width。

JavaScript 深切之词法作用域和动态效能域

2017/05/04 · JavaScript · 作用域

原稿出处: 冴羽   

学习BFC

2015/08/21 · CSS · BFC

初稿出处: elcarim的博客   

BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1标准定义的,关于CSS渲染定位的一个概念。要明白BFC到底是如何,首先来探视如何是视觉格式化模型。

打赏协理小编写出愈来愈多好文章,谢谢!

任选一种支付办法

亚洲必赢登录 5 亚洲必赢登录 6

1 赞 5 收藏 评论

Angular 2+

有何优势?

Angular 2+ 的最大优势在于它的盛行水平。也是有人感觉它和 Google密切相关的名字,会影响共青团和少先队利用它。Angular 1 的全速流行是因为这一个来自别的交互式应用程序开垦条件的人会意识对于开荒单页面 web 应用程序具备相似的模子-视图情势。通过对 Angular 1 实行今世化演化和再次创设框架的少数部分,Angular 2+ 已经真的的爆发了,多量的科班的和业余培养练习机构数量都令人印象深入,开荒者有很强的商海竞争力。对于客商来讲它有一套用于创设顾客分界面包车型客车增加组件,那也是本种类中鲜见的多少个框架能够做到这一点。

有哪些毛病和挑衅?

大家感觉 Angular 框架珍视于在单个页面应用程序中开创客户界面并从未管理创设一体化的 web 应用这一个更加大的关切点,借使不急忙分明下来,那将会招致整个项目难以维护,在实际上项目中,运转时提供不属于大旨框架的技能往往令人觉着难以置信,那大大减弱了 TypeScript 对最后开采者的价值。

前景将去何地跟哪些人?

Angular 5 刚刚公布,那看来是 Angular 已经打响的辨证了快速公布版本的答应,在 Google 的不断帮助下,Angular 会越来越成熟。

像多数的重型团队一致,谷歌(Google) 具备多种(差别)的为人,从外表上看,Angular 团队和那三个专心于浏览器标准的组织之间显得很协调。但大家的观念是,和煦只是一层薄薄的窗户纸。Angular 团队对于 web 组件和渐进式 web 应用尚未二个当真消除方案。我们认为,产业界遍布承认的行业内部将会在 Angular 框架中会稳步落实,这将会耳濡目染到什么越来越好的塑造 Angular 应用将产生贰个中/短期的高危机。

哪天选取 Angular 2+

设若您须要在多个重型的框架内获得技能财富,框架内的才干平日很轻易移植;可能你须要在框架中练习开辟人士,何况还要有自然的信心,他们会在长期内得到确定的费用技艺,那样的话你能够设想Angular 2+ 。需求静心的是 Angular1(angular.js)与 Angular2+ 是一心分裂的,当中的使用、技巧和经历无法一向移植到 Angular2+ 的支出中去。

只要您的 web 应用能够很好的中间转播为正式的模型-视图方式,那么你也足以忽略任何直接怀想采用Angular2+ 。

如若您对 谷歌(Google) Material UX 设计情势看中,那么 Material Angular 是比照该方式的一种高效、轻巧且保险的法子。

亚洲必赢登录 7

响应式布局

这种感到是最棒明白了,利用@media进行断点,在每种断点中编辑css。

@media (max-width:768px){ //css }

1
2
3
@media (max-width:768px){
    //css
}

上边这段代码,在浏览器的小幅低于768时立竿见影。同理,假使把max换成min,就能够化为高于768时一蹴而就。能够设置宽度,也能够安装高度,也能够并且设置多少个值。

在MDN,@media上,发掘众多值都足以做剖断的。宽,高,宽高比,颜色(那么些是点名输出设备各类像素单位的比特值),是或不是横屏或竖屏,还会有众多,能够去MDN看看。

作用域

成效域是程序源代码中定义变量的区域。

功效域规定了什么样寻觅变量,也等于分明当前进行代码对变量的访谈权限。

ECMAScript6事先唯有全局成效域和函数功能域。

JavaScript选拔词法成效域(lexical scoping),也正是静态功效域。

视觉格式化模型

视觉格式化模型(visual formatting model)是用来处理文书档案并将它呈现在视觉媒体上的编写制定,它也是CSS中的多个概念。

视觉格式化模型定义了盒(Box)的改换,盒主要归纳了块盒、行内盒、无名盒(没盛名字无法被增选器选中的盒)以及部分试验性的盒(今后只怕抬高到专门的学业中)。盒的花色由display属性决定。

至于小编:winty

亚洲必赢登录 8

前面一个程序员,前端爱好者。博客: 个人主页 · 作者的稿子 · 1 ·  

亚洲必赢登录 9

React + Redux

媒体类型

@meida还能依照媒体类型实行断点。

  • all,全数设施
  • print,打印
  • screen,彩色的计算机显示屏
  • speech,不知道怎么着来的。

静态成效域与动态功效域

因为运用词法作用域,函数的效能域在函数定义的时候就决定了。

与词法成效域相对的是动态成效域,函数的作用域在函数调用的时候才决定。

让大家认真看个例证就会知道之间的界别:

var value = 1; function foo() { console.log(value); } function bar() { var value = 2; foo(); } bar();

1
2
3
4
5
6
7
8
9
10
11
12
var value = 1;
 
function foo() {
    console.log(value);
}
 
function bar() {
    var value = 2;
    foo();
}
 
bar();

当使用静态成效域时,执行foo函数,先从foo函数内部查找是不是有一对变量value,若无,就依赖书写的岗位,查找上边一层的代码,在那边是大局成效域,也便是value等于1,所以最后会打印1

当使用动态功用域时,实施foo函数,照旧是从foo函数内部查找是不是有一对变量value。若无,就从调用函数的成效域,也正是bar函数内部查找value变量,所以最后会打字与印刷2

块盒(block box)

块盒有以下特征:

  • 当成分的CSS属性displayblocklist-item或 table时,它是块级元素block-level;
  • 视觉上显示为块,竖直排列;
  • 块级盒参加(块格式化上下文);
  • 各样块级成分起码生成一个块级盒,称为重要块级盒(principal block-level box)。一些要素,举例<li>,生成额外的盒来放置项指标识,可是比非常多成分只生成一个十分重要块级盒。

有如何优势?

React 和 Redux 的最大优势在于它们相对简单和注意。做一件事情并把它做好是非常不便的,但那五个库都很实用地完结了它们的靶子。就算对于有个别状态容器方法也许是表面包车型地铁,但大多开拓人士还能够轻松驾驭概念,并问询单向数据类别布局的利润,简化大批量的客商分界面应用程序。

关键字

@media (max-width:1000px){ div{background:blue;} } @media (min-width:1000px) and (max-width:1150px){ div{background: yellow;} } @media only screen and (max-width:1150px){ div{border:solid 1px;} } @media not print and (max-width:1150px){ div{border-radius:50%;} }

1
2
3
4
5
6
7
8
9
10
11
12
@media (max-width:1000px){
    div{background:blue;}
}
@media (min-width:1000px) and (max-width:1150px){
    div{background: yellow;}
}
@media only screen and (max-width:1150px){
    div{border:solid 1px;}
}
@media not print and (max-width:1150px){
    div{border-radius:50%;}
}
  • and,正是‘和’的情趣,前后多少个规范皆是毕时
  • only,唯一
  • not,除外

上面4个@media,分别的功用是:

  1. 当浏览器宽度低于一千px时
  2. 当浏览器宽度大于1000px 和 小于1150px时
  3. 当在显示器上海展览中心示 和 宽度小于1150px时
  4. 除开在打字与印刷上显得外 和 宽度小于1150px时

动态作用域

恐怕你会奇异什么语言是动态效用域?

bash正是动态成效域,不相信的话,把上边包车型客车脚本存成例如scope.bash,然后步向相应的目录,用命令行推行bash ./scope.bash,看看打字与印刷的值是多少

value=1 function foo () { echo $value; } function bar () { local value=2; foo; } bar

1
2
3
4
5
6
7
8
9
value=1
function foo () {
    echo $value;
}
function bar () {
    local value=2;
    foo;
}
bar

以此文件也得以在demos/scope/中找到。

行内盒(inline box)

  • 当成分的CSS属性display的总括值为inlineinline-blockinline-table时,称它为行内级成分;
  • 视觉上它将内容与任何行内级成分排列为多行;规范的如段落内容,有文件(能够有三种格式比如珍视),或图片,都以行内级成分;
  • 行内级成分生成行内级盒(inline-level boxes),参加行内格式化上下文(inline formatting context)。同不常间插足生成行内格式化上下文的行内级盒称为行内盒(inline boxes)。全体display:inline的非替换到分生成的盒是行内盒;
  • 不参预生成行内格式化上下文的行内级盒称为原子行内级盒(atomic inline-level boxes)。这个盒由可替换行内成分,或 display 值为 inline-block 或inline-table亚洲必赢登录, 的要素生成,不可能拆分成多少个盒;

本文由亚洲必赢登录发布于亚洲必赢app,转载请注明出处:框架优瑕玷相比亚洲必赢登录:,js完成原生js拖

关键词:

上一篇:写二个区块链,前端常见跨域技术方案

下一篇:没有了