js
青梅煮酒论英雄
你以为的你以为的就是你以为的吗
展开
-
babel 编写plugin(三)----原理
AST 抽象语法树抽象语法树就是通过JavaScript Parser将代码转化成为一颗抽象语法树,这棵树定义了代码的结构。然后通过操纵这棵树的增删改查实现对代码的分析,变更,优化。原创 2021-12-04 11:38:29 · 341 阅读 · 0 评论 -
前端性能优化xmind
原创 2021-12-03 16:16:28 · 197 阅读 · 0 评论 -
babel 编写plugin(二)----常用的babel
babel-loader本质是一个函数,函数参数是源代码和配置参数option,函数返回转换后的代码配置参数可以通过loader配置,也可以在babel.rc文件文件传入babel-corebabel最核心的模块,是babel转译器本身,提供转译的API,例如babel.transform等,babel-loader就是调用core中的这些API完成转译的babel-preset-env告诉babel以什么规则转换,也就是preset的值,core.transform里面的参数规则下面babe原创 2021-11-20 16:34:20 · 824 阅读 · 0 评论 -
babel 编写plugin(一)--介绍
babel介绍babel其实就是代码转换器,就是把ES6转化成ES5,或者把jsx转换成js等plugin和presetplugin实现babel的核心功能就是plugin,如下:原始代码 ----> plugin转化器 ----> 转化后的代码业务使用一、手动执行单个文件安装相关依赖执行转换,通过–plugins声明依赖的插件,多个插件之间采用,进行分隔下列命令如下:npm bin/babel --plugins babel-plugin-transform-es201原创 2021-11-20 14:59:11 · 1473 阅读 · 0 评论 -
js 组合继承----附上 new object.create 实现
组合继承组合继承就是 原型链继承 + 构造函数原型链继承:function Animal () { this.color = [];}Animal.prototype.getColor = function () { return this.color;} function Dog () {}Dog.prototype = new Animal();缺点: 1. 原型上的引用类型共享 2. 没法传参构造继承function Animal (name) { this.na原创 2021-04-19 21:35:48 · 95 阅读 · 0 评论 -
连续赋值(从堆栈角度解析)var a = {n:1}; a = b ;a.x=a={n:2};
前提:1. 首先明白的是.的优先级是高于=的优先级,且.的运算符是从左到右的,=的运算符是从右到左的对于 var a = {n:1};a = b中a 指向了堆内存中的对象{n:1}, var b=a; a赋予给b的时候传的是栈中的地址(相当于新建了一个不同名“指针”) ,而不是堆内存中的对象。对于 a.x=a={n:2};之前说了“.”的优先级大于赋值运算符的优先级,所以先来看a.x;a.x实际上是未定义的;再来看赋值运算符的从右向左解析;a = {n : 2},a被从新赋值,指向了一个新对原创 2021-01-16 14:38:35 · 416 阅读 · 1 评论 -
valueOf 、toString及隐式转换
共同点在 JavaScript 中,toString()方法和valueOf()方法,在输出对象时会自动调用不同点二者并存的情况下,在数值运算中,优先调用了valueOf,字符串运算中,优先调用了toString<script> var obj = {}; obj.valueOf = function() { return 10; } obj.toString = function() { return "return value"; } var result原创 2021-01-07 21:19:40 · 371 阅读 · 0 评论 -
CSS--BFC
块级格式化上下文BFC的布局规则内部的box会在垂直方向一个一个的放置box的垂直方向的距离由margin决定,属于同一个BFC的相邻BFC margin会发生重叠BFC的区域不会与float box重叠计算BFC的高度时,浮动元素也参与计算如何创建BFCoverflow: 不为visible( hidden)float的值不是nonedisplay的值是inline-block、table-cell、flex、table-caption或者inline-flexposition的原创 2020-11-09 16:45:31 · 115 阅读 · 0 评论 -
async await 一些思考与原理实现
函数返回一个 Promise 对象,当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句一. async await 外部写async, 内部遇到需要等到执行的函数前面写await1.如果函数外面写async, 函数内部没有写await 函数,那么在函数内是无法获取参数的原因Genarator function* 、 yield默认返回Genarator 实例,要执行.next()才能执行真正的代码在执行next方法后,顺序执行了yield原创 2020-08-23 15:14:10 · 151 阅读 · 0 评论 -
白屏和首屏的时间
一、白屏时间输入url按回车到开始渲染元素的时间,也就是到出现的一个字符//白屏结束的时间window.firstPaint = Date.now(); //白屏时间 console.log(firstPaint - performance.timing.navigationStart || pageStartTime); //performance.timing.navigationStart //准备加载页面的其实时间二、首屏时间1.记录主要模块渲染结束的时原创 2020-07-04 19:47:26 · 465 阅读 · 0 评论 -
函数的高级用法(三)------节流和防抖
节流: 保证一段时间内只执行一段代码(例如滚动,oninput,onkeypress,onscroll,resize等事件触发频率非常高)一个函数执行一次后,只有大于设定的执行周期,才会执行第二次throttle = function(func, wait, options) { var context, args, result; var timeout = null; ...原创 2020-01-13 15:17:56 · 142 阅读 · 0 评论 -
Vue路由--总结(一)
路由 vue-router在vue中是个插件的形式,以npm包存在,所以我们使用它要在package.json里安装依赖。例如:import VueRouter from 'vue-router';Vue.use(VueRouter ); //安装插件,installnew VueRouter ({router}); //初始化路由router为一个数组: [ { n...原创 2019-12-27 10:59:35 · 99 阅读 · 0 评论 -
关于promise一些总结
用法function loadData () {return new Promise(resolve => {//执行一些操作resolve();});}loadData().then(() => {//执行完以后的操作//可能再返回一个promise})源码分析function Promise (fn) {var state = pendding, //...原创 2019-11-02 11:30:21 · 415 阅读 · 0 评论 -
jq 数组操作、事件处理和相关处理函数的使用
shift: 删除数组的一个元素unshift: 将数值插入到数组的第一个元素pop: 删除数组里最靠后的元素push:将数值插入到数组的最后一个元素中splice: 通过指定的索引原创 2017-07-18 13:44:27 · 817 阅读 · 0 评论 -
js 插件 drag.js拖动
1. html 引入drag2.使用插件 $("#hoverMap").dragging({ move : 'both', scope:".ondetails_div", randomPosition : false , hander:'#twoGis_header' });3.使用draggable插件,...原创 2018-03-20 17:09:12 · 3593 阅读 · 0 评论 -
js input搜索框自动补全及模糊搜索
一.搜索的html注意:自动补全和模糊搜索用的是jquery-ui组件,使用时需引入jquery-ui的js和css<div class="top_search" data-open="no"> <input type="text" id="search_con"> </div>二、搜索值和原创 2018-03-30 15:48:29 · 10058 阅读 · 0 评论 -
图片静态的左右滑动
1. html结构要求 <div id="preclick"><span class="leftarrow"></span></div> <div class="contantime"> <div id="ordercontent"&原创 2018-03-26 17:29:07 · 1312 阅读 · 0 评论 -
理解之 原型链
JavaScript 的继承主要通过原型链来继承继承的主要精髓就是 : 让一个对象的实例等于另一个原型对象 即: Super.prototype = new Summer();理解原型链就要理清 构造函数、原型对象和实例的关系Js所有的构造函数都有个 prototype 属性,通过这个属性可以继承其他函数的方法,例如1:function add(){ th...原创 2017-06-29 14:32:12 · 393 阅读 · 0 评论 -
css 几种水平垂直居中的方法 及 弹性盒子
弹性盒子;原创 2017-06-29 15:41:27 · 15090 阅读 · 0 评论 -
函数的高级用法(二)---函数柯里化
函数柯里化把接受多个参数的函数变换成接受一个单一参数(注:最初函数的第一个参数)的函数,如果其他的参数是必要的,返回接受余下的参数且返回结果的新函数。所谓“柯里化”就是使函数理解并处理部分应用。eg:function curry(func){//截取参数 var args = [].slice.call(arguments,1), self = this; conso...原创 2019-01-25 16:14:16 · 216 阅读 · 0 评论 -
函数的高级用法(一)---关于闭包
函数返回一个函数function create1(pro) { console.log("pro : " + pro); return function(obj1, obj2){ console.log(obj1 + " -- " + obj2); return obj1 + obj2; }}var c1 = create1("pro"); // 创建函数c1;c1(1,2...原创 2019-01-15 19:32:09 · 1297 阅读 · 1 评论 -
js 点击和悬浮事件的坑
一、点击事件不生效1.可能dom元素还没有加载然后就调用了click事件,一般出现在动态加载表格的情况,解决方法有两种,一个是在加载完表格之后再去加载click事件,一个在表格的元素里增加click事件$('#webradio').on('click',function(){ })二、点击事件点击一次执行多次事件先解绑这个事件在添加 off.on 或者unbind....原创 2018-03-30 10:27:14 · 3753 阅读 · 0 评论 -
跨不同浏览器读取xml文件的节点
1.conf.xml配置<?xml version="1.0" encoding="utf-8" ?><GISConfig> <geoserverUrls> <nodes>配置项</nodes> </geoserverUrls> <geoser原创 2018-03-22 15:29:35 · 312 阅读 · 0 评论 -
js each函数 的使用
使用场景1. $().each()当存在多个相同的class元素,元素是不固定的,并且要给他们增加点击事件$(".tip").each(function (index) { $(this).on("click", function () { //循环给每个元素增加背...原创 2018-02-27 15:47:05 · 2981 阅读 · 0 评论 -
前端 后端的基本 交互(后端 scala)(二)
最上层开始,一个 Boot.scala~pathPrefix (“lttt”/”comm”){ 服务的名称 ! _ }定义服务的接口路径前缀,之后在服务里再定义一些一些接口,只写前缀后面的路径,但是传给前端的url 是 服务前缀的路径+服务里接口的路径scala 后端返回处理的数据类型 List 和 Map 形式List 形式 返回相当于数组 []Map形式 返回相当于列表原创 2017-08-02 17:30:23 · 1924 阅读 · 0 评论 -
前端 后端的基本 交互(后端 scala)(一)
scala 查sql 的一些函数round(字段名称,保留的小数个数) : 用于把数值字段舍入为指定的小数位数。cast(expression AS data_type): 将某种数据类型的表达式显式转换为另一种数据类型参数说明: expression:任何有效的SQServer表达式。AS:用于分隔两个参数,在AS之前的是要处理的数据,在AS之后是要转换的数据类型。data_type:目标原创 2017-08-02 14:24:25 · 1232 阅读 · 0 评论 -
try catch 用法
在实际应用中,碰到了一个问题,就是在动态生成一个表格的时候,从后台接收到的的数据和表头名称是不同的接口,而表格的id是在表头名称这个接口动态生成的,所以就会导致一个问题,在火狐浏览器中,响应请求比较慢 这个时候我们就可以使用 try catch 方法 来 处理浏览器的位置错误下面是相对简单的例子:try { foo.bar();} catch (e) { if (e instanceof E原创 2017-08-02 10:08:18 · 19330 阅读 · 1 评论 -
jquery 国际化使用
jquery 有专门使用 国际化的插件 ,jquery.i18n.properties jQuery.i18n.properties 采用 .properties 文件对 JavaScript 进行国际化。jQuery.i18n.properties 插件根据用户指定的(或浏览器提供的 )语言和国家编码(符合 ISO-639 和 ISO-3166 标准)来解析对应的以“.properties”为后缀原创 2017-07-21 17:12:30 · 1307 阅读 · 0 评论 -
jq 插件 之 datatable 使用
Datatable 是基于jquery开发的表格插件,动态生成表格用此插件非常简单快捷,而使用此插件的重点就是要 理解各个选项的配置及相关含义。以下为一些常见的选项配置,具体代码如下://从后台获取数据后台传来的数据格式为: { "data":[{ "PCI": "111", "eNodeBID": "111",原创 2017-07-14 17:25:40 · 1554 阅读 · 0 评论 -
angular js----javascript 模块化require.js
一般用anjular 框架时写大型项目时,都会用require.js模块化加载,以下就具体原创 2017-07-04 09:49:54 · 272 阅读 · 0 评论 -
angular 的 ajax的获取
get 方式: $http.get('./json/jrcslc.json'). success(function(data) { $scope.financials = data.financials; }); $http.get('./json/jrcsjj.json').原创 2017-07-07 11:03:31 · 361 阅读 · 0 评论 -
Cookie,LocalStorage,SessionStorage的区别
Cookiecookie存储的空间非常小,限制为4KB左右,主要用途保存登陆信息,比如浏览器中”记住密码”,这通常是通过在cookie中存入一段辨别用户身份的数据来实现的,cookie兼容各大浏览器localStoragelocalStorage 是 HTML5 标准中新加入的技术,它并不是什么划时代的新东西。早在 IE 6 时代,就有一个叫 userData 的东西用于本地存储,而当时考虑到浏览器转载 2017-07-13 09:55:03 · 330 阅读 · 0 评论 -
node js使用 (一)
使用 nodejs服务器访问 本地的 js文件 首先在 node js 安装的文件中 创建 server.js文件 具体的 server.js 文件内容 如下:var http = require('http');http.createServer(function (request, response) { // 发送 HTTP 头部 // HTTP 状态值: 200 : O原创 2017-07-27 11:33:20 · 403 阅读 · 0 评论 -
node 回调函数
node 的 异步编程 主要是 体现在 回调函数上异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了。 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数,Node 所有 API 都支持回调函数。 例如,我们可以一边读取文件,一边执行其他命令,在文件读取完成后,我们将文件内容作为回调函数的参数返回。这样在执行代码时就没有阻塞或等待文件 I/O 操作。这就大大提高了 Node原创 2017-07-27 11:51:00 · 500 阅读 · 1 评论 -
scala 导出及相关函数使用
前端点击调用先前端ajax 调用后端服务,包括一些传参和url 的设置这里有个 处理函数 each 的使用 具体例子如下:var tables = $("#Table>thead>tr>th"); // Table.each(function(i, item) { if (i < 5) arry.push($(item).context.childNodes[原创 2017-08-28 16:14:15 · 312 阅读 · 0 评论 -
jquery 一些方法使用(保留小数、for in 、datatable渲染特殊数据)
一、保留小数、向上取整toFixed(999.99) 999.9 Math.ceil(999.99) 1000 parseInt(999.99) 999二、for in使用i=0;for(key in array) if(key !="" && i>0) $('.'+key).html(array[key]);i++;三、da原创 2018-01-16 10:20:38 · 1092 阅读 · 1 评论 -
jquery 国际化使用(二)
接 jquery 国际化使用:showLanguage()函数 language.jsfunction showLanguage(){ var language = null; try { language = getLanguage(); } catch(e) { console.info("Can not原创 2017-12-20 15:57:37 · 382 阅读 · 0 评论 -
jquery 国际化使用(二)
接 jquery 国际化使用:showLanguage()函数 language.jsfunction showLanguage(){ var language = null; try { language = getLanguage(); } catch(e) { console.info("Can not原创 2017-12-20 15:57:33 · 559 阅读 · 0 评论 -
jq插件 datatable的使用(附上window一些方法)
datatable使用data 为后端传过来的数组值 function initfellTable(data){ datatable = data; $("#myTable").html("<thead><tr><th>"+$.i18n.prop('')+"</th><th>"+$.i18n.prop('')+"</th><th>"+$.i18n.prop('')+"</th>原创 2017-12-20 15:51:30 · 412 阅读 · 0 评论 -
首页地图渲染之国际化(二)---地图操作
地图操作关于放大缩小定位搜索等功能,其中最重要的是不管哪个操作,都是对echart的设置,具体函数如下:function localizeMap(center,zoom){ var option = echartMap.getOption() if(center&¢er.length==2) option.series[0].center=center原创 2017-12-20 11:40:07 · 669 阅读 · 0 评论