文章列表
邝伟科 于 1年前发表 2594 6 0
本文希望通过20个简单的例子让没用过Q.js的同学快速掌握其基本用法 1. 新建实例 html代码: <divid="demo" q-text="msg"></div> js代码: var q = new Q({ el: "#demo", data: { msg: 'this is a demo' } }) try [http://codepen.io/kuangwk/pen/pJqqaX?editors=101] Q.js是一个mvvm框架,可以通过构造函数Q new 一个viewModel的实例,其传入的参数el即要绑定的view,可以是selector也可以直接是dom元素,而第二个参数data即model,也就是数据对象。 2. 内容绑定: Q-TEXT, Q-VALUE html: <div id="demo" > <p q-text="msg"></p> <input q-value="name"> </div> js: var q = new Q({ el: '#demo', data: {
1年前
前端库
moonye 于 1年前发表 2422 4 1
THINKJS 开始 * 安装 npm install -g thinkjs-cmd * 查看是否安装成功 thinkjs -v * 新建项目 mkdir new_dir_name; cd new_dir_name; thinkjs . //正常到这里会自动打开浏览器页面访问项目 * 手动启动 node www\index.js 配置 thinkjs的配置有很多, 系统默认配置 -> 应用配置 -> 调试配置 -> 模式配置 基本上只用到应用配置,应用配置的路径是 App/Conf/config.js , 配置在程序中是很方便读取和写入的 //读取var dbHost = C('db_host'); //写入 C('name', 'xxx'); C({ 'name': 'welefen', 'use_cluster': false }) 系统默认配置路径: lib/Conf/config.js 调试配置路径: App/Conf/debug.js 模式配置路径: App/Conf/mode.js 架构 URL中的含义
1年前
前端库
陈映平 于 2年前发表 2193 1 0
It is frequently asked that how to load components on demand if you use react with react-router . In the official readme, there is a recommended loader named react-router-proxy-loader [https://github.com/webpack/react-proxy-loader/] that can fullfill this need. However, it depends on webpack and there are many cases where webpack is not included in the build task.
2年前
前端库
daihuimi 于 2年前发表 5841 1 0
本文从新人角度讲一讲对angular中MVVM模式的理解,以及angular特性的源码实现。img [https://angularjs.org/img/AngularJS-large.png] MVVM核心原理 MVVM模式是 Model-View-ViewMode (模型-视图-视图模型)模式的简称,其最早出现在微软的WPF和Silverlight框架中。MVVM模式利用框架内置的双向绑定技术对MVP(Model-View-Presenter)模式的变型,引入了专门的ViewModel(视图模型)来实现View和Model的粘合,让View和Model的进一步分离和解耦。 主要思想其实也很简单:在ViewModel中构建一组状态数据(state data),作为View状态的抽象。然后通过双向数据绑定(data binding)使ViewModel中的状态数据(state data)与View中的显示状态(screen state)保持一致。这样,ViewModel中的展示逻辑只需要修改对应的状态数据,就可以控制View的状态,从而避免在View上开发大量的接口。
2年前
前端库
ouven ,https://ouvens.github.io/ 于 2年前发表 6168 0 0
1. 什么是MOCKJS http://mockjs.com/ [http://mockjs.com/] Mockjs是个能够拦截页面ajax请求并模拟返回数据的小工具,借助Mockjs,前端开发中在后台测试接口还没有给的时候就可以自己拦截请求模拟数据进行愉快的开发了,所以只要制定好了协议,前后端分离开发的成本可以降到基本为0,也不需要联调工具了 2,MOCKJS主要功能 * 基于数据模板生成模拟数据 * 基于html模板申城模拟数据 * 拦截并模拟ajax请求 当然mock模拟的数据不只是随便的输出字符串,它包含了各种格式的模拟数据,例如姓名,段落,时间,日期,图片地址,身份证号,电话,邮箱,ip等等,所以以后搞数据自动校验什么的再也不用手动输入测试了。也就是Mock自动了做了很多测试调试中的那部分体力活,我们只需要安静的写代码就好了。 数据模板则是根据一个模板自动根据某个规则产生数据,例如序号产生自增的数组等 数据模板定义 DTD数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值: 'name|rule': value 例如:
2年前
前端库
ouven ,https://ouvens.github.io/ 于 2年前发表 2126 0 0
1.SHADOWDOM解析 1.1 什么是shadow dom先看个例子: <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里的内容。 <video src="a.mp4" width="480" height="360"#shadow root <div pseudo="-webkit-media-controls" <div pseudo="-webkit-media-controls-overlay-enclosure" <input type="button" style="display: none;"
2年前
前端库
黎清龙 于 2年前发表 2422 5 0
1 MVVM 学习 1.1 实现原理 mvvm类框架的实现原理不复杂,大致如下: * 模板分析得到依赖的属性 * 通过某种变动监测手段监测这些依赖的属性 * 当属性变动的时候,触发相应的directive的处理逻辑即可 实际上,directive的处理逻辑不一定是对view进行操作,比如上报。但是,在mv的思想下,建议对view的操作都集中在directive里实现 从最核心上看,mv思想仅仅是一个观察者模式的具体应用于延展而已 1.2 核心技术点 1.2.1 模板分析 模板分析是比较基础的,凡是和view相关的基本都会涉及模板,这是原始资料,这里的关键点是 模板来源 的问题,实际上,它应该可以是 任何字符串 这里暗示了框架需要一个模板解析器,不管这个解析器复杂还是简单,它都处于一个模式:【输入 --> 模板引擎 --> 输出】 于是,mvvm的模板解析器特点如下: * 输入:任何符合规则的字符串 * 输出:需要监听的data.attr,directive,filter 在设计一个框架的时候,如果想要有更好的可扩展性,则
2年前
前端库
分享的项目:es6-tools By addyosmani

imweb社区可以分享github项目啦!先分享一个ES6的工具集。

1274 1 0
2年前
前端库
frankfang 于 2年前发表 2094 8 1
本文通过实现一个 TodoMVC 应用来说明一个 Flux 应用的结构是怎样的。本文会告诉你如何一步一步地实现这个应用,完整的源代码可以从 Github [https://github.com/facebook/flux/tree/master/examples/flux-todomvc/] 下载。 首先,我们需要 1. 基本的项目模板,方便把 jsx 文件编译为 js 文件 2. 一个基于 CommonJS 的模块系统,因为JS本身并没有模块系统 我们可以从 react-boilerplate [https://github.com/petehunt/react-boilerplate] 这个模板开始。你应该已经安装了 Node.js 了吧,那么就直接从 github 将 react-boilerplate clone 下来,进入目录,依次运行 npm install npm run build 和 npm start ,然后我们的 jsx 文件就会被持续地编译为 js 文件了。
2年前
前端库