前端技巧汇总-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43338182/article/details/83829195

本文汇总了前端开发中的实用技巧，包括eval()函数的使用、数组反转、文件上传的AJAX实现、字符串转换及格式化、页面元素的异步加载、定时器的设置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.eval()

里面可以写js代码，可以把字符串转成对象:
eval('('+字符串变量+')')

在js中反转数组
arr.reverse();
ajax上传文件

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url: 'xxxxx',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false,
    success:function(res){
    },
})

2.字符串转小数，再保留两位小数

parseFloat(str).toFixed(2);

3.include

前端需要引用其他域名（接口）返回的一个（html）头部;

方法一：
可以在自己的项目下，自己写一个controller调用那个接口，返回给自己的前端；

在jsp中再引用自己的接口；
<jsp:include page=”/caren/header” flush=”true”/>

注意：我使用<%@ include file=”/caren/header”%>是不好使的。
原因可以自己去查 他俩的区别；

方法二：
写个js异步请求接口，把数据异步渲染上去也行；
$(function(){
			$.ajax({
				url:'http://xxx/api/1/component/header',
				type:'get',
				success:function(data){
					console.log(data);
					$(".xx").html(data);
				}
			});
		})

4.定时器

<script type="text/javascript">

// 这个方法的意思：定时任务 每 1000 * 30 毫秒  执行一次 initMessageInfo 方法
setInterval("initMessageInfo();",1000 * 30);

function initMessageInfo(){
      需要执行的代码......
}
</script>

这个是循环几次写几次
setTimeout(()=>{
	需要执行的代码......
	setTimeout(()=>{
		需要执行的代码......
	},1000)
},1000)

5.不是问题的问题

可以通过在input框中加入 autocomplete=“off” 不让历史记录显示
在这里插入图片描述

6.replace

这种写法相当于replaceAll,把所有的 - 替换成 :
str.replace(/-/g,":");

选择器

$("table").off("click",".layui-form-checkbox").on("click",".layui-form-checkbox",function () {

$(this).parents(".layui-row").siblings().find(".layui-form-checkbox").removeClass("layui-form-checked").siblings("input").prop("checked",false);
}


$("input[name^='id']:checked").each(function () {
      let id=$(this).val();
    });

jquery 判断是否是最后一个同级元素

html

<tbody>
<tr>
    <td width="60" style="padding:12px 0;">
    	<a href="javascript:;" class="add"></a>
    </td>
    <td width="120"></td>
    <td><input name="query" type="text" ></td>
    <td width="80"></td>
</tr>
<tr>
    <td width="60" style="padding:12px 0;">
    	<a href="javascript:;" class="add"></a>
	</td>
    <td width="120"></td>
    <td><input name="query" type="text" ></td>
    <td width="80"></td>
</tr>
<tr>
    <td width="60" style="padding:12px 0;">
    	<a href="javascript:;" class="add"></a>
    </td>
    <td width="120"></td>
    <td><input name="query" type="text" ></td>
    <td width="80"></td>
</tr>
</tbody>

js

$("body").on("click",'tbody tr td .add',function(){

	var aon="逻辑运算框";
	var total=$(this).parents("tbody").find("tr").length;
	var index=$(this).parents("tr").index();
	if(total==index+1){
		//最后一行
		$(this).parents("tr").find("td:last").append(aon);
	}else{
		//不是最后一行，在倒数第二行加逻辑运算框
		$(this).parents("tbody").find("tr:last").prev().find("td:last").append(aon);
	}

}

input 框限制

只能输入数字

 <input type="text" oninput="value=value.replace(/[^\d]/g, '')" />

限制输入字数

<input  type="text" onChange="if(this.value.length>10){this.value=this.value.slice(0,10)}" onkeydown=" if (event.keyCode ===13) {search()}">

js apend html 加事件

这个写法记录一下，下次直接 copy

$(".history_search").append('<a href="javascript:;" οnclick="quickSearch('+ "\'"+obj.recordName+"\'" +')">'+obj.recordName+'</a>');

login页面表单密码加密解密

前端对密码加密

密码传给后台之前使用 jsencrypt 进行加密

import JSEncrypt from 'jsencrypt/bin/jsencrypt'

// 密钥对生成 http://web.chacuo.net/netrsakeypair

const publicKey = 'xxxx'

const privateKey = 'xxxx'

// 加密
export function encrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPublicKey(publicKey) // 设置公钥
  return encryptor.encrypt(txt) // 对需要加密的数据进行加密
}

// 解密
export function decrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey)
  return encryptor.decrypt(txt)
}

后台解密

对前台传来的密码解密

// 这里的密钥需要与前端的相同
String privateKey="xxx";
// 这里使用的 hutool工具包
RSA rsa=new RSA(privateKey,null);
String password = new String(rsa.decrypt("password==", KeyType.PrivateKey));
System.out.println(password);

js 实现Ctrl + C 复制功能


//data就是需要复制的字符串
function copyCode(data) {
		//创建一个input框
      let input = document.createElement('input');
      //设置id
      input.id = "temp_copy";
      //设置只读
      input.setAttribute('readonly', 'readonly');
      //赋值
      input.setAttribute('value', data);
      //把input添加到body中
      document.body.appendChild(input);
      //选中input框，取值复制
      $('#temp_copy').select();
      document.execCommand("copy",false,null);
      //删除input框
      document.body.removeChild(input);
     
    }

自己的css总结

让div全屏

html, body {
margin:0;
padding:0;
}

a标签禁用+置灰

.current{
        pointer-events: none;
        filter: alpha(opacity=50);/*IE滤镜，透明度50%*/
        -moz-opacity: 0.5;/*Firefox私有，透明度50%*/
        opacity: 0.5;/*其他，透明度50%*/
    }

字符串过多时显示…

	text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; //几行
    -webkit-box-orient: vertical;

js 下载网络图片

/**
 * 下载图片并重命名
 * download('https://www.baidu.com/img/baidu_resultlogo@2.png', 'ab.png')
 */

/**
* 下载
* @param  {String} url 目标文件地址
* @param  {String} filename 想要保存的文件名称
*/
export function downloadRemoteImg(url, filename) {
	getBlob(url, function(blob) {
		saveAs(blob, filename);
	});
};

/**
 * 获取 blob
 * @param  {String} url 目标文件地址
 * @return {cb} 
 */
 function getBlob(url,cb) {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', url, true);
	xhr.responseType = 'blob';
	xhr.onload = function() {
			if (xhr.status === 200) {
				cb(xhr.response);
			}
	};
	xhr.send();
}

/**
* 保存
* @param  {Blob} blob     
* @param  {String} filename 想要保存的文件名称
*/
function saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
		navigator.msSaveBlob(blob, filename);
} else {
		var link = document.createElement('a');
		var body = document.querySelector('body');

		link.href = window.URL.createObjectURL(blob);
		link.download = filename;

		// fix Firefox
		link.style.display = 'none';
		body.appendChild(link);

		link.click();
		body.removeChild(link);

		window.URL.revokeObjectURL(link.href);
};
}

富文本编辑器 tinymce

1.添加 tinymce 以及需要绑定的元素

<!--版本5.10.0-->
<script type="text/javascript" src="/assets/admin/tinymce/tinymce.min.js"></script>
<textarea id="my_tinymce" name="content"></textarea>

2.初始化js

function example_image_upload_handler (blobInfo, success, failure, progress) {
    var formData=new FormData();
    var file = blobInfo.blob();
    formData.append('file', file, file.name );
    $.ajax({
        url: "uploadCutTitleImg.do",
        type: "post",
        data: formData,
        processData: false,
        contentType: false,
        dataType:'json',
        success: function(data) {
            success(data.msg);
        },
        error: function(e) {
            alert("图片上传失败");
        }
    });
};
function example_file_picker_callback(callback, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.onchange = function() {
        var file = this.files[0];
        var form = new FormData();
        form.append("file", file);
        $.ajax({
            url: "uploadCutTitleImg.do",
            type: "post",
            data: form,
            processData: false,
            contentType: false,
            success: function(data) {
                callback(data.msg);
            },
            error: function(e) {
                alert("图片上传失败");
            }
        });
    };
    input.click();
}
$(function() {
tinymce.init({
    selector: '#my_tinymce',
    body_class: 'TinyMCE_class',
    language:'zh_CN',
    //插件列表：indent2em（首行缩进，这个插件需要去上面的链接下载） 
    plugins : 'lists advlist autolink autoresize link image image preview autosave charmap emoticons fullpage code ' +
        'codesample fullscreen hr insertdatetime pagebreak print quickbars searchreplace table toc wordcount indent2em help',
    //工具栏
    toolbar:['undo redo | fontsizeselect | styleselect | forecolor backcolor | code removeformat charmap insertdatetime emoticons| image preview',
        'numlist bullist | bold italic superscript subscript  | alignleft aligncenter alignright alignjustify | outdent indent indent2em'],
    fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',//fontsize选择范围
    max_height: 900,
    min_height:300,
    branding: false,//隐藏右下角技术支持
    pagebreak_split_block: true,//插入分页符时拆分块元素
    quickbars_insert_toolbar: false,//快速插入 触发提供的工具栏
    quickbars_selection_toolbar: 'bold | h1 h2 h3',//快速选择 触发提供的工具栏
    images_upload_handler: example_image_upload_handler,//拖动图片上传方法
    file_picker_callback: example_file_picker_callback,//选择图片上传方法
    //添加样式
    content_style:'@font-face {font-family: \'dbkFont\';src: url(\'${base}/assets/admin/fonts/dbk.ttf\');}.TinyMCE_class {font-family:\'dbkFont\'}',
});
});

3.获取编辑器中的内容

var content=tinyMCE.activeEditor.getContent();

图片裁剪插件 cropper

docs目录是例子可以下载下来，看看
在这里插入图片描述

小程序相关

H5跳转小程序文档

直达文档链接

注意query参数不支持‘%’，所以在参数中不能对returnUrl编码，可以放在数据库中，异步请求获取url，query参数可以使用 ‘key=value&key2=value’格式

在小程序中 onLoad: function (query) { query.key 可以直接获取参数 }

公众号跳转小程序

直达文档链接

开放标签的path属性不能使用方法返回值，所以如果url中需要 encode 时，只能自己 encode 完以后写死在页面上

web-view 中嵌套H5

<input  type="file" accept="image/*" name="uploadFile"  id="uploadFile" />

注意 input 标签中不能有 multiple="multiple" ，否则 Android小程序打不开相机。

Freemark相关

1.Freemark 自定义宏（也就是自定义标签）

<@p.form id="jvForm" tableClass="table table-hover table-striped table-bordered vtable" action="directive/o_save.do" labelWidth="30">
	<@p.td required="true" label='directive.module' colspan='2' width="100">
		<@p.select onchange="selectModule()" />
	</@p.td>
</@p.form>

这段html把我吓了一跳,什么玩意

解释一下：

p：是在freemarkerConfig中配置的一个 别名
<prop key="auto_import">/WEB-INF/ftl/index.ftl as p,/WEB-INF/ftl/spring.ftl as s</prop>

form/td/select:都是自定义的 <#macro 标签，在index.ftl中都已经定义好了

spring.ftl 中的

<#macro m code>${springMacroRequestContext.getMessage(code)}</#macro>
springMacroRequestContext：这个东西是固定的 在 org.springframework.web.servlet.view.AbstractTemplateView 中定义好的

2.Freemark 标签类型<>,[]

配置文件中设置 tag_syntax 属性可以控制标签类型

<bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">

<property name="freemarkerSettings">
	<props>
		<!-- 设置标签类型 auto_detect（自动检测第一次出现的标签类型）、angle_bracket（<>）、square_bracket([])-->
		<prop key="tag_syntax">auto_detect</prop> 
		<prop key="template_update_delay">5</prop>
		<prop key="defaultEncoding">UTF-8</prop>
		<prop key="url_escaping_charset">UTF-8</prop>
		<prop key="locale">zh_CN</prop>
		<prop key="boolean_format">true,false</prop>
		<prop key="datetime_format">yyyy-MM-dd HH:mm:ss</prop>
		<prop key="date_format">yyyy-MM-dd</prop>
		<prop key="time_format">HH:mm:ss</prop>
		<prop key="number_format">0.######</prop>
		<prop key="whitespace_stripping">true</prop>
		<!--空值处理<prop key="classic_compatible">true</prop>-->
		<prop key="auto_import">/WEB-INF/ftl/doccms/index.ftl as p,/WEB-INF/ftl/spring.ftl as s</prop>
	</props>
</property>
</bean>