整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一個移動端的管理后臺，拖拽方式的排序、分類、刪除等操作方式，是必不可少的吧，畢竟這樣比較直觀和易操作。就如下圖所示一下：
拖拽時有CSS動畫喲
可以跨列表區域來拖放排序喲
這2個圖片，一是展示了拖拽也可以更炫，二是拖拽可以在2個不同的LIST之間，就是拖拽分類的場景應用。
基于這種方式比較常用，那么怎么實現的呢？我給大家推薦一個js庫：Sortable.js
那么什么是Sortable.js呢？
它是為了現代瀏覽器和移動端（Android、IOS），實現拖放重新排序功能而開發的一個js庫。它不依賴jQuery，支持很多與其它js庫的無縫銜接，比如：Meteor、AngularJS、React、Polymer、Knockout、BootStrap等等。
那么它有哪些特點？
支持移動端和所有現代瀏覽器（包括IE9+）。
可以從一個列表拖拽到另一個列表中，就如上邊的GIF圖演示的那樣。代碼實現如下：
Sortable.create(foo, {group:'shared'});
Sortable.create(bar, {group:'shared'});
拖拽移動時，可以配置CSS動畫（如上圖GIF）。代碼配置如下：
Sortable.create(users, {animation:200});
支持句柄拖動和可選文字拖動，機智的自動滾動條（條目很多的時候）。
內置了原生HTML5的拖放（drap/drop）API。
那么如何使用它呢？
你可以到github上搜索：Sortable，下載Sortable.js，引用到頁面中，接著如下圖使用方式：
配置項很多，這里就不一一列舉了
詳細的配置信息，你可以到github上查閱。
通過上邊的簡單介紹，是否可以滿足你的需求？有什么問題，歡迎評論，我們共同探討。
至此，就簡單的介紹完了，你的每次點贊和轉發和收藏，都是給我們莫大的動力和支持！
名稱 | 簡述 |
Auto Close Tag | 自動閉合HTML標簽 |
Auto Import | import提示 |
Auto Rename Tag | 修改HTML標簽時，自動修改匹配的標簽 |
Babel JavaScript | babel插件，語法高亮 |
Babelrc | .babelrc文件高亮提示 |
Beautify css/sass/scss/less | css/sass/less格式化 |
Better Align | 對齊賦值符號和注釋 |
Better Comments | 編寫更加人性化的注釋 |
Bookmarks | 添加行書簽 |
Bracket Lens | 在閉合的括號處提示括號頭部的代碼 |
Bracket Pair Colorizer 2 | 用不同顏色高亮顯示匹配的括號 |
Can I Use | HTML5、CSS3、SVG的瀏覽器兼容性檢查 |
|
|
Code Runner | 運行選中代碼段（支持多數語言） |
Code Spell checker | 單詞拼寫檢查 |
CodeBing | 快速打開Bing并搜索，可配置搜索引擎 |
Color Highlight | 顏色值在代碼中高亮顯示 |
Color Info | 小窗口顯示顏色值，rgb,hsl,cmyk,hex等等 |
Color Picker | 拾色器 |
CSS-in-JS | CSS-in-JS高亮提示和轉換 |
Dash | 集成Dash |
Debugger for Chrome | 調試Chrome |
Document This | 注釋文檔生成 |
DotENV | .env文件高亮 |
Edit csv | 編輯CSV文件 |
EditorConfig for VS Code | EditorConfig插件 |
Emoji | 在代碼中輸入emoji |
endy | 將輸入光標跳轉到當前行最后面 |
Error Gutters | 在行號處提示錯誤代碼 |
ESLint | ESLint插件，高亮提示 |
File Peek | 根據路徑字符串，快速定位到文件 |
filesize | 狀態欄顯示當前文件大小 |
Find-Jump | 快速跳轉到指定單詞位置 |
Font-awesome codes for html | FontAwesome提示代碼段 |
ftp-sync | 同步文件到ftp |
Git Blame | 在狀態欄顯示當前行的Git信息 |
Git File History | 快速瀏覽單文件歷史提交變動 |
Git Graph | Git圖形化視圖，方便瀏覽和操作 |
Git History(git log) | 查看git log |
Git Tree Compare | Git樹形比對，查看不同分支的差異 |
gitignore | .gitignore文件語法 |
GitLens | 顯示文件最近的commit和作者，顯示當前行commit信息 |
GraphQL for VSCode | graphql高亮和提示 |
Guides | 高亮縮進基準線 |
Gulp Snippets | Gulp代碼段 |
Highlight Matching Tag | 高亮匹配選中的標簽 |
HTML CSS Class Completion | CSS class提示 |
HTML CSS Support | css提示（支持vue） |
HTMLHint | HTML格式提示 |
htmltagwrap | 快捷包裹html標簽 |
htmltagwrap | 包括HTML |
Import Beautify | import分組、排序、格式化 |
Import Cost | 行內顯示導入（import/require）的包的大小 |
Indenticator | 縮進高亮 |
IntelliSense for css class names | css class輸入提示 |
JavaScript (ES6) code snippets | ES6語法代碼段 |
JavaScript Standard Style | Standard風格 |
Jest Runner | 支持執行Jest單個測試文件或單個用例 |
JS Refactor | 代碼重構工具，提取函數、變量重命名等等 |
JSON to TS | JSON結構轉化為typescript的interface |
JSON Tools | 格式化和壓縮JSON |
jumpy | 快速跳轉到指定單詞位置 |
language-stylus | Stylus語法高亮和提示 |
Less IntelliSense | less變量與混合提示 |
Lodash | Lodash代碼段 |
Log Wrapper | 生產打印選中變量的代碼 |
markdownlint | Markdown格式提示 |
MochaSnippets | Mocha代碼段 |
Node modules resolve | 快速導航到Node模塊 |
npm | 運行npm命令 |
npm Intellisense | 導入模塊時，提示已安裝模塊名稱 |
Output Colorizer | 彩色輸出信息 |
Partial Diff | 對比兩段代碼或文件 |
Parameter Hints | 在函數調用處指示參數名稱 |
Path Autocomplete | 路徑完成提示 |
Path Intellisense | 另一個路徑完成提示 |
Polacode | 將代碼生成圖片 |
PostCss Sorting | css排序 |
Prettier - Code formatter | prettier官方插件 |
Prettify JSON | 格式化JSON |
Project Manager | 快速切換項目 |
Quokka.js | 不需要手動運行，行內顯示變量結果 |
Rainbow CSV | CSV文件使用彩虹色渲染不同列 |
React Native Storybooks | storybook預覽插件，支持react |
React Playground | 為編輯器提供一個react組件運行環境，方便調試 |
React Standard Style code snippets | react standar風格代碼塊 |
REST Client | 發送REST風格的HTTP請求 |
Sass | sass插件 |
Settings Sync | VSCode設置同步到Gist |
Sort lines | 排序選中行 |
Sort Typescript Imports | typescript的import排序 |
String Manipulation | 字符串轉換處理（駝峰、大寫開頭、下劃線等等） |
stylelint | css/sass/less代碼風格 |
SVG Viewer | SVG查看器 |
Syncing | vscode設置同步到gist |
Test Spec Generator | 測試用例生成（支持chai、should、jasmine） |
TODO Parser | Todo管理 |
Todo Todo Tree | 收集代碼中的TODO注釋，支持快速搜索 |
Toggle Quotes | 切換JS中的引號，" -> ' -> ` |
TS/JS postfix completion | ts/js后綴提示 |
TSLint | TypeScript語法檢查 |
Types auto installer | 自動安裝@types聲明依賴 |
TypeScript Hero | TypeScript輔助插件，管理import、outline等等 |
TypeScript Import | TS自動import |
TypeScript Import Sorter | import整理排序 |
Typescript React code snippets | React Typescript代碼段 |
TypeSearch | TS聲明文件搜索 |
Version Lens | package.json文件顯示模塊當前版本和最新版本 |
vetur | Vue插件 |
Volar | Vue插件，支持Vue3 |
View Node Package | 快速打開選中模塊的主頁和代碼倉庫 |
Visual Studio IntelliCode | 基于AI的代碼提示 |
VS Live Share | 實時多人協助 |
VSCode Great Icons | 文件圖標拓展 |
vscode-database | 操作數據庫，支持mysql和postgres |
vscode-icons | 文件圖標，方便定位文件 |
vscode-random | 隨機字符串生成器 |
vscode-spotify | 集成spotify，播放音樂 |
vscode-styled-components | styled-components高亮支持 |
vscode-styled-jsx | styled-jsx高亮支持 |
Vue Peek | 支持跳轉到Vue組件定義文件 |
Vue TypeScript Snippets | Vue Typescript代碼段 |
VueHelper | Vue2代碼段（包括Vue2 api、vue-router2、vuex2） |
Wallaby.js | 實時測試插件 |
Wrap Console Log Lite | 對選中代碼快速console.log |
名稱 | 預覽 |
Atom One Light Theme | |
bluloco-dark | |
bluloco-light | |
Enki Theme | |
eppz! (C# theme for Unity) | |
Eva Theme | |
Flat UI | |
GitHub Theme | |
Monokai Pro | |
New Moon VSCode | |
One Dark Pro | |
Plastic | |
spacegray-vscode | |
Splus |
eb前端入門到精通必會JS的屬性和常用方法，應同學留言要求，今天抽時間整理總結了Web前端實際開發中必會的變量、基本數據類型、表達式與操作符、流程控制語句、數組，核心知識點與常用方法，用不到可以直接不用學了，省的浪費時間 ！已經做成了網頁版，方便查缺補漏，建立屬于自己的知識庫！
對于web前端最難的JS部分，我們要做一次瘦身但又不失重點難點，不論是對于初學者還是已經工作的同學來說都能用得上，畢竟開發中不是時時刻刻都會用到所有的屬性和方法，很容易就忘記了 ！記得收藏起來!!
總結：JS語法與變量、基本數據類型、表達式與操作符、流程控制語句、數組，核心知識點與常用方法，經典版
單詞 | 功能描述 |
script | 將JavaScript代碼寫在html文件中，例如： <body> <script> //此處寫JavaScript代碼 </script> </body> |
引入.js格式的文件，例如： <script src="此處寫js文件所在的路徑"></script> |
單詞 | 功能描述 |
alert() | 彈出警告框 |
console.log() | 控制臺輸出 |
單詞 | 功能描述 |
var | 使用var可以聲明變量，例如：var num = 1;表示聲明一個名稱為num，值為1的變量 變量的合法命名： 1、只能由數字、字母、下劃線和$組成，但不能以數字開頭 2、不建議使用關鍵字和保留字 3、嚴格區分大小寫，A和a是兩個不同的變量 |
單詞 | 功能描述 |
typeof | 檢測值或者變量的數據類型 |
單詞 | 功能描述 |
NaN | 表示非數字，是一個特殊的數值 |
isNaN() | 用來檢測一個值是否為NaN ，是的話返回true，否則返回false |
單詞 | 功能描述 |
Number | 數值類型，所有的數字不分大小、不分正負、不分正負，都是數值類型 |
String | 字符串類型，使用雙引號或者單引號包裹的值 |
Boolean | 布爾類型，true表示真，false表示假 |
Undefined | 1、變量沒有賦值，默認為undefined 2、變量聲明提升時，變量的值也為undefined undefined的類型也為undefined |
Null | null表示空，用typeof檢測null，結果為object |
單詞 | 功能描述 |
length | 表示字符串的長度 |
單詞 | 功能描述 |
charAt() | 獲取指定位置的字符 |
substring() | 提取字符串中，介于兩個指定下標之間的字符 |
substr() | 在字符串中指定的位置處，提取指定數目的字符 |
slice() | 提取字符串的某個部分，類似于substring() ，不同之處： 1、substring() 可以自動交換參數的位置，而slice()不行。 2、slice()的第一個參數可以是負數，而substring()不行 |
toUpperCase() | 把字符串轉換為大寫 |
toLowerCase() | 把字符串轉換為小寫 |
indexOf | 返回字符串中指定字符首次出現的索引 |
單詞 | 功能描述 |
Number() | 將其他類型的值轉換為數字 |
parseInt() | 可以將參數轉成整數 |
parseFloat() | 可以將參數轉成浮點數 |
String() | 將其他類型的值轉換成字符串，例如：String(123) |
toString() | 將其他類型的值轉換成字符串，例如：(6).toString() 和String()的區別： 1、toString()無法轉換null和undefined，String()可以轉換null和undefined 2、toString()可增加進制參數，將字符串進行進制轉換，String()不能轉換進制 3、寫法不同，可參考上述例子 |
Boolean() | 將其他類型的值轉換為布爾值 |
單詞 | 功能描述 |
prompt() | 彈出輸入框 |
單詞 | 功能描述 |
Array、Object、Function | 數組、對象、函數 |
單詞 | 功能描述 |
+ | 加法運算符。加號有兩種作用，分別是加法和連字符 1、加號兩邊的操作數都是數字，則為加法 2、有一個操作數為字符串，則為連字符 |
- | 減法運算符 |
* | 乘法運算符 |
/ | 除法運算符 |
% | 取余運算符。例如：a%b代表a除以b的余數，8 %5 = 3 |
單詞 | 功能描述 |
toFixed() | 指定小數點后面的位數 |
單詞 | 功能描述 |
Math.pow(x,y) | 返回x的y次冪（不常用，了解即可） |
Math.sqrt() | 返回一個數的平方根（不常用，了解即可） |
Math.ceil() | 向上取整 |
Math.floor() | 向下取整 |
單詞 | 功能描述 |
> | 大于 |
< | 小于 |
>= | 大于等于 |
<= | 小于等于 |
== | 等于 |
!= | 不等于 |
=== | 全等于 |
!== | 不全等于 |
單詞 | 功能描述 |
! | 非 |
&& | 與 |
|| | 或 |
單詞 | 功能描述 |
= | 賦值 |
+= | 快捷賦值，例如： a+=1等價與a=a+1 |
-= | 快捷賦值，例如： a-=1等價與a=a-1 |
*= | 快捷賦值，例如： a*=1等價與a=a*1 |
/= | 快捷賦值，例如： a/=1等價與a=a/1 |
%= | 快捷賦值，例如： a%=1等價與a=a%1 |
++ | 自增運算 ，例如： var num1 = 3; num1++ console.log(num1)//num的值為4 |
-- | 自減運算，例如： var num2 = 3; num2-- console.log(num2)//num2的值為2 |
單詞 | 功能描述 |
if | 當指定條件為 true 時，執行if語句對應的代碼 |
if...else | 當條件為 true 時，執行if語句對應的代碼 當條件為 false 時，執行else語句對應的代碼 |
if...else if... | 滿足條件時，執行它所對應的代碼 |
case | 在switch中使用，表示要匹配的每一種情況 |
default | 在switch中使用，表示默認情況，當不滿足所有的case條件時，會執行默認情況 |
switch | 根據不同的條件來執行不同的動作。示例： switch (month) { case 1: alert("這個月有31天") break; case 4: alert("這個月有30天") break; default: alert("請輸入正確的月份！！") } |
boolean_expression ? true_value : false_value | 三元運算符，當條件表達式boolean_expression為真，執行表達式true_value，為假時執行表達式false_value |
單詞 | 功能描述 |
for | 循環執行一段代碼 示例： for(var i = 0; i <10;i++) { console.log(i); } |
while | 條件為真時循環執行代碼塊 |
do-while | while 循環的變體，語法： do{ 循環體 }while(循環執行條件) 注意事項： 1、do-while循環在檢查條件之前一定會執行一次循環體 2、如果條件為真，就會繼續執行循環體 3、如果條件為假，則會終止循環 |
單詞 | 功能描述 |
break | 用于退出循環 1、在switch中使用，用于跳出switch語句 2、在循環for、while中使用，直接跳出循環 |
continue | 跳出當前循環，繼續執行下一次循環 |
單詞 | 功能描述 |
Array | 數組， 用來存儲一組值 |
new | 與Array結合使用，創建數組，示例：new Array() （new是JavaScript中的一個關鍵字，用來實例化對象的，后面的面向對象章節中會有詳細的講解，目前了解即可） |
單詞 | 功能描述 |
Array.isArray() | 檢測數據是否是一個數組，返回布爾值 |
單詞 | 功能描述 |
length | 返回數組長度 |
單詞 | 功能描述 |
push() | 在尾部插入新項 |
pop() | 刪除數組的最后一項 |
unshift() | 在頭部插入新項 |
shift() | 刪除數組的第一項 |
splice() | 用于添加或刪除數組的元素 |
slice() | 從已有的數組中返回選定的元素 |
concat() | 合并多個數組 |
reverse() | 顛倒數組中元素的順序 |
indexOf() | 返回指定元素的索引值，如果不存在返回-1 |
includes() | 判斷一個數組是否包含指定的值，返回布爾值 |
| 用于數組排序（涉及到函數知識，在函數一節再進行詳細的講解） |
join() | 將數組轉成字符串 |
單詞 | 功能描述 |
split() | 將字符串轉成數組 |
最好的高效學習方法之一，就是要不斷地實踐+總結+分享，到最后能夠融會貫通，運用自如 ，一起加油 ！
關注我下篇接著分享以下內容：
【有關HTML/HTML5，CSS/CSS3的總結已經在往期的筆記中已發】
寵粉福利 做我的粉絲我寵你這期的是JS的基礎，下期筆記再總結 JS的高級部分的內容，一個個來梳理，喜歡記得點贊收藏關注了 ??還需要總結什么？
留言就好 ^_^ 看還能挖出點啥干貨不
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
