2. 程式人生 > 其它 >java中String的一些常用方法

java中String的一些常用方法

阿新 • • 發佈：2020-12-07

webpack

webpacknodevue

1. 模組化

案例:

專案結構:


專案結構

info.js

/**
 * info.js 是用於演示各種資料資訊的js檔案
 */

//使用ES6語法規範匯出資料
export const name = '張三';
export const age = 18;
export const height = 18.88
 
;

mathUtils.js

/**
 * mathUtils.js 是提供各種數學計算方法的js檔案
 *
 */

/**
 * 計算兩個數的和
 * @param num1 加數1
 * @param num2 加數2
 * @returns {*} 和
 */
function add(num1,num2){
    return num1 + num2;
}


/**
 * 計算兩個數的乘積
 * @param num1 積數
 * @param num2 積數
 * @returns {number} 乘積
 */
function mul(num1,num2){
    return num1 * num2;
}

/**
 * 使用commonJs 方式匯出
 * @type {{add: (function(*, *): *), mul: (function(*, *): number)}}
 */
 

// module.exports = {
//    add,mul
// }

/**
 * 使用 ES6規範匯出
 */
export {add,mul};

main.js


/**
 *  main.js是用來配置匯出的js檔案,所有的js匯出的工作,都是通過main.js來完成的
 */

//1. 使用commonJs的模組化規範 匯入
//const {add,mul} = require('./mathUtils.js');

//1. 使用ES6的模組化規範 匯入
import {add,mul} from './mathUtils.js';

//使用匯入的方法
let he = add(20,30);
console
 
.log('求和方法:',he);
let ji = mul(20,30);
console.log('求乘積方法:',ji);

//2. 使用ES6的模組化的規範 匯入
import{name,age,height} from './info.js';

//使用匯入的資料
console.log(name);
console.log(age);
console.log(height);

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-webpack的起步</title>
</head>
<body>

<!--使用模組化的方式引用js檔案-->
<script src="./src/main.js" type="module"></script>
</body>
</html>

在瀏覽器執行index.html 結果:


執行結果

2. webPack的理解

從本質上來講，webpack是一個現代的JavaScript應用的靜態模組打包工具。


webpack的作用

前端模組化的一些方案: AMD、CMD、CommonJS、ES6。 其中 ES6的規範,瀏覽器是直接支援的,而其他的規範,我們需要利用打包工具,進行轉換之後,才能被瀏覽器所認識.

常用的打包工具:
grunt/gulp, webpack

  • 在ES6之前，我們要想進行模組化開發，就必須藉助於其他的工具，讓我們可以進行模組化開發。

  • 並且在通過模組化開發完成了專案後，還需要處理模組間的各種依賴，並且將其進行整合打包。

  • 而webpack其中一個核心就是讓我們可能進行模組化開發，並且會幫助我們處理模組間的依賴關係。

  • 而且不僅僅是JavaScript檔案，我們的CSS、圖片、json檔案等等在webpack中都可以被當做模組來使用（在後續我們會看到）。

  • 這就是webpack中模組化的概念。

    如何理解打包:

  • 理解了webpack可以幫助我們進行模組化，並且處理模組間的各種複雜關係後，打包的概念就非常好理解了。

  • 就是將webpack中的各種資源模組進行打包合併成一個或多個包(Bundle)。

  • 並且在打包的過程中，還可以對資源進行處理，比如壓縮圖片，將scss轉成css，將ES6語法轉成ES5語法，將TypeScript轉成 JavaScript等等操作。

  • 但是打包的操作似乎grunt/gulp也可以幫助我們完成，它們有什麼不同呢？

3. webpack的安裝

  • 安裝webpack首先需要安裝Node.js，Node.js自帶了軟體包管理工具npm

    • NodeJs下載地址: https://nodejs.org/en/download/
    • 檢視node版本: node -v

  • 全域性安裝webpack(這裡我先指定版本號3.6.0，因為vue cli2依賴該版本)

  • 區域性安裝webpack（後續才需要）

  • 為什麼全域性安裝後，還需要區域性安裝呢？

    • 在終端直接執行webpack命令，使用的全域性安裝的webpack
    • 當在package.json中定義了scripts時，其中包含了webpack命令，那麼使用的是區域性webpack

4. 使用webpack進行打包

dist → distribution 釋出

webpack 支援上述所有的模組化(ES6,common.js,....)的方式,它會在打包時,將這些模組化的打包方式,自動轉換成瀏覽器可識別的js的程式碼.

工程結構:


工程結構

webpack打包命令: webpack src/main.js dist/bundle.js 即:將指定資料夾下的檔案,打包到另一個指定資料夾下,併為其指定名稱.


執行打包命令

上述命令執行完成之後,會在 dist 資料夾下生成bundle.js的檔案,我們在 index.html檔案中,引用這個檔案即可.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-webpack的起步</title>
</head>
<body>

<!--使用模組化的方式引用js檔案-->
<script src="./dist/bundle.js"></script>
</body>
</html>

執行index.html 執行結果如下:


執行結果

我們發現如果我們總是寫 webpack src/main.js dist/bundle.js 這樣的命令來,執行打包,操作很費勁,實際上,我們可以通過 配置的方式,來實現打包操作.

5. webpack的配置

我們需要在工程下建立一個名為webpack.config.js的檔案,這個檔案就是用來配置webpack的行為的檔案.

5-1. 打包配置

//通過commonjs的方式來匯入node中path包的功能
const path = require('path');

// 通過commonjs的方式來匯出配置
module.exports = {
    entry:'./src/main.js',   //打包入口
    output:{                 //打包出口
        path: path.resolve(__dirname,'dist'),             //路徑 (注意: path需要絕對路徑)
        filename:'bundle.js' //檔名
    }
}

path.resolve(); 方法的作用是拼接路徑. 可以理解成是C#中的Path.Combo()方法, __dirname可以獲取當前檔案所在的絕對路徑.

上面的程式碼中,我們需要引用nodeJs中的path包,那麼我們就需要注意,一旦專案中需要使用到node相關的東西,那麼我們就需要,在專案的路徑下對node進行初始化. 初始化命令: npm init


初始化node配置

在初始化命令執行結束之後,在工程下會出現一個名為 package.json的配置檔案,內容如下:

package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

我們可以在package.json檔案中儲存的是,對webpack,依賴檔案的相關配置.

如果當前專案已經是一個完成的了的工程,但是本地沒有依賴檔案,那麼我們可以在當前工程的目錄下,執行npm install,來安裝此工程所需要的依賴檔案.

以上工作完成之後,我們就可以直接使用webpack命令來進行打包操作了.


打包執行過程

在已經使用npm管理的專案中,我們可以使用 npm run build 命令,來和webpack 命令,建立對應關係,以此來使用npm run build來進行打包工作,那麼我們應該如何配置呢? 我們需要在package.json檔案中,對這個操作進行配置.

package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"
}

我們在package.json的scripts配置節中,新增 "build":"webpack" 的配置,就能使用 npm run build命令來對映執行webpack命令的打包操作.

在package.json中配置的好處是,如果專案本地安裝了依賴,那麼使用npm命令時,優先使用的是本地配置依賴, 而如果直接在終端中使用webpack命令的話,使用的就是全域性的依賴了,

  • package.json中的scripts的指令碼在執行時，會按照一定的順序尋找命令對應的位置。
    • 首先，會尋找本地的node_modules/.bin路徑中對應的命令。
    • 如果沒有找到，會去全域性的環境變數中尋找。

為什麼說是有好處呢?

因為比如package.json中,專案配置需要依賴專案需要webpack版本是4.1.1才能進行打包,而全域性的webpack版本只有3.0.0,那麼在打包的時候,就會出錯,所以優先使用本地配置,是很重要的.

在本地安裝webpack的方法,就是在專案路徑下執行命令npm install [email protected] --save-dev安裝即可,這種在專案下安裝依賴的行為,我們稱之為開發時依賴. 向對應的在釋出後,我們也需要執行時依賴.

在命令執行完成之後,我們可以在package.json檔案中發現多瞭如下配置:

我們會發現webpack的配置,被放入到了devDependencies配置節下,表明此時的依賴,屬於開發時依賴.


開發時依賴

而執行時依賴,的配置會被配置到dependencies中.

安裝完webpack包之後,我們會發現我們的工程下多了一個名為node_modules的資料夾,我們所有的本地依賴,都會被放置在node_modules資料夾中.

6. 什麼是loader

  • loader是webpack中一個非常核心的概念。
  • webpack用來做什麼呢？
    • 在我們之前的例項中，我們主要是用webpack來處理我們寫的js程式碼，並且webpack會自動處理js之間相關的依賴。
    • 但是，在開發中我們不僅僅有基本的js程式碼處理，我們也需要載入css、圖片，也包括一些高階的將ES6轉成ES5程式碼，將TypeScript轉成ES5程式碼，將scss、less轉成css，將.jsx、.vue檔案轉成js檔案等等。
    • 對於webpack本身的能力來說，對於這些轉化是不支援的。
    • 那怎麼辦呢？給webpack擴充套件對應的loader就可以啦。
  • loader使用過程：
    • 步驟一：通過npm安裝需要使用的loader
    • 步驟二：在webpack.config.js中的modules關鍵字下進行配置
  • 大部分loader我們都可以在webpack的官網中找到，並且學習對應的用法。
    • 中文網地址 https://www.webpackjs.com/loaders/


webpack中文網

6-1. loader css檔案

最終工程結構:

工程結構圖

我們在工程下建立以下css檔案,最終的目的是,我們也需要將它通過webpack打包, 即把css檔案當成一個模組,也和其他js檔案一樣打包到 bundle.js中
normal.css

body{
    background-color: pink;
}

所以我們需要先在main.js中,匯入此css檔案


依賴css檔案

此處如果我們打包就會遇到以下問題:


打包css檔案出錯

上面的圖片中,描述了為什麼我們打包css檔案出錯了,它是說,我們對css檔案進行打包時,沒有合適的打包依賴,,解決步驟:

  1. 根據webpack官網提供的css樣式依賴,進行安裝.(安裝完成之後,會在package.json檔案中出現相應的依賴配置資訊)
  2. 在webpack.config.js檔案中,對依賴,如何使用進行配置.webpack官網也會配置配置的例子.
  3. 再執行npm run build命令進行打包.


在webpack官網尋找依賴包

此處我們安裝css依來loader命令 npm install --save-dev [email protected]

在webpack.config.js中進行配置如下:

module: {
  rules: [
    {
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
    }
  ]
}

此時我們還需要新增一個loader依賴, 因為css-loader只負責載入css樣式,並不負責css樣式的解析,如果我們想要讓css樣式生效,那麼我們還需要再安裝一個依賴.

此處我們安裝css解析依來loader命令 npm install [email protected] --save-dev

在webpack.config.js中進行配置如下:

module: {
      rules: [
          {
              test: /\.css$/,
              use: [
                  // css-loader只負責將css檔案進行載入
                  // style-loader負責將樣式新增到DOM中
                  // 使用多個loader時, 是從右向左
                  { loader: "style-loader" },
                  { loader: "css-loader" }
              ]
          }
      ]
  }

再使用 npm run build 命令打包即可.

6-2. 安裝less依賴

命令npm install --save-dev [email protected] [email protected]
配置:

{
              test: /\.less$/,
              use: [{
                  loader: "style-loader" // creates style nodes from JS strings
              }, {
                  loader: "css-loader" // translates CSS into CommonJS
              }, {
                  loader: "less-loader" // compiles Less to CSS
              }]
          }

6-3. 安裝圖片資源的依賴

命令npm install --save-dev [email protected]

webpack.config.js中的配置如下:

{
              test: /\.(png|jpg|gif|jpeg)$/,
              use: [
                  {
                      loader: 'url-loader',
                      options: {

                          //當檔案大小,小於limit的值時,會將圖片編譯成base64字串形式
                          //當檔案大小,大於limit的值時,則需要使用`file-loader`依賴
                          limit: 13000,
                          name: 'img/[name].[hash:8].[ext]' //指定檔名稱格式
                      }
                  }
              ]
}

file-loader 依賴安裝命令
命令: npm install --save-dev [email protected]

此時,我們在打包,之後執行發現沒有報錯,但是瀏覽器也不顯示背景圖,即,如果我們通過的是file-loader依賴,來載入的圖片,我們就需要將這個被依賴的圖片資源進行打包.

但是,我們在開發中依賴的圖片檔案在src中,但是釋出之後的圖片依賴,應該是在dist中,所以我們需要在這個地方進行干預一下,我們需要在webpack.config.js配置檔案的output節點中新增一個配置publicPath:"dist/",加了這個配置之後,以後凡是涉及到url的部分,都會在連結前面加上dist/,字首.

相關推薦

c++ string類的常用方法_Java中String的常用方法

技術標籤：c++ string類的常用方法char轉stringjava string陣列轉stringjava中string轉datejava中string轉intjava中陣列轉string

c++ string 切割_Java中String類常用方法

技術標籤：c++ string 切割 public class String_main {public static void main(String[] args) {// String類常用方法String str = "Hello Word!";//charAt()擷取一個字元。System.out.println(st

Java中Object類常用方法

Object類常用方法 JDK類庫的根類：Object 1、這個老祖宗類中的方法我們需要先研究一下，因為這些方法都是所有子類通用的。

java中string類concat方法和＋的區別

都可以將2個字串拼接到一塊，這一點2這功能相同。 以下程式碼的執行效果相同：

Java中Math類常用方法

​在編寫程式時，可能需要計算一個數的平方根、絕對值或獲取一個隨機數等。java.lang包中的Math類包含許多用來進行科學計算的static方法，這些方法可以直接通過類名呼叫。另外，Math類還有兩個static常量：E和PI。

java中String的一些常用方法

技術標籤：學習ingjava字串 Java字串String小筆記 菜鳥有話說一、String格式二、String函式1.長度------length()2.比較------equals()||compareTo()3.開頭------startsWith()4.結尾------endsWith()5.檢索--

Java中String類的常用方法（常用API）——隨筆（一）

一、字串內容的比較 方法名　　　　　　　　　　　　　　說明public boolean equals (Object anObject)　　　　　　將此字串與指定物件進行比較。只關心字元內容是否一致！public boolean equalsIgnoreCase (String

一些Java中不為人知的特殊方法，學完後面試官可能都沒你知道的多！

如果你用過反射並且執行過getDeclaredMethods方法的話，你可能會感到很吃驚。你會發現出現了很多原始碼裡沒有的方法。如果你看一下這些方法的修飾符的話，可能會發現裡面有些方法是volatile的。順便說一句，如果在Ja

Java字串處理——String類常用方法

原文連結：https://www.cnblogs.com/windbyside/p/9393716.html 建立例項： String str = new String();str = \"String\";

java中map集合常用操作方法

技術標籤：Java集合javamap集合 1.map集合常用方法 package Map; import java.util.*; import java.util.stream.Collectors;

20.Java String 類詳解 / String類的常量池（瞭解）/ String 類常用方法（掌握）

Java String 類詳解、String類的常量池（瞭解）、String 類常用方法（掌握） String 類詳解

Java中equals（）方法判斷字串相等時報NullPointerException，如s.equals("String"）

1、題目 閱讀getCondition方法，找出其中的錯誤點並修復 要求不能使用第三方包，只能用JDK中的方法

java中String.intern()方法具有什麼功能呢？

下文筆者講述java中String.intern()方法的功能簡介說明，如下所示: String.intern原理

Java中String拼接分隔符的幾種方法

在碼程式碼的過程當中，難免會遇到處理一些字串拼接的問題，最讓人容易想到的方法就是使用+進行操作。

Oracle中字串擷取常用方法總結【推薦】

substr 函式：擷取字串 語法：SUBSTR(string，start， [length]) string：表示源字串，即要擷取的字串。

oracle中的一些常用函式及示例

前言 學習oracle也有一段時間了，發現oracle中的函式好多，對於做後臺的程式猿來說，大把大把的時間還要學習很多其他的新東西，再把這些函式也都記住是不太現實的，所以總結了一下oracle中的一些常用函式及示例，一是

VMS中解協議常用方法備忘(小結)

1、由ASICC編碼的字串轉換為十六進位制byte陣列 2、將指定位元組陣列中的一個位元組序列解碼為一個字串

JS操作Fckeditor的一些常用方法(獲取、插入等)

javascript獲取和設定FCKeditor內容 利用Javascript取和設FCKeditor值也是非常容易的，如下：

JAVA中String介紹及常見面試題小結

字串廣泛應用 在 Java 程式設計中，在 Java 中字串屬於物件，Java 提供了 String 類來建立和操作字串。

Go中strings的常用方法詳解

string操作在程式設計中具有極高的頻率，那麼string中有哪些有用的方法呢？ 使用strings直接操作