js代码

JS 详解 Cookie、 LocalStorage 与 SessionStorage

 ̄綄美尐妖づ 提交于 2020-01-22 07:43:15
基本概念 Cookie Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。 localStorage localStorage 是 HTML5 标准中新加入的技术,它并不是什么划时代的新东西。早在 IE 6 时代,就有一个叫 userData 的东西用于本地存储,而当时考虑到浏览器兼容性,更通用的方案是使用 Flash。而如今,localStorage 被大多数浏览器所支持,如果你的网站需要支持 IE6+,那以 userData 作为你的 polyfill 的方案是种不错的选择。 sessionStorage sessionStorage 与 localStorage 的接口类似,但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思,直译过来是“会话”。而 sessionStorage 是一个前端的概念,它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就会被清空。 三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期

WebAssembly的使用

倖福魔咒の 提交于 2020-01-22 07:41:45
WebAssembly的使用 介绍 WebAssembly(缩写为Wasm)是基于堆栈的虚拟机的二进制指令格式。Wasm被设计为可移植目标,用于编译高级语言(如C / C ++ / Rust),从而可以在Web上为客户端和服务器应用程序进行部署。 webassembly的背景 我们为什么需要wasm?它可以解决什么问题? javascript从最开始诞生起,它的定位就是一门解释性语言,它面向的开发者是“非专业编程人员”,学习门槛很低。谁也想不到这门语言现在变成了互联网上最重要的语言之一,它在浏览器应用中的地位不可撼动。 随着互联网的发展,需求场景变得越来越复杂,js的性能问题也暴露了出来。往往当一门语言对开发者越友好,那它对机器也就越不友好。机器编译它的难度,所耗费的精力也就越高。 而WebAssembly的出现,有望解决这一难题。 WebAssembly它是一种新的字节码格式,和JS需要解释执行不同,WebAssembly的字节码它与机器码很相似,可以快速转换并装载运行,因此,它的性能相对于JS会有大大的提升。严格意义上来讲,它并不能算是一种新语言,也不需要开发者们去编写WASM代码,它是一份字节码标准。我们只需要将一些高级语言编译为wasm字节码,然后在web中使用。现在wasm的使用方式主要还是在js中引入,所以可以看出,它与JS并不是替代关系,而是合作关系

js 表单操作form

大憨熊 提交于 2020-01-22 07:38:50
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="application/javascript"> /** * 一、表单的获取方式 * 1.document.getElementById() * 2.document.forms[index]; * 3.document.forms[form_name] * 4.document.form_name */ function testGetForm() { var frm = document.getElementById("regForm"); // 常用 console.log(frm); frm = document.forms[0]; console.log(frm); frm = document.forms["aaform"]; console.log(frm); frm = document.aaform; // 常用,仅表单可以通过name属性获取 console.log(frm); } //二、表单对象的属性 function testFormField() { var frm = document.aaform; console.log(frm.id); console.log

js上传整个文件夹

假如想象 提交于 2020-01-22 06:50:09
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠。网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹。今天研究了一下这个问题,在此记录。 先说两个问题: 是否所有后端框架都支持文件夹上传? 是否所有浏览器都支持文件夹上传? 第一个问题:YES,第二个问题:NO 只要后端框架对于表单的支持是完整的,那么必然支持文件夹上传。至于浏览器,截至目前,只有 Chrome 支持。 如果需要其它的浏览器支持则需要借助于插件,比如泽优大文件上传控件: www.webuploader.net 关于WebUploader的功能说明: 大文件上传续传 支持超大文件上传(100G+)和续传,可以关闭浏览器,重启系统后仍然继续上传。 开源 提供ASP.NET,JSP,PHP示例和源代码,其中JSP提供MySQL,Oracle,SQL Server数据库的配置和示例代码。 分片、并发 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度。 当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。 预览、压缩 支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩,节省网络数据传输。 解析jpeg中的meta信息

高德APP全链路源码依赖分析工程

徘徊边缘 提交于 2020-01-22 06:04:06
一、背景 高德 App 经过多年的发展,其代码量已达到数百万行级别,支撑了高德地图复杂的业务功能。但与此同时,随着团队的扩张和业务的复杂化,越来越碎片化的代码以及代码之间复杂的依赖关系带来诸多维护性问题,较为突出的问题包括: 不敢轻易修改或下线对外暴露的接口或组件,因为不知道有什么地方对自己有依赖、会受到影响,于是代码变得臃肿,包大小也变得越来越大; 模块在没有变动的情况下,发布到新版本的客户端时,需要全量回归测试整个功能,因为不知道所依赖的模块是否有变动; 难以判断 Native 从业务实现转变为底层支撑的趋势是否合理,治理是否有效; 这些问题已经达到了我们必须开始治理的程度了,而解决此类问题的关键在于需要了解代码间的依赖关系。 二、高德 APP 平台架构 为了消除一些疑惑,在讨论依赖分析的实现前,先简单说明一下高德 APP 的平台架构,以便对一些名词和场景有一些背景了解。 高德 APP 从语言平台上可以分为 4 个部分,JS 层主要负责业务逻辑和 UI 框架;中间有 C++层做高性能渲染(主要是地图渲染),同时实现了一些切面 API,这样可以在双端只维护一套逻辑了;Android 和 iOS 层主要作为适配层,做一些操作系统接口的对接和双端差异化的(尽可能)抹平。 这里的切面是指 JS 层与 Native/C++ 层的分界线,这里会实现一些切面 API,也就是 JS 层与

django--static文件的管理

北战南征 提交于 2020-01-22 02:59:34
做网站,不会前端总是不行的,就算自己不深入学习成为前端大拿,套用别人的css和js总还是要会的,因此,静态文件的引用成为了一个topic。 Django创建一个新项目的时候已经默认产生了一些配置,应对小项目足够了,如果追求完美的话,总还需要多了解一些。列出了以下topic。 1、 一个不做任何额外配置的django项目能怎么处理static? 2、 好好规划的static文件目录又是什么样子的? 3、 部署到生产该怎么办? 4、 Django中谁在管理着这些static文件?纯代码层面了哟 答: 1、 没有额外自己添加配置时,和static文件有关的settings,如下(从settings.py中摘出来的) # Build paths inside the project like this: os.path.join(BASE_DIR, ...) BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions',

01.JavaScript基础语法

梦想的初衷 提交于 2020-01-22 00:38:33
- JavaScript :编程语言 JavaScript能干什么 1. 常见的网页效果【表单验证,轮播图。。。】 2. 与H5配合实现游戏【水果忍者: http://www.jq22.com/demo/html5-fruit-ninja/】 3. 实现应用级别的程序【http://naotu.baidu.com】 4. 实现统计效果【http://echarts.baidu.com/examples/】 5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】 6. 在线学编程【https://codecombat.163.com/play/】 7. js可以实现人工智能【面部识别】 8. 。。。 JavaScript的组成 1. ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型 2. BOM (Browser Object Model): 浏览器对象模型 - 有一套成熟的可以操作浏览器的 API,通过 BOM 可以操作浏览器。比如: 弹出框、浏览器跳转、获取分辨率等 3. DOM (Document Object Model): 文档对象模型 - 有一套成熟的可以操作页面元素的 API,通过 DOM 可以操作页面中的元素。比如: 增加个 div,减少个 div,给div 换个位置等 总结:

11-Ajax和jQuery学习(4)- jQuery(1)

若如初见. 提交于 2020-01-22 00:26:15
1 jQuery jQuery 是一个 JavaScript 库,即对js的封装 jQuery 极大地简化了 JavaScript 编程,如对节点增删改查及动画添加 jQuery 封装了异步post和 get请求 1.1 jQuery 可以做的 HTML 元素选取 HTML 事件函数 HTML 元素操作-增删改查 CSS 操作 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX 1.2 jQuery 导入 把jquery.js导入项目WebContent的js 目录下 在html的head标签中导入jQuery的js文件 在script 标签中写jQuery代码,如图,代码都写在function的括号内 1.3 文档就绪函数 < % @ page contentType = "text/html;charset=UTF-8" language = "java" % > < html > < head > < title > Title < / title > < script type = "text/javascript" src = "./js/jquery-3.4.1.js" > < / script > < script type = "text/javascript" > // 文档加载完毕后再调用这个函数,js /* window.onload =

JS实现浏览器打印、打印预览

故事扮演 提交于 2020-01-21 22:09:58
1.JS实现打印的方式 方式一:window.print() window.print();会弹出打印对话框,打印的是window.document.body.innerHTML中的内容,下面是从网上摘到的一个局部打印的例子,该例子的不足是打印会修改页面的内容。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>局部打印案例</title> <script type="text/javascript"> function doPrint() { if (confirm('确定打印吗?')){ try{ print.portrait = false ;//横向打印 }catch(e){ //alert("不支持此方法"); } bdhtml=window.document.body.innerHTML; sprnstr="<!--startprint-->"; eprnstr="<!--endprint-->"; prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));

小demo原生js同步翻译,可以玩玩儿

故事扮演 提交于 2020-01-21 18:38:28
1. 背景: 平时不知道用js写什么练手,这里就写了一个类似百度翻译的小demo。大家可以平时没事儿了看看书,写写像这种类型的小demo,调用以下公开的api即可。对于学生党,能进入学校实验室做项目更好。进不去的,平时写写小demo练练也不差。(我为什么没在实验室) 2. demo前准备工作: 页面布局 了解百度翻译API,所需配置参数 准备 MD5.js 加密算法函数(百度自己搜) 写js代码 3. 步骤: 1. 页面布局: 布局就不说了,直接贴图上代码: 可进行语言切换 html代码 : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="main"> <div class="left"> <div class="title"> 要翻译为: <span class="lang">英文</span> <ul class="ul1"> <li data-lang="en">英语</li> <li data-lang="zh">中文</li> <li data-lang="jp">日语</li> <li data-lang="kor