开源中国

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

It appears you’re using an unsupported browser

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

精彩阅读

  • 最新推荐

  • 今日热门

  • 本周热门

  • 每日一博

  • 最新文章

给 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 这是一款将任意 ...
编辑部的故事 发布于 2天前 阅读 3859 评论 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 将侧边栏放置在主内容区域左侧 确保侧边栏和主内容区域的大小合适 确保导航...
葡萄城控件技术团队 发布于 3天前 阅读 180 点赞 2

简单介绍一下vue2.0

Vue是用于构建用户界面的渐进框架。作者尤雨熙特别强调它与其他的框架不同,Vue是渐进式的框架,可以逐步采用,不必一下就通过框架去重构项目。 另外Vue的核心库只专注于视图层,这样就更容易与其他库或现有项目进行集成,也更灵活。
笔阁 发布于 3天前 阅读 328 评论 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('存在'); } ...
爱敲代码的程序员 发布于 3天前 阅读 522 评论 2 点赞 6

对比angular的几个插件库

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

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对象为节点的虚拟...
染陌同学 发布于 5天前 阅读 1420 点赞 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 发布于 5天前 阅读 121 评论 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.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> </head> <body> <p>日期:<input type="text" id="datepicker"></p> </body> </html> 动画 当打开或关闭 datepicker 时使用不同的动画。从下拉框中选择一个动画,然后在输入框中点击来查看它的效果。您可以使用三个标准动画中任意一...
爱敲代码的程序员 发布于 5天前 阅读 260 点赞 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 发布于 5天前 阅读 172 点赞 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安装一遍,不要嫌慢或者麻...
落青 发布于 7天前 阅读 91 评论 5

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

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

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

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

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

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

说说VNode节点(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指出,共同学习,共同进步。 ## 抽象Dom树 在刀耕火种的年代,我们需要在各个事件方法中直接操作Dom来达到修改视图的目的。但是当应用一大就会变得难以维护。 那我们是不是可以把真实Dom树抽象成一棵以javascript对象构成的抽象树,在修改抽象树数据后将抽象树转化成真实Dom重绘到页面上呢?于是虚拟Dom出现了,它是真实Dom的一层抽象,用属性描述真实Dom的各个特性。当它发生变化的时候,就会去修改视图。 但是这样的javascript操作Dom进行重绘整个视图层是相当消耗性能的,我们是不是可以每次只更新它的修改呢?所以Vue.js将Dom抽象成一个以javascript对象为节点的...
染陌同学 发布于 2周前 阅读 258 评论 1

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 发布于 2周前 阅读 2143 评论 7 点赞 4

小而美的 React Form 组件

之间在一篇介绍过 Table 组件[《React 实现一个漂亮的 Table》](http://blog.hypers.io/2017/09/03/rsuite-table/) 的文章中讲到过,在企业级后台产品中,用的最多且复杂的组件主要包括 Table、 Form、 Chart,在处理 Table 的时候我们遇到了很多问题。今天我们这篇文章主要是分享一下 Form 组件,在业务开发中, 相对 Table 来说,Form 处理起来更麻烦,不是所有表单都像注册页面那样简单,它往往需要处理非常多的逻辑,比如: - 需要处理数据验证逻辑。 - 在一个项目中的很少有可以复用的表单,每个表单的逻辑都需要
郭小铭 发布于 2周前 阅读 220 评论 1

Doctype作用?严格模式与混杂模式如何区分?它们有何差异?

一、Doctype作用是什么? <!DOCTYPE>声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行,这并不是一个 HTML 标签。 二、严格模式与混杂模式如何区分?它们有何意义? 严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。 混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。 如何区分:浏览器解析时到底使用严格模式还是混杂模式,与网页中的 DTD 直接相关。 1、如果文档包含严格的 DOCTYPE ,那么它一般以严格模式呈现。(严格 DTD ——严格模式)  2、包含过渡 DTD 和 URI 的 DOCTYPE ,也以严格模式呈现,但有过渡 DTD 而没有 URI (统一资源标识符,就是声明最后的地址)会导致页面以混杂模式呈现。(有 URI 的过渡 DTD ——严格模式;没有 URI 的过渡 DTD ——混杂模式)  3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。(DTD不存在或者格式不正确——混杂模式) 4、HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。( HTML5 没有严格和混杂...
爱敲代码的程序员 发布于 2周前 阅读 37 点赞 1

jQuery选择器大全

jQuery 选择器是 jQuery 的根基,对事件处理、DOM 遍历都离不开 JQ 选择器。 一、基本选择器 1. id 选择器(指定 id 元素) 将 id="one"的元素背景色设置为黑色。(id 选择器返单个元素) $(document).ready(function () { $('#one').css('background', '#000'); }); 2. class 选择器(遍历 css 类元素) 将 class="cube"的元素背景色设为黑色 $(document).ready(function () { $('.cube').css('background', '#000'); }); 3. element 选择器(遍历 html 元素) 将 p 元素的文字大小设置为 12px $(document).ready(function () { $('p').css('font-size', '12px'); }); 4. * 选择器(遍历所有元素) $(document).ready(function () { // 遍历 form 下的所有元素,将字体颜色设置为红色 $('form *').css('color', '#FF0000'); }); 5. 并列选择器 $(document).ready(function () { // 将 p 元素和 div 元素的 margin 设为 0 $('p, div').css('margin', '0'); }); 二、 层次选择器 1. parent > child(直系子元素) $(document).ready(function () { // 选取 div 下的第一代 span 元素,将字体颜色设为红色 $('div > span').css('color', '...
爱敲代码的程序员 发布于 2周前 阅读 118 点赞 3 打赏 1

腾讯 Web UI 解决方案 QMUI Web —— 探索与沉淀

作者简介: 李浩成(Kayo),腾讯广州研发部 UI 工程师。 经过长时间的打磨迭代,QMUI Web 作为腾讯广研 QMUI 团队的一个开源项目,正式发布到 Tencent Github。QMUI Web 是一个 Web UI 的解决方案,从零开始,由编码规范,到组件和工具方法的制作,再到工作流的整合,不断在迭代,也不断在优化,走过了不少的路。趁着发布的机会,我们正好回顾这一路的探索过程,分享其中的点滴,也希望能借此让大家更了解 QMUI Web。 ## 背景 2014 年中,QMUI 团队支持的主要项目是 QQ 邮箱,Web 端的邮箱是个庞大的项目,但其并没有统一的 UI 基础库,多年的高速迭代使得项目的 UI 代码变得混乱,各个模块之间各自开发,除了在代码层面表现出混乱和不可控之外,表现层面也并没有很好地统一起来。因此,项目急需一套统一的团队编码规范以及一个 UI 基础库。 恰好,这个时候 Sass 等 CSS 预处理器已经发展成熟,自动化工作流的工作模式也日趋完善,因此,我们决定基于这些技术制作一套通用于不同项目的 Web UI 框架。框架的场景定位很明确:需要控制整体样式,并且可以适应频繁迭代打磨的大型项目。所以,这套即将诞生的 Web UI 框架的特性也很明确:需要方便地控制项目的整体样式,应对频...
腾讯开源 发布于 2周前 阅读 774 评论 3

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

上次学习了vue-router的使用,让我能够在各个页面间切换,将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。 注:本文只是个人对vuex学习的一些理解,要深刻掌握还需要认真查阅官方文档。 一、基本介绍 Vuex 是一个专为 Vue.js 的SPA单页组件化应用程序开发的状态管理模式插件。 由于Vue SPA应用的模块化,每个组件都有它各自的数据(state)、界面(view)、和方法(actions)。这些数据、界面和方法分布在各个组件中,当项目内容变得越来越多时,每个组件中的状态会变得很难管理。这是vuex就派上用场啦~下面我们看一个简单的vuex例子。 1. 单个组件中的状态 假如只是在单个组件中要改变界面view很简单,只需要改变state数据源即可。如下代码: <template> <div> view: {{ count }} <button @click="increment">increment</button> </div> </template> <script> export default { // state data () { return { count: 0 } }, // actions methods: { increment () { this.count++ } } } </script> 所以,单个组件中的原理图是这样的: 2. 多个组件中的状态 然而,我们作...
BrillantZhao 发布于 18小时前 阅读 3

vue.js2.0实战(6):axios和网络传输相关知识的学习实践

在学习了之前的路由vue-router和状态管理vuex之后,就应该是网络交互了。就学习尤大推荐的axios了。刚好本人对网络请求这块除了会get、put、post和delete这四个方法之外知之甚少,刚好补全上。 注意:Vue官方推荐的网络通信库不再是vue-resource了,推荐使用axios。 1. axios安装 npm: $ npm install axios bower: $ bower install axios Using cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 2. 基本使用方法 GET请求 // Make a request for a user with a given ID axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // Optionally the request above could also be done as axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); POST请求 axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) ...
BrillantZhao 发布于 18小时前 阅读 2

JS实现多个单选框有一个未选择,则提交按钮不可点击

``` 您是否确认本人? 是 否 您是否确认贵? 是 否 ```
Alexdevlin 发布于 3个月前 阅读 11 点赞 1

【直播】试验台达PLC程序无线下载

台达PLC程序远程无线下载 前两天需要修改下一个台达PLC的程序,但是PLC已经在现场了而且是放在高台上的,调试起程序来不太方便。平时这个PLC和控制室电脑之间用的是无线通讯方式,通过一对儿无线通讯终端来完成数据传输。 我突然想到,也许可以用这对无线通讯终端来完成对台达PLC的程序无线下载。之前一直用三菱的PLC这么做过,我想台达的PLC也能这么实现。如果可以无线下载,那改程序就简单多了。 说干就干,我先自己试验了下台达PLC程序的远程无线下载的可实施性。折腾了2小时就成功了。很不吝啬的来分享下,调试和搭建过程。 设备搭建: 在电脑上打开台达PLC(DVP16ES200R)编程软件 Delta WPLSoft,用USB转RS232数据线连接一台无线通讯终端,这个终端可以自动识别RS232端口。 如图所示▼ 另一边的台达PLC先连接上RS232编程电缆,然后再接一根RS232交叉线,以确保程序可以顺利的传输给这边无线通讯终端的RS232端口。 如图所示▼ 搭建完成的示意图 如图所示▼ 调试方式: 我编写了一个简单的程序,用一秒的脉冲M1013来触发输出继电器Y0(蓝框所示)。全部电器通电后,运行程序对远端的PLC进行下载。观察Y0是否以一秒的频率在闪烁。或者看连接PLC的无线通讯终端的红灯是否...
dataie456000 发布于 3个月前 阅读 10

视频H5Video标签在微信里的坑和技巧

随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5,在这里介绍一些实践经验。 统一播放效果 我们希望视频播放时可以全屏播放,没有进度条、播放按钮等与系统相关的元素,可以在视频上方增加自定义的元素(比如一个跳过按钮),类型下面的效果: 在不同的操作系统(主要就是 iOS 和 Android),为了达到比较统一的播放效果,分别对其进行兼容。 iOS 在 iOS 上,APP 都是使用的系统自带的浏览器进行页面渲染,video 播放视频的效果是统一的,只需要考虑不同的 iOS 版本是否有不一致的地方。在 iOS 上,播放视频默认会弹出一个播放器全屏播放视频,如下效果 播放器上下有的系统默认的控制栏,可以控制视频的播放进度、音量以及暂停或继续播放,播放视频时,视频会 “浮” 在页面上,页面上的所有元素都只能是在视频下面,这种效果显然不是我们想要的。 但好在 iOS 10 Safari 中,video 新增了 playsinline 属性,可以使视频内联播放。 在 webkit 的 blog 上提到 A note about the playsinline attribute: this attribute has rec...
放开那个女孩 发布于 3个月前 阅读 51

Angular选选中和取消全选中效果

Angular选选中和取消全选中效果
起风了426 发布于 3个月前 阅读 31

自己总结的web前端知识体系大全【欢迎补充】

1. 前言   大约在几个月之前,让我看完了《webkit技术内幕》这本书的时候,突然有了一个想法。想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html、css、js)的认识——做web前端需要的比这三大块要多得多。   拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来。说干就干。上午我就开始在办公室画草图,乱七八糟的在那儿理思路。      大家不要害怕,其实下文中的这个知识框架要比草图中的好看的多,草图大家权当没看见。   好了,废话不扯。下面请跟随我本博客的内容,来看看web前端开发除了htm、css和js之外,还有哪些东西需要你一步一步去掌握。      在看内容之前,先看一下这个知识框架的预览图。图太大不好展示,看不清除,可在此下载清晰版:http://pan.baidu.com/s/1hqIUvUc (内有整个知识体系的图片和xmind文件)    2. 分类   所有知识框架,那肯定是一个结构型的展现,就是一棵树。web前端的知识点非常多,也非常散,需要好几层结构来组织这个体系,否则就会显得很乱。那么如何组织、把谁和谁放在一块儿?这是真正值得我们...
前端攻城狮-Dawn 发布于 2个月前 阅读 533

微信浏览器阻止弹框

微信浏览器和QQ浏览器有个自带的特殊功能,就是长按会出现上图所示的弹框。有时候前端页面中有长按事件时,总是会触发这个弹框而影响我们自己开发的功能。那么该如何屏蔽这个弹框呢?  很简单,这个弹框实际上等同于PC环境下的鼠标右键的弹框,因此只要禁止页面的弹框事件就能完美屏蔽该弹框对我们功能带来的影响。程序代码如下: document.oncontextmenu=function(e){ //或者return false; e.preventDefault(); }; 仅仅上面这段简短的代码就可以把这个难受的弹框给屏蔽掉(oncontextmenu事件中执行return false;或者e.preventDefault的效果是完全等同的)。  也许右键弹框在PC端很重要,但是对于移动端而言,这个弹框显然可有可无,因此在需要时,放心的使用上面的代码把它屏蔽掉就行。 注意不要使用下面这种代码形式(或者类似的方法)来阻止这个弹框: //错误方法 document.addEventListener('touchstart', function(ev){ ev.preventDefault(); },false); 上面这段代码会阻止页面滚动事件、a标签默认跳转事件等不该屏蔽的事件。 还有当长按事件下有图片时,长按会弹出发送给朋友,保存到手机,收藏的弹框,解决办法是在图片上层盖一个透明层,让长按事件点...
放开那个女孩 发布于 2个月前 阅读 6

JSON.stringify()的一点笔记

1.JSON.stringify函数将一个JS对象转换成文本化的JSON,不能被文本化的属性会被忽略。如:循环引用,Symbol(),undefined 2.意外情况:在数组中,不可被stringify的元素用null填充 3.可以重写对象的toJSON(对象.prototype.toJSON = function(){}),使JSON.stringify返回指定的数据 4.JSON.stringify的完整定义:JSON.stringify(value, replacer?, space?)。 replacer是一个过滤函数或是一个数组,包含要被stringify的属性名。如果没有定义,默认所有属性都被stringify space参数用来格式化输出结果,如:JSON.stringify(value, null, '\t');
请勿关闭_-_-_ 发布于 1个月前 阅读 10

SVN下载

1.官网 http://subversion.apache.org/packages.html 2.翻到底部 .
Clover286 发布于 1周前 阅读 5

解决因手机设置字体大小导致h5页面在webview中变形的BUG

首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题。我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,一切都比较完美。 这时候,你自信满满的将h5地址交给了APP工程师,做了一个WEBVIEW嵌套,然后就顺利交工了。 测试组在一堆手机中测试APP,突然,在某个手机上打开,你的页面布局了乱了,字变大或者变小,总之很奇葩。 你怀疑是APP的问题,但是客户端死活不承认。你在该手机浏览器中查看,确保没有一毛钱问题,也死活不承认是你的问题。于是测试人员对你俩不死不休的要求修改。于是,客户端给你加了调试工具后,你打开chrome进行调试,发现一个非常非常奇葩的问题: ------------------ _我明明设置的html字号是100px,为什么在APP中就变成了86(或者其他数字),你找遍所有的代码,都没有发现这个86是从哪里来的,你快疯了!!找了N多人帮忙,都没能解决这个问题!!我很希望能够告诉你,赶紧来看我这篇博文,因为,你现在经历的一切,我TM刚刚经历过_ ------------------- 好,你怎么也不会想到是手机设置字体大小造成的。因为默认浏览器中的内容是不受系统字体大小设置控制的,至少我遇到的几台手机都是这样的情况。但...
originDu 发布于 1周前 阅读 5

【原创】前端表格的增,删(批量删除)-弹窗追加-两个数组对比去掉重复

 功能实现: tr的新增,删除(包括批量删除), 弹窗新增,追加到主页。(去掉重复id项。)   技能点: 获取主页的tr下的input id,放到一个数组; 获取弹窗内的tr下的input id,放到另一个数组; 提交时,对比2个数组,然后将非重复的id追加到主页表格中。当然弹窗未选,也要判断下。 待时间充分点,再细化编写此博客。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="btn btn-primary" id="btn-add"> 新增 </div> <div class="btn btn-danger" id="btn-del"> 批量删除 </div> <div class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 弹窗 </div> </div> <table class="table table-main"> <thead> <th><input type="checkbox" name="" id="" value="" /></th> <th>ID</th> <th>标题</th> <th>时间</th> </thead> <tbody c...
柴高八斗之父 发布于 1周前 阅读 10

js获取contextPath

简单的记录一下写代码改变思路的时刻
戒定慧 发布于 1周前 阅读 14

kill -2 终止程序,但是生成log

#ps -ef | grep pybot #kill -2 pid
active_health 发布于 3天前 阅读 4

给 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 这是一款将任意 ...
编辑部的故事 发布于 2天前 阅读 3859 评论 4 点赞 11 打赏 1

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对象为节点的虚拟...
染陌同学 发布于 5天前 阅读 1420 点赞 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('存在'); } ...
爱敲代码的程序员 发布于 3天前 阅读 522 评论 2 点赞 6

我从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 发布于 3天前 阅读 245

简单介绍一下vue2.0

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

不懂这些SEO技巧,你还敢说你是前端? 作者原创 版权保护

这篇文章其实是我本人的总结,因为工作中做完了一个官方网站并成功上线,最后组长检查代码看到我的keyword等一系列信息都是空的,把我骂得狗血淋头。一言不合就作总结,总结一些简单但是我们能做的seo小技巧,送给想把网站做到极致的人。 SEO要点: 1.语义化html标签,用合适的标签嵌套合适的内容,不可过分依赖div,对浏览器更友善就能更容易被抓取。 2.重要的内容html代码放在前面,放在左边。搜索引擎爬虫是从左往右,从上到下进行抓取的,利用布局来实现重要的代码在上面 3.重要内容要写在html架构里面,蜘蛛不会抓取js的内容, 4.尽量减少使用iframe,因为蜘蛛不会抓取iframe的内容。 5.为图片img加上alt属性,加了alt就不必加title了,避免搜索引擎认为我们恶意优化。alt能让图片没加载时都能有文字提示。 6.需要强调的地方加上title,本页面内跳转a标签内也要加title。 7.重要的地方可以保留文字,有些地方必须用图,但是蜘蛛不会爬img,这时应该设置文本,再用缩进隐藏的方法去掉文字,例如logo的优化就是这样做的。注意隐藏不能用display:none,蜘蛛不会检索display:none的内容,应用这个方法的标签一般是logo,标题等重要信息 8.尽量做到js、css、html的分离,...
动感宅神 发布于 17小时前 阅读 24

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

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

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对象为节点的虚拟...
染陌同学 发布于 5天前 阅读 1420 点赞 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('存在'); } ...
爱敲代码的程序员 发布于 3天前 阅读 522 评论 2 点赞 6

简单介绍一下vue2.0

Vue是用于构建用户界面的渐进框架。作者尤雨熙特别强调它与其他的框架不同,Vue是渐进式的框架,可以逐步采用,不必一下就通过框架去重构项目。 另外Vue的核心库只专注于视图层,这样就更容易与其他库或现有项目进行集成,也更灵活。
笔阁 发布于 3天前 阅读 328 评论 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.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> </head> <body> <p>日期:<input type="text" id="datepicker"></p> </body> </html> 动画 当打开或关闭 datepicker 时使用不同的动画。从下拉框中选择一个动画,然后在输入框中点击来查看它的效果。您可以使用三个标准动画中任意一...
爱敲代码的程序员 发布于 5天前 阅读 260 点赞 2

我从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 发布于 3天前 阅读 245

如何使用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 将侧边栏放置在主内容区域左侧 确保侧边栏和主内容区域的大小合适 确保导航...
葡萄城控件技术团队 发布于 3天前 阅读 180 点赞 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 ...
爱敲代码的程序员 发布于 4天前 阅读 152 点赞 1

对比angular的几个插件库

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

疯狂Java笔记之Java的内存与回收

Java引用的种类 1.对象在内存中的状态 对于JVM的垃圾回收机制来说,是否回收一个对象的标准在于:是否还有引用变量引用改对象?只要有引用变量引用对象,垃圾回收机制就不会回收它。 也就是说,当java对象被创建出来之后,垃圾回收机制会实时的监控每个对象的运行状态,包括对象的申请,引用,被引用,赋值等。当垃圾回收机制实时的监控到某个对象不再被引用变量所引用时,垃圾回收机制就会回收它所占用的空间。 基本上,可以把JVM内存中的对象引用理解成一种有向图,把引用变量,对象都当成有向图的顶点,将引用关系当成图的有向边,有向边总是从引用端指向被引用的Java对象。因为Java的所有对象都是由一条条线程创建出来的,因此可以把线程对象当成有向图的起始顶点。 对于单线程程序而言,整个程序只有一条main线程,那么该图就是以main进程为顶点的有向图。在这个有向图中,main顶点可达的对象都处于可达状态,垃圾回收机制不会回收它们;如果某个对象在这个有向图中处于不可达状态,那么就认为这个对象不再被引用。 采用有向图管理内存中的对象具有较高的精度,当缺点是效率较低。 当一个对象在堆内存中运行时,根据它在对应有向图中的状态,可以把它所处的状态分成 可...
YM- 发布于 4周前 阅读 3880 评论 3 点赞 1

给 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 这是一款将任意 ...
编辑部的故事 发布于 2天前 阅读 3859 评论 4 点赞 11 打赏 1

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 发布于 5天前 阅读 121 评论 1

给 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个月前 阅读 6316 评论 4 点赞 7

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 发布于 2周前 阅读 2143 评论 7 点赞 4

Web程序员这5个debug技巧必须掌握

划重点 我一直使用printf调试程序,一般来说都是比较顺利,但有时候,你会发现需要更好的方法。下面几个JavaScript技巧相信你一定会觉得十分有用: 1debugger; 我以前也说过,你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果。 需要带有条件的断点吗?你只需要用if语句包围它: if (somethingHappens) { debugger; } 但要记住在程序发布前删掉它们。 2设置在DOM node发生变化时触发断点 有时候你会发现DOM不受你的控制,自己会发生一些奇怪的变化,让你很难找出问题的根源。 谷歌浏览器的开发工具里有一个超级好用的功能,专门可以对付这种情况,叫做“Break on…”,你在DOM节点上右键,就能看到这个菜单项。 断点的触发条件可以设置成这个节点被删除、节点的属性有任何变化,或它的某个子节点有变化发生。 3Ajax断点 XHR断点,或Ajax断点,就像它们的名字一样,可以让我们设置一个断点,在特点的Ajax调用发生时触发它们。 当你在调试Web应用的网络传输时,这一招非常的有效。 4移动设备模拟环境 谷歌浏览器里有一些非常有趣的模拟移动设备的工具,帮助我们调试程序在移动设备里的运行情况。 找到它的方法是:按F12,调出开发者工具,然后按ESC键(当前...
小一天 发布于 2周前 阅读 865 点赞 1

最全解析如何正确学习JavaScript指南,必看!

划重点       鉴于时不时,有同学私信问我:怎么学前端的问题。这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了。   “前端怎么学”应该因人而异,别人的方法未必适合自己。就说说我的学习方法吧:我把大部分时间放在学习js上了。因为这个js的学习曲线,先平后陡。项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题。我是怎么学的呢,看书,分析源码。个人这几天统计了一下,前端书籍目前看了50多本吧,大部分都是js的。市面上的书基本,差不多都看过。 第一个问题:看书有啥好处?   好处应该是不言而明的,书看多了,基础会逐渐夯实起来。看多了,自己的判断力,自然就上来了。看别人的文章,就能很快判断出,对方每块儿讲得对不对,哪块儿又是自己不清楚的,模棱两可的。当然也为看源码,分析源码提供了基础。 10本书读2遍的好处,应该大于一本书读20遍。10本书的交集,那就是基础知识的核心,而并集那就是所有的知识。好书当然要多读,反复读。但是只读一本是不行的。因为每本书的侧重点都不一样。从不同的侧面,去理解一个知识点,是很有意义的。 所以特别佩服印度人,他跟你讲英文,你一个词语没听懂,他会蹦出n个同...
小一天 发布于 5天前 阅读 75

从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...
染陌同学 发布于 3周前 阅读 2475 评论 4 点赞 5

困扰程序员的30种软件开发问题,你中了几个?

划重点 开发应用程序是一项压力很大的工作,人无完人,工作中遇到各种各样的问题是很正常的事,有些程序员会生气,沮丧,郁闷,甚至泄气,也有一些程序员则会比较淡定。如何进行修复的过程,是我今天要给你们分享的重点,看下去:   我想分享一些有关程序员在遇到问题时常说的话和冒出的想法。当氛围变得紧张的时候,这些话就会显得轻松幽默。最终,问题也会迎刃而解,你将会继续下一个任务。   我相信许多web开发人员和软件工程师在编程中都会遇到困难,而事后回想起来,还会觉得很好笑。   1、我不知道该删掉还是重写   回归曾经写的源代码,总有一种想要重新返工的冲动,逻辑性差,冗余代码多,让人难以理解。但是,如果功能没出现问题,千万不要去修改。这是我经常要面对的困扰,相信也困扰了其他不少的软件开发者。   2、一开始架构时就该查Github   相信绝大多数开发人员都知道Github,它上面每天都会发布的一些神奇的开源项目。所有语言的程序员都会利用网络,为已存在的项目创建分支,添加项目wiki描述,或者创建自己的代码库,这些都为各种各样的项目的插件和模板提供了很多丰富的资源。   3、为什么这个脚本要依赖这么多库   说到一些越来越被广泛使用的...
小一天 发布于 3天前 阅读 65

给 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 一个漂亮、响应式...
编辑部的故事 发布于 1个月前 阅读 5060 评论 8 点赞 12

(页面滑动)ionic2-super-tabs插件的使用及注意地方

ionic2-super-tabs
SubinY 发布于 2个月前 阅读 121

ionic cordova platform add android 

yizhichaodeMacBook-Pro:myappsvn yizhichao$  ionic cordova platform add android  ✖ cordova platform add android --save - failed! [ERROR] Exception: Using cordova-fetch for cordova-android@~6.2.2           Adding yargs project...         Error: Your yargs platform does not have Api.js          1down vote There seems to be an error with android@6.2.x and later. I had the same issue and using the below step was able to build my apk. Do the following: cordova platform remove android Then add 6.1.2 specifically cordova platform add android@6.1.2 Also found the following as an temporary workaround cordova platform add android --nofetch       ionic cordova platform --help     Examples:       $ ionic cordova platform      $ ionic cordova platform add ios     $ ionic cordova platform add android     $ ionic cordova platform rm ios  ...
yizhichao 发布于 4周前 阅读 184

document(处理文档)对象

JavaScript从入门到精通
Clarence_D 发布于 59分钟前 阅读 1

VUE优化之------懒加载

思路结构: 目录结构设计: 路由设计: import Router from 'vue-router'; import Vue from 'vue'; Vue.use(Router); export default new Router({ routes: [ { mode: 'history', path: '/home', name: 'home', component: resolve => require([URL], resolve),//懒加载 children: [ { mode: 'history', path: '/home/:name', name: 'any', component: resolve => require(['../page/any/any.vue'], resolve),//懒加载 }, ] }, { mode: 'history', path: '/store', name: 'store', component: resolve => require(['../page/store/store.vue'], resolve),//懒加载, children: [ { mode: 'history', path: '/store/:name', name: 'any', component: resolve => require(['...
wenxingjun 发布于 15小时前 阅读 5

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

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

深入理解javascript原型和闭包系列

深入理解javascript原型和闭包系列 http://www.cnblogs.com/wangfupeng1988/p/4001284.html 深入理解JavaScript系列 http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html
高处胜寒 发布于 16小时前 阅读 4

纯CSS切换开关

https://proto.io/freebies/onoff/ https://codepen.io/ChidoYo/pen/mvFct .container { padding: 25px; } // Modified CSS for on/off switch .onoffswitch { position: relative; width: 78px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 1px solid #999999; border-radius: 20px; } .onoffswitch-inner { width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: b...
own1991 发布于 16小时前 阅读 4

jquery选择器(:checked) / prop() / attr()

attr('checked',false)只能使用一次 或者初始,但是jquery1.6版本后有prop()可以反复使用 js也可以 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function check() { $('input').attr('checked',true) } function uncheck() { $('input').attr('checked',false) } </script> </head> <body> Checkbox: <input type="checkbox" id="myCheck"> <button onclick="check()">Check Checkbox</button> <button onclick="uncheck()">Uncheck Checkbox</button> </body> </html>   <body> <p><input type="checkbox" name="vehicle" value="Bike" /> I have a bike</p> <button class="button0">xzczxczc</button> <button class="button1">xzczxczc</button> <script> $('input:checkbox').each(function () { $(this).prop('checked',false); }); $('.button0').click(function () { $('input:checkbox').prop('checked',true); }) $('.button1').click(function () { alert($('input:checkbox').prop('checked')) $('input:checkbox').prop('checked',f...
own1991 发布于 16小时前

后台系统上传文件回显上传进度条

xhr2
SubinY 发布于 16小时前 阅读 5

不懂这些SEO技巧,你还敢说你是前端? 作者原创 版权保护

这篇文章其实是我本人的总结,因为工作中做完了一个官方网站并成功上线,最后组长检查代码看到我的keyword等一系列信息都是空的,把我骂得狗血淋头。一言不合就作总结,总结一些简单但是我们能做的seo小技巧,送给想把网站做到极致的人。 SEO要点: 1.语义化html标签,用合适的标签嵌套合适的内容,不可过分依赖div,对浏览器更友善就能更容易被抓取。 2.重要的内容html代码放在前面,放在左边。搜索引擎爬虫是从左往右,从上到下进行抓取的,利用布局来实现重要的代码在上面 3.重要内容要写在html架构里面,蜘蛛不会抓取js的内容, 4.尽量减少使用iframe,因为蜘蛛不会抓取iframe的内容。 5.为图片img加上alt属性,加了alt就不必加title了,避免搜索引擎认为我们恶意优化。alt能让图片没加载时都能有文字提示。 6.需要强调的地方加上title,本页面内跳转a标签内也要加title。 7.重要的地方可以保留文字,有些地方必须用图,但是蜘蛛不会爬img,这时应该设置文本,再用缩进隐藏的方法去掉文字,例如logo的优化就是这样做的。注意隐藏不能用display:none,蜘蛛不会检索display:none的内容,应用这个方法的标签一般是logo,标题等重要信息 8.尽量做到js、css、html的分离,...
动感宅神 发布于 17小时前 阅读 24

* 判断是否SSL协议

* 判断是否SSL协议
蜗牛奔跑 发布于 17小时前 阅读 5

webpack

webpack
透笔度 发布于 17小时前 阅读 4

vue.js2.0实战(7):Webpack打包工具使用

一、什么是webpack 1. webpack是什么? webpack是一个模块打包工具。 用vue项目来举例:浏览器它是只认识js,不认识vue的。而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html、js、css甚至是图片资源;并且由于组件化,这些.vue文件之间还有错综复杂的关系。所以项目要被浏览器识别,我们就要使用webpack将它们打包成js文件以及相应的资源文件。 或者这么理解,我们以vue项目的形式编写项目逻辑,浏览器以他理解的方式来运行项目。webpack把我们的vue项目想表达的所有意图传递给浏览器让浏览器去运行。 PS:webpack功能不止于此,但这个功能是让我们项目能跑起来的必要条件!(个人理解,如有错误,还请批评指正) 2. 来个demo理解下 这里我们来理解下webpack是如何打包的~(转译会在loaders中提到)。首先我们写两个最简单的js hello.js console.log("hello~~") app.js console.log("hello app"); require("./hello.js") app.js中导入了hello.js,它们之间有导入关系。我们假如直接将app.js放到html中是会报错的。 hello app Uncaught ReferenceError: require is not defined at app.js:2 如果我们要维持这种关系我们就必须使用打包工具进行打包。在命令行中输...
BrillantZhao 发布于 18小时前 阅读 5

vue.js2.0实战(6):axios和网络传输相关知识的学习实践

在学习了之前的路由vue-router和状态管理vuex之后,就应该是网络交互了。就学习尤大推荐的axios了。刚好本人对网络请求这块除了会get、put、post和delete这四个方法之外知之甚少,刚好补全上。 注意:Vue官方推荐的网络通信库不再是vue-resource了,推荐使用axios。 1. axios安装 npm: $ npm install axios bower: $ bower install axios Using cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 2. 基本使用方法 GET请求 // Make a request for a user with a given ID axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // Optionally the request above could also be done as axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); POST请求 axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) ...
BrillantZhao 发布于 18小时前 阅读 2

前端工程师面试题(html+css)

![image.png](http://upload-images.jianshu.io/upload_images/1637794-01d955457df0566e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 正值金九银十的招聘旺季,我把我珍藏整理多年的前端面试题分享给大家,分三部分。这是第一部分,html和css布局相关的。 ## 1. HTML5相关 #### 1.1 新特性、移除了那些元素 HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。 **新特性(包括标签):** * 绘画 canvas; * 用于媒介回放的 video 和 audio 元素; * 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失; sessionStorage 的数据在浏览器关闭后自动删除; * 语意化更好的内容元素,比如 article、footer、header、nav、section; * 表单控件,calendar、date、time、email、url、search; * 新的技术webworker, websocket, Geolocation; **移除的元素:** * 纯表现的元素:basefont,big,center,font, s,strike,tt,u; * 对可用性产生负面影响的元素:frame,frameset,noframes; #### 1.2 处理HTML5新标签的浏览器兼容问题 **支持HTML5新标签:** IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利...
逆蝶_Snow 发布于 18小时前 阅读 4

为vue开发准备的一份es6语法笔记

es6语法
透笔度 发布于 18小时前 阅读 3

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

上次学习了vue-router的使用,让我能够在各个页面间切换,将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。 注:本文只是个人对vuex学习的一些理解,要深刻掌握还需要认真查阅官方文档。 一、基本介绍 Vuex 是一个专为 Vue.js 的SPA单页组件化应用程序开发的状态管理模式插件。 由于Vue SPA应用的模块化,每个组件都有它各自的数据(state)、界面(view)、和方法(actions)。这些数据、界面和方法分布在各个组件中,当项目内容变得越来越多时,每个组件中的状态会变得很难管理。这是vuex就派上用场啦~下面我们看一个简单的vuex例子。 1. 单个组件中的状态 假如只是在单个组件中要改变界面view很简单,只需要改变state数据源即可。如下代码: <template> <div> view: {{ count }} <button @click="increment">increment</button> </div> </template> <script> export default { // state data () { return { count: 0 } }, // actions methods: { increment () { this.count++ } } } </script> 所以,单个组件中的原理图是这样的: 2. 多个组件中的状态 然而,我们作...
BrillantZhao 发布于 18小时前 阅读 3

webpack+vue动态加载组件尝试

回想起来不知道算幸运还是不幸运,学习并实践的两个技术,都经历了巨大的变化并大受好评,一个是Python,一个是Vue。
任臻 发布于 19小时前 阅读 4

vue.js2.0实战(4):vue-router2学习实践

想学习Vue的SPA应用,路由这一块是必不可少的。相信很多和我一样刚接触前端的朋友对于路由这玩意是很困惑的。所以在我学习并成功使用了vue-router后,将我的个人经验分享出来,希望可以让同样对路由不知所措的同学有所帮助。 注意: 本文demo的项目结构用的是最新的命令行工具创建的webpack项目模板; 本文知识点是基于Vue2.0和vue-route 2的,更多内容请参考Vue.js官网和vue-router 2官方文档: 一、路由的安装: npm安装 可以使用npm直接安装插件 npm install vue-router --save 执行命令完成vue-router的安装,并在package.json中添加了vue-router的依赖。当我们在其他电脑上安装项目时只需要执行npm install即可完成安装。 安装完成之后,打开package.json会发现下面添加了一行: "dependencies": { ... "vue-router": "^2.7.0", ... }, 如果是要安装在开发环境下,则使用以下命令行: npm install vue-router --save-dev package.json "devDependencies": { ... "vue-router": "^2.7.0", ... }, 二、SPA中路由的简单实现(附demo) 下面让我们来配置路由并实现我们的第一次页面跳转。 官方提供的demo很简单,复制到HTML中也的确能跑,...
BrillantZhao 发布于 19小时前 阅读 3

那些年 HTML 中的灵异事件

> 最近在看 Angular 官方文档时看到了 Html 的 attribute 与 DOM 的 property,一下子解惑了许久以前困扰过我的一些问题,那些年以为的 HTML 灵异事件,原来是这样子的。 # 一、看不懂的操作 写一个 test.html 页面,代码如下: ``` 提交 ``` ### 灵异事件 1 在浏览器中打开,顺便打开控制台,在控制台中输入如下代码: ``` 1 document.getElementsByTagName('input')[0].value = 21 2 21 3 document.getElementsByTagName('input')[0].getAttribute('value') 4 "12" ``` 可以看到在第 1 行代码执行完成后页面中文本框已经变成了 21,第 2 行也打印了 21,但是第 3 行获取文本框 value 属性时发现打印出来的竟然还是 12,这就不免有些奇怪了。 此时在控制台的 Elements 选项卡里看页面 html 源码,可以看到 input 框里的 value 值依然是 12,但是页面中文本框的值命名是 21?? ### 灵异事件 2 打开页面看到页面中按钮为禁用状态,这是因为设置了 disabled = "true" 的原因。(这里不管值为什么,都会禁用按钮,可以试试 "false" 或者空字符串 "") ``` 1 document.getElementsByTagName('button')[0].getAttribute('disabled') 2 "true" 3 document.getElementsByTagName...
dk_virus 发布于 19小时前 阅读 2

Git怎样撤销一次分支的合并Merge

这个问题是我最近遇到的,这篇日志算是说明我的想法和思路
FeanLau 发布于 20小时前 阅读 6

vue.js2.0实战(3):基础示例

通过前两篇文章,我们已经了解了vue.js的环境配置,IDE使用,链接如下: vue.js2.0实战(1):搭建开发环境及构建项目 vue.js2.0实战(2):IDE配置及使用 接着就开始coding了,推荐先熟悉了解官网:https://cn.vuejs.org/ RUNOOB.COM也是一个不错的学习途径:http://www.runoob.com/w3cnote/vue-js-quickstart.html ok,下面开始 1. 参考官网 链接如下:https://cn.vuejs.org/v2/guide/ 先来看看官网的一个例子: 打开 工程目录下的 App.vue template 写 html,script写 js,style写样式 运行如下: 为了方便叙述,我们把官网例子写在同一个组件内 这里有两个坑: (1) 一个组件下只能有一个并列的 div,可以这么写,所以复制官网示例的时候只要复制 div 里面的内容就好。 但是不能按照下面的方式写: (2)数据要写在 return 里面而不是像官方文档那样子写 错误的写法: 然后就可以按照官方的文档自己逐个练习了。 2. 组件使用 前面讲得基本上都是各种常用组件的数据绑定,下面还得说说的是 Vue 的组件的使用。 在工程目录/src下创建component文件夹,并在component文件夹下创建一个 firstcomponent.vue并写仿照 App.vue 的格式和前面学到的知识写一个组件。 <template> <div ...
BrillantZhao 发布于 20小时前 阅读 5

议 Angular 依赖注入

> 依赖注入,也叫 DI,直接在学习 JAVA 的时候就遇到这个概念,无奈一直没弄明白到底是干嘛的,以及为什么要用它。最近在阅读 Angular 的官方文档时对它有的进一步的认识,总结如下。本文以 Typescript 为例的,语法和 JS 差不多,只是概念的总结,代码只是示意作用。 # 一、依赖注入 ## 1. 不用依赖注入怎么写代码 以学校为例,学校里有老师和学生两个群体。不使用依赖注入的写法如下: ``` Typescript // School.ts class School { public student: Student; public teacher: Teacher; constructor () { this.student = new Student(); this.teacher = new Teacher(); } } ``` 创建一个学校实例: ``` // test.ts const school = new School(); // 变量 school 是一个具体的学校 ``` 在上述的例子里,老师和学生两个群体是在学校构造函数中定义的,如果现在需要修改学生类的构造函数,如增加一个参数,也就是将 `new Student()` 改为 `new Student(lenth)` 那么还需要到 `School.ts` 中去修改代码。这一点无疑跟我们的解耦性设计思路违背。我们希望的是各个类尽量做到不想关,改一个地方,不需要去改其它地方。 上述所说的修改代码实现如下: 修改 Student 构造函数 ``` ...
dk_virus 发布于 20小时前 阅读 1

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对象为节点的虚拟...
染陌同学 发布于 5天前 阅读 1420 点赞 4

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

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

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 发布于 2周前 阅读 2143 评论 7 点赞 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...
染陌同学 发布于 3周前 阅读 2475 评论 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支持,答案就是语言服务。 智能感知和重构提示(...
我是钟钟 发布于 4周前 阅读 3456 评论 31 点赞 1

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个月前 阅读 2326 评论 16 点赞 5

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

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

捋一捋JavaScript对象的继承

文章针对不理解继承的程序员朋友去剖析和理解继承.
Jill1231 发布于 2个月前 阅读 2523 评论 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 发布于 2个月前 阅读 1121 点赞 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个月前 阅读 2658 评论 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个月前 阅读 8720 评论 19 点赞 13

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

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

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

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

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

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

CSS 布局经典问题初步整理

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

Web Components简述

要说最近几年来,前端开发最火的一个趋势或最火的前端开发框架是什么,第一想到的是,组件及推崇组件化开发的React框架。本文将介绍Web Components规范并就组件的几大特性进行讨论
熊建刚 发布于 4个月前 阅读 2132 评论 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个月前 阅读 2642 评论 12 点赞 6
顶部