文章列表
陈映平 于 1年前发表 1677 0 0
写在前面 redux的源码很简洁,除了applyMiddleware比较绕难以理解外,大部分还是 这里假设读者对redux有一定了解,就不科普redux的概念和API啥的啦,这部分建议直接看 官方文档 [http://camsong.github.io/redux-in-chinese/index.html] 。 此外,源码解析的中文批注版已上传至github,可 点击查看 [https://github.com/chyingp/redux-source-insight] 。本文相关示例代码,可 点击查看 [https://github.com/chyingp/redux-source-insight/tree/master/examples] 。 源码解析概览 将redux下载下来,然后看下他的目录结构。 npm install redux 这里我们需要关心的主要是 src 目录,源码解析需要关心的文件都在这里面了 * index.js :redux主文件,主要对外暴露了几个核心API * createStore.js : createStore 方法的定义
1年前
前端库
moonye 于 1年前发表 2791 0 0
PROMISE介绍 项目相关demo和代码地址 [https://github.com/moonye6/PromiseB] 介绍 Promise 对象用于延迟(deferred) 计算和异步(asynchronous ) 计算.。一个Promise对象代表着一个还未完成,但预期将来会完成的操作。 Promise 对象是一个返回值的代理,这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值:异步方法会返回一个包含了原返回值的 promise 对象来替代原返回值。 引自 MDN [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise] 它解决什么问题 一个简单的示例 执行一个动画A,执行完之后再去执行另一个动画B setTimeout(function(){ //A动画console.log('A'); setTimeout(function() {
1年前
前端库
yisbug 于 2年前发表 1650 1 0
如何在前端编码时实现人肉双向编译 React+flux是目前最火的前端解决方案之一,但flux槽点颇多,例如store比较混乱,使用比较繁琐等,于是出现了很多第三方的基于flux优化的架构。 有人统计了目前主流的flux实现方案,感兴趣的可以看这里: Which Flux implementation should I use? [https://github.com/kriasoft/react-starter-kit/issues/22] 其中 redux 是目前 github 上 star 最多的一个方案,该方案完全独立于 react ,意味着这套理念可以作为架构层应用于其他的组件化方案。同时官方也提供了 react-redux 库,帮助开发者直接使用 react+redux 快速开发。 个人理解它的主要特性体现在以下几点: 1. 强制使用一个全局的 store , store 只提供了几个简单的api(实际上应该是4个),如 subscribe / dispatch (订阅、发布), getState , replaceReducer 。
2年前
前端库
何璇 于 2年前发表 2247 3 0
近几年来由于web应用的交互越来越复杂,前端技术也迎来了一个飞速发展的时期。本文意在描述前端MV 类型的框架发展历程及对部分MV\ 框架的介绍。 为什么需要MV* 从前的web应用,前端主要负责改善用户体验,而服务器则将视图(view)和数据结合渲染成页面吐给浏览器。而随着Ajax等技术的出现,如今的web应用的也变得越来越复杂,相比于桌面应用来说也不虚。 如果此时我们还是仅仅使用jquery类库来开发web应用,那么随着应用的功能越来越丰富,业务逻辑越来越复杂,你的代码就可能会变成这样: [http://7tszky.com1.z0.glb.clouddn.com/FnSisvI1lksq3mNf7V4jW4_mZXWG] 然后应用就会在一堆 杂乱无章的选择器和回调函数 中死亡。所以前端也需要将代码的逻辑分层,引用设计模式分离代码的职责,解除不同逻辑之间的耦合,使得前端的代码具有良好的维护性和扩展性。 什么是MV*
2年前
前端库
邝伟科 于 2年前发表 2803 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: {
2年前
前端库
moonye 于 2年前发表 2760 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中的含义
2年前
前端库
陈映平 于 2年前发表 2416 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年前发表 7079 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年前发表 7271 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年前发表 2360 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年前发表 2650 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的工具集。

1397 1 0
2年前
前端库