开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
博客专区 - 开源中国社区

精彩阅读

  • 最新推荐

  • 今日热门

  • 本周热门

  • 每日一博

  • 最新文章

开源巨献:年度最佳 JavaScript 和 CSS 开源库推荐!

Tutorialzine 每个月都会公布一次当月新增的 JS 和 CSS 库。2018 新年之际,该网站整理出了 2017 年最受用户欢迎和喜爱的一些 JS 和 CSS 库,供大家学习和参考。 JavaScript 本地存储库 localForage localForage 是一个 JavaScript 库,提升了应用程序的离线体验,通过使用异步的数据存储,提供简单的类似 localStorage 的 API,允许开发者存储多种类型数据。 CSS3 驱动的动画滚动库 AOS AOS(Animate on scroll)是小型动画滚动库,可在页面滚动时给元素添加动画效果。CSS3 驱动,效果类似于 WOWJS。 响应式邮件标识语言 MJML MJML 是一个标识语言,用来减少编写响应式邮件的复杂度。其语义语法在展示丰富邮件内容时更加简单和直观。该项目提供一个开源的引擎用来将 MJML 标识语言转成 HTML。 基于浏览器的代码编辑器 Monaco-Editor Monaco Editor 是微软开源的基于 VS Code 的代码编辑器,运行在浏览器环境中。编辑器提供代码提示,智能建议等功能。供开发人员远程更方便的编写代码。 Web 虚拟现实框架 A-Frame A-Frame 是 Mozilla 开源的网页虚拟现实体验( WebVR )框架,可用于桌面、iPhone(即将支持安卓)以及 Oculus Rift。A-Frame 可以让创建 WebVR 体验变得...
编辑部的故事 发布于 18小时前 阅读 1463 评论 5 点赞 4

前端利器,6 款开源 Web 性能优化辅助工具推荐

Web 性能优化是一个老生常谈的话题,也是前端页面开发十分重要的部分。当页面加载速度越慢,用户流失的概率就越大,性能和交互直接影响用户体验。下面推荐几款 Web 性能优化辅助工具推荐,希望能对大家有所帮助。 1、Lighthouse Lighthouse 是 Google 开源的一个自动化工具,用于改进网络应用的质量。你可以将其作为一个 Chrome 扩展程序运行,或从命令行运行。 当为 Lighthouse 提供一个要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。可以参考失败的测试,看看可以采取哪些措施来改进应用。 Chrom 扩展则会把报告以非常人性化的图形界面展示给你。 2、Speed Racer SpeedRacer 是一款性能测试工具,它在 Chrome 中运行脚本,并生成详细的性能报告。 SpeedRacer 是直接借助浏览器来实际测试性能的工具,在实际工作中,可以与其它模拟用户访问流量来评估性能的工具配合使用。 3、Yellow Lab Tools Yellow Lab Tools 是一款 Web 性能及前端质量测试工具。与其他工具不同的是,它有一些在其他工具上无法看到的独特功能,例如页面加载时 JavaScript 与 DOM 互动和其他程序代码验证问题。 Yellow Lab Tools 偏向于一个发现不良实践的工具,...
编辑部的故事 发布于 18小时前 阅读 812 评论 3 点赞 4

打造炫酷的通知插件EasyToaster

HTML + CSS + JS 原生实现, 兼容 Chrome, Firefox, IE9 及以上, 兼容 PC,移动端
lonelydawn 发布于 6天前 阅读 37

Vue ( 五 ) food 组件开发

### 一、父组件调用子组件的方法 #### 思路:用户点击商品时商品详情页出现,所以需要 父组件中点击商品时调用子组件一个方法来控制 商品详情页的 显示 隐藏。 ##### food组件 ``` ``` ##### 父组件goods组件 ##### 此处省略 引入、注册... ###### 1.绑定事件 ``` ... ``` ###### 2.应用组件 ``` ``` ###### selectedfoods 代表用户当前点击的商品 ###### 3.建立一个接受用户选择商品的对象 ``` data (){ return { goods: [],// goods json 数组 listHeight: [],// 存放 foods 内部的每一块的高度 scrollY:0, selectedfoods:{} // 接收用户点击的商品 } }, ``` ###### 4.点击事件 ``` selectFood(food,event){ if (!event._constructed) {// 阻止浏览器的原生 click 事件 return; } this.selectedfoods=food// 传入用户选择的商品,存在selectedfoods 对象里 this.$refs.food.foodinforshow() //利用 ref 属性 来调用 子组件的方法 } ``` ##### 到这里 就和商品详情页相关联了!继续... ### 二、实现详情页内容的滚动 ##### 1.实现滚动需要better-scroll,所以需要dom绑定,异步加载bscroll ``` ``` ``` import BScroll from 'better-scroll'; export default { props: { se...
张麻麻 发布于 1周前 阅读 243

ECMAScript2017 新特性(ES8)

什么是 ES8 ES8 是 ECMA-262 标准第 8 版的简称,从 ES6 开始每年发布一个版本,以年份作为名称,因此又称 ECMAScript 2017,简称 ES2017。 每年一个版本 两个版本之间间隔时间太久(从 ES5 到 ES6 经历了 6 年)会有以下两个问题: 有很多早已讨论完毕的特性需要等到标准的大版本发布才能进入标准 有一些特性本身比较复杂,需要较长的时间去讨论。但如果推迟到下一个版本,又必须等待很长的时间才能发布 从 ES6 开始新版本发布会更频繁,每年发布一个版本,把这一年内讨论完毕的特性纳入标准。   TC39 流程 TC39(Technical Committee 39)是一个推动 JavaScript 发展的委员会。它的成员由各个主流浏览器厂商的代表构成。会议的每一项决议必须大部分人赞同,并且没有人强烈反对才可以通过。因为,对成员来说,同意就意味着有责任去实现它。每个 ECMAScript 特性都会经历 stage 0 到 stage 4 的每一个阶段。在 TC39 proposals 这个 github 仓库可以看到每个特性的进度。 Stage 0: strawman 一种推进 ECMAScript 发展的自由形式,任何 TC39 成员,或者注册为 TC39 贡献者的会员,都可以提交。 Stage 1: proposal 该阶段产生一个正式的提案。 确定一个带头人来负责该提案...
爱敲代码的程序员 发布于 1周前 阅读 420 评论 3

你需要Mobx还是Redux?

在过去一年,越来越多的项目继续或者开始使用React和Redux开发,这是目前前端业内很普遍的一种前端项目解决方案,但是随着开发项目越来越多,越来越多样化时,个人又有了不同的感受和想法。是不是因为已经有了一个比较普遍的,熟悉的项目技术栈,我们就一直完全沿用呢,有没有比他更适合的方案呢?恰逢团队最近有一个新项目,于是博主开始思考,有没有可能使用其他可替代技术开发呢?既能提高开发效率,又能拓展技术储备和眼界,经过调研,选择了Mobx,最终使用React+Mobx搭建了新项目,本篇总结分享从技术选型到项目实现的较完整过程,希望共同进步。
熊建刚 发布于 1周前 阅读 707 评论 4 点赞 1

ChromeDriver的npm之路

背景 系统目前前端项目有点小爆发的感觉啊~ 老项目中逐渐越来越多的使用心得技术 这不一个项目使用了chromeDriver maven集成gulp压缩js,css方案 系统中使用了frontend-maven-plugin插件十分好用~ 问题 某天小伙伴使用了chromeDriver出现了问题 [INFO] --- frontend-maven-plugin:1.3:npm (npm install) @ appclient --- [INFO] Running 'npm install --registry=https://registry.npm.taobao.org' in /data/jenkins/workspace/f6-local-test-mobile2.0/appclient [INFO] [INFO] > chromedriver@2.35.0 install /data/jenkins/workspace/f6-local-test-mobile2.0/appclient/node_modules/chromedriver [INFO] > node install.js [INFO] [INFO] Downloading https://chromedriver.storage.googleapis.com/2.35/chromedriver_linux64.zip [INFO] Saving to /data/jenkins/workspace/f6-local-test-mobile2.0/appclient/node_modules/chromedriver/chromedriver/chromedriver_linux64.zip [ERROR] ChromeDriver installation failed Error with http(s) request: Error: read ECONNRESET 报错的十分诡异 为啥还是走的chromedriver.storage.googleapis.com/??? 检索 果然不止...
Mr_Qi 发布于 1周前 阅读 101

H5页面中的返回实现

文章首发于:https://github.com/zhaoqize/blog
qize 发布于 1周前 阅读 111

Vue.js 生命周期

vue.jsのライフサイクル
葉子君 发布于 1周前 阅读 342

Css规范整理:3.3、常规流布局:行内格式化上下文

——澄清了规范中许多混乱不清的问题,将行框的影响情况明确
雕刻零碎 发布于 1周前 阅读 126

数据可视化图形语法简史

数据可视化与制图理论 数据可视化的目的在于用图形化的手段,清晰有效地传达和沟通信息。常言道“一图胜千言”,原因就在于人能迅速获取和高效解读视觉信息。数据可视化的领域很广,历史也非常悠久。我们熟知的统计图表,譬如柱状图、折线图、饼图等,早在18世纪就已面世了。 18世纪 William Playfair 发明的几种常用统计图表 线、面 柱 饼 统计图表自 William Playfair 的时代开始,逐渐得到了越来越广泛的应用。也诞生了不少经典的案例,譬如南丁格尔19世纪50年代绘制的“玫瑰图”和法国工程师 Charles Joseph Minard 1861年绘制的“拿破仑东征”等等。 玫瑰图 拿破仑东征 不过直到20世纪下半叶,统计图表的制图理论和方法才得到了进一步的改革。法国制图师 Jacques Bertin 在研究了大量的图表案例之后,发表了可视化图表设计与制图的奠基之作《the Semiology of Graphics》。 封面 视觉元素 狭义的数据可视化就是把数据映射到一个二维平面上,通过人眼易于识别的视觉元素组合来表现数据。这本书为可视化提炼出几个最基础的视觉元素,为统计图表可视化工具的理论和实现奠定了基础。 图形语法 制图理论的完备,催生了越来越多的图表。计算机的普及和图形学的发展,也让统计...
Kener-林峰 发布于 2周前 阅读 299

Avue 是一个后台集成解决方案支持SSR(服务端渲染)和SPA(单例页面),

Avue 是pig项目的前端,是一个后台集成解决方案,它基于 Vue.js 和 element。它使用了最新的前端技术栈,SSR,CRUD,权限验证,第三方网站嵌套等功能 https://gitee.com/log4j/pig
Smallwei小伟 发布于 2周前 阅读 86

ES6 之关键字 const

##### 今天我们来聊下 ES6 的另一个 关键字 const #### 一、const 关键字 ##### const 是 constant(常量)的缩写,const 和 let 一样也是来声明变量的,但 const 是专门用来声明一个常量的,那么既然是常量,它的值是不能改变的。不像以前用 var 声明的变量 随便改。 ##### 可见,碰到const 该改收收你们任性的代码了! #### 二、谈谈常量 ##### 1.不可修改 ``` const Name='张'; Name = 'zhang' // 错误,不可修改常量 Name ``` ##### 2.只在块级作用域起作用,这点和 let 一样 ``` if (x) { const Name='张' } alert(Name) // 错误,在代码块{}外,Name 不起作用 ``` ##### 3.不存在变量提升,必须先声明后使用,也和 let 一样 ``` if (x) { alert(Name) // 错误,使用前未声明 const Name='张' } ``` ##### 4.不可重复声明同一个变量也和 let 一样 ``` var Name='张' ; const Name='张' // 错误 变量已经声明 ,不可重复声明 ``` ##### 5.声明后必须要赋值 ``` const NAME; // 错误 声明后没赋值 ``` #### 三、const 声明 对象 ##### 先看代码 ``` const Person = { 'name':'张' } Person.name='王'; Person.age=20; console.log(Person) // 输出 {'name':'王','age':20 ...
张麻麻 发布于 2周前 阅读 228 评论 1 点赞 2

Vue.set()实现数据动态响应

在vue里面,我们操作最多的就是各种数据,在jquery里面,我们习惯通过下标定向找到数据,然后重新赋值 比如var a[0]=111;(希望上家公司原谅菜鸟的我写了不少这样的代码😁) 下面上代码 ``` Document {{item}} ``` 当我点击按钮时候,发现没有任何变化,页面上还是a,b,c ![输入图片说明](https://static.oschina.net/uploads/img/201802/07091654_4xg2.png "在这里输入图片标题") vue当然不会这么菜呢 下面是伟大的vue内置的方法来了 Vue.set() 官方解释: 设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。 我的理解就是触发视图重新更新一遍,数据动态起来 Vue.set(a,b,c) a是要更改的数据 b是数据的第几项 c是更改后的数据 解决上面数据不能更改后的代码 ``` Document {{item}} ``` #### 我们可以看到,this.listData数组的第一项已经被更改了 ![输入图片说明](https://static.oschina.net/uploads/img/201802/07091809_m7KY.png "在这里输入图片标题")...
不负好时光 发布于 2周前 阅读 252 评论 1

vue ztree 结合使用

在vue中如何加载ztree
OSC屠夫 发布于 2周前 阅读 303 评论 3

ES6 之关键字 let

### 一、 关键字 let 正如大家都熟悉的,我们平时在写代码的时候,用var 声明一个变量,除此之外,也再没有接触到其它的关键字了,不管我们声明什么样类型得变量,都用var 搞定了,很方便,但是ES6 告诉你,除了var,还可以试试 let 来声明变量。 那么,既然var 方便,为什么还要let 来声明,这么说 var 声明 一定会有不足的地方。 #### 下面介绍 用 var 的不足之处。 ##### 1.先看一段代码 ``` var arr = [ ]; for(var i=0; i<10; i++){ arr [i] = function(){ alert(i) } } arr [1](); //结果:10 ``` ###### 很明显,我们执行这段代码的想要的结果是弹出arr 这个数组对应索引的值。但发现无论索引是几 弹出结果都是10。 ###### Why ? ##### 继续执行这段代码看看: ``` var arr = [ ]; for(let i=0; i<10; i++){ arr[i] = function(){ alert(i) } } arr[1](); //结果:1 ``` ###### 居然弹出了对应索引的值!对比一下两段代码,唯一的不同之处就是循环的时候初始化变量 i 是使用let,而不是用var, Why ? ? ##### 原来,let声明的变量仅仅在自己使用的块级作用域起作用,出了这个块级作用域就不起作用了。 ##### 注意:块级作用域 即任何一对花括号中的语句都属于一个快,...
张麻麻 发布于 2周前 阅读 230 评论 2

一个解决js浮点运算精度的代码

比市面上很多解决方案都要准确的方案^_^ ```html Document 操作数1: 操作数2: 加 减 乘 除 结果: ```
BarZu 发布于 3周前 阅读 1140 评论 2 点赞 4

lodash源码解析-slice函数

不知道大家有没有和我一样有疑问,为什么不直接使用原生数组的slice方法而非要自己重新写一个呢?
Jill1231 发布于 3周前 阅读 144 点赞 1

JavaScript 设计模式之单例模式

qq:853089986@qq.com
张泽立 发布于 3周前 阅读 355

WebAssembly 应用案例直击 它们都在用 WebAssembly

WebAssembly 都在哪些场景中应用了?不妨从这 8 个 WebAssembly 应用一探究竟!
编辑部的故事 发布于 3周前 阅读 2613 评论 2 点赞 4

session、cookie与“记住我的登录状态”的功能的实现

session、cookie与“记住我的登录状态”的功能的实现 Cookie的机制 Cookie是浏览器(User Agent)访问一些网站后,这些网站存放在客户端的一组数据,用于使网站等跟踪用户,实现用户自定义功能。 Cookie的Domain和Path属性标识了这个Cookie是哪一个网站发送给浏览器的;Cookie的Expires属性标识了Cookie的有 效时间,当Cookie的有效时间过了之后,这些数据就被自动删除了。 如果不设置过期时间,则表示这个Cookie生命周期为浏览器会话期间,只要关闭浏览器窗口,Cookie就消失了。这种生命期为浏览会话期的 Cookie被称为会话Cookie。会话Cookie一般不保存在硬盘上而是保存在内存里。如果设置了过期时间,浏览器就会把Cookie保存到硬盘 上,关闭后再次打开浏览器,这些Cookie依然有效直到超过设定的过期时间。存储在硬盘上的Cookie可以在不同的浏览器进程间共享,比如两个IE窗 口。而对于保存在内存的Cookie,不同的浏览器有不同的处理方式。 Session的机制 Session是存放在服务器端的类似于HashTable结构(每一种Web开发技术的实现可能不一样,下文直接称之为HashTable)来存放用户 数据,当浏览器第一次发送请求时,服务器自动生成了一个HashTable和一个Session ID用来唯一...
今天来找bug 发布于 2周前 阅读 14

使用pyinstaller将python脚本打包成exe文件

亲测python3.5可使用
xiaoge2016 发布于 1个月前 阅读 12

cesium编程入门(七)3D Tiles,模型旋转

# cesium编程入门(七)3D Tiles,模型旋转 [上一节](https://my.oschina.net/u/592443/blog/1607308)介绍了3D Tiles模型的位置移动,和贴地的操作,这一节来聊一聊模型的旋转, 参考《WebGl编程指南》的第四章 假设在X轴和Y轴构成的平面上,要让物体旋转角度为β,那么公式如下: ![旋转矩阵](http://images2017.cnblogs.com/blog/1318520/201801/1318520-20180124092233819-1018757025.jpg) 由此思路就出来了: 1. 根据要旋转的角度,构建一个三阶旋转矩阵 2. 获取3D tiles 的旋转矩阵modelMatrix,然后与旋转矩阵运算, 3. 最后将计算结果再赋值给modelMatrix,完成。 参考代码: ``` var m = tileset.modelMatrix; //RotateX为旋转角度,转为弧度再参与运算 var m1 = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(RotateX)); //矩阵计算 Cesium.Matrix4.multiplyByMatrix3(m,m1,m); //赋值 tileset.modelMatrix = m; ``` ![](http://images2017.cnblogs.com/blog/1318520/201801/1318520-20180124092308944-1059073810.gif) [lesson03源码参考](https://gitee.com/HQCode/Cesium-test/tree/master/lesson03) Cesium学习交流群:593764057...
伐罗密 发布于 3周前 阅读 28

//微信分享

http://bbs.csdn.net/topics/392288522
好的zzzz 发布于 3周前 阅读 6

ECDSA数字签名算法

一、ECDSA概述 椭圆曲线数字签名算法(ECDSA)是使用椭圆曲线密码(ECC)对数字签名算法(DSA)的模拟。ECDSA于1999年成为ANSI标准,并于2000年成为IEEE和NIST标准。它在1998年既已为ISO所接受,并且包含它的其他一些标准亦在ISO的考虑之中。与普通的离散对数问题(discrete logarithm problem  DLP)和大数分解问题(integer factorization problem  IFP)不同,椭圆曲线离散对数问题(elliptic curve discrete logarithm problem  ECDLP)没有亚指数时间的解决方法。因此椭圆曲线密码的单位比特强度要高于其他公钥体制。   数字签名算法(DSA)在联邦信息处理标准FIPS中有详细论述,称为数字签名标准。它的安全性基于素域上的离散对数问题。椭圆曲线密码(ECC)由Neal Koblitz和Victor Miller于1985年发明。它可以看作是椭圆曲线对先前基于离散对数问题(DLP)的密码系统的模拟,只是群元素由素域中的元素数换为有限域上的椭圆曲线上的点。椭圆曲线密码体制的安全性基于椭圆曲线离散对数问题(ECDLP)的难解性。椭圆曲线离散对数问题远难于离散对数问题,椭圆曲线密码系统的单位比特强度要远高于传统的离散对数系统。因此在使用较短的密钥的情况下,ECC可以达到于DL系...
光明辉煌 发布于 3个月前 阅读 4

js 加载失败

原来写法 <script src="/resources/script/seckill.js" type="text/javascript"></script> 引用js路径要加上项目路径:${pageContext.request.contextPath}可自动获取,采用如下写法 <script src="${pageContext.request.contextPath}/resources/script/seckill.js" type="text/javascript"></script> 原因: 静态文件直接使用相对地址在浏览器访问是不会有什么问题的,但是一旦发布后,你访问项目是通过服务器来定位文件,所以是要加上项目路径。一般做项目时需要引用文件就是按这种方式来直接引用的,只不过你现在的方式是将静态的文件直接加到项目中,所以文件中的一些静态路径该改动的还是要改的,不能偷懒的   参考:http://ask.csdn.net/questions/644056 感谢:张大教主
为了美好的明天 发布于 2个月前 阅读 28

基于 HTML5 WebGL 的 3D 服务器与客户端的通信

服务端与客户端的通信可以说是经典的例子了,但是如何快速搭建这个场景还要加上鹰眼的制作,如果是纯 HTML5 来做的话,能完成,但是时间也消耗了许多,而这个例子的鹰眼只要 1 行代码。。。整个例子只有 200 行左右的代码!
xhload3d 发布于 2个月前 阅读 11

开源巨献:年度最佳 JavaScript 和 CSS 开源库推荐!

Tutorialzine 每个月都会公布一次当月新增的 JS 和 CSS 库。2018 新年之际,该网站整理出了 2017 年最受用户欢迎和喜爱的一些 JS 和 CSS 库,供大家学习和参考。 JavaScript 本地存储库 localForage localForage 是一个 JavaScript 库,提升了应用程序的离线体验,通过使用异步的数据存储,提供简单的类似 localStorage 的 API,允许开发者存储多种类型数据。 CSS3 驱动的动画滚动库 AOS AOS(Animate on scroll)是小型动画滚动库,可在页面滚动时给元素添加动画效果。CSS3 驱动,效果类似于 WOWJS。 响应式邮件标识语言 MJML MJML 是一个标识语言,用来减少编写响应式邮件的复杂度。其语义语法在展示丰富邮件内容时更加简单和直观。该项目提供一个开源的引擎用来将 MJML 标识语言转成 HTML。 基于浏览器的代码编辑器 Monaco-Editor Monaco Editor 是微软开源的基于 VS Code 的代码编辑器,运行在浏览器环境中。编辑器提供代码提示,智能建议等功能。供开发人员远程更方便的编写代码。 Web 虚拟现实框架 A-Frame A-Frame 是 Mozilla 开源的网页虚拟现实体验( WebVR )框架,可用于桌面、iPhone(即将支持安卓)以及 Oculus Rift。A-Frame 可以让创建 WebVR 体验变得...
编辑部的故事 发布于 18小时前 阅读 1463 评论 5 点赞 4

前端利器,6 款开源 Web 性能优化辅助工具推荐

Web 性能优化是一个老生常谈的话题,也是前端页面开发十分重要的部分。当页面加载速度越慢,用户流失的概率就越大,性能和交互直接影响用户体验。下面推荐几款 Web 性能优化辅助工具推荐,希望能对大家有所帮助。 1、Lighthouse Lighthouse 是 Google 开源的一个自动化工具,用于改进网络应用的质量。你可以将其作为一个 Chrome 扩展程序运行,或从命令行运行。 当为 Lighthouse 提供一个要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。可以参考失败的测试,看看可以采取哪些措施来改进应用。 Chrom 扩展则会把报告以非常人性化的图形界面展示给你。 2、Speed Racer SpeedRacer 是一款性能测试工具,它在 Chrome 中运行脚本,并生成详细的性能报告。 SpeedRacer 是直接借助浏览器来实际测试性能的工具,在实际工作中,可以与其它模拟用户访问流量来评估性能的工具配合使用。 3、Yellow Lab Tools Yellow Lab Tools 是一款 Web 性能及前端质量测试工具。与其他工具不同的是,它有一些在其他工具上无法看到的独特功能,例如页面加载时 JavaScript 与 DOM 互动和其他程序代码验证问题。 Yellow Lab Tools 偏向于一个发现不良实践的工具,...
编辑部的故事 发布于 18小时前 阅读 812 评论 3 点赞 4

你需要Mobx还是Redux?

在过去一年,越来越多的项目继续或者开始使用React和Redux开发,这是目前前端业内很普遍的一种前端项目解决方案,但是随着开发项目越来越多,越来越多样化时,个人又有了不同的感受和想法。是不是因为已经有了一个比较普遍的,熟悉的项目技术栈,我们就一直完全沿用呢,有没有比他更适合的方案呢?恰逢团队最近有一个新项目,于是博主开始思考,有没有可能使用其他可替代技术开发呢?既能提高开发效率,又能拓展技术储备和眼界,经过调研,选择了Mobx,最终使用React+Mobx搭建了新项目,本篇总结分享从技术选型到项目实现的较完整过程,希望共同进步。
熊建刚 发布于 1周前 阅读 707 评论 4 点赞 1

打造炫酷的通知插件EasyToaster

HTML + CSS + JS 原生实现, 兼容 Chrome, Firefox, IE9 及以上, 兼容 PC,移动端
lonelydawn 发布于 6天前 阅读 37

反编译wxapkg过程记录

wxapkg解包工具有很多,文本附上python3的解包工具,其他可以上github上搜索 # coding: utf-8 # py2 origin author lrdcq # usage python3 unwxapkg.py filename __author__ = 'Integ: https://github.com./integ' import sys, os import struct class WxapkgFile(object): nameLen = 0 name = "" offset = 0 size = 0 if len(sys.argv) < 2: print('usage: unwxapkg.py filename [output_dir]') exit() with open(sys.argv[1], "rb") as f: root = os.path.dirname(os.path.realpath(f.name)) name = os.path.basename(f.name) + '_dir' if len(sys.argv) > 2: name = sys.argv[2] #read header firstMark = struct.unpack('B', f.read(1))[0] print('first header mark = {}'.format(firstMark)) info1 = struct.unpack('>L', f.read(4))[0] print('info1 = {}'.format(info1)) indexInfoLength = struct.unpack('>L', f.read(4))[0] print('indexInfoLength = {}'.format(indexInfoLength)) bodyInfoLength = struct.unpack('>L', f.read(4))[0] print('bodyInfoLength = {...
dhlsoft 发布于 1个月前 阅读 399 打赏 1

Vue ( 五 ) food 组件开发

### 一、父组件调用子组件的方法 #### 思路:用户点击商品时商品详情页出现,所以需要 父组件中点击商品时调用子组件一个方法来控制 商品详情页的 显示 隐藏。 ##### food组件 ``` ``` ##### 父组件goods组件 ##### 此处省略 引入、注册... ###### 1.绑定事件 ``` ... ``` ###### 2.应用组件 ``` ``` ###### selectedfoods 代表用户当前点击的商品 ###### 3.建立一个接受用户选择商品的对象 ``` data (){ return { goods: [],// goods json 数组 listHeight: [],// 存放 foods 内部的每一块的高度 scrollY:0, selectedfoods:{} // 接收用户点击的商品 } }, ``` ###### 4.点击事件 ``` selectFood(food,event){ if (!event._constructed) {// 阻止浏览器的原生 click 事件 return; } this.selectedfoods=food// 传入用户选择的商品,存在selectedfoods 对象里 this.$refs.food.foodinforshow() //利用 ref 属性 来调用 子组件的方法 } ``` ##### 到这里 就和商品详情页相关联了!继续... ### 二、实现详情页内容的滚动 ##### 1.实现滚动需要better-scroll,所以需要dom绑定,异步加载bscroll ``` ``` ``` import BScroll from 'better-scroll'; export default { props: { se...
张麻麻 发布于 1周前 阅读 243

Token 认证的来龙去脉

Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证,服务端认证成功,那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位
边城 发布于 3周前 阅读 5162 评论 38 点赞 26

Vue学习笔记

``` # 分类 名称 规格 单位 库存 数量 操作 {{k+1}} {{v.ClassTitle}} {{v.GoodsTitle}} {{v.Standard}} {{v.Unit}} {{v.Amount}} 删除 ```
碳素云信息技术 发布于 14小时前 阅读 11

2017 年,最热开源静态网站生成器 TOP 20 揭晓!

近年来,作为传统动态网站基础架构的替代方案,现代静态网站生成器日渐盛行。在 StaticGen 上有一个关于静态站点生成器的开源目录,2017 年该网站追踪了超过一百个生成器,并见证了这些生成器在这一年的流行趋势。本文整理了 StaticGen 目录中排名前 20 的静态网站生成器,排名顺序依据 Github 上的 Star 数。 1、静态站点生成器 Jekyll Jekyll 是一个简单的免费的Blog生成工具,类似WordPress。但是和WordPress又有很大的不同,原因是jekyll只是一个生成静态网页的工具,不需要数据库支持。但是可以配合第三方服务,例如discuz。最关键的是jekyll可以免费部署在Github上,而且可以绑定自己的域名。 2、Go 编写的静态网站生成器 Hugo Hugo 是 Go 编写的静态网站生成器,速度快,易用,可配置。Hugo 有一个内容和模板目录,把他们渲染到完全的 HTML 网站。Hugo 依赖于 Markdown 文件,元数据字体 。用户可以从任意的目录中运行 Hugo,支持共享主机和其他系统 3、静态博客网站生成器 Hexo Hexo 是一个基于nodejs 的静态博客网站生成器,作者是来自台湾的 Tommy Chen。 特点: 不可思议的快速 ─ 只要一眨眼静态文件即生成完成 支持 Markdown 仅需一道指令即可部署到 G...
编辑部的故事 发布于 2个月前 阅读 7276 评论 13 点赞 6

hls rtmp h5播放器

http://web.jobbole.com/88543/
yizhichao 发布于 8小时前 阅读 9

基于vue-element-admin框架改造——支持第三方iframe网站

vue-element-admin是一款很好的基于element-ui框架的后台管理集成方案,但是它不支持iframe第三方网站
Smallwei小伟 发布于 3周前 阅读 478 评论 2 点赞 1

Vue(三)goods组件开发

### 一、 布局 Flex ##### Flex 布局,可以简便、完整、响应式地实现各种页面布局,Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 ``` // 指定为 Flex 布局 display: flex; ``` ``` // 主要属性 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大 flex-shrink属性定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小,flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小 flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小,设为跟width或height属性一样的值(比如350px),则项目将占据固定空间 ``` ``` flex : 等分 内容缩放 展位空间; flex : 0 0 80px ``` [Flex 语法](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool) [Flex 实践](http:...
张麻麻 发布于 4周前 阅读 2468 评论 3 点赞 1

在 2018 年来临之际,你应该知道的 Vue.js 的 11 个组件库

2018 年来临之际,继最热的 React 组件库和 Angular 组件库之后,这里有 11 个流行和实用的 Vue.js 组件库完善你的下一个用 Vue.JS 编写 UI 界面的应用程序。
编辑部的故事 发布于 2个月前 阅读 4957 评论 30 点赞 7

开源巨献:年度最佳 JavaScript 和 CSS 开源库推荐!

Tutorialzine 每个月都会公布一次当月新增的 JS 和 CSS 库。2018 新年之际,该网站整理出了 2017 年最受用户欢迎和喜爱的一些 JS 和 CSS 库,供大家学习和参考。 JavaScript 本地存储库 localForage localForage 是一个 JavaScript 库,提升了应用程序的离线体验,通过使用异步的数据存储,提供简单的类似 localStorage 的 API,允许开发者存储多种类型数据。 CSS3 驱动的动画滚动库 AOS AOS(Animate on scroll)是小型动画滚动库,可在页面滚动时给元素添加动画效果。CSS3 驱动,效果类似于 WOWJS。 响应式邮件标识语言 MJML MJML 是一个标识语言,用来减少编写响应式邮件的复杂度。其语义语法在展示丰富邮件内容时更加简单和直观。该项目提供一个开源的引擎用来将 MJML 标识语言转成 HTML。 基于浏览器的代码编辑器 Monaco-Editor Monaco Editor 是微软开源的基于 VS Code 的代码编辑器,运行在浏览器环境中。编辑器提供代码提示,智能建议等功能。供开发人员远程更方便的编写代码。 Web 虚拟现实框架 A-Frame A-Frame 是 Mozilla 开源的网页虚拟现实体验( WebVR )框架,可用于桌面、iPhone(即将支持安卓)以及 Oculus Rift。A-Frame 可以让创建 WebVR 体验变得...
编辑部的故事 发布于 18小时前 阅读 1463 评论 5 点赞 4

73款阿里巴巴开源软件详解!

详细解读阿里巴巴开源技术,包括框架、组件、引擎、数据库/存储、平台/系统、解决方案、工具、中间件、Web Sever、设计等十大类73款!
阿里巴巴

前端利器,6 款开源 Web 性能优化辅助工具推荐

Web 性能优化是一个老生常谈的话题,也是前端页面开发十分重要的部分。当页面加载速度越慢,用户流失的概率就越大,性能和交互直接影响用户体验。下面推荐几款 Web 性能优化辅助工具推荐,希望能对大家有所帮助。 1、Lighthouse Lighthouse 是 Google 开源的一个自动化工具,用于改进网络应用的质量。你可以将其作为一个 Chrome 扩展程序运行,或从命令行运行。 当为 Lighthouse 提供一个要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。可以参考失败的测试,看看可以采取哪些措施来改进应用。 Chrom 扩展则会把报告以非常人性化的图形界面展示给你。 2、Speed Racer SpeedRacer 是一款性能测试工具,它在 Chrome 中运行脚本,并生成详细的性能报告。 SpeedRacer 是直接借助浏览器来实际测试性能的工具,在实际工作中,可以与其它模拟用户访问流量来评估性能的工具配合使用。 3、Yellow Lab Tools Yellow Lab Tools 是一款 Web 性能及前端质量测试工具。与其他工具不同的是,它有一些在其他工具上无法看到的独特功能,例如页面加载时 JavaScript 与 DOM 互动和其他程序代码验证问题。 Yellow Lab Tools 偏向于一个发现不良实践的工具,...
编辑部的故事 发布于 18小时前 阅读 812 评论 3 点赞 4

ECMAScript2017 新特性(ES8)

什么是 ES8 ES8 是 ECMA-262 标准第 8 版的简称,从 ES6 开始每年发布一个版本,以年份作为名称,因此又称 ECMAScript 2017,简称 ES2017。 每年一个版本 两个版本之间间隔时间太久(从 ES5 到 ES6 经历了 6 年)会有以下两个问题: 有很多早已讨论完毕的特性需要等到标准的大版本发布才能进入标准 有一些特性本身比较复杂,需要较长的时间去讨论。但如果推迟到下一个版本,又必须等待很长的时间才能发布 从 ES6 开始新版本发布会更频繁,每年发布一个版本,把这一年内讨论完毕的特性纳入标准。   TC39 流程 TC39(Technical Committee 39)是一个推动 JavaScript 发展的委员会。它的成员由各个主流浏览器厂商的代表构成。会议的每一项决议必须大部分人赞同,并且没有人强烈反对才可以通过。因为,对成员来说,同意就意味着有责任去实现它。每个 ECMAScript 特性都会经历 stage 0 到 stage 4 的每一个阶段。在 TC39 proposals 这个 github 仓库可以看到每个特性的进度。 Stage 0: strawman 一种推进 ECMAScript 发展的自由形式,任何 TC39 成员,或者注册为 TC39 贡献者的会员,都可以提交。 Stage 1: proposal 该阶段产生一个正式的提案。 确定一个带头人来负责该提案...
爱敲代码的程序员 发布于 1周前 阅读 420 评论 3

Vue ( 五 ) food 组件开发

### 一、父组件调用子组件的方法 #### 思路:用户点击商品时商品详情页出现,所以需要 父组件中点击商品时调用子组件一个方法来控制 商品详情页的 显示 隐藏。 ##### food组件 ``` ``` ##### 父组件goods组件 ##### 此处省略 引入、注册... ###### 1.绑定事件 ``` ... ``` ###### 2.应用组件 ``` ``` ###### selectedfoods 代表用户当前点击的商品 ###### 3.建立一个接受用户选择商品的对象 ``` data (){ return { goods: [],// goods json 数组 listHeight: [],// 存放 foods 内部的每一块的高度 scrollY:0, selectedfoods:{} // 接收用户点击的商品 } }, ``` ###### 4.点击事件 ``` selectFood(food,event){ if (!event._constructed) {// 阻止浏览器的原生 click 事件 return; } this.selectedfoods=food// 传入用户选择的商品,存在selectedfoods 对象里 this.$refs.food.foodinforshow() //利用 ref 属性 来调用 子组件的方法 } ``` ##### 到这里 就和商品详情页相关联了!继续... ### 二、实现详情页内容的滚动 ##### 1.实现滚动需要better-scroll,所以需要dom绑定,异步加载bscroll ``` ``` ``` import BScroll from 'better-scroll'; export default { props: { se...
张麻麻 发布于 1周前 阅读 243

Avue 是一个后台集成解决方案支持SSR(服务端渲染)和SPA(单例页面),

Avue 是pig项目的前端,是一个后台集成解决方案,它基于 Vue.js 和 element。它使用了最新的前端技术栈,SSR,CRUD,权限验证,第三方网站嵌套等功能 https://gitee.com/log4j/pig
Smallwei小伟 发布于 2周前 阅读 86

Token 认证的来龙去脉

Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证,服务端认证成功,那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位
边城 发布于 3周前 阅读 5162 评论 38 点赞 26

H5页面中的返回实现

文章首发于:https://github.com/zhaoqize/blog
qize 发布于 1周前 阅读 111

wap跳转到微信内部浏览器的解决方案

老一批的站长手里多少有点WAP量,或者一些广告投放在微信外部 或者投放在第三方APP,那么有一套方案可能能提高你的广告转化率,那就是WAP跳微信内部浏览器的解决方案。那么怎么才能让用户点击广告跳转到微信内部浏览器呢? 原理:利用微信开放给一些VIP合作商的跳转接口来实现。 那么怎么找到这些跳转接口呢。 本人所知几条,一条是京东,一条是wx.17u.cn 下面列出京东的请求接口: http://wq.jd.com/mjgj/link/GetOpenLink?callback=getOpenLink&rurl=urlencode(要跳转的链接)   请求之后的结果类似: try{getOpenLink({"errcode":0,"openlink":"weixin://dl/business/?ticket=t7ac579f071faadbce4c31fca854b3e59"});}catch(e){} 那么 openlink的值  通过js      loaciton.href="weixin://dl/business/?ticket=t7ac579f071faadbce4c31fca854b3e59"; 就可以跳转到微信内部。 这个只能支持jd.com的域名  比如:sales.jd.com   那么怎么才能跳到自己的域名呢,就必须借助jd.com的域名来做跳转,所以需要找到一条jd.com的跳转链接,并且能跳转到第三方域名。 至于怎么找,翻遍*.jd.com的所有域名,你应该能找到。哈哈   还有一条wx.17u.cn的  自己在微信的火车票里...
黑科技开源 发布于 3周前 阅读 756 评论 2

localhost与127.0.0.1 的区别

localhost与127.0.0.1的概念和工作原理之不同 要比较两个东西有什么不同,首先要弄清两者的概念。所以,我们从概念开始。 localhost:也叫local ,正确的解释是:本地服务器 127.0.0.1:在windows等系统的正确解释是:本机地址(本机服务器) 一个是“本地”,一个是“本机”。不过从这两个词来看,还是不能比较两者的区别。我们再看看他们的工作原理。 localhot:是不经网卡传输的,它不受网络防火墙和网卡相关的的限制。 127.0.0.1:是通过网卡传输的,它依赖网卡,并受到网络防火墙和网卡相关的限制。 通过上述概念和工作原理的比较,我想现在大家都心里有谱了吧,知道localhost与127.0.0.1有什么不同了。文中开头提到的localhost不能访问但127.0.0.1可以访问的问题,究其原因,很可能是localhost访问时,系统带的本机当前用户的权限去访问,而用ip的时候,等于本机是通过网络再去访问本机,可能涉及到网络用户的权限。 另外,我们现在也应该明白了一个道理,那就是一般设置程序时本地服务用localhost是最好的,localhost不会解析成IP,也不会占用网卡、网络资源。 localhost不能访问127.0.0.1可以访问的解决方案 一般情况下ping localhost 应该为127.0.0.1 ,但是有时会出...
阿豪boy 发布于 5天前 阅读 18

基于 HTML5 WebGL 的 3D 网络拓扑结构图

现在,3D 模型已经用于各种不同的领域。在医疗行业使用它们制作器官的精确模型;电影行业将它们用于活动的人物、物体以及现实电影;视频游戏产业将它们作为计算机与视频游戏中的资源;在科学领域将它们作为化合物的精确模型;建筑业将它们用来展示提议的建筑物或者风景表现;工程界将它们用于设计新设备、交通工具、结构以及其它应用领域;在最近几十年,地球科学领域开始构建三维地质模型,而且 3D 模型经常做成动画,例如,在故事片电影以及计算机与视频游戏中大量地应用三维模型。它们可以在三维建模工具中使用或者单独使用。为了容易形成动画,通常在模型中加入一些额外的数据,例如,一些人类或者动物的三维模型中有完整的骨骼系统,
xhload3d 发布于 3周前 阅读 2675 评论 3 点赞 7

基于vue-element-admin框架改造——支持第三方iframe网站

vue-element-admin是一款很好的基于element-ui框架的后台管理集成方案,但是它不支持iframe第三方网站
Smallwei小伟 发布于 3周前 阅读 478 评论 2 点赞 1

前后端分离 Spring Boot + Vue 开发单页面应用 个人总结(二)

## 前后端分离 Spring Boot + Vue 开发单页面应用 个人总结(二) ### 2018/01/30 更新 关于跨域:在实际开发过程中,发现跨域问题并不是那么好解决的 因为Springboot安全控制框架使用了Securtiy,它的身份认证基于 JSESSIONID 而axios框架默认是不发送cookie的,因此需要在axios配置中添加 ``` axios.defaults.withCredentials = true ``` 然而因为跨域策略问题,Springboot后端跨域设置也要修改 ``` @Configuration public class CorsConfig { /** 允许任何域名使用 允许任何头 允许任何方法(post、get等) */ private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); // addAllowedOrigin 不能设置为* 因为与 allowCredential 冲突 corsConfiguration.addAllowedOrigin("http://localhost:9528"); corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedMethod("*"); // allowCredential 需设置为true corsConfiguration.setAllowCredentials(true); return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSo...
BekeyChao 发布于 2个月前 阅读 1077 评论 2 点赞 2

ChromeDriver的npm之路

背景 系统目前前端项目有点小爆发的感觉啊~ 老项目中逐渐越来越多的使用心得技术 这不一个项目使用了chromeDriver maven集成gulp压缩js,css方案 系统中使用了frontend-maven-plugin插件十分好用~ 问题 某天小伙伴使用了chromeDriver出现了问题 [INFO] --- frontend-maven-plugin:1.3:npm (npm install) @ appclient --- [INFO] Running 'npm install --registry=https://registry.npm.taobao.org' in /data/jenkins/workspace/f6-local-test-mobile2.0/appclient [INFO] [INFO] > chromedriver@2.35.0 install /data/jenkins/workspace/f6-local-test-mobile2.0/appclient/node_modules/chromedriver [INFO] > node install.js [INFO] [INFO] Downloading https://chromedriver.storage.googleapis.com/2.35/chromedriver_linux64.zip [INFO] Saving to /data/jenkins/workspace/f6-local-test-mobile2.0/appclient/node_modules/chromedriver/chromedriver/chromedriver_linux64.zip [ERROR] ChromeDriver installation failed Error with http(s) request: Error: read ECONNRESET 报错的十分诡异 为啥还是走的chromedriver.storage.googleapis.com/??? 检索 果然不止...
Mr_Qi 发布于 1周前 阅读 101

Vue学习笔记

``` # 分类 名称 规格 单位 库存 数量 操作 {{k+1}} {{v.ClassTitle}} {{v.GoodsTitle}} {{v.Standard}} {{v.Unit}} {{v.Amount}} 删除 ```
碳素云信息技术 发布于 14小时前 阅读 11

数据可视化图形语法简史

数据可视化与制图理论 数据可视化的目的在于用图形化的手段,清晰有效地传达和沟通信息。常言道“一图胜千言”,原因就在于人能迅速获取和高效解读视觉信息。数据可视化的领域很广,历史也非常悠久。我们熟知的统计图表,譬如柱状图、折线图、饼图等,早在18世纪就已面世了。 18世纪 William Playfair 发明的几种常用统计图表 线、面 柱 饼 统计图表自 William Playfair 的时代开始,逐渐得到了越来越广泛的应用。也诞生了不少经典的案例,譬如南丁格尔19世纪50年代绘制的“玫瑰图”和法国工程师 Charles Joseph Minard 1861年绘制的“拿破仑东征”等等。 玫瑰图 拿破仑东征 不过直到20世纪下半叶,统计图表的制图理论和方法才得到了进一步的改革。法国制图师 Jacques Bertin 在研究了大量的图表案例之后,发表了可视化图表设计与制图的奠基之作《the Semiology of Graphics》。 封面 视觉元素 狭义的数据可视化就是把数据映射到一个二维平面上,通过人眼易于识别的视觉元素组合来表现数据。这本书为可视化提炼出几个最基础的视觉元素,为统计图表可视化工具的理论和实现奠定了基础。 图形语法 制图理论的完备,催生了越来越多的图表。计算机的普及和图形学的发展,也让统计...
Kener-林峰 发布于 2周前 阅读 299

chrome浏览器开发模式实现跨域

增加如下参数, --disable-web-security --user-data-dir   启动项变为: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir
王小明123 发布于 7天前 阅读 11

说说互联网流氓达人360周鸿祎的发家史

说说互联网流氓达人360周鸿祎的发家史 说到360,有多少人的第一反映是免费杀毒,干净流畅,可是今天我就来说说360老总周鸿祎的流氓发家史   周鸿祎年轻的时候其实挺牛逼的,自己一个人跟几个朋友做过几个网站,赚了一些小钱,后来周老板想了想,可能做一个综合类门户赚的钱会来得更快,于是就做了一个网站叫做“3721”,一开始的3721说句实在的还是很不错的,方便又简单,发展迅速的周鸿祎甚至不惜花了2000万在春晚打出广告词“不管三七二十一,中文上网更容易”。 可是后来,周鸿祎野心膨胀,觉得3721可以在中国走得更远,于是把3721捆绑在各种各样的软件上门,变相的逼迫没有安装过3721的用户安装3721,并且不容易删除,普通人士往往素手无策,想要删除貌似只有重装系统这个办法。 3721凭借着捆绑安装的办法,在那个时候的中国,竟然占有了8000万台电脑,至少80%的电脑安装了3721,3721一年之间赚了好几千万。 接着周鸿祎领导着3721跟中国最具有背景的公司“cnnic”打了一场官司(其实也挺牛逼的,这都敢打,有兴趣的路友们去搜索“cnnic“),又跟百度打了一架,同样是输,不过360的扯淡力量把百度的一个产品彻底搞死。 接下来,才是真正周鸿祎的流氓人生 周鸿祎想在美...
McFishAPP 发布于 4周前 阅读 22

关于vue的webpack打包优化问题

vue是一个单例页面,所有页面都是由js动态渲染,因此js的体积会越来越大,从而影像页面的渲染性能 1.异步组件     官方推出了异步组件路由,是一个解决js打包后体积过大问题的方案,可以很好的吧vue组件按组区分,从而打出不同的js文件,解决了单一js打包大的问题。 以下是一个异步组件打包的最终文件 后面的数字为hash值,为了js不会缓冲 app为vue以及vue-router等第三方库的额外配置代码 vendor为第三方库插件的本身代码 mainfest为第三方库runtime代码 数组部分就是不同分组的异步打包文件(几个组就有几个js文件) 官方异步组件传送门 注意:千万不要把js的组件分的颗粒度很小,js文件多了也会影响效率,浏览器加载js的线程一般为4-5个 2.webpack打包配置     第三方库文件可以使用第三方的cdn,从而减少了vendor的体积大小。     webpack的打包忽略第三方库的配置 (webpack.base.conf.js)      externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex':'Vuex', 'axios': 'axios', 'element-ui':'ELEMENT', }     要是内网环境下,你又懒得搭建cdn,就把相应的库文件下载到本地来使用,像往常一样引入html里就可以 本地库文件 引入h...
Smallwei小伟 发布于 3个月前 阅读 478 点赞 2

反编译wxapkg过程记录

wxapkg解包工具有很多,文本附上python3的解包工具,其他可以上github上搜索 # coding: utf-8 # py2 origin author lrdcq # usage python3 unwxapkg.py filename __author__ = 'Integ: https://github.com./integ' import sys, os import struct class WxapkgFile(object): nameLen = 0 name = "" offset = 0 size = 0 if len(sys.argv) < 2: print('usage: unwxapkg.py filename [output_dir]') exit() with open(sys.argv[1], "rb") as f: root = os.path.dirname(os.path.realpath(f.name)) name = os.path.basename(f.name) + '_dir' if len(sys.argv) > 2: name = sys.argv[2] #read header firstMark = struct.unpack('B', f.read(1))[0] print('first header mark = {}'.format(firstMark)) info1 = struct.unpack('>L', f.read(4))[0] print('info1 = {}'.format(info1)) indexInfoLength = struct.unpack('>L', f.read(4))[0] print('indexInfoLength = {}'.format(indexInfoLength)) bodyInfoLength = struct.unpack('>L', f.read(4))[0] print('bodyInfoLength = {...
dhlsoft 发布于 1个月前 阅读 399 打赏 1

XSS 攻击原理、实战、预防

``` 目录: 1. XSS 攻击原理——脚本注入,如何注入? 2. XSS 攻击实战 —— node 模拟服务端提供网站 3. XSS 如何预防 ``` # 1. 原理 常见攻击场景:在论坛或博客的下方经常会有留言功能,输入内容:`测试数据`,留言内容会被一个 h 标签包裹,F12 控制台会打印: ![留言数据](http://upload-images.jianshu.io/upload_images/6693922-1d300716e748d8f8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 现在在下方留言 `测试数据 ` ,F12 控制台可以看到我们自己写的脚本通过简单伪装就被植入到该网站,关键是直接看页面压根看不出啥变化。 ![XSS 攻击](http://upload-images.jianshu.io/upload_images/6693922-dd296003678da83a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 这里的脚本比较简单,如果对脚本稍加修改,比如自执行函数,页面打开时自动运行;让脚本会获取 [浏览器保存的用户登录密码](chrome://settings/passwords),再通过一些手段发送给攻击者,那么攻击者就成功盗取用户账号。 **举个栗子**:假设简书上上某一篇文章下方评论里被攻击者注入了攻击脚本,其它用户只要打开这篇文章,攻击脚本自动执行,将打开该文章的用户身份信息...
dkvirus 发布于 2个月前 阅读 28

73款阿里巴巴开源软件详解!

详细解读阿里巴巴开源技术,包括框架、组件、引擎、数据库/存储、平台/系统、解决方案、工具、中间件、Web Sever、设计等十大类73款!
阿里巴巴

CSS 页面内使用锚链接跳转

通过设置a标签,可以跳转带页面中指定的id元素处 <a href="#footer">footer</a> <div id="header">header</div> <div id="content">content</div> <div id="footer">footer</div> <a href="#header">header</a> <a href="#content">content</a> 可以保存到url中,这样再次访问就还会定位到这个地方 file:///D:/code/webstrom/flex/%E9%94%9A%E9%93%BE%E6%8E%A5.html#content   虽然与vue-router冲突,但跳转功能是可以使用的,可能我测试的情况不是很复杂。。。 但至少无法通过url保存页面位置。。。,如果有重定向非法路由的话
阿豪boy 发布于 4小时前 阅读 5

vue 简单自动补全的输入框

实现一个输入框,输入信息后显示由后台返回的数据,供用户选择,之前用的elm的组件,不过那个有点大。。。简单的情况下自己实现一个也能满足要求。。。应该吧。。。   主题包括一个input用于输入,一个div用于展示数据,div里面是数据项item 当在input中按下回车时,会根据信息去后台获取数据,如果用户点击了别的地方,input失去焦点,则提示的div也应该收起来 bug:     在blur事件中,如果直接将isShow设置为false会出问题,先失去焦点,显示面板消失,所以你的点击不会被监听到。。。设置一个计时器,在点击之后10ms后将面板收起来,问题解决。。。     显示div将内容撑开,改变其他组件布局,设置div的属性,即可,高度设为0,z-index很大,就不会改变其他组件位置 height: 0; z-index: 999; <template> <div class="container"> <input v-model="msg" @keyup.enter="search" class="msg" @blur="blur"/> <div class="select-panel"> <div v-show="isShow" v-for="w in words" class="select-item" @click="click_item(w)">{{w['content']}}</div> </div> </div> </template>     简单实现代码 <template> <div class="container"> ...
阿豪boy 发布于 5小时前 阅读 5

js 代码片段

1.数字排序,一定要传比较器 Javascript 的sort()函数在默认情况下使用字母数字(字符串Unicode码点)排序。 所以[1,2,5,10].sort() 会输出 [1, 10, 2, 5]. 要正确的排序一个数组, 可以用 [1,2,5,10].sort((a, b) => a — b)   // [ 1, 2, 5, 10 ] 很简单的解决方案, 前提是你得知道有这么个坑   2.日期和时间的处理 new Date() 可以接受: 没有参数: 返回当前时间 // 2018-02-19T12:49:42.359Z 一个参数 x: 返回1970年1月1日 + x 毫秒。 了解 Unix 的人知道为什么。 new Date(2018,2,12) 表示  2018-03-11T16:00:00.000Z,月份和天都是由0开始计数的。   3. Replace 并不“替代” let s = "bob" const replaced = s.replace('b', 'l') replaced === "lob" s === "bob" 我觉得这是一件好事,因为我不喜欢函数改变它们的输入。 你还应该知道 replace 只会替换第一个匹配的字符串: 如果你想替换所有匹配的字符串,你可以使用带/g标志的正则表达式 : "bob".replace(/b/g, 'l') === 'lol' // 替换所有匹配的字符串     4. 比较的时候要注意 // These are ok 'abc' === 'abc' // true 1 === 1         // true // These are not [1,2,3] =...
阿豪boy 发布于 6小时前 阅读 4

hls rtmp h5播放器

http://web.jobbole.com/88543/
yizhichao 发布于 8小时前 阅读 9

CSS 长度

长度单位包括包括:相对单位和绝对单位。 相对长度单位包括有: em, ex, ch, rem, vw, vh, vmax, vmin, px 绝对长度单位包括有: cm, mm, q, in, pt, pc 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc     vw 相对于视口的宽度。视口被均分为100单位的vw   vh 相对于视口的高度。视口被均分为100单位的vh   rem 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数   vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax   vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin   em 相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。 如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。   ex 相对长度单位。相对于当前对象内文本的字体尺寸。 如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。   ch 数字“0”的宽度    cm 厘米(Centimeters)。绝对长度单位。   mm 毫米(Millimeters)。绝对长度单位。   q 1/4毫米(quarter-millimeters)。绝对长度单位。   in 英寸(Inches)。绝对长度单位。 pt 点(Points)。绝对长度...
阿豪boy 发布于 10小时前 阅读 5

vue 跨域

后端如果已经设置了CORS,那么直接访问是可以获取数据的 axios.get('http://localhost:80/get_word_list').then( (response) => { console.log(response.data) }, (err) => { console.log(err) } )   如果后端没有设置CORS,那么按照上面的访问方式会出错    首先设置config/index.js 文件 注意: '/api' 为匹配项,target 为被请求的地址,因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉。   使用的时候只需要用 /api/get_word 的形式就行 axios.get('/api/get_word_list').then( (response) => { console.log(response.data) }, (err) => { console.log(err) } ) axios.get('/api/get_word_random').then( (response) => { console.log(response.data) }, (err) => { console.log(err) } ) 成功获取数据...
阿豪boy 发布于 12小时前 阅读 7

Vue学习笔记

``` # 分类 名称 规格 单位 库存 数量 操作 {{k+1}} {{v.ClassTitle}} {{v.GoodsTitle}} {{v.Standard}} {{v.Unit}} {{v.Amount}} 删除 ```
碳素云信息技术 发布于 14小时前 阅读 11

开源巨献:年度最佳 JavaScript 和 CSS 开源库推荐!

Tutorialzine 每个月都会公布一次当月新增的 JS 和 CSS 库。2018 新年之际,该网站整理出了 2017 年最受用户欢迎和喜爱的一些 JS 和 CSS 库,供大家学习和参考。 JavaScript 本地存储库 localForage localForage 是一个 JavaScript 库,提升了应用程序的离线体验,通过使用异步的数据存储,提供简单的类似 localStorage 的 API,允许开发者存储多种类型数据。 CSS3 驱动的动画滚动库 AOS AOS(Animate on scroll)是小型动画滚动库,可在页面滚动时给元素添加动画效果。CSS3 驱动,效果类似于 WOWJS。 响应式邮件标识语言 MJML MJML 是一个标识语言,用来减少编写响应式邮件的复杂度。其语义语法在展示丰富邮件内容时更加简单和直观。该项目提供一个开源的引擎用来将 MJML 标识语言转成 HTML。 基于浏览器的代码编辑器 Monaco-Editor Monaco Editor 是微软开源的基于 VS Code 的代码编辑器,运行在浏览器环境中。编辑器提供代码提示,智能建议等功能。供开发人员远程更方便的编写代码。 Web 虚拟现实框架 A-Frame A-Frame 是 Mozilla 开源的网页虚拟现实体验( WebVR )框架,可用于桌面、iPhone(即将支持安卓)以及 Oculus Rift。A-Frame 可以让创建 WebVR 体验变得...
编辑部的故事 发布于 18小时前 阅读 1463 评论 5 点赞 4

前端利器,6 款开源 Web 性能优化辅助工具推荐

Web 性能优化是一个老生常谈的话题,也是前端页面开发十分重要的部分。当页面加载速度越慢,用户流失的概率就越大,性能和交互直接影响用户体验。下面推荐几款 Web 性能优化辅助工具推荐,希望能对大家有所帮助。 1、Lighthouse Lighthouse 是 Google 开源的一个自动化工具,用于改进网络应用的质量。你可以将其作为一个 Chrome 扩展程序运行,或从命令行运行。 当为 Lighthouse 提供一个要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。可以参考失败的测试,看看可以采取哪些措施来改进应用。 Chrom 扩展则会把报告以非常人性化的图形界面展示给你。 2、Speed Racer SpeedRacer 是一款性能测试工具,它在 Chrome 中运行脚本,并生成详细的性能报告。 SpeedRacer 是直接借助浏览器来实际测试性能的工具,在实际工作中,可以与其它模拟用户访问流量来评估性能的工具配合使用。 3、Yellow Lab Tools Yellow Lab Tools 是一款 Web 性能及前端质量测试工具。与其他工具不同的是,它有一些在其他工具上无法看到的独特功能,例如页面加载时 JavaScript 与 DOM 互动和其他程序代码验证问题。 Yellow Lab Tools 偏向于一个发现不良实践的工具,...
编辑部的故事 发布于 18小时前 阅读 812 评论 3 点赞 4

js 解构和剩余参数

JavaScript 解构 ES6 解构并非一个新功能,而是一个新的赋值语法,可以让您快速解压缩对象属性和数组中的值,并将它们分配给各个变量。 var profile = {name:'George', age:39,               hobby:'Tennis'} var {name, hobby} = profile   这里我用解构快速提取 profile 对象的 name 和 hobby 属性 。 使用别名,你可以使用与你正在提取值的对象属性不同的变量名: var profile = {name:'George', age:39,               hobby:'Tennis'} var {name:n, hobby:h} = profile   嵌套对象解构 解构也可以与嵌套对象一起工作,我一直使用它来快速解开来自复杂的JSON请求的值: var jsondata = { title: 'Top 5 JavaScript ES6 Features', Details: { date: { created: '2017/09/19', modified: '2017/09/20', }, Category: 'JavaScript', }, url: '/top-5-es6-features/' }; var {title, Details: {date: {created, modified}}} = jsondata console.log(title, created, modified) 解构数组 数组的解构与在对象上的工作方式类似,除了左边的花括号使用方括号代替: var soccerteam = ['George', 'Dennis', 'San...
阿豪boy 发布于 1天前 阅读 6 评论 2

vue 为 激活的路由设置样式

设置一个切换路由时,改变激活路由的样式 active-class 类型: string 默认值: "router-link-active" 设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。 exact 类型: boolean 默认值: false "是否激活" 默认类名的依据是 inclusive match (全包含匹配)。 举个例子,如果当前的路径是 /a 开头的,那么 <router-link to="/a"> 也会被设置 CSS 类名。 按照这个规则,每个路由都会激活<router-link to="/">!想要链接使用 "exact 匹配模式",则使用 exact 属性: <!-- 这个链接只会在地址为 / 的时候被激活 --> <router-link to="/" exact> router 子路由有两种设置方式,分别为绝对路径型和相对路径型 使用/开头的是绝对路径 不使用的话,会自己在前面加上父级路由  Home 使用绝对型,about使用相对型 import Vue from 'vue' import Router from 'vue-router' import About from '../components/About/About' import About1 from '../components/About/About1' import About2 from '../components/About/About2' import Home from '../components/Home/Home' import Home1 from '../components/Home/Home1' i...
阿豪boy 发布于 1天前 阅读 4

axios 提交数据到 flask 的 数据格式问题

HTTP 协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。常见的四种编码方式如下:  1、application/x-www-form-urlencoded  这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样(无关的请求头在本文中都省略掉了): POST http://www.example.com HTTP/1.1 Content-Type: application/x-www-form-urlencoded;charset=utf-8 title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3 2、multipart/form-data  这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时,必须让 form 的 enctyped 等于这个值,下面是示例 POST http://www.example.com HTTP/1.1 Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA ------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="text" title ------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="file"; filename="chrome.png" Content-Type: im...
阿豪boy 发布于 1天前 阅读 5

js 代码片段

浮点数取整 注意:前三种方法只适用于32个位整数,对于负数的处理上和 Math.floor是不同的。 const x = 123.4545; x >> 0; // 123 ~~x; // 123 x | 0; // 123 Math.floor(x); // 123   统计字符串中相同字符出现的次数 var arr = 'abcdaabc'; var info = arr .split('') .reduce((p, k) => (p[k]++ || (p[k] = 1), p), {}); console.log(info); //{ a: 3, b: 2, c: 2, d: 1 } 单行写一个评级组件 "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate); 数字字符转数字 var a = '1'; +a; // 1 最短的代码实现数组去重 [...new Set([1, "1", 2, 1, 1, 3])]; // [1, "1", 2, 3] 用最短的代码实现一个长度为m(6)且值都n(8)的数组 Array(6).fill(8); // [8, 8, 8, 8, 8, 8] parseInt() or Number() 两者的差别之处在于解析和转换两者之间的理解。 解析允许字符串中含有非数字字符,解析按从左到右的顺序,如果遇到非数字字符就停止。而转换不允许出现非数字字符,否者会失败并返回NaN。 var a = '520'; var b = '520px'; Number(a); // 520 parseInt(a); // 520 Number(b); // NaN parseInt(b); // 520 parseInt方法第二个参数用于指定转换的基数,ES5默认为10进制。 ...
阿豪boy 发布于 1天前 阅读 4 评论 2

js Async/await

Async functions         函数前面的async一词意味着一个简单的事情:这个函数总是返回一个promise,如果代码中有return <非promise>语句,JavaScript会自动把返回的这个value值包装成promise的resolved值。 所以,async确保了函数返回一个promise,即使其中包含非promise。   function a() { return 1 } async function aa() { return 2 } function aaa() { return Promise.resolve(3) } console.log(a()) console.log(aa()) aa().then(v => console.log(v)) console.log(aaa()) aaa().then(v => console.log(v)) 1 Promise { 2 } Promise { 3 } 2 3 Await 语法如下: // 只能在async函数内部使用 let value = await promise 关键词await可以让JavaScript进行等待,直到一个promise执行并返回它的结果,JavaScript才会继续往下执行。 以下是一个promise在1s之后resolve的例子: async function f() { let promise = new Promise((resolve, reject) => { setTimeout(() => resolve('done!'), 1000) }) let result = await promise // 直到promise返回一个resolve值(*) alert(result) // 'done!' } f() 函数执行到(*)行会...
阿豪boy 发布于 1天前 阅读 6

vue v-text和 v-html

1. v-text 作用 : 操作元素中的纯文本 快捷方式 : {{}} 用{{}}的弊端:当网速很慢或者下面的JavaScript写错时,会直接将{{message}}渲染到页面 而使用v-text="message" 如果出错是不显示的 所以在实际开发中用v-text比较多 2. v-html 作用 : 操作元素中的HTML标签 v-text会将元素当成纯文本输出,v-html会将元素当成HTML标签解析后输出 注意 : 你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容插值。 在组件中的使用  <template> <div> {{msg}} <div v-text="msg"></div> <div v-html="html"></div> </div> </template> <script> export default { name: "test", data() { return { msg: '<h1>hello</h1>', html: '<h1>hello</h1>' } } } </script> 输出结果,可以看到,使用v-html正确的将字符串中的标签解析为html标签并渲染...
阿豪boy 发布于 2天前 阅读 6 评论 2

数据库

**一、传统数据库技术回顾:** 数据库就是存储数据的,那么存储数据就用txt就行了,为什么要用数据库? **理由之1:数据库有行、列的概念,数据有关系,数据不是散的** 老牌数据库:MySQL、SQL Server、Oracle、Access。这些叫做结构型数据库 每个表中都有明确的字段,每行记录,都有这些字段,不能有的行有,有的没有 **理由之2:数据库能够提出非常接口,让增删改查操作变得容易** 我们老牌数据库都无一例外的使用SQL语言,管理数据库; 比如:查询所有女生: SELECT * FROM 表名 WHERE xingbie = '女' 再比如 SELECT * FROM 表名 WHERE xingbie = '女' AND nianling < 24 AND nianling >=20 **理由之3:数据库不能自己玩,要给向PHP、.net、JSP等语言提供接口** 用PHP这些语言,能够向数据库之中增删改查 老牌的数据库,现在出了什么问题? 老牌数据库,都是结构型数据库 比如:现在想在一个已经有1000条数据库的数据库中增加一个字段,之前已经存在的数据,实际上不需要增加这个字段,因为这些用户已经填写完表单了,不需要再增加其他信息了,我们的意图是在今后的信息字段里再增加新的字段。但是所谓字段就是表的一个结构,所有的行都必须拥有,不能有的行有这个字段,...
沉非 发布于 2天前 阅读 4

vue 音乐播放器

对于audio对象的属性,直接读取或者赋值即可,方法需要调用   常用操作 //播放(继续播放) audio.play(); //暂停 audio.pause(); //停止 audio.pause(); audio.currentTime = 0; //重新播放 audio.currentTime = 0; audio.play(); 也可以动态的创建<audio>元素 //方式1 var audio = document.createElement("audio"); audio.src = "hangge.mp3"; audio.play(); //方式2 var audio = new Audio("hangge.mp3"); audio.play(); 通过canPlayType()方法可以判断浏览器支持的编码方式,从而设置对应的音频文件。 if (audio.canPlayType("audio/mp3")) { audio.src = "hangge.mp3"; }else if(audio.canPlayType("audio/ogg")) { audio.src = "hangge.ogg"; }   audio 相关的 api <audio src=”音频的地址”>备用(当浏览器不支持audio时显示的内容)</audio> 控制函数功能说明 load()   加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载 play()    加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放 pause() 暂停处于播放状态的音频、视频文件 audio 的只读媒体特性有: 只读属性属性说明 du...
阿豪boy 发布于 3天前 阅读 6

js 正则表达式 replace 和 match

test方法 检索字符串中指定的值。返回 true 或 false。  如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。 var reg = /abc/g; var str = "123abc456abc"; console.log(reg.lastIndex);//0 console.log(reg.test(str));//true console.log(reg.lastIndex);//6 console.log(reg.test(str));//true console.log(reg.lastIndex);//12 console.log(reg.test(str));//false 如果正则表达式是一个空字符串,则会匹配所有的字符串,但需要使用new RegExp()方式 console.log(new RegExp('').test('abc'));//true console.log(/''/.test('abc'));//false console.log(/''/.test("''"));//true  exec方法 exec() 方法用于检索字符串中的正则表达式的匹配。 返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。 var str = "xyz"; var reg1 = /x/; var reg2 = /a/; var res1 = reg1.exec(str); var res2 = reg2.exec(str); console.log(res1);//["x", index: 0, input: "xyz"] console.log(res2);//null 如果正则表达式包含圆括号,则返回的数组会包括多个元素。首先是整个...
阿豪boy 发布于 3天前 阅读 6

js 正则表达式 例子

敏感词过滤,使用replace方法,将匹配到的敏感词变为长度相同的*字符串 pattern = /北京|天安门/g target = '我爱北京天安门,天安门上太阳升' console.log( target.replace(pattern, (str) => { console.log(str) return Array(str.length).fill('*').join('') }) ) 北京 天安门 天安门 我爱*****,***上太阳升   改变年份的显示,将2017-1-2 变为 2017.1.2 pattern = /(\d+)(-)/g target = '2017-1-2' console.log( target.replace( pattern, ($0, $1, $2) => { console.log($0, $1, $2) //replace()中如果有子项, //第一个参数:$0(匹配成功后的整体结果 2013- 6-), // 第二个参数 : $1(匹配成功的第一个分组,这里指的是\d 2013, 6) //第三个参数 : $1(匹配成功的第二个分组,这里指的是- - - ) return $1 + '.'; //分别返回2013. 6. } ) ) 2017- 2017 - 1- 1 - 2017.1.2     去除首尾的空字符,匹配首尾空字符,然后用‘’替换 // 替换空字符,用*代替空格 pattern = /^\s+|\s+$/g target = ' abc \n' res = target.replace(pattern, '') console.log(res, res.length); ...
阿豪boy 发布于 3天前 阅读 4

js 正则表达式 基础

      定义正则: 1 var re = new RegExp(“a”); //RegExp对象。参数就是我们想要制定的规则。有一种情况必须用这种方式,下面会提到。 2 var re = /a/; // 简写方法 推荐使用 性能更好 不能为空 不然以为是注释 ,    正则的常用方法        1  test()  :在字符串中查找符合正则的内容,若查找到返回true,反之返回false.         用法:正则.test(字符串)     2   search()  :在字符串搜索符合正则的内容,搜索到就返回出现的位置(从0开始,如果匹配的不只是一个字母,那只会返回第一个字母的位置), 如果搜索失败就返回 -1     用法:字符串.search(正则)    在字符串中查找复合正则的内容。忽略大小写:i——ignore(正则中默认是区分大小写的 如果不区分大小写的话,在正则的最后加标识 i ) 3  match()  在字符串中搜索复合规则的内容,搜索成功就返回内容,格式为数组,失败就返回null。      用法: 字符串.match(正则)      量词:+ 至少出现一次 匹配不确定的次数(匹配就是搜索查找的意思)     全局匹配:g——global(正则中默认,只要搜索到复合规则的内容就会结束搜索 ) 4 replace() :查找符合正则的字符串...
阿豪boy 发布于 3天前 阅读 7

你需要Mobx还是Redux?

在过去一年,越来越多的项目继续或者开始使用React和Redux开发,这是目前前端业内很普遍的一种前端项目解决方案,但是随着开发项目越来越多,越来越多样化时,个人又有了不同的感受和想法。是不是因为已经有了一个比较普遍的,熟悉的项目技术栈,我们就一直完全沿用呢,有没有比他更适合的方案呢?恰逢团队最近有一个新项目,于是博主开始思考,有没有可能使用其他可替代技术开发呢?既能提高开发效率,又能拓展技术储备和眼界,经过调研,选择了Mobx,最终使用React+Mobx搭建了新项目,本篇总结分享从技术选型到项目实现的较完整过程,希望共同进步。
熊建刚 发布于 1周前 阅读 707 评论 4 点赞 1

基于 HTML5 WebGL 的 3D 网络拓扑结构图

现在,3D 模型已经用于各种不同的领域。在医疗行业使用它们制作器官的精确模型;电影行业将它们用于活动的人物、物体以及现实电影;视频游戏产业将它们作为计算机与视频游戏中的资源;在科学领域将它们作为化合物的精确模型;建筑业将它们用来展示提议的建筑物或者风景表现;工程界将它们用于设计新设备、交通工具、结构以及其它应用领域;在最近几十年,地球科学领域开始构建三维地质模型,而且 3D 模型经常做成动画,例如,在故事片电影以及计算机与视频游戏中大量地应用三维模型。它们可以在三维建模工具中使用或者单独使用。为了容易形成动画,通常在模型中加入一些额外的数据,例如,一些人类或者动物的三维模型中有完整的骨骼系统,
xhload3d 发布于 3周前 阅读 2675 评论 3 点赞 7

Token 认证的来龙去脉

Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证,服务端认证成功,那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位
边城 发布于 3周前 阅读 5162 评论 38 点赞 26

Vue(三)goods组件开发

### 一、 布局 Flex ##### Flex 布局,可以简便、完整、响应式地实现各种页面布局,Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 ``` // 指定为 Flex 布局 display: flex; ``` ``` // 主要属性 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大 flex-shrink属性定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小,flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小 flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小,设为跟width或height属性一样的值(比如350px),则项目将占据固定空间 ``` ``` flex : 等分 内容缩放 展位空间; flex : 0 0 80px ``` [Flex 语法](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool) [Flex 实践](http:...
张麻麻 发布于 4周前 阅读 2468 评论 3 点赞 1

为什么说Web开发和Vue.js是如此的有趣?

![Web Vue.js](http://upload-images.jianshu.io/upload_images/145564-b44a324d5fd42693?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 我想告诉你,我开始享受使用Vue.js和进行前端开发的故事。这不应该被理解为一篇关于为什么Vue.js可能比React,Angular或任何你正在考虑的其他Web框架更好的文章。Vuejs是令人惊叹的,但我们生活在一个作为前端开发人员同样令人惊叹的时代。 如果你几年前和我交谈过,我会把自己定位为一个后端开发人员,掌握服务器和数据库管理。面向对象的语言,java和c #,我想找到一种自己需要交付程序时使用的唯一的开发语言,我逐渐了解到更多关于.NET和SQL服务器的堆栈技术。当时我有这样一个概念,前端开发者只是使用右脑的附庸风雅的人,并不是“真正的”编程。 但是,在我最后一次求职,选择很少。特别是工作面试,我看到了自己是如何失败的。那次失败非常令人沮丧,但我从中吸取了不少教训。我获得了一个职位,利用了我在SharePoint的经验。我在SharePoint的经验并不特别:用GUI、工作流等设计页面这个不是我理想中的工作,而是为了生活不得不做的工作。 当我刚开始的时候,我接触过像我过去做过的任何类似的项目。我依靠GUI设计用户...
笔阁 发布于 1个月前 阅读 5078 评论 12 点赞 2

前后端分离实践有感

前后端分离并不是什么新鲜事,到处都是前后端分离的实践。然而一些历史项目在从一体化 Web 设计转向前后端分离的架构时,仍然不可避免的会遇到各种各样的问题。由于层出不穷的问题,甚至会有团队质疑,一体化好好的,为什么要前后端分离?
边城 发布于 1个月前 阅读 3704 评论 39 点赞 37

前端性能优化(三) 移动端浏览器前端优化策略

前端性能优化是一个很宽泛的概念,本书前面的部分也多多少少提到一些前端优化方法,这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统,前端优化的最终目的都是提升用户体验,改善页面性能,我们常常竭尽全力进行前端页面优化,但却忽略了这样做的效果和意义。先不急于探究前端优化具体可以怎样去做,先看看什么是前端性能,应该怎样去了解和评价前端页面的性能。
ouven 发布于 2个月前 阅读 1927 评论 3 点赞 5

为什么43%前端开发者想学Vue.js

根据[JavaScript 2017前端库状况调查](https://stateofjs.com/2017/front-end/results/) **Vue.js**是开发者最想学的前端库。我在这里说明一下我为什么认为这也是和你一起通过使用Vue构建一个简单的App应用程序的原因。 我最近曾与Evan You,Chris Fritz,Sarah Drasner,和Adam Jahr做了一个介绍视频,而现在你可以在http://vuejs.org首页找到它。以下是该视频的文字版本。 # 伟大的JavaScript迁移 如你所知,**JavaScript**在过去的10年中已经成熟了很多,而且服务器端正常运行的大部分代码已经迁移到浏览器中了。随着这变得越来越复杂,框架也变得越来越有组织性。 ![为什么43%前端开发者想学Vue.js](http://upload-images.jianshu.io/upload_images/145564-47adf719c305dab3?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 我不打算告诉你为什么一个比另一个更好的,虽然在官方网站有一个详细的比较。 **Vue.js**旨在成为一个平易近人,多功能,高性能,可维护性,可测试的JavaScript框架。Vue的目也是为了进步,意思就是如果你有一个现有的应用程序存在只占一个部分的前端,你需要更多的互动体验那么就可以使用Vue。 或者,您也可以从一开始就在前端构建更多的...
笔阁 发布于 2个月前 阅读 5459 评论 31 点赞 7

JSDuck 与 AngularJS 融合技巧

  字数:1568 阅读时间:10分钟     前言 前面,我们以一个实战案例来详细说明了如何在实际开发中使用JSDuck工具。但是,并不是所有的时候,代码的封装方式都受我们控制的。例如,如果我们使用了现在的几个主流框架AngularJS、React或者Vue的时候,代码的封装方式就必须按照框架定义的方式来构建。当我们的代码中出现了模块、控制器、服务、指令等JSDuck完全不认识的组成部分时,我们该如何使用JSDuck来正确描述我们的代码呢? 那么,下面,笔者就以 AngularJS 为例,来说一说笔者自己的解决方案。     融合思路 解决这个问题,有两种思路。第一种,可以将JSDuck不识别的代码部分映射到工具识别的标签来进行描述。第二种,既然没有现成的标签来描述这些新成员,那我们可以自定义一套标签来描述它们。 第一种方法更方便,不需要额外编码;第二种方法更优雅,但是需要自定义一整套标签。 这里,由于笔者对文档的要求主要是实用,不需要那么完美,而且现在也没有过多的精力来研发一整套标签。所以,笔者选择了第一种解决方案。 第一种方案最核心的地方就是需要确定AngularJS框架给我们的代码带来了哪些新成员,而后如何将这些新成员映射到原有的标签中去。 AngularJS给我...
老司机带你撸代码 发布于 2个月前 阅读 718 评论 1 点赞 2

用Vue.js递归组件构建一个可折叠的树形菜单

![](http://upload-images.jianshu.io/upload_images/145564-1ccbec67a1618829?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 在Vue.js中一个递归组件调用的是其本身,如: ``` Vue.component('recursive-component', {   template: `              ` }); ``` 递归组件常用于在blog上显示注释、嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同。例如: ![](http://upload-images.jianshu.io/upload_images/145564-2b37fc10cb0e5186?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形菜单的来一步步进行。 # 数据结构 一个树状UI的递归组件将是一些递归数据结构的可视化表达。在本教程中,我们将使用树状结构,其中每个节点都是一个对象: 1. 一个 **label** 属性。 2. 如果它有子节点,一个 **nodes** 属性,则它是一个或多个节点的数组属性。 与所有树结构一样,它必须有一个根节点,但可以无限深。 ``` let tree = {   label: 'root',   nodes: [     {       label: 'item1',       nodes: [         {           label: 'item1.1'   ...
笔阁 发布于 2个月前 阅读 2042 评论 3

Webpack自动化构建实践指南

由于现在的博客是使用wordpress搭建,自己得经常修改过一些代码,但是修改第三方源码真的比较痛苦,于是决定计划开始使用React + Node.js / Python开发新博客项目,最终替换当前博客代码,方便以后博客的维护和更新,也能实现自我开发技术,架构设计,解决问题能力的提升,同时记录下整个开发历程,总结,分享,希望能与读者们一起进步。本篇介绍如何使用Webpack和Babel,Eslint,documentation.js等搭建项目开发环境和生产环境,也算项目的准备工作,下一期计划介绍项目的架构设计和技术栈选择。
熊建刚 发布于 2个月前 阅读 1481 评论 4 点赞 3

合格前端系列第八弹-造一个属于自己的 UI 库

轮子总得造上一造~
qiangdada 发布于 2个月前 阅读 3567 评论 9 点赞 8

Vue中使用axios的一些注意点

1. 基本使用 现在我们的团队使用的基本都是axios发起请求,使用方式如下 在service.js文件中返回promise对象 import config from '@/config' import axios from 'axios' export default{ /*启用停用*/ setB2bStoreGoodsBlackUpOrDown(data) { return new Promise(function (resolve, reject) { const url = `${config.server.http}${config.server.host}/b2b-seller-admin/setStoreGoodsBlackUpOrDown` axios.post(url, data) .then(function (data) { resolve(data) }) .catch(function (error) { reject(error) }) }) }, /*一个接口查黑名单*/ getListB2bCanaleStoreGoodsBlacks(data) { return new Promise(function (resolve, reject) { const url = `${config.server.http}${config.server.host}/b2b-seller-admin/page/getListCanaleStoreGoodsBlacks` axios.post(url, data) .then(function (data) { resolve(data) ...
龙马行空 发布于 2个月前 阅读 1642 评论 17 点赞 2

vue全面介绍

2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”。授予了这么高的评价的vue.js,也是开源世界华人的骄傲,因为它的作者是位中国人–尤雨溪(Evan You)。 Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js;同时比起 React + Redux 相对复杂的架构,
爱敲代码的程序员 发布于 2个月前 阅读 5064 评论 13 点赞 14

用vue做一个酷炫的menu

写在前面         最近看到一个非常酷炫的menu插件,一直想把它鼓捣成vue形式,谁让我是vue的死灰粉呢,如果这都不算爱😔。😆开个小玩耍,我们一起来探索黑魔法吧。观看本教程的读者需要具备一定的vue和css3的知识. 本文结构 1.效果演示 2.使用方法介绍 3.关键步骤讲解 正文 1.效果演示   pic_1   pic2   pic_3      在线演示live demo 2.使用介绍         项目地址:github.com/MingSeng-W/vue-bloom-menu,clone项目到本地        a. 首先在单文件组件里引入menu组件,导入common文件夹stylus里的menuConfig.stylus.        b.配置相应的参数             可选参数             * radius:default为100px,item距离menu的button的距离。             *  startAngle:defaut为0,item开始的角度,以时钟3点钟方向记为0,然后顺时针方向为递增方向。            *  endAngle:default为315,最后一个item的角度。            *  itemNum:default为8             *  animationDuration:default为0.5s,每个item动画的执行时间             *  itemAnimationDelay:d...
MingSeng-W 发布于 3个月前 阅读 6158 评论 20 点赞 17

用 Electron 打造 Win/Mac 应用,从「代码」到可下载的「安装包」,可能比你想得麻烦一点

我们能从很多地方学习到怎么起一个 Electron 项目,有些还会介绍怎么打包或构建你的代码,但距离「真正地发行一款 Electron 产品」这一目标,还有很多工作需要做... 这是 Electron 系列文章的第二篇,这一篇文章将和大家分享我是怎么去构建**自动化的 Electron 开发构建工程**的,说白了,就是**怎么把敲的代码变成一个用户可以下载安装的包**,当然随着之后应用复杂度的提升和技术再选型,工程体系可能随时会重构或演进,但至少可以给大家一些参考,欢迎留言交流。
Stinson_Zhao 发布于 3个月前 阅读 3293 评论 9 点赞 13

Angular 5 快速入门与提高

**一、概述** 尽管被称为`Angular5`,实际上它只是这个诞生于2012年的前端框架的的第四个版本: ![angular history](http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/img/angular-history.png) 看起来差不多半年就发布一个新版本,不过实际上从重写的版本`2`开始,开发 接口与核心思想就稳定下来了,并基本保持着与前序版本的兼容性。 在`5`这个新的版本中,`Angular`团队将改进重点放在以下特性方面: - 更易于构建渐进式`Web`应用 —— __P__rogressive __W__eb __A__pp - 使用构建优化器剔除无用代码,以获得更小的应用、更快的网络加载时间 - 使物化设计组件兼容服务端渲染 `PWA`是`Google`提出的一个标准,旨在让Web应用在移动终端上获得媲美原生 应用的用户体验。一个`PWA`应用主要利用`Service Worker`和浏览器缓存来 提省交互体验,它不仅可以直接部署在手机桌面,而且可以离线应用: ![pwa](http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/img/pwa.png) **二、引入angular环境** `Angular`推荐使用`TypeScript`来开发应用,这要求使用一个在线 编译器(`JIT`)实时编译代码,或者在开发期采用预编译器(`AOT`)提前编译代码。 为了避免这个繁琐的过程影...
笔阁 发布于 4个月前 阅读 2642 评论 11 点赞 4

Vuex源码解析

## 写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。 文章的原地址:[https://github.com/answershuto/learnVue](https://github.com/answershuto/learnVue)。 在学习过程中,为Vue加上了中文的注释[https://github.com/answershuto/learnVue/tree/master/vue-src](https://github.com/answershuto/learnVue/tree/master/vue-src)以及Vuex的注释[https://github.com/answershuto/learnVue/tree/master/vuex-src](https://github.com/answershuto/learnVue/tree/master/vuex-src),希望可以对其他想学习源码的小伙伴有所帮助。 可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。 ## Vuex 我们在使用Vue.js开发复杂的应用时,经常会遇到多个组件共享同一个状态,亦或是多个组件会去更新同一个状态,在应用代码量较少的时候,我们可以组件间通信去维护修改数据,或者是通过事件总线来进行数据的传递以及修改。但是当应用逐渐庞大以后,代码就会变得难以维护,从父组件开始通过prop传递多层嵌套的数据由于层级过深而显得异常脆弱,而事件总线也会因为组件的增多、代码量的增...
染陌同学 发布于 4个月前 阅读 1864 评论 1 点赞 4

Electron,从玩玩具的心态开始,到打造出一款越来越优秀的桌面客户端产品 —— 一份不是「Hello Word」的吊胃口的Quick Start

标题是我以第一视角基于 Electron 开发客户端产品的体验,我将在之后分一系列文章向有兴趣的朋友一步一步介绍我是怎么从玩玩具的心态开始接触 Electron 到去开发客户端产品,最后随着业务和功能的复杂度提升再不断地优化客户端。
Stinson_Zhao 发布于 4个月前 阅读 5168 评论 35 点赞 18

vue 指令基本使用大全

## 指令 - 解释:指令 (Directives) 是带有 `v-` 前缀的特殊属性 - 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM ### 常用指令 - v-text - v-html - v-bind ### v-text - 解释:更新元素的 textContent ``` ``` ### v-html - 解释:更新元素的 innerHTML ``` ``` ### v-bind - 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM - 语法:`v-bind:title="msg"` - 简写:`:title="msg"` ``` ``` ### v-on - 作用:绑定事件 - 语法:`v-on:click="say"` or `v-on:click="say('参数', $event)"` - 简写:`@click="say"` - 说明:绑定的事件从`methods`中获取 ``` ``` ### 事件修饰符 - `.stop` 阻止冒泡,调用 event.stopPropagation() - `.prevent` 阻止默认事件,调用 event.preventDefault() - `.capture` 添加事件侦听器时使用事件`捕获`模式 - `.self` 只当事件在该元素本身(比如不是子元素)触发时触发回调 - `.once` 事件只触发一次 ### v-model - 作用:在表单元素上创建双向数据绑定 - 说明:监听用户的输入事件以更新数据 ``` Message is: {{ message }} ``` ### v-for - 作用:基于源数据多次渲染元素或模板块 ``` {{ ite...
不负好时光 发布于 4个月前 阅读 4311 评论 9 点赞 11
顶部