前言：傳一個uint32類型的值，通過 按位或操作符（|）來設置ui_control的值，通過按位與操作符（&）來檢測是否顯示或隱藏
簡單介紹一下兩個概念：
按位與操作符和按位或操作符都是二進制位運算符。
-
按位與操作符（&）：對于每一個二進制位，只有當兩個操作數的對應位都為1時，結果的對應位才為1，否則為0。例如，5（二進制101） & 3（二進制011）的結果是1（二進制001）。
-
按位或操作符（|）：對于每一個二進制位，只要兩個操作數的對應位有一個為1時，結果的對應位就為1，否則為0。例如，5（二進制101） | 3（二進制011）的結果是7（二進制111）。
這兩種操作符在計算機編程中常用于位操作，如設置位標志、清除位標志、切換位標志等。
一、demo1：路由傳一個ui_control，用高16位設置允許修改，修改位用第17位檢測
var ui_control = 0;
ui_control = (ui_control | (1 << 17));
console.log(ui_control) // 131072這時候ui_control參數傳131072，在頁面中做檢測看是否允許修改
var uiControl = Number(new URLSearchParams(location.search).get('uiControl'))
if ((control & (1 << 17)) !== 0) {console.log("1 表示允許修改");
} else {console.log("0 表示不允許修改");
}二、demo2：路由傳一個ui_control，同時控制修改和導出權限，修改位用第17位檢測，導出位用第16位檢測
既允許修改也允許導出
var ui_control = 0;
ui_control = (ui_control | (1 << 17));
ui_control = (ui_control | (1 << 16));console.log(ui_control) // 196608這時候ui_control參數傳196608，通過與運算檢測第16位導出是否為1，第17位修改是否為1，就能知道是否有對應權限了
咱們封裝一個方法出來
// keys 傳一個檢測權限的key，比如下面Edit編輯，Export導出
const getUiControlBinaryContent = (keys) => {var uicontrol = Number(new URLSearchParams(location.search).get('uiControl'))let uint32 = new Uint32Array(1);uint32[0] = uicontrol;const action = new Map<string, any>([['Edit', checkUnitBuffer(uint32[0], 17)], // 第17位['Export', checkUnitBuffer(uint32[0], 16)], // 第16位]);return keys ? action.get(keys) : 0;
};// 與或位控制
const checkUnitBuffer = (control: number, idx: number) => {if (!idx) return 0; if ((control & (1 << idx)) !== 0) {return 1; // 表示有該操作權限} else {return 0; // 表示沒有該操作權限}
};這樣的話在這些操作的地方就直接能調用getUiControlBinaryContent方法傳對應key值就可以知道是否有權限了
上面的demo1和demo2是高16位的檢測，接下來我們簡單說一下低16位的檢測
三、舉個例子：低0,1,2,3,4位控制，高16,17位控制總結
1、設置ui_control：我這里用簡單的html元素來展示，你們按照自己的庫來做就行，最終的UI_Control就是路由上要傳的參數
/*** unit32 生成 ui_control* ● 是否修改：ui_control & (1 << 17)● 是否導出：ui_control & (1 << 16)● 是否顯示思維導圖：ui_control & (1 << 4)● 是否顯示原文：ui_control & (1 << 3)● 是否顯示章節概率：ui_control & (1 << 2)● 是否顯示全文總結：ui_control & (1 << 1)● 是否顯示視頻：ui_control & 1*/
function onCreateUiControl() {var ui_control = 0;const Edit = document.getElementById("Edit");const Export1 = document.getElementById("Export");const VideoPre = document.getElementById("VideoPre");const MindMap = document.getElementById("MindMap");const AllText = document.getElementById("AllText");const ChapterOverviewt = document.getElementById("ChapterOverviewt");const FullTextSummary = document.getElementById("FullTextSummary");if (Edit.checked) ui_control = (ui_control | (1 << 17));if (Export1.checked) ui_control = (ui_control | (1 << 16));if (VideoPre.checked) ui_control = (ui_control | 1);if (MindMap.checked) ui_control = (ui_control | (1 << 4));if (AllText.checked) ui_control = (ui_control | (1 << 3));if (ChapterOverviewt.checked) ui_control = (ui_control | (1 << 2));if (FullTextSummary.checked) ui_control = (ui_control | (1 << 1));document.getElementById("ui_control").value = ui_control;// TODO 這個最終的ui_control就是你設置的上面某些功能的權限了console.log("ui_control", ui_control);
}2、檢測ui_control權限：調用getUiControlBinaryContent(key)傳對應keys值做檢測
/*** UI控制使用16位位運算 https://tool.oschina.net/hexconvert* 每一位可以看作一個開關，1表示開，0表示關。* 右移操作符>>和按位與操作符&來獲取每一位的值。如果某一位的值為1，那么對應的開關就是開，如果某一位的值為0，那么對應的開關就是關。* ● 是否修改：ui_control & (1 << 17)● 是否導出：ui_control & (1 << 16)● 是否顯示思維導圖：ui_control & (1 << 4)● 是否顯示原文：ui_control & (1 << 3)● 是否顯示章節概率：ui_control & (1 << 2)● 是否顯示全文總結：ui_control & (1 << 1)● 是否顯示視頻：ui_control & 1*/
const getUiControlBinaryContent = (keys) => {var uicontrol = Number(new URLSearchParams(location.search).get('uiControl'))let uint32 = new Uint32Array(1);uint32[0] = uicontrol;const action = new Map<string, any>([['Edit', checkUnitBuffer(uint32[0], 17)],['Export', checkUnitBuffer(uint32[0], 16)],['VideoPre', checkUnitVideo(uint32[0], 1)],['MindMap', checkUnitBuffer(uint32[0], 4)],['AllText', checkUnitBuffer(uint32[0], 3)],['ChapterOverviewt', checkUnitBuffer(uint32[0], 2)],['FullTextSummary', checkUnitBuffer(uint32[0], 1)]]);return keys ? action.get(keys) : 0;
};// 與或位控制
const checkUnitBuffer = (control: number, idx: number) => {if (!idx) return 0; if ((control & (1 << idx)) !== 0) {return 1;} else {return 0;}
};總結：路由上設置ui_control，通過第幾位用按位或來設置具體值，用按位與來解析是否有權限
)
