未加星标

Vue.js and Functional Front-End

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

Hello my fellow developer, welcome to yet another article. According to the title, we are going to talk about some pretty interesting stuff here. Vue.js puts the focus on declarative components with templates, which is great, but also it supports the JSX.

Ok, let us start by quickly answering what is Functional Programming and JSX.

Functional Programming

Unlike the Object-Oriented approach which guides the developer to decompose the program into objects, functional approach encourages the decomposition into a small functions which are later used to form an higher level program.

In computer science, functional programming is a programming paradigm, a style of building the structure and elements of computer programs, that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data

The text above is quoted from the official wiki page about Functional Programming, but what that means exactly?

Well, in short, it means that we are creating functions in a way that they do not depend or can alter any external state, which leads us to another observation that, for a given input, they will always return the same output.

In a bit longer term, there are two main assets we need to understand:

Pure Function Immutability Pure Function

This is what makes functional programming so special. Pure function, is like any other function, a building block of our application. The special part of it is that its output only depends on the given input. This means that we can invoke our function as many times as we want, but the output will always be the same as it was in the previous call if we pass in the same parameters.

Immutability

Immutable objects are objects that cannot be changed after they have been created. In simple term, we cannot change our object value. For these objects we always need to create a new instance when we want to change any of its properties.

Example of primitive immutable type is the String type. Even though it looks like it is mutable when we are using it, it's not, because every time when we re-assign a value to our String a new object of type String is created to which our new value is assigned.

JSX

A quick google search will tell us that JSX stands for javascript XML. This enables us to write an XML like code within our JavaScript files. Sounds cool, but as I mentioned in my previous post (see it later, now continue reading) it moves us further away from the standard web development. Anyway, we should acknowledge that JSX is pretty powerful.

Now, after these short explanations we can dive into the Vue.js way of doing things by creating a functional component example.

Let us start by defining a requirement where functional component might be useful. Imagine that we want to display a different area based on the user role. For example, we can have users in Admin, Normal and Guest roles.

Regular template would look something like this:

<script type="text/x-template" id="area-template"> <div v-if="role === 'Admin'"> Admin user area </div> <div v-else-if="role === 'Normal'"> Normal user area </div> <div v-else-if="role === 'Guest'"> Guest user area </div> </script>

More roles would result in more if-else statements. This is exactly what we want to avoid with our functional component. The following code illustrates it:

Vue.component('example-component', { props: { role: { type: String, required: true } }, render: function (createElement) { var text = this.role + ' user area'; return createElement('div', text); } });

As you can see, our component doesn't have a template property, but instead we've introduced a render function. This function is responsible of the rendering of our component. It will always return the same output, which is, according to Vue.js documentation site, called createNodeDescription . It contains information describing to Vue what kind of node it should render on the page.

Of course, for our example to work, we need to create a new Vue instance, as well as an element on the page:

new Vue({ el: '#greet', data: { admin: 'Admin', normal: 'Normal', guest: 'Guest' } }); <main id="greet"> <example-component :role=admin></example-component> <example-component :role=normal></example-component> <example-component :role=guest></example-component> </main>

The code above will display three div elements on our page with the corresponding text created within our render function.

I hope you've enjoyed reading this short but, I hope, intuitive article and that it will get you started with functional way of building apps.

That would be it for now guys and girls. Thank you for reading and best of luck.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Vue.js and Functional Front-End
本站链接:https://www.codesec.net/view/611769.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(10)