JavaScript開發創建類:向模塊化進軍

2021-01-14 IT168

  【IT168技術】在講解MVC 的本質之前,我們首先給大家補習一下基礎知識,比如JavaScript 的類和事件。只有打下一個堅實的基礎,才能更好地學習、理解更高級的概念。


▲Javascript Web富應用開發圖書推薦

  對於靜態的類來說,JavaScript 對象直接量就已經夠用了,但它對使用繼承和實例來創建經典的類往往更有幫助。有必要強調一下:JavaScript 是基於原型的程式語言,並沒有包含內置類的實現。但通過JavaScript 可以輕易地模擬出經典的類。

  JavaScript 中的類口碑並不太好,因為「不夠JavaScript」而飽受批評。jQuery 並沒有涉及太多架構方法和繼承模式,這讓JavaScript 開發者確信自己不必考慮太多架構性的東西,甚至覺得類的用處不大或乾脆禁用類。實際上,類是另一種有用的工具,作為一名實用主義者,我相信類在JavaScript 中的重要性絲毫不亞於它在其他現代程式語言中的重要性。

  JavaScript 中並沒有真正的類,但JavaScript 中有構造函數和new 運算符。構造函數用來給實例對象初始化屬性和值。任何JavaScript 函數都可以用做構造函數,構造函數必須使用new 運算符作為前綴來創建新的實例。

  new 運算符改變了函數的執行上下文,同時改變了return 語句的行為。實際上,使用new和構造函數很類似於傳統的實現了類的語言:

  var Person = function(name) {

  this.name = name;

  };

  // 實例化一個Person

  var alice = new Person('alice');

  // 檢查這個實例

  assert( alice instanceof Person );

  構造函數的命名通常使用駝峰命名法,首字母大寫,以此和普通的函數區分開來,這是一種習慣用法。記住這一點非常重要,因為你不會希望用省略new 前綴的方式來調用構造函數。

  // 不要這麼做!

  Person('bob'); //=> undefined

  這個函數只會返回undefined,並且執行上下文是window(全局)對象,你無意間創建了一個全局變量name。調用構造函數時不要丟掉new 關鍵字。

  當使用new 關鍵字來調用構造函數時,執行上下文從全局對象(window)變成一個空的上下文,這個上下文代表了新生成的實例。因此,this 關鍵字指向當前創建的實例。儘管理解起來有些繞,實際上其他語言內置類機制的實現也是如此。

  默認情況下,如果你的構造函數中沒有返回任何內容,就會返回this——當前的上下文。要不然就返回任意非原始類型的值。比如,我們可以返回一個用以新建一個新類的函數,第一步要做的是創建自己的類模擬庫:

  var Class = function(){

  var klass = function(){

  this.init.apply(this, arguments);

  };

  klass.prototype.init = function(){};

  return klass;

  };

  var Person = new Class;

  Person.prototype.init = function(){

  // 基於Person 的實例做初始化

  };

  // 用法:

  var person = new Person;

  令人費解的是,由於 JavaScript 2(http://www.mozilla.org/js/language/js20-1999-02-18/

  classes.html)規範從未被實現過,class 一直都是保留字。最常見的做法是將變量名class 改為_class 或klass。

相關焦點

  • 什麼是JavaScript對象?如何創建並引用?這就告訴你!
    1.1 什麼是類類:就是具有相同的屬性和方法的集合。人類,動物類,家電類等。1.2 什麼是對象對象:就類中的一個具體的實物。人類-具體某一個人(張三丰)。動物類-(一個具體的動物-東北虎),家電類-(具體一個比如說電視。)js 中我們包含哪些對象呢?內置對象(本地對象):Math對象,Number對象,Date對象等,系統給我們提供好的,我們拿過來用就可以了。
  • JavaScript模塊化編程規範
    當一個網站複雜度較高需要多人協作開發時,傳統的非模塊化編程模式容易導致代碼衝突和依賴等問題,而模塊化編程的誕生正是為了解決此類問題。然而,在ES6之前,原生JavaScript是不支持模塊化的,因此就出現了一系列的JavaScript庫來實現此功能,這些庫主要遵循以下三種規範:① CommonJS② AMD③ CMD接下來我就粗略地講講這三種規範。
  • 初識javascript,JS的歷史_騰訊新聞
    3.從技術的角度來看其實就是指: HTML5個 + CSS3個 +JavaScript個技術所開發的移動客戶端應用程式。 javascript的應用範圍 1.PC端web開發(網站) 2.移動端開發(webApp、混合App)服務端開發(NodeJs) 3.遊戲開發(unity3D-TypeScript,網頁遊戲)在線演示:忍者水果
  • 九個難以置信的HTML5和JavaScript實驗
    一款太空射擊遊戲,基於ImpactJS遊戲庫開發。         3.Cube Out  一款javascript遊戲,點擊和控制藍色的盒子,讓黃色的點擊不要碰到紅色的點。       5.Sketch 3D
  • 用Java語言巧妙實現javascript的運行
    Java前言在學習開發的過程中javascript是每位程式設計師小盆友都得掌握的一種方法,他們可以說是貫穿了整個Java開發的語言,下面給大家演示一下在Java中如何完美運行javascript案例,跟著小編一起來學習一下吧
  • 0基礎學習JavaScript一定要知道如何使用VS2019去編寫代碼
    編寫JS代碼對於.NET開發者來說,前端技術也是不能少的,0基礎的開發者來說,使用Visual Studio 2019開發工具是非常容易上手的。這裡創建一個空白的Web應用程式項目,ASP.NET Web應用程式是完全支持JavaScript代碼編寫的。
  • 說說那些經典的web前端面試題-JavaScript部分
    怎樣添加、移除、移動、複製、創建和查找節點? 1)創建新節點  createDocumentFragment() //創建一個DOM片段  createElement() //創建一個具體的元素  createTextNode() //創建一個文本節點2)添加、移除、替換、插入  appendChild() //添加  removeChild()
  • JavaScript小知識:String類型
    let lang="java";lang=lange+"scriot";console.log(lang);//javascript我們首先創建變量lang用來保存字符串java,然後我們將lang保存的字符串改為由原先保存字符串java和新的字符串
  • DeFi 趨勢洞察:無須許可的模塊化應用會引領下一輪創新嗎?
    中心化的加密貨幣交易所如果破產可能要到幾個月甚至幾年後才會被發現(比如 Mt.Gox 和 Quadriga),但是 DeFi 的運營狀況是向開源社區公開的,所有人都可以隨時觀察到任何欺詐行為和系統性風險。
  • 第一篇:JavaScript基本語法
    <script>標籤的type屬性表示腳本語言是javascript。<script>標籤可放置在HTML 頁面的<body>或者<head>標籤內。(3)JavaScript可以方便操作各類對象JavaScript是基於對象的腳本語言,它本身提供了非常豐富的內部對象給開發人員使用,同時它也可以使用瀏覽器提供的對象。
  • 2020年最熱度最高的5個JavaScript框架
    簡而言之,框架是由一組開發人員編寫的代碼塊,以使整個開發過程變得簡單且易於實現。從業務角度看,它使開發人員能夠滿足相應客戶的需求,並使用框架來解決客戶項目開發階段所面臨的挑戰。基本上,在Vue中,開發人員可以將一些最佳功能組合在一起,例如將Angular,Ember和React的功能合而為一。它和Angular相似,提供了數據雙向綁定的功能。其中Vue的優點是體積小,可以輕鬆地輕鬆下載;使開發人員可以自由地在HTML文件中編寫其模板;簡單易學和簡單易懂的文檔支持。
  • 第41節 Document文檔節點-Javascript
    本內容是《Web前端開發之Javascript視頻》的課件,請配合大師哥《Javascript》視頻課程學習。Element對象,DOM定義了許多方式,如:用指定的id屬性、name屬性、標籤名、CSS類或CSS選擇器;取得元素的操作可以使用document對象的幾個方法來完成;Document類型為此提供了兩個方法;getElementById()方法:該方法接收一個參數,即要獲取的元素的ID;如果找到就返回這個元素,類型是HTMLElement,如果不存在,則返回
  • JavaScript組件模式深入淺出
    匿名閉包(Anonymous Closures)這是使得模式可以正常工作的語言基礎,也實在是javascript最為實用的特性之一。我們可以簡單的創建一個匿名函數,並且立刻執行它。所有運行在該函數裡的代碼叫做一個閉包,它提供了在整個應用程式生命周期中都有效的數據隱私控制以及狀態保存功能。
  • 第五篇:JavaScript事件處理
    案例8:使用jQuery庫的網頁代碼(案例代碼見unit12\case1.html):<html><head><title>JavaScript開發案例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><
  • 25 歲的 JavaScript 都經歷了什麼?
    / https://js25.org/本文由前端小智獲作者授權後翻譯JavaScript 於 25 年前(1995 年 12 月 4 日)首次向公眾推出。隨後微軟在 1995 年 12 月推出了 Visual Basic (VB),將其作為一個標準,用於為其 Internet Explorer 瀏覽器使用 VB 腳本創建 web 應用程式。甲骨文在 2008 年收購 Sun 主要是為了插手 Java 及其龐大的開發生態系統。當時而言,JavaScript 的未來並不能說說完全光明的。
  • 如何合理地創建對象實例以降低程序類之間關係的耦合度
    OOP編程開發中軟體應用系統的開發人員所必須要面對的問題,軟體應用系統中的業務活動是由各個對象實例之間的相互交互而構成的。什麼時候應該創建類的對象實例?如何保證所創建出的類的對象實例能夠適時地被銷毀?其實上面的核心問題也就是軟體應用系統的開發人員如何能夠更高效地創建、並且松藕合、達到程序模塊的可擴展性?繼續採用如下的對象實例的創建形式嗎?
  • 一切皆可對象:使用JavaScript創建對象的三種方法
    仔細想,其實它們本身已經是對象了,因此對象用於創建更多對象。通常,此方法優於對象構造函數。試想必須創建數百個具有相同屬性的對象,使用對象構造函數方法,必須手動將所有屬性添加到所有對象,但是使用構造函數可以預定義這些屬性。
  • mac版Unity Pro遊戲開發工具如何創建和使用腳本
    Unity Pro 2018 for mac是遊戲開發必備的軟體之一,unity mac版主要用於創建2D和3D跨平臺遊戲,比如三維視頻遊戲、實時三維動畫、建築可視化等類型,儘管Unity的內置組件可以實現多種用途,但是您很快就會發現,您需要超越它們提供的功能來實現自己的遊戲功能。
  • 如何使用JavaScript實現前端導入和導出excel文件
    1.2 實現一鍵導入excel文件並生成table表格導入excel文件的功能我們可以用javascript原生的方式實現解析, 比如可以用fileReader這些原生api,但考慮到開發效率和後期的維護, 筆者這裡採用antd的Upload組件和XLSX來實現上傳文件並解析的功能.
  • 前端開發有哪些比較推薦學習的項目?
    前端開發有哪些比較推薦學習的項目?要找到這些項目可以通過如下方式:1、通常情況下,我們可以在github上面去搜索awesome javascript,很多優秀的JavaScript項目都被分門別類歸納好了。