在我們的頁面布局的時候，經常會有這樣的需求，超過指定行文本的時候會進行（省略號...）的處理，那么我們改怎么設置css呢？如下：
設置盒子的css為：
但是這樣只能顯示一行而不能實現指定行，所以還要其他的方法來實現指定行處理的。
WebKit瀏覽器或移動端的頁面（大部分移動端都是webkit）
css 代碼:
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1：安裝
2： 在main.js 主入口js里面引用store.js
3：在store.js里引用Vuex
4：在vue組件中使用
使用$store.commit(‘jia’)區觸發mutations下面的加減方法
5：state訪問狀態對象
使用computed計算
npm install vuex --save
import Vue from 'vue' import App from './App' import router from './router' import store from './vuex/store' //引用store.js Vue.config.productionTip = false //阻止在啟動時生成生產提示 //vue實例 new Vue({
el: '#app',
router,
store, //把store掛在到vue的實例下面 template: '<App/>',
components: { App }
})
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //注冊Vuex // 定義常量 如果訪問他的話，就叫訪問狀態對象 const state = {
count: 1 } // mutations用來改變store狀態, 如果訪問他的話，就叫訪問觸發狀態 const mutations = { //這里面的方法是用 this.$store.commit('jia') 來觸發 jia(state){
state.count ++
},
jian(state){
state.count --
},
} //暴露到外面，讓其他地方的引用 export default new Vuex.Store({
state,
mutations
})
<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{$store.state.count}}</h5> <p> <button @click="$store.commit('jia')">+</button> <button @click="$store.commit('jian')">-</button> </p> </p> </template> <!-- 加上scoped是css只在這個組件里面生效，為了不影響全局樣式 --> <style scoped> h5{ font-size: 20px; color: red; } </style>
<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="$store.commit('jia')">+</button> <button @click="$store.commit('jian')">-</button> </p> </p> </template> <script> import {mapState} from 'vuex' export default{
name:'hello', //寫上name的作用是，如果你頁面報錯了，他會提示你是那個頁面報的錯，很實用 // 方法一 // computed: { // count(){ // return this.$store.state.count + 6 // } // } // 方法二 需要引入外部 mapState computed:mapState({
count:state => state.count + 10 }) // ECMA5用法 // computed:mapState({ // count:function(state){ // return state.count // } // }) //方法三 // computed: mapState([ // 'count' // ]) } </script>
傳統方法的缺點:
傳統的web交互是用戶觸發一個http請求服務器,然后服務器收到之后,在做出響應到用戶,并且返回一個新的頁面,,每當服務器處理客戶端提交的請求時,客戶都只能空閑等待,并且哪怕只是一次很小的交互、只需從服務器端得到很簡單的一個數據,都要返回一個完整的HTML頁,而用戶每次都要浪費時間和帶寬去重新讀取整個頁面。這個做法浪費了許多帶寬，由于每次應用的交互都需要向服務器發送請求，應用的響應時間就依賴于服務器的響應時間。這導致了用戶界面的響應比本地應用慢得多。
什么是ajax？
ajax的出現,剛好解決了傳統方法的缺陷。AJAX 是一種用于創建快速動態網頁的技術。通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
XMLHttpRequest 對象
XMLHttpRequest對象是ajax的基礎,XMLHttpRequest 用于在后臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。目前所有瀏覽器都支持XMLHttpRequest。
|
方法
|
描述
|
|
abort() |
停止當前請求 |
|
getAllResponseHeaders() |
把HTTP請求的所有響應首部作為鍵/值對返回 |
|
getResponseHeader("header") |
返回指定首部的串值 |
|
open("method","URL",[asyncFlag],["userName"],["password"]) |
建立對服務器的調用。method參數可以是GET、POST或PUT。url參數可以是相對URL或絕對URL。這個方法還包括3個可選的參數，是否異步，用戶名，密碼 |
|
send(content) |
向服務器發送請求 |
|
setRequestHeader("header", "value") |
把指定首部設置為所提供的值。在設置任何首部之前必須先調用open()。設置header并和請求一起發送 ('post'方法一定要 ) |
1.創建XMLHTTPRequest對象
2.使用open方法設置和服務器的交互信息
3.設置發送的數據，開始和服務器端交互
4.注冊事件
5.更新界面
下面給大家列出get請求和post請求的例子 ：
get請求:
//步驟一:創建異步對象
var ajax = new XMLHttpRequest();
//步驟二:設置請求的url參數,參數一是請求的類型,參數二是請求的url,可以帶參數,動態的傳遞參數starName到服務端
ajax.open('get','getStar.php?starName='+name);
//步驟三:發送請求
ajax.send();
//步驟四:注冊事件 onreadystatechange 狀態改變就會調用
ajax.onreadystatechange = function () {
if (ajax.readyState==4 &&ajax.status==200) {
//步驟五 如果能夠進到這個判斷 說明 數據 完美的回來了,并且請求的頁面是存在的
console.log(xml.responseText);//輸入相應的內容
}
}
post請求:
//創建異步對象
var xhr = new XMLHttpRequest();
//設置請求的類型及url
//post請求一定要添加請求頭才行不然會報錯
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.open('post', '02.post.php' );
//發送請求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
// 這步為判斷服務器是否正確響應
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
為了方便使用,我們可以把他封裝進方法里面,要用的時候,直接調用就好了。
function ajax_method(url,data,method,success) {
// 異步對象
var ajax = new XMLHttpRequest();
// get 跟post 需要分別寫不同的代碼
if (method=='get') {
// get請求
if (data) {
// 如果有值
url+='?';
url+=data;
}else{
}
// 設置 方法 以及 url
ajax.open(method,url);
// send即可
ajax.send();
}else{
// post請求
// post請求 url 是不需要改變
ajax.open(method,url);
// 需要設置請求報文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 判斷data send發送數據
if (data) {
// 如果有值 從send發送
ajax.send(data);
}else{
// 木有值 直接發送即可
ajax.send();
}
}
// 注冊事件
ajax.onreadystatechange = function () {
// 在事件中 獲取數據 并修改界面顯示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 將 數據 讓 外面可以使用
// return ajax.responseText;
// 當 onreadystatechange 調用時 說明 數據回來了
// ajax.responseText;
// 如果說 外面可以傳入一個 function 作為參數 success
success(ajax.responseText);
}
}
}
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1：mutations觸發狀態 （同步狀態）
2：getters計算屬性
getter不能使用箭頭函數，會改變this的指向
在store.js添加getters
//count的參數就是上面定義的state對象
3：actions (異步狀態)
在store.js添加actions
在組件中使用
4：modules 模塊
適用于非常大的項目，且狀態很多的情況下使用，便于管理
修改store.js
<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> </p> </template> <script> import {mapState,mapMutations} from 'vuex' export default{
name:'hello', //寫上name的作用是，如果你頁面報錯了，他會提示你是那個頁面報的錯，很實用 //方法三 computed: mapState([ 'count' ]),
methods:{
...mapMutations([ 'jia', 'jian' ])
}
} </script>
// 計算 const getters = {
count(state){ return state.count + 66 }
} export default new Vuex.Store({
state,
mutations,
getters
})
//getters中定義的方法名稱和組件中使用的時候一定是一致的,定義的是count方法，使用的時候也用count，保持一致。
組件中使用
<script> import {mapState,mapMutations,mapGetters} from 'vuex' export default{
name:'hello',
computed: {
...mapState([ 'count' ]),
...mapGetters([ 'count' ])
},
methods:{
...mapMutations([ 'jia', 'jian' ])
}
} </script>
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定義常量 const state = { count: 1 } // mutations用來改變store狀態 同步狀態 const mutations = {
jia(state){
state.count ++
},
jian(state){
state.count --
},
} // 計算屬性 const getters = {
count(state){ return state.count + 66 }
} // 異步狀態 const actions = {
jiaplus(context){
context.commit('jia') //調用mutations下面的方法
setTimeout(()=>{
context.commit('jian')
},2000) alert('我先被執行了，然后兩秒后調用jian的方法') }, jianplus(context){ context.commit('jian') }
} export default new Vuex.Store({
state,
mutations,
getters,
actions
})
<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> <p> <button @click="jiaplus">+plus</button> <button @click="jianplus">-plus</button> </p> </p> </template> <script> import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default{
name:'hello',
computed: {
...mapState([ 'count' ]),
...mapGetters([ 'count' ])
},
methods:{ // 這里是數組的方式觸發方法 ...mapMutations([ 'jia', 'jian' ]), // 換一中方式觸發方法 用對象的方式 ...mapActions({
jiaplus: 'jiaplus',
jianplus: 'jianplus' })
}
} </script> <style scoped> h5{ font-size: 20px; color: red; } </style>
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const mutations = {
jia(state){
state.count ++
},
jian(state){
state.count --
},
} const getters = {
count(state){ return state.count + 66 }
} const actions = {
jiaplus(context){
context.commit('jia') //調用mutations下面的方法
setTimeout(()=>{
context.commit('jian')
},2000) alert('我先被執行了，然后兩秒后調用jian的方法') }, jianplus(context){ context.commit('jian') }
}
//module使用模塊組的方式 moduleA const moduleA = { state, mutations, getters, actions }
// 模塊B moduleB const moduleB = { state: { count:108
}
} export default new Vuex.Store({
modules: {
a: moduleA,
b: moduleB,
}
})
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
window全局作用域->頁面關掉才銷毀
1)作用域的銷毀
2)作用域的不立即銷毀
fn()(20);//->在執行fn的時候一切都從新開始了,和上面的步驟是一樣的->輸出30
3)作用域的不銷毀：形成一個私有作用域,里面的內容被外面占用了
2)在函數執行的時候,里面的一個小函數的地址賦值給了我們的外面元素的點擊事件,那么當前小函數也相當于被外面占用了,大函數執行形成的私有的作用域也不銷毀了
3)在使用setTimeout實現輪詢動畫的時候,我們如果move需要傳遞參數值,那么像下面這樣的寫法會行成很多的不銷毀的作用域,非常的耗性能
//window.setTimeout(move,10); ->第二次執行move的時候我們沒有給它傳值(這樣寫不行)
//解決辦法:
[火狐和IE]
var obj={};
函數執行會形成私有的作用域
一般情況下，函數執行形成一個私有的作用域，當執行完成后就銷毀了->節省內存空間
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
fn()(15);//->先執行fn,有一個私有的變量i=10,返回一個堆內存地址 xxxfff111,我們發現這個地址還用到了一次,那么當前的這個fn形成私有作用域（A）就不能立即銷毀了,xxxfff111(15)->輸出25,A中的i變為11；當xxxfff111執行完了,發現這個地址沒用了,瀏覽器就把A、xxxfff111都釋放了
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
var f=fn();//->fn執行形成一個私有的作用域A,A中有一個私有的變量i=10,A中返回一個地址xxxfff11,被外面的f占用了,那么當前的A就不能銷毀了
f(15);//->輸出25,讓A中的i=11
f(20);//->輸出31,讓A中的i=12
…
當我們知道f用完的時候,為了優化性能,我們讓f=null,這樣的話A中的xxxfff111沒人占用了,瀏覽器會把A和xxxfff111都釋放了
幾種不銷毀常用到的形式:
1)函數執行,返回一個引用數據類型的值,并且在函數的外面被別人接收了,那么當前函數形成的私有作用域就不在銷毀了–>例如上面的案例
//每一次循環都執行自執行函數形成一個私有的作用域(循環三次就有三個作用域,每一個作用域中都有一個i,第一個存儲的是0,第二個存數的是1..)，在每一個私有的作用域中都把里面的函數綁定給了外面元素的點擊事件,這樣的話每一次形成的作用域都不銷毀了(三個不銷毀的作用域)
var oLis=document.getElementsByTagName(“li”);
for(var i=0;i<oLis.length;i++){
~function(i){
oLis[i].onclick=function(){
tabChange(i);
}
}(i);
}
function move(tar){
<js code>
window.setTimeout(function(){
move(tar);
},10);//->這樣寫實現了,但是每一次執行定時器都會形成一個私有的所用域(匿名函數形成的)A,在A中使用了上級作用域中的tar的值,而且執行了move又形成了一個小的作用域(而在小的作用域中會使用tar的值),這樣每一次定時器形成的A都不能銷毀了
}
move(100);//->第一次這樣執行傳遞100
function move(tar){
~function _move(){
<js code>
window.setTimeout(_move,10);
}();
}
move(100);//->第一次這樣執行傳遞100
JS中內存空間釋放的問題（堆內存、棧內存）
[谷歌瀏覽器]
我們開辟一個內存，可能或有一些其他的變量等占用了這個內存，谷歌瀏覽器都會間隔一段時間看這個內存還有沒有被占用，如果發現有沒有被占用的內存了，就自己幫我們回收了(內存釋放)
我們開個內存，當我們引用了它，就在內存中記錄一個數,增加一個引用瀏覽器就把這個數+1，減少一個引用，瀏覽器就把這個數-1…當減到零的時候瀏覽器就把這個內存釋放了;但是有些情況下(尤其是IE)記著記著就弄亂了，內存就不能釋放了–>瀏覽器的內存泄露
我們養成一個好的習慣，當我們obj這個對象使用完成了，我們手動的obj=null (null空對象指針)，瀏覽器會自己把剛才的堆內存釋放掉
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
頭：header
內容：content/container
尾：footer
導航：nav
側邊欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左中右：left center right
登錄條：loginbar
標志：logo
版心：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權：copyright
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinUS
指南：guide
服務：service
注冊：regsiter
狀態：status
投票：vote
合作伙伴：partner
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
問題描述：在頁面選擇關鍵詞時，需要將關鍵詞元素綁定點擊事件使同一類型的關鍵詞只有一個固定class，使其隨點擊更換，目的是為了讓這一類型的關鍵詞的值可以由class獲取。在原本寫死的關鍵詞上綁定的事件是可用的，但是換成動態加載后發現只能適用于寫死的情況。很無奈，在網上搜索一番后花了點時間終于解決了，下面奉上。
參考文章：https://blog.csdn.net/qq_35129893/article/details/78363211?locationNum=2&fps=1
原本綁定事件如下：
針對的HTML元素如下：
但是發現，原先的事件不能用于動態加載的元素，如上面加載的，加載形式如下：
無奈，只能上網尋求萬能的大神了。
基本上提供的解決方案就兩個，使用
或者
我先是使用.live嘗試了下，發現gg，心灰意冷ing；本著試一試不要錢的心態又用.on試了下，結果令人驚喜??！可以使用了，哎，這鬼玩意坑死人。
下面上針對我加載的界面元素寫的綁定事件：
[javascript] view plain copy
[html] view plain copy
[javascript] view plain copy
$('element').live('click',function(){})$('父元素').on('click', '子元素', function(){})
[javascript] view plain copy
1.什么是懶加載？
當訪問一個頁面的時候，先把img元素背景圖片路徑替換成一張替代圖片的路徑（這樣就只需請求一次，占位圖），將圖片的真實路徑存儲在img自定義屬性中，只有當圖片出現在瀏覽器的可視區域內時，才設置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶加載。
2.為什么要用懶加載？
很多頁面，內容很豐富，頁面很長，圖片較多。比如說各種商城頁面。這些頁面圖片數量多，而且比較大，少說百來K，多則上兆。要是頁面載入就一次性加載完畢，提高首屏加載速度，可以減輕服務器壓力，節約流量，用戶體驗好。
3.懶加載實現封裝？
lazyLoad由四個函數組成，init(初始化函數)，checkShow（判斷圖片是否加載），shouldShow（將要展示的圖片），showImg（展示圖片）。
（1）初始化函數(init) 由于滾動事件太消耗性能，所以用定時器替換,不是滾動就觸發,而是滾動后200毫秒后觸發。
var timer;
function init(){
$(window).on("scroll",function(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
checkShow(); //
},200);
});
}
（2）判斷”圖片是否加載“（checkshow）函數，如果圖片有isload屬性，就說明圖片已經加載過了，直接return。如果圖片沒有isload屬性，進入將要展示圖片shouldshow函數
function checkShow(){
$lazyLoad.each(function(){
$cur = $(this);
if($cur.attr('isLoaded')){
return;
}
if(shouldShow($cur)){
showImg($cur);
}
});
}
（3）將要展示圖片shouldshow函數，獲取屏幕可視寬度，滾動高度，要展示的元素到文檔的高度，如果元素到文檔的高度小于屏幕的可視高度加上滾動高度，說明元素已在可視區內，返回true，否則返回false。
function shouldShow ($node){
var scrollH = $(window).scrollTop(),
windowH = $(window).height(),
top = $node.offset().top;
if(top < windowH + scrollH){
return true;
} else {
return false;
}
}
（4）“展示圖片”函數，將元素的src屬性替換為自定義屬性data-src(真正圖片的地址)。
function showImg ($node){
$node.find("img").attr("src",$node.data("src"));
$node.attr("isLoaded",true);
}
（5）函數返回一個對象
return {
init : init
}
這樣就實現懶加載封裝了！
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.把wxParse文件全部放入項目。
2.在wxml中import wxParse.wxml,并把template插入到到對應的位置上
3.在wxss中import wxParse.wxss，并設置樣式；比如‘wxParse-image’是富文本圖片轉化成image組件之后的類名，‘wxParse-p’是p標簽轉化成view組件后設置的類名
4.js
[html] view plain copy
[css] view plain copy
具體的API可以去GitHub上查看：https://github.com/icindy/wxParse
[javascript] view plain copy
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
（offsetTop同理）
offsetWidth（和offsetHeight）:
其實就是一個元素的實際寬度 = width+padding+border
【client家族】
clientWidth (和clientHeight) = width+padding
該屬性指的是元素的可視部分寬度和高度
假如元素有padding有滾動，且滾動是顯示的
clientWidth = width + padding - 滾動軸寬度
clientTop(和clientLeft):
這一對屬性是用來讀取元素的border的寬度和高度的
clientTop = border-top 的 border-width
clientLeft = border-left 的 border-width
【scroll家族】
藍藍設計的小編 http://www.syprn.cn