JavaScript代碼怎樣引入到HTML中？

avaScript 程序不能獨立運行，它需要被嵌入 HTML 中，然后瀏覽器才能執(zhí)行 JavaScript 代碼。通過 <script> 標簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內(nèi)部方式
內(nèi)部方式是通過<script>標簽包裹JavaScript代碼,從而引入HTML頁面中，示例代碼如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎(chǔ) - 引入方式</title>
 </head>
 <body>
   <!-- 內(nèi)聯(lián)形式：通過 script 標簽包裹 JavaScript 代碼 -->
   <script>
     alert('嗨，歡迎來傳智播學習前端技術(shù)！')
   </script>
 </body>
 </html>

2.外部形式

一般將 JavaScript 代碼寫在獨立的以 .js 結(jié)尾的文件中，然后通過 <script>標簽的 <src>屬性引入，示例代碼如下：

// demo.js
document.write('嗨，歡迎來傳智播學習前端技術(shù)！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎(chǔ) - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通過 script 的 src 屬性引入獨立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 標簽使用 src 屬性引入了某 .js 文件，那么標簽的代碼會被忽略！！！如下代碼所示：

了執(zhí)行Javascript，需要在HTML文件內(nèi)以特定的方式書寫JavaScript的代碼，JavaScript的書寫方法有多種，其執(zhí)行的流程也各不相同：

1 <script>標簽嵌入

此種嵌入方法無法操作<script>之后的DOM元素。因為<script>之后的DOM元素還未構(gòu)造，因此在<script>標簽內(nèi)就無法取得位于其后的DOM元素。

2 讀取外部JavaScript文件

此種嵌入方法可以指定defer、async屬性。defer可以推遲執(zhí)行，async可以異步執(zhí)行。

3 onload嵌入

此種嵌入方法在頁面讀取完后再對其執(zhí)行，所以可以對所有的DOM元素操作。

<body onload="alert('hello')">
window.onload = function(){alert('hello');};

當window.onload事件觸發(fā)時，頁面上所有的DOM、樣式表、腳本、圖片、flash都已經(jīng)加載完成了。

//window.onload不能同時編寫多個。
//以下代碼無法正確執(zhí)行，結(jié)果只輸出第二個。
window.onload = function(){
  alert("test1");
};

window.onload = function(){
  alert("test2");
};

//$(document).ready()能同時編寫多個
//結(jié)果兩次都輸出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
});

window.onload和body中onload也有些許區(qū)別：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，結(jié)果為：

"DOMContentLoaded"
"bodyonload"

說明body中的onload會覆蓋window.onload

在chrome下，結(jié)果為：

DOMContentLoaded
window.onload
bodyonload

然后，如果把javascript代碼移到最下面，結(jié)果又會是什么樣呢？

chrome和IE10、FireFox的結(jié)果竟然是一樣的：

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解，window.on load和body中的 on load 誰在下面就是誰覆蓋誰，只會執(zhí)行后面的那個。

4 DOM ContentLoaded嵌入

onload方法可能需要等待時間，而本方法可以在完成HTML解析后發(fā)生的事件，減少等待時間。

在chrome、IE10和FireFox中，執(zhí)行結(jié)果是：DOMContentLoaded然后才是onload的輸出。所以說一般情況下，DOMContentLoaded事件要在window.onload之前執(zhí)行，當DOM樹構(gòu)建完成的時候就會執(zhí)行DOMContentLoaded事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log(document.getElementById("div1"));}
        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

如果你是個jQuery使用者，你可能會經(jīng)常使用$(document).ready();或者$(function(){})，這都是使用了DOMContentLoaded事件

5 動態(tài)載入JavaScript文件

5.1 使用原生js方法

動態(tài)創(chuàng)建script標簽，并指定script的src屬性

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    if (typeof(callback) != "undefined") {
        if (script.readyState) {
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            }
        } else {
            script.onload = function() {
                callback();
            }
        }
    }
    script.src = url;
    document.body.appendChild(script);
}
loadJs("test.js", function() {
    alert('done');
});

還可以使用同樣的原理動態(tài)加載css文件，只不過插入的的父節(jié)點是head標簽。

5.2 使用document.write/writeln(）方式

該種方式可以實現(xiàn)js文件的動態(tài)加載，原理就是在重寫文檔流，這種方式會導(dǎo)致整個頁面重繪。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的轉(zhuǎn)義。

5.3 使用jQuery

使用getScript(url,callback)方法實現(xiàn)動態(tài)加載js文件

$.getScript('test.js',function(){
    alert('done');
});

－End－

種包管理器到ESLint，從CommonJS到AMD，再從ES6模塊到Babel和Webpack，好多工具啊！

好累……

是的，今天我覺得很疲勞。我不禁想，我本應(yīng)該繼續(xù)我的銷售職業(yè)，不應(yīng)該抄近路做前端開發(fā)。但我意識到，前端開發(fā)是給勇敢者準備的，而勇敢者絕不會放棄，他們才是人生贏家。

所以我決定做人生贏家，我要寫點東西給前端開發(fā)和工具鏈疲勞的受害者們看。我要寫一下我是怎樣將初學者級別的代碼變成令人贊嘆的產(chǎn)品級代碼的，以及這個過程中我用到的工具。

現(xiàn)在開始吧！

我們在做的東西

其實沒什么令人激動的東西。我們做了個Web應(yīng)用，從某個API讀取一些隨機的用戶，然后顯示在前端上。它沒有路由的能力。本文的最終目標是讓你熟悉前端的工具鏈。

我們的AngularJS代碼中沒有使用樣板代碼，所以我們不會被CLI的那些黑科技搞得暈頭轉(zhuǎn)向。注意我用的是AngularJS，不是Angular。使用AngularJS的原因是我找不到任何關(guān)于AngularJS工具鏈和打包的文章。

首先在根目錄下建一個index文件。

<html>

<head>

<title>Random User!</title>

</head>

<body>

<h1 class="text-center">Random User!</h1>

</div>

</body>

</html>

中規(guī)中矩的老式代碼。這段代碼從CDN上加載AngularJS文件和一個最小化的CSS框架，然后開始一點點編寫JavaScript代碼并添加到index中。

但隨著應(yīng)用程序的增長，我們有必要跟蹤所有的依賴（這里的依賴就是Angular）。

使用包管理器

許多人使用包管理器跟蹤項目所需的依賴的版本。包管理器的最大賣點就是，它會訪問依賴的GitHub主頁，下載到你的文件夾里，并且跟蹤下載的版本。這樣可以保證，移動代碼位置或者下載其他版本的依賴不會造成代碼無法工作。

代碼管理器有過duojs、jspm、bower、npm，現(xiàn)在還有Yarn。現(xiàn)在去裝一個yarn，我們稍后會用到。

向應(yīng)用程序里添加依賴時，yarn會下載所需的文件，并保存到node_modules文件夾中。之后，需要用到依賴時，可以在index文件里引入：

裝好這個后，我們再往根目錄下添加app.js、userController.js和userFactory.js文件，然后全都鏈接到index文件里。

/**

* /app.js

var app = angular.module("RandomApp", []);

// /userFactory.js

app.factory("UserF", function($http) {

var UserF = {};

UserF.getUsers = function(){

return $http({

method: 'GET',

url: 'https://www.reqres.in/api/users',

})

};

return UserF;

});

// /userController.js

app.controller("userController", function($scope, UserF){

$scope.users = [];

UserF.getUsers()

.then(function(res) {

$scope.users = res.data.data;

})

});

<!doctype html>

<head>

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<title>Random User!</title>

</head>

<body>

<h1 class="text-center">Random User!</h1>

</div>

<div class="card-title h5">{{user.first_name}} {{user.last_name}}</div>

</div>

</body>

</html>

index越來越大了。他遇到了他自己的問題。他的手心開始出汗，膝蓋發(fā)軟，胳膊也越來越沉重……

這種方式的問題

所有的script標簽必須按照固定的順序。app.js生成app，然后附加到全局的window對象上。這個app變量會被其他腳本文件用到。這種情況通常被稱為“全局命名空間污染”。

如果你還在用這種方式，就趁早改了吧。它的問題是，不管我們什么時候打開哪個文件，都無法得知app變量的值究竟是什么。

這段代碼的另一個語義上的問題是，它使用了匿名函數(shù)。匿名函數(shù)是JavaScript的天使，也是魔鬼。

永遠不要忘記給匿名函數(shù)起名字。這樣以后調(diào)試代碼會變得容易很多。

那么，要是有個JS警察負責找出這些問題，豈不是很好？

ESLint

ESLint是個清理器。就像個嚴格的結(jié)對編程的伙伴一樣。清理器會在你運行應(yīng)用程序之前就幫你調(diào)試代碼，并且強迫你和你的團隊遵循整潔代碼的實踐。誰說這樣的老師不存在的？

配置ESLint

我們使用Airbnb的樣式配置，在我們編寫代碼時進行檢查，并指出不當?shù)牡胤健Ｉ厦娴拿顣⑴渲冒惭b到node_modules目錄下，但我們得告訴ESLint怎么用這個配置。建立一個名為.eslintrc.json的文件，內(nèi)容如下：

// .eslintrc.json

{

"extends": [

"airbnb/legacy"

"env": {

"browser": true

}

extends列表告訴ESLint在它自己的默認規(guī)則之上使用Airbnb的規(guī)則。env變量告訴ESLint不要抱怨沒有初始化的window變量等。要清理所有文件，可以使用通配符 * 。

現(xiàn)在運行下ESLint看看有什么結(jié)果。

這些都是Airbnb樣式指南定義的規(guī)則。我留給你自己去改正這些文件。一開始就有個清理器是最理想的。當然，你可以關(guān)閉某個特定的規(guī)則。

比如，如果你喜歡不用分號，或者使用雙引號而不是單引號，你可以關(guān)閉相應(yīng)的規(guī)則。ESLint很靈活，允許你這么做。

模塊

現(xiàn)在來討論下模塊。在創(chuàng)建大規(guī)模應(yīng)用時，我們要求代碼有良好的結(jié)構(gòu)，以便于以后的擴展。

我們把代碼放到不同的模塊中，以實現(xiàn)代碼分割的目的。JavaScript直到ES6才支持模塊。但模塊化的概念早在ES6之前就出現(xiàn)了。

CommonJS

在ES6之前，人們使用CommonJS標準。你可以寫一段代碼，然后告訴環(huán)境導(dǎo)出這段代碼。之后就能使用像RequireJS之類的庫導(dǎo)入模塊了。

// util.js

module.export = {

noop: function(){},

validateUrl: function(s){

return s.matches(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/)

}

};

// postController.js

var validateUrl = require('./util').validateUrl;

var handleSubmit = function handleSubmit(e) {

if(!validateUrl(e.target.value)) {

return;

}

submitUrl(e.target.value);

}

如果你玩過Node，你會覺得這段代碼看起來很眼熟。不過這個標準有個缺陷——它是同步的。

也就是說，只有在validateUrl被require了之后，postController的第3行的handleSubmit才會被執(zhí)行。在這之前代碼會暫停。

這種體系在Node.js中沒什么問題。Node可以在服務(wù)器啟動之前加載所有依賴，比如配置日志文件、連接云端的數(shù)據(jù)庫、配置秘鑰等。但在前端，這種方法并不是太理想。

異步模塊定義（Asynchronous Module Definition，AMD）

顧名思義，這種方式會異步加載模塊，比CommonJS的方式好一些。下面是使用AMD的代碼（我加了幾個函數(shù)）。看著眼熟嗎？

define(['validateSpam', 'blockUser', function(validateSpam, blockUser){

return {

noop: function(){},

validateUrl: function(s) {

return s.matches(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/)

validateSpammyComment: function validateSpammyComment(comment, userID) {

if(validateSpam(comment)) {

blockUser(userID);

return false;

}

return true;

}

}])

第1行看起來就像AngularJS中的依賴注入一樣。

ES6模塊

TC39委員會看到開發(fā)者們使用外部庫之后，他們深切感受到JavaScript需要支持模塊。因此他們在ES6中引入了模塊功能。現(xiàn)在使用ES6吧！

function noop(){};

function validateUrl(s) {

return s.matches(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/)

}

export {

noop,

validateUrl

}

import { validateUrl } from './util';

var handleSubmit = function handleSubmit(e) {

if(!validateUrl(e.target.value)) {

return;

}

submitUrl(e.target.value);

}

不需要再調(diào)用外部庫。import和export都是原生支持的。但依然有些版本的瀏覽器并不能完全支持ES6的所有功能。

但這種瀏覽器之間的不一致并不能阻止程序員編寫下一代的JavaScript。像babel等工具可以掃描所有JavaScript，并將它們轉(zhuǎn)譯成能兼容所有瀏覽器的代碼。因此，你的代碼甚至可以支持IE之類的老瀏覽器。

Babel和ES6

好了，現(xiàn)在我們把舊的JavaScript轉(zhuǎn)換成新的JavaScript。先做一點改動，以便添加模塊功能。現(xiàn)在我們先不管清理器……讓它去抱怨吧。

// /userFactory.js

let angular = window.angular;

let app = angular.module('RandomApp');

/**

* A User factory which gets the user list

* @param $http

let userFactory = $http => {

let UserF = {};

UserF.getUsers = () => $http({

method: 'GET',

url: 'https://www.reqres.in/api/users'

});

return UserF;

};

app.factory('UserF', userFactory);

// /userController.js

let angular = window.angular;

let app = angular.module('RandomApp');

/**

* Controls the user

* @param $scope

* @param UserF

let userController = ($scope, UserF) => {

$scope.users = [];

UserF.getUsers().then(res => $scope.users = res.data.data);

};

userController.$inject = ['$scope', 'UserFactory'];

app.controller('userController', userController);

這段代碼的問題

這段代碼無法工作。因為ES6的let關(guān)鍵字創(chuàng)建的變量是代碼塊上下文內(nèi)的變量，而在同一個上下文內(nèi)無法重復(fù)定義代碼塊級別的變量。

別忘了：我們還在全局上下文里呢。現(xiàn)在來改正這個問題。

我希望重構(gòu)代碼的原因是，我想引入babel，這樣可以親眼看看babel的魔法。現(xiàn)在可以在終端里安裝babel：yarn add babel-cli babel-preset-env

這行命令會安裝babel-cli和babel-preset-env。

babel插件和預(yù)設(shè)

JavaScript代碼會通過一系列轉(zhuǎn)換器，而我們可以選擇需要什么轉(zhuǎn)換器。你可以讓它把箭頭函數(shù)轉(zhuǎn)換成匿名函數(shù)，轉(zhuǎn)換擴展運算符（spread），轉(zhuǎn)換for...of循環(huán)，等等。這些轉(zhuǎn)換器叫做插件。

你可以選擇任何你想要的插件。成組的插件叫做預(yù)設(shè)。babel-preset-env會給babel一個靈活的目標。

它并不是指定某個特定版本的JavaScript，而是告訴babel自動跟蹤最新的n個版本瀏覽器。

現(xiàn)在來設(shè)置babel配置文件：.babelrc，把它放到根目錄下。

{

"presets": [

["env", {

"targets": {

"browsers": "last 2 versions"

}

}]

]

}

現(xiàn)在從終端運行如下命令，babel就能正常工作。輸入以下命令：

node_modules/.bin/babel *.js

很方便對吧？babel會在轉(zhuǎn)換之前預(yù)覽以下。

現(xiàn)在喘口氣，考慮下我們學過的東西。我們將一個JavaScript文件分解成了許多個文件。我們添加了清理器，防止寫出不合規(guī)范的代碼。

我們使用未來的JavaScript語法，并將其轉(zhuǎn)換成特定版本的瀏覽器能理解的東西。我們污染了全局命名空間，但暫時還能接受，我們稍后會解決這個問題。

如果有個工具能自動完成這一切就好了。我們給它所有代碼，自動運行清理器找出所有錯誤，然后轉(zhuǎn)譯成瀏覽器兼容的代碼。沒錯，確實有這么個工具。現(xiàn)在把這些東西都自動化吧。

用Webpack進行構(gòu)建

首先，把所有JS文件都移動到一個目錄下。我們使用標準的命名方式，將文件夾命名為build。同時，我們重構(gòu)下JavaScript文件，這樣所有文件都能被構(gòu)建到同一個文件下。

// /build/userController.js

/**

* Controls the user

* @param $scope

* @param UserF

let userController = ($scope, UserF) => {

$scope.users = [];

UserF.getUsers().then(res => $scope.users = res.data.data);

};

userController.$inject = ['$scope', 'userFactory'];

export default userController;

// /build/userFactory.js

/**

* A User factory which gets the user list

* @param $http

let userFactory = $http => {

let UserF = {};

UserF.getUsers = () => $http({

method: 'GET',

url: 'https://www.reqres.in/api/users'

});

return UserF;

};

userFactory.$inject = ['$http'];

export default userFactory;

/// /build/app.js

import angular from 'angular';

import userController from './userController';

import userFactory from './userFactory';

angular.module('RandomApp', [])

.factory('userFactory', userFactory)

.controller('userController', userController);

現(xiàn)在創(chuàng)建webpack.config.js文件：

var path = require('path');

module.exports = {

mode: 'development', // tells webpack that this is a development build. the 'production' switch will minify the code among other things

devtool: 'cheap-eval-source-map', // generate source maps for better debugging and dont take much time.

context: __dirname, // since this runs in a node environment, webpack will need the current directory name

entry: './build/app.js', // take this file and add to the bundled file whatever this file imports

output: {

path: path.join(__dirname, 'dist'), // output this in a dist folder

filename: 'bundle.js' // and name it bundle.js

// read medium post to know what's module and devServer because I dont have much room for comments

module: {

rules: [{

enforce: 'pre',

loader: 'eslint-loader',

test: /\.js$/

}, {

loader: 'babel-loader',

test: /\.js$/

}]

devServer: {

publicPath: '/dist/',

filename: 'bundle.js',

historyApiFallback: true,

overlay: true

}

};

如果現(xiàn)在運行webpack，就會看到所有文件都被打包成一個文件，放到dist目錄下：

webpack配置揭秘

祝賀你，給自己點獎勵吧。現(xiàn)在我們把所有文件都打包到一起，它幾乎可以用于生產(chǎn)環(huán)境了。

現(xiàn)在來討論下這個配置。我會逐一介紹每個配置項的意思。更詳細的資料可以參考手冊（https://webpack.js.org/）。

大多數(shù)配置項我都給出了注釋。這里說說沒加注釋的那些。

Webpack加載器（module對象）

這個可以想像成一條流水線上的一串代碼加載單元。最后一個加載器（這里是babel-loader）會最先被Webpack用來加載代碼。

我們要求webpack遍歷所有代碼，然后用babel-loader將代碼轉(zhuǎn)譯成ES5。

加載器對象還需要一個test設(shè)置項。它用這個設(shè)置項來匹配所有它應(yīng)該負責的文件（本例中用一段正則表達式匹配了所有擴展名為.js的文件）。

轉(zhuǎn)譯之后，就執(zhí)行下一個加載器（這里是eslint-loader）。最后，把所有改變從內(nèi)存中寫到文件中，然后輸出到output對象指定的文件里。

但這并不是我們的配置文件的行為。我們在ESLint加載器上加了個enforce: pre，因為我們希望先運行清理器。

這是因為輸出的結(jié)果只有一個文件，而且如果使用最小化和混淆功能的話，這個文件通常會變成人類無法閱讀的格式（生產(chǎn)環(huán)境中經(jīng)常會如此）。

清理器看這個文件就會瘋了。這不是我們想要的，所以我們希望webpack先運行清理器，再進行轉(zhuǎn)譯。

除此之外，你還可以使用好幾個加載器，可以加載樣式表文件、SVG圖像，以及字體。有個我總會用到的加載器就是html-loader。

HTML加載器

在Angular下，我們通常會在directive/component中包含模板文件，因此可以在Webpack中使用html-loader進行加載。

templateUrl: './users/partial/user.tpl.html' // 把這種寫法改成：templateUrl: require('./users/partial/user.tpl.html')

Webpack由一個超大規(guī)模的社區(qū)支持，他們寫了很多優(yōu)秀的加載器，以及很完善的文檔。不管你有什么需求，很可能已經(jīng)有現(xiàn)成的加載器了。

Webpack開發(fā)服務(wù)器（devServer）

Webpack開發(fā)服務(wù)器是個獨立于Webpack的模塊。它會啟動自己的服務(wù)器，然后監(jiān)視任何文件的改動。如果文件發(fā)生變化，Webpack開發(fā)服務(wù)器就會重新打包并自動刷新頁面。

如果發(fā)生錯誤，它會在屏幕上顯示一個覆蓋層（通過overlay配置項設(shè)置），并直接在瀏覽器中顯示錯誤信息。而且它速度非常快，因為一切都在內(nèi)存中完成，不會訪問硬盤。

當然，為了運行webpack開發(fā)服務(wù)器，你首先得有一個基礎(chǔ)的構(gòu)建好的文件（即，至少要運行webpack一次以生成構(gòu)建好的文件）。

一旦生成之后，就可以運行該命令。該命令會啟動服務(wù)器并提供靜態(tài)文件，打開瀏覽器（默認是8080端口），并持續(xù)監(jiān)視任何變動。

搞定了！

不過這并不是結(jié)局。還有許多你能做的事情。在工作中，我們使用Flow在編碼時進行靜態(tài)類型檢查。

靜態(tài)類型檢查器可以檢查代碼，并在發(fā)生錯誤時發(fā)出警告，比如調(diào)用函數(shù)時提供了錯誤類型的參數(shù)等。Flow也可以集成到Webpack中。

我們還使用Prettier實現(xiàn)編碼時的自動格式化。它能讓代碼更可讀。

傻瓜都能寫計算機能看懂的代碼。
好的程序員寫人類能看懂的代碼。
—— Martin Fowler。

我要把這句話貼在我的桌子上。祝賀你！你成功了！

如果你讀完了這篇超長的文章，我要跟你擊掌向你道喜，你是人生贏家。JavaScript對我而言并不容易。

我很希望我在第一個項目中編寫UI時能懂得這些東西。但我估計這就是前端開發(fā)對我的意義。持續(xù)學習，持續(xù)進步。

原文：https://medium.freecodecamp.org/the-brain-fatigued-javascripters-guide-to-modern-frontend-tooling-in-2018-9818a04e9ec5
作者：Amin Mohamed Ajani，Javascript開發(fā)人員，曾為FireFox開發(fā)工具貢獻代碼。用戶界面工程師，擅長iQuanti，reactjs，nodejs和TheIsmaili。
譯者：彎月，責編：胡巍巍

“征稿啦”
CSDN 公眾號秉持著「與千萬技術(shù)人共成長」理念，不僅以「極客頭條」、「暢言」欄目在第一時間以技術(shù)人的獨特視角描述技術(shù)人關(guān)心的行業(yè)焦點事件，更有「技術(shù)頭條」專欄，深度解讀行業(yè)內(nèi)的熱門技術(shù)與場景應(yīng)用，讓所有的開發(fā)者緊跟技術(shù)潮流，保持警醒的技術(shù)嗅覺，對行業(yè)趨勢、技術(shù)有更為全面的認知。
如果你有優(yōu)質(zhì)的文章，或是行業(yè)熱點事件、技術(shù)趨勢的真知灼見，或是深度的應(yīng)用實踐、場景方案等的新見解，歡迎聯(lián)系 CSDN 投稿，聯(lián)系方式：微信（guorui_1118，請備注投稿+姓名+公司職位），郵箱（guorui@csdn.net）。

在線咨詢

上一篇：html開發(fā)筆記17-從網(wǎng)頁中畫表格
下一篇：使用CSS隱藏頁面元素的幾種方法，你知道它們的具體區(qū)別嗎？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JavaScript代碼怎樣引入到HTML中？

1 <script>標簽嵌入

2 讀取外部JavaScript文件

3 onload嵌入

4 DOM ContentLoaded嵌入

5 動態(tài)載入JavaScript文件

您的項目需求