• 移动端mvvm框架qvm实现

    gitHub地址 1,移动端minimvvm框架qvm实现 qvm概念,一个适用于移动端的mini mvvm(什么是mvvm?没了解的同学自己去了解)框架。参考了angular和vuejs的设计实现思路,并进行简化封装,目前使用的zepto基本依赖库,使用最少的代码实现了基础功能版。 2,为什么要做它 PC浏览器时代,实现mvvm有着麻烦的兼容性问题。而在移动浏览器时代,浏览器原生的支持可以让我们用最少的代码来实现一个mvvm框架库,来最大程度的减少移动端业务代码的开发工作。预计对于中大型的移动前端应用项目,使用mvvm能减少至少30%的业务量,让项目更容易维护。 (不过目前仍有很多不完善的地方后面需要持续改进) 3,及其简单的API介绍 directive: 以q-开始的属性为我们定义的元素动作指令 vm模型结构介绍: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 { $id: 823832887973495, //qvm对象的全局id,每个qvm对象对应一个 $elem: #div, //对应的view $model: { //viewModel,通过directive关联view和model的操作 text:{ ns: ns, //获取对象data或指令的namespace accessor: accessor, //同一的外部访问器,vm通过修改它来改变 key: text, //指令名称 directive:...


  • gulp搭建简单构建环境

    Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩、图片压缩、JS合并、SASS同步编译并压缩CSS、服务器控制客户端同步刷新。 所有功能前提需要安装nodejs和ruby。 Gulp安装 全局安装Gulpjs npm install -g gulp #全局安装 局部安装Gulpjs npm install gulp –save-dev # 局部安装 全局安装 将安装包放在 /usr/local 下 可以直接在命令行里使用 本地安装 将安装包放在 ./node_modules 下(运行npm时所在的目录) 可以通过 require() 来引入本地安装的包 选择Gulp组件 前端项目需要的功能: 1、图片(压缩图片支持jpg、png、gif) 2、样式 (支持sass 同时支持合并、压缩、重命名) 3、javascript (检查、合并、压缩、重命名) 4、html (压缩) 5、客户端同步刷新显示修改 6、构建项目前清除发布环境下的文件(保持发布环境的清洁) 通过gulp plugins,寻找对于的gulp组件 gulp-imagemin: 压缩图片 gulp-ruby-sass: 支持sass gulp-minify-css: 压缩css gulp-jshint:...


  • 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) {...

公众号

加我赏红包,哈哈哈

公众号

欢迎关注 极限前端 公众号