使用方式

引入加載庫

<script src="tr.easydynamic_load_css_js.min.js"></script>

執行加載（這里我們拿pdf預覽作為演示使用）

TR.LoadJSAndCSS(
[
    'https://your.cdn.com/js/pdf.js',
    'https://your.cdn.com/js/pdf.worker.js',
    'https://your.cdn.com/js/pdfh5.js',
    'https://your.cdn.com/js/pdfh5.worker.js'
], 
[
    'https://your.cdn.com/css/pdfh5.css'
], 
  ()=> {
    //加載完成
    this.pdfh5=new window.Pdfh5('#demo', {
        pdfurl: 'pdf地址'
    })
}, (p)=> {
    //加載進度
    console.log('load:', p)
})

參數1 為待加載js地址列表
參數2為待加載css地址列表
參數3為加載完成回調通知
參數4為加載進度回調通知

是不是很簡單呢？奉上庫地址

https://github.com/Ti-R/EasyDynamicLoad-CSS-JS

關注、點贊、評論老碼每天分享！

者 | Bruno Couriol

譯者 | 馬可薇

策劃 | 丁曉昀

AngularJS 的創造者Misko Hevery近期宣布了新網絡框架Qwik測試版本的推出，聲稱無論應用程序有多大，Qwik 都能夠快速地構建。在多數情況下，Qwik 會先下載 1KB 的 JavaScript，在需要的時候才會懶加載或預處理程序和應用程序代碼。

在一次名為《如何從主線程中移除99%的JavaScript》的演講中，Hevery 介紹了 Qwik 背后的原理。

Qwik 的目標很簡單，確保復雜的網站也能在谷歌頁面速度評分項上拿到 100/100……歸根究底，就是要讓互動時間盡可能地縮短。
如你所見，行業中的大多數框架都能在優化圖片和 CSS 上做到盡善盡美，但 JavaScript 方面卻又乏善可陳。因為這對于互聯網上的每個人來說都是系統性的問題，我的意思是說，問題根源在于工具而不是開發者。
用于優化 JavaScript 交付速度的工具是 Qwik 關注的問題。

Misko 將 JavaScript 在互動時間指標上負面的表現歸因于水合（Hydration）作用。水合在連接服務器的渲染時出現。服務器接收到客戶端對頁面的請求后，做出對應查詢以填充界面，并將結果返回客戶端。雖然對用戶來說，服務器端的頁面渲染速度通常要比客戶端渲染的頁面要快（如更快的首次內容繪制），但頁面卻并不是立即就可交互的，客戶端還需要下載并執行頁面上的 JavaScript 腳本。

在多數框架中，這種首次交付的 HTML 與應用程序的 JavaScript 協調的過程稱作水合。在水合過程中，Web 應用程序框架將事件處理程序和 DOM 元素相連接，并初始化應用程序狀態。水合之后用戶操作會被事件處理程序捕捉，從而使頁面可交互。

Qwik 保留了服務器端的渲染，通過在服務器上運行應用程序以避免水合。它將所有相關狀態信息序列化，將頁面內容和序列化的狀態一起以 HTML 的形式發送給客戶端。這些相關的狀態信息包括時間監聽器、內部數據結構，以及應用狀態。借助序列化的狀態，客戶端可以接力完成服務器端沒有執行完的任務。

處理交互性的 JavaScript 加載默認是延遲進行的，一般是直到用戶實際使用交互時才啟動，也就是說一個按鈕的事件處理程序最晚可以在用戶點擊按鈕時加載。這種即時的 JavaScript 獲取加上預取策略，利用瀏覽器的本地能力，在不影響頁面交互性的前提下完成了文件的加載。

在 Qwik 文檔中有詳細的介紹：

Qwik 只會預取當前頁面需要的代碼，避免下載與靜態組件相關的代碼。最壞的情況是 Qwik 預取的代碼量與現有框架的最佳情況相同，而在大多數情況下，Qwik 所預取的代碼只會比現有框架要少。
除主線程之外的其他線程都可以做到代碼預取，大多數瀏覽器甚至支持主線程之外的代碼 AST 語法預分析。

如果用戶在預取完成之前開始交互，瀏覽器會自動優先交互模塊于其他預取模塊。
Qwik 可以將應用程序分解成部分，這些分塊可以按照用戶交互的概率高低順序進行下載。

Qwik 網站為開發者提供了教程、實例，以及學習和嘗試 Qwik 的在線運行平臺。以簡單的計數器為例，由一個按鈕和顯示按鈕點擊次數的文本框組成，實現方法如下：

import { component$, useStore } from '@builder.io/qwik';


export const App=component$(()=> {
  const store=useStore({ count: 0 });


  return (
    <div>
      <p>Count: {store.count}</p>
      <p>
        <button onClick$={()=> store.count++}>Click</button>
      </p>
    </div>
  );
});

開發者可以通過 Qwik 的component$ API 創建可恢復組件，有狀態的組件可以通過useStore API 顯示其對某段狀態的依賴。在處理程序的名字后附加$ 字符創建可恢復的事件處理程序（如前文例子中的onclick$ ）。通過這些手動添加的提示，Qwik 可以將應用程序文件打包，以實現并優化 JavaScript 的懶加載。前文的計數器程序在服務器端渲染的 HTML 如下：

<!DOCTYPE html>
<html
  q:container="paused"
  q:version="0.11.1"
  q:render="ssr"
  q:base="/repl/21kry8ac4hl/build/"
>
  <html>
    <head q:head>
      <title q:head>Tutorial</title>
    </head>
    <body>
      <!--qv q:id=0 q:key=AkbU84a8zes:-->
      <div>
        <p>
          Count:
          <!--t=1-->0<!---->
        </p>
        <p>
          <button
            on:click="app_component_div_p_button_onclick_8dwua0cjar4.js#App_component_div_p_button_onClick_8dWUa0cJAr4[0]"
            q:id="2"
          >
            Click
          </button>
        </p>
      </div>
      <!--/qv-->
    </body>
  </html>
  <script type="qwik/json">
    {"ctx":{"#2":{"r":"0!"}},"objs":[{"count":"1"},0],"subs":[["2 #0 0 #1 data count"]]}
  </script>
  <script id="qwikloader">
    ((e,t)=>{const n="__q_context__",o=window,r=new Set,i=t=>e.querySelectorAll(t),s=(e,t,n=t.type)=>{i("[on"+e+"\\:"+n+"]").forEach((o=>l(o,e,t,n)))},a=(e,t)=>new CustomEvent(e,{detail:t}),c=(t,n)=>(t=t.closest("[q\\:container]"),new URL(n,new URL(t.getAttribute("q:base"),e.baseURI))),l=async(t,o,r,i=r.type)=>{const s="on"+o+":"+i;t.hasAttribute("preventdefault:"+i)&&r.preventDefault();const a=t._qc_,l=null==a?void 0:a.li.filter((e=>e[0]===s));if(l&&l.length>0){for(const e of l)await e[1].getFn([t,r],(()=>t.isConnected))(r,t);return}const d=t.getAttribute(s);if(d)for(const o of d.split("\n")){const i=c(t,o),s=b(i),a=performance.now(),l=u(await import(i.href.split("#")[0]),s),d=e[n];if(t.isConnected)try{e[n]=[t,r,i],f("qsymbol",{symbol:s,element:t,reqTime:a}),await l(r,t)}finally{e[n]=d}}},f=(t,n)=>{e.dispatchEvent(a(t,n))},u=(e,t)=>{if(t in e)return e[t];for(const n of Object.values(e))if("object"==typeof n&&n&&t in n)return n[t]},b=e=>e.hash.replace(/^#?([^?[|]*).*$/,"$1")||"default",d=e=>e.replace(/([A-Z])/g,(e=>"-"+e.toLowerCase())),p=async e=>{let t=d(e.type),n=e.target;for(s("-document",e,t);n&&n.getAttribute;)await l(n,"",e,t),n=e.bubbles&&!0!==e.cancelBubble?n.parentElement:null},v=e=>{s("-window",e,d(e.type))},w=()=>{var n;const s=e.readyState;if(!t&&("interactive"==s||"complete"==s)&&(t=1,f("qinit"),(null!=(n=o.requestIdleCallback)?n:o.setTimeout).bind(o)((()=>f("qidle"))),r.has("qvisible"))){const e=i("[on\\:qvisible]"),t=new IntersectionObserver((e=>{for(const n of e)n.isIntersecting&&(t.unobserve(n.target),l(n.target,"",a("qvisible",n)))}));e.forEach((e=>t.observe(e)))}},q=(e,t,n,o=!1)=>e.addEventListener(t,n,{capture:o}),y=t=>{for(const n of t)r.has(n)||(q(e,n,p,!0),q(o,n,v),r.add(n))};if(!e.qR){const t=o.qwikevents;Array.isArray(t)&&y(t),o.qwikevents={push:(...e)=>y(e)},q(e,"readystatechange",w),w()}})(document);
  </script>
  <script>
    window.qwikevents.push("click")
  </script>
</html>

注意，HTML 文件是通過以下方式強化的。

q: 屬性，如q:base，q:id，q:key 。
包含特定框架信息的 HTML 注釋，如 。
序列化狀態，如<script type="qwik/json"> {"ctx": ..., "objs":[{"count":"1"},0], "subs":[["2 #0 0 #1 data count"]]} </script> 。
用于在客戶端恢復應用程序執行的 Qwik 腳本，如<script id="qwikloader"> ... </script>，window.qwikevents.push("click") 。

Qwik 的在線代碼運行平臺可以讓開發者了解到程序代碼是如何被切割打包的，還是用前面的計數器為例，客戶端的打包方式如下：

如截圖所示，計數器的應用程序被分成了三個腳本。當用戶點擊按鈕時，動態下載并執行其中兩個腳本（Qwik 運行時間和 click 事件處理程序的代碼）。

參考Qwik文檔了解具體執行情況以及代碼拆分的原理。Qwik 的網站給出了大量包括教程、示例，以及演示在內的信息，還有一個可互動的在線代碼運行平臺。Qwik 社區中同樣也有一個非常簡單的電子商務示例，一般對電子商務的廠商來說，頁面加載速度提高收入也會增加。

Qwik 團隊目前由 AngularJS 的創造者 Mi?ko Hevery、基于 Go 語言 Web 架構 Gin 的創造者 Manu Almeida、Web組件編譯器Stencil的創造者 Adam Bradley 組成。

目前，Qwik 已推出測試版，且采用 MIT 許可開源，歡迎各位在遵循 Qwik行為準則的前提下貢獻代碼。

原文鏈接：

New Qwik JavaScript Framework Seeks Faster Web Apps with Unique Approach: Resumability

avaScript無處不在，這一點無可否認。每個應用程序都在以某種形式使用它。任何認真對待web開發的程序員都會學習JavaScript。并且要不斷學習新的框架，庫和工具，因為JavaScript是一個不斷發展的語言。

Image by : opensource.com

JavaScript社區有一個很棒的開源環境，隨之產生了一批優秀的開源JavaScript集成開發環境（集成開發環境）。像其他編程語言一樣，JavaScript對編輯器或IDE沒有特定的要求，但自然是越優秀越好。如果你是一名JavaScript開發人員，會如何選擇呢？

Eclipse with JSDT

Image by : opensource.com

Eclipse是最知名的IDE之一。你可能已經在其他編程語言中使用過它了，因為它支持所有主流的編程語言。Eclipse對JavaScript的支持來自JSDT（JavaScript開發工具）的幫助。 JSDT基于JDT（Java開發工具）并提供了大量的功能。你可以使用這些工具來編寫JavaScript Web應用程序或JavaScript應用程序。

Eclipse相對于其他IDE或文本編輯器來說，速度并不快。然而，它已經相當成熟了，并且雖然速度慢，但不會成為當前開發的障礙。

Eclipse JSDT的重要特性：

提供合適的語法高亮
可以自動完成
支持JSDoc元素生成
支持流量分析
支持重構

Atom

Atom被譽為是21世紀的文本編輯器，適用于喜歡自定義文本編輯器的開發人員。它可以被認為是一個IDE，開發人員可通過調整配置文件來更改Atom，以便獲得想要的功能。

Image by : opensource.com

安裝簡單，為了使開發更容易，Atom還提供了一個包管理器，可以使用它來安裝不同的包以擴展和增強其功能。

如果你是一名前端開發人員并且想充分利用Atom，則需要安裝這些軟件包和插件。可以改進編碼體驗的一些值得注意的Atom插件是Atom Beautify，Atom TernJS，自動更新包，自動完成模塊，編輯器配置，DocBlocker等。

Atom的一些主要特點：

可自動完成
提供多個工作窗口
支持跨平臺（即它適用于Linux，Windows和OS X）

Brackets

Brackets是一個用于前端開發的知名文本編輯器。它是一個強大的文本編輯器，主要為前端工程師設計。它是由Adobe使用三個主要技術開發的：JavaScript，HTML和CSS。如果你是一個JavaScript開發人員，你可以輕松地使用Brackets。

Image by : opensource.com

高可重構性，輕量級，以及出色的用戶界面使得Brackets成為JavaScript開發人員的絕佳選擇。Brackets不斷添加新功能，開發人員可通過在線擴展獲取新功能。

Brackets的一些主要特點：

提供實時預覽
可與Adobe的產品協同工作
支持SCSS和LESS
支持輕量級JavaScript框架
支持縮進，自動完成和其他重要的代碼編寫和編譯功能

Visual Studio Code

Visual Studio Code是block的“新寵”。它是開源的，可用于構建Web應用程序。Visual Studio code可以看作是Visual Studio的替代品。有興趣的開發人員可以試試Visual Studio code，但無法享受到Visual Studio提供的廣泛功能集。

Image by : opensource.com

Visual Studio代碼具有JavaScript開發所需的所有功能。它的UI也是一流的和現代的。用戶可以即時編輯，調試和修改代碼。它還支持Peek，具有查找所有引用，重命名符號等功能。用戶還可根據需要使用Visual Studio code自定義擴展。

Visual Studio code的重要特性是：

支持IntelliSense
提供自動類型采集
易于配置
在客戶端和服務器端都提供調試
支持snippets

結語

你可能也注意到了，本文列出的這四個更多的是文本編輯器，這樣做的原因有兩個：一是沒有許多開源IDE可供選擇，二是這些文本編輯器足以滿足日常所需。你可以在一個編輯器中搞定調試、編輯、上傳等操作。

Eclipse JSDT是一個合適的IDE，可以用于JavaScript開發。然而，與本文中列出的其他替代方法相比，它是比較慢的。如果你有其他更好的選擇，也可以留言告訴我們。

在線咨詢

上一篇：藍易云 - LNMP網站框架搭建（編譯安裝）
下一篇：96編輯器技巧分享如何快速加減行數項目

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

推薦一款小巧靈活動態加載js,css的工具庫Easy

使用方式

您的項目需求