<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          前端開發,如何寫出優秀js代碼

          時間:?2017-11-11閱讀:?2701標簽:?前端

          什么樣的代碼是最優秀的的?我總結的大概分為三點:性能好,簡單優雅,通俗易懂,這篇文章就將圍繞這這3點來說明,當然也會講解一些小技巧。

          1.性能好效率高,瀏覽器中運行效率高的代碼。

          1.避免全局查找,變量搜索順序為:先局部,后全局;先解析,后賦值  
          var num=1;
          ;((w)=>{//添加分號,主要為了防止匿名函數調用上一行定義的函數
              console.log(num);//輸出nudefined
              console.log(w.num);//輸出1
              var num=10;
              console.log(num);//輸出10,代表先搜索局部變量
          })(window)


          2.條件判斷,按可能性從高到低,減少條件執行次數
          function getStr(){
          	var num=Math.floor(Math.random()*10+1);//1到10的隨機數
          	switch(true){//注意:如果改為num,case里不能寫為范圍,只能是變量
          		case num<8:
          			return '1-7之間數字'+num;
          		case num===8 || num===9:
          			return '8-9之間的數字:'+num;
          		case 10:
          			return num;
          		default:
          			return 'default'
          	}
          }
          console.log(getStr());


          3.各種類型轉換,通過js特殊方式
          //將數字轉換成字符串
          var num=1,
              num_str=""+num;
          console.log(num_str+'類型是'+(typeof num_str));//1類型是string
          //將字符串轉換為其他類型
          var str="13.14",
              str_int = ~ ~str, 
              str_float = 1 * str, 
              str_bool = !!str, 
              str_array = [str]; 
          console.log(str_int+'類型是'+(typeof str_int));//13類型是number
          console.log(str_float+'類型是'+(typeof str_float));//13.14類型是number
          console.log(str_bool+'類型是'+(typeof str_bool));//true類型是boolean
          console.log(str_array+'類型是'+(typeof str_array));//13.14類型是object

          雖然看上去有點丑,但效率卻要比parseInt(),parseFloat()等高些,當然使用toString()方法來進行類型轉換的也是值得推薦的。


          4.優化js的加載

          比如通過使用defer,async屬性實現js的延遲加載,使用document.createElement ("script")的方式動態加載js等,合并壓縮js文件來減少http請求等等


          5.其它

          能不使用with語句的時候盡量不要使用with語句。

          盡量少使用eval ,每次使用eval需要消耗大量時間。

           少使用document.write來給頁面生成內容,多用innerHtml來添加。

          刪除dom節點之前,一定要刪除注冊在該節點上的事件。 

          通過javascript創建的dom對象,必須append到頁面中。

          ......


          2.簡潔優雅,用最少的字符寫出同樣的功能。

          1.使用三目運算
          var a=1,b=2;num;
          if (a>b){
           num = a;
          }else{
           num=b;
          }
          //可以替換為:
          var num = a > b ? a : b;


          2.變量遞增/遞減/乘/除
          var num=10
          num =num + 1;
          num =num - 1;
          //改下為
          ++num;
          --num;
          /*其它加減乘除*/
          num += 2;
          num -= 2;
          num *= 2; 
          num /= 2;


          3.數組和遍歷
          var a=new Array(); 
          a[0]="ab"
          a[1]="ac"
          a[2]="ad"
          for(var x=0;x<a.length;x++) 
          { 
             console.log(a[x]);
          } 
          //簡潔的寫法是 
          var a=['ab','ac','ad']; 
          for(var x in a) 
          { 
              console.log(a[x]);
          }
          


          4.一個function就做一件事,擁有統一的屬性通過繼承實現
          function person(name){//定義一個公用類代表:人
            this.name = name || 'default';//屬性-名稱
            this.eat= function(){//方法-吃飯
              console.log(this.name + '在吃飯!');
            };
            this.sleep=function(){//方法-睡覺,不同的方法分開寫,只用于處理一件事
              console.log(this.name+'在睡覺');
             };
          }
          function man(name){//男人
            	person.call(this);//擁有人類的特征
            	if(name!=undefined){
            		this.name = name;
            	}
          }
          
          (function(){
            var Super = function(){};
            Super.prototype = person.prototype;  
            man.prototype = new Super();
          })();
          var m = new man('tony');
          console.log(m.name);//tony
          console.log(m.eat());//tony在吃飯
          console.log(m instanceof person); // true
          console.log(m instanceof man); //true


          3.通俗易懂,除了自己他人很快能讀懂你的思想。

          1.命名規范
          const RUNTIME_PATH= "./Runtime/";//常量定義不要使用var,名稱用大寫“_”隔開。
          _fn: function () {} //對象內提供給內部調用的接口,通過“_”作為開頭。
          let num=0;//作用域被限制在塊級中的變量的定義。
          function fnGetName(){};//方面命名盡量使用駝峰式。

          原則是:

          變量名區分大小寫,允許包含字母、數字、美元符號($)和下劃線,但第一個字符不允許是數字,不允許包含空格和其他標點符號

          變量命名長度應該盡可能的短,并抓住要點,盡量在變量名中體現出值的類型

          盡量避免使用沒有意義的命名

          禁止使用JavaScript關鍵詞、保留字全名

          變量名命名方法常見的有匈牙利命名法、駝峰命名法和帕斯卡命名法


          2.變量定義始終在前

          無論使用let,var來定義變量,我們盡量把它們寫在最前面,多個變量可以用過逗號隔開


          3.多使用try catch語句
          try {
             //語句
          }catch (e) {
            //出錯怎么辦
          }finally{
             //無論結果都會執行的
          }

          這樣能很好的讓我們捕獲錯誤。當錯誤發生時JavaScript 會停止執行,并生成一個錯誤信息。如果你將 throw 和 try 、 catch一起使用,就可以控制程序輸出的錯誤信息。


          4.總結:

          我不是個偉大的程序員,我只是個有著一些優秀習慣的程序員而已與君共勉愿君寫的代碼就像閱讀優美的文章一樣讓人流連忘返。還有更多的建議請留言,分享您的知識和經驗。


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/88

          前后端分離的優缺點

          前后端分離已經成為互聯網項目開發的業界標準使用方式,通過 nginx + Tomcat 的方式(也可以中間加一個 nodejs) 有效的進行解耦,并且前后端分離會為以后的大型分布式架構,彈性計算架構,微服務架構

          前端一定要會node嗎?

          Node 是一個讓 JavaScript 運行在服務端的開發平臺,它讓 JavaScript 成為與PHP、Python、Perl、Ruby 等服務端語言平起平坐的腳本語言。

          張鑫旭:我對前端從業人員分布與技術風向的一點看法

          Web 前端這個職業從出現到現在 20 年的歷史應該有了,隨著這么多年前端發展和積累,累積百萬前端從業開發者絕對有的,當下至少有 50 萬前端開發從業者。從我篩選簡歷到最終錄取大概百分之一的錄取率,綜合我們廠算是小廠來看

          中臺微服務了,那前端呢?

          文章中詳細描述了基于 DDD 設計思想的中臺微服務設計方法以及分布式架構實施過程中的關注點等內容。中臺建設完成后,通過微服務實現了后端應用的解耦,提高了中臺應用的彈性伸縮能力

          學習web前端開發,學歷到底重不重要?

          首先,我們先了解一下一般情況下學歷的作用是什么,對于我們大多數人來講,在進行面試的時候,學歷最重要的一個作用就是“敲門磚”,現在任何公司招聘,都會寫上大專學歷以上或者是本科學歷以上,但是對于真正有能力的人

          千萬級用戶網站門戶前端設計

          對于千萬級的注冊用戶的門戶項目是前端這塊是怎么去實現的,自己在平常的工作中總結了一些經驗,也是在不斷的挫折中,不斷演練的,希望總結出來給大家參考下,和大家一起探討,一起進步。

          前端為什么學node?

          隨著互聯網的高速發展以及市場需求推動,Node已經成為前端知識棧必備技能之一,很多企業在招聘中也會著重考察求職者對Node的掌握程度。那么就有人好奇了從事Web前端為什么要學習Node.js?下面本篇文章就來給大家詳細的分析一下

          自學WEB前端的詳細路線

          學習web前端編程技術肯定是以就業拿到高薪工作為主要目的的,可是高薪不會那么輕易拿到,這是一個最簡單的道理。沒有付出就沒有回報,在整個學習web前端編程技術的過程中,你需要付出時間、精力、金錢。廢話不多說直接上干貨

          大前端時代下的熱修復平臺建設

          隨著移動需求的增加、移動項目的拓展,如果移動端應用出現 Bug 不能及時得到修復,影響的不僅僅是用戶體驗,還會造成業務上的損失,因此,建立一套完整的熱修復平臺迫在眉睫。

          哪些人適合學web前端?

          工作流程為從UI處得到原型圖或者效果圖,在項目(網站、微信公眾號、小程序、WEBAPP)中還原圖片效果,然后與后臺進行各種數據交互。目前的前端市場整體還是處于迅速發展期

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网