js 如何保存代码段并执行以及动态加载script
1.模块化开发
通常使用的是 export和import 实现代码的共享和导入
2.特殊情况下需要将代码段作为参数传递
可以使用function 的toString方法将整合函数和里面的代码批量转化为字符串
然后可以借助eval方法执行,eval接收一个字符串参数,并作为可执行的js代码段进行执行
如下
- /* 将代码段转化为字符串 */
var fun = function a__b__a__b(){- let a =3 *9;
- var dom = document
- console.log('dom', dom)
- console.log('a', a)
- }.toString()
/* 通过正则去除包裹函数,执行代码段 */- eval(fun.replace(/^function a__b__a__b\(\)\{|\}$/g,''))
当然eval有一定安全风险
3.动态插入 script
分为插入文件和插入可执行代码
插入文件
- /*
- * @param{String} url script 路径
- * @param{Function} cb script标签加载完后的回调函数
- */
- var createScript = function(url,cb){
- if(!url) return;
- let scriptDom = document.createElement('script');
- scriptDom.type = 'text/javascript';
- scriptDom.async = true
- scriptDom.src = url;
// 判断IE- if(!+[-1]){
- scriptDom.onreadystatechange = function(){
- if(this.readyState == 'loaded' || this.readyState == 'complete'){
- cb()
- }
- }
- }else{
scriptDom.onload = function(){
cb()
}
}
document.body.appendChild(scritDom)- }
插入可执行代码
- /*@param{String} code 待执行的代码串*/
- var creatScript = function(code){
if(!code) return
let scriptDom = document.createElement('script');
scriptDom.type = 'text/javascript';
try{
let codeDom = document.createTextNode(code)
script.appendChild()
}catch(e){
console.log('isIe')
script.text = code
}
document.body.appendChild(scriptDom)
}
js 如何保存代码段并执行以及动态加载script的更多相关文章
- Ext JS学习第十天 Ext基础之动态加载JS文件(补充)
此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...
- JS学习之动态加载script和style样式
前提:我们可以把一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点".我们都知道一个基本的网页 ...
- js 动态加载事件的几种方法总结
本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...
- 用MVVM模式开发中遇到的零散问题总结(5)——将动态加载的可视元素保存为图片的控件,Binding刷新的时机
原文:用MVVM模式开发中遇到的零散问题总结(5)--将动态加载的可视元素保存为图片的控件,Binding刷新的时机 在项目开发中经常会遇到这样一种情况,就是需要将用户填写的信息排版到一张表单中,供打 ...
- js怎么动态加载js文件(JavaScript性能优化篇)
下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完 ...
- 用JavaScript动态加载CSS和JS文件
本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...
- 动态加载js,css
今天项目中需要用到动态加载 CSS 文件,经过一番折腾终于搞定,回家整理了一下,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: fu ...
- 页面滚动图片等元素动态加载插件jquery.scrollLoading.js
如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...
- AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】
1.入口页面 存放地址:src/main/webapp/WEB-INF/view/workflow/workflow.jsp [html] view plain copy 在CODE上查看代码片派生到 ...
随机推荐
- Docker系列-文章汇总
本篇汇总docker系列的文章目录: 01. 准备Docker环境 02. CentOS安装Docker 03. Bridge Network 01 容器间通信 持续更新中…… 本人微信公众号同步更新 ...
- webWMS开发过程记录(四)- 整体设计
分层 View(Servlet/Action/JSP)--> Service(接口/实现类) --> Dao(接口/实现类) 所用技术 Struts2 Hibernate Spring J ...
- Springboot系列(七) 集成接口文档swagger,使用,测试
Springboot 配置接口文档swagger 往期推荐 SpringBoot系列(一)idea新建Springboot项目 SpringBoot系列(二)入门知识 springBoot系列(三)配 ...
- 用python代替人脑运算24点游戏
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:老方玩编程 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...
- niuke---勾股定理
勾股定理------: 当其中一个数a大于1并且为奇数时即a=2*n+1, 那么另外两个数分别为 b=2*n*n+2*n; c=b+1; 当a为大于等于4的偶数时,即a=2*n时,那么另外两个数分 ...
- vue2.x学习笔记(十八)
接着前面的内容:https://www.cnblogs.com/yanggb/p/12629705.html. 处理边界情况 这里记录的都是和处理边界情况有关的功能,即一些需要对vue的规则做一些小调 ...
- react-i8n
1. 在项目中安装 npm install react-intl --save 2.兼容Safari各个版本需要安装intl npm install intl --save 3.编写语言包 1.)新建 ...
- .NET Core 初识
什么是 ASP.NET Core? ASP.NET Core 是一个新的开源和跨平台的框架,用于构建如 Web 应用.物联网(IoT)应用和移动后端应用等连接到互联网的基于云的现代应用程序.ASP.N ...
- 米特运输——(dfs)
米特是D星球上一种非常神秘的物质,蕴含着巨大的能量.在以米特为主要能源的D星上,这种米特能源的运输和储 存一直是一个大问题.D星上有N个城市,我们将其顺序编号为1到N,1号城市为首都.这N个城市由N- ...
- XSS Challenge(1)
XSS Challenges http://xss-quiz.int21h.jp/ Stage #1 注入alert(document.domain),先试一试输入后会返回什么: 返回在标签中,直接尝 ...