262 lines
24 KiB
PHP
262 lines
24 KiB
PHP
<?PHP
|
|
|
|
require_once "../admin/db/config.php";
|
|
$ref_id = $_GET['job'];
|
|
$selectCategory = $connection->query("SELECT * FROM `blogs_data` WHERE blog_ref_id='$blog_ref_id'");
|
|
if ($selectCategory) {
|
|
if($selectCategory->num_rows > 0){
|
|
$data = $selectCategory->fetch_object();
|
|
}
|
|
}
|
|
?>
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<?PHP include './includes/links.php'; ?>
|
|
<title>Tech4Biz Solutions - Excellence Guaranteed</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="content-container">
|
|
<div class="ss-inner">
|
|
<?PHP include './includes/spinner.php'; ?>
|
|
<?PHP include './includes/header.php'; ?>
|
|
<div class="d-flex align-items-center">
|
|
<div class="details-header-image">
|
|
<img src="assets/images/JavaScript-Data-Patterns.jpg" alt="JavaScript-Data-Patterns">
|
|
</div>
|
|
<div class="details-header-text-div">
|
|
<div class="blog-category details-category-div">
|
|
<a href="#" class="blog-category-tab">Engineering</a>
|
|
<a href="#" class="blog-category-tab">Technology</a>
|
|
</div>
|
|
<p class="blog-read-time">10 Minute Read</p>
|
|
<h3 class="blog-details-title">Detailed Guide Line to JavaScript Data Patterns</h3>
|
|
<div class="blog-social-share-div">
|
|
<div class="blog-share-icon blog-share-icon-black" onclick="shareIconOpen()">
|
|
<svg id="Group_59" data-name="Group 59" xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17">
|
|
<circle id="Ellipse_48" data-name="Ellipse 48" cx="2.5" cy="2.5" r="2.5" transform="translate(11)"/>
|
|
<circle id="Ellipse_49" data-name="Ellipse 49" cx="2.5" cy="2.5" r="2.5" transform="translate(11 12)"/>
|
|
<circle id="Ellipse_50" data-name="Ellipse 50" cx="2.5" cy="2.5" r="2.5" transform="translate(0 6)"/>
|
|
<path id="Path_50" data-name="Path 50" d="M2.5,8.5l11-6m-11,6,11,6" stroke="#000" stroke-width="1"/>
|
|
</svg>
|
|
</div>
|
|
<div class="blog-social-main-div" id="socialIcon">
|
|
<a href="#" class="blog-social-icon blog-social-icon-details">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="8.308" height="16.011" viewBox="0 0 8.308 16.011">
|
|
<path id="Path_53" data-name="Path 53" d="M9.016.865A18.843,18.843,0,0,0,6.823.75,3.431,3.431,0,0,0,3.16,4.51v2.1H.708V9.452H3.16v7.3H6.1v-7.3H8.544l.375-2.846H6.1V4.788c0-.817.221-1.385,1.4-1.385H9.01V.865Z" transform="translate(-0.708 -0.741)"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="blog-social-icon blog-social-icon-details">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="17.243" height="14.004" viewBox="0 0 17.243 14.004">
|
|
<path id="Path_52" data-name="Path 52" d="M17.858,1.759a7.083,7.083,0,0,1-2.034.547A3.523,3.523,0,0,0,17.377.359a6.955,6.955,0,0,1-2.242.853A3.536,3.536,0,0,0,9.021,3.63a3.987,3.987,0,0,0,.087.809A10.042,10.042,0,0,1,1.824.742,3.538,3.538,0,0,0,2.917,5.467a3.558,3.558,0,0,1-1.6-.448v.044A3.533,3.533,0,0,0,4.153,8.53a3.735,3.735,0,0,1-.93.12,4.454,4.454,0,0,1-.667-.05,3.539,3.539,0,0,0,3.3,2.45,7.075,7.075,0,0,1-4.386,1.509,7.3,7.3,0,0,1-.853-.044A9.983,9.983,0,0,0,6.046,14.1,9.983,9.983,0,0,0,16.1,4.045c0-.153,0-.306-.011-.459a7.6,7.6,0,0,0,1.772-1.827Z" transform="translate(-0.618 -0.096)"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="blog-social-icon blog-social-icon-details">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.297" viewBox="0 0 16 15.297">
|
|
<path id="Path_51" data-name="Path 51" d="M4.356,5.36H.918V15.683H4.356Zm.219-3.188A1.773,1.773,0,0,0,2.658.392,1.791,1.791,0,0,0,.72,2.173a1.772,1.772,0,0,0,1.9,1.781h.021A1.779,1.779,0,0,0,4.575,2.173Zm5.1,4.655V5.36H6.252s.042.969,0,10.323H9.679V9.923a2.584,2.584,0,0,1,.115-.844,1.879,1.879,0,0,1,1.76-1.25c1.24,0,1.74.948,1.74,2.333v5.521H16.72V9.767c0-3.167-1.687-4.646-3.948-4.646A3.392,3.392,0,0,0,9.679,6.828Z" transform="translate(-0.72 -0.386)"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="blog-social-icon blog-social-icon-details">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15.572" height="15.56" viewBox="0 0 15.572 15.56">
|
|
<g id="Group_30" data-name="Group 30" transform="translate(0 -0.006)">
|
|
<path id="Path_54" data-name="Path 54" d="M2.308,10.95a2.308,2.308,0,1,0,2.309,2.31,2.308,2.308,0,0,0-2.309-2.31Z" fill-rule="evenodd"/>
|
|
<path id="Path_55" data-name="Path 55" d="M.24,5.089a.241.241,0,0,0-.24.24v2.93a.24.24,0,0,0,.24.24,6.834,6.834,0,0,1,6.826,6.826.24.24,0,0,0,.24.24h2.941a.241.241,0,0,0,.242-.24l-.012-.075A10.251,10.251,0,0,0,.24,5.089Z" fill-rule="evenodd"/>
|
|
<path id="Path_56" data-name="Path 56" d="M15.559,15.25A15.339,15.339,0,0,0,.24.006.241.241,0,0,0,0,.248V3.263a.241.241,0,0,0,.24.24A11.835,11.835,0,0,1,12.062,15.325a.24.24,0,0,0,.239.24H15.33a.244.244,0,0,0,.242-.24Z" fill-rule="evenodd"/>
|
|
</g>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="profile-blog-details-bg">
|
|
<div class="container">
|
|
<div class="profile-flex">
|
|
<div class="profile-blog-image">
|
|
<img src="https://i.pravatar.cc/1500?img=12" alt="Profile">
|
|
</div>
|
|
<div class="blog-text-details">
|
|
<div class="name-status-profile">
|
|
<p class="blog-by-name">By <span>Bhadresh Janjmera</span></p>
|
|
<p class="blog-by-status-text">
|
|
<span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="42.217" height="42.217" viewBox="0 0 42.217 42.217">
|
|
<g id="Group_60" data-name="Group 60" transform="translate(0 0)">
|
|
<rect id="Rectangle_39" data-name="Rectangle 39" width="29.852" height="29.852" transform="translate(0 21.109) rotate(-45)" fill="#05947c"/>
|
|
<rect id="Rectangle_40" data-name="Rectangle 40" width="29.852" height="29.852" transform="translate(6.184 6.184)" fill="#05947c"/>
|
|
<circle id="Ellipse_99" data-name="Ellipse 99" cx="14.926" cy="14.926" r="14.926" transform="translate(6.184 6.184)" fill="#05947c"/>
|
|
<path id="Path_122" data-name="Path 122" d="M18.49,5.643l-7.266,7.3L7.616,9.315,5.055,11.888l3.607,3.623,2.561,2.57L21.05,8.213Z" transform="translate(8.283 9.247)" fill="#fff" fill-rule="evenodd"/>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
<span>Verified Expert</span>
|
|
</p>
|
|
</div>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta quo facilis blanditiis! Ex alias quibusdam sequi, enim hic architecto blanditiis aut facere ad, earum quod delectus et cum. Provident, ipsa.</p>
|
|
<p class="expertise-title">EXPERTISE</p>
|
|
<div>
|
|
<a href="#" class="language-expertise">Angular</a>
|
|
<a href="#" class="language-expertise">node JS</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="blog-style-area pb-70">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="blog-style-card">
|
|
<div class="content">
|
|
<!-- <h3 class="blog-main-title">Detailed Guide Line to JavaScript Data Patterns</h3> -->
|
|
<p class="blog-description">Every programming language has a large number of community-created solutions. Because of the combined expertise of numerous builders, layout styles are extremely useful. They help us write code that is optimized and solves our problems. Another significant advantage is that unique builders can easily comprehend any code because they are so common.</p>
|
|
<p class="blog-description">Although JavaScript is now the most popular language for web development, it began as merely a "glue" between HTML elements. JavaScript was created as a scripting language for the Netscape browser. By that time, all browsers had to do was render static HTML pages; however, the introduction of JavaScript sparked a battle between the two industry titans of the time, Netscape and Microsoft.</p>
|
|
<p class="blog-description">JavaScript has become known as the "web language" as its popularity has skyrocketed since the release of Node.js. The "JavaScript everywhere" paradigm unifies all web applications development cantered on JavaScript. This applies to both client-side and server-side development. JavaScript code can now be executed outside of a web browser thanks to the release of Node.JS, the open-source, cross-platform, back-end JavaScript runtime environment. </p>
|
|
<p class="blog-description">Because of the "JavaScript everywhere" paradigm, which integrates everything in web application development around a single programming language, rather than having a separate language for server-side and client-side scripts, JavaScript is known as the language of the Web.</p>
|
|
<div class="patterns-image">
|
|
<img src="assets/images/JavaScript-Data-Patterns.jpg" alt="JavaScript-Data-Patterns">
|
|
</div>
|
|
<p class="blog-sub-title mb-0"><b>What are Design Patterns?</b></p>
|
|
<p class="blog-description">Design patterns are commonly used solutions to common software development problems.</p>
|
|
<p class="blog-sub-title mb-0"><b>Proto-pattern</b></p>
|
|
<p class="blog-description mb-0">How is a sample made? Assume you've identified a common problem and have y unique solution for it, one that hasn't yet been documented everywhere, not even on Stack Overflow. You use this solution every time you come across this problem, confident that it is far reusable and that everyone in the improvement network will benefit from it.</p>
|
|
<p class="blog-description">Will your prompt response become a pattern? No, thankfully. It is common for a person who follows proper improvement practices to confuse something that appears to be a pattern with something that is a pattern.</p>
|
|
<p class="blog-sub-title mb-0"><b>Anti-pattern</b></p>
|
|
<p class="blog-description mb-0">An anti-pattern represents practices in the same way that a design pattern represents a going practice. The Object prototype is a prime example of an anti-sample in JavaScript. Almost all objects in JavaScript inherit from Object (remember, JavaScript uses prototype-based inheritance), so consider that you have modified this prototype. The changes to the object may be visible in each item that inherits from it, which could be nearly all JavaScript gadgets. </p>
|
|
<p class="blog-description">Another example is to swap out unfamiliar gadgets. A minor change to a method from an item used throughout the software may cause a large mess; the larger the crew, the larger the mess. You could end up with naming conflicts, incompatible implementations, and a maintenance nightmare. With success, your checks could prevent something from happening before it occurs.</p>
|
|
<p class="blog-sub-title mb-0"><b>Examples of Design Patterns</b></p>
|
|
<div class="blog-list-menu">
|
|
<p class="blog-sub-title mb-0 fs-18"><b>1) Module Pattern</b></p>
|
|
<p class="blog-description pl-20">The Module Pattern is one of the important patterns in JavaScript. It is a commonly used Design Patter thatch is used to wrap a set of variables and functions together in a single scope.</p>
|
|
<p class="blog-sub-title mb-0 fs-18"><b>2) Constructor Pattern</b></p>
|
|
<p class="blog-description pl-20">The JavaScript constructor sample let you create more than one times of identical script or plugin.</p>
|
|
<p class="blog-sub-title mb-0 fs-18"><b>3) Singleton Pattern </b></p>
|
|
<p class="blog-description pl-20">Singletons are classes that can be instantiated once and can be accessed globally. This single instance can be shared throughout our application, which makes Singletons great for managing the global state of an application.</p>
|
|
<p class="blog-sub-title mb-0 fs-18"><b>4) Revealing Module Pattern</b></p>
|
|
<p class="blog-description pl-20">The revealing module pattern is a design pattern, which lets you organize your JavaScript code in modules, and gives better code structure. It gives you the power to create public/private variables/methods (using closure) and avoids polluting the global scope</p>
|
|
<p class="blog-sub-title mb-0 fs-18"><b>5) Observer Pattern</b></p>
|
|
<p class="blog-description pl-20 mb-0">The observer pattern defines a one-to-many relationship. When one object updates, it notifies many other objects that it has been updated.</p>
|
|
<p class="blog-description pl-20">The Observer pattern lets you define a subscription mechanism to notify multiple objects about any events that occur with the objects they are observing. Basically, it's like having an event listener on a given object; when that object performs the action we're listening for, we do something.</p>
|
|
<p class="blog-sub-title mb-0 fs-18"><b>6) Prototype Pattern</b></p>
|
|
<p class="blog-description pl-20 mb-0">The Prototype Pattern creates new objects, but rather than creating non-initialized objects it returns objects that are initialized with values it copied from a prototype - or example - object. The Prototype pattern is also referred to as the Properties pattern.</p>
|
|
<p class="blog-description pl-20">The Prototype pattern allows you to create an object using another object as a blueprint, inheriting its properties and methods</p>
|
|
<p class="blog-sub-title mb-0 fs-18"><b>7) Mediator Pattern </b></p>
|
|
<p class="blog-description pl-20">The mediator pattern makes it possible for components to interact with each other through a central point: the mediator. Instead of directly talking to each other, the mediator receives the requests, and sends them forward! In JavaScript, the mediator is often nothing more than an object literal or a function.</p>
|
|
<p class="blog-sub-title mb-0 fs-18"><b>8) Facade Pattern</b></p>
|
|
<p class="blog-description pl-20">The idea of the facade pattern is explained directly in the name. It is just a facade you put in front of some code to make it easier to use. One easy example to look at would be saving a user to a database. You must first validate all the user information, check that the email is not already taken, and then save the user to the database.</p>
|
|
<p class="blog-sub-title mb-0 fs-18"><b>9) Command Pattern</b></p>
|
|
<p class="blog-description pl-20">Decouple methods that execute tasks by sending commands to a commander. With the Command Pattern, we can decouple objects that execute a certain task from the object that calls the method. Let's say we have an online food delivery platform. Users can place, track, and cancel orders.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<div class="side-bar-area">
|
|
<div class="side-bar-widget">
|
|
<h3 class="title">Blog Categories</h3>
|
|
<div class="side-bar-categories">
|
|
<ul>
|
|
<li>
|
|
<div class="line-circle"></div>
|
|
<a href="#">IT Services<span>[70]</span></a>
|
|
</li>
|
|
<li>
|
|
<div class="line-circle"></div>
|
|
<a href="#">Business<span>[24]</span></a>
|
|
</li>
|
|
<li>
|
|
<div class="line-circle"></div>
|
|
<a href="#">Creative Invention<span>[08]</span></a>
|
|
</li>
|
|
<li>
|
|
<div class="line-circle"></div>
|
|
<a href="#">Technology <span>[17]</span></a>
|
|
</li>
|
|
<li>
|
|
<div class="line-circle"></div>
|
|
<a href="#">IT Consulting <span>[20]</span></a>
|
|
</li>
|
|
<li>
|
|
<div class="line-circle"></div>
|
|
<a href="#">Marketing Growth <span>[13]</span></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="trading-title-div">
|
|
<p class="trending-articles-title">Trending Articles</p>
|
|
<div class="blog-category details-category-div">
|
|
<a href="#" class="blog-category-tab">Engineering</a>
|
|
<a href="#" class="blog-category-tab">Technology</a>
|
|
</div>
|
|
<a href="#" class="trending-articles-name">Detailed Guide Line to JavaScript Data Patterns</a>
|
|
</div>
|
|
<div class="side-bar-widget">
|
|
<h3 class="title">See our related talent</h3>
|
|
<ul class="side-bar-widget-tag">
|
|
<li><a href="#">Angular</a></li>
|
|
<li><a href="#">node JS</a></li>
|
|
<li><a href="#">Android</a></li>
|
|
<li><a href="#">App</a></li>
|
|
<li><a href="#">IOS</a></li>
|
|
<li><a href="#">Business</a></li>
|
|
<li><a href="#">Consulting</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="side-bar-widget">
|
|
<h3 class="title">Archive</h3>
|
|
<div class="side-bar-categories">
|
|
<ul>
|
|
<li>
|
|
<div class="line-circle"></div>
|
|
<a href="#">Design<span>[70]</span></a>
|
|
</li>
|
|
<li>
|
|
<div class="line-circle"></div>
|
|
<a href="#">Business<span>[24]</span></a>
|
|
</li>
|
|
<li>
|
|
<div class="line-circle"></div>
|
|
<a href="#">Development<span>[08]</span></a>
|
|
</li>
|
|
<li>
|
|
<div class="line-circle"></div>
|
|
<a href="#">Technology <span>[17]</span></a>
|
|
</li>
|
|
<li>
|
|
<div class="line-circle"></div>
|
|
<a href="#">Startup <span>[20]</span></a>
|
|
</li>
|
|
<li>
|
|
<div class="line-circle"></div>
|
|
<a href="#">Marketing Growth <span>[13]</span></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?PHP include './includes/footer.php'; ?>
|
|
</div>
|
|
</div>
|
|
<?PHP include './includes/scripts.php'; ?>
|
|
<script>
|
|
function shareIconOpen(){
|
|
var element = document.getElementById("socialIcon");
|
|
element.classList.toggle("blog-social-main-div-details");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|