• fis3试用与构建配置研究

    一、安装 安装初始化 1 2 3 npm i -g fis3 fis3 -v fis3 init 二、配置 类似Gruntfile.js或Gulpfile.js,新建fis-config.js文件 配置api介绍如下: fis.set(key, value) 设置一些配置,如系统内置属性 project、namespace、modules、settings。 fis.set 设置的值通过fis.get()获取 fis.get(key) 获取已经配置的属性,和 fis.set() 成对使用 fis.match(selector, props, [, important]) 给匹配到的文件分配属性,文件属性决定了这个文件进行怎么样的操作;fis.match 模拟一个类似 css 的覆盖规则,负责给文件分配规则属性,这些规则属性决定了这个文件将会被如何处理;另外,后面分配到的规则会覆盖前面的; 1 2 3 4 5 6 7 fis.match('{a,b}.js', { release: '/static/\$0' }); fis.match('b.js', { release: '/static/new/\$0'...


  • css清除元素间距

    现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: 1 <input /> <input type="submit" /> 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题: 1 2 3 4 5 6 7 8 9 10 .space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb; } <div class="space"> <a href="##">惆怅</a> <a href="##">淡定</a> <a href="##">热血</a> </div> 这种表现是符合规范的应该有的表现(如果有人认为是bug就太严重了)。 不过,这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?以下展示N种方法(欢迎补充)! 方法一、移除空格 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以: 1 2 3 4 5 6 <div...


  • shadow dom解析

    1.shadowdom解析 1.1 什么是shadow dom 先看个例子: 1 2 3 <video controls autoplay name="media"> <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> </video>   这样一个标签可以在浏览器产生几个界面你相对较复杂的播放器,怎么做到的?   为了理解问题,可以选择chrome设置里面的show userAgent shawdow,就可以看到shadow dom里的内容。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <video src="a.mp4" width="480" height="360"> #shadow root...


  • Nativescript跨终端应用程序开发方案研究

    1.环境准备 安装nodejs 安装nativescript 1 $npm install -g nativescript 或者下载github上项目代码进行构建(不推荐) 安装java JDK jdk是Java运行开发环境,按android开发必须的开发的环境 1 2 3 JAVA_HOME D:/program file/java/jdk_1.7.34/ path D:/program file/java/jdk_1.7.34/bin classpath D:/program file/java/jdk_1.7.34/lib 测试方法:java -version 安装Apache ant Apache Ant,是一个将软件编译、测试、部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发。由Apache软件基金会所提供。这里用到的的是用于android签名证书等打包(android开发过程中ide使用gradle配置打包,早期都是用的ant打包,这里使用的方法比较原始) http://ant.apache.org/bindownload.cgi 上下载最新版apache-bin(可选择安装型或压缩包型),然后添加系统环境变量 1 2 3 ANT_HOME C:/ apache-ant-1.9.5 path C:/ apache-ant-1.9.5/bin classpath C:/apache-ant-1.9.5/lib 测试方法:ant -version 安装Android sdk 下载最新的adk,http://developer.android.com/sdk/installing/index.html 下载后解压到某个目录(例如D盘),然后添加系统环境变量 1...


  • Ionic Hybrid跨终端应用程序开发方案研究

    ionic是最近一个很流行的Hybird移动开发解决方案,个人兴趣研究了一下,还是不错的 https://github.com/driftyco/ionic 1.环境准备 安装nodejs 安装cordova和ionic 1 $npm install -g cordova ionic 或者下载github上项目代码进行构建(不推荐) 安装java JDK jdk是Java运行开发环境,按android开发必须的开发的环境 1 2 3 JAVA_HOME D:/program file/java/jdk_1.7.34/ path D:/program file/java/jdk_1.7.34/bin classpath C:/apache-ant-1.8.1/lib 测试方法:java -version 安装Apache ant Apache Ant,是一个将软件编译、测试、部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发。由Apache软件基金会所提供。这里用到的的是用于android签名证书等打包(android开发过程中ide使用gradle配置打包,早期都是用的ant打包,这里使用的方法比较原始) http://ant.apache.org/bindownload.cgi 上下载最新版apache-bin(可选择安装型或压缩包型),然后添加系统环境变量 1 2 3 ANT_HOME C:/ apache-ant-1.9.5 path C:/ apache-ant-1.9.5/bin classpath C:/apache-ant-1.9.5/lib 测试方法:ant -version 安装Android sdk 下载最新的adk,http://developer.android.com/sdk/installing/index.html...


  • 简单gulp前端自动化构建环境搭建

    为了前端团队更好的协作开发同时提高项目编码质量,我们需要将Web前端使用工程化方式构建; 目前需要一些简单的功能: 1 2 3 4 5 6 1. 版本控制 6. 编译SASS 2. 检查JS 3. 图片合并 4. 压缩CSS 5. 压缩JS 这些都是每个Web项目在构建、开发阶段需要做的事情。前端自动化构建环境可以把这些重复工作一次配置,多次重复执行,极大的提高开发效率。 目前最知名的构建工具: Gulp、Grunt、NPM + Webpack; 1 2 3 4 5 6 7 grunt是前端工程化的先驱 gulp更自然基于流的方式连接任务 Webpack最年轻,擅长用于依赖管理,配置稍较复杂 推荐使用Gulp,Gulp基于nodejs中stream,效率更好语法更自然,不需要编写复杂的配置文件 Use Gulp to automate front-end build tasks Gulp是基于 Node.js的,需要要安装 Node.js 1、为了确保依赖环境正确,我们先执行几个简单的命令检查。 1 2 3...


  • polymer组件化与vm特性

    一、Polymer Polymer是Google在2013年的Google I/O大会上提出了一个新的UI框架。Polymer的实现使用了WebComponent标准,并且Polymer可保证针对包含各种平台的Web Component规范本地实现的浏览器、库和组件的使用效果完全相同。 1.1 Polymer框架: Polymer框架可以分为三个层次: 基础层(platform.js):是基本构建块。大多数情况下,基础层都是本地浏览器的API。 核心层(polymer.js):实现基础层的辅助器。 元素层:建立在核心层之上的UI组件或非UI组件。 1.2 基础层 基础层包括以下技术: DOM Mutation Oberservers和Object.observe():用于观察DOM元素的变更,是纯JavaScript对象。 指针事件:处理鼠标和触摸操作,支持所有的平台。 阴影DOM:封装元素内的结构和样式,适合自定义元素。 自定义元素:可以自定义HTML5的元素。自定义元素的名字必须包含一个破折号,这是一种简单的命名空间标识,以区别于标准元素。 HTML导入:包自定义元素。这些包可能包含HTML、CSS和JavaScript。 模型驱动的视图(MDV):把数据直接绑定到HTML。 Web动画:一套统一的Web动画API。 阴影DOM、自定义元素和HTML元素Web Components,是网络组件模型。Web Components是Polymer框架的最重要的基础。 platform.js目前浏览器还没有提供,它仅有31KB大小。 1.3 核心层和元素层,即组件UI和组件逻辑 1 2 <polymer-panels on-select="panelSelectHandler" selected=""> </polymer-panels> 其架构是面向组件的,它由HTML5元素组成,元素甚至可以用户界面,比如动画是元素,它没有UI,而是代替点。同时响应式设计内建了许多Widget,这意味着它们能自适应多种给定的平台,如手机、平板、桌面等。 二、Polymer的一个例子 1. 先看下面polymer的一个例子代码 1 2 3 4 5 <script src="../components/platform/platform.js"></script> <!-- 下面用到的几个组件 --> <link rel="import"...


  • webpack--更优秀的打包管理工具

    webpack是什么 德国开发者Tobias Koppers开发的模块加载器,可用于处理依赖分析和进行打包。 commonJS与AMD支持 Webpack 对 CommonJS 的 AMD 的语法做了兼容,不过实际上, 引用模块的规则是依据 CommonJS 来的,即如果使用AMD语法,还是根据commonJS语法进行模块查找的。 当然我们之前可也以这么写来兼容AMD和commonJS,但是用了webpack语法上就可以任意去写了: 1 2 3 4 5 6 7 8 9 10 11 12 13 (function (window, factory) { if (typeod exports === 'object') { module.exports = factory(); } else if (typeof define === 'function' && define.amd) {...


  • 前端性能测试

    一、performance timing API performance timing API支持ie9以上浏览器,页面请求的整个过程和performance API记录的点 http://javascript.ruanyifeng.com/bom/performance.html 根据这个过程 performance.timing会记录页面请求的各个点的timestamp,经过简单输出,就可以得到页面请求每个过程所消耗的时间了。 也可以使用现有的实现,原理和以上代码相同: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 function performanceTest(){ var timing = performance.timing, readyStart = timing.fetchStart - timing.navigationStart,...


  • javascript基础--js不同浏览器的差异性

    javascript的浏览器差异性特征 1 2 var ie6=!-[1,]&&!window.XMLHttpRequest //检查IE6最简洁代码 兼容性问题是由于多个浏览器同时存在而导致的。这些浏览器在处理一个相同的页面时,表现有时会有差异。这种差异可能很小,甚至不会被注意到;也可能很大,甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。下面让我们一起来看Javascript在解决兼容性问题上的方法。 document.form.item 问题 问题: 代码中存在 document.formName.item(“itemName”) 这样的语句,不能在FF下运行 解决方法: 改用 document.formName.elements[“elementName”] 集合类对象问 问题: 代码中许多集合类对象取用时使用(),IE能接受,FF不能 解决方法: 改用 [] 作为下标运算,例: 1 document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1] window.event 问题: 使用 window.event 无法在FF上运行 解决方法: FF的 event 只能在事件发生的现场使用,此问题暂无法解决。可以把 event 传到函数里变通解决: 1 2 3 4 5 onMouseMove = "functionName(event)" function functionName (e) {...

公众号

加我赏红包,哈哈哈

公众号

欢迎关注 极限前端 公众号