Home Web Front-end JS Tutorial Function sharing that enables JavaScript to break apart

Function sharing that enables JavaScript to break apart

Feb 09, 2018 pm 01:37 PM
javascript js share

This article mainly introduces you to the use of functional programming to break away from JavaScript. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

About DHTML

DHTML is the abbreviation of Dynamic HTML, which is dynamic HTML (an application under the Standard Universal Markup Language), which is relatively traditional static HTML. A concept of making web pages in Chinese. The so-called Dynamic HTML (DHTML for short) is not actually a new language. It is just an integration of HTML, CSS and client-side scripts, that is, a page includes html+css+javascript (or other client-side scripts). ), where css and client scripts are written directly on the page instead of linking to related files.

At that time, JavaScript evolved slowly and was mainly used in form validation. Therefore, it was not as popular as it is today and did not attract much attention. It can be said to be just an icing on the cake. You need to ensure that your application can still be used normally after JavaScript is disabled in the browser. Later, frameworks appeared one after another: jQuery, Knockout, Angular, React, Vue, etc.

Similarly, JavaScript is also evolving at an accelerated pace. We have only been using ES6 for a while, and now people have almost skipped ES7 and started talking about ES8.

And, we have many alternatives, such as TypeScript, CoffeScript, ClojureScript, ELM, etc.

We have been overwhelmed by too many frameworks and languages, and it is difficult to keep track of and master them all.

Wrong Route

As JavaScript matured, the concepts of object-oriented programming (OOP) filtered in, and I used to love it.

I started trying all the different ways to create classes, and I finally got to use inheritance correctly. I said to myself: JavaScript is starting to really look like a language!

However, it was not until many years later that I discovered that OOP is the worst design introduced by JavaScript!

I try to bring my understanding of C# to JavaScript. I was full of expectations at first, but later I found it was too complicated and brain-burning.

This is mainly because JavaScript’s prototypal inheritance is different from C#. I am used to writing elegant code like console.log(this) every day. But what now? If I accidentally don't follow the rules, it will give me nightmares. Private methods and private values ​​must have an underscore in front of their names, and even closures must be used to ensure privacy.

Therefore, not only OOP has caused many problems, but also the addition of OOP has brought many new problems.

Functional Programming

I didn’t understand it at first. I can read and understand this functional code, but I don't know why! Eventually, I forced myself to learn it.

Functional languages ​​gave me a new perspective and allowed me to look at programming in a completely different way.

It will feel unnatural at first and it will take time to adapt. All definitions are based on functions, the values ​​cannot be changed, and there is no state. I use functional thinking to solve problems. Because I was unfamiliar with it, it took me longer to learn. Gradually, I became proficient in using functional methods to program. And, I also know the underlying meaning of all code written this way.

My code is more concise and easy to reuse. Gradually, the language features I used to use disappeared from the code, and my code looked like it was written in another language. Am I still using JavaScript?

1. No longer use var

I replaced var with const. Through functional design, my functions are pure. The value of a variable will not be changed again, also to ensure that it will not be operated on.

I will check the code to ensure that every var, even let, and all declarations use const.

2. There is no for loop

When learning a programming language, we will learn the for loop at the beginning. But since learning functional programming, I changed the for loop to use filter, map and reduce. For those that require some extra calculations, I would use recursion or a third-party library like lazy.js.

There is no for loop in my code now. If you see it, tell me and I will eliminate it.

3. if can also be simplified

I started to stop writing large chunks of code inside if. I extracted the logic inside and put it in a separate function. In this way, we can simplify if using the ternary operator (a?b:c).

There are almost no if statements in my code nowadays. To make it easier for other developers to understand my code, I rarely use it.

4. Say goodbye to switch

Similarly, I don’t like to use switch, but I am looking for a functional way of writing.

I also like to use Ramda's cond operator instead of swtich.

5. Don’t worry about this anymore

Yes, you heard it right! We can also eliminate this completely.

Functional JavaScript allows you to completely abandon the use of annoying this
Now there are only data and functions, and even data is just a special expression of the function, you no longer need this. I started to understand objects as states and functions in functional languages. I don't even need to bind state or functions to objects, like in OOP.

Object-oriented design is not necessary

Looking back now, I find that the complexity brought by object-oriented programming is really unnecessary. I can implement the same functionality and accomplish the same tasks using functional languages. Moreover, the code is lighter because there is no need to pass these complex objects around. There are only data and functions, and because functions are not bound to objects, they are easier to reuse. I no longer need to worry about all the problems that traditional prototypal inheritance brings. JavaScript is not designed well.

The lack of private, public, internal or protected access controllers for JavaScript is no longer an issue. Access controllers are designed to solve problems due to the introduction of object-oriented programming. In functional JavaScript, these problems no longer exist.

Summary

My code looks completely different now. It contains a lot of pure functions, which I made into different ES6 modules. These functions can be used to build more complex functions. A large number of functions are very simple one-line lambda expressions.

Now my thinking about software has changed: the input is a data stream, and then the program acts on the data stream to perform various operations on the data, and then returns new data.

The impact of functional design on programming languages ​​is ubiquitous. LINQ in C# is the best example. Similarly, Java 8 also introduces functional language features.

Related recommendations:

Detailed introduction to XML behavior (behavior)-new DHTML?

The above is the detailed content of Function sharing that enables JavaScript to break apart. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to share Quark Netdisk to Baidu Netdisk? How to share Quark Netdisk to Baidu Netdisk? Mar 14, 2024 pm 04:40 PM

Quark Netdisk and Baidu Netdisk are very convenient storage tools. Many users are asking whether these two softwares are interoperable? How to share Quark Netdisk to Baidu Netdisk? Let this site introduce to users in detail how to save Quark network disk files to Baidu network disk. How to save files from Quark Network Disk to Baidu Network Disk Method 1. If you want to know how to transfer files from Quark Network Disk to Baidu Network Disk, first download the files that need to be saved on Quark Network Disk, and then open the Baidu Network Disk client. , select the folder where the compressed file is to be saved, and double-click to open the folder. 2. After opening the folder, click "Upload" in the upper left corner of the window. 3. Find the compressed file that needs to be uploaded on your computer and click to select it.

How to share NetEase Cloud Music to WeChat Moments_Tutorial on sharing NetEase Cloud Music to WeChat Moments How to share NetEase Cloud Music to WeChat Moments_Tutorial on sharing NetEase Cloud Music to WeChat Moments Mar 25, 2024 am 11:41 AM

1. First, we enter NetEase Cloud Music, and then click on the software homepage interface to enter the song playback interface. 2. Then in the song playback interface, find the sharing function button in the upper right corner, as shown in the red box in the figure below, click to select the sharing channel; in the sharing channel, click the "Share to" option at the bottom, and then select the first "WeChat Moments" allows you to share content to WeChat Moments.

Recommended: Excellent JS open source face detection and recognition project Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages ​​and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

How to share files with friends on Baidu Netdisk How to share files with friends on Baidu Netdisk Mar 25, 2024 pm 06:52 PM

Recently, Baidu Netdisk Android client has ushered in a new version 8.0.0. This version not only brings many changes, but also adds many practical functions. Among them, the most eye-catching is the enhancement of the folder sharing function. Now, users can easily invite friends to join and share important files in work and life, achieving more convenient collaboration and sharing. So how do you share the files you need to share with your friends? Below, the editor of this site will give you a detailed introduction. I hope it can help you! 1) Open Baidu Cloud APP, first click to select the relevant folder on the homepage, and then click the [...] icon in the upper right corner of the interface; (as shown below) 2) Then click [+] in the "Shared Members" column 】, and finally check all

Mango tv member account sharing 2023 Mango tv member account sharing 2023 Feb 07, 2024 pm 02:27 PM

Mango TV has various types of movies, TV series, variety shows and other resources, and users can freely choose to watch them. Mango TV members can not only watch all VIP dramas, but also set the highest definition picture quality to help users watch dramas happily. Below, the editor will bring you some free Mango TV membership accounts for users to use, hurry up and take a look Take a look. Mango TV latest member account free sharing 2023: Note: These are the latest member accounts collected, you can log in directly and use them, do not change the password at will. Account number: 13842025699 Password: qds373 Account number: 15804882888 Password: evr6982 Account number: 13330925667 Password: jgqae Account number: 1703

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts Dec 18, 2023 pm 03:39 PM

With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese

Solve the problem that Discuz WeChat sharing cannot be displayed Solve the problem that Discuz WeChat sharing cannot be displayed Mar 09, 2024 pm 03:39 PM

Title: To solve the problem that Discuz WeChat shares cannot be displayed, specific code examples are needed. With the development of the mobile Internet, WeChat has become an indispensable part of people's daily lives. In website development, in order to improve user experience and expand website exposure, many websites will integrate WeChat sharing functions, allowing users to easily share website content to Moments or WeChat groups. However, sometimes when using open source forum systems such as Discuz, you will encounter the problem that WeChat shares cannot be displayed, which brings certain difficulties to the user experience.

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

See all articles