技术前沿网

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

It appears you’re using an unsupported browser

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

精彩阅读

  • 最新推荐

  • 今日热门

  • 本周热门

  • 每日一博

  • 最新文章

常见JS动画效果

作为一名前端开发人员,想要的大多都是,在开发过程中,看着自己制作的动画的炫酷以及困难的解决;开发结束后,自己的项目、成果可以被他人认可接受。人们浏览网页时,若一个网页动画效果丰富炫酷,性能良好,体验度良好,自然会受到吸引去打来浏览。吸引用户,自然少不了网页的布局优美、色彩搭配的恰当,更重要的是其中吸引人的炫酷动画效果。
爱敲代码的程序员 发布于 1天前 阅读 395 评论 1 点赞 2

JavaScript 闭包

JavaScript 的闭包原理和详解
唯情 发布于 2天前 阅读 233 评论 4 点赞 5

从Facebook的React框架事件学习一下开源协议

![](https://user-gold-cdn.xitu.io/2017/9/26/a2f2c54fd86fef9636cc3afdbe3eda8e) ### 前言 前一阵子由于Facebook BSD+PATENTS License的原因,Apache项目禁止使用带该license的代码,引人注目的就是Facebook的React前端框架。 后来在知乎上看到百度内部也要求在半年内完成内部产品的转型,如下图所示。 ![](https://user-gold-cdn.xitu.io/2017/9/26/9c574850d0f2dbbbcfd19af0121a1aea) 最近又看到Facebook 的React框架又重新将Facebook BSD+PATENTS License更新为了MIT协议。 ![](https://user-gold-cdn.xitu.io/2017/9/26/6f94705ad6c298ac3fb12b485e297803) 以上这些变化,引起了我的好奇,在接下来的内容中将对以下内容进行阐述。 ### 目录 1. Facebook的BSD+PATENTS License到底说了些什么,以React为例子。 2. 开源协议选择 3. 结尾 ### BSD+PATENTS License 根据维基百科的定义,License即软件许可证,含义如下 > 软件许可证是一种具有法律性质的合同或指导,目的在规范受著作权保护的软件的使用或散布行为。通常的授权方式会允许用户来使用单一或多份该软件的复制,因为若无授权而径予使用该软件,将违反著作权法给予该软件开发者的专属保护。效用上来说,软件授...
kailuncen 发布于 2天前 阅读 328 评论 2

jQuery Validate验证框架详解

一、导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="#"></script> 注:<%=request.getContextPath() %>返回web项目的根路径。 二、默认校验规则 (1)、required:true               必输字段 (2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值 (3)、email:true                  必须输入正确格式的电子邮件 (4)、url:true                    必须输入正确格式的网址 (5)、date:true                   必须输入正确格式的日期,日期校验ie6出错,慎用 (6)、dateISO:true                必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性 (7)、number:true                 必须输入合法的数字(负数,小数) (8)、digits:true                 必须输入整数 (9)、creditcard:true             必须输入合法的信用卡号 (10)、equalTo:"#password"        输入值必须和#password相同 (11)、accep...
爱敲代码的程序员 发布于 3天前 阅读 293 评论 4 点赞 1

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

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

《Node.js在CLI下的工程化体系实践》成都OSC源创会分享总结

背景: 随着开发团队规模不断发展壮大,在人员增加的同时也带来了协作成本的增加,业务项目越来越多,类型也各不相同。常见的类型有组件类、活动类、基于React+redux的业务项目、RN项目、Node.js项目等等。如果想要对每个项目进行一些规范的约束比如Git提交规范、Javascript规范简直难于登天。所有的这些,只因为缺少一个好用的工程化工具。从项目创建、开发、构建、代码规范检查到最终项目上线,通过CLI可以提升效率,同时保障开发规范的实施。
cpselvis 发布于 4天前 阅读 121

从Vue.js源码看异步更新DOM策略及nextTick

## 写在前面 因为对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),希望可以对其他想学习Vue源码的小伙伴有所帮助。 可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。 ## 操作DOM 在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: ```html {{test}} tet ``` ```javascript export default { data () { return { test: 'begin' }; }, methods () { handleClick () { this.test = 'end'; console.log(this.$refs.test.innerText);//打印“begin” } } } ``` 打印的结果是begin,为什么我们明明已经将test设置成了“end”,获取真实DOM节点的innerText却没有得到我们预期中的“end”,而是得到之前的值“begin”呢? ## Watcher队列 带着疑问,我们找到了Vue.js源码的Watch...
染陌同学 发布于 5天前 阅读 283 评论 1 点赞 2
编辑部的故事

给 Web 开发人员推荐的文档生成工具

工欲善其事必先利其器,在此给 Web 开发人员推荐几款优秀的开源文档生成工具,希望能对大家有所帮助。 1、JavaScript JSDoc 3 这是一款根据 Javascript 文件中注释信息,生成 JavaScript 应用、库、模块的 API 文档的工具。你可以使用它记录如:命名空间、类、方法、方法参数等。该项目还衍生出了许多模板和其他工具来帮助生成和自定义文档,比如: 模板 jaguarjs-jsdoc DocStrap (example) jsdoc3Template (example) minami docdash (example) tui-jsdoc-template (example) 构建工具 JSDoc Grunt plugin JSDoc Gulp plugin 其它工具 jsdoc-to-markdown Integrating GitBook with JSDoc ESDoc 一个 JavaScript 文档生成器,按照规范编写代码注释,即可生成友好的 JavaScript 代码文档。它可以将测试代码和用户手册一并集成到文档中,支持通过插件添加自定义功能。 Demo 2、API apiDoc 这是一款 RESTful Web API 文档生成工具,一个在注释里边编写 API 文档的小工具。有了它,只需在写源码的时候顺手写上一些简单的注释,就可以生成出漂亮的文档了。项目支持大部分主流语言,注释维护起来也比较方便,不需要额外再维护一份文档。 Demo GraphQL Voyager 这是一款将任意 ...
编辑部的故事 发布于 1周前 阅读 4916 评论 4 点赞 11 打赏 1

如何使用Flexbox和CSS Grid,实现高效布局

CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想。幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来。   使用 Flexbox 可以使元素对齐变得容易,因此 Flexbox 已经被广泛使用了。 同时,CSS Grid 布局也为网页设计行业带来了很大的便利。虽然 CSS Grid 布局未被广泛采用,但是浏览器逐渐开始增加对 CSS Grid 布局的支持。   虽然 Flexbox 和 CSS Grid 可以完成类似的布局,但是本次,我们学习的是如何组合使用这两个工具,而不是只选择其中的一个。在不久的将来,当 CSS Grid 布局获得完整的浏览器支持时,设计人员就能够利用每个 CSS 组合的优势,来创建最有效和最有趣的布局设计。   测试 Flexbox 和 CSS Grid 的基本布局 我们从一个很简单且熟悉的布局类型开始,包括标题,侧边栏,主要内容和页脚等部分。通过这样一个简单的布局,来帮助我们快速找到各种元素的布局方法。 下面是需要创建的内容:  要完成这个基本布局, Flexbox 需要完成的主要任务包括以下方面: 创建完整宽度的 header 和 footer 将侧边栏放置在主内容区域左侧 确保侧边栏和主内容区域的大小合适 确保导航...
葡萄城控件技术团队 发布于 1周前 阅读 270 点赞 3
笔阁

简单介绍一下vue2.0

Vue是用于构建用户界面的渐进框架。作者尤雨熙特别强调它与其他的框架不同,Vue是渐进式的框架,可以逐步采用,不必一下就通过框架去重构项目。 另外Vue的核心库只专注于视图层,这样就更容易与其他库或现有项目进行集成,也更灵活。
笔阁 发布于 1周前 阅读 414 评论 1

彻底理解了Object这个属性

1.实例化Object对象 实例化Object对象的方式有两种:使用Object构造器和使用对象的字面量。例如: var person1 = { name: '李四' }; var person2 = new Object(); person2.name = '王二'; 2.为实列添加属性 我们可以随时随地为对象添加属性,也可以随时修改属性的值。 复制代码 var person1 = { name: '小明' }; var person2 = new Object(); person2.name = '小红'; //给对象添加属性 person1.age = 23; person2.age = 25; //修改属性的值 person1.name = '张三'; console.log(person1.name); //'张三' person2.name = '李四'; console.log(person2.name); //'李四' 3.删除对象中的属性 var person1 = { name: '张三' }; person1.name = null; console.log(person1.name); //'张三' delete person1.name; console.log(person1.name); //'undefined' 4.检查属性 由于对象的属性可以被随时随地被修改或删除,因此有时候我们需要检查对象的某个属性是否存在。使用下面的方式检查是不可靠的: var person1 = { name: '张三' }; person1.name = '';//或者null/undefined if (person1.name) { console.log('存在'); } ...
爱敲代码的程序员 发布于 1周前 阅读 596 评论 4 点赞 6
SwatNo27

对比angular的几个插件库

这几天因为react的事情相信可能会有不少朋友将目光投向vue或者angular的学习使用,前段时间群里的朋友在angular项目启动的时候经常会问到一个问题,angular的插件库怎么选,为了方便大家的选择于是想在这篇博客中简单对比一下我使用过的几个插件库,包括使用方法以及使用的体验。
SwatNo27 发布于 1周前 阅读 188 评论 5 点赞 2

Sublime Text3—自定义代码片段(Code Snippets)

摘要 程序员总是会不断的重复写一些简单的代码片段,为了提高编码效率,我们可以把经常用到的代码保存起来再调用。 平时用sublime安装各种插件,使用Tab键快速补全,也是snippets(可译为代码片段)的一种。 Sublime编辑器还提供了自定义代码片段的功能(当然不止Sublime有此功能),其官方文档中定义如下: Whether you are coding or writing the next vampire best-seller, you’re likely to need certain short fragments of text again and again. Use snippets to save yourself tedious typing. Snippets are smart templates that will insert text for you and adapt it to their context. 创建snippets 1.新建和保存 菜单栏中依次选择Tools | Developer | New Snippet...就会新建一个扩展名为.sublime-snippet的XML语法的文档,注意后缀是识别snippets的关键。 代码片段可以任意存储在packages文件夹下,默认会保存在Packages\User文件夹里,为了方便管理和使用建议再新建个文件夹例如snippets,则路径为Packages\User\snippets。 默认结构如下: <snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <!-- Optional: Set ...
爱敲代码的程序员 发布于 1周前 阅读 190 点赞 2

VirtualDOM与diff(Vue实现)

## 写在前面 因为对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),希望可以对其他想学习Vue源码的小伙伴有所帮助。 可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。 ## VNode 在刀耕火种的年代,我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。 那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树,在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢?于是虚拟DOM出现了,它是真实DOM的一层抽象,用属性描述真实DOM的各个特性。当它发生变化的时候,就会去修改视图。 但是这样的JavaScript操作DOM进行重绘整个视图层是相当消耗性能的,我们是不是可以每次只更新它的修改呢?所以Vue.js将DOM抽象成一个以JavaScript对象为节点的虚拟...
染陌同学 发布于 2周前 阅读 1506 点赞 4

webpack 使用笔记

全局方式安装,打包 安装 npm i webpack -g 打包文件 webpack a.js bundle.js //a.js 入口文件 //生成bundle.js   项目的方式打包 生成项目 npm init -y 项目内安装 npm i webpack -D 打包文件 node_modules/.bin/webpack a.js bundle.js 或定义命令 执行命令 npm run pack   通过webpack.config.js文件生成打包文件 执行 npm run pack 即可   模拟真实的项目环境配置 webpack.config.js配置如下   module.exports={ entry:{ home:'./js/home.js', signup:'./js/signup.js', }, output:{ filename:'[name].bundle.js', path:__dirname+'/dist', } } 执行 npm run pack  ,定义了两个入口文件,也相应生成两个dist文件 使用loader加载css等其它资源文件 首先安装css-loader和style-loader npm i css-loader style-loader -D 在webpack.config.js中添加如下模块  代表能够识别.css文件的import 执行 npm run pack 项目所有代码 https://coding.net/u/lilu/p/simple_webpack/git/tree/master...
lilugirl 发布于 2周前 阅读 166 评论 1

jQuery UI 实例 - 日期选择器(Datepicker)

日期选择器(Datepicker)绑定到一个标准的表单 input 字段上。把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历。选择一个日期,点击页面上的任意地方(输入框即失去焦点),或者点击 Esc 键来关闭。如果选择了一个日期,则反馈显示为 input 的值。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 日期选择器(Datepicker) - 默认功能</title> <link rel="stylesheet" href="/code/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="#"></script> <script src="#"></script> <link rel="stylesheet" href="/jqueryui/resources/demos/style.css"> <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> </head> <body> <p>日期:<input type="text" id="datepicker"></p> </body> </html> 动画 当打开或关闭 datepicker 时使用不同的动画。从下拉框中选择一个动画,然后在输入框中点击来查看它的效果。您可以使用三个标准动画中任意一...
爱敲代码的程序员 发布于 2周前 阅读 281 点赞 2

angular组件通信

angular组件通信是很长常见的功能,现在总结下,常见通信主要用一下三种 1. 父组件 => 子组件 2. 子组件 => 父组件 3. 组件A = > 组件B ![Screenshot.png-19.9kB][1] | 父组件 => 子组件 | 子组件 => 父组件 | sibling => sibling | | -------- | -----: | :----: | | [@input](https://my.oschina.net/InPuto) | [@output](https://my.oschina.net/output1314) | | | setters (本质上还是@input) | 注入父组件 | | | ngOnChanges() (不推荐使用) | | | | 局部变量 | | | | @ViewChild() | | | | service | service | service | | Rxjs的Observalbe | Rxjs的Observalbe | Rxjs的Observalbe | |localStorage,sessionStorage | localStorage,sessionStorage | localStorage,sessionStorage | 上面图表总结了能用到通信方案,期中最后3种,是通用的,angular的组件之间都可以使用这3种,**其中Rxjs是最最牛逼的用法,甩redux,promise,这些同样基于函数式的状态管理几条街**,下面一一说来 ##父组件 => 子组件 ### [@input](https://my.oschina.net/InPuto),最常用的一种方式 ```JavaScript @Component({ selector: 'app-parent', template: ' childText:', styleUrls: ['./parent.comp...
hucheng9110 发布于 2周前 阅读 195 点赞 1

在Angular4中使用PrimeNG calendar

这段时间在我的Angular项目中需要用到日历这一控件: 像treeview、calendar等等这些“大”型控件,如果要自己写的话,需要花费很多时间,而且容易遗漏掉一些细节问题。如同大漠穷秋老师说的,如果一个ui库缺少了这些“大”型控件,那这个ui库一定是不合格的。于是我在:easyui、MaterialAngular、ant-design、primeng里面找。  其中,easyui的使用方式是jQuery,而Angular官方不推荐使用jq,所以第一个放弃了他。而后三者相比之下,我果断选择了primeng,为什么?看他的默认样式: 十分相似,既然在primeng里有相似度如此高的控件,为什么要选其他需要自己调整更多的库呢?好,开始Get Started! 这时候,可以看到primeng给出的文档。  首先,文档告诉我们需要使用npm进行对PrimeNG库的下载工作。有人说:这个我知道啊,淘宝大大好,我们用cnpm吧!但是我想说,千万不要这样做。如果你用cnpm进行下载安装操作,你的日历控件是显示不出自带样式的。为什么?因为cnpm下载的资源经常会缺失部分内容,如果你做的东西只是自己用或者还没进入生产模式,那没问题。但是如果你的项目一旦进入生产,请务必先把你的node_module删除干净,然后用npm install安装一遍,不要嫌慢或者麻...
落青 发布于 2周前 阅读 115 评论 5
GaiSama

微信开发实践(二):使用JS-SDK实现自定义分享 Ⅱ

上一篇(https://my.oschina.net/codingDog/blog/1516659),我们完成了微信测试号的配置,今天来使用微信JS-SDK完成自定义分享的功能。
GaiSama 发布于 2周前 阅读 91 点赞 1

文件上传JQuery插件 ajaxFileUpload 不严谨的bug

我在工作中使用ajaxFileUpload这个JQuery插件之后感觉很好用,当时只做了单文件上传,但是没有做多文件上传,现在根据需求的需要,现在需要多文件上传,才发现了这个不严谨的小bug (小广告:利用空闲时间我的 ‘阅奏折’小程序正在加紧研发中)
andotorg 发布于 2周前 阅读 724 评论 8
GaiSama

前端对图片进行本地压缩并上传实践

正好项目碰到这个需求,花了一下午基本搞定,记录一下实现步骤以及一些需要注意的坑,本实例后端使用node express,Multer作为处理multipart/form-data的中间件,完整代码:https://gitee.com/gaisama/codes/xwus19y6crjnm0vf25dza10
GaiSama 发布于 3周前 阅读 1086 评论 10 点赞 9

JavaScript 解析JSON 数据

JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。 JSON的规则很简单:** 对象是一个无序的“‘名称/值’对”集合**。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。具体细节参考http://www.json.org/json-zh.html 举个简单的例子: js 代码 ``` js function showJSON() { var user = { "username":"andy", "age":20, "info": { "tel": "123456", "cellphone": "98765"}, "address": [ {"city":"beijing","postcode":"222333"}, {"city":"newyork","postcode":"555666"} ] } alert(user.username); alert(user.age); alert(user.info.cellphone); alert(user.address[0].city); alert(user.address[0].postcode); } ``` 这表示一个user对象,拥有username, age, info, address 等属性。 同样也可以用JSON来简单的修改数据,修改上面的例子 js 代码: ``` js function showJSON() { var user = { "username":"andy", "age":20, "info": { "tel": "1234...
东风125 发布于 3天前 阅读 9

快速了解人工智能结晶之语音转换文字

科技解放生产力,人工智能的应用如今是大热,那么今天就来给各位介绍一下IBM在这方面的一个小的尝试,语音转换文字。咱们来看一看相较于传统的转换,结合Watson的IBM是如何做到让识别率飙升的。
IBM Bluemix

Vue.js学习笔记(1): 数据的双向绑定(ES6写法)

HelloWorld 动手写第一个Vue.js 应用 app.html: <div id="app"> <div>{{message}}</div> <input type="text" v-model="message"> </div> app.js: new Vue({ el:'#app', data: { message:'hello vue.js.' } }); 1. 声明式渲染 Vue允许你采用简洁的模板语法来声明式将数据渲染进Dom。 此时app.message会进行双向绑定,修改的同时也会改变Dom渲染。称为响应式元素。 除了声明式渲染,还可以使用v-bind指令来绑定数据。v-bind属性称为指令,指令带有前缀v-。以表示它是Vue.js提供的特殊属性 2. 创建Vue实例 在使用Vue.js之前,我们需要先像这样实例化一个Vue对象: new Vue({ el:'#app' }); 3. 双向数据绑定 就像HelloWorld展示的那样,app.html是view层,app.js是model层,通过vue.js(使用v-model这个指令)完成中间的底层逻辑,实现绑定的效果。改变其中的任何一层,另外一层都会改变 3. 插值 相信你也注意到了,通过{{value}}的形式就能取到value的值,并与value进行绑定。HelloWorld中改变input中的值时相应也改变了app.js中的message,从而{{message}}也得到改变。上面的代码改为这样: {{*message}} 则message不会随着数据的改变而更...
BrillantZhao 发布于 22小时前 阅读 6

webstorm激活

webstorm激活   //2017 03 27 http://idea.imsxm.com/ -------------------------------------------------------------------------------------------------------------   WebStorm 最新版本激活方式: 今天下载最新版本的WebStorm,发现原来的通过license server激活的方式,网上的已经失效。 找到一种最新的激活码,今天试了下,是有效的。记录下。 注册时,在打开的License Activation窗口中选择“activation code”,在输入框输入下面的注册码 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IkZvciBlZHVjYXRpb25hbCB1c2Ugb25seSIsImNoZWNrQ29uY3VycmVudFVzZSI6ZmFsc2UsInByb2R1Y3RzIjpbeyJjb2RlIjoiSUkiLCJwYWlkVXBUbyI6IjIwMTctMDItMjUifSx7ImNvZGUiOiJBQyIsInBhaWRVcFRvIjoiMjAxNy0wMi0yNSJ9LHsiY29kZSI6IkRQTiIsInBhaWRVcFRvIjoiMjAxNy0wMi0yNSJ9LHsiY29kZSI6IlBTIiwicGFpZFVwVG8iOiIyMDE3LTAyLTI1In0seyJjb2RlIjoiRE0iLCJwYWlkVXBUbyI6IjIwMTctMDItMjUifSx7ImNvZGUiOiJDTCIsInBhaWRVcFRvIjoiMjAxNy0wMi0yNSJ9LHsiY29kZSI6IlJTMCIsInBhaWRVc...
yizhichao 发布于 3个月前 阅读 24

基于Bmob开发问答小程序Demo实录[视频]

这不是真正意义上的教程,它是全程开发的实录。
秀杰 发布于 3个月前 阅读 96 评论 1

dva 之 Mock —— 实现前后端分离开发

> 在项目开发中,经常会出现这么一种情况:前端开发人员负责开发页面功能,后端开发人员负责提供数据接口,倘若后端开发人员提供接口的速度比前端开发人员开发页面功能的速度要慢的话,势必会造成不必要的工期滞缓。Mock 的出现弥补了这个缺陷,Mock 主要有以下两个特色: > - 提供了丰富的造数据能力,造假技术一流,能满足绝大多数的要求; > - 提供虚拟的 http 请求接口,用起来就像是真的是请求后端开发人员提供的数据接口一样。 ## 一、实例 - 创建项目,安装依赖包 安装 jquery 和 mockjs 依赖包,jquery 包用于发送 ajax 请求 ``` $ npm install jquery mockjs ``` - 新建 index.html 页面,内容如下: ``` 测试 Mock 拦截请求的功能 点击我发送 Ajax 请求 ``` - 打开页面,点击按钮,会看到下面的内容数据会不停变换,具体过程如下: - Mock 在这里模拟了服务端的数据接口; - Ajax 发送一个请求(请求 hello.json 这个地址); - Mock 接收所有 .json (正则表达式:/\.json/)结尾的请求,并将造的假数据返回给 Ajax; - Ajax 的回调函数接收到数据后将数据打印到页面的 DIV 元素中用于展示。 ## 二、Mock 造假数据 > 这部分建议直接去 [Mock Github 文档](https...
dkvirus 发布于 1个月前 阅读 36

echarts使用心得:图表一柱状图

###echarts使用心得:图表一柱状图 ####柱状图堆叠 series[i].stack设置成相同的值,那么这些数据会堆叠成一列 ####鼠标移动到坐标轴的一列时触发悬浮窗 tooltip->trigger:'axis' tooltip->axisPointer->type:'shadow'(触发样式为一块半透明阴影) ####在'柱'上显示数据值 series->label->normal->show:true ####调整x/y坐标轴刻度颜色 x/yAxis->axisTick->lineStyle->color ####调整x/y坐标轴线颜色 x/yx/yAxis->axisLine->lineStyle->color ####调整x/y坐标轴刻度标签颜色 x/yx/yAxis->axisLabel->color ####设置多个图例组件 legend->data:[...]
静默行 发布于 14小时前 阅读 3

ES6学习(一)

let 和 const 命令
redyang 发布于 4小时前 阅读 3

django页面中javascript解析python字典

python的字典通过模板传入之后,不能整个作为参数被javascript的函数使用,因为python2 的整数后有个L,字符串前有个u。 解决方法是使用自定义的django模板过滤器。 步骤: 1. 定义过滤器 在django注册过的某个app下, 建立templatetags目录,此目录应和models, views, templates 等同级。此目录下新建custom_filter.py, 内容如下: from django.template import Library from django.utils.safestring import SafeString import json register = Library() @register.filter("escapedict") def escapedict(data): if not isinstance(data, dict): return data for key in data: if isinstance(data[key], int) and not isinstance(data[key], bool): data[key] = int(SafeString(data[key])) else: data[key] = SafeString(data[key]) return json.dumps(data)   然后在页面中这样使用: 加载过滤器 <html> {% load custom_filter %} ... ... </html>   js函数的调用: onclick="jsfunc('{{data|escapedict}}')" js函数的定义 function showd...
好铁 发布于 2个月前 阅读 15

Html的input标签type属性为number,能输入e的问题

input加上一下代码 onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
aijiaoer 发布于 1个月前 阅读 16

vue打包后图片路径错误

## 错误原因 + vue-cli中将图片资源路径放到了src的assets中,引入图片路径写的相对路径,打包发生错误 + 首先,出错点在url-loader上面。 // url-loader配置 // build/webpck.base.conf.js { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } + 这里解释一下上面这段url-loader配置,test是正则匹配规则,匹配项目中所有的以正则规则结尾的格式的文件,直白点就是所以的图片(png,jpg,jpeg,gif,svg)。然后用url-loader进行处理。处理也有个规则如下,当不大于10000B的文件进行base64转码,就是将图片转为base64的格式。如果超过10KB的图片就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]’) 这个目录下(从build/utils.js和config/index.js可以知道这个路径就是static/img目录,并且图片名是进行hash之后的值,根目录下面没有static目录,所以会创建一个static目录,至于为什么最后没有看见这个目录后续再说),当我们创建了一个这样的目录之后,所有的图片访问路径就成了对应的static/img/'图片名'。到这里就可以确定,如果小于10KB的图片转为base64,大于1...
YXMBetter 发布于 1周前 阅读 10

vue.js2.0实战(5):vuex学习实践

上次学习了vue-router的使用,让我能够在各个页面间切换,将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。 注:本文只是个人对vuex学习的一些理解,要深刻掌握还需要认真查阅官方文档。 一、基本介绍 github: https://github.com/vuejs/vuex  官网:https://vuex.vuejs.org/zh-cn/index.html Vuex 是一个专为 Vue.js 的SPA单页组件化应用程序开发的状态管理模式插件。 由于Vue SPA应用的模块化,每个组件都有它各自的数据(state)、界面(view)、和方法(actions)。这些数据、界面和方法分布在各个组件中,当项目内容变得越来越多时,每个组件中的状态会变得很难管理。这是vuex就派上用场啦~下面我们看一个简单的vuex例子。 Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式。 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 这就是 Vuex 背后的基本思想,借鉴了 Flux、 Redux、和 The Elm Architecture。 与其他模式不同的是,Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。 在这里有一个需要注意的内容,就是关于 Vu...
BrillantZhao 发布于 7天前 阅读 5

react学习笔记12:组件之间交互

react
透笔度 发布于 2小时前 阅读 2

VueScroller滚动到指定的位置

vueScroller滚动到页面指定位置。 <div class="scheduling-scroll"> <scroller ref="my_scroller" heigth="100%"> <section v-for="(item,index) in scheduledDate" :key="index"> <div v-if="!getNowTime(item.hrScheduleDate)"> <p>{{item.hrScheduleDate | getDay}}</p> <p>{{item.hrScheduleDate | getWeek}}</p> </div> <div id="toDay" style="position:relative" v-if="getNowTime(item.hrScheduleDate)"> <p></p> <p style="margin-top: 16px; color: red; font-size: 30px;">{{item.hrScheduleDate | getDay}}</p> </div> <div> <p v-for="items in item.detailList"> <span>{{items.hrScheduleType}}</span> <span>{{items.hrScheduleStartTime}}-</span> <span>{{items.hrScheduleEndTime}}</span> </p> </div> </section> </scroller> </div> setTimeout(() => { if (document.getElementById('toDay')) { let container = document.getElementById('toDay').offsetTop; let x = this.$refs.my_scroller.scrollTo...
BigGod 发布于 2小时前 阅读 2

Flux学习笔记1:为何我们需要Flux

Flux
透笔度 发布于 2小时前 阅读 2

nodejs 中http请求头,响应头常见参数

-------------------- 1.request常见的属性 ----------------------- ```html var http=require("http"); var server=http.createServer(); //创建服务器 server.on("request",function(req,res){ // request.headers 打印全部请求头信息--对象形式 // request.rawHeaders 全部头信息--数组形式 // request.httpVersion 请求的协议方式 // request.method 请求的方式 // request.url 请求的路径 console.log(req.headers); res.end(); }) server.listen(9090,function(){ console.log("localhost://9090服务器已开启"); }); ``` -------------------- 2.response常见的属性 ----------------------- ```html var http=require("http"); var server=http.createServer(); // 创建服务器 server.on("request",function(req,res){ // res.statusCode=404; //响应码 // res.statusmessage="not found"; //响应消息 // res.setHeader('Content-Type','text/plain;charset=utf-8'); res.writeHead(404,'not found',{ 'Content-Type':'text/palin;charset=utf-8' }); // 1.写内容 res.write("快国庆了,开心!!"); // 2. 每个请求都必须要调用的一个方法 res.end(); // 结束响应(...
不负好时光 发布于 18小时前 阅读 2

Javascript模块化编程:模块的写法

随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂。 网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑。 Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。 但是,Javascript不是一种模块化编程语言,它不支持"类"(class),更遑论"模块"(module)了。(正在制定中的ECMAScript标准第六版,将正式支持"类"和"模块",但还需要很长时间才能投入实用。) Javascript社区做了很多努力,在现有的运行环境中,实现"模块"的效果。本文总结了当前"Javascript模块化编程"的最佳实践,说明如何投入实用。虽然这不是初级教程,但是只要稍稍了解Javascript的基本语法,就能看懂。 一、原始写法 模块就是实现特定功能的一组方法。 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块  function m1(){     //...   }   function m2(){     //...   } 上面的函数m1()和m2(),组成一个模块。使用的时候,直接调用就行了。 这种做法的缺点很明显:...
HenrySun 发布于 1个月前 阅读 21

react-router笔记2:实践使用

react-router
透笔度 发布于 3小时前 阅读 2

python图片转字符画

效果图 环境:需要安装image、pillow 代码如下: #!/usr/bin/env python # coding=utf-8 from PIL import Image import argparse # 命令行输入参数处理 parser = argparse.ArgumentParser() parser.add_argument('file') # 输入文件 parser.add_argument('-o', '--output') # 输出文件 parser.add_argument('--width', type=int, default=110) # 输出字符画宽 parser.add_argument('--height', type=int, default=80) # 输出字符画高 # 获取参数 args = parser.parse_args() IMG = args.file WIDTH = args.width HEIGHT = args.height OUTPUT = args.output # 不是我说,这字符集真心不是一般的丑,看效果图你就知道了,丑到没朋友~ ascii_char = list("@#MBHA&XG893S5h1sri;:-,. ") # 将256灰度映射到70个字符上 def get_char(r, g, b, alpha=256): if alpha == 0: return ' ' length = len(ascii_char) gray = int(0.2126 * r + 0.7152 * g + 0.0722 * b) unit = (256.0 + 1) / length return ascii_char[int(gray / unit)] if __name__ == '__main__': im = Image.open(IMG) im = im.resize((WIDTH, HEIGHT), Imag...
MedivhXu 发布于 3个月前 阅读 31

三招教你div垂直居中

在前端的面试和日常的工作当中,经常会碰到让一个div(或者一块区域)上下左右垂直居中的问题,左右居中是非常简单的,如: margin: 0 auto; 但是,要做到垂直居中的话,很多同学就犯愁了,下面就给大家分享3中垂直居中的方案。   提前先准备好一个div,这里做了个类似弹窗的样子出来,html代码如下:     <style>         .box {             width: 300px;             height: 220px;             box-sizing: border-box;             border: 1px solid #666;             border-radius: 5px;         }         .box .title{             border-bottom: 1px solid #666;             padding: 10px;         }         .box .cont{             padding: 10px;         }     </style>     <div class="box">         <div class="title">标题</div>         <div class="cont">我是内容...</div>     </div> 1)传统定位方式(常用)   .box {     width: 300px;  ...
光明辉煌 发布于 3小时前 阅读 1

angular-NgTemplateOutlet指令

NgTemplateOutlet(结构型)指令可以在模板中创建内嵌视图。 Experimental class NgTemplateOutlet implements OnChanges {     constructor(_viewContainerRef: ViewContainerRef)     ngTemplateOutletContext : Object     ngTemplateOutlet : TemplateRef<any>     ngOutletContext      ngOnChanges(changes: SimpleChanges) }  
前端笔记 发布于 3个月前 阅读 7
编辑部的故事

给 Web 开发人员推荐的文档生成工具

工欲善其事必先利其器,在此给 Web 开发人员推荐几款优秀的开源文档生成工具,希望能对大家有所帮助。 1、JavaScript JSDoc 3 这是一款根据 Javascript 文件中注释信息,生成 JavaScript 应用、库、模块的 API 文档的工具。你可以使用它记录如:命名空间、类、方法、方法参数等。该项目还衍生出了许多模板和其他工具来帮助生成和自定义文档,比如: 模板 jaguarjs-jsdoc DocStrap (example) jsdoc3Template (example) minami docdash (example) tui-jsdoc-template (example) 构建工具 JSDoc Grunt plugin JSDoc Gulp plugin 其它工具 jsdoc-to-markdown Integrating GitBook with JSDoc ESDoc 一个 JavaScript 文档生成器,按照规范编写代码注释,即可生成友好的 JavaScript 代码文档。它可以将测试代码和用户手册一并集成到文档中,支持通过插件添加自定义功能。 Demo 2、API apiDoc 这是一款 RESTful Web API 文档生成工具,一个在注释里边编写 API 文档的小工具。有了它,只需在写源码的时候顺手写上一些简单的注释,就可以生成出漂亮的文档了。项目支持大部分主流语言,注释维护起来也比较方便,不需要额外再维护一份文档。 Demo GraphQL Voyager 这是一款将任意 ...
编辑部的故事 发布于 1周前 阅读 4916 评论 4 点赞 11 打赏 1

当web前端架构方案遇上《金瓶梅》?!

![图片描述][1] 首先声明,我**不是标题党**,你可以说我是老司机,但是这次绝对不会把你带沟里去,关于技术类的文章千篇一律,估计早就看烦了,不妨细细品味这篇文章,带你认识一个不一样的web前端世界,文章主要结合金瓶梅中的人物属性和web前端架构的模块划分关系,分享一个关于我对web前端架构的一点点别致的看法,如果能耐心的看完,对你构建复杂的web应用一定有所收获,当然,有讲的不好的地方,也希望各路大神多多指点,废话不多说,上正文。 大家知道《金瓶梅》中几个重要角色:`武大郎`,`潘金莲`,`西门庆`,`武松`,`王婆`。在故事情节中,各种角色扮演起到不同的作用,互相关联,将故事情节紧密联系在一起,这样的情节构造堪称经典,已然成为经典,而在构建复杂的web前端应用时候,也需要一些模块互相作用,构造一个完整的系统。 **潘金莲(插件)**:我觉得这个比喻再合适不过了,如果这里你只看到公用性,那你就想简单了,潘金莲除了公用性,还有美,没错,插件不仅要有公用性,还要美。这里的美是指代码的简洁,轻量,高维护,对于一个复杂的项目来说,往往会对插件有些特殊的要求,在使用插件的时候,你必须对插件有较深入的了解,确保你能驾驭她,当然在必...
馒头 发布于 4天前 阅读 312 评论 2 点赞 1

从Vue.js源码看异步更新DOM策略及nextTick

## 写在前面 因为对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),希望可以对其他想学习Vue源码的小伙伴有所帮助。 可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。 ## 操作DOM 在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: ```html {{test}} tet ``` ```javascript export default { data () { return { test: 'begin' }; }, methods () { handleClick () { this.test = 'end'; console.log(this.$refs.test.innerText);//打印“begin” } } } ``` 打印的结果是begin,为什么我们明明已经将test设置成了“end”,获取真实DOM节点的innerText却没有得到我们预期中的“end”,而是得到之前的值“begin”呢? ## Watcher队列 带着疑问,我们找到了Vue.js源码的Watch...
染陌同学 发布于 5天前 阅读 283 评论 1 点赞 2

《Node.js在CLI下的工程化体系实践》成都OSC源创会分享总结

背景: 随着开发团队规模不断发展壮大,在人员增加的同时也带来了协作成本的增加,业务项目越来越多,类型也各不相同。常见的类型有组件类、活动类、基于React+redux的业务项目、RN项目、Node.js项目等等。如果想要对每个项目进行一些规范的约束比如Git提交规范、Javascript规范简直难于登天。所有的这些,只因为缺少一个好用的工程化工具。从项目创建、开发、构建、代码规范检查到最终项目上线,通过CLI可以提升效率,同时保障开发规范的实施。
cpselvis 发布于 4天前 阅读 121

VirtualDOM与diff(Vue实现)

## 写在前面 因为对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),希望可以对其他想学习Vue源码的小伙伴有所帮助。 可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。 ## VNode 在刀耕火种的年代,我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。 那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树,在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢?于是虚拟DOM出现了,它是真实DOM的一层抽象,用属性描述真实DOM的各个特性。当它发生变化的时候,就会去修改视图。 但是这样的JavaScript操作DOM进行重绘整个视图层是相当消耗性能的,我们是不是可以每次只更新它的修改呢?所以Vue.js将DOM抽象成一个以JavaScript对象为节点的虚拟...
染陌同学 发布于 2周前 阅读 1506 点赞 4

彻底理解了Object这个属性

1.实例化Object对象 实例化Object对象的方式有两种:使用Object构造器和使用对象的字面量。例如: var person1 = { name: '李四' }; var person2 = new Object(); person2.name = '王二'; 2.为实列添加属性 我们可以随时随地为对象添加属性,也可以随时修改属性的值。 复制代码 var person1 = { name: '小明' }; var person2 = new Object(); person2.name = '小红'; //给对象添加属性 person1.age = 23; person2.age = 25; //修改属性的值 person1.name = '张三'; console.log(person1.name); //'张三' person2.name = '李四'; console.log(person2.name); //'李四' 3.删除对象中的属性 var person1 = { name: '张三' }; person1.name = null; console.log(person1.name); //'张三' delete person1.name; console.log(person1.name); //'undefined' 4.检查属性 由于对象的属性可以被随时随地被修改或删除,因此有时候我们需要检查对象的某个属性是否存在。使用下面的方式检查是不可靠的: var person1 = { name: '张三' }; person1.name = '';//或者null/undefined if (person1.name) { console.log('存在'); } ...
爱敲代码的程序员 发布于 1周前 阅读 596 评论 4 点赞 6
笔阁

简单介绍一下vue2.0

Vue是用于构建用户界面的渐进框架。作者尤雨熙特别强调它与其他的框架不同,Vue是渐进式的框架,可以逐步采用,不必一下就通过框架去重构项目。 另外Vue的核心库只专注于视图层,这样就更容易与其他库或现有项目进行集成,也更灵活。
笔阁 发布于 1周前 阅读 414 评论 1

如何使用Flexbox和CSS Grid,实现高效布局

CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想。幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来。   使用 Flexbox 可以使元素对齐变得容易,因此 Flexbox 已经被广泛使用了。 同时,CSS Grid 布局也为网页设计行业带来了很大的便利。虽然 CSS Grid 布局未被广泛采用,但是浏览器逐渐开始增加对 CSS Grid 布局的支持。   虽然 Flexbox 和 CSS Grid 可以完成类似的布局,但是本次,我们学习的是如何组合使用这两个工具,而不是只选择其中的一个。在不久的将来,当 CSS Grid 布局获得完整的浏览器支持时,设计人员就能够利用每个 CSS 组合的优势,来创建最有效和最有趣的布局设计。   测试 Flexbox 和 CSS Grid 的基本布局 我们从一个很简单且熟悉的布局类型开始,包括标题,侧边栏,主要内容和页脚等部分。通过这样一个简单的布局,来帮助我们快速找到各种元素的布局方法。 下面是需要创建的内容:  要完成这个基本布局, Flexbox 需要完成的主要任务包括以下方面: 创建完整宽度的 header 和 footer 将侧边栏放置在主内容区域左侧 确保侧边栏和主内容区域的大小合适 确保导航...
葡萄城控件技术团队 发布于 1周前 阅读 270 点赞 3

vue组件开发

## 什么是vue组件 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式。 ## 组件使用步骤 ### 1. 定义组件 var myComponent = Vue.extend({ template:" this is my first component" }); ### 2. 注册组件 全局注册组件 Vue.component('myComponent',myComponent) 局部注册组件 var apk = new Vue({ el:"#apk", components:{ "myComponent":myComponent } }) ### 3. 使用组件 ### 4. 上面的定义过程比较繁琐,也可以不用每次都调用Vue.component和Vue.extend方法: // 在一个步骤中扩展与注册 Vue.component('my-component', { template: ' A custom component!' }) // 局部注册也可以这么做 var Parent = Vue.extend({ components: { 'my-component': { template: ' A custom component!' } } }) ## 组件常用方法使用 ### 1. 嵌套组件 组件本身也可以包含组件,下面的parent组件就包含了一个命名为child-component组件,但这个组件只能被parent组件使用: var myComponent = Vue.extend({ template:" this is my first component" }...
wshining 发布于 3周前 阅读 2208 评论 8 点赞 4

在IE环境使用axios,提示“Promise”未定义

  问题: SCRIPT5009: “Promise”未定义  axios.min.js, 行8 字符466 解决方案: 使用polyfill 对外暴露一个Promise,可以参考这个https://github.com/stefanpenner/es6-promise库 在npm环境使用 var Promise = require('es6-promise').Promise; 在浏览器环境 直接引用es6-promise.auto.min.js
楠木楠 发布于 1个月前 阅读 206

webpack 使用笔记

全局方式安装,打包 安装 npm i webpack -g 打包文件 webpack a.js bundle.js //a.js 入口文件 //生成bundle.js   项目的方式打包 生成项目 npm init -y 项目内安装 npm i webpack -D 打包文件 node_modules/.bin/webpack a.js bundle.js 或定义命令 执行命令 npm run pack   通过webpack.config.js文件生成打包文件 执行 npm run pack 即可   模拟真实的项目环境配置 webpack.config.js配置如下   module.exports={ entry:{ home:'./js/home.js', signup:'./js/signup.js', }, output:{ filename:'[name].bundle.js', path:__dirname+'/dist', } } 执行 npm run pack  ,定义了两个入口文件,也相应生成两个dist文件 使用loader加载css等其它资源文件 首先安装css-loader和style-loader npm i css-loader style-loader -D 在webpack.config.js中添加如下模块  代表能够识别.css文件的import 执行 npm run pack 项目所有代码 https://coding.net/u/lilu/p/simple_webpack/git/tree/master...
lilugirl 发布于 2周前 阅读 166 评论 1
编辑部的故事

给 Web 开发人员推荐的开源图形库 —— 动画

现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高,数据可视化、动画交互、2D/3D 等元素已然成为标配。 以下是为 Web 开发者推荐的一些精品开源图形库,旨在专注于最常见的问题和最常用的东西。将针对动画(Animation)、数据可视化(Data Visualization)、2D/3D 分别整理,欢迎保持关注。 给 Web 开发人员推荐的开源图形库 —— 2D/3D 给 Web 开发人员推荐的开源图形库 —— 数据可视化 动画 一、效果(Effects) 1、切换和过渡 Animate.css 一个跨浏览器的 css3 动画库,内置了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)、放大缩小(等多达 60 多种动画效果,几乎包含了所有常见的动画效果。在炫酷的同时,还一直保持着易于使用的特点。 效果预览:点此查看 Magic Animations 一个独特的 CSS3 动画特效包,可以自由地使用在 Web 项目中。包括:Magic Effects、Bling、Static Effects、Static Effects Out、Perspective、Rotate、Slide、Math、Tin、Bomb 等各类效果。 效果预览:点此查看 Effeckt.css 同样是一个包含众多精妙的 CSS3 切换和动画效果库,例如:弹窗、按...
编辑部的故事 发布于 3个月前 阅读 8166 评论 9 点赞 37
编辑部的故事

给 Web 开发人员推荐的测试工具

用户对于现代 Web 应用除了美观要求之外,对产品体验度也有较高的要求。在推荐过几期开源图形库和通用独立 UI 组件后,觉着是时候推荐一些测试工具了。这应该也是该系列的最后一篇,感谢大家的支持。 给 Web 开发人员推荐的通用独立 UI 组件(二) 给 Web 开发人员推荐的通用独立 UI 组件(一) 给 Web 开发人员推荐的开源图形库 —— 2D/3D 给 Web 开发人员推荐的开源图形库 —— 动画 给 Web 开发人员推荐的开源图形库 —— 数据可视化 一、单元测试/测试运行器 1、Jest 知名的 JavaScript 单元测试工具,由 Facebook 开源,开箱即用。它在最基础层面被设计用于快速、简单地编写地道的 JavaScript 测试,能自动模拟 require() 返回的 CommonJS 模块,并提供了包括内置的测试环境 Dom API 支持、合理的默认值、预处理代码和默认执行并行测试在内的特性。通过在并行进程中同时运行测试,让测试更快地结束。 2、AVA 号称“未来的测试运行器”,利用 JavaScript 在 Node.js 里使得 IO 可以并行的优点,让你的测试可以并发执行,这对于 IO 繁重的测试特别有用。另外,测试文件可以在不同的进程里并行运行,让每一个测试文件可以获得更好的性能和独立的环境。测试并发执行强...
编辑部的故事 发布于 1个月前 阅读 6363 评论 4 点赞 7

ajax请求二进制流进行处理(ajax异步下载文件)

ajax请求一个二进制流(文件),转换为Blob进行处理或者下载保存文件
张豪飞 发布于 1个月前 阅读 1397 评论 11

Sublime Text3—自定义代码片段(Code Snippets)

摘要 程序员总是会不断的重复写一些简单的代码片段,为了提高编码效率,我们可以把经常用到的代码保存起来再调用。 平时用sublime安装各种插件,使用Tab键快速补全,也是snippets(可译为代码片段)的一种。 Sublime编辑器还提供了自定义代码片段的功能(当然不止Sublime有此功能),其官方文档中定义如下: Whether you are coding or writing the next vampire best-seller, you’re likely to need certain short fragments of text again and again. Use snippets to save yourself tedious typing. Snippets are smart templates that will insert text for you and adapt it to their context. 创建snippets 1.新建和保存 菜单栏中依次选择Tools | Developer | New Snippet...就会新建一个扩展名为.sublime-snippet的XML语法的文档,注意后缀是识别snippets的关键。 代码片段可以任意存储在packages文件夹下,默认会保存在Packages\User文件夹里,为了方便管理和使用建议再新建个文件夹例如snippets,则路径为Packages\User\snippets。 默认结构如下: <snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <!-- Optional: Set ...
爱敲代码的程序员 发布于 1周前 阅读 190 点赞 2
编辑部的故事

给 Web 开发人员推荐的通用独立 UI 组件(二)

现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高。在推荐完图形库之后,再来推荐一些精品的独立 UI 组件。这些组件可组合在一起,形成美观而交互强大的 Web UI 。 给 Web 开发人员推荐的通用独立 UI 组件(一) 给 Web 开发人员推荐的开源图形库 —— 2D/3D 给 Web 开发人员推荐的开源图形库 —— 动画 给 Web 开发人员推荐的开源图形库 —— 数据可视化 上期已针对布局(Layout)、Icon(图标)、Progress(进度)、Button(按钮)、Picker(选择器)进行推荐,这期将针对 Overlay(弹出层/弹窗)、Input(输入)、Content(内容/目录)、Editor(编辑器)、Widget(组件/挂件)等继续做一些推荐整理。 一、弹出层/弹窗 1、vex 一个现代化的对话库,高度可配置,可随意定制。vex 很小(压缩后仅 5.6kb ),有一个清晰和简单的 API ,无外部依赖,完全平面风格,提供多种样式。支持同时打开多个对话框,可选单独或全部关闭它们。更适用于移动端。 Demo 2、Notie 一个简单干净的 javascript 通知、输入和选择套件,无外部依赖。 能轻松定制,可更改颜色以符合你的风格和品牌,字体大小会根据屏幕尺寸自动调整。 Demo 3、SweetAlert2 一个漂亮、响应式...
编辑部的故事 发布于 2个月前 阅读 5102 评论 8 点赞 12
编辑部的故事

给 Web 开发人员推荐的通用独立 UI 组件(一)

现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高。在推荐完图形库之后,再来推荐一些精品的独立 UI 组件。这些组件可组合在一起,形成美观而交互强大的 Web UI 。 给 Web 开发人员推荐的开源图形库 —— 2D/3D 给 Web 开发人员推荐的开源图形库 —— 动画 给 Web 开发人员推荐的开源图形库 —— 数据可视化 下面将针对 Layout(布局)、Icon(图标)、Progress(进度)、Button(按钮)、Picker(选择器)、Accordion(手风琴、抽屉)、Input(输入)、Overlay(弹出层)、Content(内容/目录)、Editor(编辑)、Widget(挂件)等分别做一些推荐整理。由于篇幅有限,将分两期发布,欢迎保持关注。 一、布局 1、Split.js 一个轻量级的 JavaScript 工具,用于创建可调整的分割视图或者窗格,gzip 大小仅 2 KB。视图可以水平或者垂直分割,没有附加的开销和窗口,使用纯 CSS 进行调整。同时,还保证了与 IE9 和 IE8 ,以及 Firefox / Chrome / Safari / Opera 等主流浏览器的兼容性。 Demo 点此查看 2、Bricks.js 一个快速的布局堆砌器,不需要 HTML 标记或 CSS 样式表即可完成布局。功能强大,配置文件可读。 Demo 点此查看 3、masonry 一个老牌布局...
编辑部的故事 发布于 2个月前 阅读 6338 评论 11 点赞 26

前端性能优化总结

从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量,所有前端性能优化很重要。 前端性能优化分为如下几个方面: 一、代码部署: 1、代码的压缩与合并 2、图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息。 3、使用内容分发网络 CDN 4、为文件设置Last-Modified、Expires和Etag 5、使用GZIP压缩传送 6、权衡DNS查找次数(使用不同域名会增加DNS查找) 7、避免不必要的重定向(加"/") 二、编码 html: 1、使用结构清晰,简单,语义化标签 2、避免空的src和href 3、不要在HTML中缩放图片 css: 1、精简css选择器 2、把CSS放到顶部 3、避免@import方式引入样式 4、css中使用base64图片数据取代图片文件,减少请求数,在线转base64网站:http://tool.css-js.com/base64.html 5、使用css动画来取代javascript动画 6、使用字体图标,图标库网站:http://fontawesome.io/icons/,在线制作网站:www.iconfont.cn 7、使用css sprite 8、使用svg图形 9、避免使用CSS表达式 a {star : expression(onfocus=this....
楠木楠 发布于 2个月前 阅读 841

我从Angular 2转向Vue.js, 也没有选择React

、 **译者按:** 通过使用Angular的经历,作者已经完全转为Vue粉了!我们Fundebug目前还是用AngularJS 1,坦白说,学习曲线蛮陡的。 - 原文: [Why we moved from Angular 2 to Vue.js (and why we didn’t choose React)](https://medium.com/reverdev/why-we-moved-from-angular-2-to-vue-js-and-why-we-didnt-choose-react-ef807d9f4163) - 译者: [Fundebug](https://fundebug.com/) **为了保证可读性,本文采用意译而非直译,并且对源代码进行了大量修改。另外,本文版权归原作者所有,翻译仅用于学习。** ![](https://static.oschina.net/uploads/img/201709/20132249_wE59.jpg "在这里输入图片标题") 在Rever, 我们刚刚发布了使用Vue.js完全重写的网站。经过16周紧张的开发,总共commit了641次。现在回过头来,感慨当时对框架的选择是正确的。 在8个月之前,我们还在用Angular 2做网站开发。更加精确地一点,我们用的是Angular 2 beta 9。坦白的说,这个产品当时是由一家外包公司开发,而我们一直对它的方方面面都不满意。不管是UX/UI,还是架构上,甚至Angular 2本身。 在我继续抱怨之前,我要承认Angular 2 beta 9和Angular 2.0是完全不同的产品,但这也是Angular的一...
Fundebug 发布于 1周前 阅读 288

2017年前端开发工具趋势

本文来源于全球的5254份前端工具使用的调查报告,期望通过本文能够帮助大家更好的了解最新的前端开发工具趋势。 受访者组成 83%的受访者具有两年以上的前端技术经验,只有5%的受访者不到一年:   CSS 开发者中有63%为高级开发者和专家:   尽管CSS被认为只是属性-参数值对的简单集合,但是CSS却是很难掌握的。CSS3引入了许多的新特性,要想完全的掌握CSS变得越来越困难。   CSS预处理器 超过63%的开发者使用Sass,这也使得Sass成为无可争议的预处理首选者。8%的开发者使用PostCSS,通常情况下,PostCSS都是和AutoPrefixer等预处理器配合使用的。 仅有14%的开发者不使用任何预处理,他们更喜欢使用原始的CSS代码。尽管这种方式开发效率较慢,但是却是刚开始学习前端开发的最容易和最好的方式。如果86%的开发者使用预处理器,则平均一个网站需要进行7.2个CSS文件的请求。 仅有10%的受访者尝试过Less,19%的受访者尝试过Stylus,80%的受访者从未听闻Rework。   CSS的命名方式 46%的开发者在编码时会使用一种命名方式,对于CSS高级开发者和专家来说,这个比例上升到了57%。 最受欢迎的命名方式是BEM,占到总数的40%。接下来是CSS Modules(16%)、OOCSS(15%)和SMACS...
葡萄城控件技术团队 发布于 1个月前 阅读 2085 评论 7 点赞 3

nginx做反向代理

## 配置被代理的服务器 配置两个服务器,同时分别取名为ms-cc和mine ``` http{ upstream ms-cc { server 10.74.148.169:28001; #server 10.43.33.38:28001; } upstream mine { server 10.74.65.21:9595; #配置两个可以访问的地址 } } ``` ## 设置转发规则 ``` http{ server { listen 80; server_name localhost; location / { if ($uri ~ ^/aaa/bbb/) { rewrite ^/aaa/bbb/(.*)$ /$1; proxy_pass http://mine; #一部分使用http的协议转发 break; } proxy_pass https://ms-cc; #一部分使用https的协议进行转发 break; } } } ``` ## 访问 注意:做完以上的设置必须要重启nginx服务器 使用 http://localhost:80/ 即可访问,如果 http://localhost:80/aaa/bbb/ 开头的请求就会自然而然的转发到mine的服务器上,其他的则将由ms-cc进行处理...
_Rui_ 发布于 39分钟前

Flux学习笔记1:为何我们需要Flux

Flux
透笔度 发布于 2小时前 阅读 2

快速了解人工智能结晶之语音转换文字

科技解放生产力,人工智能的应用如今是大热,那么今天就来给各位介绍一下IBM在这方面的一个小的尝试,语音转换文字。咱们来看一看相较于传统的转换,结合Watson的IBM是如何做到让识别率飙升的。
IBM Bluemix

VueScroller滚动到指定的位置

vueScroller滚动到页面指定位置。 <div class="scheduling-scroll"> <scroller ref="my_scroller" heigth="100%"> <section v-for="(item,index) in scheduledDate" :key="index"> <div v-if="!getNowTime(item.hrScheduleDate)"> <p>{{item.hrScheduleDate | getDay}}</p> <p>{{item.hrScheduleDate | getWeek}}</p> </div> <div id="toDay" style="position:relative" v-if="getNowTime(item.hrScheduleDate)"> <p></p> <p style="margin-top: 16px; color: red; font-size: 30px;">{{item.hrScheduleDate | getDay}}</p> </div> <div> <p v-for="items in item.detailList"> <span>{{items.hrScheduleType}}</span> <span>{{items.hrScheduleStartTime}}-</span> <span>{{items.hrScheduleEndTime}}</span> </p> </div> </section> </scroller> </div> setTimeout(() => { if (document.getElementById('toDay')) { let container = document.getElementById('toDay').offsetTop; let x = this.$refs.my_scroller.scrollTo...
BigGod 发布于 2小时前 阅读 2

react学习笔记12:组件之间交互

react
透笔度 发布于 2小时前 阅读 2

ES6学习(二)

变量的解构赋值
redyang 发布于 3小时前 阅读 1

百度编辑器自定义工具栏

如何自定义工具栏: 方法一:在实例化编辑器的时候红色文字部分便是你所需要的 toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','bold','test']], eg. <script type="text/Javascript"> var editor = UE.getEditor('container',{ //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个 toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','bold','test']], //focus时自动清空初始化时的内容 autoClearinitialContent:true, //关闭字数统计 wordCount:false, //关闭elementPath elementPathEnabled:false, //默认的编辑区域高度 initialFrameHeight:300 //更多其他参数,请参考ueditor.config.js中的配置项 }); </script> 方法二: 直接修改ueditor.config.js配置文件  找到:红色框中的内容并注释掉重新选中自己需要的 第二步:修改成你所需要的比如 var ues = UE.getEditor('parameter',{ textarea:'parameter', toolbars:[['FullScreen', 'Source','|','forecolor', //字体颜色 ...
小2小白 发布于 3小时前

三招教你div垂直居中

在前端的面试和日常的工作当中,经常会碰到让一个div(或者一块区域)上下左右垂直居中的问题,左右居中是非常简单的,如: margin: 0 auto; 但是,要做到垂直居中的话,很多同学就犯愁了,下面就给大家分享3中垂直居中的方案。   提前先准备好一个div,这里做了个类似弹窗的样子出来,html代码如下:     <style>         .box {             width: 300px;             height: 220px;             box-sizing: border-box;             border: 1px solid #666;             border-radius: 5px;         }         .box .title{             border-bottom: 1px solid #666;             padding: 10px;         }         .box .cont{             padding: 10px;         }     </style>     <div class="box">         <div class="title">标题</div>         <div class="cont">我是内容...</div>     </div> 1)传统定位方式(常用)   .box {     width: 300px;  ...
光明辉煌 发布于 3小时前 阅读 1

注意了!JS中name和top坑

学习前端的同学以及后端同学,都会接触到JavaScript这门语言,今天就跟大家聊一聊在写JS代码中,经常遇到的一些坑。最经典也最常见的就是name和top这两个坑!很多做开发的同学,都遇到过这个问题。
光明辉煌 发布于 3小时前 阅读 1

react-router笔记2:实践使用

react-router
透笔度 发布于 3小时前 阅读 2

ES6学习(一)

let 和 const 命令
redyang 发布于 4小时前 阅读 3

echarts使用心得:图表一柱状图

###echarts使用心得:图表一柱状图 ####柱状图堆叠 series[i].stack设置成相同的值,那么这些数据会堆叠成一列 ####鼠标移动到坐标轴的一列时触发悬浮窗 tooltip->trigger:'axis' tooltip->axisPointer->type:'shadow'(触发样式为一块半透明阴影) ####在'柱'上显示数据值 series->label->normal->show:true ####调整x/y坐标轴刻度颜色 x/yAxis->axisTick->lineStyle->color ####调整x/y坐标轴线颜色 x/yx/yAxis->axisLine->lineStyle->color ####调整x/y坐标轴刻度标签颜色 x/yx/yAxis->axisLabel->color ####设置多个图例组件 legend->data:[...]
静默行 发布于 14小时前 阅读 3

微信背景音乐自动播放解决方案(转)

<audio src="#" id="Jaudio" class="media-audio" autoplay preload loop="loop"></audio> function audioAutoPlay(id){ var audio = document.getElementById(id), play = function(){ audio.play(); document.removeEventListener("touchstart",play, false); }; audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { play(); }, false); document.addEventListener('YixinJSBridgeReady', function() { play(); }, false); document.addEventListener("touchstart",play, false); } audioAutoPlay('Jaudio'); 注意要分别引入不同环境的js。...
mymillet 发布于 15小时前 阅读 7

chrome 控制台换行不执行命令快捷键

**_shift+Enter_**
json_712 发布于 15小时前 阅读 2

vs code

# 快捷键 - ctrl+enter 在下面加一行 - ctrl+d 删除一行 - ctrl+p搜索文件 :加行号,@显示出所有的方法和符号,@:分类显示出符号和方法 - CTRL+[代码缩进 - alt+上下,移动一行 - ctrl+k ctrl+级别:对代码进行自动折叠 - alt+leftArrow :向前 - alt+shift+rightArrow:扩大选取 - ctrl+shift+o:等同于ctrl+p 后@ # 自定义快捷键 ``` // ctrl+d 删除一行 { "key": "ctrl+d", "command": "editor.action.deleteLines", "when": "editorTextFocus" }, // ctrl+shift+/多行注释 { "key":"ctrl+shift+/", "command": "editor.action.blockComment", "when": "editorTextFocus" }, ``` 插件: - TODO Parser:项目中添加todo标签方便跟踪 - Todo+ :这个可以作为一个日常的记事本来使用 - Angular Language Service...
_Rui_ 发布于 17小时前 阅读 6

nodejs 中http请求头,响应头

-------------------- 1.request常见的属性 ----------------------- ```html var http=require("http"); var server=http.createServer(); //创建服务器 server.on("request",function(req,res){ // request.headers 打印全部请求头信息--对象形式 // request.rawHeaders 全部头信息--数组形式 // request.httpVersion 请求的协议方式 // request.method 请求的方式 // request.url 请求的路径 console.log(req.headers); res.end(); }) server.listen(9090,function(){ console.log("localhost://9090服务器已开启"); }); ``` -------------------- 2.response常见的属性 ----------------------- ```html var http=require("http"); var server=http.createServer(); // 创建服务器 server.on("request",function(req,res){ // res.statusCode=404; //响应码 // res.statusmessage="not found"; //响应消息 // res.setHeader('Content-Type','text/plain;charset=utf-8'); res.writeHead(404,'not found',{ 'Content-Type':'text/palin;charset=utf-8' }); // 1.写内容 res.write("快国庆了,开心!!"); // 2. 每个请求都必须要调用的一个方法 res.end(); // 结束响应(...
不负好时光 发布于 18小时前 阅读 5

nodejs 中http请求头,响应头常见参数

-------------------- 1.request常见的属性 ----------------------- ```html var http=require("http"); var server=http.createServer(); //创建服务器 server.on("request",function(req,res){ // request.headers 打印全部请求头信息--对象形式 // request.rawHeaders 全部头信息--数组形式 // request.httpVersion 请求的协议方式 // request.method 请求的方式 // request.url 请求的路径 console.log(req.headers); res.end(); }) server.listen(9090,function(){ console.log("localhost://9090服务器已开启"); }); ``` -------------------- 2.response常见的属性 ----------------------- ```html var http=require("http"); var server=http.createServer(); // 创建服务器 server.on("request",function(req,res){ // res.statusCode=404; //响应码 // res.statusmessage="not found"; //响应消息 // res.setHeader('Content-Type','text/plain;charset=utf-8'); res.writeHead(404,'not found',{ 'Content-Type':'text/palin;charset=utf-8' }); // 1.写内容 res.write("快国庆了,开心!!"); // 2. 每个请求都必须要调用的一个方法 res.end(); // 结束响应(...
不负好时光 发布于 18小时前 阅读 2

vue.js2.0实战:开始之前

开始之前,我们先了解一些关于Vue.js的一些知识点。关于Vue.js的知识,可以去官网查看:https://cn.vuejs.org/ 这里列出来的知识点可能对于Vue.js不太了解的同学看的不太明白,没关系,这里制作一个大概了解,详细内容后面会有介绍,你也可以看完后面的内容之后,再来回顾本篇文章。 一. 模板语法 Vue 提供了一堆数据绑定语法。 {{ text }} 文本插值 <div v-html="html"></div> HTML 输出 v-bind HTML 属性插值。如<button v-bind:disabled="someDynamicCondition">Button</button> JavaScript 表达式。直接在 mustache、属性插值里面使用各种表达式(加减乘除、三元运算、方法调用等)。 过滤器(有点类似 Shell 命令中的管道,可以定义过滤器来对原始值进行变化)。 指令。之前提到的 v-bind 也是一种指定,其他包括 v-on: 系列(dom 事件的监听)、v-for、v-model等。 二. Vue 实例 Vue 实例,实则也就是 ViewModel(数据 + 函数),都是通过构造函数 Vue 创建的: var data = { a: 1 } var vm = new Vue({ el: '#example', data: data, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } }) vm.$data === data // -> tr...
BrillantZhao 发布于 20小时前 阅读 7

placeholder浏览器兼容(ie9以上)解决方案

html:  <div class="placeholder"> <input type="text"> </div> css:  .placeholder{ position:relative; } .placeholder::after{/*伪元素模拟placeholder*/ content:'请输入名称'; position:absolute; color:#757575; font-size:12px; top:4px; left:3px; } js:  $(function(){ if($('.placeholder input').val != ''){//初始化判断input是否有值,如果有则移除父元素class $('.placeholder').removeClass('placeholder'); } $('.placeholder input').on('focus',function(){//获取焦点,移除placeholder类 $(this).parent().removeClass('placeholder'); }).on('blur',function(){//失去焦点,移除placeholder类 if($(this).val() == ''){ $(this).parent().addClass('placeholder'); } }) }) 原理: 通过css伪元素after和定位,将placeholder显示内容定位到input中,并通过js监听input的focus和blur事件,进而判断何时添加或移除input父元素placeholder类,达到真正placeholder效果。 ps:测试通过兼容ie9...
荆瑶 发布于 20小时前 阅读 4

HTMl5的sessionStorage和localStorage

session和cookie机制参考以下链接: http://blog.csdn.net/fangaoxin/article/details/6952954/ html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。 而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。 web storage和cookie的区别 Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。 除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。 但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生(来自@otakustay 的纠正) html5 web storage的浏览器支持情况 浏览器的支持除...
droden 发布于 20小时前 阅读 3

Maven结合Tomcat7自动部署

这里实验成功了,对自己写代码帮助非常的大!
FeanLau 发布于 21小时前 阅读 8

VirtualDOM与diff(Vue实现)

## 写在前面 因为对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),希望可以对其他想学习Vue源码的小伙伴有所帮助。 可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。 ## VNode 在刀耕火种的年代,我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。 那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树,在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢?于是虚拟DOM出现了,它是真实DOM的一层抽象,用属性描述真实DOM的各个特性。当它发生变化的时候,就会去修改视图。 但是这样的JavaScript操作DOM进行重绘整个视图层是相当消耗性能的,我们是不是可以每次只更新它的修改呢?所以Vue.js将DOM抽象成一个以JavaScript对象为节点的虚拟...
染陌同学 发布于 2周前 阅读 1506 点赞 4
GaiSama

前端对图片进行本地压缩并上传实践

正好项目碰到这个需求,花了一下午基本搞定,记录一下实现步骤以及一些需要注意的坑,本实例后端使用node express,Multer作为处理multipart/form-data的中间件,完整代码:https://gitee.com/gaisama/codes/xwus19y6crjnm0vf25dza10
GaiSama 发布于 3周前 阅读 1086 评论 10 点赞 9

vue组件开发

## 什么是vue组件 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式。 ## 组件使用步骤 ### 1. 定义组件 var myComponent = Vue.extend({ template:" this is my first component" }); ### 2. 注册组件 全局注册组件 Vue.component('myComponent',myComponent) 局部注册组件 var apk = new Vue({ el:"#apk", components:{ "myComponent":myComponent } }) ### 3. 使用组件 ### 4. 上面的定义过程比较繁琐,也可以不用每次都调用Vue.component和Vue.extend方法: // 在一个步骤中扩展与注册 Vue.component('my-component', { template: ' A custom component!' }) // 局部注册也可以这么做 var Parent = Vue.extend({ components: { 'my-component': { template: ' A custom component!' } } }) ## 组件常用方法使用 ### 1. 嵌套组件 组件本身也可以包含组件,下面的parent组件就包含了一个命名为child-component组件,但这个组件只能被parent组件使用: var myComponent = Vue.extend({ template:" this is my first component" }...
wshining 发布于 3周前 阅读 2208 评论 8 点赞 4

从Vue.js源码角度再看数据绑定

## 写在前面 因为对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),希望可以对其他想学习Vue源码的小伙伴有所帮助。 可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。 阅读数据绑定源码之前建议先了解一下[《响应式原理》](https://github.com/answershuto/learnVue/blob/master/docs/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86.MarkDown)以及[《依赖收集》](https://github.com/answershuto/learnVue/blob/master/docs/%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%86.MarkDown),可以更好地理解Vue.js数据双向绑定的整个过程。 ## 数据绑定原理 前面已经讲过Vue数据绑定的原理了,现在从源码来看一下数据绑定在Vue中是如何实现的。 首先看一下Vue.js官网介绍响应式原理的这张图。 ![img](https://user-gold...
染陌同学 发布于 4周前 阅读 2518 评论 4 点赞 5

Angular为什么选择TypeScript?

原文地址:https://vsavkin.com/writing-angular-2-in-typescript-1fa77c78d8e8 同步发布在我的个人网站:[http://www.codebe.org](http://www.codebe.org) 我的开源项目:[http://git.oschina.net/zt_zhong/CodeBe](http://git.oschina.net/zt_zhong/CodeBe) Angular是用TypeScript编写的。在这篇文章中,我将讨论为什么我们作出决定。我还将分享我使用TypeScript的经验:它如何影响我写和重构我的代码的方式。 ## TypeScript有很好的工具 TypeScript的最大的卖点就是工具。它提供高级自动完成,导航和重构。拥有这样的工具几乎是大型项目的必备要求。没有他们,改变代码的恐惧使代码库处于半只读状态,并使大规模重构非常危险且昂贵。 TypeScript不是编译为JavaScript的唯一类型语言。还有其他语言具有更强的类型系统,在理论上可以提供绝对强大的工具。但在实践中大多数人除了编译器之外没有其他的东西。这是因为构建丰富的开发工具必须是第一天就明确的目标,它是针对TypeScript团队的。这就是为什么他们构建语言服务,可以由使用的编辑器提供类型检查和自动完成。如果您想知道为什么有这么多编辑器具有很好的TypeScript支持,答案就是语言服务。 智能感知和重构提示(...
我是钟钟 发布于 1个月前 阅读 3479 评论 31 点赞 2

ES2017异步函数现已正式可用

ES2017标准已于2017年6月份正式定稿了,并广泛支持最新的特性:异步函数。如果你曾经被异步 JavaScript 的逻辑困扰,这么新函数正是为你设计的。 异步函数或多或少会让你编写一些顺序的 JavaScript 代码,但是却不需要在 callbacks、generators 或 promise 中包含你的逻辑。 如下代码: function logger() { let data = fetch('http://sampleapi.com/posts') console.log(data) } logger() 这段代码并未实现你的预期。如果你是在JS中编写的,那么你可能会知道为什么。 下面这段代码,却实现了你的预期。 async function logger() { let data = await fetch('http:sampleapi.com/posts') console.log(data) } logger() 这段代码起作用了,从直观上看,仅仅只是多了 async 和 await 两个词。   ES6 标准之前的 JavaScript 异步函数 在深入学习 async 和 await 之前,我们需要先理解 Promise。为了领会 Promise,我们需要回到普通回调函数中进一步学习。 Promise 是在 ES6 中引入的,并促使在编写 JavaScript 的异步代码方面,实现了巨大的提升。从此编写回调函数不再那么痛苦。 回调是一个函数,可以将结果传递给函数并在该函数内进行调用,以便作为事件的响...
葡萄城控件技术团队 发布于 1个月前 阅读 2342 评论 16 点赞 5

AntV - 我认为这是一个不严谨的错误

AntV 钟表是一个Bug吧,我咋不是很肯定,因为不同角度不同结果吧
andotorg 发布于 1个月前 阅读 1560 评论 23 点赞 4

捋一捋JavaScript对象的继承

文章针对不理解继承的程序员朋友去剖析和理解继承.
Jill1231 发布于 2个月前 阅读 2530 评论 6 点赞 7

你可能不知道的前端知识点之:IntersectionObserver

本文是我的 [你可能不知道的前端知识点](https://github.com/justjavac/the-front-end-knowledge-you-may-dont-know) 系列的第 5 个知识点。 ## 简介 - 你想跟踪 DOM 树里的一个元素,当它进入可视区域时得到通知。 - 你想实现延迟加载图片功能 - 你需要知道用户是否真的在看一个广告 banner。 你可以通过绑定 `scroll` 事件或者用一个周期性的定时器,然后在回调函数中调用元素的 [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) 获取元素位置实现这个功能。但是,这种实现方式性能极差,因为每次调用 `getBoundingClientRect()` 都会强制浏览器 [重新计算整个页面的布局](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) ,可能给你的网站造成相当大的闪烁。 `IntersectionObserver` 就是为此而生的,它可以检测一个元素是否可见,`IntersectionObserver` 能让你知道一个被观测的元素什么时候进入或离开浏览器的视口。 ## 兼容性 - Chrome 51+(发布于 2016-05-25) - Android 5+ (Chrome 56 发布于 2017-02-06) - Edge 15 (2017-04-11) - iOS **不支持** ## Polyfill WICG 提供了一个 [p...
justjavac 发布于 3个月前 阅读 1123 点赞 5

捋一捋JavaScript创建对象

##创建对象 回顾前面我们谈到通过object构造函数创建单个对象 ``` // 创建一个object的实例,然后再为它添加属性和方法 var person = new Object(); person.name = "jill"; person.age = 18; person.job = "software Engineer"; person.sayName = function () { alert(this.name); } ``` 通过对象字面量创建单个对象 ``` var person = { name:"jill", age:18, job:"software Engineer", sayName:function () { alert(this.name); } } ``` 通过object构造函数或对象字面量创建单个对象的方式有个缺点:**使用同一个接口创建很多对象,会产生大量的重复代码** ###工厂模式 **解决了创建多个相似对象的问题** ``` function createPerson(name,age,job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { alert(this.name); } return o; } var person1 = createPerson('jill',18,'software'); var person2 = createPerson('vane',23,'student'); ``` 工厂模式虽然解决了创建多个相似对象的问题,但却没有解决**对象识别的问题(即怎样知道一个对象的类型)** -------------------------------------------- ###构造函数模式 **解决...
Jill1231 发布于 3个月前 阅读 2669 评论 20 点赞 12

最流行的5个前端框架对比

如今出现了大量的CSS前端框架,但真正优秀的框架只有少数几个。 本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择。此外,许多选项都是模块化的,允许你仅使用所需的组件,甚至可以混合使用来自不同框架的组件。 本文依据各个框架的GitHub流行度来顺序介绍。 Bootstrap Bootstrap是目前可用框架中无可争议的领导者。其人气日益增长,你可以放心的选择这个框架,而不必担心项目会失败,因为具有广泛使用基础的框架,不太可能被抛弃。 创作者: Mark Otto 和 Jacob Thornton. 发行: 2011 当前版本: 3.3.7 人气: GitHub上有111,000颗星 说明: “Bootstrap是最流行的HTML,CSS和JavaScript框架,用于在网络上开发响应式、移动的Web项目。 核心概念/原则: RWD和移动端优先。 框架大小: 154 KB 预处理器: Less和Sass 响应式布局:是 模块化:是 启动模板/布局:是 图标集: Glyphicons Halflings设置 附加/附件:无捆绑,许多第三方插件可用。 独特组件: Jumbotron 文档资源:良好 自定制:基本GUI定制器。但是你需要手动输入颜色值,因为没有颜色选择器可用。 浏览器支持: Fir...
葡萄城控件技术团队 发布于 3个月前 阅读 8748 评论 19 点赞 13

从JavaScript属性描述器剖析Vue.js响应式视图

学习每一门语言,一般都是从其数据结构开始,JavaScript也是一样,而JavaScript的数据结构中对象(Object)是最基础也是使用最频繁的概念和语法,坊间有言,JavaScript中,一切皆对象,基本可以描述对象在JavaScript中的地位,而且JavaScript中对象的强大也使其地位名副其实,本篇介绍JavaScript对象属性描述器接口及其在数据视图绑定方向的实践,然后对Vue.js的响应式原理进行剖析。
熊建刚 发布于 4个月前 阅读 3178 评论 9 点赞 14

各种动态渲染Element方式 的性能探究

###一、性能优化的原则及方法论 树立原则:动态渲染进入一个Dom元素,首先需要保证动态渲染操作必须尽可能少对原有dom树的影响,影响重绘及重排。 确定方法论:必须寻找一个**容器**来缓存渲染期间生成的dom结构(操作必须尽可能少对原有dom树的影响),然后再进行一次渲染到目标element中。 ### 二、生成期间DOM缓存的选择 - DocumentFragment(文档碎片对象,选择原因:脱离于文档流) - 临时Element(选择原因:新element脱离于文档流) - createElement,再一步步进行渲染 - 通过描述Dom的String(下称:DomString),转化为Dom对象 - 临时Element+innerHTML+cloneNode返回最外层element元素对象,再进行插入appendChild,必要时还需要选择器方法讲某一个Element对象提取出来 - XML字符串通过解析生成Element对象(注意,不是HTMLxxxElement对象,是Element对象),然后将该对象appendChild进去 - 临时字符串(选择原因:借助innerHTML渲染,一次渲染) ###三、DocumentFragment的优缺点 基本模式: ```javascript var fragment = document.createDocumentFragment(); fragment.appendChild( ... //生成Element的IIFE ) ``` ```javascript //IIFE示例,根据配置创建元素...
雕刻零碎 发布于 4个月前 阅读 1820 评论 2 点赞 4

Fit项目分页组件的编写

项目中涉及列表显示的地方都会用到分页控件,为了能更好地与当前网站的样式匹配,这次要自己实现一个。 所以选择了模板中提供的分页样式,基于模板改造以能够动态生成:       一 控件的行为规则 a) 可设置显示几个页码(默认5个,只能是奇数) 如果当前页显示5个,则默认前后各有两个,比如当前页是5,显示页码为“3 4 5 6 7 如果当前页在最前面,比如为1,显示页码为:1 2 3 4 5 同样当前页在最后面,比如为9,显示页码为:5 6 7 8 9 如果总页数少于5,比如只有3页,则页码全部显示:1 2 3 b) 关于跳转首页(<<)、尾页(>>)、上一页(<)、下一页(>) 如果当前页是第一页,首页和上一页禁用 如果当前页是最后一页,尾页和下一页禁用 c) 当前页的样式要区别于其它页码       二 代码编写 a) 分页组件类、属性、常量   PAGE_COUNT为默认显示的页码数量,这里为了便于测试设置成了2;静态属性分别为当前页、总页数、数据总条数,但刚刚发现TotalPage、TotalCount实际上是冗余的,两者可以互相计算得出,这要尽早重构。   b) 局部变量   根据目前的实现,需要这么一坨局部变量。startPage、endPage限定了显示页码的范围。将跳转链接放在了hrefStr,以后其它列表需...
zhixin9001 发布于 4个月前 阅读 979 评论 3 点赞 2

3d基础知识研究--如何用js在canvas2d上做出3d效果

    逛 TypeScript 官网时发现了一个 js canvas 做的 3D 灯光渲染效果(详见参考1),一看源代码,竟然是用 getContext("2d") 做的,而且代码并不长,才两百多行,当时就被震惊了!!!区区这点代码就能白手起家写出三维光线追踪渲染效果?!WTF!还有这种操作?!感觉这一定是涉及非常基础、核心的 3D 相关原理的代码。虽然之前用过很多 3D 软件,也学过一点 Direct3D 和 WebGL,但是对 3D 基础知识始终是一知半解的,向量、矩阵变换等计算也不是太清楚,于是立即决定深入研究一下。     折腾了一阵原代码,发现他的坐标空间是这样的,X正朝右,Y正朝上,Z正深入画布:          让我恍然大悟的是透视的处理方式,并不是每个物体的每个部分去计算离相机有多远,而是从相机中心点发射出许多射线(每像素一个射线),射线撞到的最近的物体就取这个物体的颜色,这样自然就能产生近大远小的效果。为了直观地理解摄像机的工作原理,我用 MaxScript 在 3DsMax 里建立了射线的模型,下面会说创建过程,先看结果:          这里设置了画布大小为 10 * 10 像素,每个像素对应一根射线,起点就是相机所在位置。     来看下近大远小的透视是如何形成的。为了清晰...
gonnavis 发布于 4个月前 阅读 2612 评论 4 点赞 11

合格前端系列第四弹-如何监听一个数组的变化

看这篇文章之前请先参考上一篇文章https://my.oschina.net/qiangdada/blog/906220(合格前端系列第三弹-实现一个属于我们自己的简易MVVM库)
qiangdada 发布于 4个月前 阅读 3780 评论 8 点赞 11

合格前端系列第三弹-实现一个属于我们自己的简易MVVM库

时隔半年,重新写一遍有关数据双向绑定的文章,模拟当今流行的vue框架实现一个属于自己的mvvm库。
qiangdada 发布于 4个月前 阅读 4125 评论 11 点赞 11

CSS 布局经典问题初步整理

本文主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等。
brianway 发布于 4个月前 阅读 4131 评论 9 点赞 11 打赏 1

Web Components简述

要说最近几年来,前端开发最火的一个趋势或最火的前端开发框架是什么,第一想到的是,组件及推崇组件化开发的React框架。本文将介绍Web Components规范并就组件的几大特性进行讨论
熊建刚 发布于 4个月前 阅读 2137 评论 8 点赞 3

This其实不难,通过实例全面解析JS中的This

GitHub地址:https://github.com/SimonZhangITer/MyBlog/issues/12 > this的指向问题应该是让每一个前端er都头疼的问题,我也一样,曾经遇到甚至都是一顿乱猜。最近在研读一些书籍如《你不知道的JavaScript》和《JavaScript语言精粹与编程实践》,让我对this的问题豁然开朗。故写下此篇文章,分享一下我的心得。 # 隐式绑定 关于this,一般来说,谁调用了方法,该方法的this就指向谁,如: ```javascript function foo(){ console.log(this.a) } var a = 3; var obj = { a: 2, foo: foo }; obj.foo(); // 输出2,因为是obj调用的foo,所以foo的this指向了obj,而obj.a = 2 ``` 如果存在多次调用,`对象属性引用链只有上一层或者说最后一层在调用位置中起作用`,如: ```javascript function foo() { console.log( this.a ) } var obj2 = { a: 42, foo: foo } var obj1 = { a: 2, obj2: obj2 } obj1.obj2.foo(); // 42 ``` ## 隐式丢失 一个最常见的this绑定问题就是被`隐式绑定`的函数会丢失绑定对象,也就是说他回应用默认绑定,从而把this绑定到全局对象或者undefined上,取决于是否是严格模式。 ```javascript function foo() { console.log( this.a ) } var obj1 = { a:...
Simon_ITer 发布于 4个月前 阅读 2652 评论 12 点赞 6
顶部