整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者：西嵐
轉發鏈接：https://juejin.im/post/5dadd0236fb9a04de04d968e
項目為前幾天收費幫學妹做的一個項目，Java EE JSP項目，在工作環境中基本使用不到，但是很多學校把這個當作編程入門的項目來做，故分享出本項目供初學者參考。
springboot開發的悠點裝飾后臺管理系統
系統有1權限：管理員
管理員信息
公司管理
案例管理
項目管理
招聘管理
福利管理
動態管理
輪播圖管理
客戶列表
合作伙伴列表
登錄
http://127.0.0.1:8080/youdian/logout
賬號密碼
朱總 666666
者：叫我詹躲躲
轉發鏈接：https://juejin.im/post/5edb6c6be51d4578a2555a9b
細品269個JavaScript小函數，讓你少加班熬夜（一）「值得收藏」
細品269個JavaScript小函數，讓你少加班熬夜（二）「值得收藏」
細品269個JavaScript小函數，讓你少加班熬夜（三）「值得收藏」
細品269個JavaScript小函數，讓你少加班熬夜（四）「值得收藏」（本篇）
細品269個JavaScript小函數，讓你少加班熬夜（五）「值得收藏」
細品269個JavaScript小函數，讓你少加班熬夜（六）「值得收藏」
const detectDeviceType = () =>
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
? 'Mobile'
: 'Desktop';
// 事例
detectDeviceType(); // "Mobile" or "Desktop"
復制代碼 const currentURL = () => window.location.href
// 事例
currentURL() // 'https://google.com'
復制代碼 const getURLParameters = url =>
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
(a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
{}
);
// 事例
getURLParameters('http://url.com/page?n=Adam&s=Smith'); // {n: 'Adam', s: 'Smith'}
getURLParameters('google.com'); // {}
復制代碼 const formToObject = form =>
Array.from(new FormData(form)).reduce(
(acc, [key, value]) => ({
...acc,
[key]: value
? }),
? {}
);
// 事例
formToObject(document.querySelector('#form'));
// { email: 'test@email.com', name: 'Test Name' }
復制代碼 const get = (from, ...selectors) =>
[...selectors].map(s =>
s
.replace(/\[([^\[\]]*)\]/g, '.$1.')
.split('.')
.filter(t => t !== '')
.reduce((prev, cur) => prev && prev[cur], from)
);
const obj = { selector: { to: { val: 'val to select' } }, target: [1, 2, { a: 'test' }] };
// Example
get(obj, 'selector.to.val', 'target[0]', 'target[2].a');
// ['val to select', 1, 'test']
復制代碼 const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args);
delay(
function(text) {
console.log(text);
},
1000,
'later'
);
// 1秒后打印 'later'
復制代碼 const triggerEvent = (el, eventType, detail) =>
el.dispatchEvent(new CustomEvent(eventType, { detail }));
// 事例
triggerEvent(document.getElementById('myId'), 'click');
triggerEvent(document.getElementById('myId'), 'click', { username: 'bob' });
自定義事件的函數有 Event、CustomEvent 和 dispatchEvent
// 向 window派發一個resize內置事件
window.dispatchEvent(new Event('resize'))
// 直接自定義事件，使用 Event 構造函數：
var event = new Event('build');
var elem = document.querySelector('#id')
// 監聽事件
elem.addEventListener('build', function (e) { ... }, false);
// 觸發事件.
elem.dispatchEvent(event);
CustomEvent 可以創建一個更高度自定義事件，還可以附帶一些數據，具體用法如下：
var myEvent = new CustomEvent(eventname, options);
其中 options 可以是：
{
detail: {
...
},
bubbles: true, //是否冒泡
cancelable: false //是否取消默認事件
}
其中 detail 可以存放一些初始化的信息，可以在觸發的時候調用。其他屬性就是定義該事件是否具有冒泡等等功能。
內置的事件會由瀏覽器根據某些操作進行觸發，自定義的事件就需要人工觸發。
dispatchEvent 函數就是用來觸發某個事件：
element.dispatchEvent(customEvent);
上面代碼表示，在 element 上面觸發 customEvent 這個事件。
// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });
// create and dispatch the event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);
使用自定義事件需要注意兼容性問題，而使用 jQuery 就簡單多了：
// 綁定自定義事件
$(element).on('myCustomEvent', function(){});
// 觸發事件
$(element).trigger('myCustomEvent');
// 此外，你還可以在觸發自定義事件時傳遞更多參數信息：
$( "p" ).on( "myCustomEvent", function( event, myName ) {
$( this ).text( myName + ", hi there!" );
});
$( "button" ).click(function () {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
復制代碼 const off = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts);
const fn = () => console.log('!');
document.body.addEventListener('click', fn);
off(document.body, 'click', fn);
復制代碼 const formatDuration = ms => {
if (ms < 0) ms = -ms;
const time = {
day: Math.floor(ms / 86400000),
hour: Math.floor(ms / 3600000) % 24,
minute: Math.floor(ms / 60000) % 60,
second: Math.floor(ms / 1000) % 60,
millisecond: Math.floor(ms) % 1000
};
return Object.entries(time)
.filter(val => val[1] !== 0)
.map(([key, val]) => `${val} ${key}${val !== 1 ? 's' : ''}`)
.join(', ');
};
// 事例
formatDuration(1001); // '1 second, 1 millisecond'
formatDuration(34325055574);
// '397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds'
復制代碼 const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
(dateFinal - dateInitial) / (1000 * 3600 * 24);
// 事例
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9
復制代碼 const httpGet = (url, callback, err = console.error) => {
const request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = () => callback(request.responseText);
request.onerror = () => err(request);
request.send();
};
httpGet(
'https://jsonplaceholder.typicode.com/posts/1',
console.log
);
// {"userId": 1, "id": 1, "title": "sample title", "body": "my text"}
復制代碼 const httpPost = (url, data, callback, err = console.error) => {
const request = new XMLHttpRequest();
request.open('POST', url, true);
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.onload = () => callback(request.responseText);
request.onerror = () => err(request);
request.send(data);
};
const newPost = {
userId: 1,
id: 1337,
title: 'Foo',
body: 'bar bar bar'
};
const data = JSON.stringify(newPost);
httpPost(
'https://jsonplaceholder.typicode.com/posts',
data,
console.log
);
// {"userId": 1, "id": 1337, "title": "Foo", "body": "bar bar bar"}
復制代碼 const counter = (selector, start, end, step = 1, duration = 2000) => {
let current = start,
_step = (end - start) * step < 0 ? -step : step,
timer = setInterval(() => {
current += _step;
document.querySelector(selector).innerHTML = current;
if (current >= end) document.querySelector(selector).innerHTML = end;
if (current >= end) clearInterval(timer);
}, Math.abs(Math.floor(duration / (end - start))));
return timer;
};
// 事例
counter('#my-id', 1, 1000, 5, 2000);
// 讓 `id=“my-id”`的元素創建一個2秒計時器
復制代碼 const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected =
document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
};
// 事例
copyToClipboard('Lorem ipsum');
// 'Lorem ipsum' copied to clipboard
復制代碼 const isBrowserTabFocused = () => !document.hidden;
// 事例
isBrowserTabFocused(); // true
復制代碼 const fs = require('fs');
const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);
// 事例
createDirIfNotExists('test');
這里面的方法大都挺實用，可以解決很多開發過程問題，大家就好好利用起來吧。
復制代碼function formatTime(date) {
if(!!date){
if(!(date instanceof Date))
date = new Date(date);
var month = date.getMonth() + 1
var day = date.getDate()
return `${month}月${day}日`;
}
}
function formatDay(date) {
if(!!date){
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
return [year, month, day].map(formatNumber).join('-');
}
}
function formatDay2(date) {
if(!!date){
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
return [year, month, day].map(formatNumber).join('/');
}
}
function formatWeek(date){
if(!!date){
var day = date.getDay();
switch (day) {
case 0:
return '周日'
break;
case 1:
return '周一'
break;
case 2:
return '周二'
break;
case 3:
return '周三'
break;
case 4:
return '周四'
break;
case 5:
return '周五'
break;
case 6:
return '周六'
break;
}
}
}
function formatHour(date){
if(!!date){
var hour = new Date(date).getHours();
var minute = new Date(date).getMinutes();
return [hour, minute].map(formatNumber).join(':');
}
}
function timestamp(date, divisor=1000){
if(date == undefined){
return;
}else if(typeof date == 'number'){
return Math.floor(date/divisor);
}else if(typeof date == 'string'){
var strs = date.split(/[^0-9]/);
return Math.floor(+new Date(strs[0] || 0,(strs[1] || 0)-1,strs[2] || 0,strs[3] || 0,strs[4] || 0,strs[5] || 0)/divisor);
}else if(Date.prototype.isPrototypeOf(date)){
return Math.floor(+date/divisor);
}
}
function detimestamp(date){
if(!!date){
return new Date(date*1000);
}
}
function formatNumber(n) {//給在0-9的日期加上0
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime,
formatDay: formatDay,
formatDay2: formatDay2,
formatHour: formatHour,
formatWeek: formatWeek,
timestamp: timestamp,
detimestamp: detimestamp
}
復制代碼/**
* 時間戳轉化為年 月 日 時 分 秒
* number: 傳入時間戳
* format：返回格式，支持自定義，但參數必須與formateArr里保持一致
*/
function formatTime(number,format) {
var formateArr = ['Y','M','D','h','m','s'];
var returnArr = [];
var date = new Date(number * 1000);
returnArr.push(date.getFullYear());
returnArr.push(formatNumber(date.getMonth() + 1));
returnArr.push(formatNumber(date.getDate()));
returnArr.push(formatNumber(date.getHours()));
returnArr.push(formatNumber(date.getMinutes()));
returnArr.push(formatNumber(date.getSeconds()));
for (var i in returnArr)
{
format = format.replace(formateArr[i], returnArr[i]);
}
return format;
}
//數據轉化
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
調用示例：
var sjc = 1488481383;//時間戳
console.log(time.formatTime(sjc,'Y/M/D h:m:s'));//轉換為日期：2017/03/03 03:03:03
console.log(time.formatTime(sjc, 'h:m'));//轉換為日期：03:03
復制代碼js中獲取上下文路徑
//js獲取項目根路徑，如： http://localhost:8083/uimcardprj
function getRootPath(){
//獲取當前網址，如： http://localhost:8083/uimcardprj/share/meun.jsp
var curWwwPath=window.document.location.href;
//獲取主機地址之后的目錄，如： uimcardprj/share/meun.jsp
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//獲取主機地址，如： http://localhost:8083
var localhostPaht=curWwwPath.substring(0,pos);
//獲取帶"/"的項目名，如：/uimcardprj
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return(localhostPaht+projectName);
}
復制代碼function conver(limit){
var size = "";
if( limit < 0.1 * 1024 ){ //如果小于0.1KB轉化成B
size = limit.toFixed(2) + "B";
}else if(limit < 0.1 * 1024 * 1024 ){//如果小于0.1MB轉化成KB
size = (limit / 1024).toFixed(2) + "KB";
}else if(limit < 0.1 * 1024 * 1024 * 1024){ //如果小于0.1GB轉化成MB
size = (limit / (1024 * 1024)).toFixed(2) + "MB";
}else{ //其他轉化成GB
size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
}
var sizestr = size + "";
var len = sizestr.indexOf("\.");
var dec = sizestr.substr(len + 1, 2);
if(dec == "00"){//當小數點后為00時 去掉小數部分
return sizestr.substring(0,len) + sizestr.substr(len + 3,2);
}
return sizestr;
}
復制代碼function fullScreen() {
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
? //typeof rfs != "undefined" && rfs
? if (rfs) {
? rfs.call(el);
? } else if (typeof window.ActiveXObject !== "undefined") {
? //for IE，這里其實就是模擬了按下鍵盤的F11，使瀏覽器全屏
? var wscript = new ActiveXObject("WScript.Shell");
? if (wscript != null) {
? wscript.SendKeys("{F11}");
? }
? }
? }
? //退出全屏
? function exitScreen() {
? var el = document;
? var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen;
? //typeof cfs != "undefined" && cfs
? if (cfs) {
? cfs.call(el);
? } else if (typeof window.ActiveXObject !== "undefined") {
? //for IE，這里和fullScreen相同，模擬按下F11鍵退出全屏
? var wscript = new ActiveXObject("WScript.Shell");
? if (wscript != null) {
? wscript.SendKeys("{F11}");
? }
? }
? }
復制代碼 /**
* 格式化時間，轉化為幾分鐘前，幾秒鐘前
* @param timestamp 時間戳，單位是毫秒
*/
function timeFormat(timestamp) {
var mistiming = Math.round((Date.now() - timestamp) / 1000);
var arrr = ['年', '個月', '星期', '天', '小時', '分鐘', '秒'];
var arrn = [31536000, 2592000, 604800, 86400, 3600, 60, 1];
for (var i = 0; i < arrn.length; i++) {
var inm = Math.floor(mistiming / arrn[i]);
if (inm != 0) {
return inm + arrr[i] + '前';
}
}
}
復制代碼/**
* 獲取n天之前的日期 getDaysBeforeDate(10) 10天前
* @param day 天數
*/
function getDaysBeforeDate(day) {
var date = new Date(),
timestamp, newDate;
timestamp = date.getTime();
// 獲取三天前的日期
newDate = new Date(timestamp - day * 24 * 3600 * 1000);
var year = newDate.getFullYear();
// 月+1是因為js中月份是按0開始的
var month = newDate.getMonth() + 1;
var day = newDate.getDate();
if (day < 10) { // 如果日小于10，前面拼接0
day = '0' + day;
}
if (month < 10) { // 如果月小于10，前面拼接0
month = '0' + month;
}
return [year, month, day].join('/');
}
復制代碼 /**
* 獲取跳轉的classId,通過hash方式獲取
* @return 返回值
*/
$scope.getQueryString = function() {
var url= {},
a = '';
(a = window.location.search.substr(1)) || (a = window.location.hash.split('?')[1])
a.split(/&/g).forEach(function(item) {
url[(item = item.split('='))[0]] = item[1];
})
return url
}
復制代碼function filterArrBySex(data, name) {
if (!name) {
console.log(name)
return data;
} else {
return data.filter(function(ele, index, self) {
if (ele.name.includes(name)) {
return ele
}
})
}
}
復制代碼 /**
* 根據身份證獲取出生年月
* @param idCard
*/
function getBirthdayFromIdCard(idCard) {
var birthday = "";
if (idCard != null && idCard != "") {
if (idCard.length == 15) {
birthday = "19" + idCard.substr(6, 6);
} else if (idCard.length == 18) {
birthday = idCard.substr(6, 8);
}
birthday = birthday.replace(/(.{4})(.{2})/, "$1-$2-");
}
return birthday;
}
復制代碼/**
* 根據身份證獲取年齡
* @param UUserCard
*/
function IdCard(UUserCard) {
//獲取年齡
var myDate = new Date();
var month = myDate.getMonth() + 1;
var day = myDate.getDate();
var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
age++;
}
return age
}
復制代碼//vue購物車金額結算
window.onload = function() {
var vm = new Vue({
el: '#app',
data: {
items: [{
id: 1,
name: "蘋果",
price: 10,
count: 1,
url: "http://www.jq22.com/img/cs/500x500-1.png"
},
{
id: 2,
name: "蝴蝶",
price: 8,
count: 5,
url: "http://www.jq22.com/img/cs/500x500-2.png"
},
{
id: 3,
name: "小狗",
price: 100,
count: 1,
url: "http://www.jq22.com/img/cs/500x500-3.png"
},
{
id: 4,
name: "鮮花",
price: 10,
count: 1,
url: "http://www.jq22.com/img/cs/500x500-4.png"
}
],
search: ""
},
methods: {
},
filters: { //過濾器
numFilter: function(data, n) { //data==item.price 當前過濾的數據 n==2
return "￥" + data.toFixed(n)
}
},
computed: { //計算屬性
totalCount: function() {
var n = 0;
this.items.forEach((v, i) => {
n += v.count
});
return n;
},
totalPrice: function() {
var money = 0;
this.items.forEach((v, i) => {
money += v.count * v.price
});
return money;
},
searchFor: function() {
if (!this.search) {
return this.items
}
return this.items.filter((v, i) => {
if (v.name.indexOf(this.search) !== -1) { //匹配成功
return v
}
})
}
}
})
}
//設置iframe高度
function setIframeHeight(sonH) { //debugger;
var height = 0;
//比較父子頁面高度，以高度更大的為準
var parentH = $(window).height(); //iframe最小高度應為瀏覽器視口高度，否則門戶管理頁面彈窗大小會受限制
height = parentH > sonH ? parentH : sonH;
$('#mainIframe').height(height);
//子頁面有傳值過來，覆蓋iframe的最小高度-2000px
$("#mainIframe").css("min-height", 'auto');
$(".body-bg").css("height", height + 200);
try {
var childBody = $("#mainIframe")[0].contentWindow.document.getElementsByTagName("body")[0];
//childBody.style.minHeight = height + "px";
} catch (error) {
if (error.message.indexOf("Blocked from frame") > -1) console.warn("當前頁面存在跨域！");
}
}
(function($) {
$("#username").keyup(function(event) {
if (event.keyCode == 13) $("#password").focus().select();
});
$("#password").keyup(function(event) {
if (event.keyCode == 13) $("#login-button").click();
});
})(jQuery);
//回到頂部
function goTop() {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
}
window.onscroll = function() {
var t = document.documentElement.scrollTop;
if (t > 50) {
$(".toTop").fadeIn();
} else {
$(".toTop").fadeOut();
}
}
function urlAnalysis() {
var url = window.location.href;
var paraString = url.substring(url.indexOf("?") + 1, url.length);
var indexFirst = paraString.indexOf("&");
var paraStringTitle = paraString.slice(0, indexFirst);
paraStringElse = paraString.slice(indexFirst + 1, paraString.length);
var paraStringUrl = paraStringElse;
//區分是否傳參：functionId
if (paraString.indexOf("functionId") > -1) {
var indexSecond = paraStringElse.indexOf("&");
var paraStringFId = paraStringElse.slice(0, indexSecond);
var functionId = paraStringFId.split("=")[1];
var $body = angular.element(document.body);
var $rootScope = $body.scope().$root;
$rootScope.navFunctionId = functionId;
paraStringUrl = paraStringElse.slice(indexSecond + 1, paraStringElse.length);
}
var title = paraStringTitle.split("=")[1] === "undefined" ? "" : decodeURI(paraStringTitle.split("=")[1]);
var indexUrl = paraStringUrl.indexOf("=");
var iframeUrl = paraStringUrl.slice(indexUrl + 1, paraStringUrl.length);
document.title = title;
$("#mainIframe").attr("src", iframeUrl);
}
// 監聽enter按下事件，頁面跳轉
$scope.enterEvent = function(e) {
var keycode = window.event ? e.keyCode : e.which;
if (keycode == 13) {
console.log($scope.searchVal)
console.log('監聽成功')
var baseUrl = '#/pages/knowlege/knowlegeSeach.html'
window.open(baseUrl)
}
};
function showDate() {
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth() + 1;
month = month < 10 ? '0' + month : month;
var date = myDate.getDate();
date = date < 10 ? '0' + date : date;
var weekDay = myDate.getDay();
switch (weekDay) {
case 0:
weekDay = "天";
break;
case 1:
weekDay = "一";
break;
case 2:
weekDay = "二";
break;
case 3:
weekDay = "三";
break;
case 4:
weekDay = "四";
break;
case 5:
weekDay = "五";
break;
case 6:
weekDay = "六";
break;
"name"
}
$scope.year = year;
$scope.month = month;
$scope.date = date;
$scope.weekDay = weekDay;
}
//獲取跳轉的classId,通過hash方式獲取
$scope.getQueryString = function() {
var obg = {},
a = '';
(a = window.location.search.substr(1)) || (a = window.location.hash.split('?')[1])
a.split(/&/g).forEach(function(item) {
obg[(item = item.split('='))[0]] = item[1];
})
return obg
}
var classId = $scope.getQueryString();本篇未完結，請留意下一篇
《細品269個JavaScript小函數，讓你少加班熬夜（一）「值得收藏」》
《細品269個JavaScript小函數，讓你少加班熬夜（二）「值得收藏」》
《細品269個JavaScript小函數，讓你少加班熬夜（三）「值得收藏」》
《深入JavaScript教你內存泄漏如何防范》
《手把手教你7個有趣的JavaScript 項目-上「附源碼」》
《手把手教你7個有趣的JavaScript 項目-下「附源碼」》
《JavaScript 使用 mediaDevices API 訪問攝像頭自拍》
《手把手教你前端代碼如何做錯誤上報「JS篇」》
《一文讓你徹底搞懂移動前端和Web 前端區別在哪里》
《63個JavaScript 正則大禮包「值得收藏」》
《提高你的 JavaScript 技能10 個問答題》
《JavaScript圖表庫的5個首選》
《一文徹底搞懂JavaScript 中Object.freeze與Object.seal的用法》
《可視化的 JS：動態圖演示 - 事件循環 Event Loop的過程》
《教你如何用動態規劃和貪心算法實現前端瀑布流布局「實踐」》
《可視化的 js：動態圖演示 Promises & Async/Await 的過程》
《原生JS封裝拖動驗證滑塊你會嗎？「實踐」》
《如何實現高性能的在線 PDF 預覽》
《細說使用字體庫加密數據-仿58同城》
《Node.js要完了嗎？》
《Pug 3.0.0正式發布，不再支持 Node.js 6/8》
《純JS手寫輪播圖（代碼邏輯清晰，通俗易懂）》
《JavaScript 20 年 中文版之創立標準》
《值得收藏的前端常用60余種工具方法「JS篇」》
《箭頭函數和常規函數之間的 5 個區別》
《通過發布/訂閱的設計模式搞懂 Node.js 核心模塊 Events》
《「前端篇」不再為正則煩惱》
《「速圍」Node.js V14.3.0 發布支持頂級 Await 和 REPL 增強功能》
《深入細品瀏覽器原理「流程圖」》
《JavaScript 已進入第三個時代，未來將何去何從？》
《前端上傳前預覽文件 image、text、json、video、audio「實踐」》
《深入細品 EventLoop 和瀏覽器渲染、幀動畫、空閑回調的關系》
《推薦13個有用的JavaScript數組技巧「值得收藏」》
《前端必備基礎知識：window.location 詳解》
《不要再依賴CommonJS了》
《犀牛書作者：最該忘記的JavaScript特性》
《36個工作中常用的JavaScript函數片段「值得收藏」》
《Node + H5 實現大文件分片上傳、斷點續傳》
《一文了解文件上傳全過程（1.8w字深度解析）「前端進階必備」》
《【實踐總結】關于小程序掙脫枷鎖實現批量上傳》
《手把手教你前端的各種文件上傳攻略和大文件斷點續傳》
《字節跳動面試官：請你實現一個大文件上傳和斷點續傳》
《談談前端關于文件上傳下載那些事【實踐】》
《手把手教你如何編寫一個前端圖片壓縮、方向糾正、預覽、上傳插件》
《最全的 JavaScript 模塊化方案和工具》
《「前端進階」JS中的內存管理》
《JavaScript正則深入以及10個非常有意思的正則實戰》
《前端面試者經常忽視的一道JavaScript 面試題》
《一行JS代碼實現一個簡單的模板字符串替換「實踐」》
《JS代碼是如何被壓縮的「前端高級進階」》
《前端開發規范：命名規范、html規范、css規范、js規范》
《【規范篇】前端團隊代碼規范最佳實踐》
《100個原生JavaScript代碼片段知識點詳細匯總【實踐】》
《關于前端174道 JavaScript知識點匯總（一）》
《關于前端174道 JavaScript知識點匯總（二）》
《關于前端174道 JavaScript知識點匯總（三）》
《幾個非常有意思的javascript知識點總結【實踐】》
《都2020年了，你還不會JavaScript 裝飾器？》
《JavaScript實現圖片合成下載》
《70個JavaScript知識點詳細總結（上）【實踐】》
《70個JavaScript知識點詳細總結（下）【實踐】》
《開源了一個 JavaScript 版敏感詞過濾庫》
《送你 43 道 JavaScript 面試題》
《3個很棒的小眾JavaScript庫，你值得擁有》
《手把手教你深入鞏固JavaScript知識體系【思維導圖】》
《推薦7個很棒的JavaScript產品步驟引導庫》
《Echa哥教你徹底弄懂 JavaScript 執行機制》
《一個合格的中級前端工程師需要掌握的 28 個 JavaScript 技巧》
《深入解析高頻項目中運用到的知識點匯總【JS篇】》
《JavaScript 工具函數大全【新】》
《從JavaScript中看設計模式(總結)》
《身份證號碼的正則表達式及驗證詳解(JavaScript，Regex)》
《瀏覽器中實現JavaScript計時器的4種創新方式》
《Three.js 動效方案》
《手把手教你常用的59個JS類方法》
《127個常用的JS代碼片段，每段代碼花30秒就能看懂-【上】》
《深入淺出講解 js 深拷貝 vs 淺拷貝》
《手把手教你JS開發H5游戲【消滅星星】》
《深入淺出講解JS中this/apply/call/bind巧妙用法【實踐】》
《手把手教你全方位解讀JS中this真正含義【實踐】》
《書到用時方恨少，一大波JS開發工具函數來了》
《干貨滿滿!如何優雅簡潔地實現時鐘翻牌器(支持JS/Vue/React)》
《手把手教你JS 異步編程六種方案【實踐】》
《讓你減少加班的15條高效JS技巧知識點匯總【實踐】》
《手把手教你JS開發H5游戲【黃金礦工】》
《手把手教你JS實現監控瀏覽器上下左右滾動》
《JS 經典實例知識點整理匯總【實踐】》
《2.6萬字JS干貨分享，帶你領略前端魅力【基礎篇】》
《2.6萬字JS干貨分享，帶你領略前端魅力【實踐篇】》
《簡單幾步讓你的 JS 寫得更漂亮》
《恭喜你獲得治療JS this的詳細藥方》
《談談前端關于文件上傳下載那些事【實踐】》
《面試中教你繞過關于 JavaScript 作用域的 5 個坑》
《Jquery插件（常用的插件庫）》
《【JS】如何防止重復發送ajax請求》
《JavaScript+Canvas實現自定義畫板》
《Continuation 在 JS 中的應用「前端篇」》
作者：叫我詹躲躲
鏈接：https://juejin.im/post/5edb6c6be51d4578a2555a9b
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
