環(huán)境準(zhǔn)備
創(chuàng)建項(xiàng)目
npx create-react-app my-react
進(jìn)入項(xiàng)目并啟動(dòng)
cd my-react && npm start
1
src/index.js
先把src里面的東西全部刪掉，重寫(xiě)了index.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
render(){
return (
<div>Hellow, World</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
JSX
一個(gè)React組件中，render方法中return出去的內(nèi)容就是這個(gè)組件將要渲染的內(nèi)容，然后Babel 會(huì)把 JSX 轉(zhuǎn)譯成一個(gè)名為 React.createElement() 函數(shù)調(diào)用。
React.createElement(
'div',
{},
'Hello, World'
)
React.createElement() 接收三個(gè)參數(shù)：
第一個(gè)參數(shù)是必填，傳入的是似HTML標(biāo)簽名稱(chēng): ul, li, div;
第二個(gè)參數(shù)是選填，表示的是屬性: className;
第三個(gè)參數(shù)是選填, 子節(jié)點(diǎn): 要顯示的文本內(nèi)容;
React.createElement() 會(huì)預(yù)先執(zhí)行一些檢查，以幫助你編寫(xiě)無(wú)錯(cuò)代碼，但實(shí)際上它創(chuàng)建了一個(gè)這樣的對(duì)象：
// 注意：這是簡(jiǎn)化過(guò)的結(jié)構(gòu)
const element = {
type: 'div',
props: {
className: '',
children: 'Hello, world!'
}
};
元素渲染
與瀏覽器的 DOM 元素不同，React 元素是創(chuàng)建開(kāi)銷(xiāo)極小的普通對(duì)象。React DOM 會(huì)負(fù)責(zé)更新 DOM 來(lái)與 React 元素保持一致。
想要將一個(gè) React 元素渲染到根 DOM 節(jié)點(diǎn)中，只需把它們一起傳入 ReactDOM.render()：
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
render方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)為我們的 React 根級(jí)組件，第二個(gè)參數(shù)接收一個(gè) DOM 節(jié)點(diǎn)，代表我們將把和 React 應(yīng)用掛載到這個(gè) DOM 節(jié)點(diǎn)下，進(jìn)而渲染到瀏覽器中。
組件 & props
組件，從概念上類(lèi)似于 JavaScript 函數(shù)。它接受任意的入?yún)ⅲ?“props”），并返回用于描述頁(yè)面展示內(nèi)容的 React 元素。
函數(shù)組件：
function Welcome(props){
renter (
<h1> Hello, {props.name} </h1>
)
}
<Welcome name="World"/>
該函數(shù)是一個(gè)有效的 React 組件，因?yàn)樗邮瘴ㄒ粠в袛?shù)據(jù)的 “props”（代表屬性）對(duì)象與并返回一個(gè) React 元素。這類(lèi)組件被稱(chēng)為“函數(shù)組件”，因?yàn)樗举|(zhì)上就是 JavaScript 函數(shù)。
class組件：
class Welcome extends React.Component {
render(){
renter (
<h1> Hello, {thhis.props.name} </h1>
)
}
}
<Welcome name="World"/>
組件名稱(chēng)必須以大寫(xiě)字母開(kāi)頭。
組件無(wú)論是使用函數(shù)聲明還是通過(guò) class 聲明，都決不能修改自身的 props。
State & 生命周期
State 與 props 類(lèi)似，但是 state 是私有的，并且完全受控于當(dāng)前組件。
class Clock extends React.Component {
constructor(props){
super(props)
this.state = {
date : new Date()
}
}
componentDidMount() {
//這里是Clock組件第一次被渲染到DOM時(shí)會(huì)調(diào)用，也就是掛載
}
componentWillUnmount() {
//當(dāng)DOM組件Clock被刪除時(shí)，會(huì)調(diào)用，也就是卸載
}
render(){
return (
<div>
<h1>Hello, World</h1>
<h2>It's {this.state.date.toLocaleTimeString()}</h2>
</div>
)
}
}
修改state中數(shù)據(jù)：
class Clock extends React.Component {
constructor(props){
super(props)
this.state = {
date: new Date()
}
}
componentDidMount() {
//這里是Clock組件第一次被渲染到DOM時(shí)會(huì)調(diào)用，也就是掛載
this.timer = setInterval(()=>{
this.tick()
},1000)
}
tick(){
this.setState({
date: new Date()
})
}
componentWillUnmount() {
//當(dāng)DOM組件Clock被刪除時(shí)，會(huì)調(diào)用，也就是卸載
clearInterval(this.timer)
}
render(){
return (
<div>
<h1>Hello, World</h1>
<h2>It's {this.state.date.toLocaleTimeString()}</h2>
</div>
)
}
}
不要直接修改 State,構(gòu)造函數(shù)是唯一可以給 this.state 賦值的地方
this.setState({name: 'World'})
1
State 的更新可能是異步的,要解決這個(gè)問(wèn)題，可以讓setState接受一個(gè)函數(shù)而不是一個(gè)對(duì)象，這個(gè)函數(shù)用上一個(gè) state 作為第一個(gè)參數(shù)，將此次更新被應(yīng)用時(shí)的 props 做為第二個(gè)參數(shù)：
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
事件處理
React 事件的命名采用小駝峰式（camelCase），而不是純小寫(xiě)。
使用 JSX 語(yǔ)法時(shí)你需要傳入一個(gè)函數(shù)作為事件處理函數(shù)，而不是一個(gè)字符串。
在 React 中一個(gè)不同點(diǎn)是你不能通過(guò)返回 false 的方式阻止默認(rèn)行為。你必須顯式的使用 preventDefault 。例如，傳統(tǒng)的 HTML 中阻止鏈接默認(rèn)打開(kāi)一個(gè)新頁(yè)面，你可以這樣寫(xiě)：
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
在 React 中，可能是這樣的：
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
class函數(shù)中綁定this
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// 此語(yǔ)法確保 handleClick 內(nèi)的 this 已被綁定。
return (
<button onClick={() => this.handleClick()}>
Click me
</button>
);
}
}
在循環(huán)中，通常我們會(huì)為事件處理函數(shù)傳遞額外的參數(shù)
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
1
2
列表和key
function ListItem(props) {
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
語(yǔ)法
在 JSX 中所有的屬性都要更換成駝峰式命名，比如 onclick 要改成 onClick，唯一比較特殊的就是 class，因?yàn)樵?JS 中 class 是保留字，我們要把 class 改成 className 。
這是一個(gè)最基本的左側(cè)菜單欄，實(shí)現(xiàn)的過(guò)程很簡(jiǎn)單，官方的說(shuō)明文檔就有，但是我在導(dǎo)入layer.js之后，直接復(fù)制這段官方代碼到我的編輯器上時(shí)，發(fā)現(xiàn)頁(yè)面是這樣的：
發(fā)現(xiàn)，綁定屬性的菜單并沒(méi)有下拉選項(xiàng)，這個(gè)問(wèn)題在我導(dǎo)入layer.all.js之后解決了，而且發(fā)現(xiàn)如果是在頁(yè)面的最上方導(dǎo)入的話(huà)也沒(méi)有下拉選項(xiàng)，只有在html代碼下面導(dǎo)入，才可以顯示 ，不知道是什么原因。
頁(yè)面截圖：
tab項(xiàng)右鍵菜單：
這里右鍵菜單的樣式并沒(méi)有做太多的美化。
html代碼：（頁(yè)面中關(guān)于引入js和css文件的部分被我省略了，還有要注意jQuery的引入順序）
<div class="layui-tab layui-tab-card site-demo-button" style="position: relative;">
<ul class="layui-nav layui-nav-tree layui-nav-side">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默認(rèn)展開(kāi)</a>
<dl class="layui-nav-child">
<dd>
<a data-url="a" data-id="11" data-title="選項(xiàng)a" href="#" class="site-demo-active" data-type="tabAdd">選項(xiàng)a</a>
</dd>
<dd>
<a href="#" data-url="b" data-title="選項(xiàng)b" data-id="22" class="site-demo-active" data-type="tabAdd">選項(xiàng)b</a>
</dd>
<dd>
<a href="">跳轉(zhuǎn)</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解決方案</a>
<dl class="layui-nav-child">
<dd>
<a href="">移動(dòng)模塊</a>
</dd>
<dd>
<a href="">后臺(tái)模版</a>
</dd>
<dd>
<a href="">電商平臺(tái)</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="#" data-url="c" data-title="選項(xiàng)c" data-id="33" class="site-demo-active" data-type="tabAdd">產(chǎn)品c</a>
</li>
<li class="layui-nav-item">
<a href="">大數(shù)據(jù)</a>
</li>
</ul>
<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
<ul class="layui-tab-title">
</ul>
<ul class="rightmenu" style="display: none;position: absolute;">
<li data-type="closethis">關(guān)閉當(dāng)前</li>
<li data-type="closeall">關(guān)閉所有</li>
</ul>
<div class="layui-tab-content">
</div>
</div>
</div>
js代碼：
layui.use('element', function() {
var $ = layui.jquery;
var element = layui.element; //Tab的切換功能，切換事件監(jiān)聽(tīng)等，需要依賴(lài)element模塊
//觸發(fā)事件
var active = {
//在這里給active綁定幾項(xiàng)事件，后面可通過(guò)active調(diào)用這些事件
tabAdd: function(url,id,name) {
//新增一個(gè)Tab項(xiàng) 傳入三個(gè)參數(shù)，分別對(duì)應(yīng)其標(biāo)題，tab頁(yè)面的地址，還有一個(gè)規(guī)定的id，是標(biāo)簽中data-id的屬性值
//關(guān)于tabAdd的方法所傳入的參數(shù)可看layui的開(kāi)發(fā)文檔中基礎(chǔ)方法部分
element.tabAdd('demo', {
title: name,
content: '<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="'+url+'.html" style="width:100%;height:99%;"></iframe>',
id: id //規(guī)定好的id
})
CustomRightClick(id); //給tab綁定右擊事件
FrameWH(); //計(jì)算ifram層的大小
},
tabChange: function(id) {
//切換到指定Tab項(xiàng)
element.tabChange('demo', id); //根據(jù)傳入的id傳入到指定的tab項(xiàng)
},
tabDelete: function (id) {
element.tabDelete("demo", id);//刪除
}
, tabDeleteAll: function (ids) {//刪除所有
$.each(ids, function (i,item) {
element.tabDelete("demo", item); //ids是一個(gè)數(shù)組，里面存放了多個(gè)id，調(diào)用tabDelete方法分別刪除
})
}
};
//當(dāng)點(diǎn)擊有site-demo-active屬性的標(biāo)簽時(shí)，即左側(cè)菜單欄中內(nèi)容 ，觸發(fā)點(diǎn)擊事件
$('.site-demo-active').on('click', function() {
var dataid = $(this);
//這時(shí)會(huì)判斷右側(cè).layui-tab-title屬性下的有l(wèi)ay-id屬性的li的數(shù)目，即已經(jīng)打開(kāi)的tab項(xiàng)數(shù)目
if ($(".layui-tab-title li[lay-id]").length <= 0) {
//如果比零小，則直接打開(kāi)新的tab項(xiàng)
active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
} else {
//否則判斷該tab項(xiàng)是否以及存在
var isData = false; //初始化一個(gè)標(biāo)志，為false說(shuō)明未打開(kāi)該tab項(xiàng) 為true則說(shuō)明已有
$.each($(".layui-tab-title li[lay-id]"), function () {
//如果點(diǎn)擊左側(cè)菜單欄所傳入的id 在右側(cè)tab項(xiàng)中的lay-id屬性可以找到，則說(shuō)明該tab項(xiàng)已經(jīng)打開(kāi)
if ($(this).attr("lay-id") == dataid.attr("data-id")) {
isData = true;
}
})
if (isData == false) {
//標(biāo)志為false 新增一個(gè)tab項(xiàng)
active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
}
}
//最后不管是否新增tab，最后都轉(zhuǎn)到要打開(kāi)的選項(xiàng)頁(yè)面上
active.tabChange(dataid.attr("data-id"));
});
function CustomRightClick(id) {
//取消右鍵 rightmenu屬性開(kāi)始是隱藏的 ，當(dāng)右擊的時(shí)候顯示，左擊的時(shí)候隱藏
$('.layui-tab-title li').on('contextmenu', function () { return false; })
$('.layui-tab-title,.layui-tab-title li').click(function () {
$('.rightmenu').hide();
});
//桌面點(diǎn)擊右擊
$('.layui-tab-title li').on('contextmenu', function (e) {
var popupmenu = $(".rightmenu");
popupmenu.find("li").attr("data-id",id); //在右鍵菜單中的標(biāo)簽綁定id屬性
//判斷右側(cè)菜單的位置
l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
popupmenu.css({ left: l, top: t }).show(); //進(jìn)行絕對(duì)定位
//alert("右鍵菜單")
return false;
});
}
$(".rightmenu li").click(function () {
//右鍵菜單中的選項(xiàng)被點(diǎn)擊之后，判斷type的類(lèi)型，決定關(guān)閉所有還是關(guān)閉當(dāng)前。
if ($(this).attr("data-type") == "closethis") {
//如果關(guān)閉當(dāng)前，即根據(jù)顯示右鍵菜單時(shí)所綁定的id，執(zhí)行tabDelete
active.tabDelete($(this).attr("data-id"))
} else if ($(this).attr("data-type") == "closeall") {
var tabtitle = $(".layui-tab-title li");
var ids = new Array();
$.each(tabtitle, function (i) {
ids[i] = $(this).attr("lay-id");
})
//如果關(guān)閉所有 ，即將所有的lay-id放進(jìn)數(shù)組，執(zhí)行tabDeleteAll
active.tabDeleteAll(ids);
}
$('.rightmenu').hide(); //最后再隱藏右鍵菜單
})
function FrameWH() {
var h = $(window).height() -41- 10 - 60 -10-44 -10;
$("iframe").css("height",h+"px");
}
$(window).resize(function () {
FrameWH();
})
});
tab項(xiàng)是放在<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;"> 這個(gè)div中的，其中有一個(gè)重要的屬性lay-filter，在js中調(diào)用的tabAdd，tabDelete等多種方法都攜帶了這個(gè)參數(shù)，我對(duì)此的理解是相當(dāng)于一個(gè)判斷攔截功能，將tab項(xiàng)放在lay-filter=‘demo’的div中。可以借助該參數(shù)，完成指定元素的局部更新。
其中還有關(guān)于element的操作，var element = layui.element
element模塊的實(shí)例
返回的element變量為該實(shí)例的對(duì)象，攜帶一些用于元素操作的基礎(chǔ)方法，我們就是用這些方法進(jìn)行tab項(xiàng)的新增和刪除還有切換。
這是element 中的tabAdd方法，其中的content可以是一個(gè)iframe頁(yè)面，在此例中，我就是傳遞了一個(gè)簡(jiǎn)單的頁(yè)面，這就實(shí)現(xiàn)了不同頁(yè)面間的一些切換。
element.tabAdd('demo', {
title: '選項(xiàng)卡的標(biāo)題'
,content: '選項(xiàng)卡的內(nèi)容' //支持傳入html
,id: '選項(xiàng)卡標(biāo)題的lay-id屬性值'
});
————————————————
版權(quán)聲明：本文為CSDN博主「nb7474」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/nb7474/article/details/79413460/
要實(shí)現(xiàn)JavaScript的拖拽效果，首先我們需要知道事件對(duì)象幾個(gè)有關(guān)于實(shí)現(xiàn)拖拽效果的坐標(biāo)
獲取事件對(duì)象 var e = e || window.event;
根據(jù)需求需要用到的拖拽效果的坐標(biāo)
clientX:鼠標(biāo)點(diǎn)擊位置相對(duì)于瀏覽器可視區(qū)域的水平偏移量(不會(huì)計(jì)算水平滾動(dòng)的距離)
clientY:鼠標(biāo)點(diǎn)擊位置相對(duì)于瀏覽器可視區(qū)域的垂直偏移量(不會(huì)計(jì)算垂直滾動(dòng)條的距離)
offsetX:鼠標(biāo)點(diǎn)擊位置相對(duì)于觸發(fā)事件對(duì)象的水平距離
offsetY:鼠標(biāo)點(diǎn)擊位置相對(duì)于觸發(fā)事件對(duì)象的垂直距離
pageX:鼠標(biāo)點(diǎn)擊位置相對(duì)于網(wǎng)頁(yè)左上角的水平偏移量,也就是clientX加 上水平滾動(dòng)條的距離
pageY:鼠標(biāo)點(diǎn)擊位置相對(duì)于網(wǎng)頁(yè)左上角的垂直平偏移量,也就是clientY加上垂直滾動(dòng)條的距離
offsetLeft:如果父元素中有定位的元素，那么就返回距離當(dāng)前元素最近的定位元素邊緣的距離
offsetTop:如果父元素中沒(méi)有定位元素，那么就返回相對(duì)于body左邊緣距離
獲取元素自身大?。簅ffsetWidth和offsetHeight / clientWidth和clientHeight
offsetWidth和clientWidth的區(qū)別:就是offsetWidth包含邊框,clientWidth不包含邊框
實(shí)現(xiàn)拖拽需要用到：clientWidth、clientHeight、clientX、clientY、offsetLeft、offsetTop
首先搭建好html結(jié)構(gòu)和css樣式
<div class="wrap">
<div class="cover">
</div>
</div>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 500px;
height: 500px;
border: 1px solid deeppink;
position: relative;
margin: 50px auto;
}
.cover {
width: 150px;
height: 150px;
background: rgba(200, 7, 99, 0.5);
display: none;
position: absolute;
left: 0;
top: 0;
cursor: move;
}
注意：需要給大盒子和小盒子進(jìn)行定位：子絕父相
<script>
var wrap = document.querySelector(".wrap");
var cover = document.querySelector(".cover");
wrap.onmouseover = function() {
cover.style.display = "block";
wrap.onmousemove = function(e) {
var e = e || window.event;
var x1 = e.clientX;
var y1 = e.clientY;
//這里獲取到的e.clientX和e.clientY,可以看情況和需求改為e.pageX和e.pageY
var halfWidth = cover.clientWidth / 2;
var halfHeight = cover.clientHeight / 2;
var wrapLeft = wrap.offsetLeft;
var wrapTop = wrap.offsetTop;
var l = x1 - wrapLeft - halfWidth;
var t = y1 - wrapTop - halfHeight;
if (l <= 0) {
l = 0
}
if (l >= wrap.clientWidth - cover.clientWidth) {
l = wrap.clientWidth - cover.clientWidth
}
if (t <= 0) {
t = 0
}
if (t >= wrap.clientHeight - cover.clientHeight) {
t = wrap.clientHeight - cover.clientHeight
}
cover.style.left = l + "px";
cover.style.top = t + "px"
}
}
wrap.onmouseout = function() {
cover.style.display = "none";
}
</script>
var halfWidth = cover.clientWidth / 2;
var halfHeight = cover.clientHeight / 2;
var wrapLeft = wrap.offsetLeft;
var wrapTop = wrap.offsetTop;
var l = x1 - wrapLeft - halfWidth;
var t = y1 - wrapTop - halfHeight;
//限制范圍
if (l <= 0) {
l = 0
}
if (l >= wrap.clientWidth - cover.clientWidth) {
l = wrap.clientWidth - cover.clientWidth
}
if (t <= 0) {
t = 0
}
if (t >= wrap.clientHeight - cover.clientHeight) {
t = wrap.clientHeight - cover.clientHeight
}
注意：這里要限制小盒子在大盒子之間移動(dòng)的范圍，左上角的限制，當(dāng)小盒子超出范圍時(shí)，將0賦值給l和t。右下角小盒子移動(dòng)的范圍在大盒子寬度減去小盒子的寬度。
css面試題@響應(yīng)式布局如何實(shí)現(xiàn)
1為什么要使用響應(yīng)式布局
響應(yīng)式布局可以讓網(wǎng)站同時(shí)適配不同分辨率和不同的手機(jī)端，讓客戶(hù)有更好
的體驗(yàn)。
2如何實(shí)現(xiàn)
方案一：百分比布局
利用對(duì)屬性設(shè)置百分比來(lái)適配不同屏幕，注意這里的百分比是相對(duì)于父元素； 能夠設(shè)置的屬性有width，、height、padding、margin，其他屬性比如border、 font-size不能用百分比來(lái)設(shè)置的
由于沒(méi)辦法對(duì)font-size進(jìn)行百分比設(shè)置，所以用的最多就是對(duì)圖片和大塊布局進(jìn)行百分比設(shè)置。
方案二：使用媒體查詢(xún) (CSS3@media 查詢(xún))
利用媒體查詢(xún)?cè)O(shè)置不同分辨率下的css樣式，來(lái)適配不同屏幕。
媒體查詢(xún)相對(duì)于百分比布局，可以對(duì)布局進(jìn)行更細(xì)致的調(diào)整，但需要在每個(gè)分辨率下面都寫(xiě)一套css樣式。
該布局的話(huà)適用于簡(jiǎn)單的網(wǎng)頁(yè)，可以使移動(dòng)端和pc端使用一套網(wǎng)址。從而節(jié)約成本。也方便后期的維護(hù)，bootcss就是用了CSS3的media來(lái)實(shí)現(xiàn)響應(yīng)的 但是相對(duì)于復(fù)雜的網(wǎng)頁(yè)就不適合了（如：淘寶，京東）等等
方案三.rem 響應(yīng)式布局
rem布局的原理
rem：相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù)。
如 html的font-size為100px；那么2rem就為200px。
通俗的來(lái)講的話(huà)rem就是通過(guò)JavaScript來(lái)獲取頁(yè)面的寬度，從而動(dòng)態(tài)的計(jì)算rem。這樣就會(huì)使不同分辨率下展現(xiàn)出相同的效果。
//代碼展示
css面試題@響應(yīng)式布局如何實(shí)現(xiàn) 1為什么要使用響應(yīng)式布局 響應(yīng)式布局可以讓網(wǎng)站同時(shí)適配不同分辨率和不同的手機(jī)端，讓客戶(hù)有更好 的體驗(yàn)。 2如何實(shí)現(xiàn) 方案一：百分比布局 利用對(duì)屬性設(shè)置百分比來(lái)適配不同屏幕，注意這里的百分比是相對(duì)于父元素； 能夠設(shè)置的屬性有width，、height、padding、margin，其他屬性比如border、 font-size不能用百分比來(lái)設(shè)置的 由于沒(méi)辦法對(duì)font-size進(jìn)行百分比設(shè)置，所以用的最多就是對(duì)圖片和大塊布局進(jìn)行百分比設(shè)置。 方案二：使用媒體查詢(xún) (CSS3@media 查詢(xún)) 利用媒體查詢(xún)?cè)O(shè)置不同分辨率下的css樣式，來(lái)適配不同屏幕。 媒體查詢(xún)相對(duì)于百分比布局，可以對(duì)布局進(jìn)行更細(xì)致的調(diào)整，但需要在每個(gè)分辨率下面都寫(xiě)一套css樣式。 該布局的話(huà)適用于簡(jiǎn)單的網(wǎng)頁(yè)，可以使移動(dòng)端和pc端使用一套網(wǎng)址。從而節(jié)約成本。也方便后期的維護(hù)，bootcss就是用了CSS3的media來(lái)實(shí)現(xiàn)響應(yīng)的 但是相對(duì)于復(fù)雜的網(wǎng)頁(yè)就不適合了（如：淘寶，京東）等等 方案三.rem 響應(yīng)式布局 rem布局的原理 rem：相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù)。 如 html的font-size為100px；那么2rem就為200px。 通俗的來(lái)講的話(huà)rem就是通過(guò)JavaScript來(lái)獲取頁(yè)面的寬度，從而動(dòng)態(tài)的計(jì)算rem。這樣就會(huì)使不同分辨率下展現(xiàn)出相同的效果。 //代碼展示上述代碼中 7.5為動(dòng)態(tài)的值，根據(jù)設(shè)計(jì)圖的寬度進(jìn)行動(dòng)態(tài)的改變。window.onresize的作用是：當(dāng)頁(yè)面的寬度或高度發(fā)生改變時(shí)，再次進(jìn)行調(diào)用rem函數(shù)。
如何在網(wǎng)頁(yè)前端里可視化你的知識(shí)圖譜
最近費(fèi)盡千辛萬(wàn)苦構(gòu)造了一份可以用（大概）的知識(shí)圖譜，并且把要利用知識(shí)圖譜做的領(lǐng)域命名實(shí)體識(shí)別和一些推薦的功能做成Web版的demo，順帶想實(shí)現(xiàn)一些可視化知識(shí)圖譜的功能。
（憑啥知識(shí)圖譜就只能在Neo4j里自嗨，不能來(lái)前端show一下，歧視嗎(￢_￢)）
找了做前端圖表展示的開(kāi)源庫(kù)，D3.js和Echarts都能做，我拿Echarts實(shí)現(xiàn)了一下功能，先看一下在現(xiàn)在項(xiàng)目里一個(gè)基于知識(shí)圖譜查詢(xún)的實(shí)際效果：
接下里看看如何的實(shí)現(xiàn)：
<script src="/static/js/echarts.common.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.min.js"></script>
給要展示的圖準(zhǔn)備一個(gè)Dom：
<!-- 為ECharts準(zhǔn)備一個(gè)具備大小的Dom -->
<div class = "col-md-12">
<div class="panel panel-default ">
<header class="panel-heading">
關(guān)系圖 :
</header>
<div class = "panel-body ">
<div id="graph" style="width: 100%;height:600px;"></div>
</div>
</div>
</div>
data = [
{name:'蘋(píng)果',category:1,id:0},
{name:'梨子',catagory:1,id:1},
{name:'水果',category:2,id:2}
]
links = [
{source:0,target:2,category:0,value:'屬于',symbolSize:10},
{source:1,target:2,category:0,value:'屬于',symbolSize:10}
]
var myChart = echarts.init(document.getElementById('graph'));
option = {
title: {
text: ''
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
label: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
}
},
legend: {
x: "center",
show: false
},
series: [
{
type: 'graph',
layout: 'force',
symbolSize: 45,
focusNodeAdjacency: true,
roam: true,
edgeSymbol: ['none', 'arrow'],
categories: [{
name: '查詢(xún)實(shí)體',
itemStyle: {
normal: {
color: "#009800",
}
}
}, {
name: 'instance',
itemStyle: {
normal: {
color: "#4592FF",
}
}
}, {
name: 'class',
itemStyle: {
normal: {
color: "#C71585",
}
}
}],
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
},
}
},
force: {
repulsion: 1000
},
edgeSymbolSize: [4, 50],
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 10
},
formatter: "{c}"
}
},
data: data,
links: links,
lineStyle: {
normal: {
opacity: 0.9,
width: 1.3,
curveness: 0,
color:"#262626",
}
}
}
]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
這樣就成功實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的圖譜可視化：
————————————————
版權(quán)聲明：本文為CSDN博主「游離態(tài)GLZ不可能是金融技術(shù)宅」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_37477357/article/details/104857495
1.實(shí)現(xiàn)注冊(cè)與登錄功能：
要求用到驗(yàn)證碼，登錄后該出不再顯示登錄與注冊(cè)，而是顯示用戶(hù)名。
2.實(shí)現(xiàn)預(yù)約功能：
實(shí)現(xiàn)“運(yùn)動(dòng)”與“學(xué)習(xí)”兩方面的邀約功能，并將邀約數(shù)據(jù)保存到數(shù)據(jù)庫(kù)中，數(shù)據(jù)庫(kù)使用Mysql。
運(yùn)動(dòng)可以邀約：籃球、足球、乒乓球等
學(xué)習(xí)可以邀約：自習(xí)、輔導(dǎo)等
在正式開(kāi)始編碼之前，需要先導(dǎo)入相關(guān)jar包并配置好相關(guān)的配置文件，同時(shí)也需要導(dǎo)入前端給的頁(yè)面代碼。接著是建立好相應(yīng)的數(shù)據(jù)庫(kù)結(jié)構(gòu)，并初步構(gòu)建好三層架構(gòu)的想法思路。
web層
service層
dao層
然后在這里寫(xiě)一下對(duì)于驗(yàn)證碼處理和點(diǎn)擊圖片更換驗(yàn)證碼功能的一些細(xì)節(jié)。
如下圖所示，為了保證servlet層能夠正確接收到界面所展示的驗(yàn)證碼信息，同時(shí)因?yàn)閟ession對(duì)象是項(xiàng)目自生成的，所以我直接獲取session對(duì)象并以類(lèi)似于鍵值對(duì)的形式將頁(yè)面驗(yàn)證碼信息存入session中。
接下來(lái)是jsp頁(yè)面對(duì)于驗(yàn)證碼展示的一些處理
在這里，因?yàn)辄c(diǎn)擊驗(yàn)證碼更換操作需要用到j(luò)s，所以我百度得到了上圖這樣一串代碼。其中時(shí)間戳的作用是通過(guò)改變每次請(qǐng)求的時(shí)間參數(shù)來(lái)獲得刷新效果，即改變url中的響應(yīng)頭信息。
2.注冊(cè)功能
事實(shí)上，有了登錄功能的實(shí)現(xiàn)，注冊(cè)功能的代碼與其都是大同小異的。最大的不同應(yīng)該就是Dao層執(zhí)行的操作不同
預(yù)約功能的實(shí)現(xiàn)更是與注冊(cè)功能的實(shí)現(xiàn)基本一致。所不同的應(yīng)該是jsp頁(yè)面對(duì)單選框輸入的設(shè)置。
首先在寫(xiě)代碼之前我們需要理清如何穿插圖片呢？
可以讓所有圖片都float：left，用一個(gè)大盒子裝進(jìn)所有圖片，在用一個(gè)小盒子顯示圖片，溢出圖片就hidden，之后以每張圖片的寬度來(lái)scrollLeft.
可以給每張圖片一個(gè)name/id，用循環(huán)遍歷所有圖片
可以用float:left,但是除了我要顯示的圖片外，其他圖片都hidden，之后每當(dāng)我需要某張圖片時(shí)，我就把它制定到某位置
…
在這里，我將用第二種方法，因?yàn)樗苤庇^(guān)明了，我要哪張圖片我就調(diào)哪張圖片。
HTML部分：在div里面我裝了一張圖片，name:0, 這是為了在剛打開(kāi)的時(shí)候，我們的頁(yè)面是有東西的而不是一片空白。其他部分都好理解，不理解的可在下方評(píng)論。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖</title>
<link rel="stylesheet" href="輪播圖.css" />
<script src="輪播圖.js">
</script>
</head>
<body>
<header>
<div id="oImg">
<!-- 輪流播放圖片 -->
<img id="insert" src="img/輪1.jpg" name="0"/>
</div>
<!-- 左右切換圖片 -->
<p id="left" οnclick="goBack()"></p>
<p id="right" οnclick="goForward()"></p>
<ul id="nav">
<!-- 指定某張圖片 -->
<li id="1" οnclick="move(this)">1</li>
<li id="2" οnclick="move(this)">2</li>
<li id="3" οnclick="move(this)">3</li>
<li id="4" οnclick="move(this)">4</li>
<li id="5" οnclick="move(this)">5</li>
</ul>
</header>
</body>
</html>
CSS：
* { margin: 0 auto; padding: 0 auto; } header { width: 100%; height: 680px; position: relative; } img { width: 100%; height: 680px; } #nav { position: absolute; bottom: 5px; left: 30%; } #nav li { width: 30px; height: 30px; line-height: 30px; text-align: center; background: #ccc; font-size: 24px; border-radius: 9px; color: darkslategrey; font-family: 'Times New Roman', Times, serif; margin: 0 25px; float: left; cursor: pointer; list-style: none; } #nav li:hover { background: peru; } #left { width: 25px; height: 24px; left: 0; top: 50%; cursor: pointer; position: absolute; background: url(img/fx1.png); } #right { width: 25px; height: 24px; right: 0; top: 50%; cursor: pointer; position: absolute; background: url(img/fx2.png); }之后我們來(lái)看重中之重JS部分
JavaScript:
// 五張圖片的url var oImg1 = "img/輪1.jpg"; var oImg2 = "img/輪2.jpg"; var oImg3 = "img/輪3.jpg"; var oImg4 = "img/輪4.jpg"; var oImg5 = "img/輪5.jpg"; // 把5張圖片存入一個(gè)數(shù)組 var arr = [oImg1, oImg2, oImg3, oImg4, oImg5]; window.onload = function() { //剛加載時(shí)第一張圖片1號(hào)背景顏色 document.getElementById("1").style.background = "peru"; run() } //輪播 function run() { timer = setInterval(function() { //隨機(jī)點(diǎn)數(shù)字時(shí)能接著變化 var pic = document.getElementById("insert").name; var shade = document.getElementById("insert"); //如果為最后一張圖片則重新循環(huán) if (pic == 4) { pic = -1; } //點(diǎn)一個(gè)數(shù)字該數(shù)字背景顏色變化其余的不變 var aLi = document.getElementsByTagName("li"); for (var j = 0; j < aLi.length; j++) { aLi[j].style.backgroundColor = "#CCCCCC"; } var i = parseInt(pic); document.getElementById("insert").src = arr[i + 1]; document.getElementById("insert").name = i + 1; //數(shù)字隨圖片變化 switch (i) { case 0: var temp = '2'; break; case 1: var temp = '3'; break; case 2: var temp = '4'; break; case 3: var temp = '5'; break; case -1: var temp = '1'; break; } document.getElementById(temp).style.background = "peru" }, 5000) } //右箭頭 function goForward() { var temp = document.getElementById("insert").name; var oBox = document.getElementById("insert"); var aLi = document.getElementsByTagName("li"); // 數(shù)字跟著圖片一起變 for (var i = 0; i < aLi.length; i++) { aLi[i].style.backgroundColor = "#CCCCCC"; } switch (temp) { case "0": var n = '2'; break; case "1": var n = '3'; break; case "2": var n = '4'; break; case "3": var n = '5'; break; case "4": var n = '1'; break; } document.getElementById(n).style.background = "peru" // 向右移動(dòng)圖片 for (var j = 0; j < arr.length; j++) { if (j < 4) { if (temp == j) { oBox.src = arr[j + 1]; } } else { if (temp == 4) { oBox.src = arr[0]; } } } // 輪到最后一張圖片時(shí)返回第一張 if (temp < 4) { oBox.name = parseInt(temp) + 1; } else { oBox.name = 0; } } //左箭頭 function goBack() { var temp = document.getElementById("insert").name; var oBox = document.getElementById("insert") var aLi = document.getElementsByTagName("li"); // 圖片移動(dòng)時(shí)數(shù)字也跟著變 for (var i = 0; i < aLi.length; i++) { aLi[i].style.backgroundColor = "#CCCCCC"; } switch (temp) { case "0": var n = '5'; break; case "1": var n = '1'; break; case "2": var n = '2'; break; case "3": var n = '3'; break; case "4": var n = '4'; break; } document.getElementById(n).style.background = "peru" // 向左移動(dòng)圖片 for (var j = 0; j < arr.length; j++) { if (j > 0) { if (temp == j) { oBox.src = arr[j - 1]; } } else { if (temp == 0) { oBox.src = arr[4]; } } } // 輪到第一張圖片時(shí)返回最后一張 if (temp > 0) { oBox.name = parseInt(temp) - 1; } else { oBox.name = 4; } } //指定圖片 function move(num) { var oBox = document.getElementById("insert"); var temp = document.getElementById("insert").name; var aLi = document.getElementsByTagName("li"); for (var i = 0; i < aLi.length; i++) { aLi[i].style.backgroundColor = "#CCCCCC"; } document.getElementById(num.innerHTML).style.background = "peru" switch (num.innerHTML) { case "1": oBox.src = arr[0]; oBox.name = 0; break; case "2": oBox.src = arr[1]; oBox.name = 1; break; case "3": oBox.src = arr[2]; oBox.name = 2; break; case "4": oBox.src = arr[3]; oBox.name = 3; break; case "5": oBox.src = arr[4]; oBox.name = 4; break; } }JavaScript部分我寫(xiě)的很詳細(xì)，仔細(xì)看的話(huà)是可以看懂的，主要分3個(gè)重要部分：
用src來(lái)調(diào)用每張圖片并給每張圖片一個(gè)name，這樣方便后面的重復(fù)使用
為下方的數(shù)字按鈕匹配圖片，點(diǎn)擊1跳到第1張圖片，點(diǎn)擊2跳到第2張圖片…因?yàn)槲野阉械膱D片都存在了一個(gè)數(shù)組里，所以在匹配的時(shí)候要注意數(shù)組0位置才是數(shù)字1指定的圖片
可以來(lái)回翻頁(yè)，當(dāng)?shù)竭_(dá)最后一張圖片時(shí)，我再點(diǎn)擊下一張圖片又能返回到第一張圖片了，亦或者當(dāng)我點(diǎn)擊到第一張圖片時(shí)，再上一張圖片又回到第五張圖片了
效果如下：
大家有問(wèn)題可以在下方評(píng)論哦，看到了會(huì)及時(shí)回復(fù)噠！
————————————————
版權(quán)聲明：本文為CSDN博主「weixin_43964414」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43964414/article/details/104844041
CSS介紹
整理完了HTML的筆記，接下來(lái)就是CSS了。我們可以使用HTML構(gòu)建穩(wěn)定的結(jié)構(gòu)基礎(chǔ)，而頁(yè)面的風(fēng)格樣式控制則交給CSS來(lái)完成。網(wǎng)頁(yè)的樣式包括各種元素的顏色、大小、線(xiàn)形、間距等等，這對(duì)于設(shè)計(jì)或維護(hù)一個(gè)數(shù)據(jù)較多的網(wǎng)站來(lái)說(shuō)，工作量是巨大的。好在可以使用CSS來(lái)控制這些樣式，這將大大提高網(wǎng)頁(yè)設(shè)計(jì)和維護(hù)的效率，并且使網(wǎng)頁(yè)的整體風(fēng)格很容易做到統(tǒng)一。
CSS概述
CSS是英文Cascading Style Sheet的縮寫(xiě)，中文譯為層疊樣式表，也有人翻譯為級(jí)聯(lián)樣式表，簡(jiǎn)稱(chēng)樣式表。它是一種用來(lái)定義網(wǎng)頁(yè)外觀(guān)樣式的技術(shù)，在網(wǎng)頁(yè)中引入CSS規(guī)則，可以快捷地對(duì)頁(yè)面進(jìn)行布局設(shè)計(jì)，可以的控制HTML標(biāo)記對(duì)象的寬度、高度、位置、字體、背景等外觀(guān)效果。
CSS是一種標(biāo)識(shí)性語(yǔ)言，不僅可以有效的控制網(wǎng)頁(yè)的樣式，更重要的是實(shí)現(xiàn)了網(wǎng)頁(yè)內(nèi)容與樣式的分離，并允許將CSS規(guī)則單獨(dú)存放于一個(gè)文檔中， CSS文件的擴(kuò)展名為“css”。
CSS3
CSS3標(biāo)準(zhǔn)早在1995年就開(kāi)始制訂， 2001年提上W3C研究議程，但是，10年來(lái)CSS3可以說(shuō)是基本上沒(méi)有什么很大的變化，一直到2011年6月才發(fā)布了全新版本的CSS3，目前，許多瀏覽器都廣泛支持CSS3。
CSS3是CSS技術(shù)的一個(gè)升級(jí)版本，CSS3語(yǔ)言將CSS劃分為更小的模塊，在朝著模塊化的方向發(fā)展。以前的版本是一個(gè)比較龐大而且比較復(fù)雜模塊，所以，把它分解成為一個(gè)個(gè)小的簡(jiǎn)單的模塊，同時(shí)也加入了更多新的模塊。在CSS3中有字體、顏色、布局、背景、定位、邊框、多列、動(dòng)畫(huà)、用戶(hù)界面等等多個(gè)模塊。
CSS的基本用法
CSS的使用規(guī)則由兩部分組成：選擇器和一條或多條聲明。其基本基本語(yǔ)法如下：
選擇器{ 屬性1: 值; 屬性2: 值; …
屬性n: 值; }CSS的使用規(guī)則由兩部分組成：選擇器和一條或多條聲明。其基本基本語(yǔ)法如下：
選擇器{ 屬性1: 值; 屬性2: 值; …
屬性n: 值; }
CSS屬性
CSS的屬性按照相關(guān)功能進(jìn)行了分組，包含了字體、文本、背景、列表、動(dòng)畫(huà)等多個(gè)分組，這些屬性的具體使用方法和示例將會(huì)在后續(xù)中提到。
在HTML文檔中使用CSS的方法
根據(jù)CSS在HTML文檔中的使用方法和作用范圍不同，CSS樣式表的使用方法分為三大類(lèi)：行內(nèi)樣式、內(nèi)部樣式表和外部樣式表，而外部樣式表又可分為鏈入外部樣式表和導(dǎo)入外部樣式表。本節(jié)我們從四個(gè)分類(lèi)來(lái)認(rèn)識(shí)在HTML中使用CSS的方法。
行內(nèi)樣式
內(nèi)部樣式表
外部樣式表
鏈入外部樣式表
導(dǎo)入外部樣式表
行內(nèi)樣式
行內(nèi)樣式（inline style），也叫內(nèi)聯(lián)樣式，它是CSS四種使用方法中最為直接的一種，它的實(shí)現(xiàn)借用HTML元素的全局屬性style，把CSS代碼直接寫(xiě)入其中即可。
嚴(yán)格意義上行內(nèi)樣式是一種不嚴(yán)謹(jǐn)?shù)氖褂梅绞?，它不需要選擇器，這種方式下CSS代碼和HTML代碼混合在一起，因此不推薦使用行內(nèi)樣式。行內(nèi)樣式的基本語(yǔ)法如下：
<標(biāo)記 style="屬性:值; 屬性:值; …">
當(dāng)單個(gè)文檔需要特殊的樣式時(shí)，應(yīng)該使用內(nèi)部樣式表。內(nèi)部樣式表是將樣式放在頁(yè)面的head區(qū)里，這樣定義的樣式就應(yīng)用到本頁(yè)面中了，內(nèi)部樣式表使用style標(biāo)記進(jìn)行聲明，是較為常用的一種使用方法。其基本語(yǔ)法如下：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
選擇器1｛屬性:值;…｝
選擇器2｛屬性:值;…｝
……
選擇器n｛屬性:值;…｝
</style>
</head>
<head>
<meta charset="utf-8" />
<title></title>
<link href="樣式表路徑" rel="stylesheet" type="text/css" />
</head>
其中：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@import url("樣式表路徑");
</style>
</head>
其中：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@import url("樣式表路徑");
</style>
</head>
記錄倉(cāng)促，遺漏之處日后補(bǔ)充，如有錯(cuò)誤或不足之處，還望指正
————————————————
版權(quán)聲明：本文為CSDN博主「狗狗狗狗狗樂(lè)啊」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_44122062/article/details/104848745
文章目錄
前言
一、白屏?xí)r間過(guò)長(zhǎng)分析
二、針對(duì)性?xún)?yōu)化
針對(duì)animate.css
針對(duì)mint-ui的優(yōu)化
針對(duì)圖片的優(yōu)化
三、webpack打包優(yōu)化與分析
webpack-bundle-analyzer打包分析
打包優(yōu)化
四、優(yōu)化后線(xiàn)上測(cè)試速度提升
五、優(yōu)化總結(jié)
前言
最近在做項(xiàng)目時(shí)，測(cè)試提出了在A(yíng)pp端的H5項(xiàng)目入口加載時(shí)間過(guò)長(zhǎng)，白屏等待過(guò)久，需要優(yōu)化的問(wèn)題，于是著手開(kāi)始分析：
項(xiàng)目技術(shù)棧：基于Vue全家桶做的一個(gè)移動(dòng)端類(lèi)似WebApp的項(xiàng)目，使用到的第三方庫(kù)有：mint-ui, echarts，momentjs。
項(xiàng)目痛點(diǎn)：白屏?xí)r間過(guò)長(zhǎng)
一、白屏?xí)r間過(guò)長(zhǎng)分析
通過(guò)訪(fǎng)問(wèn)線(xiàn)上環(huán)境，結(jié)合Chrome devtool中Network和Performance功能可以具體分析整個(gè)白屏的耗時(shí)主要在哪一塊兒
Network耗時(shí)記錄：
Performance性能面板
通過(guò)上面兩張圖分析，從瀏覽器發(fā)起請(qǐng)求到解析HTML完成這一過(guò)程中：
animate.css, mini-ui.css的請(qǐng)求耗時(shí)最長(zhǎng)。
圖片過(guò)大耗時(shí)。
二、針對(duì)性?xún)?yōu)化
針對(duì)animate.css
animate.css由于使用的是第三方CDN（國(guó)外服務(wù)器）所有請(qǐng)求時(shí)間相對(duì)較長(zhǎng)，所以如果必須要用animate.css那么可以下載下來(lái)作為本地資源，也可以使用國(guó)內(nèi)CDN，或者不用animate.css，而是針對(duì)使用到的幾個(gè)CSS動(dòng)畫(huà)，直接自己造輪子
針對(duì)mint-ui的優(yōu)化
由于mint-ui在原項(xiàng)目中使用的是全局引用的方式，這才導(dǎo)致打包資源過(guò)大，css單獨(dú)請(qǐng)求耗時(shí)過(guò)長(zhǎng)的問(wèn)題，所以主要解決方案是按需引入mint-ui，借助 babel-plugin-component，我們可以只引入需要的組件，以達(dá)到減小項(xiàng)目體積的目的。
安裝babel-plugin-component， 若已安裝可忽略
修改 .babelrc (重點(diǎn)在plugins中)：
{
"presets": [
["env", { "modules": false }],
"stage-2"
],
"plugins": ["transform-runtime",["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]],
"comments": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}
在main.js中引用使用到的插件
import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import 'mint-ui/lib/style.min.css' // 引用CSS
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或?qū)憺? * Vue.use(Button)
* Vue.use(Cell)
*/
new Vue({
el: '#app',
components: { App }
})
在使用的組件中改為按需引用組件
import Vue from 'vue'
var Popup = Vue.component('mt-popup')
var Swipe = Vue.component('mt-swipe')
var SwipeItem = Vue.component('mt-swipe-item')
export default {
name:'my-component',
components:{
Popup,
Swipe,
SwipeItem
}
}
此按需引入方案也同樣適用于其他第三方UI組件庫(kù)
圖片小圖通過(guò)webpack可以直接轉(zhuǎn)為base64，而大圖可以通過(guò)壓縮或者換格式的方式來(lái)優(yōu)化，這里推薦一個(gè)好用的圖片壓縮工具，工具：tinyPNG,如下是圖片轉(zhuǎn)換前后對(duì)比
在完成了上述優(yōu)化以后，下面著重關(guān)注下webpack打包后生成的文件大小，看還有沒(méi)有可以?xún)?yōu)化的余地。由于項(xiàng)目中已經(jīng)通過(guò)路由按需加載的方式來(lái)做了功能拆分，所以通過(guò)webpack打包后生成了很多分散的js文件，如下圖：
通過(guò)上圖分析可以知道打包后有幾個(gè)文件相對(duì)較大，vendor.js都知道是第三方庫(kù)文件打包形成，之前通過(guò)mint-ui按需加載會(huì)有一定的變化，后面記錄。這里著重看另兩個(gè)帶hash的js文件，這里并看不出來(lái)它為什么這么大，所以這里需要用到webpack打包分析工具來(lái)做進(jìn)一步的打包文件分析：webpack-bundle-analyzer
它的作用如下圖，即在打包后生成打包文件大小分析圖，方便我們更加直觀(guān)的看到文件大小和引用情況
npm intall -D webpack-bundle-analyzerwebpack.pro.conf.js. （這里由于只是用于生產(chǎn)打包分析且是通過(guò)vue-cli生成的項(xiàng)目框架）
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
// ...
plugins:[
new BundleAnalyzerPlugin()
]
}
運(yùn)行npm run build，（webpack默認(rèn)會(huì)在打包完成時(shí)生成分析圖）
版權(quán)聲明：本文為CSDN博主「Sophie_U」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Sophie_U/article/details/104840167
數(shù)據(jù)類(lèi)型的轉(zhuǎn)化（JavaScript）—自動(dòng)轉(zhuǎn)化和強(qiáng)制轉(zhuǎn)化
這一周，我來(lái)分享一下在JavaScript中的數(shù)據(jù)類(lèi)型轉(zhuǎn)化。
首先我們要知道在JavaScript中的數(shù)據(jù)類(lèi)型有什么？在這里我就不詳細(xì)介紹了，幫你總結(jié)好了。
1.布爾類(lèi)型-----Boolean---isNaN()
用來(lái)判斷一個(gè)變量是否為非數(shù)字的類(lèi)型,是數(shù)字返回false，不是數(shù)字返回true。
2.數(shù)值類(lèi)型-----Number
存儲(chǔ)時(shí),是按照二進(jìn)制數(shù)值存儲(chǔ),輸出時(shí),默認(rèn)都是按照十進(jìn)制數(shù)值輸出。
在JavaScript中二進(jìn)制前加0b/0B,八進(jìn)制前面加0 ,十六進(jìn)制前面加0x。
如果需要按照原始進(jìn)制數(shù)值輸出，用格式為：
變量名稱(chēng).toString(進(jìn)制) ；
注意的是：S必須大寫(xiě)，將數(shù)值轉(zhuǎn)化為字符串形式輸出
如：console.log( a.toString(2) )；將a轉(zhuǎn)換成2進(jìn)制的形式輸出。
3.字符串類(lèi)型-----String
JavaScript可以用單引號(hào)嵌套雙引號(hào), 或者用雙引號(hào)嵌套單引號(hào)(外雙內(nèi)單,外單內(nèi)雙)
字符串是由若干字符組成的,這些字符的數(shù)量就是字符串的長(zhǎng)度。
通過(guò)字符串的length屬性可以獲取整個(gè)字符串的長(zhǎng)度。
例子：var str = 'my name is xiaoming';
console.log(str.length);
輸出的結(jié)果是19。可以知道空格也代表一個(gè)字符。
4.undefined
表示沒(méi)有數(shù)值-----應(yīng)該有數(shù)值，但是現(xiàn)在沒(méi)有數(shù)值
5.null
表示數(shù)值為空-----表示有數(shù)值，但是數(shù)值是“空”
上面就是數(shù)據(jù)類(lèi)型的五種形式。那么它是如何轉(zhuǎn)化呢？聽(tīng)我詳細(xì)給你講解。
在 JavaScript 程序中 , 變量中存儲(chǔ)的數(shù)據(jù)類(lèi)型沒(méi)有限制，也就是在變量中可以存儲(chǔ)任何符合JavaScript語(yǔ)法規(guī)范的數(shù)據(jù)類(lèi)型。但是在 JavaScript 程序的執(zhí)行過(guò)程中,往往需要變量中存儲(chǔ)的數(shù)值是某種特定的數(shù)據(jù)類(lèi)型,別的數(shù)據(jù)類(lèi)型不行，此時(shí)就需要進(jìn)行數(shù)據(jù)類(lèi)型的轉(zhuǎn)化。
————————————————
版權(quán)聲明：本文為CSDN博主「什什么都繪」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_39406353/article/details/104864224上面就是數(shù)據(jù)類(lèi)型的五種形式。那么它是如何轉(zhuǎn)化呢？聽(tīng)我詳細(xì)給你講解。
在 JavaScript 程序中 , 變量中存儲(chǔ)的數(shù)據(jù)類(lèi)型沒(méi)有限制，也就是在變量中可以存儲(chǔ)任何符合JavaScript語(yǔ)法規(guī)范的數(shù)據(jù)類(lèi)型。但是在 JavaScript 程序的執(zhí)行過(guò)程中,往往需要變量中存儲(chǔ)的數(shù)值是某種特定的數(shù)據(jù)類(lèi)型,別的數(shù)據(jù)類(lèi)型不行，此時(shí)就需要進(jìn)行數(shù)據(jù)類(lèi)型的轉(zhuǎn)化。
JavaScript中數(shù)據(jù)類(lèi)型的轉(zhuǎn)化,分為自動(dòng)轉(zhuǎn)化和強(qiáng)制轉(zhuǎn)化：
自動(dòng)轉(zhuǎn)化是計(jì)算機(jī)程序,自動(dòng)完成的轉(zhuǎn)化。
強(qiáng)制轉(zhuǎn)化是程序員,強(qiáng)行完成的轉(zhuǎn)化
1.布爾類(lèi)型的自動(dòng)轉(zhuǎn)化：
在 執(zhí)行 if 判斷時(shí) ,其他數(shù)據(jù)類(lèi)型會(huì)自動(dòng)轉(zhuǎn)化為布爾類(lèi)型
其他類(lèi)型轉(zhuǎn)化為布爾類(lèi)型的原則
0 '' undefined null NaN 這五種情況轉(zhuǎn)化為false
特別提醒 0.0 0.00000 都算是0
其他的所有都會(huì)轉(zhuǎn)化為 true
2.字符串的自動(dòng)轉(zhuǎn)化：
執(zhí)行字符串拼接, +號(hào)的兩側(cè)，應(yīng)該都是字符串類(lèi)型，會(huì)將其他數(shù)據(jù)類(lèi)型轉(zhuǎn)化為字符串類(lèi)型
轉(zhuǎn)化原則：
//基本數(shù)據(jù)類(lèi)型 / 簡(jiǎn)單數(shù)據(jù)類(lèi)型------將數(shù)據(jù)數(shù)值直接轉(zhuǎn)化為字符串 , 然后執(zhí)行拼接操作
布爾值 true ---> 字符串 'true'
布爾值 false ---> 字符串 'fasle'
undefined ---> 字符串 'undefined'
unll ---> 字符串 'null'
數(shù)值 ---> 將數(shù)值解析轉(zhuǎn)化為'對(duì)應(yīng)的純數(shù)字的字符串'
// 引用數(shù)據(jù)類(lèi)型 / 復(fù)雜數(shù)據(jù)類(lèi)型
數(shù)組 ---> 將 [] 中的內(nèi)容,轉(zhuǎn)化為字符串的形式,執(zhí)行拼接操作
對(duì)象 ---> 任何對(duì)象,任何內(nèi)容,都會(huì)轉(zhuǎn)化為 [object Object] 固定的內(nèi)容形式,執(zhí)行拼接操作
函數(shù) ---> 將所有的程序代碼,轉(zhuǎn)化為字符串,執(zhí)行拼接操作
3.數(shù)值的自動(dòng)轉(zhuǎn)化：
在執(zhí)行運(yùn)算時(shí)，會(huì)觸發(fā)數(shù)據(jù)類(lèi)型的自動(dòng)轉(zhuǎn)化。
轉(zhuǎn)化原則：
布爾類(lèi)型 : true ---> 1
false ---> 0
undefined : 轉(zhuǎn)化為 NaN
null : 轉(zhuǎn)化為 0
字符串 :
如果整個(gè)字符串,是純數(shù)字字符串,或者符合科學(xué)計(jì)數(shù)法 ---> 轉(zhuǎn)化為對(duì)應(yīng)的數(shù)值
如果字符串內(nèi)有不符合數(shù)字規(guī)范的內(nèi)容 ---> 轉(zhuǎn)化為 NaN
數(shù)組,對(duì)象,函數(shù)：
如果是+加號(hào)執(zhí)行的是字符串拼接效果，按照這些數(shù)據(jù)類(lèi)型轉(zhuǎn)化為字符串的原則來(lái)轉(zhuǎn)化
如果是其他形式的運(yùn)算 執(zhí)行結(jié)果都是 NaN
4.布爾類(lèi)型的強(qiáng)制轉(zhuǎn)化：
布爾類(lèi)型的強(qiáng)制轉(zhuǎn)化就是使用JavaScript中定義好的 方法/函數(shù) Boolean( 數(shù)據(jù)/變量 )
Boolean() 這個(gè)方法 不會(huì)改變 變量中存儲(chǔ)的原始數(shù)值
轉(zhuǎn)化原則與自動(dòng)轉(zhuǎn)化原則相同
0 '' undefined null NaN --------> false
其他數(shù)據(jù),都轉(zhuǎn)化為true
5.字符串類(lèi)型的強(qiáng)制轉(zhuǎn)化：
方法1，變量.toString(進(jìn)制類(lèi)型)
將數(shù)值強(qiáng)制轉(zhuǎn)化為字符串,并且可以設(shè)定轉(zhuǎn)化的進(jìn)制，.toString() 之前,不能直接寫(xiě)數(shù)值,必須是寫(xiě)成變量的形式
進(jìn)制常用的數(shù)值是 2 8 16 ，可以設(shè)定的范圍是 2 - 36 進(jìn)制
方法2，String( 變量 / 數(shù)據(jù) )
將變量或者數(shù)據(jù),轉(zhuǎn)化為字符串，原則按照自動(dòng)轉(zhuǎn)化的原則來(lái)執(zhí)行，不會(huì)改變變量中存儲(chǔ)的原始數(shù)值
但是在字符串拼接時(shí),會(huì)將其他數(shù)據(jù)類(lèi)型自動(dòng)轉(zhuǎn)化為字符串
6.數(shù)字類(lèi)型的強(qiáng)制轉(zhuǎn)化：
————————————————方法1 , Number(變量/數(shù)值)
console.log( Number(true) ); // 1
console.log( Number(false) ); // 0
console.log( Number(null) ); // 0
console.log( Number(undefined) ); // NaN
console.log( Number('100') ); // 對(duì)應(yīng)的數(shù)值
console.log( Number('100.123') ); // 對(duì)應(yīng)的數(shù)值
console.log( Number('2e4') ); // 對(duì)應(yīng)的數(shù)值
console.log( Number('123abc') ); // NaN
console.log( Number( [1,2,3,4,5] ) ); // NaN
console.log( Number( {name:'zhangsan'} ) ); // NaN
console.log( Number( function fun(){console.log('abc')} ) ); // NaN
將其他類(lèi)型強(qiáng)制轉(zhuǎn)化為數(shù)值類(lèi)型,轉(zhuǎn)化原則與自動(dòng)轉(zhuǎn)化選擇相同
方法2, parseInt(變量 / 數(shù)據(jù)) 是獲取變量或者數(shù)據(jù)的整數(shù)部分
從數(shù)據(jù)的 左側(cè)起 解析獲取 整數(shù)內(nèi)容
console.log( parseInt(true) ); // 都是 NaN
console.log( parseInt(false) );
console.log( parseInt(null) );
console.log( parseInt(undefined) );
console.log( parseInt( {name:'zhangsan'} ) );
console.log( parseInt( function fun(){console.log('abc')} ) );
數(shù)組執(zhí)行,是獲取 數(shù)值部分 也就是 沒(méi)有 []的部分
1,2,3,4,5 整數(shù)部分是 1 1之后是逗號(hào) 逗號(hào)不是整數(shù),之后的部分也就不算整數(shù)
獲取第一個(gè)數(shù)值的整數(shù)部分,如果有就獲取,如果沒(méi)有,結(jié)果是NaN
console.log( parseInt( [1,2,3,4,5] ) ); // 結(jié)果是 1
console.log( parseInt( [null,2,3,4,5] ) ); // 結(jié)果是 NaN
如果是整數(shù)就直接獲取,如果是浮點(diǎn)數(shù),或者科學(xué)計(jì)數(shù)法,就獲取整數(shù)部分
console.log( parseInt( 100 ) ); // 整數(shù)是直接獲取
console.log( parseInt( 0.0123 ) ); // 浮點(diǎn)數(shù)是獲取整數(shù)部分
console.log( parseInt( 3.123456e3 ) ); // 科學(xué)計(jì)數(shù)法是解析之后,獲取整數(shù)部分
字符串不同了
如果是純數(shù)字的字符串
console.log( parseInt( '100' ) ); // 與數(shù)字的結(jié)果相同
console.log( parseInt( '0.0123' ) ); // 與數(shù)字的結(jié)果相同
console.log( parseInt( '3.123456e3' ) ); //3
console.log( parseInt( '3abc' ) ); //3
console.log( parseInt( '3.123' ) ); //3
方法3 , parseFloat( 變量 / 數(shù)值 )
獲取浮點(diǎn)數(shù)部分
console.log( parseFloat(true) ); // 都是 NaN
console.log( parseFloat(false) );
console.log( parseFloat(null) );
console.log( parseFloat(undefined) );
console.log( parseFloat( {name:'zhangsan'} ) );
console.log( parseFloat( function fun(){console.log('abc')} ) );
//數(shù)值, 整數(shù),浮點(diǎn)數(shù),都會(huì)完整獲取
console.log( parseFloat(100) ); //100
console.log( parseFloat(100.1234) ); //100.1234
console.log( parseFloat(1.234567e3) ); //1234.567
// 關(guān)鍵是字符串
// 從字符串的左側(cè)起 解析 符合浮點(diǎn)數(shù)的部分
console.log( parseFloat( '100' ) ); // 與數(shù)字的結(jié)果相同
console.log( parseFloat( '0.0123' ) ); // 與數(shù)字的結(jié)果相同
console.log( parseFloat( '3.123456e3' ) ); // 科學(xué)技術(shù)法會(huì)解析
console.log( parseFloat( '3.1223abc' ) );
console.log( parseFloat( '3.123' ) );
好了，這就是在JavaScript中數(shù)據(jù)類(lèi)型的轉(zhuǎn)化，希望可以幫助到你。
版權(quán)聲明：本文為CSDN博主「什什么都繪」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_39406353/article/details/104864224
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn