博客

《 网站与应用 》系列课程,您慢慢看

我们一起学了很多,有时又会感觉什么也没学到,有天我听了一个广播受到点启发,这种迷惘地感觉其实是因为没有目标,没有终点,因为学习本身就是一件没有终点的事儿。我想我们可以阶段性地定一些目标,然后完成,这样感觉会好一些,可以验证所学,也可以接受一些挑战。

先从一个商业网站开始吧,功能不会太难,需求又很大,又可以很好地展示网站从设计到开发再到部署的整个过程。我觉得商业网站的主要任务就是去讲故事给目标客户听,让他们了解,接受,使用网站提供的产品与服务,这其实也是任何网站与应用都需要有的功能。

模仿

为了更真实一点,开始我想假装某国际公司找到我们,要求设计与开发一个网站。我还我问过一位在上海某家 Web 开发机构工作的大哥,咨询他想要做的这个网站的报价,如果是机构做的话,大概 30 万左右,个人做大概是 8 万左右。我给这家公司发了邮件,请求使用他们网站的图片与文字。对方非常客气地拒绝了。所以,我们得低调点,偷偷地用一小部分。

我尽量让网站的设计与开发更普遍化,因为大部分商业网站或者说任何网站都有一些共用的东西:导航,幻灯片,图文列表,产品页面 ...   所以不管你以后是不是要做商业网站,也可以学到一些你需要的东西。

第 15 周课程与内容简报

我们一起学了很多,有时又会感觉什么也没学到,有天我听了一个广播受到点启发,这种迷惘地感觉其实是因为没有目标,没有终点,因为学习本身就是一件没有终点的事儿。我想我们可以阶段性地定一些目标,然后完成,这样感觉会好一些,可以验证所学,也可以接受一些挑战。

BEM:组织 CSS 样式的方法

组织 CSS 样式的方法挺多的,这些方法可以让你更好的去创建与管理 CSS 样式。这些方法都有自己的名字,BEM 就是一种组织 CSS 样式的方法。B(Block)E(Element)M(Modifier),区块__元素--修饰符。

比如你想为下面这块代码添加 CSS 样式:

 <ul>
   <li>item 1</li>
   <li>item 2</li>
 </ul>

CSS 样式看起来可能像这样:

ul {
  list-style: none;
}

ul li {
  margin-bottom: 16px;
}

在上面的样式里,我用了后代选择器(Descendant selectors),ul li 表示的是,找到所有的 li 标签,这个标签在 ul 标签里面。

如果用 BEM 的方式去创建这块样式,应该像这样:

.list {
  list-style: none;
}

.list__item {
  margin-bottom: 16px;
}

加入学习小组,从头开始完成一个商业网站(已满员,不能再申请了)

50 人左右的小组已满员,不能再申请加入了。

小组任务:从头开始完成一个网站。少扯淡,多学习。有任务,必须完成。不答疑,只交流特定主题。凭宁皓网用户名 + 订单号验证加入 QQ 群:177757910(验证信息填写您在宁皓网的用户名 + 订单号,比如 zhangsan-2610)。

要做的是一个商业网站,这种网站的主要功能就是展示内容,给用户讲故事,让潜在用户成为网站提供的产品与服务的真实用户。这种网站的需求量很大,任何个人,组织,公司都有可能要展示产品与服务并且销售出去,这里说的销售不一定非得是钱的交易,销售的可以是一个点子,一种思想。

如果你是宁皓网的付费会员,并且对这种商业网站有兴趣,加入这个学习小组。

Redux:数据流

Redux 应用里的数据流是单向的。数据的生命周期有四个阶段:

  1. 调用 store.dispatch(action).

    一个动作就是一个纯对象,描述了发生的事情,比如:

     { type: 'LIKE_ARTICLE', articleId: 42 }
     { type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }
     { type: 'ADD_TODO', text: 'Read the Redux docs.' }
    

    把动作想成是一些简要的新闻: “Mary liked article 42.” , “‘Read the Redux docs.' was added to the list of todos.”。在应用的任何地方你可以调用 store.dispatch(action),包括组件,XHR 回调等等。

Redux:Store

Redux 应用里的 Actions 表示在应用里发生的事情,Reducers 会根据发生的事情去更新应用的状态。再来了解一下 Store。

Store 的主要任务是:

  1. 持有应用的状态。
  2. 允许访问状态:getState()
  3. 允许更新状态:dispatch(action)
  4. 注册监听器:subscribe(listener)
  5. subscribe(listener) 返回的东西,可以注销监听器。

注意在 Redux 应用里只有一个 Store。如果想分离数据处理逻辑,可以使用组合 Reducer 的方式。

有了 Reducer ,很容易用它去创建一个 Store 。之前我们用 combineReducers() 把几个 Reducer 组合成了一个,现在我们可以去导入它,然后把它交给 createStore()

家庭作业:模仿一个纯 CSS 页面

挑战一下刚学完 CSS 的朋友,如果你不知道下一步去做什么,我建议你可以模仿一些页面,不过也得小心,不要去模仿不好的设计。我找到一个页面设计非常适合初学者去模仿。

Redux:Reducers

Actions 描述了在应用里面发生的事情,但是应用的状态(state)具体应该怎么样响应这些动作是 Reducers 的任务。

设计状态

state(状态),指的就是数据。在 Redux 里,应用的所有的状态都会存储在唯一的一个对象里。写代码之前最好先想想这个对象的形状。

比如我们的任务列表应用,会存储两种东西:

  1. 当前所选的可见性过滤器
  2. 任务列表项目

在状态树里会存储数据还有一些 UI(界面) 状态,最好让数据与 UI 状态分开。

Redux:动作 Actions

动作(Actions)。在 Redux 的动作里会带着发送给 Store 的信息,动作是 Store 的唯一信息来源,可以使用 store.dispatch() 把动作发送给 Store。

下面就是一个动作,这个动作表示的是添加新的任务项目(假设这个动作来自一个任务列表应用):

const ADD_TODO = 'ADD_TODO'
{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}

动作其实就是一个 JavaScript 对象,它里面必须得有个 type 属性,这个属性表示的是要执行的动作的类型,也就是在你的应用里会发生的一些事情。一般这个类型的值是一个字符串恒量,但这并不是必须的,你可以直接使用一个普通的字符串表示动作,但是对于大型应用来说,让动作的名字使用恒量是有好处的。在动作对象里,除了必须的 type 属性以外,你可以在这个对象里放任何东西。你可以参考 Flux Standard Action ,学习动作的结构。

第 13 周课程与内容简报

​学会自定义 Drupal 上的表格还有文本框的样式,了解 Drupal 的文件与图像。再看点关于函数式编程的东西。



微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅宁皓网公众号。



240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

7943
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点