Fish

0. 学习路线

前期自学

fish基础组件（写简单demo） -> 模块化开发（写简单demo） -> 实际项目代码阅读

实际开发

看组件示例
看fish API
看代码示例
百度

1. 环境搭载

下载fihs发布包
工具的安装和使用：git、node、fish-cli
前端编辑器：vs code、hbuilder、sublime…

2. 前端基础入门

2.1 css

position
定义和用法
position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
aria-hidden：
Accessible Rich Internet Applications (ARIA) 规定了能够让 Web 内容和 Web 应用（特别是那些由 Ajax 和 JavaScript 开发的）对于残障人士更易使用的各种机制。例如，ARIA 提供了易用的导航地标、JavaScript 组件、表单提示以及错误信息、实时内容更新等。
display属性：display 属性规定元素应该生成的框的类型
HTML<label>标签的for属性：规定label与哪个表单元素绑定。
ajax
实现左侧导航栏高度自适应右边内容：js实现，css也可以。

2.2 js/jQuery

fish封装js函数
js函数语法

indexView.index(function(result){if(result){indexView.render();//渲染首页,}fish.history.start();//启动路由});index: function (callback) {Http.isLogin({callback:function(result){callback.call(this,result);}})},isLogin: function(json) {//判断是否有用户变量数据var userData = Http.getCacheMap("userData");if (userData) { //存在用户数据json.callback.call(this, true);} else {//请求用户数据Http.ajax({url: apiJson.login.getUserData,success: function(result, status, response) {var isLogin = false;if (result && result.result) { //拿到用户数据Http.setCacheMap("userData", result.result);isLogin = true;}json.callback.call(this, isLogin);}});}},

a. index()
从函数对象开始，IndexView对象定义了index方法，而该方法定义了一个函数，
并作为对象的属性存储。对象方法就可以通过添加()来作为一个函数来调用，调用其定义的函数。

以上的index()即调用的为index定义的函数。

一般定义的函数都有返回值

b. index(function(){})
函数作为参数传递

c. index(function(result){...})
result是index()的返回结果

d. callback.call(this, result)

callback:

在JS中，函数就是一种对象.它有对象应该有的所有操作：

存在变量名中
当作参数传到另一个函数中
在函数中被创建
在函数中被返回
所以，我们可以把函数当作变量传到另一个函数里，传进去之后执行甚至返回等待之后的执行。这就是callback函数的本质。
参考博客链接
callback函数就是被当作参数传入另一个函数的函数，并且传入之后在另一个函数中被执行。他们在jQuery和JS中随处可见。
//click函数中的参数不是普通的参数，而是一个函数
//那个函数就是callback函数

$("#btn_1").click(function() {alert("Btn 1 Clicked");
});

* callback.all(this, result):*
通过call 可以改变this的指向。
为了改变某个函数运行时的 context 即上下文而存在的，换句话说，就是为了改变函数体内部 this 的指向。
在这里即把this指向result
this的用法：
this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁调用的就指向谁
3. ajax

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

jQuery ajax

2.3 jQuery

* jQuery HTML/CSS方法

height() （可以用来通过计算右侧内容的高度，设置左侧导航的高度）

返回高度：

$(selector).height()

设置高度：

$(selector).height(value)

3. fish-cli脚手架模块化开发

3.1 脚手架执行流程

1. index.html引入 fish-desktop-require.js 文件，用于处理模块文件加载开发

<script ...></script>

2. 入口文件main.js，加载主视图IndexView，进行页面渲染初始化

require(['demo/main/views/IndexView'], function(IndexView) {var indexView = new IndexView();indexView.render();});

3. 主视图IndexView又定义两个子视图的依赖，框架会分析依赖关系，自动加载依赖模块文件 modules/module-a/view/AlphaView.js 和 modules/modue-b/views/BetaView.js，如果这两个模块也有依赖，重复刚才分析操作加载

define(['hbs!../templates/indexView','demo/test/views/TestView', 'demo/test/views/Test1View', 'demo/test/views/Test2View'
], function(mainHtml, TestView, Test1View, Test2View){var IndexView = fish.View.extend({// 视图 Dom 元素el: 'body',// 视图模板函数template: mainHtml,// 填充模板数据/*serialize: {""},*/// 视图事件处理events: {'click #test1': 'onClick'},// 视图初始化initialize: function () {console.log('enter initialize...');this.insertView('#test1', new Test1View());this.insertView('#test', new TestView());this.insertView('#test2', new Test2View());},/* * 视图渲染结束处理：*   视图初始化之后，子视图已经插入到主视图，可以通过选择器来对渲染结束后的页面进行处理*/afterRender: function() {// do somethingconsole.log('enter afterRender...');},// 视图移除处理cleanup: function() {// do somethingconsole.log('enter cleanup...');},onClick: function() {alert('click');}});return IndexView;
});

4. 子视图js，类似于主视图，一般会加载一些模块插件（hbs/css/i18n/text）

使用插件时，需要加上 插件名!，然后跟上模块路径。

上面主视图也插入了hbs插件，主视图hbs中定义了页面的整体框架，然后插入含有实际内容的子视图。

比如：

define(['hbs!../templates/testView.hbs'], function (template) {var TestView = fish.View.extend({manage: true,template: template,});return TestView;
});

5. 模块插件：

hbs/css/i18n/text

3.2 一般项目结构

    XXX ----业务代码XXX ---业务XX---具体的模块名称actions---请求后台templates---模板htmlviews----视图文件common---公共的模块iamges---业务图表less----业务css,less样式frmfish-desktop----fish依赖portal---fish依赖i18n----国际化文件image----框架级图片LESS----用于打包后的lessmock----模拟数据文件mock.js----依赖rules.js----模拟数据文件styles-----字体文件.gitignore----忽略文件index.html----主入口main.js----主入口js

3.3 模块语法

3.3.1 视图

fish.desktop.fish.View

创建视图，例如：

var userView = fish.View.extend({el: falsetemplace: template,events: {"click .btn": "onNew",},initialize: function() {//...},render: function() {//...},afterRender: function() {//...},onNew: function() {//...}
});

基本属性（参数）Config options有：

attributes(保留属性，视图Dom元素属性，如果 el 属性有值时，忽略该属性，下同)
className(保留属性)
tagName(保留属性)
id(保留属性)
manage
el 视图 Dom
events 视图 Dom 事件监听处理定义
template 视图模板函数
serialize 填充数据

例：

直接插入模板：

define(['hbs!../templates/test1View.hbs'], function (template) {var Test1View = fish.View.extend({template: template});return Test1View;
});

不对模板做其他处理，单纯引入hbs模块插件

数据渲染：

简单插入数据：

var AppView1 = fish.View.extend({manage: true,el: '#app-1',template: fish.compile('<p>{{message}}</p>'),serialize: {message: 'Hello World'}
});
new AppView1().render();

serialize 数据会填充到 template 模版里，然后渲染到 #app1 节点上, 以此来实现数据渲染。

扩展有判断、循环渲染……

DOM交互：

var AppView4 = fish.View.extend({manage: true,el: '#app-4',template: fish.compile('<form>\<div class="form-group">\<label>Username</label>\<input type="text" class="form-control js-username">\</div>\<div class="form-group">\<button type="button" class="btn btn-primary">Click</button>\</div>\</form>'),events: {'click .btn': 'onClick'},onClick: function () {this.$('.js-username').val('Li Lei');}
});

对DOM元素进行处理, 点击按钮，改变输入框中的值

widget控件定义：就是之前写过的一些常用组件

Web Widget,中文译名被称作是微件,是一小块可以在任意一个基于HTML的Web页面上执行的代码，它的表现形式可能是视频，地图，新闻，小游戏等等。它的根本思想来源于代码复用，通常情况下，Widget的代码形式包含了DHTML,JavaScript以及Adobe Flash。当widget和js和在一起的时候，就需要js能控制本地的一些东西，比如说打开某个文件，修改系统时间。这就需要对js功能进行扩展。其实普通的浏览器也有这个需求，通过增加插件来支持更多的东西。

控件定义样放置在 afterRender 函数里

Combobox：下拉列表
DataPicker: 日期
accordion: 页签
HTML需要按照fish规定的格式，使用panel等。
-

数据模型

模型提供数据变化监听

数据集合

前端路由

博客链接

当用户使用 http://10.0.0.1/about 来访问该页面时，Web 服务会接收到这个请求，然后会解析 URL 中的路径 /about，在 Web 服务的程序中，该路径对应着相应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次「路由分发」，这个分发就是通过「路由」来完成的。
路由分发，把以前后台做的事情，拿到前端来做。
前端路由比较适合页面中只有一部分发生变化的页面, 也就是单应用, 这样可以避免每次都要向服务器获取整个页面的东西,用户体验会好些. 如果多个页面一点关系都没有,没有任何重复的地方, 完全没有必要使用路由的. 但是目前大多数网站都可以看成是单应用, 一般网页的头部尾部还有导航条都是不变的, 只是切换中间的内容，从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。
在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户就不能复制到想要的地址，用前端路由做单页面网页就很好的解决了这个问题。

路由定义：fish 封装的前端路由

fish.Router.extend({routes: {"help": "help",    // #help"search/:query": "search",  // #search/kiwis"search/:query/p:page": "search"   // #search/kiwis/p7},help: function() {...},search: function(query, page) {...}
});

映射规则：

:param 它在斜线之间匹配 URL 信息
*splat 支持通配符配置
(/:optional) 可选匹配，把可选部分放到小括号里

路由使用：
当路由定义完后，需要调用 fish.history.start() 或者 fish.history.start({pushState: true}) 启动驱动 URL 路由

3.4 实际项目源码阅读

3.5 实际项目开发

前端FISH框架学习笔记相关推荐

java前端nui_spring mvc 及普元nui前端框架学习笔记
spring mvc 及普元nui前端框架学习笔记页面传值一.同一页面直接通过$J.getbyName("id").setValue(id); Set值即可二.跳转页面(b ...
SpringMVC框架--学习笔记（下）
接上篇:SpirngMVC框架--学习笔记(上):https://blog.csdn.net/a745233700/article/details/81038382 17.全局异常处理: 系统中异常包 ...
SpringMVC框架--学习笔记（上）
1.SpringMVC入门程序: (1)导入jar包:spring核心jar包.spring-webmvc整合Jar包 (2)配置前端控制器:web.xml文件中 <?xml version=& ...
360前端星计划学习笔记0410
360前端星计划学习笔记(五)正则的三个应用场景–王峰老师 360前端星计划学习笔记(六)NodeJS基础入门文章目录正则正则表达式的创建和使用创建正则表达式的两种方式正则表达式的常见用法 ...
php 里的cl框架手册,CI框架学习笔记（一）
本文是CI框架学习笔记的第一篇,主要介绍了CI框架的环境安装,基本术语以及框架流程,非常的详细,有需要的朋友可以参考下最开始使用CI框架的时候,就打算写一个CI源码阅读的笔记系列,可惜虎头蛇尾,一直 ...
JeeSite 框架学习笔记
JeeSite 框架学习笔记目录 JeeSite 框架学习笔记一.全局配置 1. 获取 Resource资源实际路径 DefaultResourceLoader 2. 配置前端 js css 二. ...
C4前端云原生学习笔记——vue
C4前端云原生学习笔记文章目录 C4前端云原生学习笔记一.vue知识点 1.vue简介 2.开发工具 3.初识vue 一.vue知识点 1.vue简介官网:cn.vuejs.org 渐进式框架: ...
bootstrap框架学习笔记
bootstrap框架学习笔记 1.Bootstrap简介 2.基本使用 3.容器 4.设备划分 5.栅格系统 6.展示与隐藏 7.其他类前缀 8.组件直接参考开发文档 1.Bootstrap简介 B ...
好程序员web前端分享Nodejs学习笔记之Stream模块
好程序员web前端分享Nodejs学习笔记之Stream模块一,开篇分析流是一个抽象接口,被 Node 中的很多对象所实现.比如对一个 HTTP 服务器的请求是一个流,stdout 也是一个流.流 ...
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素 ...

前端FISH框架学习笔记

Fish

0. 学习路线

1. 环境搭载

2. 前端基础入门

2.1 css

2.2 js/jQuery

2.3 jQuery

* jQuery HTML/CSS方法

3. fish-cli脚手架模块化开发

3.1 脚手架执行流程

1. index.html引入 fish-desktop-require.js 文件，用于处理模块文件加载开发

2. 入口文件main.js，加载主视图IndexView，进行页面渲染初始化

3. 主视图IndexView又定义两个子视图的依赖，框架会分析依赖关系，自动加载依赖模块文件 modules/module-a/view/AlphaView.js 和 modules/modue-b/views/BetaView.js，如果这两个模块也有依赖，重复刚才分析操作加载

4. 子视图js，类似于主视图，一般会加载一些模块插件（hbs/css/i18n/text）

5. 模块插件：

3.2 一般项目结构

3.3 模块语法

3.3.1 视图

数据模型

数据集合

前端路由

3.4 实际项目源码阅读

3.5 实际项目开发

前端FISH框架学习笔记相关推荐

最新文章

热门文章

前端FISH框架学习笔记

Fish

0. 学习路线

1. 环境搭载

2. 前端基础入门

2.1 css

2.2 js/jQuery

2.3 jQuery

* jQuery HTML/CSS方法

3. fish-cli脚手架 模块化开发

3.1 脚手架执行流程

1. index.html引入 fish-desktop-require.js 文件，用于处理模块文件加载开发

2. 入口文件main.js，加载主视图IndexView，进行页面渲染初始化

3. 主视图IndexView又定义两个子视图的依赖，框架会分析依赖关系，自动加载依赖模块文件 modules/module-a/view/AlphaView.js 和 modules/modue-b/views/BetaView.js，如果这两个模块也有依赖，重复刚才分析操作加载

4. 子视图js，类似于主视图，一般会加载一些模块插件（hbs/css/i18n/text）

5. 模块插件：

3.2 一般项目结构

3.3 模块语法

3.3.1 视图

数据模型

数据集合

前端路由

3.4 实际项目源码阅读

3.5 实际项目开发

前端FISH框架学习笔记相关推荐

最新文章

热门文章

3. fish-cli脚手架模块化开发