前后端差异更小了 |
您所在的位置：网站首页 › fakeapp21 › 前后端差异更小了 |
前后端差异更小了
2015年6月，ES6正式发布。至今一年多的时间内，各个浏览器也对支持ES6做出了很大的改善，所以同学们无需顾忌你写代码的浏览器不认识~ 这么久的东西一定早有大神剖析过，今天我们以一个后端菜鸟的视角重新解读下ES6加入的新语法。 首先很开心，ES6对class（类）的支持上升到了一个新高度，允许构造和继承，新语法看上来是这样的： //继承 class parent { constructor(par) { this.Name = par; console.log('[父类的构造方法 ' + this.Name + ']'); } sayHello() { console.log('父类的sayHello方法 Hello ' + this.Name); } } class child extends parent { constructor(name) { super('[子类调用父类的构造 ' + name + ']'); } sayGoodBye() { console.log('子类的sayGoobBue方法 GoodBye ' + this.Name); } } //调用var a = new parent('Es6');a.sayHello();var b = new child('Max');b.sayHello();b.sayGoodByr();有没有被惊艳到？（可这的确是个Js文件），运行后的效果是这样的：
和后端一样，子类继承父类需要使用关键字extends，继承后，可以使用关键字super调用父类属性。 并且我发现此处的this在被继承后也被子类一并带入，也就是说：this的作用域将会被向下传递。（请参照运行结果最后一行。） 上面是class（类）的继承，有了继承，我们在构建Js代码时，就会获得更强大的能力（可扩展、易维护、易阅读等）。 可能有些同学会说了：我根本不习惯这样写，感觉都不像Js了啊喂！ 没关系，ES6怎么会忘记我们的对象字面量呢？继承当然也会出现在对象字面量的应用中： var Es6Parent = { cons(mess) { console.log('原型Es6Parent的cons方法' + mess); } } var Es6Child = { //设置原型为 Es6Parent ,相当于继承 __proto__: Es6Parent, work() { console.log('下层Es6Child的work方法 I\'m very busy!'); } } //调用 Es6Parent.cons('原型cons方法'); Es6Child.cons('下级调用上层原型的方法'); Es6Child.work();运行结果如下：
设置的方式也超简单：使用关键字'__proto__'设置原型即可（只不过是给原型链换了种叫法而已嘛） 下面介绍一些简单实用的语法糖，首先是方便的参数设置： var Name = 'Max'; console.log(`我是很方便带参数的的波浪符${Name}`);重点是${}，它可以直接在字符串中带入参数（拼接方便很多有木有），但是需要和波浪符（`）搭配使用才有效哦~ 接下来是...语法，当它出现在形参列表内，代表不定量参数： function show(...all) { all.forEach(function (i, v) { console.log(`不定量参数的值:${v}`); }, all); } //调用show(1,2,3,4,5,6);运行结果如下：
定义的时候是不是省力很多呢？还有更好用的，当...出现在实参列表内，它将允许直接传入数组（而不是使用apply）： function sayHi(name, age, sex) { console.log(`大家好，我是${name}，今年${age}岁，我是${sex}生。`); } //调用 var arr = ['小明', 18, '男']; sayHi(...arr);运行结果如下：
定义sayHi函数时，写了3个参数，调用时使用...传入数组时，它将从0下标开始依次顺序匹配参数。 我们在工作中，经常使用回调函数来完成某些操作，但是每次回调都要写个完整的funciton（好麻烦的说），ES6引入了lambda表达式，大大优化了这一操作： function callBack(back) { back(); } //两种调用方式对比 callBack(function () { console.log('我是旧的调用方式'); }); callBack(()=>console.log('我是lambda调用方式'));运行结果如下：
使用了lambda以后的函数传入方式是不是更优雅呢？如果比较萌比，那就再来一个对象字面量版本的： var show_msg = (name, job) => { console.log(`大家好，我叫${name}，是一名${job}`) }; //调用 show_msg('暮城','软件攻城狮');运行结果如下：
现在大家应该已经很清楚了：()=>语法呢，=>前面是参数列表，后面是方法体。以后看到类似的语法可别晕~ 语法糖还有很多，我先说这么多，因为下面要说更重要的：新数据类型和监听的实现。 Es6新增了map，set，以及weakMap、weakSet四种类型。 它们都有什么差异呢？先说说map：map以key-value的方式存储，并且在map内所有的键都是唯一的，来看被for in 遍历后的结果： var par1 = 'key_1'; var par2 = 'key_2'; var testMap = new Map(); testMap.set(par1, '第一个值'); testMap.set(par2, '第二个值'); testMap.set(par1, '第三个值'); for(i of testMap) { console.log(i); }
可以看到第三个值将第一个值顶替掉而不是共存，原因就是第一个值和第三个值键相同。 set和map的差别就在于，它是以value的方式存储，而且同样不允许重复值出现： var par11 = 'value_1'; var par22 = 'value_2'; var testSet = new Set(); testSet.add(par11); testSet.add(par22); testSet.add(par11); for(i of testSet) { console.log(i); }
至于WeakMap和WeakSet，使用方式都一样，只是这两种类型的键都采用了弱引用，即：作为属性键的对象如果没有其他地方引用时自动回收（自动释放）。 此处就不多做解释，不过我推荐大家使用WeakMap和WeakSet。 现在，我们终于说到了监听器（监听器可是重头戏） 监听器是很有意思的东西，它给予了我们极大的便利，这一点在实现MVVM模型的操作时尤为重要，ES6中的监听看上去大概是这样的： //被监听的对象 var ob = { name: 'Max', like: 'women' }; //触发监听时的程序 var pro = { set: function (cagObj, cagKey, cagValue) { console.log(`${cagObj[cagKey]}变为了${cagValue}`); cagObj[cagKey] = cagValue; } } ob = new Proxy(ob, pro); ob.like = 'man';set内定义的function将会在监听对象发生改变时自动触发，参数列表内的3个值也是默认定义的，它们依次是：被修改的对象、该对象的键、该对象的值。 需要注意的是如果你为某元素设定的监听器触发后，它原本的修改进程会被阻止（如果你不进行这一步的话），所以需要我们显式的去修改才可。 运行效果如下：
拥有了这些特性，我们自己想写一个类似于VUE的数据框架也变得简单了许多。 另外，ES6还更新了很多命名空间下的函数（如：math），这里就不一一罗列（写不完并且网上大把）。 最后，ES6的推出让我直观感觉到前后端差距进一步缩小，希望有一天Js可以不借助后端完成数据交互~（不要吐槽我学的晚） 前后端差异更小了——浅谈ES(ECMAScript)6的更多相关文章 小E浅谈丨区块链治理真的是一个设计问题吗？在2018年6月28日Zcon0论坛上,“区块链治理”这个话题掀起了大神们对未来区块链治理和区块链发展的一系列的畅想. (从左至右,分别为:Valkenburgh,Zooko,Jill, Vitali ... 小dai浅谈通信网络（一）——引子说起通信网络,首先来看一个场景: 场景模式: 小明和小刚在闹市碰面. 小明对小刚大声喊道:"小刚,你好啊!" 小刚摇手答到:"你好,小明!" 就这么几句简单的话 ... express+vue-cli实现前后端分离交互小例准备工作 1.Express 应用生成器 npm install express-generator -g 2.vue-cli手脚架 npm install -g vue-cli 3.项目结构 . ├ ... 浅谈Hybrid技术的设计与实现第三弹——落地篇前言 接上文:(阅读本文前,建议阅读前两篇文章先) 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 根据之前的介绍,大家对前端与Native的交互应该有一些简单的认识了,很多 ... 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ... 关于前后端同构，我的一点思路和心得（vue、nodejs、react、模版、amd）最近1年多,前后端同构慢慢变成一个流行词,也许很多人还停留在前后端分离的最佳实践道路上,但实际上又有一批人已经从简单的服务端渲染走向探索最佳前后端同构方案的路上了.不过,我只是膜拜后者的过客. 虽然大 ... 浅谈通信网络（三）——TCP/IP协议简介 Transmission Control Protocol/Internet Protocol的简写,中译名为传输控制协议/因特网互联协议,又名网络通讯协议,是Internet最基本的协议.In ... 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史---新内容开始--- 番外 大家周一好呀,又是元气满满的一个周一呀!感谢大家在周一这个着急改Bug的黄金时期,抽出时间来看我的博文哈哈哈,时间真快,已经到第十四篇博文了,也很顺顺(跌跌)利利 (撞撞 ... [开源] angularjs + Asp.net 前后端分离解决方案本文版权归 博客园 萧秦 所有,此处为技术收藏,如有再转,请于篇头明显位置标明原创作者及出处,以示尊重! 作者:萧秦 原文:http://www.cnblogs.com/xqin/p/4862849. ... 随机推荐 Mac OS X 如何设置默认浏览器有时候我们不希望在 Mac 中点击任何连接都打开的是 Safari,这需要修改默认浏览器设置,在 Mac OS X 中如何设置默认浏览器呢? 打开 Safari 的偏好设置,在「通用」选项卡中有「默认 ... Java开发之I/O读取文件实例详解在java开发或者android开发中,读取文件是不可避免的,以下对java开发中读取文件做了归纳和详解: 1.按字节读取文件内容2.按字符读取文件内容3.按行读取文件内容 4.随机读取文件内容 pa ... Android（java）学习笔记150：为什么局部内部类只能访问外部类中的 final型的常量为什么匿名内部类参数必须为final类型: 1) 从程序设计语言的理论上:局部内部类(即:定义在方法中的内部类),由于本身就是在方法内部(可出现在形式参数定义处或者方法体处),因而访问方法中的局部变 ... c语言入门经典必背18个程序1 . /* 输出 9*9 口诀.共 9 行 9 列, i 控制行, j 控制列. */ #include "stdio.h" main() {int i,j,result; fo ... VOL.2 IE6,7,8（windows vista/7 x86/x64 ）单文件版三连发，欢迎大家分享在上期 VOL.1 利用vmware ThinApp 制作非XP下可以运行的IE6 [无插件版](windows vista/7/8 x86/x64 )中,简要介绍了如何利用vmware Thina ... Redis与Memcached对比Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富,有字符串.链表.集合和有序集合.支持在服务器端计算集合的并,交和补集等.还支持多 ... C#后台验证身份证号码的一个方法简单的调用了正则表达式进行简单的验证,记下来留着以后备用 if ((!Regex.IsMatch(txtID.Text, @"^(^\d{15}$|^\d{18}$|^\d{17}(\d|X ... sql语句中left join、 inner join的使用转自:http://blog.csdn.net/winter3125/article/details/5032871 table a(id, type): id type ----------- ... css-position的相关用法简介 position用于固定位置,是尤为重要的一个属性 其值可以为: static: 默认值,忽略top, bottom, left, right 或者 z-index 声明 relative: 相 ... java 静态方法在使用java的时候,你会发现,有些对象,需要new ,有些则不需要时,比如Math类 ); 如果你查看源码就会大致的发现,里面的属性和方法都是静态的: public static double si ... |
【本文地址】
今日新闻 |
推荐新闻 |